Vaadin

Hauptanwendung

Zunächst wird das Hauptfenster implementiert, das die Erfassung neuer Ausleihvorgänge ermöglicht. Listing 2 zeigt den Aufbau der Oberfläche. Prinzipiell ist das nur eine kleine Erweiterung der Hallo-Welt-Anwendung. Der Swing-Ansatz bleibt jedoch erhalten und es wird ein Komponentenbaum basierend auf Java-Elementen erstellt. Wichtig ist der Aufruf der mainWindow.removeAllComponents()-Methode. Diese sorgt später dafür, dass der Login-Screen nach erfolgreichem Login entfernt wird und die Hauptanwendung im Main-Window platziert wird (Listing 2).

Listing 2: Layoutinitialisierung
private void initLayout()
{
        SplitPanel splitPanel = new SplitPanel(
        SplitPanel splitPanel = new SplitPanel(
        SplitPanel.OREINTATION_HORIZONTAL);
        mainWindow.removeAllComponents(); // clear screen
        mainWindow.addComponent(splitPanel);
        VerticalLayout left = new VerticalLayout();
        left.setSizeFull();
        left.addComponent(deviceList);
        deviceList.setSizeFull();
        left.setExpandRatio(deviceList, 1);
        splitPanel.addComponent(left);
        splitPanel.addComponent(deviceEditor);
        deviceEditor.setSizeFull();
        deviceEditor.getLayout().setMargin(true);
        deviceEditor.setImmediate(true);
        bottomLeftCorner.setWidth("100%");
        left.addComponent(bottomLeftCorner);
}

Darüber hinaus kommen zwei Vaadin-Komponenten zum Einsatz, die Ihnen out of the Box die Grundfunktionalität der Anwendung zur Verfügung stellen. Es handelt sich um die Table-Komponente deviceList sowie die Formkomponente deviceEditor. Der Formkomponente wird später als Datenquelle ein Eintrag aus der Tabelle zugewiesen. Die Formkomponente generiert automatisch das korrespondierende Formular, das für die Datenanzeige bzw. das Editieren von Daten eingesetzt werden kann. Das Zusammenspiel zwischen Tabellenkomponente und Formular wird in Listing 3 demonstriert. Dabei wird ein Dummy-Datensatz generiert und in die Tabelle eingefügt, darüber hinaus wird der ClickListener für die Tabelle definiert, der eine entsprechende Formularanzeige triggert.

Listing 3: Datengenerierung und Event Handling
// table cols
private static String[] fields = { "Device", "To", "Date", "Return", "Reason" };

// create dummy data
private static IndexedContainer createDummyData() 
{
   IndexedContainer ic = new IndexedContainer();
   for (String p : fields) 
   {
         ic.addContainerProperty(p, String.class, "");
   }
   
   Object id = ic.addItem();
   ic.getContainerProperty(id, "Device").setValue("iPad 1");
   ic.getContainerProperty(id, "To").setValue("Petje Puck");
   ic.getContainerProperty(id, "Reason").setValue("Application Testing");
   
   return ic;
}

private String[] initDeviceList() 
{
   deviceList.setContainerDataSource(deviceData);
   deviceList.setVisibleColumns(visibleCols);
   deviceList.setSelectable(true);
   deviceList.setImmediate(true);
   deviceList.addListener(new Property.ValueChangeListener()) 
   {
      public void valueChange(ValueChangeEvent event) 
      {
         Object id = deviceList.getValue();
         deviceEditor.setItemDataSource(id == null ? null : deviceList
                        .getItem(id));
         deviceRemovalButton.setVisible(id != null);
      }
   });
   return visibleCols;
 }

Das Hinzufügen neuer Datensätze via Benutzeroberfläche wird an dieser Stelle nicht ausführlich demonstriert. Der Vorgang funktioniert jedoch analog zur Generierung der Dummy-Daten. Als Nächstes soll die bereits angedrohte Navigation umgesetzt werden. Zur Vermeidung von „Riesenklassen“, die sämtliche Layoutinformationen der einzelnen Screens beinhalten, wird eine entsprechende separate Klasse erstellt (Listing 4). Diese erbt von VerticalLayout. Der Screenaufbau wird innerhalb des Konstruktors implementiert. Dabei ist wichtig, dass dem Konstruktor eine Instanz der Hauptapplikation (die Tafel) übergeben wird. Dadurch können innerhalb der Login-Klasse Methoden aus der Hauptanwendung aufgerufen werden. Innerhalb der Hauptanwendung wiederum wird eine Page Switch Routine implementiert (alle Inhalte vom Screen nehmen, neue Inhalte auf den Screen hinzufügen). Diese führt dann bei erfolgreichem Login den eigentlichen Page Switch aus.

Listing 4: Login Screen
public class LoginScreen extends VerticalLayout
{
    public DevicemanagementApplication application;

    // setup login screen
    public LoginScreen(DevicemanagementApplication appcontext)
    {
        // enable application "context" access...
         this.application = appcontext;

        LoginForm login = new LoginForm();
        login.setWidth("100%");
        login.setHeight("300px");
        login.addListener(new LoginForm.LoginListener()
        {    
            public void onLogin(LoginEvent event) 
            {
                String un = event.getLoginParameter("username");
                String pw = event.getLoginParameter("password");
                if (un.equals("dummy") && pw.equals("user"))
                {
                  application.switchToMainPage();
                }
            }
        });
        addComponent(login);
    }
}

Das hier dargestellte Layoutkonzept ist etwas fragwürdig, denn sobald eine Anwendung mehr als nur zwei Screens beinhaltet, erhält man ein zähes eng vernetztes Klassenkonstrukt, das Wiederverwendbarkeit von Komponenten nur bedingt möglich macht. An dieser Stelle wird empfohlen, eines der bereits genannten Vaadin-Navigation-Plug-ins einzusetzen. Grundsätzlich sollten Sie an dieser Stelle so weit sein, dass Sie Ihre erste Vaadin-Anwendung erfolgreich erstellt haben oder zumindest die Grundlagenkenntnisse besitzen, um eine solche Anwendung zu erstellen. Neben den bereits vorgestellten Features rund um Vaadin soll noch ein weiteres Add-on des Frameworks vorgestellt werden, dass es Ihnen möglich macht, nicht nur Desktop- und Webanwendungen zu erstellen, sondern auch in den mobilen Bereich vorzudringen. Es handelt sich um das so genannte Vaadin Touch Kit [7].

Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.