PHP, AJAX und XUL im Intranet

PHP, AJAX und XUL im Intranet

Markus Wolff

Inhalt
Was ist XUL?


 Crashkurs: XUL

 Was ist AJAX?

 Crashkurs: AJAX

 XUL - Stolpersteine

 Ausblicke

 Weitere Informationen

2

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

3

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
4

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
5

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

6

Crashkurs: XUL (2)
„Hello World“ in XUL:


<?xml version=quot;1.0quot; encoding=quot;utf8quot; ?>
<?xml-stylesheet href=quot;chrome://global/skin/quot;
type=quot;text/cssquot; ?>
<window id=quot;MainWindowquot;
xmlns=quot;http://www.mozilla.org/keymaster/gatekeeper/there.is.
only.xulquot;>
<description>Hello World</description>
</window>

7

Crashkurs XUL (3)
Resultat:


8

Crashkurs XUL (4)
Buttons:


<button id=quot;btSearchquot; label=quot;Klick michquot; />
Texteingabefelder:


<textbox id=quot;sometextquot; />
 Attribut multiline=quot;truequot; für mehrzeilige Felder

Feldbeschriftungen:


<label value=quot;Texteingabe:quot; control=quot;sometextquot;/>
Checkboxen:


<checkbox id=quot;chkquot; checked=quot;truequot;
label=quot;Checkbox-Testquot;/>

9

Crashkurs XUL (5)
Selectboxen:


<menulist id=quot;lstTestquot;>
<menupopup>
<menuitem label=quot;Einsquot; value=quot;1quot;/>
<menuitem label=quot;Zweiquot; value=quot;2quot;/>
<menuitem label=quot;Dreiquot; value=quot;3quot; selected=quot;truequot;/>
</menupopup>
</menulist>
 Diverse Darstellungsmöglichkeiten für Listboxen:

 Multiselect

 Mehrspaltig

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

10

Crashkurs XUL (6)
Beispielformular:


<window id=quot;MainWindowquot;
xmlns=quot;http://www.mozilla.org/keymaster/gatekeeper/there.is.only
.xulquot;>
<label value=quot;Texteingabe:quot; control=quot;sometextquot;/>
<textbox id=quot;sometextquot; />
<button id=quot;btSearchquot; label=quot;Klick mich!quot; />
<menupopup>
<menuitem label=quot;Einsquot; value=quot;1quot; />
<menuitem label=quot;Zweiquot; value=quot;2quot; />
<menuitem label=quot;Dreiquot; value=quot;3quot; selected=quot;truequot; />
</menupopup>
</menulist>
</window>

11

Crashkurs XUL (7)
Resultat:


12

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


13

Crashkurs XUL (9)
Beispiel mit Layoutelementen:


<spacer flex=quot;1quot; />
<hbox>
<label value=quot;Texteingabe:quot; control=quot;sometextquot; />
<textbox id=quot;sometextquot; flex=quot;1quot; />
<button id=quot;btSearchquot; label=quot;Klick mich!quot; />
</hbox>
<menupopup>
<menuitem label=quot;Einsquot; value=quot;1quot; />
<menuitem label=quot;Zweiquot; value=quot;2quot; />
</menupopup>
</menulist>
<spacer flex=quot;2quot; />

14

Crashkurs XUL (10)
Resultat:


15

Crashkurs XUL (11)
Datentabellen in XUL:


<tree flex=quot;5quot; id=quot;resultTreequot;>
<treecols>
<treecol id=quot;idquot; label=quot;IDquot; primary=quot;truequot; hidden=quot;truequot; persist=quot;width
ordinal hiddenquot; />
<splitter class=quot;tree-splitterquot; />
<treecol id=quot;namequot; label=quot;Titlequot; flex=quot;4quot; persist=quot;width ordinal hiddenquot;
/>
<splitter class=quot;tree-splitterquot; />
<treecol id=quot;typequot; label=quot;Mediatypequot; flex=quot;1quot; persist=quot;width ordinal
hiddenquot; />
</treecols>
<treechildren />
</tree>

16

Crashkurs XUL (12)
Resultat:


17

Crashkurs XUL (13)
Daten hinzufügen via XUL-Tags:


<treechildren>
<treeitem>
<treerow>
<treecell label=quot;1quot;/>
<treecell label=quot;Hamburger Abendblattquot;/>
<treecell label=quot;printquot;/>
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell label=quot;2quot;/>
<treecell label=quot;Spiegel Onlinequot;/>
<treecell label=quot;Newsportalquot;/>
[...]
18

Crashkurs XUL (14)
Resultat:


19

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 Overhead
Alternative: Datenimport via

Javascript & XMLHttpRequest (AJAX)

20

Was ist AJAX ?
Scheuerpulver der Firma Colgate-


Palmolive
Akronym für:

Asynchronous


Javascript


And


XML


Unterstützung durch alle gängigen


Browser
Kandidat für Buzzword des Jahres

21

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

22

Was ist AJAX ? (3)
Programmierweise nähert sich der von


Desktop-Anwendungen an
Applikationen sind nicht mehr

zwangsläufig „Stateless“
Durch Nachladen nur von Nutzdaten

beschleunigte Response-Time der
Anwendungen
Komplexere Userinteraktionen werden

ohne Komfortverlust möglich

23

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 oder


unter kontrollierten Bedingungen (z.B.
Intranet)
Bei Einsatz auf Websites immer


Alternativen ohne Javascript anbieten
24

Crashkurs: AJAX
...am Beispiel von PEAR::HTML_AJAX


Ziel: Serverseitige PHP-Klassen in

Javascript transparent zur Verfügung
stellen
Installation via PEAR Installer:

pear config-set preferred_state alpha


pear install HTML_AJAX


25

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 = quot;SELECT * FROM publications quot;;
if (trim($search) != '')
$sql .= quot;WHERE title LIKE quot;.$this->pdo->quote($search);
return $this->pdo->query($sql)->fetchAll(PDO_FETCH_ASSOC);
}
}

26

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();

27

Crashkurs: AJAX (4)
Einbindung des generierten Javascripts


in XUL-Dokumente:

<script type='text/javascript'
src=quot;ajax_server.php?client=allquot; />

<script type='text/javascript'
src=quot;ajax_server.php?stub=allquot; />

28

Crashkurs: AJAX (5)
Button mit Klick-Handler versehen:


<hbox>
<label value=quot;Texteingabe:quot; control=quot;sometextquot; />
<textbox id=quot;sometextquot; flex=quot;1quot; />
<button id=quot;btSearchquot; label=quot;Klick mich!quot;
oncommand=“doSearch()“ />
</hbox>

29

Crashkurs: AJAX (6)
Klick-Handler definieren:


function doSearch() {
var search = document.getElementById(quot;sometextquot;).value;
var server = new served_class();
var result = server.get_records(search);
var tree = document.getElementById(quot;resultTreequot;);
refreshTree(tree, result);
}

30

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(quot;treeitemquot;);
var treeRow = document.createElement(quot;treerowquot;);
for (var name in result[i]) {
var cell = document.createElement(quot;treecellquot;);
cell.setAttribute(quot;labelquot;,result[i][name]);
treeRow.appendChild(cell);
}
treeItem.appendChild(treeRow);
tree.childNodes[1].appendChild(treeItem);
}
} 31

Crashkurs: AJAX (8)
Vorherige Ergebnisse beseitigen:


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

32

Crashkurs: AJAX (9)
Variante 2: Das „A“ in AJAX


function doSearch() {
var search = document.getElementById(quot;sometextquot;).value;
var callback = new ResultHandler();
var server = new served_class(callback);
}

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

33

XUL: Stolpersteine
Dokumentation hängt Entwicklung


hinterher
Einige Funktionen nur bei lokal

registrierten Applikationen verfügbar:
Wizards


Dialogfenster


Dateizugriff


Server-Debugging teils knifflig


Absolute Pflicht: Error Logging


Kür: Unit-Tests


34

Ausblicke
Nächste Firefox-Versionen bringen SVG


und Canvas
MiniMo bringt potentiell XUL auf

PDAs und Handys

35

Weitere Informationen
AJAX:


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


36

PHP, AJAX und XUL im Intranet

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (12)

Similaire à PHP, AJAX und XUL im Intranet

Similaire à PHP, AJAX und XUL im Intranet (20)

PHP, AJAX und XUL im Intranet