Folie 1 - Intro

And the beast shall be made legion. Its numbers shall be increased a thousand thousand fold. The din of a million keyboards like unto a great storm shall cover the earth, and the followers of Mammon shall tremble.

from The Book of Mozilla, 3:31 (Red Letter Edition)

Folie 2 - Titel

General overview of the Mozilla Framework
for dummies (and webdevelopers)

Folie 3 - Vorstellung

<me id=“Philipp Söhnlein“>

<type class=“official“>Webdeveloper</type>

<type class=“preferred“>Geek</type>

<interests class=“general“>
<interest>Webtechniken</interest>
<interest>Webkultur</interest>
<interest>OpenSource</interest>
</interests>

<interests class=“tagcloud“>

</interests>

Folie 4 - Vorstellung 2

<likes>Tagclouds</likes>

<likes>Firefox</likes>

<likes>große Schriften</likes>

<contact>
<email>me@philipp-soehnlein.de</email>
<jabber>me@philipp-soehnlein.de</jabber>
<web>http://www.philipp-soehnlein.de</web>
<twitter>https://twitter.com/PhilSoehnlein</twitter>
</contact>

Folie 5 - Was ist das Mozilla Framework?

Was ist das Mozilla Framework?

Folie 6 - Was ist das Mozilla Framework?

Folie 7 - Was ist das Mozilla Framework?

Quelle: XUL - Entwicklung von Rich Clients mit der Mozilla XML User Interface Language;
Open Source Press (2005/2007). ISBN: 978-3-937514-23-9, Jonathan Protzenko

Folie 8 - Twitter-Client auf Basis des Mozilla Frameworks

Twitter-Client auf Basis des Mozilla Frameworks

Folie 9 - XULRunner

XULRunner (=Laufzeitumgebung)

Folie 10 - XUL

XUL (=XML User Interface Language)

There's no Dana only zuul.

There's no Data only XUL.

Folie 11 - XUL macht Buttons

“button label="Please do not press this button again" /”

Ergebnis des Codes

Folie 12 - …und alle anderen Standard-Formularelemente.

Beispiele für alle anderen Standard-Formularelemente

Folie 13 - Aber auch sehr viel coolere Steuerelemente.

Folie 14 - Nicht zu vergessen:

Folie 15 - XBL

(=XML Binding Language)

Folie 16 - erstes Beispiel des Twitter Clients

Screenshot

Folie 17 - XUL Code - Teil 1

<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="main" title="MozTweet" width="300" height="600" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> […] </window>

Folie 18 - XUL Code - Teil 2

<box class="tweet"> <hbox> <vbox> <image src="http://s3.amazonaws.com/twitter_production/profile_images/97611198/Portrait_normal.jpg" width="48" height="48" /> <spacer flex="1" /> </vbox> <vbox width="250"> <description class="tweetMetaInfo"> Spreeblick said on Sun 22 Mar 22:31 via DestroyTwitter </description> <description class="tweetText"> Wenn Merkel den Papst anruft … unter welchem Namen hat die den wohl im Handy gespeichert?</description> </vbox> </hbox> </box>

Folie 19 - XUL Code - Teil 3

<vbox id="newTweetBox"> <label control="newTweetText" value="What are you doing?"/> <textbox multiline="true" /> <button label="send"/> </vbox>

Folie 20 - Aussehen?

Sieht zum ****** aus.

Folie 21 - CSS

(=Cascading Style Sheets)

Folie 22 - CSS macht hübsche Buttons

CSS Macht hübsche Buttons

Folie 23 - Vorher - Nachher Ansichten

Folie 24 - JavaScript

Folie 25 - Javascript bringt hübschen Buttons Benehmen bei

Bringt hübschen Buttons Benehmen bei

Folie 26 - Beispiel

Folie 27 - XMLHttpRequest

XMLHttpRequest (=a.k.a. AJAX)

Folie 28 - Beispiel

Folie 29 - XPCOM + XPConnect

(=Cross Platform Component Object Model + Cross Platform Connect)

Folie 30 - Bringt hübschen Buttons Benehmen bei, das sie nie von allein lernen könnten.

Bringt hübschen Buttons Benehmen bei, das sie nie von allein lernen könnten. (also alles, was die nativen JavaScript Möglichkeiten übersteigt)

Folie 31 - Beispiel

Folie 32 - Ein paar Beispiele:

Folie 33 - Lokalisierung

Folie 34 - Lokalisierung macht hübsche Buttons mit Benehmen auch für Nicht-Klingonen verständlich.

Macht hübsche Buttons mit Benehmen auch für Nicht-Klingonen verständlich.

Folie 35 - Was haben wir alles besprochen?

Folie 36 - Fragen?

Folie 37 - kthxbye

Philipp Söhnlein
http://www.philipp-soehnlein.de/
me@philipp-soehnlein.de

Folien unter: http://phil-soehnlein.de/uploads/talks/overviewoverthemozillaframework/