< Zurück | Weiter >

Lerneinheit 6: Handler für Berechnungsergebnisse erstellen

CalculationResultsHandler, der nächste von Ihnen erstellte Handler, erstellt ein Kreisdiagramm, mit dem sich die Details veranschaulichen lassen, die von MortgageCalculatorHandler, der zuvor erstellten Logik, ausgegeben werden.

Der Code, der als Vermittler zwischen den beiden Handlern fungiert, ist ein Infobus. Dies ist eine EGL-Bibliothek im Projekt com.ibm.egl.rui.

Der Infobus funktioniert wie folgt:
  • Ein Handler, beispielsweise CalculationResultsHandler, subskribiert ein Ereignis mit einem angegebenen Namen. Bei der Subskription gibt der Handler auch den Namen einer Funktion an, die beim Auftreten des angegebenen Ereignisses Daten empfangen soll. Als Ergebnis der Subskription registriert der Infobus die Funktion und verwaltet dabei die Details, die zum späteren Aufrufen der Funktion nötig sind.
  • Zum passenden Zeitpunkt veröffentlicht dieser oder ein anderer Handler das Ereignis. Dieser Handler gibt sowohl den Ereignisnamen als auch ereignisspezifische Daten an und weist den Infobus an, die registrierte Funktion aufzurufen.

Zu Anfang dieser Lerneinheit befassen Sie sich mit dem zweiten dieser beiden Schritte. Sie aktualisieren den zuvor geschriebenen Handler MortgageCalculatorHandler so, dass die Funktion publish des Infobusses aufgerufen wird, wenn von dem fernen Service eine neue Berechnung zurückgegeben wird. Anschließend stellen Sie sicher, dass der Handler CalculationResultsHandler das Ereignis subskribiert hat.

Die Veröffentlichung und die Subskription ermöglichen die Kreisdiagrammanzeige.

Serviceergebnisse veröffentlichen

  1. Suchen Sie die Lerneinheit displayResults(), die Sie in der vorherigen Lerneinheit erstellt haben. Fügen Sie vor der end-Anweisung folgende Zeile ein:
    InfoBus.publish("mortgageApplication.mortgageCalculated", retResult);
    Das erste Argument ist der Ereignisname, das zweite ist der Datensatz, der an die für dieses Ereignis registrierten Funktionen übergeben wird. Denken Sie daran, dass dieser Datensatz die folgende Struktur aufweist:
    record MortgageCalculationResult
       // user input
       loanAmount money;
       interestRate decimal(10, 8);
       term int;
    
       // calculated fields
       monthlyPayment money;
       interest money;
    end

    Es wird eine Fehlermarkierung angezeigt, weil die Infobusbibliothek nicht importiert wird. Drücken Sie zum Hinzufügen der erforderlichen import-Anweisung die Tastenkombination Strg+Umsch+O. Speichern Sie die Datei, um die Fehlermarkierung zu entfernen.

    Die Funktion displayResults() sieht nun wie folgt aus:
    function displayResults(retResult MortgageCalculationResult in)
       paymentLabel.text = MortgageLib.formatMoney(retResult.monthlyPayment as STRING);
       inputRec_form.publish();
       hideProcessImage();
       InfoBus.publish("mortgageApplication.mortgageCalculated", retResult);
    	end

    Wie zuvor zeigt dieser Code den Zahlungsbetrag im Feld für die Zahlung an und veröffentlicht mithilfe des Rich-UI-MVC-Mechanismus die Ergebnisse der Berechnung im Datensatz retResult. Die neue Anweisung beinhaltet eine andere Art der Veröffentlichung, bei der der Datensatz für jedes Widget verfügbar ist, das das Ereignis mortgageApplication.mortgageCalculated subskribiert.

    Anmerkung: Bei den Ereignisnamen des Infobusses muss die Groß-/Kleinschreibung beachtet werden. Beispiel: “mortgageApplication” unterscheidet sich von “MortgageApplication.”
  2. Speichern und schließen Sie die Datei.

Handler CalculationResultsHandler erstellen

  1. Klicken Sie im Projekt MortgageUIProject mit der rechten Maustaste auf das Paket handlers und klicken Sie auf Neu > Rich-UI-Handler. Mit diesen Aktionen wird sichergestellt, dass die Seite Neuer EGL-Rich-UI-Handler auf das Paket verweist.
  2. Geben Sie für den Namen der Quellendatei CalculationResultsHandler an und klicken Sie auf Fertig stellen. Der Handler wird im Rich-UI-Editor in der Entwurfssicht geöffnet.
  3. Verringern Sie wie zuvor bei der Codeerstellung der Berechnungsfunktion die Größe des ersten Widgets GridLayout auf eine einzige Zelle. Ändern Sie auf der Seite 'Allgemein' die Eigenschaft rows in den Wert 1 und die Eigenschaft columns in den Wert 1.
  4. Ziehen Sie ein Widget PieChart aus dem Ablagefach Visualisierung der Palette auf die einzige Zelle des Rasterlayouts geben Sie dem Widget den folgenden Namen:
    interestPieChart
    EGL zeigt ein Standardkreisdiagramm an.
    Das Standardkreisdiagramm zeigt Automodelle an.
  5. Klicken Sie unten im Editor auf die Registerkarte Quelle.
  6. Ändern Sie in der Deklaration des Widgets interestPieChart die Eigenschaft 'height' (Höhe) in 250.
  7. Sie benötigen nur zwei Abschnitte in dem Kreisdiagramm. Ersetzen Sie in der Deklaration von interestPieChart im Feld data die vier Zeilen, mit denen die PieChartData-Datensätze deklariert werden. Der neue Code lautet wie folgt:
    new PieChartData{ y=1, text="Principal", 	color="#99ccbb"},
    new PieChartData{ y=0, text="Interest", 		color="#888855"}
    Sie können berechnen, welcher Anteil des Kreisdiagramms auf einen bestimmten Datensatz entfällt, indem Sie den y-Feldwert dieses Datensatzes durch die Summe der y-Feldwerte dividieren. In diesem Fall lautet die Division 1/1 und in der Eingangsanzeige wird ein Hypothekenkapital von 100 % angezeigt. Die Anzeige in der Entwicklungszeit ist lediglich ein Platzhalter, bis die Anwendung während der Ausführung die erste Standardberechnung bearbeitet.
  8. Subskribieren Sie das oben erwähnte Infobusereignis, indem Sie zur Funktion start die folgende Zeile hinzufügen:
    InfoBus.subscribe("mortgageApplication.mortgageCalculated", displayChart);
    Dieser Code stellt sicher, dass der Infobus die Funktion displayChart bei jedem Auftreten des angegebenen Ereignisses aufruft. Im nächsten Schritt werden die Fehlermarkierungen entfernt.
  9. Fügen Sie nach der Funktion start die Funktion displayChart wie nachstehend angegeben hinzu und organisieren Sie anschließend die Importanweisungen, indem Sie Strg+Umsch+O drücken:
    function displayChart(eventName STRING in, dataObject ANY in)
       localPieData PieChartData[2];
    
       resultRecord MortgageCalculationResult = 
          dataObject as MortgageCalculationResult;
       localPieData = interestPieChart.data;
       localPieData[1].y = resultRecord.loanAmount;
       localPieData[2].y = resultRecord.interest;
       interestPieChart.data = localPieData;
    end
    Wenn das Ereignis eintritt, empfängt die Funktion displayChart in Eingabedaten in den Parameter dataObject. Mit dem Parametertyp ANY wird sichergestellt, dass Sie den Infobusmechanismus zum Übertragen aller Arten von Datensätzen verwenden können.
    Nun agiert die Funktion wie folgt:
    • Sie erstellt die Feldgruppe localPieData, die den Typ PieChartData[] aufweist, wie es der Eigenschaft data des Kreisdiagramms entspricht.
    • Sie weist den empfangenen Wert einem Datensatz vom Typ MortgageCalculationResult zu, in einer Anweisung, die den zweiten Eingabeparameter in den Datentyp umsetzt, der für Ihre Verwendung des Infobusses geeignet ist:
      resultRecord MortgageCalculationResult = 
         dataObject as MortgageCalculationResult;
    • Sie weist die Eigenschaft data des Kreisdiagramms einschließlich der Farbdetails der neuen Feldgruppe localPieData zu.
    • Sie weist dieser Feldgruppe die empfangene Kreditsumme und den Zinswert zu.
    • Sie aktualisiert ihre Eigenschaft data und zwingt dadurch das Kreisdiagramm zur Aktualisierung der Anzeige. Konkret weisen Sie dieser Eigenschaft die Feldgruppe localPieData zu.
  10. 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 CalculationResultsHandler.egl nach Lerneinheit 6.

Kreisdiagramm testen

  1. Wechseln Sie in die Sicht 'Vorschau'. EGL zeigt ein Standardkreisdiagramm mit 100 % Kapital an.
    Der gesamte Kreis ist wasserblau und zeigt in Weiß das Wort "Principal" (Kapital) an.
  2. Schließen Sie die Datei.

Prüfpunkt für die Lerneinheit

Sie haben gelernt, folgende Aufgaben durchzuführen:
  • Über die Infobusbibliothek Informationen zwischen Handlern übergeben
  • Kreisdiagramm erstellen

In der nächsten Lerneinheit erstellen Sie den Haupthandler, welcher die anderen Handler verwendet.

< Zurück | Weiter >

Feedback