BXE 2.0 The browser based Wysiwyg XML Editor

Transkript

1 BXE 2.0 The browser based Wysiwyg XML Editor OpenExpo Frühling 2008, Bern Christian Stocker, Liip AG

2 Agenda Einführung Technischer Überblick Case Study Demo

3 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)

4 Warum ein XML Editor im Browser? Der Browser ist überall Jeder weiss, wie einen Browser zu bedienen XML ist inzwischen überall

5 XML: Wen kümmert s? Am Schluss ist ja eh alles HTML

6 XML: Viele Vorteile Semantischer Inhalt Kein Mischmasch von Style und Semantik Einfache Eingabe, komplexe Ausgabe

7 XML: Viele Vorteile Design Kontrolle Wiederververwendung von Inhalt für: Redesign Andere Formate: PDF, OOo, RSS, etc. Schema Kontrolle

8 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

9 Aber nix weit und breit Viele (X)HTML Editoren Wenige native XML Editoren Ein Browser basierter, aber nur IE + nicht FOSS

10 Lösung? Typisch Open Source: Mach Dein eigenes Ding Open Source seit September 2002

11 Features Wysiwyg XML Editor Validation with Relax NG Attribute Editing Context Sensitive Context Menu Undo/Redo Callbacks on Inserts

12 Features II Copy/Paste Multiplatform Exchangeable Loading/Saving Modules No Server Side Components needed No client side installation needed

13 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.

14 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 :)

15 Technische Übersicht Komplett in JavaScript geschrieben Benutzt Standards XML, DOM, XSLT und Relax NG Läuft trotzdem nur mit Firefox...

16 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

17 Architektur Echtes WYSIWYG für beliebiges XML Kontinuierliche XSLT Transformation im Browser Echtzeit-Validierung und Autovervollständigung nach RelaxNG Schema

18 Verschiedene Phasen Laden Editieren Speichern

19 Grundlegend benötigte Dateien Config: Eine Konfigurationsdatei XML: Die eigentlichen Daten XSLT: Fürs Layout RelaxNG: Schema/Struktur und weiteres

20 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

21 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

22 Speichern Remove Tracking- Points from XML Send back to Server (via POST, PUT)

23 Architektur Schema

24 Case Study: BXE 2.0 bei Bechtle

25 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,..

26 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

27 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

28 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.

29 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

30

31 Aufbau einer Seite

32 Varierende Layouts

33 Varierende Layouts II

34 Mehrsprachigkeit

35 Katalogerstellung

36 Katalogerstellung

37 Katalogerstellung

38 Katalogerstellung

39 Druckbereite Katalogseite

40 Demo

41 Links