Bachelorarbeit

Bookmarklets fur die PLE und Widgets der PLE

Sternig Christof (0730654) 8010 Schnaugurtel 40/7 o Betreuer: Ebner Martin, Dr.techn. Univ.-Doz Taraghi Behnam, DI Graz, am 29. Oktober 2011
Die Aufgabenstellung der Arbeit teilt sich in zwei Teile. Der erste Teil umfasst die Erstellung eines Bookmarklets, das die Personal Learning Environment transparent uber die aktuelle Seite des Browsers legt. Der zweite Teil beschftigt sich mit dem Einblenden einzelner Widgets der PLE whrend a a des Surfens im Internet. Hierzu werden zwei verschiedene Anstze erlutert a a und am Ende ein Prototyp anhand eines Bookmarklets vorgestellt.

Sternig Christof

Bachelorarbeit

29. Oktober 2011

Inhaltsverzeichnis
1 Bookmarklet zum Anzeigen der PLE auf einer beliebigen 1.1 Aufgabenstellung . . . . . . . . . . . . . . . . . . . . . 1.2 Kurze Begriserklrung . . . . . . . . . . . . . . . . . . a 1.2.1 Bookmarklet . . . . . . . . . . . . . . . . . . . 1.2.2 PLE . . . . . . . . . . . . . . . . . . . . . . . . 1.2.3 Widget . . . . . . . . . . . . . . . . . . . . . . . 1.3 Implementierung des Bookmarklets fr die PLE . . . . u 1.3.1 Das Bookmarklet . . . . . . . . . . . . . . . . . 1.3.2 Erluterungen zum Code . . . . . . . . . . . . . a 1.3.3 Installation des Bookmarklets . . . . . . . . . . Webseite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 3 3 3 4 4 4 5 5 7 7 7 8 8 8 8 8 9 9 9 10 11 12 12 13 15 15 15 17 19 21 21 25 25 25 26 27 33

2 Ein Widget aus der PLE uber die aktuelle Webseite blenden 2.1 Aufgabenstellung . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.2 Begriserklrung . . . . . . . . . . . . . . . . . . . . . . . . . . . a 2.2.1 Cross Domain Request . . . . . . . . . . . . . . . . . . . . 2.2.2 SOP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.2.3 JSON(P) . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.2.4 XUL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.2.5 jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.3 Ansatz 1: Browserextension . . . . . . . . . . . . . . . . . . . . . 2.3.1 Eine Toolbar fr Firefox . . . . . . . . . . . . . . . . . . . u 2.3.2 XUL File fr die Toolbar . . . . . . . . . . . . . . . . . . . u 2.3.3 Javascript um die Toolbar zum Leben zu erwecken . . . . 2.3.4 Problem Cross Domain Request - die Erste . . . . . . . 2.3.5 Exkurs: Cross Domain Request mittels jQuery und JSONP 2.3.6 XUL und JQuery . . . . . . . . . . . . . . . . . . . . . . . 2.3.7 Zusammenfassung Ansatz 1 . . . . . . . . . . . . . . . . . 2.4 Ansatz 2: Bookmarklet fr das Anzeigen der Widgets . . . . . . . u 2.4.1 Ablufe und Anforderungen . . . . . . . . . . . . . . . . . a 2.4.2 Das Bookmarklet . . . . . . . . . . . . . . . . . . . . . . . 2.4.3 Das Herz der Anwendung - widgets.js, erster Teil . . . . 2.4.4 Exkurs: Widget Development Environment (WDE) . . . . 2.4.5 Das Herz der Anwendung - widgets.js, zweiter Teil . . . 2.4.6 Problem Cross Domain Request - die Zweite . . . . . . 2.4.7 Zusammenfassung Ansatz 2 . . . . . . . . . . . . . . . . . 2.5 Die Lsung der Aufgabenstellung . . . . . . . . . . . . . . . . . . o 2.5.1 Das Bookmarklet . . . . . . . . . . . . . . . . . . . . . . . 2.5.2 Die Funktionalitt der Anwendung: UserPleWidgets.js . a 3 Zusammenfassung

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

Sternig Christof

Bachelorarbeit

29. Oktober 2011

1 Bookmarklet zum Anzeigen der PLE auf einer beliebigen Webseite

1.1 Aufgabenstellung
Der erste Teil der Aufgabe umfasst die Erstellung eines Bookmarklets, welches die Personal Learning Environment (PLE) der TU Graz uber eine, gerade im Browser ange zeigte Seite, blendet. Somit kann der Benutzer bzw. die Benutzerin mit der angezeigten PLE arbeiten, ohne einen neuen Tab bzw. ein Pop-up nen zu mssen. Die PLE wird o u (halb)transparent uber die aktuelle Seite im Browser gelegt, damit Informationen der Webseite unter der PLE fr den User nicht verloren gehen. Die PLE kann per erneutem u Klick auf das Bookmarklet einfach wieder ausgeblendet werden.

1.2 Kurze Begriserklrung a

1.2.1 Bookmarklet Ein Bookmarklet kann man sich als Lesezeichen im Browser vorstellen, welches eine spezielle Funktionalitt besitzt. Es wird als Bookmark im jeweiligen Browser gespeichert. a Allerdings wird statt einer URL, auf die das Lesezeichen verweisen soll, Javascript Code gespeichert. Dieser wird beim Klick auf das Lesezeichen ausgefhrt (vgl. [Len06]). u Ein ganz einfaches Beispiel fr ein Bookmarklet, das nur eine Message-Box mit dem u Inhalt Hello World! anzeigt, lautet: javascript:alert(Hello World!); Wichtig ist, dass das Bookmarklet mit dem Pseudoprotokoll javascript: beginnt. Danach folgt der eigentliche Javascript Code, der ausgefhrt wird, sobald auf das Booku marklet geklickt wird. In Abbildung 1 sieht man das oben gezeigte Bookmarklet in Aktion.

Sternig Christof

Bachelorarbeit

29. Oktober 2011

Abb 1: Hello World Bookmarklet in Aktion Im Internet ndet man viele weiter Bookmarklets, die einfach heruntergeladen werden knnen und komplexe Dinge ausfhren. o u 1.2.2 PLE PLE steht fr Personal Learning Environment und ist eine Applikation der TU Graz die u es dem Nutzer oder der Nutzerin ermglicht, aus einer Vielzahl von Widgets diejenigen o auszuwhlen, die fr ihn von Interesse sind. a u Der Nutzer/die Nutzerin kann Widgets aus einer Liste auswhlen und diese auf seia nem Personal Desktop speichern. Jeder Benutzer/jede Benutzerin besitzt seinen eigenen Personal Desktop mit den von ihm/ihr gespeicherten Widgets. Dieser Personal Desktop kann ganz nach den Wnschen des jeweiligen Users gestaltet werden und ermglicht den u o schnellen Zugri auf viele Webanwendungen. Die PLE ist also ein individuell gestaltbarer Desktop fr den Webbrowser (vgl. [Ebn]). u Mehr Informationen zur PLE auf http://ple.tugraz.at (29.10.2011). 1.2.3 Widget Der Name Widget setzt sich aus den Wrter Window und Gadget zusammen. Ein o Widget ist eine kleine interaktive Anwendung, die nur eine bestimmte Funktionalitt a bereitstellt: Beispielsweise ein Widget, welches den Posteingang eines Mailservers auf neue Mails uberprft. Dieses spezielle Widget hat nur diese Aufgabe. Fr das Versenden u u von Nachrichten knnte es bereits ein anderes Widget fr eben diesen Zweck geben. o u Natrlich existieren auch Widgets mit komplexerer Funktionalitt. Die PLE enthlt eine u a a Vielzahl an Widgets mit verschiedensten Funktionalitten (vgl. [Cac10, Introduction], a [Tar10, Widgets])

1.3 Implementierung des Bookmarklets fr die PLE u

Nach der Begriserklrung folgt nun der eigentliche Teil der ersten Aufgabe. Die Erstela lung des Bookmarklets, dass die Anforderungen aus der Aufgabenstellung erfllt und u

Sternig Christof

Bachelorarbeit

29. Oktober 2011

umsetzt. Zuerst wird der Code des Bookmarklets gezeigt, danach wird auf die einzelnen Teile des Codes eingegangen. 1.3.1 Das Bookmarklet Die folgenden Codezeilen zeigen das gesamte Bookmarklet, welches die PLE transparent uber der aktuellen Seite des Browsers anzeigt.
1 javascript : 2 ( function () { 3 myIFrame = document . getElementById ( " 8 s W Z V x i x l 7 v W 9 j y Z 6 K q 2 7 i r x x J U = " ) ; 4 if ( myIFrame ) 5 { 6 if ( myIFrame . style . visibility == " hidden " ) 7 { 8 myIFrame . style . visibility = " visible " ; 9 } 10 else 11 { 12 myIFrame . style . visibility = " hidden " ; 13 } 14 } 15 else 16 { 17 myIFrame = document . createElement ( " iframe " ) ; 18 myIFrame . src = " http :// ple . tugraz . at / index . php / wall / index " ; 19 myIFrame . id = " 8 s W Z V x i x l 7 v W 9 j y Z 6 K q 2 7 i r x x J U = " ; 20 myIFrame . scrolling = " yes " ; 21 myIFrame . style . position = " fixed " ; 22 myIFrame . style . top = " 1% " ; 23 myIFrame . style . left = " 1% " ; 24 myIFrame . style . opacity = " 0.9 " ; 25 myIFrame . width = " 95% " ; 26 myIFrame . height = " 95% " ; 27 myIFrame . style . visibility = " visible " ; 28 myIFrame . frameBorder = " 2 " ; 29 document . body . appendChild ( myIFrame ) ; 30 } 31 focus () ; 32 }) () ;

Listing 1: Das PLE Bookmarklet

1.3.2 Erluterungen zum Code a Zunchst wird auf die Zeilen 17 bis 29 im else-Zweig der ersten if-else-Bedingung a ein.

Sternig Christof

Bachelorarbeit

29. Oktober 2011

Hier wird ein iframe mit der URL der PLE und einer speziellen ID erzeugt. Die ID ist ein Hashwert um Konikte mit etwaigen anderen Frames zu vermeiden. Wrde man u eine ID als Normaltext angeben, knnte es passieren, dass auf der aktuellen Seite im o Browser bereits ein iframe existiert, der zufllig dieselbe ID besitzt. Folglich wrde das a u Bookmarklet fr die PLE nicht mehr funktionieren. u Nach der Zuweisung des Identiers fr den Frame folgen die Angaben fr das Aussehen u u des Frames. Scrolling ist erlaubt, die Position des Frames ist x, das bedeutet der Frame fr die PLE wird immer uber die aktuelle Seite im Browser gelegt, auch wenn auf der u Seite im Browser nach unten oder oben gescrollt wird. Die Breite und die Hhe des o iframes werden auf 95 Prozent der Gre des Browserfensters gesetzt, weiters soll der o Frame sichtbar sein. Diese Eigenschaft muss gesetzt werden, da es sonst bei der ersten if-else-Abfrage zu Problemen kommt. Die Eigenschaft opacity gibt die Transparenz des Frames an. Nach dem Setzen der style-Eigenschaften des iframes muss dieser auch noch in das DOM der aktuellen Webseite integriert werden. Um ein Element zum DOM hinzuzufgen u wird die Methode appendChild() des document-Objekts verwendet. Der soeben erzeugte Frame wird also mit document.body.appendChild() an das Ende des body-tags der im Browser angezeigten Seite angehngt. Mit der Funktion focus() erhlt der soeben a a hinzugefgte Frame den Fokus. u Nun zu den zwei if-else-Blcken des Bookmarklets. Die erste Abfrage uberprft, ob o u bereits ein iframe mit der ID des PLE Frames im DOM existiert. Um eine Referenz eines Elements aus dem DOM zu erhalten, wird die Methode getElementById(id) verwendet. Gibt die Methode keine Referenz auf ein iframe-Objekt zurck, gibt es u folglich keinen Frame mit der angegebenen ID und die Zeilen 17-29 werden ausgefhrt. u Liefert die Methode jedoch den PLE Frame, folgt daraus, dass sich der iframe bereits im DOM bendet. Nun wird mit Hilfe des zweiten if-else Blocks ermittelt, ob die Sichtbarkeit des Frames visible oder hidden ist. Je nach Wert der Eigenschaft wird nun der sichtbare Frame unsichtbar oder umgekehrt. Somit wird bei jedem Klick auf das Bookmarklet der Javascript Code ausgefhrt und u jenachdem, ob es den Frame, fr die PLE schon gibt oder noch nicht, wird dieser ausu bzw eingeblendet, oder aber ein neuer iframe erzeugt. Um den PLE Frame komplett aus dem DOM zu entfernen gibt es zwei Mglichkeiten. o Entweder die angezeigte Seite wird aktualisiert oder man wechselt auf eine andere Seite. Abbildung 2 zeigt den PLE Frame der uber eine Webseite gelegt wird.

Sternig Christof

Bachelorarbeit

29. Oktober 2011

Abb 2:Der PLE Frame uber Google geblendet

1.3.3 Installation des Bookmarklets Die Installation des PLE Bookmarklet erfolgt durch das Anlegen eines neuen Lesezeichens im Webbrowser. Den Code des Bookmarklets kopieren und ihn in das Feld fr u den Link des Lesezeichen kopieren. Unntige Leerzeichen und Abstze knnen einfach o a o gelscht werden. o

2 Ein Widget aus der PLE uber die aktuelle Webseite blenden
2.1 Aufgabenstellung
Der zweite Teil der Arbeit beschftigt sich mit einzelnen Widgets aus der PLE. Es soll fr a u einen eingeloggten Benutzer bzw. eine Benutzerin mglich sein, auf seine Widgets aus der o PLE zuzugreifen und diese nach Bedarf anzuzeigen. Das soll wiederum intuitiv whrend a des Browsens mglich sein; es muss also nicht erst auf die Webseite der PLE gewechselt o werden, um sich den Personal Desktop anzeigen zu lassen, sondern ein einzelnes Widget soll per Klick (halb)transparent uber die aktuelle Webseite gelegt werden knnen. Der o User kann nun mit dem Widget arbeiten und dieses per Klick wieder verbergen. In diesem Teil der Aufgabe soll also, hnlich wie im ersten Teil der Arbeit die gesamte a PLE, ein einzelnes Widget (halb)transparent uber die aktuelle Seite im Browser gelegt werden, um den Zugri auf die Widgets in der PLE zu vereinfachen. Fr den Benutzer u bzw. die Benutzerin ist dies insofern ein Vorteil, da nicht die ganze PLE mit all ihren Widgets angezeigt werden muss, sondern eben nur das gerade bentigte Widget. o Fr die Lsung der Aufgabenstellung gab es drei Anstze, wobei die ersten zwei Lu o a o sungsanstze kein geeignetes Ergebnis lieferten. Es werden nun folgend die zwei Lsungsa o

Sternig Christof

Bachelorarbeit

29. Oktober 2011

versuche mitsamt den angefallenen Problemen und die Lsung selbst erlutert. Zuvor o a folgt aber eine kurze Begriserklrung. a

2.2 Begriserklrung a
Wie zuvor werden hier die wichtigsten Begrie, zum leichteren Verstndnis des Textes, a kurz erklrt. a 2.2.1 Cross Domain Request Ein Cross Domain Request (Xdr) ist ein GET -Request auf eine Ressource, die nicht unter derselben Domne liegt. Ein kurzes Beispiel zur Illustration: a www.aaa.com erhlt per GET -Request Ressourcen von www.aaa.com/data oder a www.aaa.com/data/mydata, da die angeforderten Daten unter derselben Domne, in a diesem Fall aaa.com liegen. Ein GET -Request von www.aaa.com auf www.bbb.com/data wre aufgrund der SOP a nicht mglich. Der Request wrde scheitern da er domnenbergreifend wre. o u a u a Mit Hilfe eines Cross Domain Requests ist es also mglich auf Ressourcen, die unter o anderen Domnen liegen, zuzugreifen. a 2.2.2 SOP SOP steht fr Same Origin Policy. Die Same-Origin-Policy (zu deutsch etwa: Grundreu gel des selben Ursprungs) besagt, dass ein JavaScript eines Dokuments nur auf diejenigen anderen, fremden Dokumente zugreifen darf, die dieselbe Herkunft haben. Mit derselben Herkunft ist kurz gesagt die Domain in der URI des Dokuments gemeint. ([Sch, Same Origin Policy]) 2.2.3 JSON(P) JSON... ...ist ein schlankes Datenaustauschformat das einfach zu lesen bzw. zu parsen und zu erstellen ist. Der Aufbau folgt bestimmten Regeln, ein Objekt beispielsweise ist ein Name:Wert-Paar (vgl. [jso]). Genauere Erklrungen zu JSON ndet man auf a www.json.org. JSONP... ...steht fr JSON with Padding. Ist eine Mglichkeit Cross Domain Requests durchu o zufhren. Die angeforderten JSON -Daten werden mittels callback ubermittelt (vgl. u [mic]). 2.2.4 XUL XUL steht fr XML User Interface Language und ist die Sprache, mit der man das Ausu sehen der Firefox Toolbar, die im folgenden Kapitel implementiert wird, beschreibt. But-

Sternig Christof

Bachelorarbeit

29. Oktober 2011

tons und andere Elemente der Toolbar werden mittels XUL-Tags erzeugt (vgl. [Pon07, Introduction]). 2.2.5 jQuery jQuery ist eine freies Javascript Framework, das sehr umfangreiche Funktionen und Methoden zur leichteren Navigation und Manipulation der DOM-Syntax bereit stellt. Zu den Strken des Programmgersts zhlen die vereinfachte Navigation und die leichte a u a Einbindung. jQuery bietet aber auch Funktionen fr animierte Eekte, Ajax und Eventu Handling. Fr diese Arbeit von groem Interesse sind die Ajax-Funktionen von jQuery u (vgl. [aja07, Was ist jQuery?]).

2.3 Ansatz 1: Browserextension

Der erste Versuch die Aufgabe zu lsen, umfasste die Entwicklung einer Extension fr o u den Browser. Es sollte eine Toolbar entwickelt werden, welche das Anzeigen der Widgets ubernimmt. Die Widgets eines eingeloggten Users sollten mit Hilfe eines Update-Buttons in der Toolbar angezeigt werden. Per Klick auf ein spezielles Widget sollte dieses gestartet werden. Das erste Problem bei diesem Lsungsansatz war die Vielzahl unterschiedlicher Browo ser. Eine universale Extension fr alle Browser ist leider nicht mglich. Also mssten u o u vier Extensions implementiert werden, da die vier groen Browser (Firefox, Internet Explorer, Chrome und Safari) untersttzt werden sollten. Anschlieend wird die Impleu mentierung einer Extension fr Firefox diskutiert. u In den folgenden Abschnitten werden nicht die gesamten Details der Entwicklung einer Extension besprochen. Es werden lediglich die wichtigsten Dinge aufgegrien um zu zeigen, warum es letztendlich nicht mglich war, die Aufgabenstellung per Browserexo tension zu lsen. o 2.3.1 Eine Toolbar fr Firefox u Wie bereits erwhnt, wird nicht der komplette Aufbau der Toolbar beschrieben, sondern a nur auf die wichtigsten Teile eingegangen. Eine Toolbar, die im Firefox laufen soll, hat eine x vorgegebene Ordnerstruktur, in welcher sich die einzelnen Files fr die Extension u benden mssen. Fr diese Arbeit sind nur zwei Files von Bedeutung: u u toolbar.xul... ...fr die Beschreibung des Aussehens der Toolbar. u toolbar.js... ...fr die Funktionalitt der Toolbar. u a Es folgen nun Ausschnitte aus diesen beiden Dateien und kurze Beschreibungen zu den einzelnen Listings.

Sternig Christof 2.3.2 XUL File fr die Toolbar u

Bachelorarbeit

29. Oktober 2011

Das komplette XUL File fr die Beschreibung der Toolbar ndet sich in Listing 2. Die u Toolbar ist einfach gehalten. Es gibt einen Button Update welcher die Widgets des Users als jeweils eigenen Button in der Toolbar anzeigen soll.
1 <? xml version = " 1.0 " ? > 2 3 < overlay id = " TB - Overlay " 4 xmlns = 5 " http: // www . mozilla . org / keymaster / gatekeeper / there . is . only . xul " > 6 7 < script type = " application /x - javascript " 8 src = " chrome: // bakktoolbar / content / toolbar . js " / > 9 10 < script type = " application /x - javascript " 11 src = " chrome: // bakktoolbar / content / portal / js / jquery -1.6.1. js " / > 12 13 < toolbox id = " navigator - toolbox " > 14 15 < toolbar id = " TB - Toolbar " toolbarname = " Bakk Toolbar " accesskey = " T " 16 class = " chromeclass - toolbar " context = " toolbar - context - menu " 17 hidden = " false " persist = " hidden " > 18 19 < toolbaritem flex = " 0 " > 20 < toolbarbutton id = " TB - Widgets " label = " PLE Widgets " type = " menu " 21 tooltiptext = " See your Widgets " > 22 23 < menupopup > 24 < menuitem label = " Update " accesskey = " U " 25 tooltiptext = " Get / Update your Widgets " 26 oncommand = " objToolbar . UpdateWidgets () " / > 27 28 < menuseparator / > 29 </ menupopup > 30 </ toolbarbutton > 31 </ toolbaritem > 32 33 < toolbaritem id = " TB - DynWidgetContainer " / > 34 35 < toolbarspring / > 36 </ toolbar > 37 </ toolbox > 38 </ overlay >

Listing 2: Die Datei toolbar.xul Der Aufbau des XUL Files ahnelt dem Aufbau einer XML Datei. Es gibt Start- bzw Endtags, die einen Teil der Toolbar beschreiben. Das <toolbar>-Tag deniert die Toolbar, die letztendlich im Browser angezeigt wird. Alle Elemente innerhalb dieses Tags benden sich dann auf der Toolbar.

10

Sternig Christof

Bachelorarbeit

29. Oktober 2011

Das <toolbaritem>-Tag deniert ein spezielles Element fr die Toolbar. In diesem u Tag wird nun ein Toolbar-Button mit dem Label Update deniert. Dieser Button soll spter die Widgets des Users auf der Toolbar anzeigen. a Die Buttons fr die einzelnen Widgets werden noch nicht in die Toolbar codiert, u da jeder User in seiner PLE verschieden viele Widgets ausgewhlt haben kann. Da die a Anzahl der Buttons noch nicht bekannt ist, sollen diese spter dynamisch auf die Toolbar a gezeichnet werden. Um dies zu ermglichen, gibt es das Toolbar-Item mit der ID TBo DynWidgetContainer. In diesem Container sollen spter die Buttons fr jedes einzelne a u Widget liegen. Um den Buttons auf der Toolbar auch eine Funktionalitt zu geben, wird im XUL a File (Zeilen 6 und 7) die Javascript-Datei toolbar.js mittels script-Tag eingebunden. Sie enthlt die Methoden, die spter, beim Klick auf einen Button, ausgefhrt werden a a u sollen. 2.3.3 Javascript um die Toolbar zum Leben zu erwecken Um der Toolbar die notwendige Funktionalitt zu geben, wird, wie oben schon erwhnt, a a die Javascript Datei toolbar.js bentigt. Die Datei enthlt die Implementierung der o a Methoden, die den Toolbar-Buttons per oncommand zugewiesen werden. Zunchst ein Ausschnitt aus toolbar.js der zeigt, wie der Toolbar dynamisch Buttons a hinzugefgt werden knnen. Dies geschieht nach dem Klicken des Update Buttons. u o
1 AddWidgetButtons : function () 2 { 3 var container = document . getElementById ( " TB - DynWidgetContainer " ) ; 4 5 // Remove all of the existing widgets 6 for ( i = container . childNodes . length ; i > 0; i - -) { 7 container . removeChild ( container . childNodes [0]) ; 8 } 9 10 // Add 5 dynamic example widgets 11 for ( var i =0; i <5; i ++) 12 { 13 this . widgets . push ( " Widget " + i ) ; 14 15 var tempButton = null ; 16 tempButton = document . createElement ( " toolbarbutton " ) ; 17 tempButton . setAttribute ( " label " , " PLE Widget " + i ) ; 18 tempButton . setAttribute ( " id " , this . widgets [ i ]) ; 19 tempButton . setAttribute ( " tooltiptext " , " Widget " + i ) ; 20 tempButton . setAttribute ( " oncommand " , 21 " objToolbar . StartWidget ( this ) " ) ; 22 container . appendChild ( tempButton ) ; 23 } 24 } ,

Listing 3: 5 Buttons werden dynamisch zur Toolbar hinzugefgt u

11

Sternig Christof

Bachelorarbeit

29. Oktober 2011

Wie man sieht, bereitet das dynamische Hinzufgen von Buttons keine greren Prou o bleme. Mittels Javascript ist es ganz einfach Buttons zu erzeugen und diese dem vorher denierten Widget Container zuzuweisen. Mit Hilfe der Methoden getElementById() und createElement() des documentObjekts wird auf den Container zugegrien und die generierten Buttons mit ihren Attributen dem Container hinzugefgt. u Wichtig: Das document-Objekt bezieht sich in diesem Fall aber nicht auf die HTMLSeite, die der Browser gerade anzeigt, sondern auf das XUL-Dokument. 2.3.4 Problem Cross Domain Request - die Erste Bis zu diesem Zeitpunkt gibt es noch keine groen Einwnde, die zweite Aufgabe mita tels einer Browserextension zu lsen (sieht man vom Problem der Browservielfalt ab). o Allerdings ergeben sich doch weitere Probleme, die in diesem Abschnitt erlutert werden. a Voraussetzungen fr ein erfolgreiches Laden der Widgets eines Users: u User klickt Button Update. Cross Domain Request um Widgets zu erhalten. Hier gibt es zwei Mglichkeiten: Ist der User eingeloggt, werden die Widgets des o Users ubermittelt. Ist der User jedoch nicht eingeloggt, wird er zur Anmeldeseite der PLE weitergeleitet, damit er sich einloggen kann. Die erhaltenen Widgets werden als Buttons in der Toolbar angezeigt. Mittels Klick auf ein Widget wird dieses gestartet. Das grte Problem stellt der zweite Punkt der obigen Aufzhlung dar. Der Cross o a Domain Request htte mit JSONP und jQuery verwirklicht werden sollen, hier macht a aber die Extension bzw. XUL einen Strich durch die Rechnung. Um zu verstehen, wieso der Request mittels jQuery in der Firefox Extension nicht funktioniert, wird zuerst erklrt, wie ein solcher Request in jQuery realisiert wird. Danach folgt die Erklrung, a a warum ein Cross Domain Request nicht einfach in einer Browserextension funktioniert. 2.3.5 Exkurs: Cross Domain Request mittels jQuery und JSONP Wie bereits bei der Begriserklrung erwhnt, sind Requests mit jQuery einfach zu a a realisieren, da die entsprechenden Funktionen vom Framework zur Verfgung gestellt u werden. Auch fr JSON with Padding (JSONP) stellt jQuery die ntige Funktionalitt u o a bereit. Wie aber funktioniert ein solcher Cross Domain Request nun genau? Diese Frage soll hier kurz erlutert werden. a JSONP bedeutet, dass auf Daten, die im JSON Format auf einer anderen Domne a vorliegen, per Request zugegrien werden kann.

12

Sternig Christof

Bachelorarbeit

29. Oktober 2011

SOP verhindert zwar, dass Requests auf diese Daten (sofern sie auf einer anderen Domne liegen) durchgefhrt werden knnen, allerdings verhindert SOP nicht, Scripts a u o dynamisch in eine Webseite einzubinden - auch wenn diese Scripts auf verschiedenen Domnen liegen. Einem dynamisch eingebundenen Script ist es nun mglich auf Funktionen a o der Webseite, die das Script dynamisch eingebunden hat, zuzugreifen. Ein kurzes Beispiel zur Illustration: Webseite X besitzt eine Funktion foo(). Mittels Bookmarklet wird ein Script einer anderen Domne dynamisch eingebunden. Dieses a Script enthlt die Funktion bar(). Nun ist es mglich, dass bar() einen Aufruf der a o Funktion foo() enthlt. Dies wrde ohne weiteres funktionieren. a u Mittels JSON knnte so ein Datenaustausch zwischen diesen beiden Funktionen und o somit zwischen zwei Scripts aus verschiedenen Domnen stattnden. a Genau so arbeitet JSONP. JSONP sind also JSON Daten, die in eine Funktion gepackt werden. Einen kleinen Unterschied gibt es aber. Bei JSONP wird ein Callback deniert, der in den Request gepackt wird. Die Antwort auf einen solchen Request bilden nun die JSON-Daten, die zusammen mit dem angegeben Callback einen Funktionsaufruf bilden. Bei erfolgreicher Durchfhrung des Requests wird also die, als Callback angegebene u Funktion, mit den ubermittelten JSON-Daten als Parameter aufgerufen. jQuery weist die Callback -Funktion dem window-Objekt der Webseite als globale Funktion zu. Nach dem Ausfhren des Callbacks wird sie wieder entfernt aus dem window-Objekt entfernt. u Soviel zur Funktionsweise von JSONP (vgl. [Osz09, jQuerys JSONP support]). Ein Beispiel und Code zum eben Beschriebenen nden sich dann im folgenden Teil. 2.3.6 XUL und JQuery Das Einbinden von jQuery in ein XUL-Dokument wird uber das script-Tag realisiert. Listing 4 zeigt den Code dazu.
1 < script type = " application /x - javascript " 2 src = " chrome: // bakktoolbar / content / portal / js / jquery -1.6.1. js " / >

Listing 4: Einbinden von jQuery in das XUL File Mit diesen zwei Zeilen ist es mglich, in der Javascript Datei toolbar.js auf Funko tionen des jQuery-Frameworks zuzugreifen. Die PLE stellt eine API zur Verfgung, die die Widgets des eingeloggten Users im u JSON Format zurckliefert, oder aber eine Fehlermeldung, sollte der User nicht eingeu loggt sein. Zuerst klickt der User also auf den Update-Button der Toolbar, daraufhin wird die Funktion UpdateWidgets() aufgerufen. In dieser Funktion wird der Cross Domain Request mittels JSONP durchgefhrt. Listing 5 zeigt den Ausschnitt aus der Funktion u UpdateWidgets(), in welchem der Request mittels jQuery realisiert wird.

13

Sternig Christof

Bachelorarbeit

29. Oktober 2011

1 UpdateWidgets : function () 2 { 3 // some code before Xdr 4 5 try { 6 $ . ajax ({ 7 type : " GET " , 8 dataType : " jsonp " , 9 url : 10 " http :// vlpc01 . tugraz . at /../ u s er sA c ti va t ed W id ge t s ? callback =? " , 11 error : function ( XMLHttpRequest , textStatus , errorThrown ) { 12 alert ( " Error occured textStatus = " + textStatus + 13 " errorThrown = " + errorThrown ) ; 14 }, 15 success : function ( data ) { 16 parseResponse ( data ) ; 17 } 18 }) ; 19 } catch ( e ) { 20 alert ( e . message ) ; 21 } 22 23 // some code after Xdr 24 } ,

Listing 5: Cross Domain Request mittels jQuery Auch der Code fr den Request ist schnell erklrt; type gibt die Art des Requests an. u a Mit der Angabe von dataType: jsonp teilt man der Funktion mit, dass es sich um einen Cross Domain Request handelt. Ist der Aufruf der Funktion erfolgreich, wird die unter success angegebene Funktion ausgefhrt. Der Parameter data enthlt die JSON Daten die ubermittelt wurden. u a Sollte allerdings ein Fehler auftreten, so wird die Funktion, welche im error Parameter angegeben wird, ausgefhrt. u Wie man sieht, ist JSONP mit dem jQuery-Framework sehr elegant und ohne groen Aufwand umzusetzen. Leider gibt es an dieser Stelle ein anderes Problem. Wie zuvor beschrieben fgt jQuery die Callback-Funktion (aus dem success Parameter) als globale u Funktion dem window-Objekt hinzu. Genau das ist der Grund, warum der Cross Domain Request in der Browserextension nicht funktioniert. Die unter success angegebene Funktion liegt im File toolbar.js. jQuery fgt dem u window-Objekt eine globale Funktion hinzu, die nach einem erfolgreichen Request den Callback mit den JSON-Daten als Parameter aufruft. Auf Dateien und Funktionen, die zu Browserextensions gehren (in diesem Fall toolbar.xul und toolbar.js), kann das o window-Objekt aber nicht zugreifen. Damit funktioniert ein solcher Cross Domain Request, wie oben beschrieben, leider nicht, da das window-Objekt versucht eine Funktion auszufhren, die nicht in dessen Scope liegt. u

14

Sternig Christof

Bachelorarbeit

29. Oktober 2011

Um einen Cross Domain Request mit jQuery doch zu ermglichen, msste das Frameo u work umgeschrieben werden. jQuery msste dem XUL-Dokument die globale Funtkion u hinzufgen, damit die Callback-Funktion erreichbar ist. u 2.3.7 Zusammenfassung Ansatz 1 Die Idee, die Widgets mittels Browserextension zu starten, wurde aufgrund von zwei Problemen verworfen. Zum einen aufgrund der Browservielfalt, zum anderen aufgrund des Cross Domain Requests, der nicht so ohne weiteres ermglicht werden kann. o

2.4 Ansatz 2: Bookmarklet fr das Anzeigen der Widgets u

Da der erste Ansatz, das Problem mit Hilfe einer Toolbar fr den Webbrowser zu lsen, u o nicht die gewnschten Ergebnisse lieferte, wurde ein neuer Ansatz gewhlt. In diesem u a zweiten Ansatz soll ein Bookmarklet die Lsung des Problems bringen. o Der Versuch, die Aufgabe mit Hilfe eines Bookmarklets zu lsen, ermglicht auch die o o Entwicklung einer Lsung fr alle Browser, ohne fr jeden einzelnen Browser eine sepeo u u rate Implementierung vornehmen zu mssen, wie es bei einer Toolbar der Fall gewesen u wre. a Im nchsten Punkt der Arbeit werden die einzelnen Ablufe beziehungsweise Ana a forderungen an die Implementierung beschrieben. Im darauolgenden Teil werden der Sourcecode und die Probleme dieser Lsung erlutert. o a 2.4.1 Ablufe und Anforderungen a Die Anforderungen an das Bookmarklet teilen sich in zwei Teile. Der erste Teil umfasst die Ablufe, nachdem das Bookmarklet ausgefhrt wird. Im zweiten Teil wird erklrt a u a was passiert, wenn (nachdem die Widgets des Users angezeigt werden) ein Widget, das angezeigt werden soll, ausgewhlt wird. a Wird das Bookmarklet PLE Widgets aktiviert, folgt darauf ein Cross Domain Request. Jenachdem, ob der Request erfolgreich durchgefhrt wird oder ein Fehler auftritt, ndert u a sich der weitere Ablauf. Damit der Request erfolgreich durchgefhrt wird, muss der Benutzer bzw. die Benutu zerin in die PLE eingeloggt sein. Sollte dies der Fall sein, wird eine Liste seiner/ihrer Widgets, uber die API der PLE, zur Verfgung gestellt. Diese Widgets werden dann, u uber die aktuelle Seite im Browser geblendet, angezeigt. Daraufhin kann ein Widget ausgewhlt werden, welches gestartet werden soll. a Ist der Benutzer/die Benutzerin nicht eingeloggt, scheitert der Request. Es werden keine Widgets ubertragen, sondern eine Fehlernachricht. Um das Einloggen zu ermglio chen wird ein zweiter Frame genet. Dieser Frame enthlt den Login-Bereich der PLE. o a Ist das Einloggen erfolgreich, muss der Prozess, um die Widgets zu erhalten, wiederholt

15

Sternig Christof

Bachelorarbeit

29. Oktober 2011

werden. Es muss also ein zweites Mal auf das Bookmarklet geklickt werden, um den Ablauf nochmals zu starten. Abbildung 3 zeigt diesen ersten Ablauf als kleines Diagramm.

Abb 3: Ablauf nach Klick auf das Bookmarklet

Wurde die Liste der Widgets erfolgreich erhalten, werden diese dem bzw. der Benutzerin in Form eines Mens angezeigt. Wird nun ein Widget aus diesem Men ausgewhlt, u u a um dieses zu starten, ist folgender Ablauf ntig: o Um das Widget zu starten ist ein kleiner Workaround notwendig, da sonst die SOP Probleme bereiten wrde. Da einzelne Widgets auch mit anderen Domnen kommuniu a zieren knnen bzw. mssen, beispielsweise um aktuelle Wetterdaten zu erhalten, fhren o u u diese Widgets Ajax-Requests aus. Diese Requests werden uber einen Proxy von der PLE an das entsprechende Ziel weitergeleitet. Die Antworten auf die Requests werden ebenfalls vom Proxy an das jeweilige Widget ubertragen. Wird das Widget jetzt einfach in einen neuen Frame geladen, so funktioniert diese Kommunikation mit der PLE nicht mehr, da die SOP verletzt wre. Das Widget wra u de nun unter der Domne der aktuellen Seite im Browser liegen, die Kommunikation a zwischen Widgets und der PLE setzt aber voraus, dass Widgets und die PLE unter der selben Domne liegen. a

16

Sternig Christof

Bachelorarbeit

29. Oktober 2011

Um dies zu unterbinden wird ein iframe, dessen Source auf dem PLE-Server liegt, geladen. Das zu startende Widget wird nun in diesen Frame gelegt, somit verletzt es die Same Origin Policy nicht mehr mittels Requests, die es durchfhren will und die u Kommunikation des Widgets kann strungsfrei ablaufen. o Hat der User nun ein Widget ausgewhlt wird uberprft, ob der iframe, der fr den a u u Workaround der Kommunikation bentigt wird, geladen wurde. Ist dies der Fall und o ist der Anwender oder die Anwenderin eingeloggt, wird ein neuer iframe erzeugt, in welchem das Widget schlussendlich geladen bzw. gestartet wird. Liegt kein Login vor, wird ein Frame mit dem Loginbereich geladen. Sollte der erste iframe nicht geladen worden sein und der User nicht eingeloggt sein, so wird ein Frame mit der Login-Area der PLE geladen, um dem Benutzer/der Benutzerin das Einloggen zu ermglichen. o Ist der erste Frame noch nicht geladen, aber der Anwender/die Anwenderin eingeloggt, wird der erste iframe geladen, danach wird das Widget im zweiten Frame geladen und gestartet. Abbildung 4 veranschaulicht diesen Prozess mit Hilfe eines einfachen Diagramms.

Abb 4: Ablauf nach Auswahl eines Widgets

Diese Ablufe und Anforderungen sind notwendig um das Starten und Anzeigen eia nes Widgets schlussendlich zu ermglichen. Im nchsten Teil folgen Erklrungen und o a a Ausschnitte aus der Implementierung. 2.4.2 Das Bookmarklet Um die gesamten Ablufe, wie oben beschrieben, zu starten, wird ein Bookmarklet vera wendet. Dieses wird in Listing 6 angefhrt. Es ist hnlich dem ersten Bookmarklet, das u a

17

Sternig Christof

Bachelorarbeit

29. Oktober 2011

fr die PLE verwendet wurde. Die Erklrungen zu einzelnen Codezeilen folgen nach dem u a Listing.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 javascript : var frame = document . getElementById ( " 0 vF4s3cShh2gY60 +2 NrT /3 af8rE = " ) ; if ( frame ) { if ( frame . style . visibility == " visible " ) { frame . style . visibility = " hidden " ; } else { frame . style . visibility = " visible " ; } } else { var head = document . g et Ele me nts By Tag Nam e ( " head " ) [0]; var jquery = document . createElement ( " script " ) ; var widgets = document . createElement ( " script " ) ; head . appendChild ( jquery ) . setAttribute ( " src " , " https :// ajax . googleapis . com / ajax / libs / jquery /1.6.1/ jquery . js " ); head . appendChild ( widgets ) . setAttribute ( " src " , " http :// localhost / bakk / widgets . js " ); } focus () ;

Listing 6: Das Bookmarklet PLE Widgets Die Zeilen 1 bis 14 sind aus dem Bookmarklet fr die PLE bekannt. (Siehe Kapitel u 1.3.1) Die obligatorische Angabe von javascript: in der ersten Zeile, um das Bookmarklet als solches zu kennzeichnen. Danach wird uberprft, ob das Bookmarklet schon u geklickt wurde. Wre dies der Fall, so wrde bereits ein iframe mit der ID a u 0vF4s3cShh2gY60+2NrT/3af8rE= im DOM der Webseite existieren. Somit wird der angezeigte iframe unsichtbar gemacht. Sollte der Frame existieren, aber unsichtbar sein, so wird er sichtbar gemacht. Um den iframe komplett aus dem DOM der Seite zu entfernen ist eine Aktualisierung dieser, oder der Wechsel auf eine neue Seite notwendig. Der erste Teil des Bookmarklets bringt keine groen Neuerungen. Der zweite Teil ist etwas interessanter.

18

Sternig Christof

Bachelorarbeit

29. Oktober 2011

Zunchst erhlt man per getElementsByTagName(head) eine Referenz auf das a a head-Tag der aktuell im Browser angezeigten Webseite. Die nchsten beiden Zeilen era zeugen jeweils zwei script Abschnitte, die spter dem DOM der Webseite mit appenda Child() hinzugefgt werden. Ersteres script-Tag erhlt als Source (mit setAttribuu a te()) eine online verfgbare jQuery-Version. Diese wird bentigt, da das zweite Script, u o das duch das Bookmarklet eingebunden wird, auf Funktionen des jQuery-Frameworks zugreift. Das zweite Script enthlt letztendlich die Funktionalitt fr die gesamten, zuvor a a u beschriebenen, Ablufe. Diese Funktionalitt ndet man im Javascript File widgets.js. a a Das Bookmarklet selbst ist sehr einfach gehalten. Das Elegante an diesem Bookmarklet ist, dass die Funktionalitt in ein eigenes File ausgelagert wird (widgets.js). Somit a knnen Funktionen in diesem File nach Belieben gendert und bearbeitet werden, ohne o a das Bookmarklet selbst verndern zu mssen. a u 2.4.3 Das Herz der Anwendung - widgets.js, erster Teil In diesem Abschnitt wird die Hauptfunktionalitt der Anwendung von Lsungsansatz a o 2 vorgestellt. Das Javascript File widgets.js wird anhand von Ausschnitten aus dem Code erklrt, um die Funktionsweise deutlich zu machen. a Nach dem Klick auf das Bookmarklet und dessen Ausfhrung, wird in widgets.js u die Funktion getWidgets() aufgerufen. Diese enthlt den Cross Domain Request um a die Widgets des Users zu erhalten. Listing 7 zeigt diese Funktion.
1 getWidgets : function () { 2 try { 3 $ . ajax ({ 4 type : " GET " , 5 dataType : " jsonp " , 6 url : 7 " http :// vlpc01 . tugraz . at /.../ us e rs Ac t iv at e dW i dg et s ? callback =? " , 8 timeout : 2000 , 9 cache : false , 10 error : function ( XMLHttpRequest , textStatus , errorThrown ) { 11 alert ( " Error occured textStatus = " + textStatus + 12 " errorThrown = " + errorThrown ) ; 13 14 widgets . loginFrame () ; 15 }, 16 success : function ( data ) { 17 widgets . parseResponse ( data ) ; 18 } 19 }) ; 20 } catch ( e ) { 21 alert ( e . message ) ; 22 } 23 } ,

Listing 7: Der Cross Domain Request (Xdr) in getWidgets() Dieser Ajax Request hat sich zu dem Request, der bei der Toolbar zuvor zum Ein-

19

Sternig Christof

Bachelorarbeit

29. Oktober 2011

satz kam, nicht groartig gendert. Einzig der Parameter timeout ist spter noch von a a Bedeutung. Im Fehlerfall wird also die Funktion des error Parameters ausgefhrt. Diese gibt den u Fehler in einer Message-Box aus. Neu ist hier, dass nach der Ausgabe des Fehlers die Funktion loginFrame() aufgerufen wird. Ist der Request erfolgreich, werden die Widgets im JSON-Format ubermittelt und die Funktion parseResponse() wird mit den Daten als Parameter ausgefhrt. u Durch den obigen Request gibt es nun zwei verschiedene Pfade, nmlich jenen, wenn a der Cross Domain Request erfolgreich war und die Methode parseResponse() aufgerufen wird. Der zweite mgliche Pfad ist das Scheitern des Requests und der dadurch o erzwungene Aufruf der Fehlerfunktion und weiters von loginFrame(). Zunchst soll der Fehlerfall abgehandelt werden, da dieser krzer ist und in wenigen a u Worten erklrt sein wird. Im folgenden Listing ist die Funktion loginFrame() angefhrt. a u
1 loginFrame : function () 2 { 3 pleIframe = document . createElement ( " iframe " ) ; 4 5 pleIframe . src = " https :// sso . tugraz . at / idp / Authn / GenericAuthn " ; 6 pleIframe . id = " 23 I a V Q b d d j g5 j V v m q i v G N q k g v r M = " ; 7 pleIframe . scrolling = " no " ; 8 pleIframe . style . position = " fixed " ; 9 pleIframe . style . top = " 1% " ; 10 pleIframe . style . left = " 1% " ; 11 pleIframe . style . opacity = " 0.9 " ; 12 pleIframe . width = " 100% " ; 13 pleIframe . height = " 100% " ; 14 pleIframe . frameBorder = " 0 " ; 15 pleIframe . style . visibility = " visible " ; 16 document . body . appendChild ( pleIframe ) ; 17 pleIframe . focus () ; 18 }

Listing 8: Die Funktion loginFrame() Die Funktionalitt aus Listing 8 ist schnell erklrt. Es wird ein Frame erzeugt, der als a a Source den Loginbereich der PLE zugewiesen bekommt. Da im Fehlerfall der User nicht eingeloggt ist, muss er sich zuerst einloggen. Auf die weiteren style Eigenschaften des erzeugen Login-Frames wird nicht genauer eingegangen. Bevor wir nun zum zweiten Fall, nmlich die erfolgreiche Durchfhrung des Requests a u und die damit verbundenen Ablufe zum Anzeigen der Widgets und der Ausfhrung a u eines speziellen Widgets kommen, muss die WDE vorgestellt werden.

20

Sternig Christof

Bachelorarbeit

29. Oktober 2011

2.4.4 Exkurs: Widget Development Environment (WDE) Mit Hilfe des Cross Domain Requests ist es mglich, uber die API der PLE die Wido gets des Benutzers/der Benutzerin zu erhalten. Um ein Widget zu starten ist aber ein sogenannter Container notwendig, in welchem das Widget luft. Die PLE ist ein solcher a Container. Um das Testen einfacher zu gestalten, wird die WDE benutzt. Es werden also die Widgets der PLE per Request erhalten, allerdings knnen diese nicht gestartet o werden, weil dazu Vernderungen seitens der PLE notwendig wren. a a Die WDE ist der PLE nachempfunden und enthlt bereits einige funktionsfhige Wida a gets. Im Rahmen dieser Arbeit wird also auf diese Widgets der WDE zugegrien. Weiters wird die WDE zum Starten bzw. Anzeigen der Widgets herangezogen. Dies ist mglich, o da die WDE ein Widgetcontainer ist bzw. als Widgetumgebung dient. Da die WDE lokal erreichbar ist, wird das Testen der Anwendung stark erleichtert. Weiters werden auch kleine Vernderungen an der WDE vorgenommen dies wre mit der PLE nicht mglich a a o gewesen (vgl. [Tar10, WDE]). 2.4.5 Das Herz der Anwendung - widgets.js, zweiter Teil Nach diesem kurzen Exkurs werden nun die Funktionen fr das Anzeigen und Starten u der Widgets vorgestellt. Nach dem erfolgreichen Request wird die Funktion parseResponse() ausgefhrt. In u dieser werden die erhaltenen JSON Daten, welche die Widgets des Users reprsentieren, a geparst und fr die weitere Verwendung gespeichert. u
1 parseResponse : function ( data ) { 2 for ( i =0; i < data . length ; i ++) 3 { 4 var entry = new Object () ; 5 entry . id = data [ i ]. name ; 6 entry . title = data [ i ]. title ; 7 this . userWidgets . push ( entry ) ; 8 } 9 if ( this . userWidgets . length == 0) 10 { 11 alert ( " Keine Widgets in PLE ! " ) ; 12 } 13 else 14 { 15 this . showUserWidgets () ; 16 } 17 } ,

Listing 9: Parsen der JSON Daten Das Vorliegen der Daten im JSON Format erleichtert das Parsen dieser ungemein. Fr jedes Widget wird ein eigenes Objekt erzeugt, welches die ID und den Namen des u

21

Sternig Christof

Bachelorarbeit

29. Oktober 2011

jeweiligen Widgets enthlt. Diese Objekte werden einem Array hinzugefgt, auf das a u spter zugegrien werden kann. Sollte das Array nach dem Parsen leer sein, wurden a keine Widgets ubertragen. Der User hat womglich keine Widgets in der PLE aktiviert. o Im Normalfall aber wird nach dem Parsen die Funktion showUserWidgets() aufgerufen. Hier wird ein Men erzeugt, welches die Widgets zur Auswahl anzeigt. Dieses Men u u wird in ein eigenes div-Element gelegt. Dieses wird transparent uber die aktuelle Seite im Browser gelegt. Der Source-Code der Funktion bendet sich in Listing 10.
1 showUserWidgets : function () { 2 var container = document . createElement ( " div " ) ; 3 container . id = " 0 vF4s3cShh2gY60 +2 NrT /3 af8rE = " ; 4 container . style . position = " fixed " ; 5 container . style . top = " 1% " ; 6 container . style . right = " 1% " ; 7 container . style . opacity = " 0.9 " ; 8 container . style . border = " 3 px " ; 9 container . style = " border - color = black " ; 10 container . style . visibility = " visible " ; 11 container . style . background = " yellow " ; 12 13 for ( i =0; i < this . userWidgets . length ; i ++) { 14 var w = document . createElement ( " a " ) ; 15 var text = document . createTextNode ( 16 this . userWidgets [ i ]. id + " - " + this . userWidgets [ i ]. title ) ; 17 w . appendChild ( text ) ; 18 w . appendChild ( document . createElement ( " br " ) ) ; 19 link = " javascript : widgets . loadPleFrame ( " + 20 this . userWidgets [ i ]. id + " ) " ; 21 w . href = link ; 22 container . appendChild ( w ) ; 23 } 24 // nur f r localhost WDE u 25 for ( i =0; i <6; i ++) { 26 var w = document . createElement ( " a " ) ; 27 var text = document . createTextNode ( " Widget " + i ) ; 28 w . appendChild ( text ) ; 29 w . appendChild ( document . createElement ( " br " ) ) ; 30 link = " javascript : widgets . loadPleFrame ( " + i + " ) " ; 31 w . href = link ; 32 container . appendChild ( w ) ; 33 } 34 document . body . appendChild ( container ) ; 35 } ,

Listing 10: Aufbau des Mens mit den Widgets u Die Zeilen 2 bis 11 erzeugen einen Container, der das Men darstellt. Es werden u verschiedenste Eigenschaften gesetzt, die aber nicht weiter von Bedeutung sind, da sie lediglich das Aussehen des Mens denieren. u

22

Sternig Christof

Bachelorarbeit

29. Oktober 2011

Interessanter sind die beiden for-Schleifen. Die erste bezieht sich auf die Widgets, die im zuvor gefllten Widget Array liegen. Die zweite durchluft die Widgets der WDE. u a Diese Widgets werden letztendlich zum Testen herangezogen. Der Aufbau der zwei Schleifen ist ident zur ersten, lediglich ein Link und der Text der Links ist verschieden. Zuerst wird pro Widget ein solches Link-Tag erzeugt. Der Text dieses Links ist die ID und der Name des jeweiligen Widgets. Um nun, nach dem Klick auf diesen Link das entsprechende Widget zu laden und anzuzeigen, wird als hrefEigenschaft der String javascript:widgets.loadPleFrame(WidgetID) gesetzt. Die jeweilige ID des Widgets wird in diesen String codiert. Klickt der User nun auf ein Widget, das gestartet werden soll, wird die Funktion loadPleFrame() mit der ID dieses Widgets aufgerufen und das entsprechende Widget kann geladen werden. Der letzte Teil von widgets.js ist die Funktion loadPleFrame(). Durch die uberge bene ID ist bekannt, welches Widget geladen werden soll. Die Funktion erzeugt einen iframe dessen Source die Datei index.html der WDE ist. Dieses HTML-File initiiert den Start eines Widgets in der WDE. Der URL fr index.html wird am Ende ein u Parameter hinzugefgt. Dieser Parameter bezeichnet die ID des zu startenden Widgets. u Sollte ein iframe mit der gesetzten ID bereits existieren, folgt daraus, dass eine Instanz dieses speziellen Widgets breits angezeigt wird. Der Frame, in welchem dieses Widget luft, wird aus dem DOM entfernt. Dadurch ist es mglich ein Widget per Klick auf den a o Link zu starten. Klickt man denselben Link ein zweites Mal, so kann das Widget wieder entfernt werden. Der Code zur eben beschriebenen Funktion bendet sich in Listing 11.
1 loadPleFrame : function ( id ) { 2 pleIframe = document . getElementById ( 3 " 8 s W Z V x i x l 7 v W 9 j y Z 6 K q 2 7 i r x x J U = " + id ) ; 4 if ( pleIframe ) 5 document . body . removeChild ( pleIframe ) ; 6 else { 7 pleIframe = document . createElement ( " iframe " ) ; 8 pleIframe . src = " http :// localhost / bakk / WDE / index . html ? " + id ; 9 pleIframe . id = " 8 s W Z V x i x l 7 v W 9 j y Z 6 K q 2 7 i r x x J U = " + id ; 10 pleIframe . scrolling = " no " ; 11 pleIframe . style . position = " fixed " ; 12 pleIframe . style . top = " 1% " ; 13 pleIframe . style . left = " 1% " ; 14 pleIframe . style . opacity = " 0.9 " ; 15 pleIframe . width = " 80% " ; 16 pleIframe . height = " 100% " ; 17 pleIframe . frameBorder = " 0 " ; 18 pleIframe . style . visibility = " visible " ; 19 document . body . appendChild ( pleIframe ) ; 20 pleIframe . focus () ; 21 } 22 } ,

Listing 11: Anzeigen des ausgewhlten Widgets a

23

Sternig Christof

Bachelorarbeit

29. Oktober 2011

Am Ende der Beschreibung der Implementierung folgt noch ein Ausschnitt aus der Datei index.html der WDE. Diese wurde leicht abgendert, um mit dem Parameter a umgehen zu knnen, der in der URL angehngt wird. In Listing 12 ndet sich der o a relevante Auszug aus der Datei.
1 < html > 2 < head > 3 <! -- some other files ( stylesheets , scripts ) -- > 4 5 < script type = " text / javascript " > 6 // add your widget IDs to this array 7 window . widgets = new Array () ; 8 var id = document . URL . split ( " ? " ) [1]; 9 10 if ( id == " 0 " ) 11 window . widgets . push ( helloWorld ) ; 12 else if ( id == " 1 " ) 13 window . widgets . push ( XHRTest ) ; 14 else if ( id == " 2 " ) 15 window . widgets . push ( MVCsample ) ; 16 else if ( id == " 3 " ) 17 window . widgets . push ( MVCsampleWithLocalization ) ; 18 else if ( id == " 4 " ) 19 window . widgets . push ( completeWidgetExample ) ; 20 else if ( id == " 5 " ) 21 window . widgets . push ( MyWidget ) ; 22 else 23 alert ( " kein WDE widget " ) ; 24 </ script > 25 < script type = " text / javascript " src = " ./ portal / js / portal . js " > </ script > 26 </ head > 27 < body > < div id = " content " > </ div > </ body > 28 </ html >

Listing 12: index.html der WDE Die Funktionalitt des oben gezeigten Scripts ist schnell erklrt. Die ID des Widgets, a a welches gestartet werden soll, wird in die URL codiert. Die URL sieht also folgendermaen aus: http://url/to/wde/index.html?widgetID. Mit Javascript kann auf diese URL zugegrien werden, die ID des Widgets wird aus dieser extrahiert. Mit einfachen if-else-Abfragen wird das der ubergebenen ID ent sprechende Widget gestartet. Dies wre die komplette Implementierung fr Lsungsansatz 2, allerdings gibt es noch a u o ein kleines Problem, welches diesen Lsungsansatz teilweise unbrauchbar macht. In Abo bildung 5 sieht man das Widgetmen (gelber Container) und ein gestartetes Widget u transparent uber Google geblendet.

24

Sternig Christof

Bachelorarbeit

29. Oktober 2011

Abb 5: Implementierung des zweiten Losungsansatzes in Aktion 2.4.6 Problem Cross Domain Request - die Zweite Der Cross Domain Request bereitet aber weiterhin Probleme. Im fehlerfreien Fall ist alles in Ordnung, die Widgets werden richtig ubermittelt, auch das Parsen, Anzeigen und Ausfhren der Widgets und des Mens funktioniert problemlos. u u Aber was passiert im Fall, dass der oder die Benutzerin nicht eingeloggt ist? Die Methode im error Parameter des Requests wird ausgefhrt. Das stimmt so nicht ganz. u Die Funktion wird, da im Falle des uneingeloggten Users keine JSON Daten ubermit telt werden, erst nach Ablauf der Zeitspanne, die im timeout Parameter angegeben wird, ausgefhrt. Dies ist aber keine gute Praktik, um zu erkennen ob ein Benutzer/eine u Benutzerin eingeloggt ist oder nicht. Wie gro soll die Zeitspanne fr den Timeout gewhlt werden? Zwei bis drei Sekunden u a oder doch fnf Sekunden? Man kann keine genaue Angabe machen, wie lange es dauern u soll bis es zum Timeout kommt, da es unterschiedlichste Internetverbindungen gibt. Bei viel Trac im Netz kann es durchaus lnger dauern bis die JSON Daten ubermittelt a werden, somit wrde aber bei einem 2-Sekunden-Timeout vielleicht ein eingeloggter User u seine Widgets nicht erhalten und als nicht eingeloggt erkannt werden. Dies htte zur a Folge, dass die Anwendung nicht stabil bzw. fehlerhaft laufen wrde. u 2.4.7 Zusammenfassung Ansatz 2 Lsungsansatz 2 ist schon nahe an der Lsung, das Anzeigen und Starten der Widgets o o funktioniert einwandfrei. Mit dem Bookmarklet anstelle der Browserextension ist auch das Problem der Browser vom Tisch. Aufgrund der Probleme mit dem Cross Domain Request bzw. dem Timeout, wird aber in der endgltigen Lsung der zweiten Aufgau o be dieser Arbeit auf einen Cross Domain Request verzichtet, da er zu viele Probleme bereitet.

2.5 Die Lsung der Aufgabenstellung o

Nachdem nun zwei Lsungsanstze fr die zweite Aufgabenstellung diskutiert wurden, o a u folgt nun die Lsung des Problems in diesem Teil der Arbeit. Aufbauend auf den zweiten o Lsungsansatz mit dem Bookmarklet fr die PLE Widgets, wurde nun der Cross Domain o u Request entfernt und ein Dockmen hinzugefgt. Die Lsung setzt sich aus folgenden u u o Dateien zusammen:

25

Sternig Christof

Bachelorarbeit

29. Oktober 2011

Das Bookmarklet zum Starten der Anwendung UserPleWidgets.js... ...enthlt die Funktionalitt der Anwendung a a index.html... ...Einstiegspunkt in die WDE zum Starten des jeweiligen Widgets divStyleSheet.css... ...Stylesheet fr das Dockmen u u Erklrungen zu den einzelnen Files folgen. a 2.5.1 Das Bookmarklet Das endgltige Bookmarklet ist in Listing 13 aufgefhrt. Es hat sich nicht viel gendert. u u a Ein iframe wird erzeugt, sollte dieser nicht bereits existieren. Verschiedene Eigenschaften des Frames werden gesetzt. Ist der Frame aber bereits im DOM der Seite, so wird er nur auf visible bzw auf hidden gesetzt; also angezeigt bzw versteckt.
1 javascript : 2 ( function () { 3 myIFrame = document . getElementById ( 4 " DA39A3EE5E6B4B0D3255BFEF95601890AFD80709 "); 5 6 if ( myIFrame ) { 7 if ( myIFrame . style . visibility == " hidden " ) { 8 myIFrame . style . visibility = " visible " ; 9 } 10 else { 11 myIFrame . style . visibility = " hidden " ; 12 } 13 } 14 else { 15 myIFrame = document . createElement ( " iframe " ) ; 16 myIFrame . src = " http :// localhost / bakk / wde / index . html " ; 17 myIFrame . id = " D A 3 9 A 3 E E 5 E 6 B 4 B 0 D 3 2 5 5 B F E F 9 5 6 0 1 8 9 0 A F D 8 0 7 0 9 " ; 18 myIFrame . style . top = " 0% " ; 19 myIFrame . style . left = " 0% " ; 20 myIFrame . style . opacity = " 0.9 " ; 21 myIFrame . style . position = " fixed " ; 22 myIFrame . width = " 100% " ; 23 myIFrame . height = " 100% " ; 24 myIFrame . style . visibility = " visible " ; 25 myIFrame . frameBorder = " 0 " ; 26 document . body . appendChild ( myIFrame ) ; 27 } 28 }) () ;

Listing 13: Das Bookmarklet PLE Widgets

26

Sternig Christof

Bachelorarbeit

29. Oktober 2011

2.5.2 Die Funktionalitt der Anwendung: UserPleWidgets.js a In diesem Abschnitt folgen nun Erklrungen zum wichtigsten Teil der Arbeit - die Jaa vascript Datei UserPleWidgets. Viele Funktionen wurden aus Lsungsansatz 2 ubero nommen und nur leicht abgendert. Die Anderungen werden in Listings veranschaulicht a und kurz erklrt. a Der wohl interessanteste Punkt in dieser Datei ist der Ajax Request, der die Widgets liefert. Da der Cross Domain Request nun wegfllt, gibt es wieder eine kleine Anderung a der Aufgabenstellung. Die Widgets des Users liegen nun lokal als JSON-File vor. Mittels Ajax Request kann nun einfach auf diese zugegrien werden. Ein spezielles Widget ist in der Datei wie folgt codiert: {name:helloWorld,title:Hello World} Unter name wird die ID des jeweiligen Widgets angegeben, bei title der Name des Widgets. Mehrere Widgets werden als Array codiert. Dies erfolgt mittels [ ... ], also z.B. so: [codiertesWidget1, codiertesWidget2, ... ] Der abgenderte Request ist in Listing 14 zu sehen. Auch hier keine groen Anderuna gen, lediglich das Wegfallen des timeout-Parameters ist erwhnenswert. a
1 function getWidgets (f , t ) { 2 try { 3 $ . ajax ({ 4 url : http :// localhost / bakk / myWidgets . json , 5 dataType : json , 6 success : function ( data ) { parseResponse ( data ,f , t ) ; } , 7 error : function () { errorCallback () ; } 8 }) ; 9 } catch ( e ) { 10 alert ( e . message ) ; 11 } 12 };

Listing 14: Der engltige Ajax Request zum Erhalt der Widgets u Die Funktion parseResponse() hat sich im Gegensatz zum zweiten Lsungsansatz o auch etwas gendert. Die Parameter f und t wurden hinzugefgt. Am Parsen der JSON a u Daten hat sich nichts gendert. Die neuen Parameter dienen zum richtigen Anzeigen a des Dockmens. Es sind also zwei Indizess (from, to) damit das Men die Widgets imu u mer an der richtigen Stelle anzeigt. Dies ist notwendig, da beim Start eines Widgets die index.html Datei der WDE neu geladen wird und somit wrde die aktuelle Stelu lung des Mens verloren gehen. f und t verhindern dies und werden beim Laden eines u

27

Sternig Christof

Bachelorarbeit

29. Oktober 2011

neuen Widgets als Parameter in der URL (genauso wie die Widget ID) an index.html ubergeben. Im folgenden Listing ist die Funktion parseResponse() abgebildet.
1 function parseResponse ( data ,f , t ) 2 { 3 for ( i =0; i < data . length ; i ++) 4 { 5 var entry = new Object () ; 6 entry . id = data [ i ]. name ; 7 entry . title = data [ i ]. title ; 8 this . userWidgets . push ( entry ) ; 9 } 10 11 if ( this . userWidgets . length == 0) 12 { 13 alert ( " Keine Widgets in PLE ! " ) ; 14 } 15 else 16 { 17 if (! f ) 18 { 19 if ( this . userWidgets . length < 13) 20 { 21 from = 0; 22 to = this . userWidgets . length ; 23 } 24 else 25 { 26 from = 0; 27 to = 13; 28 } 29 } 30 else 31 { 32 from = parseInt ( f ) ; 33 to = parseInt ( t ) ; 34 } 35 this . showUserWidgets ( from , to ) ; 36 } 37 };

Listing 15: Parsen der erhaltenen Widget-Daten Die nchste Funktion in UserPleWidgets ist fr das Anzeigen des Widgetmens zua u u stndig. Zunchst wird uberprft ob, bereits ein Men angezeigt wird. Sollte das der Fall a a u u sein, wird das alte Men gelscht, um dem neuen Platz zu machen. Daraufhin werden, u o fr jedes Widget, die Bilder und Beschreibungen geladen bzw. erstellt und als a-Tag u in das Men hinzugefgt. Im Link wird, wie bereits in Ansatz 2, die jeweilige ID des u u Widgets codiert.

28

Sternig Christof

Bachelorarbeit

29. Oktober 2011

Aufgrund der Lnge der Funktion werden die beschriebenen Teile in eigenen Listings a angefhrt, um die Leserlichkeit zu erhalten. Dieser erste Teil des Codes ndet sich im u folgenden Listing:
1 function showUserWidgets (f , t ) 2 { 3 var widgets = document . getElementById ( " userWidgets " ) ; 4 var container = document . createElement ( div ) ; 5 container . className = dockContainer ; 6 container . id = dockMenuContainer ; 7 8 // delete old widgets 9 var oldContainer = document . getElementById ( dockMenuContainer ) ; 10 if ( oldContainer ) 11 widgets . removeChild ( oldContainer ) ; 12 13 // some code 14 15 for ( var i = from ; i < to ; i ++) 16 { 17 var a = document . createElement ( a ) ; 18 var span = document . createElement ( span ) ; 19 var img = document . createElement ( img ) ; 20 21 if ( navigator . userAgent . indexOf ( " MSIE " ) != -1) 22 img . style . height = 100% ; 23 24 // Widget name 25 var text = document . createTextNode ( this . userWidgets [ i ]. title ) ; 26 span . appendChild ( text ) ; 27 28 // Widget icon 29 img . src = http :// localhost / bakk / wde / widgets / + 30 userWidgets [ i ]. id + / icon . png ; 31 32 // Widget link 33 var link = " javascript : loadSelectedWidget ( " + 34 this . userWidgets [ i ]. id + " ) " ; 35 a . href = link ; 36 a . appendChild ( span ) ; 37 a . appendChild ( img ) ; 38 a . className = dockItem ; 39 40 // add Widget to container 41 container . appendChild ( a ) ; 42 } 43 44 // some code 45 };

Listing 16: Erstellen des Dockmens u

29

Sternig Christof

Bachelorarbeit

29. Oktober 2011

Fr die Navigation gibt es zwei if (nav == 1)-Blcke. Diese erzeugen die beiden u o Pfeile am Anfang bzw Ende der Widgetliste des Mens. Sollte der User mehr als 13 u Widgets in der PLE aktiviert haben, werden aus Ubersichtsgrnden nur die ersten 13 u Widgets der Liste angezeigt. Mit Hilfe der Pfeile kann dann durch die weiteren Widgets gescrollt werden. Die Variable nav wird auf 1 gesetzt sobald mehr als 13 Widgets ubertragen werden. Im nchsten Listing ndet man den Code eines der beiden if-Blcke. Der zweite ist a o dem ersten ganz hnlich, lediglich ein anderes Bild (Pfeil nach rechts) wird geladen und a der Pfeil wird am Ende des Mens angefgt. u u
1 function showUserWidgets (f , t ) { 2 // some code 3 if ( this . userWidgets . length > 13) 4 nav = 1 5 6 // navigation left 7 if ( nav == 1) 8 { 9 if ( from > 0) 10 { 11 goLeft = document . createElement ( a ) ; 12 var span = document . createElement ( span ) ; 13 var img = document . createElement ( img ) ; 14 15 if ( navigator . userAgent . indexOf ( " MSIE " ) != -1) 16 img . style . height = 100% ; 17 18 // go left 19 var text = document . createTextNode ( other widgets ) ; 20 span . appendChild ( text ) ; 21 22 // nav icon 23 img . src = http :// localhost / bakk / wde / portal / navLeft . png ; 24 25 // link 26 var link = " javascript : navLeft () " ; 27 goLeft . href = link ; 28 goLeft . appendChild ( span ) ; 29 goLeft . appendChild ( img ) ; 30 goLeft . className = dockItem ; 31 32 container . appendChild ( goLeft ) ; 33 } 34 } 35 // some other code 36 };

Listing 17: Die Navigation des Mens u Zu guter Letzt noch ein kleiner Teil der Funktion, welcher fr die Animation des u

30

Sternig Christof

Bachelorarbeit

29. Oktober 2011

Dockmens zustndig ist. Die fisheye-Methode von jQuery erweckt das Men sozusau a u gen zum Leben. Die einzelnen Parameter sind Angaben, wie sich das Men verhalten u soll. Zur Vollstndigkeit hier noch der restliche Source-Code von showUserWidgets(): a
1 function showUserWidgets (f , t ) 2 { 3 // code for navigation and widget dock menu 4 5 // animation for dock menu 6 $ ( # userWidgets ) . Fisheye ( 7 { 8 maxWidth : 60 , 9 items : a , 10 itemsText : span , 11 container : . dockContainer , 12 itemWidth : 40 , 13 proximity : 80 , 14 alignment : left , 15 valign : bottom , 16 halign : center 17 }) ; 18 };

Listing 18: Dem Men Leben einhauchen u Die letzten drei Funktionen in UserPleWidgets.js werden in einem Listing angefhrt und erklrt, da es sich um sehr kurze Funktionen handelt. Zum einen die zwei u a Funktionen navLeft() und navRight(), die zum Scrollen durch das Men dienen und u loadSelectedWidget() fr das Starten eines Widgets. u Listing 19 enthlt diese drei Funktionen: a
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function loadSelectedWidget ( id ) { var wdeUrl = document . URL . split ( ? ) [0]; window . location . href = wdeUrl + " ? " + id + " ? " + from + " ? " + to ; }; function navLeft () { from = from -1; to = to -1; this . showUserWidgets ( from , to ) ; }; function navRight () { from = from +1; to = to +1; this . showUserWidgets ( from , to ) ; };

Listing 19: Parsen der erhaltenen Widget-Daten

31

Sternig Christof

Bachelorarbeit

29. Oktober 2011

Zunchst ein paar Worte zu den beiden Funktionen fr die Navigation. Es werden a u hier einfach die Indizess from bzw to fr das Dockmen in die jeweilige Richtung vernu u a dert. Danach wird die Methode showUserWidgets() mit den neu berechneten Indizess aufgerufen, um das Men neu zu zeichnen. u Das Anzeigen eines ausgewhlten Widgets wird in zwei Zeilen ermglicht. Zunchst a o a wird die URL des iframes, der durch das Bookmarklet erzeugt wurde, in wdeUrl gespeichert. Die jeweiligen Parameter, die durch den Start eines Widgets zuvor an der URL hngen knnten, werden entfernt. Mit Hilfe der, in die Funktion ubergebenen ID und a o den Indizess fr das Men, wird die neue URL erzeugt und dem iframe zugewiesen. u u Das Laden des gerade ausgewhlten Widgets erfolgt dann in der Datei index.html a der WDE. Dieser noch ausstndige Teil wird in Listing 19 nachgereicht. Es hat sich zu a Ansatz zwei etwas gendert. Die zwei Parameter from und to fr das Dockmen wurden a u u hinzugefgt, die if-else-Blcke zum Starten eines Widgets fallen weg, da die ID fr u o u den Start eines Widgets in der URL ubergeben wird. Weiters wurde ein neues div-Tag eingefgt, welches das Men fr die Widgets enthlt. u u u a
1 < html > 2 < head > 3 <! -- some other files ( stylesheets , scripts ) -- > 4 < script type = " text / javascript " > 5 6 // add your widget IDs to this array 7 window . widgets = new Array () ; 8 9 var id = document . URL . split ( " ? " ) [1]; 10 var menuFrom = document . URL . split ( " ? " ) [2]; 11 var menuTo = document . URL . split ( " ? " ) [3]; 12 13 if ( id ) 14 window . widgets . push ( id ) ; 15 </ script > 16 </ head > 17 < body onload = " javascript : getWidgets ( menuFrom , menuTo ) " > 18 < div id = " content " > </ div > 19 < div id = " userWidgets " class = " dock " > </ div > 20 </ body > 21 </ html >

Listing 20: index.html der WDE Das wre somit die Lsung der zweiten Aufgabenstellung der Bachelorarbeit. Das a o Stylesheet fr das Dockmen wird nicht extra angefhrt, da es fr die Lsung selbst u u u u o nicht relevant ist. Abbildung 6 zeigt die Lsung in Aktion. Im unteren Bereich erkennt man das Docko men, das gestartete Widget im oberen Bereich. Transparent unter dem Widget und u dem Men erkennt man die aktuelle Seite im Browser. u

32

Sternig Christof

Bachelorarbeit

29. Oktober 2011

Abb 6: Die fertige Version der Implementierung

3 Zusammenfassung
Ein Bookmarklet zu erstellen, das die PLE auf jeder beliebigen Internetseite zugnglich a macht und diese transparent uber der aktuellen Seite anzeigt, ist in ein paar Zeilen Code zu realisieren. Doch trotz dieser Einfachheit erkennt man die Mglichkeiten, die o Bookmarklets bieten. Aufbauend auf die Lsung der erste Aufgabe, wurde in der zweiten Aufgabenstellung o das Anzeigen eines einzelnen Widgets aus der PLE gefordert. Der erste Ansatz, dies mit einer Toolbar zu verwirklichen, war letzendlich zu problematisch. Lsungsansatz zwei, o ein Bookmarklet fr die Lsung zu verwenden, kam den Anforderungen der Aufgabe u o schon sehr nahe. Lediglich der Cross Domain Request bereitet Probleme. Die Lsung selbst besteht aus einem Bookmarklet und einem neuen Javascript-File o das der WDE hinzugefgt wird. Mit relativ wenig Aufwand ist es also auch mglich, u o ein Widget transparent uber die Browserseite zu legen und zu verwenden. Einziger Wer mutstropfen ist, dass die Lsung (noch) nicht mit den Widgets der PLE funktioniert, o sondern lediglich lokal mit Hilfe der WDE. Trotzdem ist ein erster Anfang geschat, Widgets aus der PLE schnell abzurufen und zu verwenden.

Literatur
[aja07] ajaxschmiede.de. jquery ein mchtiges a und ezientes werkzeug. http://www.ajaxschmiede.de/jquery/ jquery-ein-machtiges-und-effizientes-werkzeug/ (11.08.2011), 2007. [Cac10] Marcos Caceres. Widget requirements, w3c working draft. http://www.w3. org/TR/widgets-reqs/ (11.08.2011), 2010.

33

Sternig Christof

Bachelorarbeit

29. Oktober 2011

[ET10] Martin Ebner and Behnam Taraghi. Personal learning environment for higher education - a rst prototype. http://www.scribd.com/doc/ 33740548/Personal-Learning-Environment-for-Higher-Education-% E2%80%93-A-First-Prototype (29.10.2011), 2010. [jso] json.org. Einfhrung in json. u (11.08.2011). http://www.json.org/json-de.html

[Len06] Sven Lennartz. Bookmarklet, favelets und snippets. http://www.drweb.de/ magazin/bookmarklets-favelets-und-snippets/ (11.08.2011), 2006. [mic] microsoft.com. Verwenden von jsonp. http://msdn.microsoft.com/de-de/ library/ee816916.aspx (11.08.2011).

[Pon07] Nickolay Ponomarev. The joy of xul. https://developer.mozilla.org/en/ The_Joy_of_XUL (11.08.2011), 2007. [Sch] Mathias Schfer. Same origin policy. http://molily.de/js/sicherheit. a html#same-origin-policy (11.08.2011).

[Osz09] Salih Oszes, Seda; Ergl. Combine jsonp and jquery to quickly build u powerful mashups. http://www.tutorialized.com/view/tutorial/ Combine-JSONP-and-jQuery-to-quickly-build-powerful-mashups/42951 (11.08.2011), 2009. [Tar10] Behnam Taraghi. Widget tutorial. http://tugtc.tugraz.at/wbtmaster/ courses/707021_panel5.htm (11.08.2011), 2010.

34