Rich Internet Applications mit ExtJS und Jersey
Kommentare

Erster Kontakt
Zum Einstieg werfen wir einen kurzen Blick auf den Login-Dialog unserer Anwendung. Jedes ExtJS-Projekt benötigt nur eine HTML-Datei, in der dann das JavaScript durch include-Statements

Erster Kontakt

Zum Einstieg werfen wir einen kurzen Blick auf den Login-Dialog unserer Anwendung. Jedes ExtJS-Projekt benötigt nur eine HTML-Datei, in der dann das JavaScript durch include-Statements geladen wird. Die eigentliche Programmlogik startet in der Funktion onReady(), die automatisch von ExtJS aufgerufen wird, wenn der Browser das aktuelle Dokument geladen hat – allerdings bevor die Bilder geladen werden (Listing 1).

Listing 1
Ext.onReady( function() {

  var testPanel = new Ext.FormPanel({ // (a)
    defaults: { xtype: 'textfield', width: 250, enableKeyEvents:true },
    items: [
        { fieldLabel: 'Username', id: 'loginUsername' },
        { fieldLabel: 'Passwort', id: 'loginPassword', inputType: 'password' }
    ]
  });

  var testDialog = new Ext.Window({ // (b)
    width: 388, height: 154,
    layout: 'fit', plain: true, modal: true, 
    iconCls: 'icon-key',  title: 'Hello ExtJS',
    items: [ testPanel ],  buttons: [ { text:'OK', handler: onOK }] // (c)
  });
});

Unser Login-Dialog besteht im Wesentlichen aus drei Objekten:

  1. Panel mit den beiden Eingabefeldern
  2. Fenster mit dem Panel und einem OK-Button
  3. Event Handler für den OK-Button

Sowohl Panel als auch Fenster werden in der bei ExtJS üblichen Vorgehensweise objektorientiert mit dem new-Schüsselwort instantiiert (Listing 1 – a, b). Der Konstruktor hat genau einen Parameter, nämlich ein Objekt in der JavaScript-Objektnotation JSON [9].

Typisch für ExtJS ist das Attribut items. Über das Array items lassen sich weitere Objekte in ein übergeordnetes Objekt einfügen, um z. B. auf diese Weise neue, komplexe Widgets zu erstellen. Die einzufügenden Objekte können ebenfalls direkt als JSON dargestellt werden (wie in unserem Fall bei den beiden Eingabefeldern im testPanel) oder sie können vorab als Variable instantiiert und dann mit dieser Variable in das items-Array aufgenommen werden (wie bei testDialog).

Durch die Angabe des Attributs layout wird ein geeigneter Layoutmanager deklariert, der bestimmt, wie die untergeordneten Objekte im Fenster angeordnet werden. Das vorgefertigte Layout fit passt eine einzige Komponente flächenfüllend in die übergeordnete Komponente ein.
Nach der Definition der benötigten Objekte fehlt noch der Event Handler für den OK-Button. Diese Funktion (onOK) verwendet zunächst die Methode hide(), um das Fenster unsichtbar zu machen. Dadurch werden auch doppelte Submits verhindert. Mithilfe der ExtJS-Methode get() verschafft sie sich dann die in die Felder eingetragenen Werte und erzeugt anschließend ein Objekt vom Typ Ext.data.connection, um die Client/Server-Kommunikation durchzuführen. Dadurch ruft ExtJS per AJAX einen Web Service auf und wertet die Antwort aus. Das geschieht asynchron im Hintergrund, sodass für die Ergebnisverarbeitung Callback-Funktionen verwendet werden müssen (Listing 2).

Listing 2
function onOK() {
  testDialog.hide();  
  var myrequest = new Ext.data.Connection().request({
    method:'GET',  
    url: url +'?username='+ testPanel.get('loginUsername').getValue()
         +'&password='+ testPanel.get('loginPassword').getValue(),
    failure: function() { /* show error message */ },
    success: function() { /* do something */ }
  });      
} 

Mit einem Aufruf von testDialog.show() können wir das Login-Fenster nun sichtbar machen (Abb. 1).

Abb. 1: Ein einfacher Login-Dialog

Auf den folgenden Seiten erwarten Euch folgenden Themen:

  • JSON und die Annotations
  • Odyssee im GUI-Raum
  • Rücksturz zur Wirklichkeit
  • Babylon A.D.
  • http 204 antwortet nicht
  • Das unentdeckte Land
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -