Weboberflächen mit Ext JS

Slide 1: Ext JS für bessere Weboberflächen »Workshop Technology Days 2008« Stand: Februar 2008 Version: 1.0 doubleSlash Kai Guschal Net-Business GmbH Tel.: 07541-70078-0 Otto-Lilienthal-Str. 2 info@doubleSlash.de D-88046 Friedrichshafen http://blog.doubleSlash.de Page 1

Slide 2: »Überblick Ext JS« Ext JS auf einen Blick Grids und Trees Ist ein porfessionelles JavaScript Framework welches die Tabs and Layout Entwicklung von ultramodernen Webanwendungen, speziell für den Forms and Combobox Businesseinsatz ermöglicht. Page 2

Slide 3: »Einführung Ext JS« Was genau ist Ext JS? > Javascript basiertes Toolkit > Vielzahl vorgefertigte Widgets > Version 1.0 Borderlayout und Basic Dialog > Version 2.0 überarbeitete Container API (Application Programming Interface) und Layout Architektur Page 3

Slide 4: »Einführung Ext JS« Was genau ist Ext JS? > Verinnerlicht die Vorteile von Core Libraries und schließt deren Lücken > Kann stand-alone eingebunden oder auf die Core Libraries aufgesetzt werden. Entscheidung bleibt beim Entwickler, ob er bestehende Features verwenden will (bspw. die YUI History Control) > 9 verschiedene Layout-Manager (bspw. Card-, Column-, Form- oder Table-Layouts) Page 4

Slide 5: »Anwendungsbeispiele Ext JS« Editierbare Tabellen Tabellen (Basic Array Tabelle, editierbar, XML Tabelle, Gruppierung, Live Group Summary, Tabellen Plugin) Page 5

Slide 6: »Anwendungsbeispiele Ext JS« Drag und Drop Sortierungen it Bäumen Bäume (Drag and Drop Sortierung, mehrere Bäume, Baum mit Spalten) Page 6

Slide 7: »Anwendungsbeispiele Ext JS« Verschiedene Message Dialoge Message Box Dialoge (Bestätigung, Eingabe, mehrzeilige Eingabe, Standard Ja/Nein/Abbruch, Fortschrittsbalken, Bitte Warten, Alert, Alert mit Icons) Page 7

Slide 8: »Anwendungsbeispiele Ext JS« Advanced Tabs Tabs und Layouts (Basic Tabs, Advanced Tabs, Border- Anchor-Layouts, Portale) Page 8

Slide 9: »Anwendungsbeispiele Ext JS« Formular ... das TabPanel(s) enthalten kann Formulare und Combos Page 9

Slide 10: »Anwendungsbeispiele Ext JS« Web Desktop Alles Zusammen: (Vollwertiges Windows Desktop-Look & Feel) Page 10

Slide 11: »Ext JS Projektbeispiel« Vorher ohne Ext JS und Nachher mit Ext JS Ausgangssituation: Mit Ext JS steht der Anwender im Mittelpuntk Am Beispiel unserer Softwarelösung Project Monitor zeigen wir folgend drei Beispiele mit unterschiedlichen Implementierungen. Einmal ohne und einmal mit Ext JS 2.0. Page 11

Slide 12: »Beispiel Project Monitor 2.0« Dynamisch ladende Baumlisten für mehr Komfort Anwendung mit Ext JS Die Projektliste wurde bisher als statische Tabelle angezeigt. Anwendung ohne Ext JS Nun wird die Liste als komfortabler Baum abgebildet, der per AJAX Kindknoten eines Projektes nachladen kann. Page 12

Slide 13: »Beispiel Project Monitor 2.0« Intuitivere Bedienung, welche vom Desktop bekannt ist Ext JS: Flexibles Seitenlayout Bisher war das Layouten einer Seite nur Umständlich durch Einsatz von Frames oder DIVs umzusetzen. Der Einsatz von Ext JS erlaubt die Gestaltung einer Anwendung mit verschiebbaren Bereichen ähnlich einer Desktopanwendung. Anwendung ohne Ext JS: Starre Frames Page 13

Slide 14: »Beispiel Project Monitor 2.0« Direktes pflegen durch einfachen Klick (wie in MS Access) Ext JS: Editieren „on the fly“ Wurden die Daten bisher umständlich durch Dialoge in Popups gepflegt, so können Dank Ext JS nun Tabellenelemente durch einen Doppelklick darauf aktiviert und editierbar gemacht werden. Die Kommunikation der geänderten Daten an den Server erfolgt direkt durch AJAX. So ist auch eine Validierung der Daten „on the fly“ möglich. Dies erhöht die Usability für den Benutzer. Anwendung ohne Ext JS: Editieren erfolgt in Popups Page 14

Slide 15: »Weitere Facts zu Ext JS« Verfügbare Lizenzmodelle Verschiedene Lizensmodelle > Zum Einen LGPL 3.0 (Lesser General Public License ehem. Library General Public License). Zum Anderen kommerzielle und OEM Lizenzen in verschiedenen Preisstufen Support Lizenzen > notwendig für den Zugang zum Premium Help Forum. Die billigste Lizenz kostet 280 US Dollar.Sie ermöglicht jedoch auch lesenden Zugang zum SVN Repository von Ext JS) Page 15

Slide 16: »Weitere Facts zu Ext JS« Dokumentationen und Demos  > http://extjs.com/ >  > http://extjs.com/deploy/dev/docs/ (API Documentation) Page 16

Slide 17: Vielen Dank! Für mehr Informationen und weitere Fragen: »Kontaktiern Sie uns unter 07541-70078-0 oder info@doubleSlash.de« doubleSlash Kai Guschal Net-Business GmbH Tel.: 07541-70078-0 Otto-Lilienthal-Str. 2 info@doubleSlash.de D-88046 Friedrichshafen http://blog.doubleSlash.de Page 17