Bachelorarbeit

Entwicklung einer auf JavaScript und HTML5 basierenden Smart-Client Applikation zur Nutzung der Hochschul-Informationsplattform Spirit der FH-Schmalkalden für mobile Endgeräte
Zur Erlangung des akademischen Grades eines Bachelor of Science - Informatik -

Fakultät Informatik Referent: Prof. Dr. Oliver Braun Korreferent: Dipl.-Inf.(FH) René Brothuhn eingereicht von: Toni Bolduan Matr.-Nr. 270794 Veilsdorfer Straße 67 98669 Veilsdorf Schmalkalden, den 22. März 2012

Zusammenfassung Smartphones und Tablets sind ein wichtiger Bestandteil der heutigen Gesellschaft und mit der Einführung der Touchscreens ein, von der breiten Masse akzeptierter Ersatz für herkömmliche Handys, welcher nicht mehr wegzudenken ist. Das Bedienkonzept und die Präsentation von Informationen im kompakten Format von jedem beliebigen Ort aus, sowie die Möglichkeit der Funktionserweiterung durch Programme, genannt Apps, machen Smartphones bzw. andere mobile Endgeräte zum Begleiter im täglichen Leben. Die Basis für diese Apps bildet das dem Smartphone unterliegende Betriebssystem. Derzeit existiert eine Vielzahl an Betriebssystemen für Smartphones. Android, iOS, Windows Phone 7, um nur die Bekanntesten und Verbreitetsten unter ihnen zu nennen, bieten unzählige Programme. Doch genau in dieser Vielzahl steckt ein großer Nachteil. So muss für jedes Betriebssystem eine eigene Anwendung geschrieben werden, dass den Aufwand, ein Produkt der breiten Masse zugänglich zu machen, stark erhöht. Abhilfe schafft hier das Konzept der Smart-Clients bzw. Webapps. In dieser Arbeit wird das Konzept der Webapp und ihre Umsetzbarkeit für die SpiritPlattform der FH-Schmalkalden am Beispiel eines prototypischen Programmes untersucht. Die Schwerpunkte liegen dabei auf dem Prüfen des Möglichkeitenrahmens und dem Bereitstellen der Grundfunktionalitäten der Spirit-Plattform, sowie einigen Zusatzfunktionen, die in den folgenden Kapiteln näher erklärt werden sollen.

Danksagung An dieser Stelle möchte ich allen denjenigen danken, die dazu beigetragen haben, dass diese Arbeit erstellt wurde. Zuerst möchte ich meinen Eltern danken, die mich in jeder Hinsicht unterstützt haben und sehr viel Geduld mit mir und meinem langen Studium hatten. Ohne sie wäre das Studium nicht zu bewältigen gewesen. Ich danke gesondert Herrn Prof. Dr. Oliver Braun, der diese Arbeit erst ermöglichte und mir als erster Ansprechpartner zur Seite stand, wenn es um Angelegenheiten rund um die Abschlussarbeit und das Spirit-Projekt ging. Er hatte stets ein offenes Ohr für Ideen, Fragen und Probleme. Weiterhin möchte ich dem Spirit-Team für dessen Hilfe danken, gesondert Herrn Marcus Denison für seine Anregungen, Tipps und Zeit, mir die eine oder andere Vorgehensweise innerhalb der Spirit-Plattform zu erklären. Abschließend möchte ich Felix Felmar, Andreas Berckner, Hendrik Tangemann und Fabian Markert danken, die nicht nur als Beta-Tester stets ein kritisches Wort hatten, sondern auch in teils langen Diskussionen Anregungen gaben, den Funktionsumfang der Bachelorarbeit zu erweitern.

Inhaltsverzeichnis
1 Einleitung 1.1 Webapps . . . . . . . . . . . . . . . 1.1.1 Vorteile und Nachteile . . . 1.1.2 Fazit . . . . . . . . . . . . . 1.2 Spirit . . . . . . . . . . . . . . . . . 1.2.1 Teilbereiche . . . . . . . . . 1.2.2 Eingliederung dieser Arbeit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1 1 2 2 3 4 5 5 5 7 7 7 9 10 11 12 13 15 15 15 18 19 19 19 21 21 21 22 23 24 25 27 28

2 Aufgaben und Anforderungen 2.1 Aufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.2 Anforderungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Vorbetrachtungen 3.1 Plattform . . . . . . . . . . . . . . . . . . . . 3.1.1 Marktanteile . . . . . . . . . . . . . . . 3.1.2 Browserengines . . . . . . . . . . . . . 3.2 Framework . . . . . . . . . . . . . . . . . . . . 3.2.1 Vorstellung der JavaScript-Frameworks 3.2.2 Wahl des Frameworks . . . . . . . . . 3.3 Ergebnis . . . . . . . . . . . . . . . . . . . . . 4 Struktur der Software 4.1 Grafische Benutzeroberfläche . . 4.1.1 Konzept . . . . . . . . . 4.1.2 Menüführung . . . . . . 4.2 Kernkomponenten . . . . . . . . 4.2.1 Seitenaufbau . . . . . . 4.2.2 Komponentenaufteilung

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

5 Implementierung 5.1 Allgemein . . . . . . . . . . . . . . . 5.2 Seitenansicht . . . . . . . . . . . . . 5.3 Menü . . . . . . . . . . . . . . . . . . 5.4 News . . . . . . . . . . . . . . . . . . 5.4.1 News Klasse . . . . . . . . . . 5.4.2 Datenformat der News-Daten 5.4.3 Bereitstellen der Daten . . . . 5.4.4 Erstellen der News-Seite . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

Toni Bolduan

IV

Inhaltsverzeichnis 5.5

Fachhochschule Schmalkalden SS 2011 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 30 31 38 42 42 42 43 43 44 46

5.6

Schedule . . . . . . . . . . . . . . . . . . 5.5.1 Schedule Klasse . . . . . . . . . . 5.5.2 Daten-Handling . . . . . . . . . . 5.5.3 Erstellen der Schedule-Seite . . . MySchedule . . . . . . . . . . . . . . . . 5.6.1 Allgemein . . . . . . . . . . . . . 5.6.2 Datenstruktur der Events . . . . 5.6.3 LocalStorage . . . . . . . . . . . 5.6.4 Bereitstellen der Speicherfunktion 5.6.5 Eventbehandlung . . . . . . . . .

6 Resümee

7 Zukunftsaussichten 47 7.1 Funktionsumfang . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 7.2 Quellcode-Verbesserungen . . . . . . . . . . . . . . . . . . . . . . . . 47 Abbildungsverzeichnis Tabellenverzeichnis Listingverzeichnis Literaturverzeichnis A Programmvorstellung B Details zur Nutzwertanalyse C Quelltext Eidesstattliche Erklärung VI VII VIII IX XI XIV XVI XVII

Toni Bolduan

V

1 Einleitung
Diese Bachelorarbeit gliedert sich in sieben Bereiche. Zunächst wird einleitend erklärt, was Webapps sind und welchen Stellenwert diese in der heutigen Gesellschaft einnehmen. Anschließend wird das Spirit-Projekt näher erläutert, in dessen Rahmen sich die Webapp und diese Arbeit befindet. In Kapitel 2 wird erklärt, welche Aufgaben zu erfüllen sind und welche Anforderungen sich daraus ergeben. Im darauf folgenden Kapitel „Vorbetrachtungen” werden Zielplattform und Zielframework anhand wissenschaftlicher Analysen ermittelt. Kapitel 4 beschäftigt sich mit der konzeptionellen Struktur und dem Aufbau der Webapp, welche in Kapitel 5 „Implementierung” anhand ausgewählter Programmausschnitte näher erläutert werden. Abschließend wird das Programm kurz vorgestellt und ausgewertet. In Kapitel 7 werden Anregungen über das Programm und seine weitere Entwicklung gegeben.

1.1 Webapps
Der Begriff Webapp (Abkürzung für „web application") bedeutet nichts weiter als ein Programm (Applikation), welches mittels eines Browsers von einem Webserver geladen wird und somit nicht auf einem Endgerät installiert werden muss. Generell sollte sie die Funktionalität einer nativen App enthalten. Die Webapp wird als solche wahrgenommen. Vielmehr bietet sie eine Benutzeroberfläche an, die der einer nativen Applikation in Optik, Design und Nutzbarkeit in nichts nachsteht. Sie unterscheidet sich von einer Webseite oder Webanwendung dadurch, dass sie auf Funktionen des mobilen Endgerätes zugreifen kann. Dieser Funktionsumfang ist jedoch stark eingeschränkt.

1.1.1 Vorteile und Nachteile
Der Vorteil von Webapps liegt dabei eindeutig auf der Hand. Die Anwendung kann nahezu auf jedem online-fähigen mobilen Endgerät genutzt werden. Da sie nicht vom jeweiligen Betriebssystem abhängig ist, muss die Webapp nicht installiert werden. Sie läuft im Browser des Endgerätes ab. Dem vermeintlichen Nachteil der Browserabhängigkeit wird stetig seitens der Browserhersteller entgegengewirkt, indem versucht wird, vorgegebene Standards, etwa denen des W3C-Konsortiums, einzuhalten. Ein weiterer Vorteil ist der geringe Speicherverbrauch. Das Fehlen der Installation auf

Toni Bolduan

Seite 1 von 47

1. Einleitung

Fachhochschule Schmalkalden SS 2011

dem Endgerät senkt die Belastung des vorhandenen Speichers. Eine Webapp verbraucht nur solange temporären Speicherplatz, bis sie durch Beenden des Browsers diesen wieder freigibt. Weitere Einsparungen können durch das Cachen statischer Webseiteninhalte, wie etwa Bilder, gemacht werden. Webapps besitzen aber dennoch Nachteile. So erfordern sie das vorab stetige Starten des Browsers. Weiterhin ist die Darstellung der Inhalte abhängig von der im jeweiligen Browser verwendeten Layout-Engine. Es kann dadurch zu Abweichungen in der Darstellung kommen.

1.1.2 Fazit
Webapps bieten die Möglichkeit Anwendungen plattformunabhängig auf nahezu jedem mobilen Endgerät anzubieten. Dabei muss auf den eingeschränkten Funktionsumfang geachtet werden. Im Rahmen dieser Bachelorarbeit wird überprüft ob die Umsetzung der Kernkomponenten der Spirit-Plattform anhand einer prototypischen Anwendung möglich ist.

1.2 Spirit
Das Projekt Spirit ist ein an der Fakultät Informatik der FH-Schmalkalden gestartetes Studentenprojekt, das sich mit der Entwicklung eines Informationsportales beschäftigt. Unter Leitung von Professor Dr. Oliver Braun arbeiten Studenten aus verschiedenen Studiengängen und -graden an der Entwicklung dieses Projektes.

Ziele des Projektes Ziel des Projekts ist die Neuimplementierung des bestehenden Informationsportals. Damit einhergehend erfolgt die sukzessive Ablösung der bestehenden Plattform. Deshalb wird die vorhandene Plattform zunächst in die Neuimplementierung migriert, um den reibungslosen Ablauf weiterhin zu garantieren. Anschließend soll Spirit das derzeitige Informationsportal ablösen. Das Informationsportal Spirit wird als Cloud-Service entwickelt, um eine breite Masse an Endgeräten bedienen zu können und somit unabhängig von Gerät und Plattform zu sein. Dazu wurde das Projekt in kleinere Teilbereiche untergliedert, deren Funktionen im Folgenden kurz erklärt werden sollen.

Toni Bolduan

Seite 2 von 47

1. Einleitung

Fachhochschule Schmalkalden SS 2011

1.2.1 Teilbereiche
Core Dieser Bereich des Spirit-Projektes befasst sich mit der Entwicklung des zur Erstellung der Stundenpläne notwendigen Kernsystems. Core wurde im Rahmen eines Praktikums in Haskell entwickelt.

News News ist das derzeitig verwendete Informationsportal für Studierende und wurde in Lift/Scala entwickelt.

StudWeb Mit Hilfe der Skriptsprache PHP und des Frameworks Zend wird im Rahmen einer Masterarbeit an einer neuen Entwicklung der Informationsplattform gearbeitet.

EmployeeWeb EmployeeWeb ist eine in Lift/Scala entwickelte Web-Applikation für Dozenten, mit der sie Informationen, welche die Studenten betreffen, in Spirit einstellen können.

PlanningWeb PlanningWeb ist eine ebenfalls in Lift/Scala implementierte Web-Applikation, die es sich zur Aufgabe macht mit Informationen, welche für die Stundenplanung notwendig sind, in Spirit eingestellt werden können.

Data Neben Core ist der Bereich Data einer der Wichtigsten. Er befasst sich mit der Datenhaltung, der für Stundenpläne, News und weiterer Informationen notwendigen Ressourcen. Das Ziel dieses Teilprojekts ist die zentrale Datenhaltung aller Ressourcen und das Bereitstellen von Diensten und Schnittstellen, um auf diese Daten zuzugreifen.

Toni Bolduan

Seite 3 von 47

1. Einleitung Mobile

Fachhochschule Schmalkalden SS 2011

Im Bereich Mobile werden Anwendungen (Apps) für Mobile Endgeräte entwickelt. Neben den bestehenden Anwendungen für die Betriebssysteme Android und Windows Phone 7, finden derzeit in diesem Teilbereich weitere Entwicklungen, wie die Spirit-App für iOS und eine Webapp-Alternative für mobile Browser statt.

Migrate Ziel von Migrate ist es die bestehende Informationsplattform sukzessive in das SpiritInformationsportal zu integrieren. Dazu wird momentan eine Schnittstelle entwickelt, um die mit dem herkömmlichen Tool erstellten Stundenplandaten für Spirit aufzubereiten und über einen Dienst in die Datenbank einzupflegen.

1.2.2 Eingliederung dieser Arbeit
Diese Bachelorarbeit ist im Bereich Mobile des Spirit-Projektes angesiedelt. Mit dem Fokus auf Plattform- und Geräteunabhängigkeit soll diese Arbeit einen Weg zeigen, möglichst viele Studenten, Mitarbeiter und Professoren erreichen zu können, ohne dabei an Gerätespezifikationen zu hängen. Weiterhin erweitert diese Arbeit den Bereich Mobile des Spirit-Projektes und versucht das bestehende Portfolio aus plattformabhängigen Applikationen um den Faktor Geräteunabhängigkeit zu erweitern bzw. zu vervollständigen.

Toni Bolduan

Seite 4 von 47

2 Aufgaben und Anforderungen
Im Folgenden werden alle Aufgaben und Anforderungen aufgelistet, die an das Programm gestellt werden.

2.1 Aufgaben
• Bereitstellung einer geräteunabhängigen Applikation, die es ermöglicht, den im Projekt Spirit etablierten Studweb-Funktionsteil abzudecken. – Bereitstellung der News – Bereitstellung des Stundenplans

• Entwicklung eines einfachen und leicht zu bedienenden Nutzerinterfaces. – Erstellung eines Designs in Anlehnung an bestehende Apps – Erstellung eines einfachen Bedienkonzepts • Erweitern des Funktionsumfangs der Stundenplanung – Etablieren einer Möglichkeit personalisierte Stundenpläne zu erstellen – Etablieren einer Möglichkeit personalisierte Stundenpläne anzuzeigen

2.2 Anforderungen
Aus den Aufgaben ergeben sich eine Reihe von Anforderungen, die an das Programm und deren Entwicklung gestellt werden. Diese werden im Folgenden kurz beschrieben.

Toni Bolduan

Seite 5 von 47

2. Aufgaben und Anforderungen Entwicklungsplattform

Fachhochschule Schmalkalden SS 2011

Es muss eine geeignete Plattform gefunden werden, mit der die Anwendung entwickelt werden kann. Weiterhin muss eine Plattform gewählt werden, auf der die Applikation laufen soll. Dazu sollen Analysen durchgeführt werden, um die möglichst beste Plattform zu ermitteln.

Performance Die Applikation muss eine gewisse Bedienungsgeschwindigkeit erfüllen. Lange Wartezeiten, sowie ruckelnde Animationen sollen vermieden werden.

Useability-Konzept Weiterhin muss ein Konzept entwickelt werden, wie die Anwendung am Besten zu bedienen ist.

Integration Um die Applikation in das bestehende Spirit-Projekt bestmöglichst zu integrieren, soll darauf geachtet werden bereits definierte Standards einzuhalten und vorhandenen optische Komponenten zu benutzen.

Verständlichkeit Die Applikation soll unter Verwendung von Design, optischer Komponenten und eines Bedienkonzept selbsterklärend funktionieren. Der Nutzer soll einfach erkennen können, um welche Funktionalitäten und Art der Bedienung es sich handelt.

Toni Bolduan

Seite 6 von 47

3 Vorbetrachtungen
In dem Kapitel Vorbetrachtungen wird untersucht welche Voraussetzungen die Webapp an die Browser stellt und welche Technologien für die Entwicklung der Webapp benötigt werden. Dazu wird mit Hilfe von wissenschaftlichen Analysen zunächst eine Auswahl an zu unterstützenden Browsern gefunden und anschließend ein geeignetes Framework zur Entwicklung der Webapp herausgestellt.

3.1 Plattform
Die Webapp ist nur bedingt einer Plattform zuzuordnen. Die grobe Angabe ist hierbei der Browser eines mobilen Endgerätes, da die Webapp in diesem ausgeführt wird. Die Webapp soll versuchen, zu einem gewissen Teil Plattformunabhängigkeit anzustreben. Hierbei wird im Allgemeinen nur ein Browser benötigt und im Speziellen eine Auswahl von Browsern.

3.1.1 Marktanteile
Die Wahl der Browser, für welche die Webapp entwickelt werden soll, wird anhand ihres Martkanteils gemessen. Zunächst wird das Nutzungsverhalten der User im Desktop-, sowie im Mobile-Segment analysiert. Daraufhin wird erklärt, warum welche Browser als Zielbrowser in Frage kommen. Die Marktforscher von NetMarketShare untersuchen monatlich unter Anderem die Nutzung von Mobile- und DesktopBrowsern und stellen diese nach kostenloser Anmeldung zum Anschauen zur Verfügung. So ergibt sich laut NetMarketShare für Dezember 2011 der Desktop-Plattform folgende Marktverteilung. Monat Dezember 2011 Internet Explorer 52,64 Firefox 22,14 Google Chrome 18,18 Safari 5 Opera 1,55

Tabelle 3.1: Marktanteile der Desktop-Browser [Shaa] Die verwendeten Browser im Desktop-Segment unterscheiden sich erheblich von denen im mobilen Segment. Deutlich macht das folgende Statistik von NetMarketShare, (ebenfalls vom Dezember 2011).

Toni Bolduan

Seite 7 von 47

3. Vorbetrachtungen Monat Dezember 2011 Safari 53.30 Opera 21.66

Fachhochschule Schmalkalden SS 2011 Android Browser 15.87 Symbian 3.33 BlackBerry 3.05

Tabelle 3.2: Marktanteile der Mobile-Browser [Shab] Während unter Desktop-Browsern der Internet Explorer unangefochten an der Spitze steht, nimmt im mobilen Segment der Browser Safari von Apple diese Position ein. Der Internet Explorer hat, auf Grund geringer Verbreitung von Windows Mobile Phone-Geräten, unter mobilen Endgeräten so gut wie keinerlei Verbreitung. Aktuell befindet sich Operas Mini auf Platz 2 mit 21,65 Prozent, dicht gefolgt vom Standardbrowser des Android-Betriebssystems. Um einen genauen Überblick über die Browsermarktentwicklung zu erhalten und damit eine genaue Entscheidung zur Wahl der zu unterstützenden Browser zu treffen ist es wichtig den Trend zu beobachten. Dazu wurden alle von den Marktforschern von NetMarketShare erhobenen Browsermarktverteilungen im Zeitraum von Dezember 2010 bis Dezember 2011 zusammengestellt und in folgender Übersicht dargestellt. Marktanteile der mobilen Browser von Dez. 2010 bis Dez. 2011 [Shac] Zunächst lässt Monat Dez 2010 Jan 2011 Feb 2011 Mär 2011 Apr 2011 Mai 2011 Jun 2011 Jul 2011 Aug 2011 Sep 2011 Okt 2011 Nov 2011 Dez 2011 Safari 49,17% 54,03% 46,55% 47,83% 50,56% 49,80% 52,36% 54,50% 52,99% 55,59% 62,03% 55,03% 53,30% Opera 26,49% 21,42% 26,81% 25,02% 22,90% 24,03% 22,40% 20,27% 20,77% 18,92% 13,09% 20,09% 21,66% Android Browser 11,50% 12,74% 13,43% 14,14% 14,74% 15,76% 14,20% 14,40% 15,73% 16,03% 18,60% 16,36% 15,87% Symbian 7,49% 6,89% 8,28% 7,92% 7,06% 5,98% 6,50% 6,11% 5,83% 4,70% 2,55% 3,03% 3,33% BlackBerry 2,90% 2,59% 2,62% 2,87% 2,84% 2,83% 2,90% 3,06% 2,90% 2,68% 2,03% 2,76% 3,05% Andere 2,45% 2.33% 2,31% 2,22% 1,90% 1,60% 1,64% 1,66% 1,78% 2,07% 1,69% 2,73% 2,79%

Tabelle 3.3: Marktanteile der mobilen Browser von Dez. 2010 bis Dez. 2011 [Shac] sich erkennen, dass sich Apples Browser Safari stabil zwischen 50 % und 55 % hält. Hier ist nur ein leichtes Wachstum zu erkennen. Im Gegensatz dazu verlieren Operas Mini und Symbian konsequent Marktanteile, und zwar an den Standardbrowser des Betriebssystem Android von Google. Der BlackBerry-Browser fristet ein Nischendasein bei annähernd gleichbleibendem Marktanteil von 3%. Gut erkennen lässt sich dies an folgender Grafik.

Toni Bolduan

Seite 8 von 47

3. Vorbetrachtungen

Fachhochschule Schmalkalden SS 2011

Marktanteile der mobilen Browser
von Dezember 2010 bis Dezember 2011
70

60

50

Marktanteil in Prozent (%)

40

Safari Opera Mini Android Brow ser Symbian BlackBerry

30

20

10

0 Dez 2010 Jan 2011 Feb 2011 Mrz 2011 Apr 2011 Mai 2011 Jun 2011 Jul 2011 Aug 2011 Sep 2011 Okt 2011 Nov 2011 Dez 2011

Monate

Abbildung 3.1: Marktanteile der Mobilen Browser im Jahr 2011

3.1.2 Browserengines
Ein weiteres Prüfkriterium ist die Umsetzbarkeit der Anforderungen in den jeweiligen Browsern. Dazu werden nachfolgend alle Browserengines auf ihre HTML5-, CSS3- und Javascript-Funktionalitäten überprüft. Welcher Browser welche Engine benutzt soll folgend gezeigt werden. WebKit 5xx Safari, Android, Symbian, Blackberry Gecko 9.0.1 FF Mobile Presto 2.5.24 Opera Mini Trident 5.0 IE Mobile 9

Tabelle 3.4: Browser mit dazugehörigen Browserengines

HTML5- und Javascript-Support Im diesem Gebiet werden Elemente aus drei Bereichen auf ihre Unterstützung seitens der browserunterliegenden Rendering- und Layout-Engines untersucht. Diese sind zum Einen spezielle neu eingeführte HTML-Tags und zum Anderen geforderte Spezifikationen, sowie eine API zur Ansteuerung von DOM-Elementen. Diese Elemente werden für die Umsetzung bzw. für eventuell spätere Anpassungen benötigt und garantieren auch zukünftig die Unterstützung seitens der Browser.

Toni Bolduan

Seite 9 von 47

3. Vorbetrachtungen

Fachhochschule Schmalkalden SS 2011 Gecko 2.0 2.0 2.0 2.0 2.0 1.9.1 1.9.1 1.9 Trident 5.0 5.0 5.0 5.0 5.0 No 4.0 5.0

Tag WebKit Presto <footer> 533 2.7.70 <section> 533 2.7.70 <header> 533 2.7.70 <form> 533 2.7.70 <nav> 533 2.7.70 Spezifikation Offline Web Yes 2.6 Applications Web Storage 525 2.2 APIs getElementsByClassName 525 2.1

Tabelle 3.5: Unterstützung benötigter HTML Komponenten [Wik12] CSS3-Support Neben der Unterstützung von HTML5 ist die Unterstützung einiger CSS3-Komponenten seitens der Browser zu beachten. Für unter Anderem Gestaltung und Positionierung von DOM-Elementen werden einige spezielle CSS3-Selektoren, wie z.B.: :nth-child, :root oder :empty für strukturelle Pseudoklassen benötigt. Alle oben aufgeführten Browser unterstützen diese Selektoren.

Zusammenfassung Die oben aufgeführten Tabellen zeigen, dass nicht alle Browser für die Umsetzung der Webapp in Frage kommen. So fehlt beispielsweise dem aktuellen Opera Mini Browser(Presto 2.5) die Unterstützung für die benötigten HTML-Tags, oder dem Internet Explorer Mobile 8 die Möglichkeit auf den DOM-Storage zuzugreifen. Diese unterstützen erst in den kommenden Versionen oder diversen, bereits verfügbaren Nightly-Builds, die für die Webapp benötigten Komponenten.

3.2 Framework
Ein Framework ist ein in der Softwaretechnik verwendetes Programmiergerüst. Es wird als Skelett einer Applikation verstanden, mit dessen Hilfe Entwicklern bestehende Programmierkonstrukte und Funktionalitäten in vereinfachter Weise zugänglich gemacht wird. [GHJV94]

Weiterhin kann man Frameworks als zusätzliche Vermittlungsschicht zwischen eigentlicher Programmiersprache und Entwickler verstehen. Ein Framework selbst be-

Toni Bolduan

Seite 10 von 47

3. Vorbetrachtungen

Fachhochschule Schmalkalden SS 2011

steht aus Programmdateien, welche in derselben Sprache wie das eigentliche Programm verfasst wurden. Das heißt, dass die im Rahmen dieser Bachelorarbeit aufgezeigten JavaScript-Frameworks ebenfalls in JavaScript geschrieben wurden.

Vor- und Nachteile von JavaScript-Frameworks Das Verwenden von JavaScript-Frameworks bringt sowohl Vorteile als auch Nachteile mit sich. Diese sollen kurz gegenübergestellt werden. Der wahrscheinlich größte Vorteil der Verwendung von JavaScript-Frameworks ist die Möglichkeit Elemente des DOM-Baumes einfach manipulieren zu können. Frameworks ermöglichen es ohne großen Programmieraufwand Elemente des DOMBaumes anzusprechen, sie zu entfernen oder Eigenschaften wie Attribute zu ändern. Sie dynamisieren den Zugriff. Dabei kommt ein weiterer Vorteil zum Tragen. JavaScript-Frameworks überbrücken Unterschiede zwischen Browsern und ermöglichen eine einheitliche DOM-Manipulation bzw. ein einheitliches Event-Handling, was die Entwicklung der Webapp begünstigt. Entscheidende Nachteile von Frameworks ergeben sich aus deren Vorteilen. Durch die Verfügbarkeit einfacherer und übersichtlicherer Klassen und Funktionen werden interne Vorgänge verdeckt, manchmal ist es aber unabdingbar interne Vorgänge zu kennen. Weiterhin ist durch die Vorschriften, die das Framework vorgibt ein Arbeiten nur innerhalb dieser Anweisungen möglich. Es entsteht zusätzlicher Lernaufwand, die Funktionsweisen des Frameworks zu verstehen, was zu Zeitproblemen führen kann.

3.2.1 Vorstellung der JavaScript-Frameworks
In diesem Kapitel sollen die bekanntesten freien JavaScript-Frameworks kurz vorgestellt und im Anschluss anhand ausgewählter Kriterien entsprechend der gestellten Anforderungen ausgewählt werden.

Prototype Prototype ist ein unter der MIT-Lizenz veröffentlichtes, freies und objektorientiertes JavaScript-Framework, dessen vorrangiges Ziel es ist dynamische Web-Applikationen einfach zu entwickeln. Das Framework wurde 2005 von Sam Stephenson entwickelt und bietet Klassenbibliotheken, Unterstützung für AJAX1 , sowie einfache DOMManipulation.[Ste]

AJAX ist ein Akronym für Asynchronous JavaScript and XML und beschreibt ein Konzept zur asynchronen Datenübertragung zwischen Browser und einem Server. [Kyr]

1

Toni Bolduan

Seite 11 von 47

3. Vorbetrachtungen MooTools

Fachhochschule Schmalkalden SS 2011

Das freie Framework Mootools ist ein ebenfalls unter der MIT-Lizenz veröffentlichtes, kompaktes und modular aufgebautes JavaScript-Framework. Neben der Kompaktheit und Erweiterbarkeit steht hier Objektorientierung, sowie eine klar ausdokumentierte API zur Verfügung.[New08]

jQuery Das von John Resig 2006 entwickelte freie JavaScript-Framework jQuery ist wohl das bekannteste und am weit verbreitetste unter den verfügbaren Frameworks. Neben einer sehr guten Dokumentation, zahlreichen Tutorials und Demos zeichnet es sich vor Allem durch seine leicht verständliche Anwendung und durch Browserkompatibilität aus. Ein Plugin-System zur Erstellung eigener jQuery-Erweiterungen rundet das Angebot ab. [VB11]

ExtJS Ein weiteres bekanntes JavaScript-Framework ist ExtJS. Der Fokus des Frameworks liegt, dank AJAX-Unterstützung, auf der Entwicklung interaktiver Webanwendungen. Dazu bietet ExtJS eine Sammlung von verschiedenen Formularelementen, wie z.B. Registerkarten-Darstellung oder Kontextmenüs im Stile des DesktopBetriebssystems.[SMCW]

Google Web Toolkit Google Web Toolkit(GWT) ist ein Entwicklungs-Toolkit, welches entwickelt wurde um komplexe browserbasierte Web-Applikationen entwickeln zu können. Es bietet umfangreiche Bibliotheken zur Entwicklung von high-performance Web-Programmen. Google bietet dieses Toolkit unter der freien Lizenz ALS an. [Inc]

3.2.2 Wahl des Frameworks
Um ein geeignetes Framework zur Entwicklung der Webapp zu finden wird dieses auf folgende Kriterien hin überprüft: • Browserkompatibilität • Komplexität/Verständlichkeit/Dokumentation • Größe des Frameworks

Toni Bolduan

Seite 12 von 47

3. Vorbetrachtungen • Geschwindigkeit • Funktionsumfang • Unterstützung für mobile Geräte

Fachhochschule Schmalkalden SS 2011

Die Gewichtung der Kriterien wurde nach Einschätzung der Notwendigkeit für die Webapp durch den Autor gewählt. Weiterhin basiert die Einschätzung der Frameworks auf den Kriterien der Frameworks in aktueller, sowie in entwicklungsgeschichtlicher Hinsicht. Gewicht 4 4 2 3 5 3 21 MooTools 7 5 5 3 6 2 28 20 10 9 30 6 103 Prototype 8 3 5 5 5 0 32 12 10 15 25 0 94

Kriterium Browserkompatibilität Komplexität Größe des Frameworks Geschwindigkeit Funktionsumfang Mobile Support Gesamt

jQuery 8 4 4 4 9 2 32 32 8 12 45 6 119

ExtJS 7 4 4 3 7 1 28 16 8 9 35 3 99

GWT 7 3 0 3 7 2 28 12 0 9 35 6 90

Tabelle 3.6: Nutzwertanalyse von Frameworks (siehe Anhang B)

3.3 Ergebnis
Aus der Tabelle 3.3 geht hervor, dass sich Safari, Opera, Android und BlackBerry vorrangig den Markt für mobile Browser teilen. Seit 2010 wurde die Entwicklung für Symbian eingestellt, daher ist damit zu rechnen, dass es zukünftig vom Markt verschwinden wird. Daraus ergibt sich, dass die Webapp auf den zuerst genannten Browsern garantiert funktionsfähig sein muss. Aus den ausgewählten Browsern gehen die zu unterstützenden Browser- bzw. LayoutEngines hervor; siehe Tabelle 3.4. Um eine möglichst hohe Abdeckung des Browsermarktes zu gewährleisten, werden auch Browser-Engines aus dem Bereich der Anderen berücksichtigt. Anhand der Tabelle 3.5 lässt sich erkennen, dass die dem Internet Explorer - Mobile Browser zugrundeliegende Browser-Engine Trident die Spezifikation Offline Web Applications nicht erfüllt und somit ausscheidet. Weiterhin ist zu erkennen, dass die

Toni Bolduan

Seite 13 von 47

3. Vorbetrachtungen

Fachhochschule Schmalkalden SS 2011

Gecko-Engine die Voraussetzungen erfüllt und somit in die engere Auswahl aufgenommen wird. Die Punkteverteilung in Tabelle 3.6 zeigt eindeutig, dass die Frameworks jQuery und MooTools bei den gewichtigsten Kriterien am Besten abschneiden. Die Wahl des Autors fällt letzten Endes auf jQuery, da dieses die meisten Punkte erzielt und dank Plugin-System den größten Funktionsumfang besitzt.

Toni Bolduan

Seite 14 von 47

4 Struktur der Software
Dieses Kapitel soll zunächst einen Überblick über die Komponenten der Software und die grafische Benutzeroberfläche der Webapp geben und anschließend verdeutlichen, welche Komponenten in welcher Weise miteinander agieren. Dabei wird unter Anderem auf die Seitenaufteilung, die Menüführung, Design-Definitionen und strukturelle Merkmale eingegangen, sowie der Ablauf der Software beschrieben.

4.1 Grafische Benutzeroberfläche
Die wichtigste Komponente neben den Kernfunktionalitäten bildet die grafische Benutzeroberfläche (engl.: Graphical User Interface), kurz GUI. Sie ist ein integraler Bestandteil der Webapp, denn mit ihr wird dem Nutzer die Möglichkeit gegeben mit der Webapp zu interagieren. Im Bereich von Webapps besitzen GUIs einen besonderen Aspekt, da sie das Hauptaugenmerk der Software sind. Die Struktur und das Design der GUI soll im Folgenden beschrieben werden.

4.1.1 Konzept
Das Hauptmenü der Webapp besteht aus einzelnen Untermenüpunkten zu den jeweiligen Funktionalitäten der Webapp (siehe Abbildung 4.1). Je nach Menge der Funktionalitäten erweitert sich das Menü nach unten hin. Diese sind dann durch Wischen bzw. Scrollen erreichbar. Ein Scrollbalken soll nicht eingeblendet werden, da es den ohne hin schon begrenzten Viewport1 zusätzlich verkleinert. Weiterhin soll es optisch ersichtlich sein, dass mehr als die eingeblendeten Menüeinträge existieren.

Als Viewport bezeichnet man den Bereich des Browsers, in welchem die Inhalte der Webseite dargestellt werden.

1

Toni Bolduan

Seite 15 von 47

4. Struktur der Software

Fachhochschule Schmalkalden SS 2011

Abbildung 4.1: Aufbau des Hauptmenüs Gemäß dem Aufgaben- und Anforderungskatalog (siehe Kapitel 2) unterstützt die prototypische Umsetzung der Webapp drei Grundfunktionalitäten (News, Schedule, MySchedule). Mit Betreten des Untermenüs News soll der Nutzer zunächst in Form einer Liste einen Überblick über alle verfügbaren News-Einträge erhalten. Die angezeigten Informationen belaufen sich innerhalb der Übersicht auf drei Komponenten. Wie in Abbildung 4.2 zu erkennen, sind diese der betreffende Studiengang, der Autor der News und der Betreff der News. Nach einem Klick/Touch auf das entsprechende Listenelement soll der Nutzer zur Detailansicht einer News weitergeleitet werden, welche zusätzlich zu den Informationen aus der Listenübersicht noch Inhalt und das Datum der News anzeigen soll.

Abbildung 4.2: Aufbau des Untermenüpunktes News Das Untermenü Schedule soll ähnlich aufgebaut sein wie das Untermenü News. Der Nutzer soll zunächst eine Auswahl aller verfügbaren Stundenpläne zu den einzelnen

Toni Bolduan

Seite 16 von 47

4. Struktur der Software

Fachhochschule Schmalkalden SS 2011

Studiengängen erhalten, siehe Abbildung 4.3. Nach Klick/Touch auf einen Stundenplan eines Studiengangs soll dieser zu einer Detailansicht weitergeleitet werden.

Abbildung 4.3: Aufbau der Stundenplanübersicht Die Detailansicht von Schedule unterscheidet sich dahingehend von denen der News, dass diese pro Ansicht einen Tag des gewählten Stundenplans anzeigen soll. Wie in Abbildung 4.4 zu sehen, soll mittels Navigationsbuttons dem Nutzer die Möglichkeit gegeben werden zwischen den Ansichten von Beginn bis Ende der Woche zu wechseln.

Abbildung 4.4: Aufbau der Stundenplanansicht (Montag bis Freitag) Das Untermenü MySchedule soll eine Übersicht zu Veranstaltungen zeigen, die der Nutzer selbst gewählt hat. Analog zu Abbildung 4.4 soll das Untermenü MySchedule eine Tagesansicht bereitstellen, die mittels Buttons navigiert werden kann.

Toni Bolduan

Seite 17 von 47

4. Struktur der Software

Fachhochschule Schmalkalden SS 2011

4.1.2 Menüführung
Die Webapp soll eine strikte Menüführung besitzen. Mit dieser Menüführung soll ein Rahmen geschaffen werden, in welchem der Nutzer mit der Webapp interagieren kann. Wie in Abbildung 4.5 zu erkennen gelangt man über das Hauptmenü zu den einzelnen Untermenüpunkten, die nach erfolgreichem oder nicht erfolgreichem Abschließen wieder in das Hauptmenü zurückführen.

Seite aufrufen

Startseite anzeigen

Hauptmenü Anzeigen

Untermenü auswählen [Back-Button gedrückt]

[News ausgewählt]

[Schedule ausgewählt]

[MySchedule ausgewählt]

Newsübersicht anzeigen Scheduleübersicht anzeigen

Tagesansicht Anzeigen

Auswahl treffen

Aktion

Vorherige Tagesansicht

[nein] [ja] Aktion Detailansicht Anzeigen [Back-Button gedrückt] [Stundenplan ausgewählt] [Event ausgewählt] Abfrage Delete Event [Back-Button] Überprüfung [Next-Button] Nächste Tagesansicht

Tagesansicht Anzeigen

Lösche Event

[ja]

[nein]

Vorherige Tagesansicht Aktion

Nächste Tagesansicht

[nein] [ja]

Überprüfung: ist-Montag

[Back-Button] [Event ausgewählt]

[Next-Button]

Abfrage Add To My Schedule [ja]

Füge Event hinzu

[nein]

Abbildung 4.5: Aktivitätsdiagramm des regulären Anwendungsfalles

Toni Bolduan

Seite 18 von 47

4. Struktur der Software

Fachhochschule Schmalkalden SS 2011

4.2 Kernkomponenten
Um die Entwicklung der Webapp nachvollziehbar und im Hinblick auf Erweiterbarkeit modularisierbar zu gestalten wird zunächst eine Struktur der Software festgelegt. Dazu werden wiederkehrende Teile der Webapp zu Komponenten zusammengefasst.

4.2.1 Seitenaufbau
Innerhalb der Webapp folgen alle Ansichten und Seiten demselben Muster. Jede Seite wird als solche gekennzeichnet und besteht aus den drei Bestandteilen Header, Section und Footer, wobei Footer optional ist, siehe Abbildung 4.6. Im Header befinden sich die Navigationselemente, sowie eine kurze Beschreibung der jeweiligen Seite. Im Bereich Section werden die eigentlichen Seiteninhalte dargestellt.

Abbildung 4.6: Grundgerüst einer Ansicht Der Aufbau einer Seite im Detail wird in Kapitel 5.3 näher beschrieben.

4.2.2 Komponentenaufteilung
Im Webdesign gilt im Allgemeinen das Prinzip Teile und Herrsche 2 . Bei der Entwicklung der Webapp wurde dieses Prinzip umgesetzt. Somit ergeben sich drei stets wiederkehrende Komponenten für jedes unterstützte Feature: • Die Komponente Data ist für den Zugriff auf Stundenplan- und News-Daten verantwortlich. Sie stellt Javascript-Klassen und -Funktionen zur Verfügung,
2

Unter diesem Prinzip ist die Trennung von Struktur, Präsentation und Verhalten zu verstehen.

Toni Bolduan

Seite 19 von 47

4. Struktur der Software

Fachhochschule Schmalkalden SS 2011

um die Rohdaten in ein eigenes Datenformat zu überführen und dieses in der Anwendung anzubieten. • Innerhalb der Komponente Structure werden JavaScript-Klassen zur Erstellung der HTML-Struktur zur Verfügung gestellt. • Mit Presentation wird eine Komponente geschaffen, die für die Ausgestaltung der HTML-Struktur zuständig ist. Hier werden mittels CSS und JavaScript Layout und Design festgelegt.

Komposition Die Komponente Data ist die Basiskomponente. Sie besitzt keinerlei Abhängigkeiten zu anderen Komponenten. In ihr wird festgelegt, in welchem Format die Daten zur Verfügung gestellt werden. Structure dagegen benötigt zum Erstellen der HTML-Struktur des Seiteninhalts die in Kapitel 4.2.1 benötigte Grundstruktur einer Seite/Ansicht. Die Ergebnisse von Data und Structure werden von der Komponente Presentation benötigt. Sie bildet das Design zur angegeben HTML- und Datenstruktur. Das Endprodukt von Presentation umfasst die fertig ausgestalteten Seite/Ansicht eines Features, siehe Komponentendiagramm 4.7.
« Component » Webapp - Feature « Component » Structure

HTML-Page Structure

HTML-Structure « Component » Presentation

finished Page « Component » Data Data-Structure

Abbildung 4.7: Komponentendiagramm: Aufbau eines Features Eine zusammengesetzte Komponente wird als JavaScript-Datei definiert. Die dazugehörigen Komponenten Data, Structure und Presentation sind als abstrakte Ebene zu sehen und bestehen aus verschiedenen JavaScript-Klassen innerhalb dieser Datei.

Toni Bolduan

Seite 20 von 47

5 Implementierung
In diesem Kapitel werden die prototypischen Implementierungen ausgewählter Funktionalitäten unter Verwendung der in Kapitel 3 und 4 gewonnenen Erkenntnisse beschrieben. Das Kapitel gliedert sich in vier Abschnitte. Zunächst wird auf den allgemeinen Aufbau einer Seite/Ansicht eingegangen. Daraufhin folgen die Implementierungen der einzelnen Webapp-Features News, Schedule und MySchedule.

5.1 Allgemein
Bevor näher auf die Implementierung der Webapp eingegangen wird müssen zunächst einige besondere Merkmale bedacht werden. Der Autor legt im Zuge des Prinzips Teile und Herrsche Wert auf unobtrusive JavaScript 1 . Damit soll Übersichtlichkeit und eine verbesserte Lesbarkeit des Quelltextes entstehen. Dazu werden die Webapp-Features in eigene JavaScript-Dateien ausgelagert, welche im Kopfteil der index.html eingebunden werden müssen. Das Zusammenführen der WebappFeatures wird ebenfalls im Kopfbereich der Datei index.html durchgeführt. Weiterhin ergeben sich aus der Wahl des Frameworks jQuery auf Grund des PluginSystems neue Möglichkeiten. Dazu zählen unter Anderem die Unterstützung für mobile Endgeräte durch das jQuery-Plugin jQuery Mobile, kurz jQM, welches innerhalb der Entwicklung Verwendung findet. Dies äußert sich durch die Verwendung plugineigener HTML-Tags und Attribute, zum Beispiel zur Strukturierung von WebappAnsichten oder für vereinfachte Darstellungen von Inhalten, wie Texten, Bildern oder Tabellen.

5.2 Seitenansicht
Die Ansicht einer Seite setzt sich aus den Bestandteilen Header, Content und Footer zusammen, wovon einige als optional zu betrachten sind. Die Grundstruktur einer jeden Seite bildet ein HTML-Gerüst, dass im Body-Tag der HTML-Seite eingefügt werden muss.

1

Unter unobtrusive JavaScript versteht man die Trennung von HTML und JavaScript.

Toni Bolduan

Seite 21 von 47

5. Implementierung

Fachhochschule Schmalkalden SS 2011

1 < section id = " p1 " data - role = " page " ... > 2 3 < header data - role = " header " ... > 4 <h1 class = " ui - title ... " > SpiritMobile </ h1 > 5 <a class = " button ... " href = " # " > </a > 6 <a class = " button ... " href = " # " > </a > 7 </ header > 8 9 < section data - role = " content " ... > 10 Content 11 </ section > 12 13 < footer > 14 Additional 15 </ footer 16 17 </ section > Listing 5.1: HTML-Struktur einer Seite Den Beginn einer Seite markiert der HTML5-Tag <section>, gefolgt von dem Attribut data-role=”page”. Hiermit wird klargestellt, dass es sich um eine neue Seitenansicht handelt. Der Inhalt einer Seite ist durch die beiden HTML5-Tags <header> und <section>, sowie deren Attribute data-role=”header” und data-role=”content” gekennzeichnet. Wie im Listing 5.1 zu erkennen ist besitzt der Header weitere Elemente. Dabei handelt es sich um die Überschrift der Seite <h1> und die beiden Navigationselemente, welche über ihr Attribut class=”button” auf eine Schaltfläche verweisen. Mit href wird das Ziel der Schaltflächen angegeben. Die Buttons, sowie Footer sind hierbei optionale Elemente. Das Attribut data-role ist ein jQM-eigenes Attribut und gibt die Rolle des Elementes vor.

5.3 Menü
Im Content-Bereich des oben erklärten Seitenaufbaus nehmen die Seiteninhalte normalerweise die volle Breite des Bildschirms ein. Auf der Menüseite ist dies jedoch anders. Um die einzelnen Menüeinträge übersichtlich darzustellen und zentral anzuordnen, wird anstelle von HTML-Tabellen das Layoutraster von jQM verwendet. Das Raster wird über CSS-Klassen mit dem Namen ui-grid-* definiert. Als Werte werden hier Buchstaben von a bis d eingetragen, die stellvertretend für die Spaltenanzahlen 2 bis 5 stehen. Jedes Rasterelement ist ein, durch eine eindeutige ID gekennzeichneter Bereich, der einen Link zu einer Seitenansicht enthält, welcher wiederum durch ein Icon dargestellt wird. Die Spaltenposition wird mit der Klasse ui-block-* angegeben. Analog zur Angabe der Spaltenbreite wird die Spaltenposition durch die Endbuchstaben a und b, stellvertretend für die Positionen 1 und 2, im

Toni Bolduan

Seite 22 von 47

5. Implementierung Raster festgelegt.

Fachhochschule Schmalkalden SS 2011

1 < center > 2 < section id = " panel " class = " ui - grid - a " > 3 < section class = " ui - block - a " id = " menuitem_news " > 4 <a href = " # p2 " > 5 < img src = " images / menu_news_bs1 . png " / > 6 </a > 7 </ section > 8 < section class = " ui - block - b " id = " menuitem_schedule " > 9 <a href = " # p3 " > 10 < img src = " images / menu_timetable_bs1 . png " / > 11 </a > 12 </ section > 13 < section class = " ui - block - a " id = " menuitem_myschedule " > 14 <a href = " # localSchedule - Montag " > 15 < img src = " images / menu_mytimetable_bs . png " / > 16 </a > 17 </ section > 18 < section class = " ui - block - b " id = " menuitem_settings " > 19 < img src = " images / menu_settings . png " / > 20 </ section > 21 < section class = " ui - block - a " > 22 <a href = " # p6 " > 23 < img src = " images / menu_about . png " / > 24 </a > 25 </ section > 26 </ section > 27 </ center > Listing 5.2: HTML-Struktur des Menüs / Auszug aus index.html Das Menü besitzt fünf Menüeinträge. Diese sind, wie bereits in Listing 5.2 durch ihre IDs und Quellenangaben der Bilder zu erkennen: News, Schedule, MySchedule, Settings und About.

5.4 News
Die Umsetzung der News-Komponente folgt dem in Kapitel 4.2.2 beschriebenen Komponentenmuster. Zunächst soll beschrieben werden, wie die News-Klasse der News-Komponente aufgebaut ist und welche Besonderheiten durch die Verwendung von JavaScript auftreten und dementsprechend beachtet werden müssen. Im Anschluss werden die Teilkomponenten Data, Structure und Presentation anhand ausgewählter Funktionen und Methoden der News-Klasse beschrieben.

Toni Bolduan

Seite 23 von 47

5. Implementierung

Fachhochschule Schmalkalden SS 2011

5.4.1 News Klasse
Die News-Klasse als solche besitzt keine eigene Definition. Objekte der News-Klasse werden mit Hilfe der sogenannten Fabrikmethode2 erstellt.
1 var News = function () { 2 3 var tmp_news_set = new news_set () ; 4 return { 5 ... 6 } 7 }

Listing 5.3: Fabrikmethode zur Erzeugung von Objekten der Newsklasse Dadurch ist es möglich die Attribute der Klasse als private zu kennzeichnen, im Falle der News-Klasse ist es das Attribut tmp_news_set. Da in JavaScript jede Variable vom Typ Object ist und Funktionen auch in Variablen abgelegt werden können, können auch Funktionsobjekte erstellt werden (siehe Listing 5.3). Durch Aufrufen der Generatorfunktion wird ein Objekt zurückgegeben, das nach dem Klassendiagramm aus Abbildung 5.1 aufgebaut ist.

« Class » News Component::News - tmp_news_set: news_set + getValueFromKey(key: String, news_number: Integer): String + createNewsPage(news_id: Integer): void + showNewsOnElement(Elem: Object): void + getNews(): news_set + loadNews(): void + checkNews(): void

Abbildung 5.1: Klassendiagramm der News-Klasse

Die News-Klasse bietet einige Methoden zum Umgang mit Nachrichten an. Dazu zählen das Laden von News, das Erstellen der News-Seite, sowie das Füllen der Seitenstruktur mit Inhalt.
Bei der Fabrikmethode handelt es sich um ein Entwurfsmuster aus dem Bereich der Softwareenticklung, das beschreibt, wie ein Objekt durch Aufruf einer Methode anstatt durch den direkten Aufruf des Konstruktors erzeugt wird.[GHJV94]
2

Toni Bolduan

Seite 24 von 47

5. Implementierung

Fachhochschule Schmalkalden SS 2011

5.4.2 Datenformat der News-Daten
Das für Datenhaltung und -übertragung verwendete Datenformat ist JavaScript Object Notation, kurz JSON. Der REST-Service aus dem Spirit-Bereich Data bietet die Daten aller News im JSON-Format an, das heißt Informationen werden immer mit Schlüsselwertpaaren nach dem Muster „Schlüssel: Wert” angegeben, wobei der Schlüssel immer ein String sein muss, der Wert jedoch sowohl vom Typ String, als auch vom Typ Array oder Object sein kann. Wie in Listing 5.4 zu erkennen, gibt es eine Besonderheit im Datenformat der News. Sie besteht aus reinen String-Paaren.
1 [ 2 ... 3 { 4 " semester " : " MAI1 MAI3 " , 5 " name " : " polster " , 6 " subject " : "E - Government " , 7 " writer " : " Prof . Dr . Polster " , 8 " lifecycle " : " 13.03.2012 " , 9 " nr " : " 617 " , 10 " _id " : "4 f38ea9ee4b0b9e69258011b ", 11 " date " : " Mon , 13 Feb 2012 11:49:02 +0100 " , 12 " news " : " Die aktuellen Pr ü fungsergebnisse stehen in meinem PUB - Verzeichnis " 13 }, 14 ... 15 ]

Listing 5.4: Auszug aus http://spirit.fh-schmalkalden.de/rest/1.0/news Dies hat entscheidende Vorteile bei der Verarbeitung eben dieser Daten, was im folgenden Kapitel näher erklärt wird. Der REST-Service bietet die Daten nur im Gesamten an, folglich ist es nicht möglich einzelne News durch einen einzelnen Aufruf zu erhalten. Zwar hat dies performancetechnische Nachteile, jedoch ermöglicht es der Webapp alle Daten „in einem Zug” abzuarbeiten. Da es sich bei den Daten um Zeichenketten handelt ist die Gesamtgröße der zu übertragenden Daten relativ gering. Sie befindet sich im zweistelligen Kilobyte-Bereich und behindert auch auf langsameren Geräten nur bedingt die Übertragung. Die Inhalte der Daten einer News sind aus Listing 5.4 zu entnehmen. Sie sind selbsterklärend und bedürfen keiner genaueren Erläuterung. Neben dem offiziellen Datenformat der News vom REST-Service gibt es ein weiteres webapp-eigenes Datenformat, dass dem JSON-Format ähnelt. Der Grund für die Nutzung eines eigenen, weiteren Datenformats wird in Kapitel 5.5.2 näher erläutert. Dieses Datenformat ist eine strukturelle Nachbildung des JSON-Formates in JavaScript. Dazu existieren die drei Klassen Datapair, Single_News und News_Set. Nachfolgend wird erklärt wie diese aufgebaut sind. Alle Klassen besitzen Attribute und Get-Methoden, um auf diese zuzugreifen.

Toni Bolduan

Seite 25 von 47

5. Implementierung

Fachhochschule Schmalkalden SS 2011

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 32 33 34 35 36 37 38 39 40 41

function datapair (k , v ) { this . key = k ; this . val = v ; this . getKey = function () { return this . key ; }; this . getValue = function () { return this . val ; }; }; function single_news ( id ) { this . datapairs = []; this . news_id ; this . addDataPair = function ( datapair ) { this . datapairs . push ( datapair ) ; }; this . getDataPairs = function () { return this . datapairs ; }; this . getNewsID = function () { return this . news_id ; }; }; function news_set () { this . news = []; this . addSingleNews = function ( single_news ) { this . news . push ( single_news ) ; }; this . getNews = function () { return this . news ; }; };

Listing 5.5: Datenklassen des Datenformats

Toni Bolduan

Seite 26 von 47

5. Implementierung

Fachhochschule Schmalkalden SS 2011

5.4.3 Bereitstellen der Daten
Die News-Klasse bietet zum Laden der News-Daten im JSON-Format die Methode loadNews() an. Dazu wird die jQuery-Funktion getJSON genutzt. Diese stellt eine AJAX-Verbindung zur JSON-Quelle her und speichert die Daten in einem jQueryObjekt ab. Die Daten werden innerhalb der Methode in das vorher genannte Format überführt.
1 loadNews : function () { 2 3 // Get Data from JSON - Source 4 var bac = $ . getJSON ( ’ news . json ’ , function ( data ) { 5 6 var i = 0; 7 $ . each ( data , function () { 8 9 var tmp_singlenews = new single_news ( i ) ; 10 $ . each ( data [ i ] , function ( key , val ) { 11 12 // store Data in news_set variable 13 var tmp_datapair = new datapair ( key , val ) ; 14 tmp_singlenews . addDataPair ( tmp_datapair ) ; 15 }) ; 16 tmp_news_set . addSingleNews ( tmp_singlenews ) ; 17 i ++; 18 }) ; 19 }) ; 20 }

Listing 5.6: Laden der News-Daten Mit der Funktion getJSON werden die News-Daten geladen. Der Rückgabewert ist ein jQuery-Objekt. Die Besonderheit liegt hierbei auf den Parametern. Neben der Angabe zu der Quelle der Daten gibt es eine Callback-Funktion, welche beim Laden der JSON-Daten ausgeführt wird. Diese wird benutzt, um die Daten on-the-fly in das eigene Datenformat zu überführen. Weiterhin werden in der Callback-Funktion mehrere nested functions 3 verwendet. Der Funktionsparameter data in Zeile 4 repräsentiert das Datenobjekt. Mit $.each(data , function(){...}); werden die Datenelemente sequentiell abgearbeitet. Jedes Datenelement umfasst, wie in Listing 5.4 angegeben, mehrere Datenpaare. Deshalb wird für jedes JSON-Datenpaar ein Datapair-Objekt angelegt, welche die Werte für Schlüssel(Key) und Wert(Value) des JSON-Datenpaares enthalten (Zeile 13). Anschließend wird mit tmp_singlenews.addDatapair(tmp_datapair); dieses Datenpaar zu einer einzelnen News hinzugefügt. Nachdem alle Datenpaare abgespeichert wurden, wird das Objekt single_news zu dem in der News-Klasse vorhandenen Array tmp_news_set hinzugefügt.

3

Als Nested Functions bezeichnet man Funktionen, die in Funktionen eingebettet werden.

Toni Bolduan

Seite 27 von 47

5. Implementierung

Fachhochschule Schmalkalden SS 2011

5.4.4 Erstellen der News-Seite
Zum Erstellen der News-Seite bietet die News-Klasse drei Methoden an. ShowNewsOnElement erzeugt die Listenansicht der verfügbaren News, createNewsPage die Detailansichten und getValueFromKey liefert einen Wert zum passenden Schlüssel aus einer Single_News.
1 sho wNewsO nEleme nt : function ( elem ) { 2 $ ( elem ) . append ( ’ < ul data - role =" listview " class =" ui - listview " id =" newslist " > </ ul > ’) ; 3 $ ( ’# newslist ’) . append ( ’ <li > </ li > ’) ; 4 for ( var j =0; j < tmp_news_set . getNews () . length ; j ++) { 5 $ ( ’# newslist ’) . append ( ’ < li id =" listelement - ’ + j + ’" > </ li > ’) ; 6 $ ( ’# listelement - ’ + j ) . append ( ’ <a href ="# newsPage - ’ + j + ’" > < table border ="0" cellspacing ="5" width ="100%" style =" table layout : fixed ; overflow : hidden " > < tr > ’ + 7 8 ’ < td width ="25%" > < p > ’ + 9 this . getValueFromKey ( " semester " , j ) + 10 ’ </p > </ td > ’ + 11 ’ < td width ="25%" > < p > ’ + 12 this . getValueFromKey ( " writer " , j ) + 13 ’ </p > </ td > ’ + 14 ’ < td width ="35%" > < p > ’ + 15 this . getValueFromKey ( " subject " , j ) + 16 ’ </p > </ td > ’ + 17 ’ < td width ="5%" > ’ + ’ ’ + ’ </ td > ’ + 18 19 ’ </ tr > </ table > </a > ’) ; 20 this . createNewsPage ( j ) ; 21 } 22 $ ( ’# newslist ’) . append ( ’ <li > </ li > ’) ; 23 }

Listing 5.7: Erstellen der Seitenstruktur von News Die Methode showNewsOnElement besitzt einen Parameter elem, welcher den HTMLKnotenpunkt beschreibt, auf dem die Listenansicht der News platziert werden soll. Mit der jQuery-Funktion append lassen sich Strings an ein Element im DOM-Baum anfügen. Repräsentieren diese ein HTML-Element, wie beispielsweise <li></li> (Zeile 6), werden diese als solche in das HTML-Dokument angefügt. In Zeile 5 teilt das Attribut data-role=”listview” des HTML-Elements <ul> jQuery Mobile mit, dass eine neue Listenansicht erstellt werden soll. Weiterhin bekommt es eine ID listview zugewiesen, um es im weiteren Verlauf einfacher zu finden. Anschließend wird ein Listenelement zu der Listenansicht hinzugefügt. Das Listenelement bekommt dazu eine eindeutige ID zugewiesen (Zeile 8), welche benötigt wird, um mit $(’#listelement-’ + j).append(... a href=’newsPage-’ + j ...); einen Link zur Detailansicht an dieses Listenelement anzufügen. Darauf folgend wird eine Tabelle erzeugt, die den zur Verfügung stehenden Anzeigebereich in vier Teile gliedert. Mit getValueFromKey (siehe Listing 5.7wird aus dem News_Set

Toni Bolduan

Seite 28 von 47

5. Implementierung

Fachhochschule Schmalkalden SS 2011

der News-Klasse der zum Schlüssel passende Wert gesucht und eingefügt. Für die Listenansicht sind es das betreffende Semester, der Autor und der Betreff der News. Nach Abschluss der Erstellung einer Listenansicht wird die entsprechende Detailansicht dieser News mit createNewsPage(j) erstellt (siehe Listing 5.7). Das Ganze wird für alle im News_Set vorhandenen News durchgeführt (Zeile 4).
1 getValueFromKey : function ( key , news_number ) { 2 for ( var j =0; j < tmp_news_set . getNews () . length ; j ++) { 3 for ( var i =0; i < tmp_news_set . getNews () [ j ]. getDataPairs () . length ; i ++) { 4 if (( tmp_news_set . getNews () [ j ]. getDataPairs () [ i ]. getKey () == key ) && ( j == news_number ) ) { 5 return tmp_news_set . getNews () [ j ]. getDataPairs () [ i ]. getValue () ; 6 } 7 } 8 } 9 }

Listing 5.8: Suchen von Schlüssel und passendem Schlüsselwert aus Datenstruktur Die Methode getValueFromKey liefert zu einem gegebenen Schlüssel und News-Index den passenden Schlüsselwert. Dazu wird für alle im News-Set existierenden News geprüft, ob die enthaltenden Datenpaare den gesuchten Schlüssel enthalten und ob diese auch zu der richtigen News gehören (Listing 5.8, Zeile 7).
1 createNewsPage : function ( news_id ) { 2 $ ( ’ body ’) . append ( ’ < div data - role =" page " id =" newsPage - ’ + news_id + ’" > </ div > ’) ; 3 $ ( ’# newsPage - ’ + news_id ) . append ( 4 ’ < div data - role =" header " > ’ + 5 ’ <h1 > ’ + this . getValueFromKey ( ’ subject ’ , news_id ) + ’ </ h1 > ’ + 6 ’ <a class =" button back " href ="# p2 " > Back </ a > ’ + 7 ’ </ div > ’ + 8 ’ < div data - role =" content " > ’ + 9 ’ < ul data - role =" listview " data - inset =" true " > ’ + 10 ’ <li > < table width ="100%" > < tr > ’ + 11 ’ <td > ’ + this . getValueFromKey ( ’ date ’ , news_id ) + 12 ’ < td align =" right " > ’ + this . getValueFromKey ( ’ writer ’ , news_id ) + 13 ’ </ tr > </ table > </ li > ’ + 14 ’ <li > ’ + this . getValueFromKey ( ’ news ’ , news_id ) + ’ </ li > ’ + 15 ’ </ ul > ’ + 16 ’ </ div > ’ 17 ); 18 }

Listing 5.9: Erstellen der Detailansichten einer News

Toni Bolduan

Seite 29 von 47

5. Implementierung

Fachhochschule Schmalkalden SS 2011

Die Methode createNewsPage der News-Klasse erstellt die Detailansichten einer News. Dazu wird zunächst die aus den Kapiteln 4.2.1 und 5.2 bekannte Seitenstruktur mit Hilfe der jQuery-Funktion append an den Body-Tag der Datei index.html mit entsprechender News-ID angefügt (Zeile 5). Innerhalb des Content-Bereichs wird zusätzlich eine Listenansicht generiert, welche mit Hilfe der Methode getValueFromKey das Datum und den Autor in ein Listenelement(Zeile 13-16) und den eigentlichen Text der News in ein zweites Listenelement (Zeile 17) einfügt.

5.5 Schedule
Die Beschreibung der Implementierung der Schedule-Komponente erfolgt analog zu der, aus der News-Komponente bekannten Vorgehensweise. Zunächst werden die Klasse Schedule und das verwendete Datenformat beschrieben. Anschließend folgt die Erklärung der für die Umsetzung der Data-Komponente zuständigen Verarbeitungsklasse JSONProcessor. Zuletzt wird die Erstellung der Struktur der ScheduleSeitenansichten näher beschrieben.

5.5.1 Schedule Klasse
Die Schedule-Klasse besitzt, wie auch die News-Klasse, eine Generatorfunktion zum Erstellen von Objekten. Diese folgen dem Klassendiagramm aus Abbildung 5.2.

« Class » Schedule Component::Schedule - alldegreecourses : AllDegreeCourses + schedules : Object[] + addDegreeCourse(degreeCourse:DegreeCourse) + checkDegreeCourseAvailability(course:String) : Boolean + addDegreeCoursesToDropdownMenu4() + createDegreeCourseDropDownMenuOnElement(element:Object) + loadScheduleData(jsonsource:String) + getScheduleByIndex() : Object + getEventsByDayByTime() : Object[] + getScheduleName(schedule:Object) : String + getValueFromKey(event:Object, key:String) : String + createStructureOfSchedulePages(schedule:Object[]) + fillSchedulePages(schedule:Object[])

Abbildung 5.2: Klassendiagramm der Schedule-Klasse

Toni Bolduan

Seite 30 von 47

5. Implementierung

Fachhochschule Schmalkalden SS 2011

Die Schedule-Klasse fungiert als Compositor der Komponenten Data, Structure und Presentation. Sie bietet Methoden zur Verwaltung verschiedener Stundenpläne, zum Laden der Stundenplandaten, sowie zum Erstellen und Gestalten der Seitenansichten des Stundenplans.

5.5.2 Daten-Handling
Das Daten-Handling innerhalb der Komponente Schedule ist komplexer als das der News-Komponente. Bedingt durch das komplexere JSON-Datenformat der Stundenplandaten wird hierzu eine eigene Klasse JSONProcessor zur Verarbeitung der Datenstruktur erstellt. Das Datenformat der Stundenplandaten ist, genau wie bei den News-Daten, JSON. Jedoch ist die Struktur, wie in Listing 5.10 zu erkennen ist, weitaus komplexer.
1 [ 2 3 ... , 4 5 { 6 " eventType " : " Vorlesung " , 7 " titleShort " : " WV " , 8 " _id " : " 4 e d 4 d 4 e a e 4 b 0 9 6 5 9 8 0 5 5 d b 6 d " , 9 " member " : [ 10 { 11 " fhs_id " : " " , 12 " name " : " Stiefel " 13 } 14 ], 15 " className " : " bai3 " , 16 " titleLong " : " " , 17 " appointment " : { 18 " day " : " Montag " , 19 " location " : { 20 " place " : { 21 " building " : " H " , 22 " room " : " 0202 " 23 }, 24 " alternative " : [] 25 }, 26 " time " : " 08.15 -09.45 " , 27 " week " : " w " 28 }, 29 " group " : " " 30 }, 31 32 ... 33 34 ]

Listing 5.10: Auszug aus .../rest/1.0/schedule?classname=bai3

Toni Bolduan

Seite 31 von 47

5. Implementierung

Fachhochschule Schmalkalden SS 2011

So besitzt beispielsweise der Schlüssel member (Zeile 7) keinen Stringwert, sondern ein Array von Objekten, die wiederum Schlüsselwertpaarelemente besitzen. Die Komplexität der Datenstruktur findet seinen Höhepunkt im Wert des Schlüssels appointment (Zeile 15). Die komplexe Datenstruktur des JSON-Datenformats und die Tatsache, dass sich ebendieses noch im Entwicklungsprozess befindet und somit jederzeit abgeändert werden kann, sind die ausschlaggebenden Gründe zur Entwicklung eines eigenen Datenformates. Dazu werden die Datencontainer aus Listing 5.5 wie folgt abgeändert:
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 32 33 34 35 var Datapair_v2 = function () { return { key : null , value : null , getKey : function () { return this . key ; }, getValue : function () { return this . value ; }, setKey : function ( k ) { this . key = k ; }, setValue : function ( v ) { this . value = v ; } }; }; var Subelement = function () { return { elementdata : new Array (0) , addElementData : function ( dataelement ) { this . elementdata . push ( dataelement ) ; }, getElementData : function () { return this . elementdata ; } }; };

Listing 5.11: Datenklassen des Datenformats

Toni Bolduan

Seite 32 von 47

5. Implementierung

Fachhochschule Schmalkalden SS 2011

1 var DataElement = function () { 2 3 return { 4 Elements : new Array () , 5 6 addDataElement : function ( elem ) { 7 this . Elements . push ( elem ) ; 8 }, 9 10 g e t D a t a E l e m e n t B y I n d e x : function ( index ) { 11 for ( var k =0; k < this . Elements . length ; k ++) { 12 if (( k +1) == index ) { 13 return this . Elements [ k ]; 14 } 15 else return null ; 16 } 17 } 18 }; 19 };

Listing 5.12: Datenklassen des Datenformats Die Klasse Datapair wurde um zwei Set-Methoden erweitert. Neu hinzugekommen sind die Klassen Subelement und DataElement. DataElement repräsentiert ein im JSON-Format mit {}-Klammern gekennzeichnetes Objekt und die Klasse Subelement ein Array. Beide sind sich im Aufbau ähnlich, weisen jedoch Unterschiede bei der Initialisierung und dem Verwalten ihrer Containerobjekte auf. Der Grund für die Verwendung marginal unterschiedlicher Klassen wird im Folgenden Abschnitt erklärt. Der JSON-Prozessor überführt die Daten des JSON-Format in das eigens erstellte Datenformat.

« Class » JSONProcessor Component::Schedule - json_source : String - tmp_Data : Object[] + setJSONSource() : void + getJSONSource() : String + loadDataFromJSONSource() : Object[] + exportData() : Object[]

Abbildung 5.3: Klassendiagramm der JSON-Prozessor-Klasse

Toni Bolduan

Seite 33 von 47

5. Implementierung

Fachhochschule Schmalkalden SS 2011

Dazu bietet die Klasse unter Anderem Methoden zum Laden der Daten aus einer JSON-Quelle und zum Exportieren der Daten an. Die Methode loadDataFromJSONSource weist einige Besonderheiten auf und wird daher näher betrachtet.
1 2 3 4 5 6 7 8 9 l o a d D a t a F r o m J S O N S o u r c e : function () { var Loading = { ... }; Loading . loadJSON ( tmp_Data ) ; return tmp_Data ; }

Listing 5.13: Methode loadDataFromJSONSource Die Methode enthält einen sogenannten Object-Literale 4 . Damit lassen sich Methoden in Klassen verpacken, ohne dabei Instanzen dieses Objektes erstellen zu müssen. Weiterhin kann man mit ihnen einen Namensraum festlegen. Das wurde hier umgesetzt, da die Klasse JSONProcessor nicht zu stark aufgebläht werden soll und die Helfer-Methoden zum Laden der Daten nicht außerhalb der JSONProzessor-Klasse und innerhalb anderer Methoden der JSONProzessor-Klasse verfügbar sein sollen. Das Prinzip von Schutzklassen wurde damit umgesetzt. Die Methoden des Objektes Loading werden folgend erklärt:
1 isTypeOf : function ( variable ) { 2 if ( typeof ( variable ) == ’ object ’) { 3 if ( variable . length >= 0) { 4 return ’ array ’; 5 } 6 else { 7 return ’ object ’; 8 } 9 } 10 else { 11 return ’ primitive ’; 12 } 13 }

Listing 5.14: Methode isTypeOf() JavaScript besitzt zur Ermittlung von Datentypen die Funktion typeof, jedoch bietet diese Funktion keine Möglichkeit Arrays als solche zu erkennen, da in JavaScript alle Variablen entweder primitiven Datentypen oder dem Datentyp Object angehören. Mit isTypeOf wurde die Standard-Funktion typeof von JavaScript um die Erkennung von Arrays erweitert. Dazu wird das als potentielles Objekt markierte Array auf seine
Object-Literale sind in JavaScript ein Konstrukt zum Definieren von Object-Objekten in Kurzschreibweise. Innerhalb von geschweiften Klammern befinden sich, durch Kommas getrennt, die Zuweisungen von Namen zu Objekten.[Sel]
4

Toni Bolduan

Seite 34 von 47

5. Implementierung

Fachhochschule Schmalkalden SS 2011

Länge hin überprüft. Existiert im Objekt die Variable length mit mindestens null Elementen, so handelt es sich um ein Array (Zeile 3 - 4). Das Überführen des JSON-Datenformates in das Webappeigene übernehmen die Methoden loadJSON und saveData. Die erste Methode ist analog zu der gleichnamigen Methode aus der News-Klasse aufgebaut, jedoch mit dem geringfügigem Unterschied, dass anstelle von Datapair-Objekten (Datenpaaren) nur noch ObjectObjekte abgespeichert werden. Somit werden die Stundenplan-Daten als ein Array von Objekten abgespeichert. Das Erkennen und Abspeichern von Schlüsselwerten unterschiedlichen Typs erledigt die Methode saveData.
1 saveData : function (k , v ) { 2 3 if ( this . isTypeOf ( v ) == ’ primitive ’) { 4 5 var tmp_datapair = new Datapair_v2 () ; 6 tmp_datapair . setKey ( k ) ; 7 tmp_datapair . setValue ( v ) ; 8 9 return tmp_datapair ; 10 } 11 else { 12 if ( this . isTypeOf ( v ) == ’ array ’) { 13 14 var tmp_datapair2 = new Datapair_v2 () ; 15 tmp_datapair2 . setKey ( k ) ; 16 if ( v . length > 0) { 17 var i =0; 18 var tmp_array = [ v . length ]; 19 $ . each ( v [ i ] , function ( key , val ) { 20 21 if ( typeof ( tmp_array [ i ]) != ’ object ’) { 22 tmp_array [ i ] = new DataElement () ; 23 } 24 tmp_array [ i ]. addDataElement ( Loading . saveData ( key , val ) ) ; 25 }) ; 26 27 i ++; 28 tmp_datapair2 . setValue ( tmp_array ) ; 29 return tmp_datapair2 ; 30 } 31 else { 32 tmp_datapair2 . setValue ( new Array (0) ) ; 33 return tmp_datapair2 ; 34 } 35 } 36 ...

Listing 5.15: Methode saveData() Handelt es sich bei dem Schlüsselwert(Zeile 3) um einen primitiven Datentyp (String), so wird ein Datenpaar mit dem Schlüssel und dem zugehörigen Schlüsselwert erstellt und zurückgegeben. Ist der dem Schlüsselwert unterliegende Datentyp dagegen vom

Toni Bolduan

Seite 35 von 47

5. Implementierung

Fachhochschule Schmalkalden SS 2011

Typ Array (Zeile 12) wird zunächst nur der Schlüssel des Datenpaares eingetragen (Zeile 15). Darauf folgend wird die Länge des Arrays überprüft und im Falle eines leeren Arrays (wie es unter Anderem im Datenformat in Listing 5.10 vorkommt) mit der Länge Null (Zeile 24) erstellt. Besitzt das Schlüsselwert-Array aber Elemente, so ruft sich die Methode saveData() selbst für jedes Array-Element auf.
1 2 3 4 5 6 7 8 9 10 11 ... else { if ( this . isTypeOf ( v ) == ’ object ’) { var tmp_datapair3 = new Datapair_v2 () ; tmp_datapair3 . setKey ( k ) ; var tmp_dataelement = new DataElement () ; $ . each (v , function ( key , val ) { tmp_dataelement . addDataElement ( Loading . saveData ( key , val ) ); }) ; tmp_datapair3 . setValue ( tmp_dataelement ) ; return tmp_datapair3 ;

12 13 14 15 } 16 } 17 } 18 }

Listing 5.16: Methode saveData() Analog zur Abarbeitung eines Arrays erfolgt die Abarbeitung für den Fall, dass der Schlüsselwert vom Typ Object ist. Um auf die abgespeicherten Stundenplandaten zugreifen zu können, bietet die Schedule-Klasse ebenfalls eine Methode getValueFromKey. Im Unterschied zur News-Klasse besitzt diese einen zusätzlichen Parameter event. Damit lassen sich Schlüsselwerte anhand ihres Schlüssels in einem Event suchen. In Listing 5.17 erkennt man, dass für jedes Datenelement in diesem Event die Funktion doSearch aufgerufen wird (Zeile 13). Sie ist das Such-Äquivalent zur rekursiven Speicherfunktion saveData aus Listing 5.15. Mit der Abfrage in Zeile 14 wird die Gültigkeit des durch die Suche zurückgegebenen Wertes überprüft. Die Besonderheit des Rückgabestrings novalue ergibt sich aus dem Speziallfall, dass ein Schlüsselwert zwar existent ist, aber keinen eingetragenen Wert enthält.
1 getValueFromKey : function ( event , key ) { 2 3 var isTypeOf = function ( variable ) { 4 ... 5 }; 6 7 var doSearch = function (k , v ) { 8 ...

Toni Bolduan

Seite 36 von 47

5. Implementierung
9 10 11 12 13 14 15 16 17 };

Fachhochschule Schmalkalden SS 2011

var ln = event . getElementData () . length ; for ( var i =0; i < ln ; i ++) { var val = doSearch ( event . getElementData () [ i ]. getKey () , event . getElementData () [ i ]. getValue () ) ; if (( isTypeOf ( val ) == ’ primitive ’ && val != ’ novalue ’ && val != null ) ) return val ; }; }

Listing 5.17: Methode getValueFromKey() Die Suchfunktion doSearch ist eine rekursive Funktion mit der Abbruchbedingung, dass ein Schlüsselwert immer einen primitiven Datentyp haben muss. Danach wird auf das gesuchte Schlüsselwort geprüft und der Schlüsselwert bei erfolgreichem Suchvorgang zurückgegeben. Ist der Schlüsselwert vom Datentyp Array oder Object, so wird die Suche für alle in ihnen befindlichen Elemente wiederholt.
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 var doSearch = function (k , v ) { if ( isTypeOf ( v ) == ’ primitive ’) if ( key == k ) return v ; else return ’ novalue ’; else if ( isTypeOf ( v ) == ’ array ’) for ( var i =0; i < v . length ; i ++) { var tmp_v = doSearch (k , v [ i ]) ; if ( typeof ( tmp_v ) == ’ string ’ && tmp_v != ’ novalue ’) return tmp_v ; else return ’ novalue ’; } else if ( isTypeOf ( v ) == ’ object ’) { var len = v . Elements . length ; for ( var j =0; j < len ; j ++) { var t_k = v . Elements [ j ]. getKey () ; var t_v = v . Elements [ j ]. getValue () ; var wert = doSearch ( t_k , t_v ) ; if ( typeof ( wert ) == ’ string ’ && wert != ’ novalue ’) return wert ; } } };

Listing 5.18: Methode doSearch()

Toni Bolduan

Seite 37 von 47

5. Implementierung

Fachhochschule Schmalkalden SS 2011

5.5.3 Erstellen der Schedule-Seite
Für das Erstellen der Tagesansichten des Stundenplans bietet die Schedule-Klasse die Methode createStructureOfSchedulePages an. Sie bekommt einen Stundenplan als Parameter übergeben und erzeugt für diese sämtliche Tagesansichten.
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 32 c r e a t e S t r u c t u r e O f S c h e d u l e P a g e s : function ( schedule ) { var sched_name = this . getScheduleName ( schedule ) ; var back_str ; var next_str ; for ( var i =0; i <5; i ++) { if (i <1) back_str = ’# p3 ’; else back_str = ’# schedulePage - ’ + sched_name + ’ - ’ + (i -1) ; if (i >=4) next_str = ’ ’; else next_str = ’# schedulePage - ’ + sched_name + ’ - ’ + ( i +1) ; // create Schedule - Page of a day $ ( ’ body ’) . append ( ’ < div data - role =" page " id =" schedulePage - ’ + sched_name + ’ - ’ + i + ’" > </ div > ’) ; $ ( ’# schedulePage - ’ + sched_name + ’ - ’ + i ) . append ( ’ < div data - role =" header " > ’ + ’ <h1 > ’ + getDay ( i ) + ’ </ h1 > ’ + ’ <a class =" button " href =" ’ + back_str + ’" > Back </ a > ’ + ’ <a class =" button " href =" ’ + next_str + ’" > Next </ a > ’ + ’ </ div > ’ + ’ < div data - role =" content " > ’ + ’ < ul data - role =" listview " data - inset =" true " id =" scheduleDay - ’ + getDay ( i ) + ’" > </ ul > ’ + ’ </ div > ’ ); // deleting next Button if last page was reached if ( next_str == ’ ’) $ ( ’# schedulePage - ’+ sched_name + ’ - ’ + 4 + ’ a ’) . remove ( ’: contains (" Next ") ’) ;

33 34 ... 35 } 36 37 ... 38 }

Listing 5.19: Methode createStructureOfSchedulePages() Zunächst filtert die Methode den zur Erstellung der Seiten notwendigen Namen des Stundenplans (Zeile 3) heraus. Um die aus Abbildung 4.5 erkennbare Navigation der Tagesansichten zu erstellen ist es notwendig zu wissen, ob sich die zu erstellende

Toni Bolduan

Seite 38 von 47

5. Implementierung

Fachhochschule Schmalkalden SS 2011

Tagesansicht am Anfang oder am Ende der Woche befindet. Handelt es sich bei der Tagesansicht um einen Montag, so wird die Quellenangabe des Zurück-Buttons auf das Hauptmenü gesetzt (Zeile 10), andernfalls auf den vorangehenden Tag (Zeile 11). Handelt es sich bei der Tagesansicht um einen Freitag, so wird die Referenz des Vorwärts-Buttons stillgelegt (Zeile 14), andernfalls auf den nachfolgenden Tag gesetzt (Zeile 15). Das Erstellen der Seitenstruktur erfolgt nach dem bekannten Muster, mit dem Zusatz, dass zwei Navigationselemente plus Tag im Kopf der Seitenansicht dargestellt werden (Zeile 21-23). Die Funktion getDay liefert den Tag anhand einer Zahl zurück, wobei die Zahlen Null bis Sieben stellvertretend für Montag bis Sonntag stehen. Mit der Überprüfung in Zeile 31 wird der Vorwärts-Button aus der Navigationsleiste der Tagesansicht entfernt, wenn es sich um den letzten Tag handelt. Nachdem der Kopfbereich der Tagesansichten des Stundenplans erstellt ist wird der eigentliche Anzeigebereich mit den sieben Zeitslots erstellt. Analog zu getDay aus Listing 5.19 existiert eine Funktion getTimeSlot, welche die zum Index des Zeitslots passende Uhrzeit liefert (Zeile 12). Ein Listenelement ist in zwei Teile gegliedert. In Teil eins steht die Uhrzeit, während Teil zwei als Container für Events dient(Zeile 13).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 // deleting next Button if last page was reached if ( next_str == ’ ’) $ ( ’# schedulePage - ’+ sched_name + ’ - ’ + 4 + ’ a ’) . remove ( ’: contains (" Next ") ’) ; // creating timeslots for a day for ( var j =0; j <7; j ++) { $ ( ’# schedulePage - ’ + sched_name + ’ - ’ + i + ’ # scheduleDay - ’ + getDay ( i ) ) . append ( ’ < li id =" timeslot - ’ + j + ’" > ’ + ’ <a data - rel =" dialog " data - transition =" pop " > ’ + ’ < table width ="100%" > < tr > ’ + ’ < td width ="50 px " > ’ + getTimeSlot ( j ) + ’ </ td > ’ + ’ < td id =" eventcontainer " > </ td > ’ + ’ </ tr > </ table > ’ + ’ </a > ’ + ’ </ li > ’ ); }

Listing 5.20: Methode createStructureOfSchedulePages() Im Anschluss an das Erstellen einer Tagesansicht des Stundenplans erfolgt das Füllen der Event-Container mit Events. Dazu bietet die Schedule-Klasse die Methode fillSchedulePages an. Diese bekommt ebenfalls als Parameter einen Stundenplan übergeben. Zunächst werden alle Informationen zu einem Event gesammelt und anschließend in den Container eingetragen.

Toni Bolduan

Seite 39 von 47

5. Implementierung

Fachhochschule Schmalkalden SS 2011

1 fil lSched ulePag es : function ( schedule ) { 2 3 var sched_name = this . getScheduleName ( schedule ) ; 4 5 // for each day 6 for ( var i =0; i <5; i ++) { 7 8 // and each timeslot 9 for ( var j =0; j <7; j ++) { 10 11 // get events of the timeslot by day 12 var daytimeEvents = this . g e t E v e n t s B y D a y B y T i m e ( schedule , getDay ( i ) , getRealTimeSlot ( j ) ) ; 13 // yeah , so insert all step - by - step 14 for ( var k =0; k < daytimeEvents . length ; k ++) { 15 // get information about event 16 var event_type = this . getValueFromKey ( daytimeEvents [ k ] , ’ eventType ’) ; 17 var event_lesson = this . getValueFromKey ( daytimeEvents [ k ] , ’ titleShort ’) ; 18 var event_group = this . getValueFromKey ( daytimeEvents [ k ] , ’ group ’) ; 19 var event_building = this . getValueFromKey ( daytimeEvents [ k ] , ’ building ’) ; 20 var event_room = this . getValueFromKey ( daytimeEvents [ k ] , ’ room ’) ; 21 var event_weekly = this . getValueFromKey ( daytimeEvents [ k ] , ’ week ’) ; 22 var event_owner = this . getValueFromKey ( daytimeEvents [ k ] , ’ name ’) ; 23 var event_icon ; 24 var event_week_type ; 25 26 ... 27 } 28 } 29 } 30 }

Listing 5.21: Methode fillSchedulePages() Um die richtigen Seiteninhalte zu bekommen müssen die passenden Events für jeden Tag und jeden Zeitslot gefunden werden. Dies erledigt die Funktion getEventsByDayByTime in Zeile 12. Sie liefert ein Array von Events. Dieses wird im Anschluss durchlaufen und die Informationen mit Hilfe der Methode getValueFromKey herausgefiltert. Daraufhin wird geprüft, um welchen Event-Typ es sich handelt. Je nach Art wird dann entweder das Symbol für Vorlesung oder Übung geladen und festgelegt, ob es sich um ein Event im wöchentlichen oder im zweiwöchentlichen Wiederholungszyklus handelt (Zeile 17-29, Listing 5.22).

Toni Bolduan

Seite 40 von 47

5. Implementierung

Fachhochschule Schmalkalden SS 2011

1 fil lSched ulePag es : function ( schedule ) { 2 3 var sched_name = this . getScheduleName ( schedule ) ; 4 5 // for each day 6 for ( var i =0; i <5; i ++) { 7 8 // and each timeslot 9 for ( var j =0; j <7; j ++) { 10 11 // get events of the timeslot by day 12 var daytimeEvents = this . g e t E v e n t s B y D a y B y T i m e ( schedule , getDay ( i ) , getRealTimeSlot ( j ) ) ; 13 // yeah , so insert all step - by - step 14 for ( var k =0; k < daytimeEvents . length ; k ++) { 15 16 ... 17 // checkup event symbol 18 if ( event_type == ’ Vorlesung ’) 19 event_icon = ’ images / lecture . png ’ 20 else if ( event_type == ’ Uebung ’) 21 event_icon = ’ images / uebung . png ’; 22 23 // checkup event type 24 if ( event_weekly == ’w ’) 25 event_week_type = ’ event_weekly ’ 26 else if ( event_weekly == ’g ’) 27 event_week_type = ’ event_even ’ 28 else if ( event_weekly == ’u ’) 29 event_week_type = ’ event_odd ’; 30 31 // append event to eventcontainer 32 $ ( ’# schedulePage - ’ + sched_name + ’ - ’ + i + ’ # timeslot - ’ + j + ’ # eventcontainer ’) . append ( 33 $ ( ’ < div id =" event - ’ + k + ’" class =" event_borders ’ + event_week_type + ’" > </ div > ’) 34 . append ( $ ( ’ <div > ’) . append ( event_lesson ) ) 35 . append ( $ ( ’ < div class =" event_icon_pos " > ’) . append ( ’ < img src =" ’ + event_icon + ’"/ > ’) ) 36 . append ( $ ( ’ <div > ’) . append ( ’ Gruppe : ’ + event_group ) ) 37 . append ( $ ( ’ <div > ’) . append ( event_building + ’: ’ + event_room ) ) 38 . append ( $ ( ’ < div class =" event_owner_pos " > ’) . append ( event_owner ) ) , 39 $ ( ’ < div style =" height : 15 px " > </ div > ’) 40 ); 41 } 42 } 43 } 44 }

Listing 5.22: Methode fillSchedulePages()

Toni Bolduan

Seite 41 von 47

5. Implementierung

Fachhochschule Schmalkalden SS 2011

Im anschließenden Code-Block wird der zum Event zugehörige Container des Zeitslots gesucht und die Eventinformationen darin eingetragen. Hervorzuheben ist hier Zeile 33. Das Klassenattribut des DIV-Containers wird hier um den Wert aus event_week_type ergänzt. Das führt zur Nutzung unterschiedlicher CSS-Klassen, welche Events unterschiedlichen Wochentyps optisch unterscheiden. Weiterhin ist zu beachten, dass das Icon des Events anhand der Variable event_icon festgelegt wurde und nun dazu führt, dass Vorlesungen und Übungen unterschiedliche optische Kennzeichnungen bekommen (Zeile 35).

5.6 MySchedule
In diesem Unterkapitel wird die Funktionsweise des Features MySchedule näher beschrieben. Die Komponente MySchedule besitzt die zwei Klassen MySchedule und LocalStorage. Während Erstere das Erstellen der Webseitenansichten und das Bereitstellen der Datenstruktur der Stundenplan-Events behandelt, beherbergt die Klasse LocalStorage die technische Umsetzung des Lade- und Speichervorgangs.

5.6.1 Allgemein
Die Seitenansichten des Features MySchedule sind analog zu den Seitenansichten von Schedule aufgebaut, daher wird deren Erstellung nicht näher beschrieben. Die Events, welche im vorangegangenen Kapitel in die Seitenansichten eingefügt wurden besitzen innerhalb des MySchedule-Features eine eigene kleine Datenstruktur.

5.6.2 Datenstruktur der Events
Die Struktur eines Events ist simpel gehalten. Wie in Listing 5.23 zu erkennen, besitzt ein Datenstrukturobjekt eines Events vier Elemente.
1 dataStructure : function ( day , timeslot , data ) { 2 3 index ++; 4 return { 5 m_day : day , 6 m_timeslot : timeslot , 7 m_data : data , 8 m_id : index 9 } 10 }

Listing 5.23: Datenstruktur eines Event-Objektes

Toni Bolduan

Seite 42 von 47

5. Implementierung

Fachhochschule Schmalkalden SS 2011

Day und timeslot kennzeichnen den Zeitpunkt des Events, während id den Index eines zu speichernden Elements im lokalen Speicher des Browsers kennzeichnet. Das Data-Objekt enthält eine String-Repräsentation der HTML-Baumstruktur(Listing 5.24) eines Events. Dadurch wird sichergestellt, dass selbst bei Design- oder Layoutänderungen der Events im Feature Schedule keinerlei Anpassungen durchgeführt werden müssen. Die Events werden somit eins zu eins kopiert.
1 < td id = " ls - eventcontainer " > 2 < div id = " event -5 " class = " event_borders event_even " > 3 < div > SWEProg </ div > 4 < div class = " event_icon_pos " > 5 < img src = " images / uebung . png " > 6 </ div > 7 < div > Gruppe : 3 </ div > 8 < div >B : PC1 </ div > 9 < div class = " event_owner_pos " > Recknagel </ div > 10 </ div > 11 </ td >

Listing 5.24: HTML-Struktur eines Events

5.6.3 LocalStorage
Für das Speichern der Events wird eine neue Technik für Webanwendungen genutzt: Web Storage. Mit dieser Technik können Daten ähnlich dem Cookie-Speichersystem im Browser persistent abgelegt werden. Der Unterschied zu Cookies liegt darin, dass sowohl lokale, als auch session-spezifische Speicherungen durchgeführt werden können. Weiterhin bietet Web Storage größere Speicherkapazitäten[For] (zehn Megabyte) als Cookies (vier Kilobyte). Es gibt zwei Arten des Web Storage, zum Einen sessionStorage und zum Anderen localStorage. Letzeres findet in dieser Arbeit Verwendung.[15]

5.6.4 Bereitstellen der Speicherfunktion
Die Möglichkeit des Speicherns von Events wird nach der Initialisierung der MyScheduleKlasse hinzugefügt. Das heißt nachdem die Seitenansichten des MySchedule-Features erstellt sind erfolgt das Hinzufügen der Speicherfunktionalitäten. Dazu besitzt die Klasse localStorage die Methode addStorageAbility. Mit Hilfe dieser Methode werden alle Zeitslots einer Tagesansicht an die Methode createPopup() gebunden, die ein Event beherbergen. In den Zeilen 3 und 4 (Listing 5.25) wird die Anzahl der verfügbaren Stundenpläne und deren jQUery-Objekt ermittelt. Danach wird für jeden dieser Stundenpläne zunächst der Name ermittelt und für jede Tagesansicht des Stundenplans die einzelnen Events anhand ihres Namens ermittelt (Zeile 14). Nachdem überprüft wurde, ob überhaupt Events eingetragen worden sind (Zeile 16 und 17), wird an diesen

Toni Bolduan

Seite 43 von 47

5. Implementierung

Fachhochschule Schmalkalden SS 2011

Zeitslot die Funktion createPopup gebunden. Somit wurde sichergestellt, dass nur Events abgespeichert werden können, die auch tatsächlich existieren. Eine Besonderheit ist in Zeile 19 zu sehen. Hier wird zunächst aus dem jQuery-Selektor-String ein jQuery-Objekt geformt und anschließend der HTML-Baum dieses Objektes als String-Repräsentation zurückgegeben. Diese ist wichtig für den weiteren Speichervorgang.
1 a dd S t o ra g e Ab i l it y T o : function ( lS ) { 2 3 var schedule_count = $ ( ’# scheds li ’) . size () ; 4 var sched_name = $ ( ’# scheds li ’) ; 5 6 var i =0; 7 $ . each ( sched_name , function () { 8 9 var the_a = $ ( sched_name [ i ]) . find ( ’a ’) ; 10 var name = the_a . text () ; 11 12 for ( var j =0; j <5; j ++) 13 for ( var k =0; k <7; k ++) { 14 var sstr = ’# schedulePage - ’ + name + ’ - ’ + j + ’ # timeslot ’ + k + ’ # eventcontainer ’; 15 16 var child_counter = $ ( $ ( sstr ) . children () ) . size () ; 17 if ( child_counter > 0) { 18 19 var storagedata = $ ( sstr ) . html () ; 20 $ ( ’# schedulePage - ’ + name + ’ - ’ + j + ’ # timeslot - ’ + k + ’ a ’) . bind ( ’ click ’ , { strdata : storagedata , timeslot : getRealTimeSlot ( k ) , day : getDay ( j ) , lS : lS } , LocalStorage . createPopUp ) ; 21 } 22 } 23 i ++; 24 }) ; 25 }

Listing 5.25: Methode addStorageAbility()

5.6.5 Eventbehandlung
Zum Speichern erstellt die Methode createPopup ein Ja/Nein-Popup Menü. Nach dem Drücken auf ”Yes” wird das Event an die Methode storeEvent übergeben und das Popup geschlossen, bei Druck auf ”No” wird nur das Popup geschlossen. In Zeile 3 wird ein neues dataStructure-Objekt erzeugt. Die Daten aus den Parametern wurden zuvor gekapselt und von addStorageAbility(Listing 5.25, Zeile 20) über createPopup an diese Methode weitergereicht. Der Parameter eventdata enthält die String-Repräsentation des HTML-Baumes des Event-Containers.

Toni Bolduan

Seite 44 von 47

5. Implementierung

Fachhochschule Schmalkalden SS 2011

1 storeEvent : function ( day , timeslot , eventdata ) { 2 3 var ev = new this . dataStructure ( day , timeslot , eventdata ) ; 4 window . localStorage . setItem ( index , JSON . stringify ( ev ) ) ; 5 6 }

Listing 5.26: Methode storeEvent() Die API von Web Storage schreibt beim Hinzufügen von Elementen zum Browserspeicher vor, dass nur Schlüssel und dazugehörige Schlüsselwertpaare abgespeichert werden können, wobei der Schlüssel eine Zahl und der Schlüsselwert ein String sein muss. Mit der Funktion stringify (Zeile 4) der JSON-API entsteht aus dem dataStructure-Object eine String-Repräsentation, die im Browserspeicher abgespeichert werden kann. Die Methode loadEvent lädt alle Eventeinträge im Browserspeicher und fügt diese in die Tagesansicht des MySchedule-Stundenplans ein. Dazu wird, wie in Listing 5.27 zu erkennen, für alle abgespeicherten Events zunächst einmal das Event geladen und anschließend mit Hilfe der Funktion JSON.parse in ein JavaScript-Objekt überführt. Das Event wird anschließend anhand seiner Daten (Tag und Zeitslot) der jeweiligen Tagesansicht hinzugefügt (Zeile 8). Um doppelte Einträge zu vermeiden werden vor dem Einfügen alle Einträge gelöscht (Zeile 6).
1 loadEvent : function () { 2 3 for ( var i =0; i < window . localStorage . length ; i ++) { 4 var t_item = JSON . parse ( window . localStorage . getItem ( i ) ) ; 5 6 $ ( ’# localSchedule - ’ + t_item . m_day + ’ # timeslot - ’ + g e t S l o t N u m b e r F r o m T i m e S l o t ( t_item . m_timeslot ) + ’ # ls eventcontainer ’) . children () . remove () ; 7 8 $ ( ’# localSchedule - ’ + t_item . m_day + ’ # timeslot - ’ + g e t S l o t N u m b e r F r o m T i m e S l o t ( t_item . m_timeslot ) + ’ # ls eventcontainer ’) . append ( t_item . m_data ) ; 9 } 10 11 }

Listing 5.27: Methode loadEvent()

Toni Bolduan

Seite 45 von 47

6 Resümee
Diese Arbeit hat gezeigt, dass eine plattformunabhängige Umsetzung einer Applikation zur Veranschaulichung der Stundenpläne und des Aktuellen für mobile Endgeräte möglich ist. Die in Kapitel 2 angegeben Aufgaben und Anforderungen wurden erfüllt. Die Webapp wurde rein clientseitig in Javascript, HTML5 und CSS3 implementiert, mit minimalen Abhängigkeiten zu serverseitigen Vorgängen. Die Applikation ist sowohl online, als auch offline nutzbar. Weiterhin wurde erstmalig im SpiritProjekt eine Möglichkeit geschaffen, einen Stundenplan über Semester- und Studienganggrenzen hinweg manuell zusammenzustellen. Das gewählte Design der Webapp orientiert sich an den bereits existenten App-Umsetzungen der Spirit-Plattform und dem derzeitigen Design der Stundenplan-Webseite der Fakultät Informatik der FHSchmalkalden.

Toni Bolduan

Seite 46 von 47

7 Zukunftsaussichten
Die Webapp wurde zwar erfolgreich umgesetzt, dennoch ist diese nicht vollkommen und kann in den Bereichen Performanz und Funktionsumfang verbessert bzw. erweitert werden. Dazu werden folgend einige Verbesserungsvorschläge aufgezählt.

7.1 Funktionsumfang
• Exportfunktion des Stundenplans • Ersetzen der Navigations-Buttons durch Wisch-Bewegungen • Möglichkeit zur Konfiguration der angezeigten News- / Stundenplaninformationen • Möglichkeit zur Konfiguration des Designs • Schnellwahl der Menüs durch Icons im Footer-Bereich • „Eigenen Stundenplan löschen Funktion • Funktion, um Webapp zum Startbildschirm des Endgerätes hinzuzufügen

7.2 Quellcode-Verbesserungen
• JSONProcessor-Klasse sowohl für Schedule, als auch für News verwenden • Auslagerung von Neudeklarierungen der rekursiven Suche plus Callback-Parameter • Erstellen einer Compositor-Klasse, anstelle der index.html Datei • Datenstruktur von News und Schedule vereinheitlichen • Verringerung der Anzahl neuerstellter Objekte • Ersetzen der Objekt-Methoden durch statische Funktionen

Toni Bolduan

Seite 47 von 47

Abbildungsverzeichnis
3.1 4.1 4.2 4.3 4.4 4.5 4.6 4.7 5.1 5.2 5.3 A.1 A.2 A.3 A.4 A.5 A.6 Marktanteile der Mobilen Browser im Jahr 2011 . . . . . . . . . . . . Aufbau des Hauptmenüs . . . . . . . . . . . . . . . . Aufbau des Untermenüpunktes News . . . . . . . . . Aufbau der Stundenplanübersicht . . . . . . . . . . . Aufbau der Stundenplanansicht (Montag bis Freitag) Aktivitätsdiagramm des regulären Anwendungsfalles . Grundgerüst einer Ansicht . . . . . . . . . . . . . . . Komponentendiagramm: Aufbau eines Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 16 16 17 17 18 19 20

Klassendiagramm der News-Klasse . . . . . . . . . . . . . . . . . . . 24 Klassendiagramm der Schedule-Klasse . . . . . . . . . . . . . . . . . 30 Klassendiagramm der JSON-Prozessor-Klasse . . . . . . . . . . . . . 33 Hauptmenü . . . . . . . . . . . News - Listenübersicht . . . . . News - Detailansicht . . . . . . Schedule - Studiengangübersicht Schedule - Detailansicht . . . . MySchedule - Übersicht . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XI XI XII XII XIII XIII

Toni Bolduan

VI

Tabellenverzeichnis
3.1 3.2 3.3 3.4 3.5 3.6 B.1 B.2 B.3 B.4 Marktanteile der Desktop-Browser [Shaa] . . . . . . . . . Marktanteile der Mobile-Browser [Shab] . . . . . . . . . Marktanteile der mobilen Browser von Dez. 2010 bis Dez. Browser mit dazugehörigen Browserengines . . . . . . . . Unterstützung benötigter HTML Komponenten [Wik12] . Nutzwertanalyse von Frameworks (siehe Anhang B) . . . Punkteverteilung Punkteverteilung Punkteverteilung Punkteverteilung zu zu zu zu Kriterium Kriterium Kriterium Kriterium . . . . . . 2011 . . . . . . . . . . . . . . . . . . . . . 7 . . . . 8 [Shac] 8 . . . . 9 . . . . 10 . . . . 13 . . . . . . . . . . . . . . . . XIV XIV XIV XV

Funktionsumfang[Len] . . . Browsersupport[Len] . . . . Größe des Frameworks[Sch] Komplexität[Sch] . . . . . .

Toni Bolduan

VII

Listings
5.1 5.2 5.3 5.4 5.5 5.6 5.7 5.8 5.9 5.10 5.11 5.12 5.13 5.14 5.15 5.16 5.17 5.18 5.19 5.20 5.21 5.22 5.23 5.24 5.25 5.26 5.27 HTML-Struktur einer Seite . . . . . . . . . . . . . . . . . . . . . . . HTML-Struktur des Menüs / Auszug aus index.html . . . . . . . . . Fabrikmethode zur Erzeugung von Objekten der Newsklasse . . . . . Auszug aus http://spirit.fh-schmalkalden.de/rest/1.0/news . . . . . . Datenklassen des Datenformats . . . . . . . . . . . . . . . . . . . . . Laden der News-Daten . . . . . . . . . . . . . . . . . . . . . . . . . . Erstellen der Seitenstruktur von News . . . . . . . . . . . . . . . . . . Suchen von Schlüssel und passendem Schlüsselwert aus Datenstruktur Erstellen der Detailansichten einer News . . . . . . . . . . . . . . . . Auszug aus .../rest/1.0/schedule?classname=bai3 . . . . . . . . . . . Datenklassen des Datenformats . . . . . . . . . . . . . . . . . . . . . Datenklassen des Datenformats . . . . . . . . . . . . . . . . . . . . . Methode loadDataFromJSONSource . . . . . . . . . . . . . . . . . . Methode isTypeOf() . . . . . . . . . . . . . . . . . . . . . . . . . . . Methode saveData() . . . . . . . . . . . . . . . . . . . . . . . . . . . Methode saveData() . . . . . . . . . . . . . . . . . . . . . . . . . . . Methode getValueFromKey() . . . . . . . . . . . . . . . . . . . . . . Methode doSearch() . . . . . . . . . . . . . . . . . . . . . . . . . . . Methode createStructureOfSchedulePages() . . . . . . . . . . . . . . . Methode createStructureOfSchedulePages() . . . . . . . . . . . . . . . Methode fillSchedulePages() . . . . . . . . . . . . . . . . . . . . . . . Methode fillSchedulePages() . . . . . . . . . . . . . . . . . . . . . . . Datenstruktur eines Event-Objektes . . . . . . . . . . . . . . . . . . . HTML-Struktur eines Events . . . . . . . . . . . . . . . . . . . . . . Methode addStorageAbility() . . . . . . . . . . . . . . . . . . . . . . Methode storeEvent() . . . . . . . . . . . . . . . . . . . . . . . . . . . Methode loadEvent() . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 23 24 25 26 27 28 29 29 31 32 33 34 34 35 36 36 37 38 39 40 41 42 43 44 45 45

Toni Bolduan

VIII

Literaturverzeichnis
[For] Force, The Internet Engineering T.: HTTP State Management Mechanism. http://tools.ietf.org/html/rfc2965, Abruf: 13. März. 2012 [GHJV94] Gamma, Erich ; Helm, Richard ; Johnson, Ralph ; Vlissides, John: Design Patterns: Elements of Reusable Object-Oriented Software. Addison-Wesley Professional, 1994 [Inc] Inc., Google: Google Web Toolkit Overview. http://code.google.com/ intl/de-DE/webtoolkit/overview.html, Abruf: 21. Februar. 2012 [Kyr] Kyrnin, Jennifer: AJAX - Definition. http://webdesign.about.com/ od/ajax/g/bldefajax.htm, Abruf: 16. Februar. 2012 [Len] Lennon, Joe: Framework comparison. http://public.dhe.ibm.com/ software/dw/web/wa-jsframeworks/wa-jsframeworks-pdf.pdf, Abruf: 22. März. 2012 [New08] Newton, Aaron: MooTools Essentials: The Official MooTools Reference for JavaScript(TM) and Ajax Development. FirstPress, 2008 [Sch] Schuetz, Matthias: JavaScript Framework Matrix. http: //matthiasschuetz.com/javascript-framework-matrix/de/, Abruf: 22. März. 2012 [Sel] Selfhtmnl.org: Organisation von Javascripten. http: //aktuell.de.selfhtml.org/artikel/javascript/organisation/ #object-literale, Abruf: 7. März. 2012 [Shaa] Share, NetMarket (Hrsg.): Desktop Browser Market Share. http://netmarketshare.com/browser-market-share.aspx?qprid= 0&qpcustomd=0, Abruf: 26. Januar. 2012 [Shab] Share, NetMarket (Hrsg.): Mobile Browser Market Share. http://netmarketshare.com/browser-market-share.aspx?qprid= 0&qpcustomd=1, Abruf: 26. Januar. 2012 [Shac] Share, NetMarket (Hrsg.): Mobile Browser Market Share Trend. http://netmarketshare.com/browser-market-share.aspx? qprid=1&qpcustomb=1&qptimeframe=M&qpsp=143&qpnp=13, Abruf:

Toni Bolduan

IX

Literaturverzeichnis 26. Januar. 2012

Fachhochschule Schmalkalden SS 2011

[SMCW] Slocum, Jack ; Moeskau, Brian ; Conran, Aaron ; Waters, Rich: JavaScript Framework for Rich Apps in Every Browser. http://www. sencha.com/products/extjs/, Abruf: 21. Februar. 2012 [Ste] Stephenson, Sam: Prototype - An object-oriented Javascript Framework. http://api.prototypejs.org/, Abruf: 16. Februar. 2012 [VB11] Vollendorf, Maximillian ; Bongers, Frank: jQuery - Das Praxisbuch. Galileo Press, 2011 [15] (W3C), World Wide Web C.: Web Storage. http://www.w3.org/TR/ webstorage/, Abruf: 13. März. 2012 [Wik12] Wikipedia: Comparison of layout engines (HTML5) — Wikipedia, The Free Encyclopedia. http://en.wikipedia.org/w/index.php? title=Comparison_of_layout_engines_(HTML5)&oldid=475427521. Version: 2012. – [Online; accessed 21-February-2012]

Toni Bolduan

X

A Programmvorstellung

Abbildung A.1: Hauptmenü

Abbildung A.2: News - Listenübersicht

Toni Bolduan

XI

A. Programmvorstellung

Fachhochschule Schmalkalden SS 2011

Abbildung A.3: News - Detailansicht

Abbildung A.4: Schedule - Studiengangübersicht

Toni Bolduan

XII

A. Programmvorstellung

Fachhochschule Schmalkalden SS 2011

Abbildung A.5: Schedule - Detailansicht

Abbildung A.6: MySchedule - Übersicht

Toni Bolduan

XIII

B Details zur Nutzwertanalyse
Funktion Feature Detection JSON DOM-Wrapped DOMManipulation DOM-Traversal Event-Handling Selectors Themes Resizing Gesamt jQuery Ja Ja Ja Ja Ja Ja Ja Ja Ja 9 ExtJS Nein Ja Ja Ja Ja Ja Ja Nein Ja 7 GWT Nein Ja Ja Ja Ja Ja Ja Ja Nein 7 MooTools Ja Ja Nein Ja Ja Ja Ja Nein Nein 6 Prototype Nein Ja Nein Ja Ja Ja Ja Nein Nein 5

Tabelle B.1: Punkteverteilung zu Kriterium Funktionsumfang[Len] Browser Internet Explorer Firefox Opera Chrome Safari Gesamt jQuery 6.0+ 3.6+ 9.0+ 1.0+ 5.0.6 8 ExtJS 6.0+ 3.6+ 10.5+ 6.0+ 3.0+ 7 GWT 6.0+ 1.0+ 9.0+ no official support 2.0+ 7 MooTools 6.0+ 2.0+ 9.0+ 4.0+ 3.0+ 7 Prototype 6.0+ 2.0+ 9.25+ 1.0 2.0+ 8

Tabelle B.2: Punkteverteilung zu Kriterium Browsersupport[Len] Paket minified uncompressed Gesamt jQuery 72 KB 229 KB 4 ExtJS 48 KB 502 KB 4 GWT 180 MB 0 MooTools 65 KB 101 KB 5 Prototype 46 KB 278 KB 5

Tabelle B.3: Punkteverteilung zu Kriterium Größe des Frameworks[Sch]

Toni Bolduan

XIV

B. Details zur Nutzwertanalyse Paket Dokumentation der API Tutorial Demo Gesamt jQuery 2 1 1 4 ExtJS 2 1 1 4

Fachhochschule Schmalkalden SS 2011 GWT 2 0 1 3 MooTools 2 1 1 4 Prototype 2 1 0 3

Tabelle B.4: Punkteverteilung zu Kriterium Komplexität[Sch]
.

Toni Bolduan

XV

C Quelltext
Der gesamte Quelltext des Programms befindet sich auf der beigelegten CD.

Toni Bolduan

XVI

Eidesstattliche Erklärung
Ich versichere an Eides Statt durch meine eigenhändige Unterschrift, dass ich die vorliegende Arbeit selbstständig und ohne fremde Hilfe angefertigt habe. Alle Stellen, die wörtlich oder dem Sinn nach auf Publikationen oder Vorträgen anderer Autoren beruhen, sind als solche kenntlich gemacht. Ich versichere außerdem, dass ich keine andere als die angegebene Literatur verwendet habe. Diese Versicherung bezieht sich auch auf alle in der Arbeit enthaltenen Zeichnungen, Skizzen, bildlichen Darstellungen und dergleichen. Die Arbeit wurde bisher keiner anderen Prüfungsbehörde vorgelegt und auch noch nicht veröffentlicht.

Veilsdorf, den 22. März 2012
Ort, Datum Toni Bolduan

Toni Bolduan

XVII