< Zurück | Weiter >

Lerneinheit 7: Rich-UI-Haupthandler erstellen

Die Hauptseite verwaltet die Kommunikation zwischen verschiedenen Handlern über das EGL-Portalwidget.

Wie in einer früheren Lerneinheit vermerkt, gibt Rich-UI dem seit langem gebräuchlichen Begriff MVC (Model View Controller) eine neue Bedeutung: Er wird neu definiert, und zwar speziell für Logik, die im Browser ausgeführt wird. Auch die Wörter Portal und Portlet erhalten in Rich-UI eine neue Bedeutung.

Im Allgemeinen ist ein Portal eine Webseite, die unabhängige UI-Komponenten steuert, die als Portlets bezeichnet werden. Im herkömmlichen Gebrauch dieser Begriffe stellt ein Portal serverseitigen Code dar. Die vom Portal eingebetteten Portlets sind Webseitenausschnitte, von denen jeder an einem anderen fernen Standort gespeichert werden kann. Die Webseite wird auf dem Server konstruiert, auf dem sich der Portalcode befindet, und die fertige Webseite wird vom Server zum Browser übertragen.

Im Gegensatz dazu ist ein Rich-UI-Portal ein Widget, das im Browser ausgeführt wird und auf eine Gruppe von Portletwidgets verweist, von denen jedes auf einen Rich-UI-Handler verweist. In den nächsten Abschnitten wird gezeigt, wie Code für ein Portal und für Portlets in Rich-UI erstellt wird.

Handler MainHandler erstellen

  1. Erstellen Sie im Paket handlers des Projekts MortgageUIProject einen neuen Rich-UI-Handler, wie Sie das in der vorherigen Lerneinheit getan haben. Der Name des Handlers lautet in diesem Fall MainHandler. Der Handler wird im Rich-UI-Editor in der Entwurfssicht geöffnet.
  2. Wenn in der Sicht 'Palette' das Ablagefach Beispiele nicht angezeigt wird, klicken Sie links in der Sicht 'Palette' auf die Schaltfläche Palette aktualisieren.
    Schaltfläche 'Palette aktualisieren'
  3. Wählen Sie das erste Widget GridLayout aus, das für den Handler erstellt wurde. Stellen Sie sicher, dass das gesamte Widget von der gepunkteten Linie umschlossen ist.
    Das erste Widget GridLayout ist ausgewählt.
  4. Drücken Sie die Löschtaste, um das Widget zu entfernen.
  5. Ziehen Sie aus dem Ablagefach Beispiele der Palette ein Portalwidget auf den Editor und geben Sie ihm den folgenden Namen:
    mortgagePortal
  6. Klicken Sie unten im Editor auf die Registerkarte Quelle.
  7. Ändern Sie in der Deklaration von mortgagePortal die Anzahl der Spalten in 2 und stellen Sie die Spaltenbreiten auf 350 bzw. 650 ein. Der Inhalt der Datei wird nachstehend angezeigt:
  8. Überspringen Sie nach der Deklaration von mortgagePortal eine Zeile und fügen Sie folgende Deklarationen hinzu:
    	calculatorHandler MortgageCalculatorHandler{};
    	resultsHandler CalculationResultsHandler{};
    Mit diesen Anweisungen werden zwei Variablen deklariert, die jeweils auf einem Handlerabschnitt basieren, in diesem Fall auf einem in diesem Lernprogramm entwickelten Handlerabschnitt.
  9. Überspringen Sie eine Zeile und fügen Sie folgenden Code hinzu:
    calculatorPortlet Portlet{children = [calculatorHandler.ui],
       title = "Calculator"};
    resultsPortlet Portlet{children = [resultsHandler.ui],
       title = "Results", canMove = TRUE, canMinimize = TRUE};
    Jede neue Portletvariable wird mit einem Verweis auf die erste Benutzerschnittstelle in dem eingebetteten Handler deklariert.
  10. Drücken Sie zum Entfernen der Fehlermarkierungen Strg+Umsch+O.
  11. Codieren Sie die Funktion start wie folgt:
    function start()
       mortgagePortal.addPortlet(calculatorPortlet, 1);
       mortgagePortal.addPortlet(resultsPortlet, 1);
    
       // Subscribe to calculation events 
       InfoBus.subscribe("mortgageApplication.mortgageCalculated", restorePortlets);
    
       // Initial state is minimized
       resultsPortlet.minimize();
    end	
    Der Code agiert wie folgt:
    • Er fügt die zuvor deklarierten Portlets zum Portal hinzu: eines zur Anzeige des Berechnungsfunktion, ein anderes zur Anzeige des Kreisdiagramms.
    • Er stellt sicher, dass sich die Subskription des Haupthandlers auf dasselbe Ereignis bezieht wie CalculationResultsHandler. Damit wird in diesem Fall sichergestellt, dass die Funktion restorePortlets ausgeführt wird, wenn der ferne Service eine Hypothekenberechnung zurückgibt.
    • Er minimiert das zweite Portlet so, dass das Kreisdiagramm während der Ausführung zunächst nicht sichtbar ist.
  12. Fügen Sie nach der Funktion start die Funktion hinzu, die aufgerufen wird, wenn der Service eine Berechnung zurückgibt:
    function restorePortlets(eventName STRING in, dataObject ANY in)
       if(resultsPortlet.isMinimized())
          resultsPortlet.restore();
       end
    end
    Die portletspezifische Funktion restore bewirkt, dass das Kreisdiagramm angezeigt wird.
  13. Drücken Sie zum Entfernen der Fehlermarkierungen 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 MainHandler.egl nach Lerneinheit 7.

Portal testen

Testen Sie das Hauptportal, um sicherzustellen, dass das Ergebnisportlet Änderungen vom Berechnungsportlet empfängt.
  1. Klicken Sie unten im Editor auf Vorschau. EGL zeigt den Haupthandler an, in dem das Portal deklariert wird. Der Handler zeigt die beiden untergeordneten Portlets an.
    Das Portlet 'Calculator' zeigt Standardwerte an und das Portlet 'Results' wird minimiert.
  2. Klicken Sie auf Berechnen. Die animierte Abbildung zeigt an, dass die Bearbeitung läuft. Nach Abschluss der Berechnung wird das Kreisdiagramm angezeigt.
    Im wiederhergestellten Portlet 'Results' wird das Kreisdiagramm angezeigt.
  3. Bewegen Sie den Cursor auf das Kreisdiagramm, um die Sicht zu erweitern.
  4. Ändern Sie die gewünschten Berechnungswerte und klicken Sie noch einmal auf Berechnen. Das Kreisdiagramm spiegelt die Änderungen im Verhältnis zwischen Kapital und Zinsen wider.
  5. Schließen Sie die Datei.

Prüfpunkt für die Lerneinheit

Sie haben gelernt, folgende Aufgaben durchzuführen:
  • Portalwidget erstellen
  • Portlets zum Portal hinzufügen und dadurch die in früheren Lerneinheiten erstellten Handler verfügbar machen

In der nächsten Lerneinheit fügen Sie ein Portlet hinzu, um Ihre Hypothekenberechnungen aufzulisten.

< Zurück | Weiter >

Feedback