Sencha Ext JS JavaScript-Framework

Dieses Seminar führen wir im Moment nicht durch.

Sencha Ext JS ist ein JavaScript-Framework der 3. Generation. Das Framework ermöglicht eine rasche objektorientierte Entwicklung von Rich Desktop Webanwendungen auf Basis des MVC-Pattern. Es bietet eine durchdachte reichhaltige Sammlung an GUI-Komponenten, die die Anwender vom Desktop her kennen. Das Seminar stellt alle wichtigen Kernkomponenten wie Schaltflächen, Listen, Bäume, Tabellen und Layouts vor, mit denen sich Webanwendungen entwickeln lassen, die den Desktop-Anwendungen in ihrer Flexibilität nur wenig nachstehen. Des Weiteren werden detailliert die dahinter liegenden Konzepte, wie Model, Store, Controller, View und das in ExtJS ›integrierte‹ MVC Pattern vorgestellt. Sie bilden das Fundament der GUI-Komponenten. Teilnehmer entwickeln eigene funktionale GUI-Komponente mittels des ausgefeilten Vererbungskonzeptes und erzeugen daraus auf Basis des MVC-Pattern Formulare, die über die integrierte REST-API ihre Daten mit einem Backend aktualisieren. Sie lernen, wie Daten in Tabellen direkt editiert und in XML- oder JSON-Stores gespeichert werden, die wiederum im Hintergrund mittels REST-API die Daten mit dem Backend synchronisieren. Neben den Grundlagen des Sencha Ext JS-Frameworks Model, View, Controller und den GUI-Komponenten stellt das Seminar die Möglichkeiten für direkte DOM-Manipulationen, Drag&Drop, Data-Binding und Themes vor und gibt Hinweise sowie Best Practices zur Codeorganisation, Backend-Anbindung und zum Aufbau großer Rich Desktop-Anwendungen.

Inhalte des Seminars

Einstieg in Sencha Ext JS

• Anforderungen an ein Rich Desktop und JavaScript-Framework
• Sencha Ext JS Showcase
• Ursprung und Entwicklung von Sencha Ext JS
• Preisgestaltung für kommerzielle Version, Support-Verträge
• Ext JS und Sencha GXT 3 (ehemals EXT GWT) für Java-Entwickler
• GUI-Builder Ext Designer

Grundlegende Schritte mit Ext JS

• Einbinden der Ext JS-Bibliotheken
• Webseite aufbauen und erstes Beispiel implementieren
• Debugging
• DOM-Baum, CSS-Selektoren
• Utility-Funktionen in der Ext-Klasse
• DOM-Manipulationen mit Ext.DomHelper, Ext.Element
• DOM-Anfragen und Element-Selektion über Ext.DomQuery
• Auf DOM-Ereignisse registrieren

Grundlegende GUI-Komponenten und Techniken

• Model, View, Store, Controller
• Komponentenmodell von Ext JS, Rendering
• Container, Panel, Window, Viewport
• Komponentenüberblick
• Reiter, Schieberegler, TimeField, Fortschrittsbalken, ComboBox, SplitButton …
• Quicktips
• Menüs und Toolbar, Schaltflächengruppen, Aktionen, Statuszeile
• Fenster und Dialoge
• Formulare, Validierung, Upload
• Rich-Text-Editor, RTF
• Bäume für hierarchische Strukturen

Layout Manager

• Das Layout Manager-Paket
• AbsoluteLayout
• AccordionLayout
• AnchorLayout
• BorderLayout
• BoxLayout
• CardLayout
• ColumnLayout
• FormLayout
• HBoxLayout
• TableLayout
• VBoxLayout

Ajax/REST API

• Ablauf von Ajax/REST -Requests, Response verarbeiten
• POST, PUT, DELETE und GET-Aufrufe, REST Lifecycle
• Ext.Element aktualisieren mit Ext.Updater
• Formulare mit Ajax/REST API aktualisieren
• Umgang mit Datenformaten XML, JSON, einfachem Text
• Lebenszyklus von Daten, DatenTypen
• XML- und JSON-Daten, Model, Store, Records
• Ausblick: Effektive Server-Kommunikation mit Ext Direct

Tabellen (Grids)

• Einfache Tabellen
• Spalten-Modelle, Datentypen
• Property-Tabelle
• Editierbare Tabelle, Zeileneditor
• XML/JSON-Grid
• Paginierung, Sortierung, Filterung
• Große Datenmengen verwalten
• Gruppierte Daten
• Speichern von Änderungen mittels REST-Services

XTemplate und DataView

• Data-Binding
• Rendering mittels vorgefertigtem Template
• Ausdrücke in den Templates, Bedingungen, Fallunterscheidungen
• ListView zur komfortablen Listendarstellung mit XTemplate
• DataView und der Store

Weitere Themen und Ausblick

• Internationalisierung
• Accessibility
• Effekte
• Browser-History verwalten
• Google Maps integrieren
• Charts
• Drag&Drop-Unterstützung von Sencha Ext JS
• Eigene GUI-Komponenten aufbauen
• Clientseitiger Status
• Effektives Debugging, Umgang mit Fehlermeldungen
• Aufbau eines Themes
• Integration mit anderen JavaScript-Bibliotheken
• Architektur großer GUI-Anwendungen