PHP, AJAX und XUL im Intranet


                    Markus Wolff
Inhalt
  Was ist XUL?


 Crashkurs: XUL

 Was ist AJAX?

 Crashkurs: AJAX

 XUL - Stolpersteine

 Ausblicke

 Weite...
Was ist XUL ?
    Extensible User Interface Language



    XML-basierte Beschreibungssprache für


    grafische Benutz...
Was ist XUL ? (2)
    Markup erweiterbar über XBL


        Erlaubt Zusammenfügen beliebiger XUL-
    

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

        mit Gecko-Engine
        Mozilla-Browser: Firefox...
Crashkurs: XUL
        Content-Type:


        application/vnd.mozilla.xul+xml
        Apache: Als MIME-Type für .xul –
 ...
Crashkurs: XUL (2)
„Hello World“ in XUL:


<?xml version=quot;1.0quot; encoding=quot;utf8quot; ?>
<?xml-stylesheet href=q...
Crashkurs XUL (3)
    Resultat:





                              8
Crashkurs XUL (4)
Buttons:


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

    <t...
Crashkurs XUL (5)
Selectboxen:


    <menulist id=quot;lstTestquot;>
      <menupopup>
       <menuitem label=quot;Einsqu...
Crashkurs XUL (6)
    Beispielformular:


<window id=quot;MainWindowquot;
   xmlns=quot;http://www.mozilla.org/keymaster/...
Crashkurs XUL (7)
    Resultat:





                              12
Crashkurs XUL (8)
        Standardlayout: Vertikal



        Umschaltbar mit <window>-Attribut


        orient=“horizo...
Crashkurs XUL (9)
Beispiel mit Layoutelementen:


<spacer flex=quot;1quot; />
<hbox>
  <label value=quot;Texteingabe:quot...
Crashkurs XUL (10)
Resultat:





                           15
Crashkurs XUL (11)
Datentabellen in XUL:


<tree flex=quot;5quot; id=quot;resultTreequot;>
    <treecols>
    <treecol id...
Crashkurs XUL (12)
Resultat:





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

<treechildren>
  <treeitem>
    <treerow>
      <treecell   label=quo...
Crashkurs XUL (14)
Resultat:





                           19
Crashkurs XUL (15)
 Problem: Einbetten von Daten erfordert


 Reload der kompletten Maske bei
 Änderungen (siehe HTML)
D...
Was ist AJAX ?
 Scheuerpulver der Firma Colgate-


 Palmolive
Akronym für:

        Asynchronous
    


        Javascr...
Was ist AJAX ? (2)
Grundprinzip:


        Webserver liefert initiales Dokument aus
    


        Dokument enthält Java...
Was ist AJAX ? (3)
 Programmierweise nähert sich der von


 Desktop-Anwendungen an
Applikationen sind nicht mehr

 zwang...
Was ist AJAX ? (4)
Nachteile:


        Spielt nicht mit Suchmaschinen zusammen
    


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

Ziel: Serverseitige PHP-Klassen in

 Javascript transparent zur Ve...
Crashkurs: AJAX (2)
Von Javascript aus zu benutzende


PHP-Klasse:
class served_class {
    public function __construct()...
Crashkurs: AJAX (3)
HTML_AJAX Serverscript:



include 'HTML/AJAX/Server.php';

class TestServer extends HTML_AJAX_Server...
Crashkurs: AJAX (4)
Einbindung des generierten Javascripts


in XUL-Dokumente:

<script type='text/javascript'
        sr...
Crashkurs: AJAX (5)
Button mit Klick-Handler versehen:


<hbox>
  <label value=quot;Texteingabe:quot; control=quot;somete...
Crashkurs: AJAX (6)
Klick-Handler definieren:




function doSearch() {
    var search = document.getElementById(quot;som...
Crashkurs: AJAX (7)
Ergebnisse dem Tree hinzufügen:


function refreshTree(tree, result) {
    emptyTree(tree);
    var e...
Crashkurs: AJAX (8)
Vorherige Ergebnisse beseitigen:




function emptyTree(tree) {
    while(tree.childNodes[1].hasChild...
Crashkurs: AJAX (9)
Variante 2: Das „A“ in AJAX


function doSearch() {
    var search = document.getElementById(quot;som...
XUL: Stolpersteine
 Dokumentation hängt Entwicklung


 hinterher
Einige Funktionen nur bei lokal

 registrierten Applika...
Ausblicke
 Nächste Firefox-Versionen bringen SVG


 und Canvas
MiniMo bringt potentiell XUL auf

 PDAs und Handys




  ...
Weitere Informationen
AJAX:


        http://en.wikipedia.org/wiki/AJAX
    


        http://pear.php.net/package/HTML_...
Upcoming SlideShare
Loading in …5
×

PHP, AJAX und XUL im Intranet

2,085 views
2,015 views

Published 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 PHP-Backend.

Der Vortrag wurde auf der International PHP Conference 2005 in Frankfurt gehalten.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,085
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

PHP, AJAX und XUL im Intranet

  1. 1. PHP, AJAX und XUL im Intranet Markus Wolff
  2. 2. Inhalt Was ist XUL?   Crashkurs: XUL  Was ist AJAX?  Crashkurs: AJAX  XUL - Stolpersteine  Ausblicke  Weitere Informationen 2
  3. 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. 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. 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. 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. 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. 8. Crashkurs XUL (3) Resultat:  8
  9. 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. 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. 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. 12. Crashkurs XUL (7) Resultat:  12
  13. 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. 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. 15. Crashkurs XUL (10) Resultat:  15
  16. 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. 17. Crashkurs XUL (12) Resultat:  17
  18. 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. 19. Crashkurs XUL (14) Resultat:  19
  20. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 35. Ausblicke Nächste Firefox-Versionen bringen SVG  und Canvas MiniMo bringt potentiell XUL auf PDAs und Handys 35
  36. 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

×