php, ajax und xul im intranet
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
PHP, AJAX und XUL im Intranet
Markus Wolff
2
Inhalt Was ist XUL? Crashkurs: XUL Was ist AJAX? Crashkurs: AJAX XUL - Stolpersteine Ausblicke Weitere Informationen
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
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
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
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
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>
8
Crashkurs XUL (3) Resultat:
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"/>
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)
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>
12
Crashkurs XUL (7) Resultat:
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
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" />
15
Crashkurs XUL (10)Resultat:
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>
17
Crashkurs XUL (12)Resultat:
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"/>
[...]
19
Crashkurs XUL (14)Resultat:
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)
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
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
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
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
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
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);
}
}
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();
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" />
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>
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);}
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);
}
}
32
Crashkurs: AJAX (8)Vorherige Ergebnisse beseitigen:
function emptyTree(tree) { while(tree.childNodes[1].hasChildNodes()) { tree.childNodes[1].removeChild( tree.childNodes[1].childNodes[0] ); }}
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); } }
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
35
AusblickeNächste Firefox-Versionen bringen SVG und CanvasMiniMo bringt potentiell XUL auf PDAs und Handys
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