< Zurück | Weiter >

Lerneinheit 4: Benutzerschnittstelle für die Berechnungsfunktion erstellen

Starten Sie die Erstellung der Berechnungsfunktion mithilfe der EGL-Assistenten und anschließend mithilfe des Rich-UI-Editors.

Sie können Widgets zu einer Webseite hinzufügen, indem Sie Inhalt auf die Entwurfsoberfläche des Rich-UI-Editors ziehen. Durch die Drag-and-drop-Aktion und die nachfolgende Interaktion mit dem Editor wird der Quellcode für den Rich-UI-Handler aktualisiert, den Sie gerade entwickeln.

Die beiden folgenden Quellen von Drag-and-drop-Inhalt sind verfügbar:
  • Eine Palette von Widgettypen
  • Die EGL-Datensicht, die Datentypdefinitionen wie EGL-Satzabschnitte bereitstellt. Zuerst ziehen Sie Inhalt aus dieser Sicht und dann wählen Sie einen der Widgettypen aus, die den ausgewählten Datentyp anzeigen können.

Standardmäßig befindet sich die Widgetpalette rechts im Editor und die Datensicht links unten in der Workbench.

Rich-UI-Handler erstellen

  1. Wählen Sie im Projekt MortgageUIProject den Ordner EGLSource aus und klicken Sie in der Menüleiste auf die Schaltfläche Neuer Rich-UI-Handler.
    Das Symbol für neue Rich-UI-Handler ist das dritte von vier in der zweiten Symbolgruppe in der Menüleiste.
  2. Geben Sie im Fenster Neuer Rich-UI-Handlerabschnitt folgende Informationen ein:
    1. Geben Sie im Feld Paket den folgenden Namen ein:
      handlers
    2. Geben Sie im Feld Name der EGL-Quellendatei den folgenden Namen ein:
      MortgageCalculatorHandler
    3. Klicken Sie auf Fertig stellen.
    Der neue Handler wird im Rich-UI-Editor in der Entwurfssicht geöffnet. EGL erstellt für Sie im Ordner EGLSource das Paket handlers.
    Der Rich-UI-Editor wird standardmäßig in der Entwurfssicht geöffnet und zeigt rechts eine Palette von Widgets an.

Benutzerschnittstelle konstruieren

So konstruieren Sie die Benutzerschnittstelle für die Berechnungsfunktion:

  1. Erstellen Sie eine Satzvariable.
    1. In der EGL-Datensicht, die sich standardmäßig links unten in der Workbench befindet, werden alle Basisvariablen und Satzvariablen für den Handler aufgeführt, der gerade im Editor geöffnet ist. Klicken Sie mit der rechten Maustaste auf die leere Fläche unterhalb des Eintrags für den Handler MortgageCalculatorHandler. Klicken Sie auf Neu > EGL-Variable.
    2. Fordern Sie im Assistenten Neue EGL-Datenvariable erstellen eine neue Satzvariable auf der Basis des Satzabschnitts MortgageCalculationResult an:
      • Stellen Sie sicher, dass die Typauswahl auf Datensatz eingestellt ist.
      • Wählen Sie den Datensatz MortgageCalculationResult aus. Dieser Typ sollte der erste Eintrag in der Liste sein.
      • Wählen Sie im Bereich Feldgruppeneigenschaften für Feldgruppe keine Option aus.
      • Geben Sie im Feld Namen des Feldes eingeben den folgenden Text ein:
        inputRec
      • Klicken Sie auf Fertig stellen.
    Assistent 'Neue EGL-Datenvariable erstellen'
    Mit diesem Prozess wird die folgende Datensatzdeklaration im Quellcode des Handlers erstellt:
    inputRec MortgageCalculationResult;
    Außerdem zeigt der Prozess die neue Satzvariable in der EGL-Datensicht an, sodass Sie die Variable in den Editor ziehen können.
    Die EGL-Datensicht zeigt die Variable inputRec an.
  2. EGL hat für Sie automatisch ein Widget namens GridLayout als erste Benutzerschnittstelle erstellt. Standardmäßig hat dieses Widget vier Zeilen und drei Spalten. Sie können die Anzahl der Zeilen und Spalten auf unterschiedliche Weise ändern, wie nachstehend gezeigt:
    1. Klicken Sie mit der rechten Maustaste auf das Widget GridLayout, um eine Zelle hervorzuheben.
    2. Klicken Sie auf Löschen > Zeile.
    3. Klicken Sie mit der rechten Maustaste noch einmal auf das Widget GridLayout, um eine Zelle hervorzuheben.
    4. Klicken Sie auf Löschen > Spalte.
    5. Wechseln Sie nun in die Sicht 'Eigenschaften', die sich standardmäßig auf einer der Registerkarten unter dem Editorteilfenster befindet.
    6. Legen Sie auf der Seite 'Allgemein' für die Eigenschaft rows den Wert 1 und für die Eigenschaft columns den Wert 1 fest.
      Sicht 'Eigenschaften'
    Das geänderte Widget GridLayout ist weiterhin die erste Benutzerschnittstelle der Webseite, besitzt jedoch nun eine einzelne Zelle, zu der Sie weiteren Inhalt hinzufügen werden.
  3. Klicken Sie in der EGL-Datensicht auf die Variable inputRec und ziehen Sie diese Variable aus der EGL-Datensicht auf eine Zelle des Widgets GridLayout im Editor.
    Ein Datensatz wird aus der Datensicht in das Widget GridLayout gezogen.
    EGL zeigt die Seite Datenwidgets konfigurieren des Assistenten Daten einfügen an. Konfigurieren Sie auf dieser Seite die Widgets, die EGL auf der Basis der Felder in dem Datensatz erstellt, den Sie in den Editor gezogen haben.
  4. Nehmen Sie auf der Seite Datenwidgets konfigurieren folgende Änderungen vor:
    1. Klicken Sie im Bereich Widgets erstellen für auf Bearbeitbare Daten. Mit dieser Option werden die Standardwidgets festgelegt, die EGL in dem Assistenten anzeigt und die keinerlei Beschränkungen in Bezug auf Schreibschutz aufweisen.
    2. Klicken Sie in der Spalte 'Widgettyp' des Feldes loanAmount auf den aktuellen Wert, klicken Sie auf den Abwärtspfeil und wählen Sie DojoCurrencyTextBox aus. Dieses Widget dient zur Formatierung und Validierung von Geldbeträgen.
    3. Behalten Sie das Standardwidget DojoTextField für das Widget interestRate bei.
    4. Klicken Sie in der Spalte 'Widgettyp' des Feldes term auf den aktuellen Wert, klicken Sie auf den Abwärtspfeil und wählen Sie DojoComboBox aus.
    5. Wählen Sie das Kontrollkästchen in den Feldern monthlyPayment und interest ab. Später werden Sie ein Widget zum Feld 'monthlyPayment' hinzufügen. Das Feld 'interest' gehört nicht zu dieser Benutzerschnittstelle.
    6. Ändern Sie die Werte in der Spalte 'Bezeichnung' einschließlich der Doppelpunkte wie folgt:
      • Ändern Sie "loanAmount" in "Loan amount:".
      • Ändern Sie "interestRate" in "Interest rate:".
      • Ändern Sie "term" in "Term:".

      Sie haben gerade die jeweils ersten Dateneingabefelder in dem zu erstellenden Formular angepasst.

    7. Stellen Sie sicher, dass Unterstützung für Formatierung und Validierung hinzufügen ausgewählt ist. Mit dieser Option werden zu jedem Widget eine Bezeichnung und ein Controller hinzugefügt, daneben ein Formularmanager und zugehörigen Funktionen, die für den gesamten Inhalt des neues Rasterlayouts gelten. Wählen Sie nicht die Option Fehlerbezeichnung zur Unterstützung von Fehlernachricht verwenden aus. Bei dieser Option wird für jede controllerspezifische Fehlernachricht eine Fehlerbezeichnung bereitgestellt. Dieses Lernprogramm verwendet jedoch andere Mechanismen, um das Auftreten eines Fehlers anzuzeigen.
    8. Schauen Sie sich die folgende Abbildung an. Wenn Ihre Seite in etwa damit übereinstimmt, klicken Sie auf Fertig stellen.
    Seite 'Datenwidgets konfigurieren' mit allen korrigierten Feldern
    Die Entwurfssicht wird angezeigt. Sie enthält nun ein neues, inneres Rasterlayout, das sich innerhalb des ursprünglichen Rasterlayouts befindet und den neuen Inhalt enthält.
    Ein Rasterlayout wird innerhalb eines anderen angezeigt.
  5. Drücken Sie zum Speichern Ihrer Arbeit die Tastenkombination Strg+S.
  6. Passen Sie zur Vereinheitlichung der Darstellung die Größe des zweiten und dritten Eingabefelds an:
    1. Heben Sie das Eingabefeld für den Zinssatz hervor. Die gepunktete Linie sollte nur dieses Feld umschließen.
      Nur das Quadrat nach der Bezeichnung 'Zinssatz' wird hervorgehoben.
    2. Geben Sie in der Sicht 'Eigenschaften' auf der Seite 'Position' für die Eigenschaft width den folgenden Wert ein:
      100
      Dieser Wert ist mit der Standardbreite für das Widget DojoCurrencyTextBox identisch, das Sie für die Kreditsumme verwendet haben.
    3. Wiederholen Sie die Schritte a und b für das Feld Term. Klicken Sie auf die Anzeigeoberfläche, um die Handbuch anzuzeigen.
  7. Legen Sie die gültigen Werte und den Standardwert für das Dojo-Kombinationsfeld fest:
    1. Klicken Sie bei hervorgehobenem Feld Term in der Sicht 'Eigenschaften' auf die Seite 'Allgemein'.
    2. Klicken Sie neben der Eigenschaft values auf die Auslassung (...), um das Fenster Werte anzuzeigen.
      Fenster 'Werte'
    3. Geben Sie im Feld Zeichenfolgen zur Liste hinzufügen oder aus ihr entfernen folgende Zahl ein:
      5
    4. Klicken Sie auf Hinzufügen.
    5. Geben Sie alle folgenden Zahlen ein. Klicken Sie dabei nach dem Hinzufügen jeder Zahl auf Hinzufügen.
      10
      15
      30
      Das Fenster 'Werte' sollte aussehen wie die folgende Abbildung:
      Jede Zahl im Fenster 'Werte' wird in einer neuen Zeile angezeigt.
    6. Klicken Sie auf OK.
  8. Führen Sie folgende Schritte aus, um sicherzustellen, das die Eingangsanzeige des Kombinationsfelds den Wert 30 enthält:
    1. Klicken Sie im Rich-UI-Editor auf die Registerkarte Quelle.
    2. Legen Sie einen Standardwert für die Laufzeit fest. Wechseln Sie in die Zeile, in der der Datensatz inputRec deklariert wird, und fügen Sie einen Block zum Festlegen von Werten zu der Deklaration hinzu, wie nachstehend gezeigt:
      inputRec MortgageCalculationResult {term = 30};
      Damit integrieren Sie den Standardwert in die Deklaration. Dies ist das einfachste Verfahren. Sie hätten jedoch auch die Funktion start() wie folgt aktualisieren und denselben Effekt erzielen können:
      function start()
         inputRec.term = 30;
      end
  9. Prüfen Sie im Quellcode die folgende Controller-Deklaration, mit der die Variable inputRec.term mit dem Dojo-Kombinationsfeld verbunden wird:
    inputRec_term_controller Controller 
       { @MVC {model = inputRec.term, view = inputRec_term_comboBox as Widget}};
    Die Controller-Deklaration stellt sicher, dass der Wert, den Sie der Variablen inputRec.term zugewiesen haben, bei der Initialisierung des Kombinationsfelds verwendet wird.
  10. Drücken Sie zum Speichern Ihrer Arbeit die Tastenkombination Strg+S.
  11. Klicken Sie im Rich-UI-Editor auf die Registerkarte Vorschau. Die Webseite zeigt die Laufzeitanzeige an und sollte mit der folgenden Abbildung übereinstimmen:
    Die Felder werden angezeigt und das Kombinationsfeld hat den Initialisierungswert.
    Klicken Sie zum Aktualisieren der Anzeige auf das Symbol ganz rechts in der Rich-UI-Symbolleiste, die sich rechts oben auf der Seite 'Vorschau' befindet (siehe Abbildung):
    Rich-UI-Symbolleiste
  12. Fügen Sie neuen Inhalt zum Widget für das innere Rasterlayout (GridLayout) hinzu, in dem das Datensatzdetail enthalten ist:
    1. Klicken Sie im Rich-UI-Editor auf die Registerkarte Entwurf.
    2. Klicken Sie mit der rechten Maustaste auf das Widget für das innere Rasterlayout, das die Bezeichnung inputRec_ui trägt. Dieser Name wird oben in der Sicht 'Eigenschaften' angezeigt.
    3. Ändern Sie in der Sicht 'Eigenschaften' auf der Seite 'Allgemein' die Eigenschaft rows in den folgenden Wert:
      6
      Wenn Sie auf die Entwurfsoberfläche klicken, werden die neuen Zeilen unter der Zeile 'Term' angezeigt.
      Das Widget für das innere Rasterlayout enthält nun sechs Zeilen.
  13. Fügen Sie ein zweites Widget für das innere Rasterlayout hinzu, um eine Übergabeschaltfläche einzubinden.
    1. Ziehen Sie aus dem Ablagefach Layout der Palette ein Widget GridLayout auf die erste Zelle der ersten leeren Zeile.
      Das Rasterlayout wird übergeben.
      Mithilfe des Widgets GridLayout positionieren Sie die Übergabeschaltfläche und eine animierte Verarbeitungsabbildung. Geben Sie dem Widget den folgenden Namen:
      buttonLayout
    2. Klicken Sie mit der rechten Maustaste auf das neue Widget, um das angezeigte Menü anzuzeigen.
      Eine Zeile wird gelöscht.
    3. Wählen Sie Löschen aus und klicken Sie auf Zeile. Nun wird in der Sicht 'Eigenschaften' auf der Seite 'Allgemein' angezeigt, dass das Rasterlayout zwei Zeilen enthält.
    4. Ändern Sie buttonLayout über die Sicht 'Eigenschaften' oder das gerade verwendete Menü so, dass eine einzige Spalte vorhanden ist. Wenn Sie einen Fehler machen und zu einer früheren Anzeige zurückkehren wollen, drücken Sie 'Strg+Z'.
    5. Wenn buttonLayout aktiv ist, wechseln Sie auf die Seite 'Layout' der Sicht 'Eigenschaften'. Gehen Sie wie folgt vor, um das Layout in einer ansonsten leeren Zeile zu zentrieren:
      • Ändern Sie die Eigenschaft horizontalAlignment in CENTER.
      • Ändern Sie die Eigenschaft horizontalSpan in 2.
      Das neue Widget GridLayout wird in einer leeren Zeile zentriert.
  14. Drücken Sie zum Speichern Ihrer Arbeit die Tastenkombination Strg+S.
  15. Erstellen Sie eine Übergabeschaltfläche und binden Sie sie in eine Stubfunktion ein:
    1. Ziehen Sie aus dem Ablagefach Anzeige und Eingabe der Palette eine Dojo-Schaltfläche auf die obere Zelle von buttonLayout.
      Ziehen Sie die Schaltfläche auf die erste der beiden Zellen.
    2. Geben Sie der Schaltfläche den folgenden Namen:
      calculationButton
    3. Ändern Sie in der Sicht 'Eigenschaften' auf der Seite 'Allgemein' die Eigenschaft text in die folgende Bezeichnung:
      Berechnen
      Als nächstes müssen Sie die Schaltfläche an eine Funktion binden, die für Sie erstellt wurde, als Sie die Variable inputRec auf den Editor zogen.
    4. Wählen Sie auf der Registerkarte Ereignisse das Ereignis onClick aus. Klicken Sie in der Spalte 'Funktion' auf die leere Fläche, um eine Schaltfläche mit Pfeil anzuzeigen. Klicken Sie auf die Pfeilschaltfläche und wählen Sie inputRec_form_Submit aus. In der nächsten Lerneinheit füllen Sie den Code für diese Funktion aus.
      Im Menü werden zwei verfügbare Funktionen angezeigt.
      Beachten Sie aus Pluszeichen in der letzten Spalte der Zeile. Sie hätten auf diese Schaltfläche klicken können, um eine neue, an die Schaltfläche Berechnen zu bindende Funktion zu erstellen. Die Workbench hätte die Quellensicht für Sie angezeigt und automatisch eine Stubfunktion erstellt, eine Funktion, die keine Code enthält, aber für Ihre Eingabe bereit ist.
  16. Fügen Sie eine animierte Abbildung hinzu, die anzeigt, dass eine Hypothekenberechnung in Bearbeitung ist.
    1. Ziehen Sie aus dem Ablagefach Anzeige und Eingabe der Palette ein Widget Image auf die leere Zelle unter der Schaltfläche Berechnen.
    2. Geben Sie der Abbildung im Fenster Neue Variable den folgenden Namen:
      processImage
    3. Weisen Sie in der Sicht 'Eigenschaften' auf der Seite 'Allgemein' im Feld src der Abbildung eine Quelle zu:
      tools/spinner.gif

      Die Abbildung befindet sich im Ordner com.ibm.egl.rui.dojo.samples/WebContent. Die Entwicklungsumgebung betrachtet die Ordner WebContent in allen Projekten Ihres Arbeitsbereichs als einen einzigen virtuellen Ordner.

    4. Wählen Sie ebenfalls in der Sicht 'Eigenschaften' auf der Seite 'Darstellung' das Kontrollkästchen visible (sichtbar) ab. Die Abbildung bleibt ausgeblendet, bis auf die Schaltfläche Berechnen geklickt wird.
    5. Stellen Sie ebenfalls in der Sicht 'Eigenschaften' auf der Seite 'Layout' die Eigenschaft horizontalAlignment auf CENTER ein.
  17. Drücken Sie zum Speichern Ihrer Arbeit die Tastenkombination Strg+S.
  18. Fügen Sie ein Widget hinzu, um die Ergebnisse der Berechnung anzuzeigen.
    1. Ziehen Sie aus dem Ablagefach Anzeige und Eingabe der Palette ein Widget TextLabel auf die erste Zelle der fünften Zeile, die sich unter der neuen Abbildung befindet. Geben Sie dem Widget den folgenden Namen:
      paymentLabel
      Sie verwenden hier ein Bezeichnungswidget, weil der Benutzer dieses Feld nicht ändert. Die Anwendung berechnet und aktualisiert den Inhalt.
    2. Geben Sie in der Sicht 'Eigenschaften' auf der Seite 'Allgemein' für die Eigenschaft text den folgenden Wert (einschließlich Dollarzeichen) ein:
      $0.00
    3. Stellen Sie auf dieser Seite die Eigenschaft fontSize auf 18 ein.
    4. Stellen Sie ebenfalls in der Sicht 'Eigenschaften' auf der Seite 'Layout' die folgenden Eigenschaften ein:
      • Stellen Sie horizontalAlignment auf CENTER ein.
      • Stellen Sie horizontalSpan auf 2.
      Wenn Sie auf die Entwurfsoberfläche klicken, sieht die Webseite wie die folgende Abbildung aus:
      Das Feld für die monatlichen Raten wird in großer Schrift angezeigt.
  19. Fügen Sie ein Fehlerfeld für allgemeine Fehler hinzu, beispielsweise für Probleme beim Herstellen einer Verbindung zu dem Service.
    1. Ziehen Sie aus dem Ablagefach Anzeige und Eingabe der Palette ein Widget TextLabel auf die erste Zelle der letzten leeren Zeile und geben Sie ihm den folgenden Namen:
      errorLabel
    2. Ändern Sie folgende Eigenschaften für das Widget TextLabel:
      • Löschen Sie auf der Seite 'Allgemein' den Standardwert 'TextLabel' der Eigenschaft text.
      • Klicken Sie ebenfalls auf der Seite 'Allgemein' auf die leere Schaltfläche neben dem Eigenschaftsfeld color. Klicken Sie anschließend auf Namensformat, blättern sie in der Liste nach unten und wählen Sie Rot aus. Klicken Sie auf OK. Dadurch wird die Schriftfarbe für alle in der Bezeichnung angezeigten Nachrichten festgelegt.
      • Stellen Sie auf der Seite 'Position' die Eigenschaft width auf 250 ein.
      • Ändern Sie auf der Seite 'Layout' die Eigenschaft horizontalSpan in 2.
    3. Klicken Sie auf eine beliebige Stelle im Entwurfsbereich und drücken Sie Strg+S, um den Handler zu speichern.
Die fertige Schnittstelle sollte der folgenden Abbildung entsprechen:
Die fertige Schnittstelle umfasst drei Eingabefelder, die Schaltfläche 'Berechnen' und das Feld für die Zahlung.
Klicken Sie zur Prüfung des Quellcodes unten im Editorteilfenster auf die Registerkarte Quelle. Der Code sollte mit dem Dateiinhalt im Abschnitt Fertiger Code für MortgageCalculatorHandler.egl nach Lerneinheit 4 übereinstimmen.

Prüfpunkt für die Lerneinheit

Sie haben gelernt, folgende Aufgaben durchzuführen:
  • Rich-UI-Handler erstellen
  • Variable in der EGL-Datensicht erstellen
  • Benutzerschnittstelle durch Ziehen einer Satzvariablen auf den Rich-UI-Editor aktualisieren
  • Schnittstelle mithilfe des EGL-Rich-UI-Editors ändern
  • Schnittstelle über die Sicht 'Eigenschaften' formatieren

In der nächsten Lerneinheit fügen Sie Code zur Unterstützung der gerade erstellten Schnittstelle hinzu.

< Zurück | Weiter >

Feedback