< Zurück | Weiter >

Lerneinheit 5: Code zum Handler der Hypothekenberechnungsfunktion hinzufügen

Fügen Sie Funktionen zu dem Handler hinzu, den Sie in der vorherigen Lerneinheit erstellt haben.

In dieser Lerneinheit arbeiten Sie direkt mit EGL-Quellcode. Sie beginnen dabei mit dem Schreiben einer EGL-Bibliothek. Eine Bibliothek kann Konstanten, Variablen und Funktionen enthalten, auf die jeweils über die verschiedenen Logikeinheiten in Ihrer Anwendung zugegriffen werden kann. Ein wichtiges Merkmal einer Bibliothek ist die Tatsache, dass Änderungen an einer Variablen für jede Logikeinheit verfügbar sind, die auf die Bibliothek zugreift. Der Schwerpunkt in dem vorliegenden Lernprogramm liegt jedoch auf Funktionen, die Sie in einer Bibliothek platzieren, um die Verwaltung von identischer, vielerorts verwendeter Logik an mehreren Positionen zu vermeiden.

Sie können zur Bearbeitung bestimmter allgemeiner Fragen das MVC-Framework von EGL (MVC = Model View Controller) verwenden, das vom Projekt com.ibm.egl.rui bereitgestellt wird. Zwar beschreiben die Initialen "MVC" in der Regel die verschiedenen Komponenten einer Unternehmensanwendung, das MVC-Framework in Rich-UI bezieht sich jedoch ausschließlich auf die Komponenten einer Benutzerschnittstelle. Hier bezeichnet der Begriff model (Modell) ein variables Feld oder ein Datensatzfeld, view (Sicht) ist ein Widget und controller (Controller) ist eine Deklaration, die die Datenübertragung zwischen dem Modell und der Sicht überwacht. Die Datenübertragung erfolgt manchmal automatisch und manchmal in Form einer Antwort auf einen Funktionsaufruf, wie unten dargestellt.

Mit den Drag-and-drop-Aktionen aus der vorherigen Lerneinheit wurden nicht nur Controller-Deklarationen hinzugefügt, sondern auch ein Formularmanager. Dieser stellt eine Deklaration dar, mit dessen Hilfe Sie andere Deklarationen als Komponenten eines einzigen Formulars betrachten können. Ein Formularmanager umfasst eine Gruppe von Formularfeldern, die jeweils eine Bezeichnung, einen Controller und ein Fehlerfeld enthalten können.

EGL-Bibliothek erstellen

Erstellen Sie eine EGL-Bibliothek mit einer Funktion, die eine US-Währungsformatierung für die Variable MONEY bereitstellt. Eine komplexere Version stellt möglicherweise lokale Währungssymbole und Trennzeichen sowie unterschiedliche Eingabetypen bereit. Für das vorliegende Lernprogramm reicht jedoch eine einfache Version aus.
  1. Wählen Sie im Projektexplorer das Projekt MortgageUIProject aus.
    MortgageUIProject ist ausgewählt.
  2. Klicken Sie auf die Schaltfläche Neue EGL-Quellendatei.
    Die Schaltfläche 'Neue EGL-Quellendatei' ist die zweite in einer Gruppe von vier Schaltflächen.
  3. Geben Sie im Fenster Neuer EGL-Abschnitt das Paket wie folgt an:
    libraries
  4. Benennen Sie die Datei wie folgt:
    MortgageLib
  5. Klicken Sie auf Fertig stellen. Die neue Quellendatei wird im EGL-Editor geöffnet.
  6. Entfernen Sie den Kommentar aus der Datei und fügen Sie folgenden Code hinzu:
    library MortgageLib 
       function formatMoney(amount STRING in) returns(STRING)
          len int = strlib.characterLen(amount);
          index int = len - 6; // 2 dec places + decimal + 3 chars before separator
          while(index > 0)
             amount = amount[1 : index] :: "," :: amount[index + 1 : len];
             index -= 3;
             len += 1;
          end
          return("$" :: amount);
       end
    end

    Wie angezeigt, geben Sie den Bibliotheksnamen an und integrieren formatMoney(), eine neue Funktion, die Kommata und ein Dollarzeichen zu einer Eingabezeichenfolge hinzufügt. Dabei wird davon ausgegangen, dass das Eingabefeld einen Geldwert mit zwei Dezimalstellen enthält.

  7. Speichern Sie die Datei. Sobald die Datei gespeichert ist, wird die Bibliothek automatisch generiert.
Nun kann die Bibliothek MortgageLib verwendet werden.

Code im Handler ändern

Bevor Sie neue Funktionen hinzufügen, müssen Sie einige kleinere Änderungen vornehmen:
  1. Klicken Sie auf die Registerkarte Quelle von MortgageCalculatorHandler.
  2. Legen Sie Standardwerte für die Felder Loan amount und Interest fest. Wechseln Sie in die Zeile, in der der Datensatz inputRec deklariert wird, und fügen Sie die beiden Zuweisungen zu der Deklaration hinzu, wie nachstehend gezeigt:
    inputRec MortgageCalculationResult 
       {term = 30, loanAmount=180000, interestRate = 5.2};
    Speichern Sie die Datei und klicken Sie auf die Registerkarte Vorschau. Nun zeigt die Schnittstelle die Standardwerte an, einschließlich des Werts für das Feld 'term', den Sie in der vorherigen Lerneinheit angegeben haben:
    Nun zeigt die Schnittstelle eine Kreditsumme und einen Zinssatz an.
  3. Deklarieren Sie in der ersten Zeile des Handlers, also vor der Deklaration des Widgets ui, eine Variable, mit der der Code auf den dedizierten Service zugreift:
    mortService MortgageCalculationService{@dedicatedService};
    Die Deklaration von mortService erfolgt vor der Deklaration von ui GridLayout.
  4. Bewegen Sie den Cursor über das rote X oder über die rote Unterstreichung, um die folgende Ursache des Fehlers anzuzeigen: “Der Typ MortgageCalculationService kann nicht aufgelöst werden.” Diese Fehlernachricht könnte verwirrend sein, da Sie zuvor den EGL-Buildpfad für das Projekt festgelegt haben, in dem Sie gerade arbeiten, damit das Projekt auf dasjenige zugreifen kann, in dem der Service enthalten ist. Das Problem besteht hier darin, dass die Quellendatei den Serviceabschnitt nicht importiert.
  5. Geben Sie zum Entfernen des Fehlers die folgende import-Anweisung nach den anderen import-Anweisungen in der Datei ein:
    import services.MortgageCalculationService;
    Nach einigen Sekunden werden die Fehlermarkierungen entfernt, auch wenn Sie die Datei nicht gespeichert haben.
  6. In vielen Fällen kann die Entwicklungsumgebung eine fehlende import-Anweisung für Sie einfügen. Um diese Option in Aktion zu erleben, müssen Sie die gerade eingegebene import-Anweisung entfernen. Wenn die Fehlermarkierungen wieder angezeigt werden, geben Sie Strg+Umsch+O ein, um die Anweisung wieder einzufügen.
  7. Speichern Sie die Datei.

Funktion inputRec_form_Submit vervollständigen

EGL hat eine Stubfunktion namens inputRec_form_Submit erstellt. Mit dieser Funktion sollen alle Felder in dem Formular geprüft und “festgeschrieben” werden. Die Festschreibung gehört zur MVC-Implementierung und bedeutet, dass der Datensatz inputRec mit den Werten in den Widgets aktualisiert wird.

Sie fügen Code hinzu, um zwei andere Funktionen aufzurufen. Die erste Funktion macht die Abbildung processImage sichtbar und lässt den Benutzer auf diese Weise wissen, dass die Anwendung funktioniert. Mit der zweiten Funktion wird der Service zur Berechnung der Hypothekenzahlung aufgerufen.

Aktualisieren Sie zum Vervollständigen der Funktion inputRec_form_Submit die if-Anweisung so, dass sie wie folgt lautet:
if(inputRec_form.isValid())
   inputRec_form.commit();
   showProcessImage();
   calculateMortgage();
else
   errorLabel.text = "Input form validation failed.";
end
Machen Sie sich keine Sorgen um das Codeformat. Diese Frage wird in einem späteren Abschnitt behandelt. In den nächsten Abschnitten werden auch die hier angezeigten Fehlermarkierungen entfernt:
Vollständiger Aufruf der Funktion inputRec_form_Submit()

Funktion showProcessImage hinzufügen

Sie benötigen die Funktion showProcessImage, um die Abbildung processImage sichtbar zu machen. Zum Codieren der Funktion im Rich-UI-Editor müssen Sie im Handler vor der letzten end-Anweisung folgende Zeilen hinzufügen:
function showProcessImage()
   processImage.visible = yes;
end
Anmerkung: Die Eigenschaft visible gehört zu jedem Widget vom Typ Image. Sie haben den Anfangswert dieser Eigenschaft in der vorherigen Lerneinheit geändert, als Sie das Kontrollkästchen visible (sichtbar) für die Abbildung processImage abgewählt haben.

Funktion hideProcessImage hinzufügen

Sie benötigen die Funktion hideProcessImage, um die Abbildung bei Bedarf auszublenden. Fügen Sie nach der Funktion showProcessImage die folgenden Zeilen hinzu:
function hideProcessImage()
   processImage.visible = no;
end

Funktion calculateMortgage hinzufügen

Mit der Funktion calculateMortgage wird ein Service aufgerufen, der auf der Basis der in der Benutzerschnittstelle angezeigten Werte eine Hypothekenberechnung durchführt. Zum Codieren der Funktion im Rich-UI-Editor müssen Sie nach der Funktion hideProcessImage die folgenden Zeilen einfügen und die Fehlermarkierungen ignorieren:
function calculateMortgage()
   call mortService.amortize(inputRec) 
      returning to displayResults 
      onException handleException;
end	
Anmerkung:
  1. Die call-Anweisung in Rich-UI ist eine Variante, die nur für den Zugriff auf Services verwendet wird. Die Laufzeitkommunikation ist in diesem Fall asynchron, d. h., der Benutzer kann weiter mit dem Handler interagieren, während der Service antwortet.
  2. Ein Serviceanforderer übergibt oft einen Datensatz an den Service, auf den gerade zugegriffen wird. In diesem Lernprogramm übergibt der Handler die global Variable inputRec und erhält in demselben Datensatz den vom Service zurückgegebenen Wert.

Funktion displayResults hinzufügen

Die Funktion displayResults ist eine Rückruffunktion, die sofort ausgeführt wird, nachdem der Service erfolgreich Geschäftsdaten an den Rich-UI-Handler zurückgegeben hat. Zum Codieren der Funktion müssen Sie nach der Funktion calculateMortgage die folgenden Zeilen hinzufügen:
function displayResults(retResult MortgageCalculationResult in)
   paymentLabel.text = MortgageLib.formatMoney(retResult.monthlyPayment as STRING);
   inputRec_form.publish();
   hideProcessImage();
end
Anmerkung:
  • Mit der Funktion formatMoney aus Ihrem neuen EGL-Bibliotheksabschnitt fügen Sie Kommata und ein Dollarzeichen zum Zahlungsbetrag hinzu. Da Sie die Variable paymentLabel ohne das MVC-Framework erstellt haben, müssen Sie die Formatierung selbst vornehmen.
  • Wie oben angemerkt, enthält ein Formularmanager Formularfelder, die ihrerseits Controller und andere Deklarationen enthalten können. Die Funktion publish ist in jedem Formularmanager verfügbar und und ruft die controllerspezifischen publish-Funktionen nacheinander auf, um folgende Aufgaben auszuführen:
    1. Daten aus der Variablen abrufen, die als Controllermodell dient
    2. Diese Daten formatieren
    3. Die formatierten Daten in das Widget schreiben, das als Controllersicht fungiert

    Angesichts dieser Ereignisfolge wird die formularbasierte Funktion publish oft in der hier beschriebenen Art aufgerufen: in einer Rückruffunktion, die Daten von einem Service empfängt.

Ausnahmebehandlungshandler schreiben

Wenn der Serviceaufruf einen Fehler zur Folge hat, wird die übliche Rückruffunktion nicht aufgerufen. Wenn Sie jedoch die Verwendung eines Ausnahmebehandlungshandlers vorgesehen haben, wie im vorliegenden Fall, wird diese Funktion aufgerufen.

Gehen Sie wie folgt vor:

  1. Fügen Sie nach der Funktion displayResults folgenden Code hinzu:
    	// catch-all exception handler
    	private function handleException(ae AnyException in)
    		errorLabel.text = "Error calling service: " + ae.message;
    	end
    Funktionen mit dem Änderungswert private können nur von dem EGL-Abschnitt aufgerufen werden, in dem sich die Funktion befindet, in diesem Fall von dem eingebetteten Handler. Mit dieser Funktion wird Text im Widget errorLabel platziert, das Sie in der vorherigen Lerneinheit erstellt haben.
  2. Aktualisieren Sie die Funktion calculateMortgage unmittelbar vor der call-Anweisung wie folgt:
    errorLabel.text = "";
    Auf diese Weise löschen Sie den Inhalt des Feldes errorLabel, bevor Sie den Service aufrufen, der die Hypothekenberechnung durchführt. Wenn Sie diesen Code nicht hinzufügen, löst ein Fehler wie die vorübergehende Unterbrechung der Serviceverbindung eine Fehlernachricht aus, selbst nachdem der Service erfolgreich aufgerufen wurde.
  3. Klicken Sie mit der rechten Maustaste auf eine leere Fläche im Editor. Klicken Sie auf Importe verwalten. EGL fügt import-Anweisungen für alle möglichen nicht definierten Symbole hinzu.
  4. 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 MortgageCalculatorHandler.egl nach Lerneinheit 5.
  5. Führen Sie nach der Behebung der Fehler eine Neuformatierung Ihrer Eingabe aus, indem Sie Strg+Umsch+F drücken. Speichern Sie die Datei danach wieder.

Berechnungsfunktion testen

Nun können Sie die Berechnungsfunktion testen.

  1. Wechseln Sie in die Sicht 'Vorschau', indem Sie unten im Editor auf die Registerkarte Vorschau klicken. Sie können Ihre Anwendung in der Sicht 'Vorschau' umfassend testen, einschließlich der Benutzerschnittstelle und der Services. Sie können tests durchführen, unabhängig davon, ob die Services auf einem Server implementiert werden oder nur als EGL-Quellcode verfügbar sind. EGL zeigt die Standardwerte an, die Sie bei der Erstellung des Handlers eingegeben haben.
  2. Klicken Sie auf Berechnen. EGL zeigt die monatliche Rate an.
    Der Betrag der monatlichen Rate wird im Feld für die Zahlung angezeigt.
  3. Geben Sie im ersten Feld einen Buchstaben ein. Wie bei einigen EGL-Dojo-Widgets wird eine rote Markierung angezeigt, sobald ein Fehler auftritt, und in einer benachbarten QuickInfo wird eine Fehlernachricht angezeigt.
    Der Betrag der monatlichen Rate wird im Feld für die Zahlung angezeigt.

    Wenn das Widget aus dem Fokus gerät, wird die QuickInfo ausgeblendet, wenn das Widget wieder in den Fokus kommt, wird die QuickInfo angezeigt.

  4. Ändern Sie die Werte für eines der drei Felder und klicken Sie noch einmal auf Berechnen. Das Feld für die Zahlung wird entsprechend geändert.

Prüfpunkt für die Lerneinheit

Sie haben gelernt, folgende Aufgaben durchzuführen:
  • Auf der Registerkarte Quelle des Rich-UI-Editors arbeiten
  • EGL-Bibliotheksabschnitt für wiederverwendbare Funktionen erstellen
  • EGL-MVC-Framework verwenden
  • EGL-Service von einer Funktion aus aufrufen
  • Fehler erkennen und behandeln

In der nächsten Lerneinheit erstellen Sie ein Kreisdiagramm, um bei einer gegebenen Berechnung das Gesamtkapital mit den Gesamtzinsen zu vergleichen.

< Zurück | Weiter >

Feedback