BXE 2.0 The browser based Wysiwyg XML Editor OpenExpo Frühling 2008, Bern Christian Stocker, Liip AG
Agenda Einführung Technischer Überblick Case Study Demo
Was ist BXE 2.0? Ein browser basierter XML Wysiwyg Editor Komplett JavaScript basiert Keine Plugins/Downloads nötig Open Source (Apache Software License 2.0)
Warum ein XML Editor im Browser? Der Browser ist überall Jeder weiss, wie einen Browser zu bedienen XML ist inzwischen überall
XML: Wen kümmert s? Am Schluss ist ja eh alles HTML
XML: Viele Vorteile Semantischer Inhalt Kein Mischmasch von Style und Semantik Einfache Eingabe, komplexe Ausgabe
XML: Viele Vorteile Design Kontrolle Wiederververwendung von Inhalt für: Redesign Andere Formate: PDF, OOo, RSS, etc. Schema Kontrolle
Warum eigener XML Editor? XML, XSL-basiertes Flux CMS brauchte 3 Dinge: Verarbeiten von jeglichen XML Dokumenten Verstecken der XML Problematik Lauffähig auf allen Betriebssystemen
Aber...... nix weit und breit Viele (X)HTML Editoren Wenige native XML Editoren Ein Browser basierter, aber nur IE + nicht FOSS
Lösung? Typisch Open Source: Mach Dein eigenes Ding Open Source seit September 2002
Features Wysiwyg XML Editor Validation with Relax NG Attribute Editing Context Sensitive Context Menu Undo/Redo Callbacks on Inserts
Features II Copy/Paste Multiplatform Exchangeable Loading/Saving Modules No Server Side Components needed No client side installation needed
Was ist neu in BXE 2.0? Uses XSLT-only as rendering engine More intelligent RelaxNG usage (automatically inserts necessary subelements) Much more configurable via RelaxNG Content from attributes is editable.
Was ist neu in BXE 2.0 Server Includes for including dynamic, not editable content Server Cut-n-paste Internationalisation Better Table Handling Callbacks on delete Less Bugs :)
Technische Übersicht Komplett in JavaScript geschrieben Benutzt Standards XML, DOM, XSLT und Relax NG Läuft trotzdem nur mit Firefox...
Warum Firefox und nicht IE? works on Linux, Mac, Windows, etc. is an Open Source browser has very good DOM/CSS support has very useful developement tools
Architektur Echtes WYSIWYG für beliebiges XML Kontinuierliche XSLT Transformation im Browser Echtzeit-Validierung und Autovervollständigung nach RelaxNG Schema
Verschiedene Phasen Laden Editieren Speichern
Grundlegend benötigte Dateien Config: Eine Konfigurationsdatei XML: Die eigentlichen Daten XSLT: Fürs Layout RelaxNG: Schema/Struktur und weiteres
Laden Load config.xml Load XML, XSLT and RelaxNG Transform XSLT to trackable XSLT Transform XML to trackable XML (add IDs) Transform XML with XSLT to HTML Validate XML document. Display HTML
Editieren Listens on some events (keypress, mouse clicks) If keypress insert corresponding key into XML and HTML If Node-Operation (delete/append/etc) apply on XML Document and do the validation/transformation cycle
Speichern Remove Tracking- Points from XML Send back to Server (via POST, PUT)
Architektur Schema
Case Study: BXE 2.0 bei Bechtle
Bechtle Mit rund 60 IT-Systemhäusern in Deutschland und der Schweiz aktiv Zählt europaweit zu den führenden IT-E-Commerce Anbietern 4'000 Mitarbeiter In der Schweiz: bechtle.ch, arp.com,..
Der Bechtle Katalog Über 30'000 Produkte online und offline 9 Länder und 6 Sprachen 210 Produktneuheiten pro Woche Tagesaktuelle Verfügbarkeiten und Preise Produkte schnell und einfach finden Angebote kostengünstig selbst erstellen
BXE bei Bechtle Ziel: Webbasiertes Bewirtschaften komplexer Katalogdaten und -layouts Ausgangslage: Der klassische Produktionsprozess skaliert nicht Kataloge sind semistrukturiert: freier als Datenbanken, strukturierter als Textdokumente
BXE bei Bechtle Neuer Produktionsprozess: 400 Produktmanager arbeiten mit BXE 2.0 erstellen ganze Katalogseiten und Kapitel bis zum druckreifen Dokument. Verarbeiten strukturierter Tabellen von/zu Datenbank Internationalisierte Bedienungsoberfläche.
Desktop Publishing 2.0 Einer der führender IT-E-Commerce Anbieter in Europa Portierung und Erweiterung des internen Produktinformations- Katalogdaten Management Systems Prozessoptimierung und Effizienzsteigerung
Aufbau einer Seite
Varierende Layouts
Varierende Layouts II
Mehrsprachigkeit
Katalogerstellung
Katalogerstellung
Katalogerstellung
Katalogerstellung
Druckbereite Katalogseite
Demo
Links http://bxe.ch/ http://bxe.ch/files/bxe_2_0/examples/rss/index.html http://fosswiki.liip.ch/display/bxe http://slides.liip.ch/ http://www.liip.ch/