PHP, AJAX und XUL im Intranet

36
PHP, AJAX und XUL im Intranet Markus Wolff

description

Der Name ist Programm: Die Präsentation bietet einen Einblick in die Nutzung des plattformunabhängigen, XAML-ähnlichen GUI-Toolkits des Mozilla-Projekts mit einem per AJAX angebundenem PHP-Backend. Der Vortrag wurde auf der International PHP Conference 2005 in Frankfurt gehalten.

Transcript of PHP, AJAX und XUL im Intranet

Page 1: PHP, AJAX und XUL im Intranet

PHP, AJAX und XUL im Intranet

Markus Wolff

Page 2: PHP, AJAX und XUL im Intranet

2

Inhalt Was ist XUL? Crashkurs: XUL Was ist AJAX? Crashkurs: AJAX XUL - Stolpersteine Ausblicke Weitere Informationen

Page 3: PHP, AJAX und XUL im Intranet

3

Was ist XUL ? Extensible User Interface Language XML-basierte Beschreibungssprache für grafische Benutzeroberflächen

Grundidee: Kleiner, hochportabler Kern interpretiert GUI-Definition und Javascript-Eventhandler zur Laufzeit

Ideal für Rapid Prototyping Mit XUL erstellte Anwendungen auf allen gängigen Plattformen lauffähig

Lokale Installation ebenso möglich wie Remote-Betrieb im Browser

Page 4: PHP, AJAX und XUL im Intranet

4

Was ist XUL ? (2) Markup erweiterbar über XBL

Erlaubt Zusammenfügen beliebiger XUL-Elemente zu einem kombinierten Element

Erlaubt Definition eigener Tag-Attribute Erlaubt Hinterlegung von komplexem Javascript zur Initialisierung sowie für eigene Objektmethoden

Eigene Containertags können beliebigen Inhalt haben, der in XBL zugreifbar ist

Eigenes Komponentensystem XPCOM für lokale Applikationen

Page 5: PHP, AJAX und XUL im Intranet

5

Was ist XUL ? (3) Browser mit XUL-Unterstützung: Alle

mit Gecko-Engine Mozilla-Browser: Firefox, Seamonkey, Camino

Galeon (Gnome) Epiphany (Gnome) Künftig evtl. Konqueror (KDE) ?

XUL-fähiger Desktop: SymphonyOS Microsoft im IE mit eigener

Konkurrenz-Technik: XAML

Page 6: PHP, AJAX und XUL im Intranet

6

Crashkurs: XUL Content-Type:

application/vnd.mozilla.xul+xml Apache: Als MIME-Type für .xul – Dokumente hinzufügen

PHP: Senden via header() Bei lokalem Betrieb Dateiendung .xul

verwenden

Page 7: PHP, AJAX und XUL im Intranet

7

Crashkurs: XUL (2)„Hello World“ in XUL:<?xml version="1.0" encoding="utf8" ?><?xml-stylesheet href="chrome://global/skin/" type="text/css" ?><window id="MainWindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"><description>Hello World</description></window>

Page 8: PHP, AJAX und XUL im Intranet

8

Crashkurs XUL (3) Resultat:

Page 9: PHP, AJAX und XUL im Intranet

9

Crashkurs XUL (4)Buttons:<button id="btSearch" label="Klick mich" />

Texteingabefelder:<textbox id="sometext" /> Attribut multiline="true" für mehrzeilige Felder

Feldbeschriftungen:<label value="Texteingabe:" control="sometext"/>

Checkboxen:<checkbox id="chk" checked="true" label="Checkbox-Test"/>

Page 10: PHP, AJAX und XUL im Intranet

10

Crashkurs XUL (5)Selectboxen:<menulist id="lstTest"> <menupopup> <menuitem label="Eins" value="1"/> <menuitem label="Zwei" value="2"/> <menuitem label="Drei" value="3" selected="true"/> </menupopup></menulist> Diverse Darstellungsmöglichkeiten für Listboxen:

Multiselect Mehrspaltig Editierbar (z.B. zum Hinzufügen neuer Einträge)

Page 11: PHP, AJAX und XUL im Intranet

11

Crashkurs XUL (6) Beispielformular:<window id="MainWindow"

xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<label value="Texteingabe:" control="sometext"/>

<textbox id="sometext" />

<button id="btSearch" label="Klick mich!" />

<menulist id="lstTest">

<menupopup>

<menuitem label="Eins" value="1" />

<menuitem label="Zwei" value="2" />

<menuitem label="Drei" value="3" selected="true" />

</menupopup>

</menulist>

</window>

Page 12: PHP, AJAX und XUL im Intranet

12

Crashkurs XUL (7) Resultat:

Page 13: PHP, AJAX und XUL im Intranet

13

Crashkurs XUL (8) Standardlayout: Vertikal Umschaltbar mit <window>-Attribut

orient=“horizontal“ Elemente jederzeit schachtelbar in

horizontale oder vertikale Boxen: <hbox> <vbox>

Layoutboxen ineinander schachtelbar, dadurch komplexe Layouts möglich

Größenanpassung via „flex“-Attribut

Page 14: PHP, AJAX und XUL im Intranet

14

Crashkurs XUL (9)Beispiel mit Layoutelementen:<spacer flex="1" />

<hbox>

<label value="Texteingabe:" control="sometext" />

<textbox id="sometext" flex="1" />

<button id="btSearch" label="Klick mich!" />

</hbox>

<menulist id="lstTest">

<menupopup>

<menuitem label="Eins" value="1" />

<menuitem label="Zwei" value="2" />

</menupopup>

</menulist>

<spacer flex="2" />

Page 15: PHP, AJAX und XUL im Intranet

15

Crashkurs XUL (10)Resultat:

Page 16: PHP, AJAX und XUL im Intranet

16

Crashkurs XUL (11)Datentabellen in XUL:<tree flex="5" id="resultTree">

<treecols>

<treecol id="id" label="ID" primary="true" hidden="true" persist="width ordinal hidden" />

<splitter class="tree-splitter" />

<treecol id="name" label="Title" flex="4" persist="width ordinal hidden" />

<splitter class="tree-splitter" />

<treecol id="type" label="Mediatype" flex="1" persist="width ordinal hidden" />

</treecols>

<treechildren />

</tree>

Page 17: PHP, AJAX und XUL im Intranet

17

Crashkurs XUL (12)Resultat:

Page 18: PHP, AJAX und XUL im Intranet

18

Crashkurs XUL (13)Daten hinzufügen via XUL-Tags:<treechildren>

<treeitem>

<treerow>

<treecell label="1"/>

<treecell label="Hamburger Abendblatt"/>

<treecell label="print"/>

</treerow>

</treeitem>

<treeitem>

<treerow>

<treecell label="2"/>

<treecell label="Spiegel Online"/>

<treecell label="Newsportal"/>

[...]

Page 19: PHP, AJAX und XUL im Intranet

19

Crashkurs XUL (14)Resultat:

Page 20: PHP, AJAX und XUL im Intranet

20

Crashkurs XUL (15)Problem: Einbetten von Daten erfordert Reload der kompletten Maske bei Änderungen (siehe HTML)Datenquellen-Support in Mozilla nur für RDF: Viel OverheadAlternative: Datenimport via Javascript & XMLHttpRequest (AJAX)

Page 21: PHP, AJAX und XUL im Intranet

21

Was ist AJAX ?Scheuerpulver der Firma Colgate- PalmoliveAkronym für:

Asynchronous Javascript And XML

Unterstützung durch alle gängigen BrowserKandidat für Buzzword des Jahres

Page 22: PHP, AJAX und XUL im Intranet

22

Was ist AJAX ? (2)Grundprinzip:

Webserver liefert initiales Dokument aus Dokument enthält Javascript-Eventhandler Eventhandler fragen bei User-Interaktion per XML-Request Daten vom Webserver an

Webserver liefert Daten via XML zurück XML-Response wird in Javascript interpretiert und führt (z.B.) zu Änderungen im Dokument

Page 23: PHP, AJAX und XUL im Intranet

23

Was ist AJAX ? (3)Programmierweise nähert sich der von Desktop-Anwendungen anApplikationen sind nicht mehr zwangsläufig „Stateless“Durch Nachladen nur von Nutzdaten beschleunigte Response-Time der AnwendungenKomplexere Userinteraktionen werden ohne Komfortverlust möglich

Page 24: PHP, AJAX und XUL im Intranet

24

Was ist AJAX ? (4)Nachteile:

Spielt nicht mit Suchmaschinen zusammen Barrierefreiheit problematisch Nicht nutzbar bei ausgeschaltetem Javascript oder (bei IE) ActiveX

Fazit: Einsetzbar nur bei klarer Zielgruppe oderunter kontrollierten Bedingungen (z.B. Intranet)

Bei Einsatz auf Websites immer Alternativen ohne Javascript anbieten

Page 25: PHP, AJAX und XUL im Intranet

25

Crashkurs: AJAX...am Beispiel von PEAR::HTML_AJAXZiel: Serverseitige PHP-Klassen in Javascript transparent zur Verfügung stellenInstallation via PEAR Installer:

pear config-set preferred_state alpha pear install HTML_AJAX

Page 26: PHP, AJAX und XUL im Intranet

26

Crashkurs: AJAX (2)Von Javascript aus zu benutzende PHP-Klasse:class served_class {

public function __construct() {

$this->pdo = new PDO('mysql:host=localhost;dbname=test', 'ajax', 'ajaxpw');

}

public function get_records($search='') {

$sql = "SELECT * FROM publications ";

if (trim($search) != '')

$sql .= "WHERE title LIKE ".$this->pdo->quote($search);

return $this->pdo->query($sql)->fetchAll(PDO_FETCH_ASSOC);

}

}

Page 27: PHP, AJAX und XUL im Intranet

27

Crashkurs: AJAX (3)HTML_AJAX Serverscript:include 'HTML/AJAX/Server.php';

class TestServer extends HTML_AJAX_Server {

public $initMethods = true;

public function initServed_class() {

include_once 'served_class.php';

$this->registerClass(new served_class());

}

}

$server = new TestServer();

$server->clientJsLocation = '/path/to/PEAR/data/HTML_AJAX/js/';

$server->handleRequest();

Page 28: PHP, AJAX und XUL im Intranet

28

Crashkurs: AJAX (4)Einbindung des generierten Javascripts in XUL-Dokumente:

<script type='text/javascript' src="ajax_server.php?client=all" />

<script type='text/javascript' src="ajax_server.php?stub=all" />

Page 29: PHP, AJAX und XUL im Intranet

29

Crashkurs: AJAX (5)Button mit Klick-Handler versehen:<hbox> <label value="Texteingabe:" control="sometext" /> <textbox id="sometext" flex="1" /> <button id="btSearch" label="Klick mich!" oncommand=“doSearch()“ /></hbox>

Page 30: PHP, AJAX und XUL im Intranet

30

Crashkurs: AJAX (6)Klick-Handler definieren:

function doSearch() { var search = document.getElementById("sometext").value; var server = new served_class(); var result = server.get_records(search); var tree = document.getElementById("resultTree"); refreshTree(tree, result);}

Page 31: PHP, AJAX und XUL im Intranet

31

Crashkurs: AJAX (7)Ergebnisse dem Tree hinzufügen:function refreshTree(tree, result) {

emptyTree(tree);

var exThrown = false;

for (var i=0; i < result.length; i++) {

var treeItem = document.createElement("treeitem");

var treeRow = document.createElement("treerow");

for (var name in result[i]) {

var cell = document.createElement("treecell");

cell.setAttribute("label",result[i][name]);

treeRow.appendChild(cell);

}

treeItem.appendChild(treeRow);

tree.childNodes[1].appendChild(treeItem);

}

}

Page 32: PHP, AJAX und XUL im Intranet

32

Crashkurs: AJAX (8)Vorherige Ergebnisse beseitigen:

function emptyTree(tree) { while(tree.childNodes[1].hasChildNodes()) { tree.childNodes[1].removeChild( tree.childNodes[1].childNodes[0] ); }}

Page 33: PHP, AJAX und XUL im Intranet

33

Crashkurs: AJAX (9)Variante 2: Das „A“ in AJAXfunction doSearch() { var search = document.getElementById("sometext").value; var callback = new ResultHandler(); var server = new served_class(callback);}

function ResultHandler() {}ResultHandler.prototype = { get_records: function(result) { var tree = document.getElementById("resultTree"); refreshTree(tree, result); } }

Page 34: PHP, AJAX und XUL im Intranet

34

XUL: StolpersteineDokumentation hängt Entwicklung hinterherEinige Funktionen nur bei lokal registrierten Applikationen verfügbar:

Wizards Dialogfenster Dateizugriff

Server-Debugging teils knifflig Absolute Pflicht: Error Logging Kür: Unit-Tests

Page 35: PHP, AJAX und XUL im Intranet

35

AusblickeNächste Firefox-Versionen bringen SVG und CanvasMiniMo bringt potentiell XUL auf PDAs und Handys

Page 36: PHP, AJAX und XUL im Intranet

36

Weitere InformationenAJAX:

http://en.wikipedia.org/wiki/AJAX http://pear.php.net/package/HTML_AJAX http://blog.joshuaeichorn.com/

XUL: http://developer.mozilla.org/ http://www.xulplanet.com/ http://books.mozdev.org/ http://xml.coverpages.org/xul.html