PHP, AJAX und XUL im Intranet

  • 1,902 views
Uploaded on

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 …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,902
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
14
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 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 2
  • 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 3
  • 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 4
  • 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 5
  • 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 6
  • 7. 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
  • 8. Crashkurs XUL (3) Resultat:  8
  • 9. 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
  • 10. 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
  • 11. 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; /> <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> </window> 11
  • 12. Crashkurs XUL (7) Resultat:  12
  • 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  13
  • 14. 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> <menulist id=quot;lstTestquot;> <menupopup> <menuitem label=quot;Einsquot; value=quot;1quot; /> <menuitem label=quot;Zweiquot; value=quot;2quot; /> </menupopup> </menulist> <spacer flex=quot;2quot; /> 14
  • 15. Crashkurs XUL (10) Resultat:  15
  • 16. 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
  • 17. Crashkurs XUL (12) Resultat:  17
  • 18. 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
  • 19. Crashkurs XUL (14) Resultat:  19
  • 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 Overhead Alternative: Datenimport via Javascript & XMLHttpRequest (AJAX) 20
  • 21. 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
  • 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 22
  • 23. 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
  • 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 oder  unter kontrollierten Bedingungen (z.B. Intranet) Bei Einsatz auf Websites immer  Alternativen ohne Javascript anbieten 24
  • 25. 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
  • 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 = 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
  • 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(); 27
  • 28. 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
  • 29. 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
  • 30. 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
  • 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(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
  • 32. Crashkurs: AJAX (8) Vorherige Ergebnisse beseitigen:  function emptyTree(tree) { while(tree.childNodes[1].hasChildNodes()) { tree.childNodes[1].removeChild( tree.childNodes[1].childNodes[0] ); } } 32
  • 33. 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
  • 34. 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
  • 35. Ausblicke Nächste Firefox-Versionen bringen SVG  und Canvas MiniMo bringt potentiell XUL auf PDAs und Handys 35
  • 36. 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