Breaking the Viewport
Anwendungsentwicklung für Webdeveloper mit XUL
Kurze Vorstellung meiner Wenigkeit
- Philipp Söhnlein
- Seit 5 Jahren professioneller Webentwickler
- Hauptsächlich im PHP basierten Backend-Development tätig
- Begeisterter Anhänger der Web 2.0 Bewegung
-
Persönliche Steckenpferde:
- Blogging
- Semantic Web
- Barrierearmut
- Firefox Erweiterungen
- Religionszugehörigkeit: Zwischen Linux und Mac OS, aber ganz eindeutig Firefox
Webkongress 2008 - Web 2.0 → RIA
-
- → Webentwickler dringt in die Bereiche der Anwendungsentwicklung vor.
Was ist XUL? Herkunft
- Mozilla Welt
- Ghostbusters
-
Was ist XUL? Jetzt aber ernsthaft
- XUL = XML User Interface Language
- Oberflächen
- Dialoge
- Fenster
- Buttons
- Textfelder
- Tabs
- Menüs
- und vieles mehr
Was ist XUL? Beispiel 1 - Wizard
Was ist XUL? Beispiel 2 - Weitere coole nützliche Elemente
Weitere coole nützliche Elemente:
Was ist XUL? Interaktion
-
Frage: Wie steuere ich das Ganze?
Antwort: Mit JavaScript!
- DOM
- Unicode
- “Objektorientiert”
- Regular Expressions
- XML HTTP Request
- Was, wenn JavaScript nicht ausreicht?
Was ist XUL? XPCOM
XPCOM (Cross Platform Component Object Model)
Verfügbare Komponenten:
- LDAP
- Sound
- Filepicker
- JavaScript Include
- und viele mehr
Was ist XUL? Aussehen
- CSS zum stylen
- Aufösungsunabhängiges Box-Modell
Was ist XUL? Trennung
→ Trennung von
- Struktur (XUL)
- Aussehen (CSS)
- Verhalten (JavaScript)
Was ist XUL? Weitere Benefits Mozilla Framework
Weitere Benefits des Mozilla Frameworks:
- eingebaute Lokalisierungsmöglichkeit
- Plattformübergreifend
-
Verschiedene Anwendungsarten und Einsatzmöglichkeiten denkbar:
- Erweiterung von Mozilla Produkten: Extensions/Add-Ons
- Als Teil von Webseiten
- dezentrale Anwendungen
- eigenständige Desktop Applikationen
XUL in the wild - Teil 1
Wo kommt XUL bisher zum Einsatz?
In der Mozilla Welt:
- Firefox
- Thunderbird
- Netscape
- Seamonkey
- Flock
- Sunbird
XUL in the wild - Teil 2
Wo kommt XUL bisher zum Einsatz? - Außerhalb der Mozilla Welt:
-
Google Adword Editor
-
Cyclone 3 (Content Management System)
-
Komodo
-
TomTom Home
-
Songbird
XUL in the wild - Teil 3
Wo kommt XUL bisher zum Einsatz? - Außerhalb der Mozilla Welt:
Anpassung der Oberfläche
Das Problem.
Also, was geht?
Anpassung der Oberfläche - Beispiel
-
Das Ziel:
-
Erster Versuch (reines XUL):
-
Zweiter Versuch (XUL mit HTML):
Anpassung der Oberfläche - Real World-Beispiele & Fazit
→ Von “langweiliger” Standard-App bis zur funky Designer-Anwendung alles drin.
(Hardcore Cocoa Fans dürfen an dieser Stelle mit den Augen rollen.)
Werkzeuge
Eine kleine Übersicht an nützlichen Programmen.
Werkzeuge - DOM Inspector
- Wird bei Firefox < 3 mitgeliefert, ab Firefox 3 muss er über AMO nachinstalliert werden.
- Ist für viele Mozilla Produkte verfügbar.
- Im Firefox zu finden unter Extras→DOM Inspector oder über +Umschalt+I (Mac) oder Alt+Umschalt+I (Win) oder Strg+Umschalt+I (Linux).
- Nützlich für Overlays.
- AMO Seite: https://addons.mozilla.org/de/firefox/addon/6622.
Werkzeuge - Extension Developer
- Firefox-/Thunderbird-Extension
-
Erleichtert Beginnern den Einstieg durch
- Extension Builder
- Enable Debugging Preferences
-
Für Profis interessant
- XUL Editor
- RegExp Validator
- Restliche Features eher unbedeutend, teilweise auch buggy.
- AMO Seite: https://addons.mozilla.org/de/firefox/addon/7434.
Werkzeuge - Externalize Strings
Werkzeuge - XUL Explorer
- Eigenständige XUL Anwendung.
- “XUL only IDE”
- Schnelles entwickeln von Oberflächen (ständiger Neustart der Zielanwendung entfällt).
-
Interessante Features:
- Snippets
- XUL Formatter
- XUL Checker (=Accessibility Checker)
- Integrierte Referenz/Keyword Lookup
- Tab-Interface ermöglicht gleichzeitigtes Bearbeiten von mehreren Dateien.
- Webseite: http://developer.mozilla.org/en/XUL_Explorer
Werkzeuge - Komodo
- IDE für Skriptsprachen
- Basiert selbst auf XUL
- Verfügbar für Windows, Linux, Mac OS
-
Zwei Versionen: Komodo Edit (=umsonst) und Komodo IDE (=200 Euro).
Komodo IDE hat Zusatzfunktionen wie z.B. Debugger, SCC Integration (Subversion, CVS, Perforce), Code Browser (Code nach Klassen, Namespaces und Dateien suchen), …
- Syntax-Highlighting
- IntelliSense für alle Sprachen/Markups (also auch für XML, XUL, HTML; teilweise auch JavaScript)
Werkzeuge - Komodo (Fortsetzung)
XULRunner
- Laufzeit Umgebung für XUL Anwendungen
- Kann systemweit installiert oder mit Anwendung mitgeliefert werden.
- Die Entwicklung von XULRunner Applikationen ist sehr ähnlich mit der Entwicklung von Extensions.
XULRunner (Fortsetzung)
-
Features der Laufzeitumgebung:
- XPCOM
- Gecko (für Webinhalte)
- DOM
- XBL
- SVG
- XSLT
- XMLHTTPRequest
- SQLite (wenn man selber kompiliert)
- Firefox 3 und Thunderbird basieren noch nicht 100%ig auf XULRunner.
- XULRunner wird innerhalb von Mozilla immer wichtiger.
Accessibility
-
Welche RIA Technologie also nun für zugängliche Anwendungen verwenden?
- Flash-Zugänglichkeit machbar, aber nur mit (teilweise starkem) Zusatzaufwand (Quelle: Barrierefreie Gestaltung für Blinde im E-Lernen am Beispiel einer Flash-basierten Anwendung)
- Auf HTML-Basis machbar, allerdings bleiben dann viele JavaScript-Möglichkeiten nur als Zusatzideen. Außerdem kommen viele semantische Strukturen nur als nicht aussagekräftiger DIV daher.
- Dagegen ist die XUL-Entwicklung prinzipiell sehr semantisch korrekt möglich → Weniger Arbeit für den Screenreader.
-
Kurzer Screenreader-Test mit XUL:
- Voice Over (Mac OS) schweigt.
- JAWS und WindowEyes lesen fast alles korrekt vor.
- XUL Accessibility Tool
