7. Mai 2011

DE_flag GB_flag

for english readers

Die Oberfläche auf die 2010-er Jahre updaten

Ergänzung 11.5.2011: mein Vorschlag hier betrifft Wrapper-Formulare, umhüllende Formulare. In der Hülle werden die vorhandenen Formulare weiter verwendet.

Ja das Verfahren ist vergleichbar mit den Wrapper-Methoden, umhüllende Methoden. Schon im Handbuch zur 4D V1 gab es die OPEN CENTERED WINDOW-Methode, die das Zentrieren der Fenster vereinfacht. Dieses Beispiel einer Wrapper-Methode hat es bis in das Handbuch zur V12 geschafft.

Ausgangslage für mich: bestehende 2004er Datenbank, die zuverlässig laufen auf V12 updaten. Das Update auf die V12 bringt mehr Geschwindigkeit. Das zusätzliche Tempo ist ein Vorteil der die Kosten relativiert. Außerdem brauche ich keine alten Macs zu horten, auf denen Rosetta läuft.

Xx Die Oberfläche in den von V2004 auf V12 konvertierten Datenbanken sieht so alt aus wie bisher. Auf Windows immer noch das MDI-Fenster mit dem knallroten X und darunter mickrig klein und farblich versteckt das x zum Schließen des eigentlichen Fensters.

Auf dem Mac wird es auch einfenstriger, iOS kommt back to the Mac und meine Anwender mögen das.

Vielen Menschen, die ich beobachte, sind meine vielen Fenster ein Chaos. Immer schön alles aufräumen, lieber leere Flächen in Betonfarben als irgendwo eine Ecke von was anderem durchscheinen zu sehen.

Mein Ziel für die nächsten Umbauarbeiten an Oberflächen ist das Beschränken auf ein Fenster. Zu viel Arbeit darf es auch nicht kosten. Die V12 hilft mir dabei, denn endlich kann ich Unterformulare als Seite einbinden.

In neuen Projekten reduziere ich meinen Navigator auf eine Spalte ganz links. Die Suche findet eine Auswahl und stellt diese in einer Liste* dar. Ganz rechts außen sind die verknüpften Detailinfos als Liste zu sehen. In der Mitte werden die Detailinfos eingeblendet und dazu verwende ich verschiedene Formulare vom Typ Unterformulare als Seite.

pegasi pegasi2

Bestehende Formulare weiternutzen!

DreiAreas

Die Kunden sind an die Formulare gewöhnt. Einen Button zu verschieben oder andere Kleinigkeiten, provozieren Aufstände. Außerdem, wenn es funktioniert und debugged ist, warum ändern?

Deswegen bin ich sehr zufrieden, daß das Verfahren klappt so gut in bestehenden Projekten funktioniert. Ich gestalte ein Formular für den Hauptarbeitsplatz neu. Nenne es Hauptarbeitsplatz, Steuerzentrale oder was sonst Sinn macht. Dieses Formular ist der Conatiner für die vorhandenen – ein Wrapper-Formular, vergleichbar einer Wrapper-Methode.

  • Die Liste links habe ich schon als Navigator. Die wird dahin optimiert, daß weniger Breite verbraucht wird.
  • Die Liste rechts ist nicht neu in ihrer Logik.
  • In der Mitte werden die vorhandenen Formulare wiederverwendet, incl. der Methoden.
Aussenrum, das ist die Hülle, der Wrapper, für die bestehenden Formulare.

Im Formular-Editor sieht das so aus:

  • auf Seite 0 befinden sich die Hintergründe, Buttons für alle Seiten, Splitter und die Rechtecke der Aufteilung des Formulares.
  • auf Seite 1 sind alle Unterformulare als Seite einmal hingelegt
  • es gibt keine weiteren Seiten
  • die Formular-Methode kümmert sich nur um das Ein- und Ausblenden der Unterformulare. Die Unterformulare bringen ihre eigene Logik mit.
Kaum zu glauben, wie gut das funktioniert.

page0 page1

Die Methoden der Formulare, jetzt Unterformulare, bleiben fast unberührt. Nur der Event On bound variable change ist abzufangen:
: (Form event=On bound variable change)
  $P_boundObj:=OBJECT Get pointer(Object subform container)
  Case of
  : (Nil($P_boundObj))
  : ((Type($P_boundObj->)#Is LongInt) & (Type($P_boundObj->)#Is Real))
    //hängt vom eindeutigen ID der Datensätze ab. Meine sind Longint
  Else
    // Datensatz sichern und neuen laden
  End case

Nicht unerwartet, stecken die größten Hürden im eigenen Usus … mehrere Formularseiten habe ich seit V3 geübt. Eine weitere große Hürde ist das Handbuch. Es ist technisch-umständlich und überhaupt nicht hilfreich, die Potentiale der bereitgestellten Technik zu erkennen. Das Kapitel Unterformulare als Seite schreckt eher ab, gar nicht erst die Bildchen angucken.

Extra-Infos

Neben-Informationen zu einem Datensatz müssen nicht ständig und überall eingeblendet werden. Das gilt im Besonderen für selten zu ändernde Einstellungen.

baseLayout aboveLayout

Betrachten Sie die beiden Screenshots links und rechts. Links sehen Sie ein Formular, in dem an jeden Pixel gespart wird. Sogar die Etiketten werden dynamisch eingeblendet, denn beim Lesen werden sie nicht gebraucht, nur während der Eingabe.

Auch für Geburtstag, Steuernummern und die ein- oder andere Einstellung ist der verfügbare Platz zu schade.

i_24

Über den i-Button, wie ihn die Dashboard-Widgets und iOS bekannt gemacht haben, gelangt man zu den weiteren Informationen.

Auch die weiteren Informationen sind ein Unterformular als Seite. Ein transparentes SVG als Hintergrund dunkelt den Hauptdatensatz ab. So sehe ich stets, um welchen Datensatz es geht, während ich die Nebeninfos lese, ergänze und korrigiere. Bin ich durch, beendet der Button Fertig und schiebt die Nebendaten aus der Sicht**.

Seminar gefällig?

Wenn Sie ahnen was machbar ist und nicht ebenfalls viel Zeit investieren wollen, dann treffen wir uns in einem 4D-Werkstatt-Seminar. Melden Sie sich! Stehen Sie vor dem Update einer V2004 auf V12, bringen Sie die frisch konvertierte Datenbank mit.

* ja, das ist eine Listbox! Multiline, formatierter Text … kein Problem und schnell mit SVG und HTML-Tags

** könnte ich das Rein- und Rausschieben wie vom iOS gewöhnt und auch sonst häufiger zu sehen, animieren, wäre das klasse!

seminarlogo
DE_flag GB_flag

lieber auf deutsch

Updating the User-Interface into today

Complement may 11 2011: I'm suggesting wrapper-forms. Those forms wrap the existing forms into a more current design.

This is similar to wrapper-methods. From the manuals of 4D V1 the OPEN CENTERED WINDOW-methode survived into the V12-manuals, the first wrapper-method I learned to know.

I've got to update a reliable V2004-solution. V12 is much faster, which is a good reason to pay. Furthermore I need not keep old Macs which support Rosetta.

Xx The userinterface shows its age. Same MDI-window with that huge red X to kill the app and that hidden x to close a window.

Even the Mac is on its way to a single-window user-interface. iOS is the reason and people love it.

Watching, I discovered many feel my many windows scattered on two screens much too chaotic. They prefer tidy, single windows, even if there are concrete-coloured empty areas occupying central spots.

So I've got to reduce to one window. I'd love to do, if I can be lazy. Yes I can because that V12-feature Page subforms helps a lot.

I'm already settling on one window in new projects. On the very left is an enhanced version of my Navigator. The search on top reduces to a single list*. On the very right is the list of related structures. The centerpart displays detail-info depending on the selections in the lists on the left and the right hand side. I'm using Page subforms for the centerpart.

pegasi pegasi2

Updating an existing project, I'm

reusing existing forms!

DreiAreas

The users are familiar with the forms. Any change, even moving a button or any other fleabite, triggers discussions with no outcome. And then, if it works and is debugged, why bother?

I'm very happy how well Page subforms work, especially for existing projects. I'm creating a new main-form – naming this one main-form or dispatcher or what describes its purpose best – as a wrapper around existing forms. We know about wrapper-methods, this is a wrapper-UI.

  • the list on the left already exists, it's the navigator. Some optimizations concerning new width will fit.
  • the logic of the list on the right isn't new, too. It's mainly joining separate objects, buttons into one list.
  • the centerpart reuses existing forms, incl. the form-methods.
The outer parts are the wrapper-parts.

Looking on the form-editor reveals the concept:

  • page 0 holds the backgrounds, buttons for all pages, splitters and the rects of the main areas.
  • page 1 collects all page subforms for every possibility
  • there are no further pages
  • the form-method handles visibility and moves subforms into sight. The subforms bring all the logic with them.
Hard to believe, how well this works.

page0 page1

The methods of the forms, now subforms, need only be enhanced to catch the event On bound variable change:
: (Form event=On bound variable change)
  $P_boundObj:=OBJECT Get pointer(Object subform container)
  Case of
  : (Nil($P_boundObj))
  : ((Type($P_boundObj->)#Is LongInt) & (Type($P_boundObj->)#Is Real))
    //depends on your unique IDs for records. Mine are Longint
  Else
    // save existing record and load the new one
  End case

As was to be expected, the main hinderance is my own thinking … I've trained myself so well since V3 thinking in multipage-forms. And the manual is of not much help, too. I can imagine, that writing the chapters about Page subforms was a nightmare for the documentarists and the illustrations didn't help solving the complexity.

Extra-Infos

Secondary information for a record need not be displayed everywhere and anytime. That's more than true for seldomly accessed data, like changing some other-info.

baseLayout aboveLayout

To the right and to the left of this paragraph, there are two screenshots of the same form. On the left the standard form, not wasting any pixel, even displaying labels dynamically, visible only while checking or entering data.

Seldom to change data in this case are birthday, tax- and VAT-IDs to name a few.

i_24

The i-Button is well known from iOS and the Dashboard-Widgets. Clicking the i reveals further information and preferences.

The secondary infos are layered on top of the main infos, containing fields and labels of a subform as page. There is a semi-transparent SVG in the background of that form to darken the main-information of the record. This simulates UI-layers. So my customer always know, which record she is in, while reading, entering or correcting the secondary fields. The button Fertig = Done moves that form out of sight again**.

Better visit a seminar?

If you get the feeling, this is what you're looking for, and if you don't want to invest as much time yourself, we could meet at a 4D-Werkstatt-Seminar. Tell me!

* yes, this is a listbox! Multiline, multistyle … no problem and fast using SVG and HTML-Tags

**I'd love to animate that moving in and out, as is done so wonderfully with iOS! And of cause, some blurr would be appreciated