Rich Internet Applications mit ExtJS und Jersey
Kommentare

Odyssee im GUI-Raum
Unsere RIA sollte den Anwendern verschiedene getrennte Aktionen anbieten, von denen abhängig von den Benutzerrollen, jeweils eine unterschiedliche Teilmenge verfügbar ist. Ein klares

Odyssee im GUI-Raum

Unsere RIA sollte den Anwendern verschiedene getrennte Aktionen anbieten, von denen abhängig von den Benutzerrollen, jeweils eine unterschiedliche Teilmenge verfügbar ist. Ein klares Indiz für die Verwendung von Tabs, z. B. mit der ExtJS-Klasse Ext.TabPanel… weitere Frames, wie Menüs und Informationsbereiche, sollten über bzw. neben den Tabs dargestellt werden (Abb. 3).

Abb. 3: Viewport mit Border-Layout

ExtJS bietet mit der Klasse Viewport einen einfachen Weg, ein solches Design zu verwirklichen. Der Viewport ist ein Singleton und bildet den Rahmen, in dem die restliche Applikation eingebettet wird. Typischerweise verwendet Viewport ein Border Layout, das verschiedene so gennante Regionen enthält (z. B. Center, West, East, usw.). Die Center-Region passt sich in der Größe dem Browserfenster an, während die Maße der anderen Regionen fix sind. Das TabPanel ist in der Center-Region des Viewports platziert. Das Menü bildet die West-Region und kann „zusammengeklappt“ werden.

Für die Darstellung von Tabellen (z. B. eine Liste von Versicherten) bietet sich die ExtJS-Klasse GridPanel an. Diese Klasse kann Spalten verschieben, sortieren und ausblenden und die aktuelle Anordnung in einem Cookie speichern. Das Grid bietet noch viele weitere Möglichkeiten (z. B. Paging der Daten und Inline-Editing). Der Sourcecode im Listing 4 erzeugt ein Grid, das die Daten der Versicherten (gekürzt) darstellt.

Listing 4
var versicherteGrid = new Ext.grid.GridPanel({
  store: versicherteStore,  
  colModel: new Ext.grid.ColumnModel({
  columns: [
    {header: "Einrichtung", width:45, dataIndex: 'langname', id:'kvnr'},
    {header: "KV-Nummer", dataIndex: 'kvnr'},
    {header: "Nachname", dataIndex: 'nachname'},
    {header: "Beginn", width: 18, dataIndex: 'teilnahmebeginn',renderer:  
       Ext.util.Format.dateRenderer('d.m.Y')}
  ]
  }),
  height:450, width:849, iconCls:'icon-grid',
  sm: new Ext.grid.RowSelectionModel({singleSelect:true})
});

Hier wird der MVC-Mechanismus von ExtJS deutlich: das Grid ist eine View und ist nur für die Darstellung verantwortlich. Die Daten selbst liegen im Modell, in diesem Fall im versicherteStore. Dieser Store wiederum greift mithilfe eines http-Proxy per REST auf den Server zu und liest und schreibt bei Bedarf die Daten per JSON – vollständig transparent für das Grid.

Zur Verdeutlichung ein kurzes Beispiel: Nach der Erfassung eines neuen Datensatzes in einem Pop-up-Dialog (Abb. 4) wird die Methode store.add() verwendet. Direkt nach Aufruf dieser Methode schreibt der Store den Datensatz per AJAX zum Server. Der HTTP-Statuscode hilft, Client und Server synchron zu halten – denn der Server kann z. B. nicht erreichbar sein oder den Datensatz ablehnen. Nur bei einem Statuscode von kleiner als 400 wird die Methode store.commit() aufgerufen, andernfalls store.rejectChanges().

Angeordnet über jedem Grid befindet sich ein Filter, mit dem die Benutzer Datensätze im Grid filtern können. Das Grid reagiert unmittelbar auf die Eingaben, sodass der Benutzer schon nach der Eingabe nur eines Buchstabens direktes Feedback in Form einer geänderten Liste erhält. Der verwendete DataStore von ExtJS hat dieses Verhalten bereits implementiert, sodass „nur noch“ für die korrekte Formulierung der Filterfunktion aus den Eingabefeldern gesorgt werden muss. Dieses Pattern ist insgesamt sehr robust und hat sich in der Praxis bewährt. Bei mehr als 1 000 Datensätzen beginnt sich das Grid allerdings träge zu verhalten. Dann sollte man doch zu Paging greifen oder ein intelligentes Filtern auf dem Server implementieren.

Abb. 4: Pop-up-Dialog in der RIA

Auf den folgenden Seiten erwarten Euch folgenden Themen:

  • 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 -