Entwicklung Einer Auf JavaScript undHTML5 Basierenden Smart-ClientApplikation Zur Nutzung derHochschul-InformationsplattformSpirit Der FH-Schmalkalden Fürmobile Endgeräte

Bachelorarbeit
Entwicklung einer auf JavaScript und HTML5 basierenden Smart-Client Applikation zur Nutzung der Hochschul-Informationsplattform Spirit der FH-Schmalkalden fr mobile Endgerte
Zur Erlangung des akademischen Grades eines Bachelor of Science - Informatik -
Fakultt Informatik Referent: Prof. Dr. Oliver Braun Korreferent: Dipl.-Inf.(FH) Ren Brothuhn eingereicht von: Toni Bolduan Matr.-Nr. 270794 Veilsdorfer Strae 67 98669 Veilsdorf Schmalkalden, den 22. Mrz 2012
Zusammenfassung Smartphones und Tablets sind ein wichtiger Bestandteil der heutigen Gesellschaft und mit der Einfhrung der Touchscreens ein, von der breiten Masse akzeptierter Ersatz fr herkmmliche Handys, welcher nicht mehr wegzudenken ist. Das Bedienkonzept und die Prsentation von Informationen im kompakten Format von jedem beliebigen Ort aus, sowie die Mglichkeit der Funktionserweiterung durch Programme, genannt Apps, machen Smartphones bzw. andere mobile Endgerte zum Begleiter im tglichen Leben. Die Basis fr diese Apps bildet das dem Smartphone unterliegende Betriebssystem. Derzeit existiert eine Vielzahl an Betriebssystemen fr Smartphones. Android, iOS, Windows Phone 7, um nur die Bekanntesten und Verbreitetsten unter ihnen zu nennen, bieten unzhlige Programme. Doch genau in dieser Vielzahl steckt ein groer Nachteil. So muss fr jedes Betriebssystem eine eigene Anwendung geschrieben werden, dass den Aufwand, ein Produkt der breiten Masse zugnglich zu machen, stark erhht. Abhilfe schat hier das Konzept der Smart-Clients bzw. Webapps. In dieser Arbeit wird das Konzept der Webapp und ihre Umsetzbarkeit fr die SpiritPlattform der FH-Schmalkalden am Beispiel eines prototypischen Programmes untersucht. Die Schwerpunkte liegen dabei auf dem Prfen des Mglichkeitenrahmens und dem Bereitstellen der Grundfunktionalitten der Spirit-Plattform, sowie einigen Zusatzfunktionen, die in den folgenden Kapiteln nher erklrt werden sollen.
Danksagung An dieser Stelle mchte ich allen denjenigen danken, die dazu beigetragen haben, dass diese Arbeit erstellt wurde. Zuerst mchte ich meinen Eltern danken, die mich in jeder Hinsicht untersttzt haben und sehr viel Geduld mit mir und meinem langen Studium hatten. Ohne sie wre das Studium nicht zu bewltigen gewesen. Ich danke gesondert Herrn Prof. Dr. Oliver Braun, der diese Arbeit erst ermglichte 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 oenes Ohr fr Ideen, Fragen und Probleme. Weiterhin mchte ich dem Spirit-Team fr dessen Hilfe danken, gesondert Herrn Marcus Denison fr seine Anregungen, Tipps und Zeit, mir die eine oder andere Vorgehensweise innerhalb der Spirit-Plattform zu erklren. Abschlieend mchte 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 Grasche Benutzeroberche . . 4.1.1 Konzept . . . . . . . . . 4.1.2 Menfhrung . . . . . . 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 Resmee
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 Erklrung VI VII VIII IX XI XIV XVI XVII
Toni Bolduan
1 Einleitung
Diese Bachelorarbeit gliedert sich in sieben Bereiche. Zunchst wird einleitend erklrt, was Webapps sind und welchen Stellenwert diese in der heutigen Gesellschaft einnehmen. Anschlieend wird das Spirit-Projekt nher erlutert, in dessen Rahmen sich die Webapp und diese Arbeit bendet. In Kapitel 2 wird erklrt, welche Aufgaben zu erfllen sind und welche Anforderungen sich daraus ergeben. Im darauf folgenden Kapitel Vorbetrachtungen werden Zielplattform und Zielframework anhand wissenschaftlicher Analysen ermittelt. Kapitel 4 beschftigt sich mit der konzeptionellen Struktur und dem Aufbau der Webapp, welche in Kapitel 5 Implementierung anhand ausgewhlter Programmausschnitte nher erlutert werden. Abschlieend wird das Programm kurz vorgestellt und ausgewertet. In Kapitel 7 werden Anregungen ber das Programm und seine weitere Entwicklung gegeben.
1.1 Webapps
Der Begri Webapp (Abkrzung fr web application") bedeutet nichts weiter als ein Programm (Applikation), welches mittels eines Browsers von einem Webserver geladen wird und somit nicht auf einem Endgert installiert werden muss. Generell sollte sie die Funktionalitt einer nativen App enthalten. Die Webapp wird als solche wahrgenommen. Vielmehr bietet sie eine Benutzeroberche 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 Endgertes zugreifen kann. Dieser Funktionsumfang ist jedoch stark eingeschrnkt.
1.1.1 Vorteile und Nachteile

Der Vorteil von Webapps liegt dabei eindeutig auf der Hand. Die Anwendung kann nahezu auf jedem online-fhigen mobilen Endgert genutzt werden. Da sie nicht vom jeweiligen Betriebssystem abhngig ist, muss die Webapp nicht installiert werden. Sie luft im Browser des Endgertes ab. Dem vermeintlichen Nachteil der Browserabhngigkeit 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 Endgert senkt die Belastung des vorhandenen Speichers. Eine Webapp verbraucht nur solange temporren Speicherplatz, bis sie durch Beenden des Browsers diesen wieder freigibt. Weitere Einsparungen knnen 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 abhngig von der im jeweiligen Browser verwendeten Layout-Engine. Es kann dadurch zu Abweichungen in der Darstellung kommen.
1.1.2 Fazit
Webapps bieten die Mglichkeit Anwendungen plattformunabhngig auf nahezu jedem mobilen Endgert anzubieten. Dabei muss auf den eingeschrnkten Funktionsumfang geachtet werden. Im Rahmen dieser Bachelorarbeit wird berprft ob die Umsetzung der Kernkomponenten der Spirit-Plattform anhand einer prototypischen Anwendung mglich ist.
1.2 Spirit
Das Projekt Spirit ist ein an der Fakultt Informatik der FH-Schmalkalden gestartetes Studentenprojekt, das sich mit der Entwicklung eines Informationsportales beschftigt. Unter Leitung von Professor Dr. Oliver Braun arbeiten Studenten aus verschiedenen Studiengngen und -graden an der Entwicklung dieses Projektes.
Ziele des Projektes Ziel des Projekts ist die Neuimplementierung des bestehenden Informationsportals. Damit einhergehend erfolgt die sukzessive Ablsung der bestehenden Plattform. Deshalb wird die vorhandene Plattform zunchst in die Neuimplementierung migriert, um den reibungslosen Ablauf weiterhin zu garantieren. Anschlieend soll Spirit das derzeitige Informationsportal ablsen. Das Informationsportal Spirit wird als Cloud-Service entwickelt, um eine breite Masse an Endgerten bedienen zu knnen und somit unabhngig von Gert und Plattform zu sein. Dazu wurde das Projekt in kleinere Teilbereiche untergliedert, deren Funktionen im Folgenden kurz erklrt werden sollen.
Toni Bolduan
Seite 2 von 47
1. Einleitung
1.2.1 Teilbereiche
Core Dieser Bereich des Spirit-Projektes befasst sich mit der Entwicklung des zur Erstellung der Stundenplne notwendigen Kernsystems. Core wurde im Rahmen eines Praktikums in Haskell entwickelt.
News News ist das derzeitig verwendete Informationsportal fr 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 fr Dozenten, mit der sie Informationen, welche die Studenten betreen, in Spirit einstellen knnen.
PlanningWeb PlanningWeb ist eine ebenfalls in Lift/Scala implementierte Web-Applikation, die es sich zur Aufgabe macht mit Informationen, welche fr die Stundenplanung notwendig sind, in Spirit eingestellt werden knnen.
Data Neben Core ist der Bereich Data einer der Wichtigsten. Er befasst sich mit der Datenhaltung, der fr Stundenplne, 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
Im Bereich Mobile werden Anwendungen (Apps) fr Mobile Endgerte entwickelt. Neben den bestehenden Anwendungen fr die Betriebssysteme Android und Windows Phone 7, nden derzeit in diesem Teilbereich weitere Entwicklungen, wie die Spirit-App fr iOS und eine Webapp-Alternative fr 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 herkmmlichen Tool erstellten Stundenplandaten fr Spirit aufzubereiten und ber einen Dienst in die Datenbank einzupegen.
1.2.2 Eingliederung dieser Arbeit

Diese Bachelorarbeit ist im Bereich Mobile des Spirit-Projektes angesiedelt. Mit dem Fokus auf Plattform- und Gerteunabhngigkeit soll diese Arbeit einen Weg zeigen, mglichst viele Studenten, Mitarbeiter und Professoren erreichen zu knnen, ohne dabei an Gertespezikationen zu hngen. Weiterhin erweitert diese Arbeit den Bereich Mobile des Spirit-Projektes und versucht das bestehende Portfolio aus plattformabhngigen Applikationen um den Faktor Gerteunabhngigkeit zu erweitern bzw. zu vervollstndigen.
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 gerteunabhngigen Applikation, die es ermglicht, 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 Mglichkeit personalisierte Stundenplne zu erstellen Etablieren einer Mglichkeit personalisierte Stundenplne 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
Es muss eine geeignete Plattform gefunden werden, mit der die Anwendung entwickelt werden kann. Weiterhin muss eine Plattform gewhlt werden, auf der die Applikation laufen soll. Dazu sollen Analysen durchgefhrt werden, um die mglichst beste Plattform zu ermitteln.
Performance Die Applikation muss eine gewisse Bedienungsgeschwindigkeit erfllen. 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 bestmglichst zu integrieren, soll darauf geachtet werden bereits denierte Standards einzuhalten und vorhandenen optische Komponenten zu benutzen.
Verstndlichkeit Die Applikation soll unter Verwendung von Design, optischer Komponenten und eines Bedienkonzept selbsterklrend funktionieren. Der Nutzer soll einfach erkennen knnen, um welche Funktionalitten 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 fr die Entwicklung der Webapp bentigt werden. Dazu wird mit Hilfe von wissenschaftlichen Analysen zunchst eine Auswahl an zu untersttzenden Browsern gefunden und anschlieend 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 Endgertes, da die Webapp in diesem ausgefhrt wird. Die Webapp soll versuchen, zu einem gewissen Teil Plattformunabhngigkeit anzustreben. Hierbei wird im Allgemeinen nur ein Browser bentigt und im Speziellen eine Auswahl von Browsern.
3.1.1 Marktanteile
Die Wahl der Browser, fr welche die Webapp entwickelt werden soll, wird anhand ihres Martkanteils gemessen. Zunchst wird das Nutzungsverhalten der User im Desktop-, sowie im Mobile-Segment analysiert. Daraufhin wird erklrt, 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 Verfgung. So ergibt sich laut NetMarketShare fr 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] Whrend 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-Gerten, unter mobilen Endgerten so gut wie keinerlei Verbreitung. Aktuell bendet 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 untersttzenden Browser zu treen 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] Zunchst lsst Monat Dez 2010 Jan 2011 Feb 2011 Mr 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 % hlt. 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 annhernd gleichbleibendem Marktanteil von 3%. Gut erkennen lsst sich dies an folgender Grak.
Toni Bolduan
Seite 8 von 47
3. Vorbetrachtungen
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 Prfkriterium ist die Umsetzbarkeit der Anforderungen in den jeweiligen Browsern. Dazu werden nachfolgend alle Browserengines auf ihre HTML5-, CSS3- und Javascript-Funktionalitten berprft. 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 dazugehrigen Browserengines
HTML5- und Javascript-Support Im diesem Gebiet werden Elemente aus drei Bereichen auf ihre Untersttzung seitens der browserunterliegenden Rendering- und Layout-Engines untersucht. Diese sind zum Einen spezielle neu eingefhrte HTML-Tags und zum Anderen geforderte Spezikationen, sowie eine API zur Ansteuerung von DOM-Elementen. Diese Elemente werden fr die Umsetzung bzw. fr eventuell sptere Anpassungen bentigt und garantieren auch zuknftig die Untersttzung 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 Spezikation Oine Web Yes 2.6 Applications Web Storage 525 2.2 APIs getElementsByClassName 525 2.1
Tabelle 3.5: Untersttzung bentigter HTML Komponenten [Wik12] CSS3-Support Neben der Untersttzung von HTML5 ist die Untersttzung einiger CSS3-Komponenten seitens der Browser zu beachten. Fr unter Anderem Gestaltung und Positionierung von DOM-Elementen werden einige spezielle CSS3-Selektoren, wie z.B.: :nth-child, :root oder :empty fr strukturelle Pseudoklassen bentigt. Alle oben aufgefhrten Browser untersttzen diese Selektoren.
Zusammenfassung Die oben aufgefhrten Tabellen zeigen, dass nicht alle Browser fr die Umsetzung der Webapp in Frage kommen. So fehlt beispielsweise dem aktuellen Opera Mini Browser(Presto 2.5) die Untersttzung fr die bentigten HTML-Tags, oder dem Internet Explorer Mobile 8 die Mglichkeit auf den DOM-Storage zuzugreifen. Diese untersttzen erst in den kommenden Versionen oder diversen, bereits verfgbaren Nightly-Builds, die fr die Webapp bentigten Komponenten.
3.2 Framework
Ein Framework ist ein in der Softwaretechnik verwendetes Programmiergerst. Es wird als Skelett einer Applikation verstanden, mit dessen Hilfe Entwicklern bestehende Programmierkonstrukte und Funktionalitten in vereinfachter Weise zugnglich gemacht wird. [GHJV94]
Weiterhin kann man Frameworks als zustzliche Vermittlungsschicht zwischen eigentlicher Programmiersprache und Entwickler verstehen. Ein Framework selbst be-
Toni Bolduan
Seite 10 von 47
3. Vorbetrachtungen
steht aus Programmdateien, welche in derselben Sprache wie das eigentliche Programm verfasst wurden. Das heit, 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 gegenbergestellt werden. Der wahrscheinlich grte Vorteil der Verwendung von JavaScript-Frameworks ist die Mglichkeit Elemente des DOM-Baumes einfach manipulieren zu knnen. Frameworks ermglichen es ohne groen Programmieraufwand Elemente des DOMBaumes anzusprechen, sie zu entfernen oder Eigenschaften wie Attribute zu ndern. Sie dynamisieren den Zugri. Dabei kommt ein weiterer Vorteil zum Tragen. JavaScript-Frameworks berbrcken Unterschiede zwischen Browsern und ermglichen eine einheitliche DOM-Manipulation bzw. ein einheitliches Event-Handling, was die Entwicklung der Webapp begnstigt. Entscheidende Nachteile von Frameworks ergeben sich aus deren Vorteilen. Durch die Verfgbarkeit einfacherer und bersichtlicherer Klassen und Funktionen werden interne Vorgnge verdeckt, manchmal ist es aber unabdingbar interne Vorgnge zu kennen. Weiterhin ist durch die Vorschriften, die das Framework vorgibt ein Arbeiten nur innerhalb dieser Anweisungen mglich. Es entsteht zustzlicher Lernaufwand, die Funktionsweisen des Frameworks zu verstehen, was zu Zeitproblemen fhren kann.
3.2.1 Vorstellung der JavaScript-Frameworks

In diesem Kapitel sollen die bekanntesten freien JavaScript-Frameworks kurz vorgestellt und im Anschluss anhand ausgewhlter Kriterien entsprechend der gestellten Anforderungen ausgewhlt werden.
Prototype Prototype ist ein unter der MIT-Lizenz verentlichtes, 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, Untersttzung fr AJAX1 , sowie einfache DOMManipulation.[Ste]
AJAX ist ein Akronym fr Asynchronous JavaScript and XML und beschreibt ein Konzept zur asynchronen Datenbertragung zwischen Browser und einem Server. [Kyr]
Toni Bolduan
Seite 11 von 47
3. Vorbetrachtungen MooTools
Das freie Framework Mootools ist ein ebenfalls unter der MIT-Lizenz verentlichtes, kompaktes und modular aufgebautes JavaScript-Framework. Neben der Kompaktheit und Erweiterbarkeit steht hier Objektorientierung, sowie eine klar ausdokumentierte API zur Verfgung.[New08]
jQuery Das von John Resig 2006 entwickelte freie JavaScript-Framework jQuery ist wohl das bekannteste und am weit verbreitetste unter den verfgbaren Frameworks. Neben einer sehr guten Dokumentation, zahlreichen Tutorials und Demos zeichnet es sich vor Allem durch seine leicht verstndliche Anwendung und durch Browserkompatibilitt 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-Untersttzung, auf der Entwicklung interaktiver Webanwendungen. Dazu bietet ExtJS eine Sammlung von verschiedenen Formularelementen, wie z.B. Registerkarten-Darstellung oder Kontextmens 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 knnen. 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 nden wird dieses auf folgende Kriterien hin berprft: Browserkompatibilitt Komplexitt/Verstndlichkeit/Dokumentation Gre des Frameworks
Toni Bolduan
Seite 12 von 47
3. Vorbetrachtungen Geschwindigkeit Funktionsumfang Untersttzung fr mobile Gerte
Die Gewichtung der Kriterien wurde nach Einschtzung der Notwendigkeit fr die Webapp durch den Autor gewhlt. Weiterhin basiert die Einschtzung 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 Browserkompatibilitt Komplexitt Gre 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 fr mobile Browser teilen. Seit 2010 wurde die Entwicklung fr Symbian eingestellt, daher ist damit zu rechnen, dass es zuknftig vom Markt verschwinden wird. Daraus ergibt sich, dass die Webapp auf den zuerst genannten Browsern garantiert funktionsfhig sein muss. Aus den ausgewhlten Browsern gehen die zu untersttzenden Browser- bzw. LayoutEngines hervor; siehe Tabelle 3.4. Um eine mglichst hohe Abdeckung des Browsermarktes zu gewhrleisten, werden auch Browser-Engines aus dem Bereich der Anderen bercksichtigt. Anhand der Tabelle 3.5 lsst sich erkennen, dass die dem Internet Explorer - Mobile Browser zugrundeliegende Browser-Engine Trident die Spezikation Oine Web Applications nicht erfllt und somit ausscheidet. Weiterhin ist zu erkennen, dass die
Toni Bolduan
Seite 13 von 47
3. Vorbetrachtungen
Gecko-Engine die Voraussetzungen erfllt 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 fllt letzten Endes auf jQuery, da dieses die meisten Punkte erzielt und dank Plugin-System den grten Funktionsumfang besitzt.
Toni Bolduan
Seite 14 von 47
4 Struktur der Software

Dieses Kapitel soll zunchst einen berblick ber die Komponenten der Software und die grasche Benutzeroberche der Webapp geben und anschlieend verdeutlichen, welche Komponenten in welcher Weise miteinander agieren. Dabei wird unter Anderem auf die Seitenaufteilung, die Menfhrung, Design-Denitionen und strukturelle Merkmale eingegangen, sowie der Ablauf der Software beschrieben.
4.1 Grasche Benutzeroberche

Die wichtigste Komponente neben den Kernfunktionalitten bildet die grasche Benutzeroberche (engl.: Graphical User Interface), kurz GUI. Sie ist ein integraler Bestandteil der Webapp, denn mit ihr wird dem Nutzer die Mglichkeit 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 Untermenpunkten zu den jeweiligen Funktionalitten der Webapp (siehe Abbildung 4.1). Je nach Menge der Funktionalitten 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 zustzlich verkleinert. Weiterhin soll es optisch ersichtlich sein, dass mehr als die eingeblendeten Meneintrge existieren.
Als Viewport bezeichnet man den Bereich des Browsers, in welchem die Inhalte der Webseite dargestellt werden.
Toni Bolduan
Seite 15 von 47
4. Struktur der Software
Abbildung 4.1: Aufbau des Hauptmens Gem dem Aufgaben- und Anforderungskatalog (siehe Kapitel 2) untersttzt die prototypische Umsetzung der Webapp drei Grundfunktionalitten (News, Schedule, MySchedule). Mit Betreten des Untermens News soll der Nutzer zunchst in Form einer Liste einen berblick ber alle verfgbaren News-Eintrge erhalten. Die angezeigten Informationen belaufen sich innerhalb der bersicht auf drei Komponenten. Wie in Abbildung 4.2 zu erkennen, sind diese der betreende Studiengang, der Autor der News und der Betre der News. Nach einem Klick/Touch auf das entsprechende Listenelement soll der Nutzer zur Detailansicht einer News weitergeleitet werden, welche zustzlich zu den Informationen aus der Listenbersicht noch Inhalt und das Datum der News anzeigen soll.
Abbildung 4.2: Aufbau des Untermenpunktes News Das Untermen Schedule soll hnlich aufgebaut sein wie das Untermen News. Der Nutzer soll zunchst eine Auswahl aller verfgbaren Stundenplne zu den einzelnen
Toni Bolduan
Seite 16 von 47
Studiengngen 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 Stundenplanbersicht Die Detailansicht von Schedule unterscheidet sich dahingehend von denen der News, dass diese pro Ansicht einen Tag des gewhlten Stundenplans anzeigen soll. Wie in Abbildung 4.4 zu sehen, soll mittels Navigationsbuttons dem Nutzer die Mglichkeit 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 gewhlt 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.1.2 Menfhrung
Die Webapp soll eine strikte Menfhrung besitzen. Mit dieser Menfhrung soll ein Rahmen geschaen 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 Untermenpunkten, die nach erfolgreichem oder nicht erfolgreichem Abschlieen wieder in das Hauptmen zurckfhren.
Seite aufrufen
Startseite anzeigen
Hauptmen Anzeigen
Untermen auswhlen [Back-Button gedrckt]
[News ausgewhlt]
[Schedule ausgewhlt]
[MySchedule ausgewhlt]
Newsbersicht anzeigen Schedulebersicht anzeigen
Tagesansicht Anzeigen
Auswahl treffen
Aktion
Vorherige Tagesansicht
[nein] [ja] Aktion Detailansicht Anzeigen [Back-Button gedrckt] [Stundenplan ausgewhlt] [Event ausgewhlt] Abfrage Delete Event [Back-Button] berprfung [Next-Button] Nchste Tagesansicht
Tagesansicht Anzeigen
Lsche Event
[ja]
[nein]
Vorherige Tagesansicht Aktion
Nchste Tagesansicht
[nein] [ja]
berprfung: ist-Montag
[Back-Button] [Event ausgewhlt]
[Next-Button]
Abfrage Add To My Schedule [ja]
Fge Event hinzu
[nein]
Abbildung 4.5: Aktivittsdiagramm des regulren Anwendungsfalles
Toni Bolduan
Seite 18 von 47
4.2 Kernkomponenten
Um die Entwicklung der Webapp nachvollziehbar und im Hinblick auf Erweiterbarkeit modularisierbar zu gestalten wird zunchst 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 benden sich die Navigationselemente, sowie eine kurze Beschreibung der jeweiligen Seite. Im Bereich Section werden die eigentlichen Seiteninhalte dargestellt.
Abbildung 4.6: Grundgerst einer Ansicht Der Aufbau einer Seite im Detail wird in Kapitel 5.3 nher 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 fr jedes untersttzte Feature: Die Komponente Data ist fr den Zugri auf Stundenplan- und News-Daten verantwortlich. Sie stellt Javascript-Klassen und -Funktionen zur Verfgung,
2
Unter diesem Prinzip ist die Trennung von Struktur, Prsentation und Verhalten zu verstehen.
Toni Bolduan
Seite 19 von 47
um die Rohdaten in ein eigenes Datenformat zu berfhren und dieses in der Anwendung anzubieten. Innerhalb der Komponente Structure werden JavaScript-Klassen zur Erstellung der HTML-Struktur zur Verfgung gestellt. Mit Presentation wird eine Komponente geschaen, die fr die Ausgestaltung der HTML-Struktur zustndig ist. Hier werden mittels CSS und JavaScript Layout und Design festgelegt.
Komposition Die Komponente Data ist die Basiskomponente. Sie besitzt keinerlei Abhngigkeiten zu anderen Komponenten. In ihr wird festgelegt, in welchem Format die Daten zur Verfgung gestellt werden. Structure dagegen bentigt zum Erstellen der HTML-Struktur des Seiteninhalts die in Kapitel 4.2.1 bentigte Grundstruktur einer Seite/Ansicht. Die Ergebnisse von Data und Structure werden von der Komponente Presentation bentigt. 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 deniert. Die dazugehrigen 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 ausgewhlter Funktionalitten unter Verwendung der in Kapitel 3 und 4 gewonnenen Erkenntnisse beschrieben. Das Kapitel gliedert sich in vier Abschnitte. Zunchst 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 nher auf die Implementierung der Webapp eingegangen wird mssen zunchst 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 mssen. Das Zusammenfhren der WebappFeatures wird ebenfalls im Kopfbereich der Datei index.html durchgefhrt. Weiterhin ergeben sich aus der Wahl des Frameworks jQuery auf Grund des PluginSystems neue Mglichkeiten. Dazu zhlen unter Anderem die Untersttzung fr mobile Endgerte durch das jQuery-Plugin jQuery Mobile, kurz jQM, welches innerhalb der Entwicklung Verwendung ndet. Dies uert sich durch die Verwendung plugineigener HTML-Tags und Attribute, zum Beispiel zur Strukturierung von WebappAnsichten oder fr 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-Gerst, dass im Body-Tag der HTML-Seite eingefgt werden muss.
Unter unobtrusive JavaScript versteht man die Trennung von HTML und JavaScript.
Toni Bolduan
Seite 21 von 47
5. Implementierung
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 Schaltche verweisen. Mit href wird das Ziel der Schaltchen 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 erklrten Seitenaufbaus nehmen die Seiteninhalte normalerweise die volle Breite des Bildschirms ein. Auf der Menseite ist dies jedoch anders. Um die einzelnen Meneintrge 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-* deniert. Als Werte werden hier Buchstaben von a bis d eingetragen, die stellvertretend fr die Spaltenanzahlen 2 bis 5 stehen. Jedes Rasterelement ist ein, durch eine eindeutige ID gekennzeichneter Bereich, der einen Link zu einer Seitenansicht enthlt, 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 fr die Positionen 1 und 2, im
Toni Bolduan
Seite 22 von 47
5. Implementierung Raster festgelegt.
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 Mens / Auszug aus index.html Das Men besitzt fnf Meneintrge. 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. Zunchst 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 mssen. Im Anschluss werden die Teilkomponenten Data, Structure und Presentation anhand ausgewhlter Funktionen und Methoden der News-Klasse beschrieben.
Toni Bolduan
Seite 23 von 47
5. Implementierung
5.4.1 News Klasse

Die News-Klasse als solche besitzt keine eigene Denition. 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 mglich 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 knnen, knnen auch Funktionsobjekte erstellt werden (siehe Listing 5.3). Durch Aufrufen der Generatorfunktion wird ein Objekt zurckgegeben, 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 zhlen das Laden von News, das Erstellen der News-Seite, sowie das Fllen 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
5.4.2 Datenformat der News-Daten

Das fr 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 heit Informationen werden immer mit Schlsselwertpaaren nach dem Muster Schlssel: Wert angegeben, wobei der Schlssel 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 nher erklrt wird. Der REST-Service bietet die Daten nur im Gesamten an, folglich ist es nicht mglich einzelne News durch einen einzelnen Aufruf zu erhalten. Zwar hat dies performancetechnische Nachteile, jedoch ermglicht es der Webapp alle Daten in einem Zug abzuarbeiten. Da es sich bei den Daten um Zeichenketten handelt ist die Gesamtgre der zu bertragenden Daten relativ gering. Sie bendet sich im zweistelligen Kilobyte-Bereich und behindert auch auf langsameren Gerten nur bedingt die bertragung. Die Inhalte der Daten einer News sind aus Listing 5.4 zu entnehmen. Sie sind selbsterklrend und bedrfen keiner genaueren Erluterung. Neben dem oziellen Datenformat der News vom REST-Service gibt es ein weiteres webapp-eigenes Datenformat, dass dem JSON-Format hnelt. Der Grund fr die Nutzung eines eigenen, weiteren Datenformats wird in Kapitel 5.5.2 nher erlutert. Dieses Datenformat ist eine strukturelle Nachbildung des JSON-Formates in JavaScript. Dazu existieren die drei Klassen Datapair, Single_News und News_Set. Nachfolgend wird erklrt wie diese aufgebaut sind. Alle Klassen besitzen Attribute und Get-Methoden, um auf diese zuzugreifen.
Toni Bolduan
Seite 25 von 47
5. Implementierung
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
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 berfhrt.
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 Rckgabewert 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 ausgefhrt wird. Diese wird benutzt, um die Daten on-the-y in das eigene Datenformat zu berfhren. Weiterhin werden in der Callback-Funktion mehrere nested functions 3 verwendet. Der Funktionsparameter data in Zeile 4 reprsentiert das Datenobjekt. Mit $.each(data , function(){...}); werden die Datenelemente sequentiell abgearbeitet. Jedes Datenelement umfasst, wie in Listing 5.4 angegeben, mehrere Datenpaare. Deshalb wird fr jedes JSON-Datenpaar ein Datapair-Objekt angelegt, welche die Werte fr Schlssel(Key) und Wert(Value) des JSON-Datenpaares enthalten (Zeile 13). Anschlieend wird mit tmp_singlenews.addDatapair(tmp_datapair); dieses Datenpaar zu einer einzelnen News hinzugefgt. Nachdem alle Datenpaare abgespeichert wurden, wird das Objekt single_news zu dem in der News-Klasse vorhandenen Array tmp_news_set hinzugefgt.
Als Nested Functions bezeichnet man Funktionen, die in Funktionen eingebettet werden.
Toni Bolduan
Seite 27 von 47
5. Implementierung
5.4.4 Erstellen der News-Seite

Zum Erstellen der News-Seite bietet die News-Klasse drei Methoden an. ShowNewsOnElement erzeugt die Listenansicht der verfgbaren News, createNewsPage die Detailansichten und getValueFromKey liefert einen Wert zum passenden Schlssel 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 anfgen. Reprsentieren diese ein HTML-Element, wie beispielsweise <li></li> (Zeile 6), werden diese als solche in das HTML-Dokument angefgt. 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 nden. Anschlieend wird ein Listenelement zu der Listenansicht hinzugefgt. Das Listenelement bekommt dazu eine eindeutige ID zugewiesen (Zeile 8), welche bentigt wird, um mit $(#listelement- + j).append(... a href=newsPage- + j ...); einen Link zur Detailansicht an dieses Listenelement anzufgen. Darauf folgend wird eine Tabelle erzeugt, die den zur Verfgung stehenden Anzeigebereich in vier Teile gliedert. Mit getValueFromKey (siehe Listing 5.7wird aus dem News_Set
Toni Bolduan
Seite 28 von 47
5. Implementierung
der News-Klasse der zum Schlssel passende Wert gesucht und eingefgt. Fr die Listenansicht sind es das betreende Semester, der Autor und der Betre 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 fr alle im News_Set vorhandenen News durchgefhrt (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 Schlssel und passendem Schlsselwert aus Datenstruktur Die Methode getValueFromKey liefert zu einem gegebenen Schlssel und News-Index den passenden Schlsselwert. Dazu wird fr alle im News-Set existierenden News geprft, ob die enthaltenden Datenpaare den gesuchten Schlssel enthalten und ob diese auch zu der richtigen News gehren (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
Die Methode createNewsPage der News-Klasse erstellt die Detailansichten einer News. Dazu wird zunchst 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 angefgt (Zeile 5). Innerhalb des Content-Bereichs wird zustzlich 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) einfgt.
5.5 Schedule
Die Beschreibung der Implementierung der Schedule-Komponente erfolgt analog zu der, aus der News-Komponente bekannten Vorgehensweise. Zunchst werden die Klasse Schedule und das verwendete Datenformat beschrieben. Anschlieend folgt die Erklrung der fr die Umsetzung der Data-Komponente zustndigen Verarbeitungsklasse JSONProcessor. Zuletzt wird die Erstellung der Struktur der ScheduleSeitenansichten nher 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
Die Schedule-Klasse fungiert als Compositor der Komponenten Data, Structure und Presentation. Sie bietet Methoden zur Verwaltung verschiedener Stundenplne, 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
So besitzt beispielsweise der Schlssel member (Zeile 7) keinen Stringwert, sondern ein Array von Objekten, die wiederum Schlsselwertpaarelemente besitzen. Die Komplexitt der Datenstruktur ndet seinen Hhepunkt im Wert des Schlssels appointment (Zeile 15). Die komplexe Datenstruktur des JSON-Datenformats und die Tatsache, dass sich ebendieses noch im Entwicklungsprozess bendet und somit jederzeit abgendert werden kann, sind die ausschlaggebenden Grnde zur Entwicklung eines eigenen Datenformates. Dazu werden die Datencontainer aus Listing 5.5 wie folgt abgendert:
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
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 reprsentiert 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 fr die Verwendung marginal unterschiedlicher Klassen wird im Folgenden Abschnitt erklrt. Der JSON-Prozessor berfhrt 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
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 nher 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 enthlt einen sogenannten Object-Literale 4 . Damit lassen sich Methoden in Klassen verpacken, ohne dabei Instanzen dieses Objektes erstellen zu mssen. Weiterhin kann man mit ihnen einen Namensraum festlegen. Das wurde hier umgesetzt, da die Klasse JSONProcessor nicht zu stark aufgeblht werden soll und die Helfer-Methoden zum Laden der Daten nicht auerhalb der JSONProzessor-Klasse und innerhalb anderer Methoden der JSONProzessor-Klasse verfgbar sein sollen. Das Prinzip von Schutzklassen wurde damit umgesetzt. Die Methoden des Objektes Loading werden folgend erklrt:
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 Mglichkeit Arrays als solche zu erkennen, da in JavaScript alle Variablen entweder primitiven Datentypen oder dem Datentyp Object angehren. 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 Denieren von Object-Objekten in Kurzschreibweise. Innerhalb von geschweiften Klammern benden sich, durch Kommas getrennt, die Zuweisungen von Namen zu Objekten.[Sel]
4
Toni Bolduan
Seite 34 von 47
5. Implementierung
Lnge hin berprft. Existiert im Objekt die Variable length mit mindestens null Elementen, so handelt es sich um ein Array (Zeile 3 - 4). Das berfhren 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 geringfgigem 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 Schlsselwerten 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 Schlsselwert(Zeile 3) um einen primitiven Datentyp (String), so wird ein Datenpaar mit dem Schlssel und dem zugehrigen Schlsselwert erstellt und zurckgegeben. Ist der dem Schlsselwert unterliegende Datentyp dagegen vom
Toni Bolduan
Seite 35 von 47
5. Implementierung
Typ Array (Zeile 12) wird zunchst nur der Schlssel des Datenpaares eingetragen (Zeile 15). Darauf folgend wird die Lnge des Arrays berprft und im Falle eines leeren Arrays (wie es unter Anderem im Datenformat in Listing 5.10 vorkommt) mit der Lnge Null (Zeile 24) erstellt. Besitzt das Schlsselwert-Array aber Elemente, so ruft sich die Methode saveData() selbst fr 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 fr den Fall, dass der Schlsselwert vom Typ Object ist. Um auf die abgespeicherten Stundenplandaten zugreifen zu knnen, bietet die Schedule-Klasse ebenfalls eine Methode getValueFromKey. Im Unterschied zur News-Klasse besitzt diese einen zustzlichen Parameter event. Damit lassen sich Schlsselwerte anhand ihres Schlssels in einem Event suchen. In Listing 5.17 erkennt man, dass fr 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 Gltigkeit des durch die Suche zurckgegebenen Wertes berprft. Die Besonderheit des Rckgabestrings novalue ergibt sich aus dem Speziallfall, dass ein Schlsselwert zwar existent ist, aber keinen eingetragenen Wert enthlt.
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 };
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 Schlsselwert immer einen primitiven Datentyp haben muss. Danach wird auf das gesuchte Schlsselwort geprft und der Schlsselwert bei erfolgreichem Suchvorgang zurckgegeben. Ist der Schlsselwert vom Datentyp Array oder Object, so wird die Suche fr alle in ihnen bendlichen 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
5.5.3 Erstellen der Schedule-Seite

Fr das Erstellen der Tagesansichten des Stundenplans bietet die Schedule-Klasse die Methode createStructureOfSchedulePages an. Sie bekommt einen Stundenplan als Parameter bergeben und erzeugt fr diese smtliche 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() Zunchst ltert 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
Tagesansicht am Anfang oder am Ende der Woche bendet. Handelt es sich bei der Tagesansicht um einen Montag, so wird die Quellenangabe des Zurck-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 Vorwrts-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 zurck, wobei die Zahlen Null bis Sieben stellvertretend fr Montag bis Sonntag stehen. Mit der berprfung in Zeile 31 wird der Vorwrts-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, whrend Teil zwei als Container fr 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 Fllen der Event-Container mit Events. Dazu bietet die Schedule-Klasse die Methode llSchedulePages an. Diese bekommt ebenfalls als Parameter einen Stundenplan bergeben. Zunchst werden alle Informationen zu einem Event gesammelt und anschlieend in den Container eingetragen.
Toni Bolduan
Seite 39 von 47
5. Implementierung
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 llSchedulePages() Um die richtigen Seiteninhalte zu bekommen mssen die passenden Events fr 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 herausgeltert. Daraufhin wird geprft, um welchen Event-Typ es sich handelt. Je nach Art wird dann entweder das Symbol fr Vorlesung oder bung geladen und festgelegt, ob es sich um ein Event im wchentlichen oder im zweiwchentlichen Wiederholungszyklus handelt (Zeile 17-29, Listing 5.22).
Toni Bolduan
Seite 40 von 47
5. Implementierung
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 llSchedulePages()
Toni Bolduan
Seite 41 von 47
5. Implementierung
Im anschlieenden Code-Block wird der zum Event zugehrige 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 ergnzt. Das fhrt 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 fhrt, dass Vorlesungen und bungen unterschiedliche optische Kennzeichnungen bekommen (Zeile 35).
5.6 MySchedule
In diesem Unterkapitel wird die Funktionsweise des Features MySchedule nher beschrieben. Die Komponente MySchedule besitzt die zwei Klassen MySchedule und LocalStorage. Whrend 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 nher beschrieben. Die Events, welche im vorangegangenen Kapitel in die Seitenansichten eingefgt 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
Day und timeslot kennzeichnen den Zeitpunkt des Events, whrend id den Index eines zu speichernden Elements im lokalen Speicher des Browsers kennzeichnet. Das Data-Objekt enthlt eine String-Reprsentation der HTML-Baumstruktur(Listing 5.24) eines Events. Dadurch wird sichergestellt, dass selbst bei Design- oder Layoutnderungen der Events im Feature Schedule keinerlei Anpassungen durchgefhrt werden mssen. 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
Fr das Speichern der Events wird eine neue Technik fr Webanwendungen genutzt: Web Storage. Mit dieser Technik knnen Daten hnlich dem Cookie-Speichersystem im Browser persistent abgelegt werden. Der Unterschied zu Cookies liegt darin, dass sowohl lokale, als auch session-spezische Speicherungen durchgefhrt werden knnen. Weiterhin bietet Web Storage grere Speicherkapazitten[For] (zehn Megabyte) als Cookies (vier Kilobyte). Es gibt zwei Arten des Web Storage, zum Einen sessionStorage und zum Anderen localStorage. Letzeres ndet in dieser Arbeit Verwendung.[15]
5.6.4 Bereitstellen der Speicherfunktion

Die Mglichkeit des Speicherns von Events wird nach der Initialisierung der MyScheduleKlasse hinzugefgt. Das heit nachdem die Seitenansichten des MySchedule-Features erstellt sind erfolgt das Hinzufgen der Speicherfunktionalitten. 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 verfgbaren Stundenplne und deren jQUery-Objekt ermittelt. Danach wird fr jeden dieser Stundenplne zunchst der Name ermittelt und fr jede Tagesansicht des Stundenplans die einzelnen Events anhand ihres Namens ermittelt (Zeile 14). Nachdem berprft wurde, ob berhaupt Events eingetragen worden sind (Zeile 16 und 17), wird an diesen
Toni Bolduan
Seite 43 von 47
5. Implementierung
Zeitslot die Funktion createPopup gebunden. Somit wurde sichergestellt, dass nur Events abgespeichert werden knnen, die auch tatschlich existieren. Eine Besonderheit ist in Zeile 19 zu sehen. Hier wird zunchst aus dem jQuery-Selektor-String ein jQuery-Objekt geformt und anschlieend der HTML-Baum dieses Objektes als String-Reprsentation zurckgegeben. Diese ist wichtig fr 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 Drcken 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 enthlt die String-Reprsentation des HTML-Baumes des Event-Containers.
Toni Bolduan
Seite 44 von 47
5. Implementierung
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 Hinzufgen von Elementen zum Browserspeicher vor, dass nur Schlssel und dazugehrige Schlsselwertpaare abgespeichert werden knnen, wobei der Schlssel eine Zahl und der Schlsselwert ein String sein muss. Mit der Funktion stringify (Zeile 4) der JSON-API entsteht aus dem dataStructure-Object eine String-Reprsentation, die im Browserspeicher abgespeichert werden kann. Die Methode loadEvent ldt alle Eventeintrge im Browserspeicher und fgt diese in die Tagesansicht des MySchedule-Stundenplans ein. Dazu wird, wie in Listing 5.27 zu erkennen, fr alle abgespeicherten Events zunchst einmal das Event geladen und anschlieend mit Hilfe der Funktion JSON.parse in ein JavaScript-Objekt berfhrt. Das Event wird anschlieend anhand seiner Daten (Tag und Zeitslot) der jeweiligen Tagesansicht hinzugefgt (Zeile 8). Um doppelte Eintrge zu vermeiden werden vor dem Einfgen alle Eintrge gelscht (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 Resmee
Diese Arbeit hat gezeigt, dass eine plattformunabhngige Umsetzung einer Applikation zur Veranschaulichung der Stundenplne und des Aktuellen fr mobile Endgerte mglich ist. Die in Kapitel 2 angegeben Aufgaben und Anforderungen wurden erfllt. Die Webapp wurde rein clientseitig in Javascript, HTML5 und CSS3 implementiert, mit minimalen Abhngigkeiten zu serverseitigen Vorgngen. Die Applikation ist sowohl online, als auch oine nutzbar. Weiterhin wurde erstmalig im SpiritProjekt eine Mglichkeit geschaen, einen Stundenplan ber Semester- und Studienganggrenzen hinweg manuell zusammenzustellen. Das gewhlte Design der Webapp orientiert sich an den bereits existenten App-Umsetzungen der Spirit-Plattform und dem derzeitigen Design der Stundenplan-Webseite der Fakultt 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 Verbesserungsvorschlge aufgezhlt.
7.1 Funktionsumfang
Exportfunktion des Stundenplans Ersetzen der Navigations-Buttons durch Wisch-Bewegungen Mglichkeit zur Konguration der angezeigten News- / Stundenplaninformationen Mglichkeit zur Konguration des Designs Schnellwahl der Mens durch Icons im Footer-Bereich Eigenen Stundenplan lschen Funktion Funktion, um Webapp zum Startbildschirm des Endgertes hinzuzufgen
7.2 Quellcode-Verbesserungen
JSONProcessor-Klasse sowohl fr Schedule, als auch fr 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 Hauptmens . . . . . . . . . . . . . . . . Aufbau des Untermenpunktes News . . . . . . . . . Aufbau der Stundenplanbersicht . . . . . . . . . . . Aufbau der Stundenplanansicht (Montag bis Freitag) Aktivittsdiagramm des regulren Anwendungsfalles . Grundgerst 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 - Listenbersicht . . . . . News - Detailansicht . . . . . . Schedule - Studiengangbersicht 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 dazugehrigen Browserengines . . . . . . . . Untersttzung bentigter 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] . . . . Gre des Frameworks[Sch] Komplexitt[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 Mens / 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 Schlssel und passendem Schlsselwert 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 llSchedulePages() . . . . . . . . . . . . . . . . . . . . . . . Methode llSchedulePages() . . . . . . . . . . . . . . . . . . . . . . . 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. Mrz. 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 - Denition. 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. Mrz. 2012 [New08] Newton, Aaron: MooTools Essentials: The Ocial 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. Mrz. 2012 [Sel] Selfhtmnl.org: Organisation von Javascripten. http: //aktuell.de.selfhtml.org/artikel/javascript/organisation/ #object-literale, Abruf: 7. Mrz. 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
[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. Mrz. 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
A Programmvorstellung
Abbildung A.1: Hauptmen
Abbildung A.2: News - Listenbersicht
Toni Bolduan
XI
A. Programmvorstellung
Abbildung A.3: News - Detailansicht
Abbildung A.4: Schedule - Studiengangbersicht
Toni Bolduan
XII
A. Programmvorstellung
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 ocial 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 minied 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 Gre 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 Komplexitt[Sch]

.
Toni Bolduan
XV
C Quelltext
Der gesamte Quelltext des Programms bendet sich auf der beigelegten CD.
Toni Bolduan
XVI
Eidesstattliche Erklrung
Ich versichere an Eides Statt durch meine eigenhndige Unterschrift, dass ich die vorliegende Arbeit selbststndig und ohne fremde Hilfe angefertigt habe. Alle Stellen, die wrtlich oder dem Sinn nach auf Publikationen oder Vortrgen anderer Autoren beruhen, sind als solche kenntlich gemacht. Ich versichere auerdem, 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 Prfungsbehrde vorgelegt und auch noch nicht verentlicht.
Veilsdorf, den 22. Mrz 2012

Ort, Datum Toni Bolduan
Toni Bolduan
XVII

Entwicklung Einer Auf JavaScript undHTML5 Basierenden Smart-ClientApplikation Zur Nutzung derHochschul-InformationsplattformSpirit Der FH-Schmalkalden Fürmobile Endgeräte

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Entwicklung Einer Auf JavaScript undHTML5 Basierenden Smart-ClientApplikation Zur Nutzung derHochschul-InformationsplattformSpirit Der FH-Schmalkalden Fürmobile Endgeräte

Hochgeladen von

Copyright:

Verfügbare Formate

Bachelorarbeit

1.1.1 Vorteile und Nachteile

Fachhochschule Schmalkalden SS 2011

Fachhochschule Schmalkalden SS 2011

Fachhochschule Schmalkalden SS 2011

1.2.2 Eingliederung dieser Arbeit

2 Aufgaben und Anforderungen

2. Aufgaben und Anforderungen Entwicklungsplattform

Fachhochschule Schmalkalden SS 2011

3. Vorbetrachtungen Monat Dezember 2011 Safari 53.30 Opera 21.66

Fachhochschule Schmalkalden SS 2011

Marktanteile der mobilen Browser

Marktanteil in Prozent (%)

Safari Opera Mini Android Brow ser Symbian BlackBerry

Abbildung 3.1: Marktanteile der Mobilen Browser im Jahr 2011

Tabelle 3.4: Browser mit dazugehrigen Browserengines

Fachhochschule Schmalkalden SS 2011

3.2.1 Vorstellung der JavaScript-Frameworks

Fachhochschule Schmalkalden SS 2011

3.2.2 Wahl des Frameworks

3. Vorbetrachtungen Geschwindigkeit Funktionsumfang Untersttzung fr mobile Gerte

Fachhochschule Schmalkalden SS 2011

Tabelle 3.6: Nutzwertanalyse von Frameworks (siehe Anhang B)

Fachhochschule Schmalkalden SS 2011

4 Struktur der Software

4.1 Grasche Benutzeroberche

4. Struktur der Software

Fachhochschule Schmalkalden SS 2011

4. Struktur der Software

Fachhochschule Schmalkalden SS 2011

4. Struktur der Software

Fachhochschule Schmalkalden SS 2011

Untermen auswhlen [Back-Button gedrckt]

Newsbersicht anzeigen Schedulebersicht anzeigen

Vorherige Tagesansicht Aktion

[Back-Button] [Event ausgewhlt]

Abfrage Add To My Schedule [ja]

Fge Event hinzu

Abbildung 4.5: Aktivittsdiagramm des regulren Anwendungsfalles

4. Struktur der Software

Fachhochschule Schmalkalden SS 2011

4. Struktur der Software

Fachhochschule Schmalkalden SS 2011

HTML-Structure Component Presentation

finished Page Component Data Data-Structure

Fachhochschule Schmalkalden SS 2011

5. Implementierung Raster festgelegt.

Fachhochschule Schmalkalden SS 2011

Fachhochschule Schmalkalden SS 2011

5.4.1 News Klasse

Abbildung 5.1: Klassendiagramm der News-Klasse

Fachhochschule Schmalkalden SS 2011

5.4.2 Datenformat der News-Daten

Fachhochschule Schmalkalden SS 2011

Listing 5.5: Datenklassen des Datenformats

Fachhochschule Schmalkalden SS 2011

5.4.3 Bereitstellen der Daten

Fachhochschule Schmalkalden SS 2011

5.4.4 Erstellen der News-Seite

Fachhochschule Schmalkalden SS 2011

Listing 5.9: Erstellen der Detailansichten einer News

Fachhochschule Schmalkalden SS 2011

5.5.1 Schedule Klasse