< Zurück | Weiter >

Lerneinheit 8: Handler für Berechnungsprotokolle erstellen

Erstellen Sie eine Tabelle, in der Sie auf eine Zeile klicken können, um eine frühere Berechnung anzuzeigen.

In dieser Lerneinheit erstellen Sie mit dem Widget DataGrid eine Tabelle. Das Widget DataGrid besitzt erweiterte Funktionen zur Interaktion und visuellen Darstellung und ist daher für die Anzeige von Feldgruppen von Datensätzen dem Widget GridLayout vorzuziehen.

In Lerneinheit 4 haben Sie eine Satzvariable auf den Editor gezogen, um ein Widget GridLayout zu erstellen. In dieser Lerneinheit ziehen Sie eine Feldgruppe von Datensätzen auf den Editor, der standardmäßig ein Widget DataGrid erstellt.

Handler erstellen

  1. Erstellen Sie im Paket handlers einen Rich-UI-Handler namens CalculationHistoryHandler. Der Handler wird im Rich-UI-Editor in der Entwurfssicht geöffnet.
  2. Löschen Sie das Standardwidget GridLayout.
  3. Erstellen Sie eine Variable, die eine Feldgruppe von MortgageCalculationResult-Datensätzen enthält.
    1. Klicken Sie mit der rechten Maustaste auf den Hintergrund der EGL-Datensicht und klicken Sie auf Neu > EGL-Variable.
    2. Wählen Sie im Assistenten Neue EGL-Datenvariable erstellen im Abschnitt Typerstellung den Datensatz MortgageCalculationResult aus, wie Sie das in Lerneinheit 4 getan haben.
    3. Geben Sie im Feld Namen des Feldes eingeben den folgenden Namen ein:
      historyResults
    4. Unter Feldgruppeneigenschaften aktivieren Sie das Kontrollkästchen Feldgruppe. Geben Sie keine Größe an.
      Der Assistent wird für die Erstellung einer Feldgruppe von Datensätzen eingerichtet.
    5. Klicken Sie auf Fertig stellen.
  4. Ziehen Sie die neue Variable auf die Anzeigeoberfläche im Rich-UI-Editor. EGL zeigt den Assistenten Daten einfügen an. Dies ist derselbe Assistent wie der in Lerneinheit 4 verwendete. Er hat jedoch andere Standardeinstellungen, weil die Variable, die Sie auf den Editor gezogen haben, eine dynamische Feldgruppe darstellt.
  5. Nehmen Sie im Assistenten Daten einfügen folgende Änderungen vor:
    1. Behalten Sie unter Widgets erstellen für den Standardwert Schreibgeschützte Daten bei.
    2. Wählen Sie das Kontrollkästchen im Feld interest ab.
    3. Ändern Sie die Bezeichnungen für die übrigen Felder wie folgt:
      • Ändern Sie loanAmount in Principal.
      • Ändern Sie interestRate in Rate.
      • Ändern Sie term in Years.
      • Ändern Sie monthlyPayment in Payment.
      Der Assistent verwendet diese Bezeichnungen als Spaltenüberschriften für das Raster.
    4. Wählen Sie das Kontrollkästchen Unterstützung für Formatierung und Validierung hinzufügen ab. Der fertige Assistent entspricht der folgenden Abbildung:
      Auf der Assistentenseite werden die Daten angezeigt, die Sie für die Anzeige im Raster ausgewählt haben.
    5. Klicken Sie auf Fertig stellen. Die Webseite sieht wie folgt aus.
      Das leere Raster hat eine Kopfzeile und vier Spalten.
    Den Rest des Handlers für Berechnungsprotokolle codieren Sie in der Quellensicht.
  6. Klicken Sie unten im Editor auf die Registerkarte Quelle.
  7. Fügen Sie in der Deklaration des DataGrid-Widgets historyResults_ui den folgenden Inhalt vor der Eigenschaft columns hinzu:
    selectionMode = DataGridLib.SINGLE_SELECTION,
    Der angegebene Wert stellt sicher, dass der Benutzer nicht mehrere Zeilen des Rasters, sondern nur eine einzelne Zeile auswählen kann.
  8. Geben Sie in der Zeile nach dem Festlegen von selectionMode folgenden Code ein:
    selectionListeners ::= cellClicked,

    Sie haben gerade eine Listenereigenschaft aktualisiert, wofür eine Feldgruppe von Funktionen in der Feldgruppe-Element-Reihenfolge ausgeführt werden muss. Sie haben insbesondere eine Funktion an die Feldgruppe der Funktionen angehängt, die zur Eigenschaft selectionListeners gehören. Später in dieser Lerneinheit werden Sie die neue Funktion codieren.

    Die Listenerfunktionen werden als Antwort auf eine Benutzeraktion wie einen Klick bzw. manchmal als Antwort auf einen Funktionsaufruf ausgeführt, mit dem eine Zeile aus- oder abgewählt wird, die ein Kontrollkästchen aktualisiert.

  9. Ändern Sie die Standardbreiten der Spalten so, dass sie in das kleinere Portletfenster passen:
    • Stellen Sie die Breite der Spalte 'Principal' auf 80 ein.
    • Stellen Sie die Breite der Spalte 'Rate' auf 80 ein.
    • Stellen Sie die Breite der Spalte 'Years' auf 50 ein.
    • Stellen Sie die Breite der Spalte 'Payment' auf 70 ein.
  10. Stellen Sie nach jedem der gerade angegebenen Breitenwerte in demselben Block zum Festlegen von Werten (im Bereich mit den geschweiften Klammern) eine Eigenschaft alignment ein, um die Zahlen in den einzelnen Spalten rechtsbündig auszurichten.
    , alignment = DataGridLib.ALIGN_RIGHT
    Beispiel: Die Deklaration für die Spalte 'Principal' sieht nun wie folgt aus:
    new DataGridColumn {name = "loanAmount", displayName = "Principal", width = 80,
                        alignment = DataGridLib.ALIGN_RIGHT},
  11. Fügen Sie wie folgt die Eigenschaft formatter zu drei der Spaltendeklarationen hinzu:
    1. Verweisen Sie bei der Spalte 'Principal' auf die angepasste Funktion formatDollars, die Sie später in dieser Lerneinheit erstellen.
      , formatters = [ formatDollars ]
      Nun sieht die gesamte Deklaration wie folgt aus:
      new DataGridColumn {name = "loanAmount", displayName = "Principal", width = 80,
      				alignment = DataGridLib.ALIGN_RIGHT, formatters = [ formatDollars ]},
    2. Fügen Sie für die Spalte 'Rate' folgenden Code hinzu:
      , formatters = [ DataGridFormatters.percentage ]
    3. Für die Spalte 'Years' benötigen Sie keine spezielle Formatierung.
    4. Fügen Sie für die Spalte 'Payment' folgenden Code hinzu:
      , formatters = [ formatDollars ]
      Nun hat der Code folgenden Inhalt:
      Snapshot des Codes von historyResults_ui

      Im Allgemeinen nimmt die Eigenschaft formatters eine Feldgruppe von Funktionsnamen an. Die Funktionen können vordefiniert sein oder Sie können angepasste Funktionen schreiben. Beispiel: Die Funktion percentage wird in der Bibliothek DataGridFormatters bereitgestellt, die im Projekt com.ibm.egl.rui.widgets enthalten ist.

  12. Fügen Sie zu der Funktion start folgenden Code hinzu:
    InfoBus.subscribe("mortgageApplication.mortgageCalculated", addResultRecord);
    Wie zuvor rufen Sie eine Funktion über den Infobus auf, wenn der Service eine neue Berechnung zurückgibt.
  13. Fügen Sie die Funktion addResultRecord nach der Funktion start() hinzu:
    // Update the grid to include the latest mortgage calculation
    function addResultRecord(eventName STRING in, dataObject ANY in)
       resultRecord MortgageCalculationResult = dataObject as MortgageCalculationResult;
       historyResults.appendElement(resultRecord);
       historyResults_ui.data = historyResults as ANY[];
    end
    Hier können Sie einen eingehenden Wert in einen MortgageCalculationResult-Datensatz umsetzen. Anschließend hängen Sie die neuen Ergebnisse an die Ergebnisfeldgruppe an und aktualisieren die Eigenschaft data. Diese Aktualisierung führt dazu, dass das Widget aktualisiert wird.
  14. Fügen Sie folgende Listenerfunktion hinzu:
    // Publish an event to the InfoBus whenever the user selects an old calculation
    function cellClicked(myGrid DataGrid in)
       updateRec MortgageCalculationResult = myGrid.getSelection()[1] 
                                             as MortgageCalculationResult;
       InfoBus.publish("mortgageApplication.mortgageResultSelected", updateRec);
    end
    Die Funktion ruft die vom Benutzer ausgewählte Zeile des Datenrasters ab und stellt sie dem Infobus zur Verfügung. Der Infobus ruft seinerseits eine Funktion in allen Handlern auf, die das Ereignis “mortgageApplication.mortgageResultSelected” subskribiert haben.
  15. Fügen Sie die folgende Funktion hinzu, um Geldbeträge zu formatieren:
    function formatDollars(class string, value string, rowData any in)
       value = mortgageLib.formatMoney(value);
    end
    Der Wert des zweiten Parameters ist für den EGL-Laufzeitcode verfügbar, da der Parameteränderungswert standardmäßig InOut ist.

    Achten Sie darauf, die Funktion formatMoney aus der Bibliothek mortgageLib wiederzuverwenden.

  16. Formatieren Sie die Datei neu, indem Sie Strg+Umsch+F drücken. Entfernen Sie anschließend die Fehlermarkierungen durch Drücken von Strg+Umsch+O und speichern Sie die Datei. Sollten in Ihrer Quellendatei Fehler angezeigt werden, vergleichen Sie Ihren Code mit dem Inhalt der Datei im Abschnitt Fertiger Code für CalculationHistoryHandler.egl nach Lerneinheit 8.
  17. Schließen Sie die Datei.

Prüfpunkt für die Lerneinheit

Sie haben gelernt, folgende Aufgaben durchzuführen:
  • Datenraster durch Ziehen und Übergeben einer Feldgruppe von Datensätzen erstellen
  • Beim Klicken auf eine Zelle im Datenraster ein Ereignis auslösen
  • Spalten im Datenraster formatieren

In der nächsten Lerneinheit integrieren Sie diesen Handler in den Rest der Anwendung.

< Zurück | Weiter >

Feedback