Entwicklung einer auf JavaScript undHTML5 basierenden Smart-ClientApplikation zur Nutzung...

Bachelorarbeit

Entwicklung einer auf JavaScript undHTML5 basierenden Smart-ClientApplikation zur Nutzung derHochschul-InformationsplattformSpirit der FH-Schmalkalden fürmobile Endgeräte

Zur Erlangung des akademischen Grades einesBachelor of Science- Informatik -

Fakultät InformatikReferent: Prof. Dr. Oliver BraunKorreferent: Dipl.-Inf.(FH) René Brothuhn

eingereicht von:Toni BolduanMatr.-Nr. 270794Veilsdorfer Straße 6798669 Veilsdorf

Schmalkalden, den 22. März 2012

Zusammenfassung

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

Danksagung

An dieser Stelle möchte ich allen denjenigen danken, die dazu beigetragen haben,dass diese Arbeit erstellt wurde. Zuerst möchte ich meinen Eltern danken, die michin jeder Hinsicht unterstützt haben und sehr viel Geduld mit mir und meinem lan-gen Studium hatten. Ohne sie wäre das Studium nicht zu bewältigen gewesen.

Ich danke gesondert Herrn Prof. Dr. Oliver Braun, der diese Arbeit erst ermöglichteund mir als erster Ansprechpartner zur Seite stand, wenn es um Angelegenheitenrund um die Abschlussarbeit und das Spirit-Projekt ging. Er hatte stets ein offenesOhr für Ideen, Fragen und Probleme.

Weiterhin möchte ich dem Spirit-Team für dessen Hilfe danken, gesondert HerrnMarcus Denison für seine Anregungen, Tipps und Zeit, mir die eine oder andereVorgehensweise innerhalb der Spirit-Plattform zu erklären.

Abschließend möchte ich Felix Felmar, Andreas Berckner, Hendrik Tangemann undFabian Markert danken, die nicht nur als Beta-Tester stets ein kritisches Wort hat-ten, sondern auch in teils langen Diskussionen Anregungen gaben, den Funktions-umfang der Bachelorarbeit zu erweitern.

Inhaltsverzeichnis

1 Einleitung 11.1 Webapps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

1.1.1 Vorteile und Nachteile . . . . . . . . . . . . . . . . . . . . . . 11.1.2 Fazit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

1.2 Spirit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.2.1 Teilbereiche . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.2.2 Eingliederung dieser Arbeit . . . . . . . . . . . . . . . . . . . 4

2 Aufgaben und Anforderungen 52.1 Aufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.2 Anforderungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

3 Vorbetrachtungen 73.1 Plattform . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3.1.1 Marktanteile . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73.1.2 Browserengines . . . . . . . . . . . . . . . . . . . . . . . . . . 9

3.2 Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103.2.1 Vorstellung der JavaScript-Frameworks . . . . . . . . . . . . . 113.2.2 Wahl des Frameworks . . . . . . . . . . . . . . . . . . . . . . 12

3.3 Ergebnis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

4 Struktur der Software 154.1 Grafische Benutzeroberfläche . . . . . . . . . . . . . . . . . . . . . . . 15

4.1.1 Konzept . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154.1.2 Menüführung . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

4.2 Kernkomponenten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194.2.1 Seitenaufbau . . . . . . . . . . . . . . . . . . . . . . . . . . . 194.2.2 Komponentenaufteilung . . . . . . . . . . . . . . . . . . . . . 19

5 Implementierung 215.1 Allgemein . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215.2 Seitenansicht . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215.3 Menü . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225.4 News . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

5.4.1 News Klasse . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245.4.2 Datenformat der News-Daten . . . . . . . . . . . . . . . . . . 255.4.3 Bereitstellen der Daten . . . . . . . . . . . . . . . . . . . . . . 275.4.4 Erstellen der News-Seite . . . . . . . . . . . . . . . . . . . . . 28

Toni BolduanIV

Inhaltsverzeichnis Fachhochschule Schmalkalden SS 2011

5.5 Schedule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305.5.1 Schedule Klasse . . . . . . . . . . . . . . . . . . . . . . . . . . 305.5.2 Daten-Handling . . . . . . . . . . . . . . . . . . . . . . . . . . 315.5.3 Erstellen der Schedule-Seite . . . . . . . . . . . . . . . . . . . 38

5.6 MySchedule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425.6.1 Allgemein . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425.6.2 Datenstruktur der Events . . . . . . . . . . . . . . . . . . . . 425.6.3 LocalStorage . . . . . . . . . . . . . . . . . . . . . . . . . . . 435.6.4 Bereitstellen der Speicherfunktion . . . . . . . . . . . . . . . . 435.6.5 Eventbehandlung . . . . . . . . . . . . . . . . . . . . . . . . . 44

6 Resümee 46

7 Zukunftsaussichten 477.1 Funktionsumfang . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477.2 Quellcode-Verbesserungen . . . . . . . . . . . . . . . . . . . . . . . . 47

Abbildungsverzeichnis VI

Tabellenverzeichnis VII

Listingverzeichnis VIII

Literaturverzeichnis IX

A Programmvorstellung XI

B Details zur Nutzwertanalyse XIV

C Quelltext XVI

Eidesstattliche Erklärung XVII

Toni BolduanV

1 Einleitung

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

1.1 Webapps

Der Begriff Webapp (Abkürzung für „web application") bedeutet nichts weiter alsein Programm (Applikation), welches mittels eines Browsers von einem Webservergeladen wird und somit nicht auf einem Endgerät installiert werden muss. Gene-rell sollte sie die Funktionalität einer nativen App enthalten. Die Webapp wird alssolche wahrgenommen. Vielmehr bietet sie eine Benutzeroberfläche an, die der ei-ner nativen Applikation in Optik, Design und Nutzbarkeit in nichts nachsteht. Sieunterscheidet sich von einer Webseite oder Webanwendung dadurch, dass sie aufFunktionen des mobilen Endgerätes zugreifen kann. Dieser Funktionsumfang ist je-doch stark eingeschränkt.

1.1.1 Vorteile und Nachteile

Der Vorteil von Webapps liegt dabei eindeutig auf der Hand. Die Anwendung kannnahezu auf jedem online-fähigen mobilen Endgerät genutzt werden. Da sie nicht vomjeweiligen Betriebssystem abhängig ist, muss die Webapp nicht installiert werden.Sie läuft im Browser des Endgerätes ab. Dem vermeintlichen Nachteil der Browserab-hängigkeit wird stetig seitens der Browserhersteller entgegengewirkt, indem versuchtwird, vorgegebene Standards, etwa denen des W3C-Konsortiums, einzuhalten. Einweiterer Vorteil ist der geringe Speicherverbrauch. Das Fehlen der Installation auf

Toni Bolduan Seite 1 von 47

1. Einleitung Fachhochschule Schmalkalden SS 2011

dem Endgerät senkt die Belastung des vorhandenen Speichers. Eine Webapp ver-braucht nur solange temporären Speicherplatz, bis sie durch Beenden des Browsersdiesen wieder freigibt. Weitere Einsparungen können durch das Cachen statischerWebseiteninhalte, wie etwa Bilder, gemacht werden.Webapps besitzen aber dennoch Nachteile. So erfordern sie das vorab stetige Star-ten des Browsers. Weiterhin ist die Darstellung der Inhalte abhängig von der imjeweiligen Browser verwendeten Layout-Engine. Es kann dadurch zu Abweichungenin der Darstellung kommen.

1.1.2 Fazit

Webapps bieten die Möglichkeit Anwendungen plattformunabhängig auf nahezu je-dem mobilen Endgerät anzubieten. Dabei muss auf den eingeschränkten Funktions-umfang geachtet werden. Im Rahmen dieser Bachelorarbeit wird überprüft ob dieUmsetzung der Kernkomponenten der Spirit-Plattform anhand einer prototypischenAnwendung möglich ist.

1.2 Spirit

Das Projekt Spirit ist ein an der Fakultät Informatik der FH-Schmalkalden gest-artetes Studentenprojekt, das sich mit der Entwicklung eines Informationsportalesbeschäftigt. Unter Leitung von Professor Dr. Oliver Braun arbeiten Studenten ausverschiedenen Studiengängen und -graden an der Entwicklung dieses Projektes.

Ziele des Projektes

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



1.2.1 Teilbereiche

Core

Dieser Bereich des Spirit-Projektes befasst sich mit der Entwicklung des zur Er-stellung der Stundenpläne notwendigen Kernsystems. Core wurde im Rahmen einesPraktikums in Haskell entwickelt.

News

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

StudWeb

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

EmployeeWeb

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

PlanningWeb

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

Data

Neben Core ist der Bereich Data einer der Wichtigsten. Er befasst sich mit der Da-tenhaltung, der für Stundenpläne, News und weiterer Informationen notwendigenRessourcen. Das Ziel dieses Teilprojekts ist die zentrale Datenhaltung aller Res-sourcen und das Bereitstellen von Diensten und Schnittstellen, um auf diese Datenzuzugreifen.



Mobile

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

Migrate

Ziel vonMigrate ist es die bestehende Informationsplattform sukzessive in das Spirit-Informationsportal zu integrieren. Dazu wird momentan eine Schnittstelle entwi-ckelt, um die mit dem herkömmlichen Tool erstellten Stundenplandaten für Spiritaufzubereiten und über einen Dienst in die Datenbank einzupflegen.

1.2.2 Eingliederung dieser Arbeit

Diese Bachelorarbeit ist im Bereich Mobile des Spirit-Projektes angesiedelt. Mit demFokus auf Plattform- und Geräteunabhängigkeit soll diese Arbeit einen Weg zeigen,möglichst viele Studenten, Mitarbeiter und Professoren erreichen zu können, oh-ne dabei an Gerätespezifikationen zu hängen. Weiterhin erweitert diese Arbeit denBereich Mobile des Spirit-Projektes und versucht das bestehende Portfolio aus platt-formabhängigen Applikationen um den Faktor Geräteunabhängigkeit zu erweiternbzw. zu vervollständigen.


2 Aufgaben und Anforderungen

Im Folgenden werden alle Aufgaben und Anforderungen aufgelistet, die an das Pro-gramm gestellt werden.

2.1 Aufgaben

• Bereitstellung einer geräteunabhängigen Applikation, die es ermöglicht, denim Projekt Spirit etablierten Studweb-Funktionsteil abzudecken.

– Bereitstellung der News

– Bereitstellung des Stundenplans

• Entwicklung eines einfachen und leicht zu bedienenden Nutzerinterfaces.

– Erstellung eines Designs in Anlehnung an bestehende Apps

– Erstellung eines einfachen Bedienkonzepts

• Erweitern des Funktionsumfangs der Stundenplanung

– Etablieren einer Möglichkeit personalisierte Stundenpläne zu erstellen

– Etablieren einer Möglichkeit personalisierte Stundenpläne anzuzeigen

2.2 Anforderungen

Aus den Aufgaben ergeben sich eine Reihe von Anforderungen, die an das Pro-gramm und deren Entwicklung gestellt werden. Diese werden im Folgenden kurzbeschrieben.


2. Aufgaben und Anforderungen Fachhochschule Schmalkalden SS 2011

Entwicklungsplattform

Es muss eine geeignete Plattform gefunden werden, mit der die Anwendung ent-wickelt werden kann. Weiterhin muss eine Plattform gewählt werden, auf der dieApplikation laufen soll. Dazu sollen Analysen durchgeführt werden, um die mög-lichst beste Plattform zu ermitteln.

Performance

Die Applikation muss eine gewisse Bedienungsgeschwindigkeit erfüllen. Lange War-tezeiten, sowie ruckelnde Animationen sollen vermieden werden.

Useability-Konzept

Weiterhin muss ein Konzept entwickelt werden, wie die Anwendung am Besten zubedienen ist.

Integration

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

Verständlichkeit

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


3 Vorbetrachtungen

In dem Kapitel Vorbetrachtungen wird untersucht welche Voraussetzungen die We-bapp an die Browser stellt und welche Technologien für die Entwicklung der Webappbenötigt werden. Dazu wird mit Hilfe von wissenschaftlichen Analysen zunächst eineAuswahl an zu unterstützenden Browsern gefunden und anschließend ein geeignetesFramework zur Entwicklung der Webapp herausgestellt.

3.1 Plattform

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

3.1.1 Marktanteile

Die Wahl der Browser, für welche die Webapp entwickelt werden soll, wird anhandihres Martkanteils gemessen. Zunächst wird das Nutzungsverhalten der User imDesktop-, sowie im Mobile-Segment analysiert. Daraufhin wird erklärt, warum wel-che Browser als Zielbrowser in Frage kommen. Die Marktforscher von NetMarketS-hare untersuchen monatlich unter Anderem die Nutzung von Mobile- und Desktop-Browsern und stellen diese nach kostenloser Anmeldung zum Anschauen zur Verfü-gung. So ergibt sich laut NetMarketShare für Dezember 2011 der Desktop-Plattformfolgende Marktverteilung.

Monat Internet Explorer Firefox Google Chrome Safari OperaDezember 2011 52,64 22,14 18,18 5 1,55

Tabelle 3.1: Marktanteile der Desktop-Browser [Shaa]

Die verwendeten Browser im Desktop-Segment unterscheiden sich erheblich von de-nen im mobilen Segment. Deutlich macht das folgende Statistik von NetMarketSha-re, (ebenfalls vom Dezember 2011).


3. Vorbetrachtungen Fachhochschule Schmalkalden SS 2011

Monat Safari Opera Android Browser Symbian BlackBerryDezember 2011 53.30 21.66 15.87 3.33 3.05

Tabelle 3.2: Marktanteile der Mobile-Browser [Shab]

Während unter Desktop-Browsern der Internet Explorer unangefochten an der Spit-ze steht, nimmt im mobilen Segment der Browser Safari von Apple diese Positionein. Der Internet Explorer hat, auf Grund geringer Verbreitung von Windows MobilePhone-Geräten, unter mobilen Endgeräten so gut wie keinerlei Verbreitung. Aktuellbefindet sich Operas Mini auf Platz 2 mit 21,65 Prozent, dicht gefolgt vom Stan-dardbrowser des Android-Betriebssystems.

Um einen genauen Überblick über die Browsermarktentwicklung zu erhalten und da-mit eine genaue Entscheidung zur Wahl der zu unterstützenden Browser zu treffen istes wichtig den Trend zu beobachten. Dazu wurden alle von den Marktforschern vonNetMarketShare erhobenen Browsermarktverteilungen im Zeitraum von Dezember2010 bis Dezember 2011 zusammengestellt und in folgender Übersicht dargestellt.Marktanteile der mobilen Browser von Dez. 2010 bis Dez. 2011 [Shac] Zunächst lässt

Monat Safari Opera AndroidBrowser Symbian Black-

Berry Andere

Dez 2010 49,17% 26,49% 11,50% 7,49% 2,90% 2,45%Jan 2011 54,03% 21,42% 12,74% 6,89% 2,59% 2.33%Feb 2011 46,55% 26,81% 13,43% 8,28% 2,62% 2,31%Mär 2011 47,83% 25,02% 14,14% 7,92% 2,87% 2,22%Apr 2011 50,56% 22,90% 14,74% 7,06% 2,84% 1,90%Mai 2011 49,80% 24,03% 15,76% 5,98% 2,83% 1,60%Jun 2011 52,36% 22,40% 14,20% 6,50% 2,90% 1,64%Jul 2011 54,50% 20,27% 14,40% 6,11% 3,06% 1,66%Aug 2011 52,99% 20,77% 15,73% 5,83% 2,90% 1,78%Sep 2011 55,59% 18,92% 16,03% 4,70% 2,68% 2,07%Okt 2011 62,03% 13,09% 18,60% 2,55% 2,03% 1,69%Nov 2011 55,03% 20,09% 16,36% 3,03% 2,76% 2,73%Dez 2011 53,30% 21,66% 15,87% 3,33% 3,05% 2,79%

Tabelle 3.3: Marktanteile der mobilen Browser von Dez. 2010 bis Dez. 2011 [Shac]

sich erkennen, dass sich Apples Browser Safari stabil zwischen 50 % und 55 % hält.Hier ist nur ein leichtes Wachstum zu erkennen. Im Gegensatz dazu verlieren OperasMini und Symbian konsequent Marktanteile, und zwar an den Standardbrowser desBetriebssystem Android von Google. Der BlackBerry-Browser fristet ein Nischenda-sein bei annähernd gleichbleibendem Marktanteil von 3%. Gut erkennen lässt sichdies an folgender Grafik.



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 20110

10

20

30

40

50

60

70

Marktanteile der mobilen Browser

von Dezember 2010 bis Dezember 2011

SafariOpera MiniAndroid Brow serSymbianBlackBerry

Monate

Mar

ktan

teil

in P

roze

nt (%

)

Abbildung 3.1: Marktanteile der Mobilen Browser im Jahr 2011

3.1.2 Browserengines

Ein weiteres Prüfkriterium ist die Umsetzbarkeit der Anforderungen in den jewei-ligen Browsern. Dazu werden nachfolgend alle Browserengines auf ihre HTML5-,CSS3- und Javascript-Funktionalitäten überprüft. Welcher Browser welche Enginebenutzt soll folgend gezeigt werden.

WebKit 5xx Gecko 9.0.1 Presto 2.5.24 Trident 5.0Safari, Android, Symbian, Blackberry FF Mobile Opera Mini IE Mobile 9

Tabelle 3.4: Browser mit dazugehörigen Browserengines

HTML5- und Javascript-Support

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



Tag WebKit Presto Gecko Trident<footer> 533 2.7.70 2.0 5.0<section> 533 2.7.70 2.0 5.0<header> 533 2.7.70 2.0 5.0<form> 533 2.7.70 2.0 5.0<nav> 533 2.7.70 2.0 5.0

SpezifikationOffline WebApplications Yes 2.6 1.9.1 No

Web Storage 525 2.2 1.9.1 4.0APIs

getElementsByClassName525 2.1 1.9 5.0

Tabelle 3.5: Unterstützung benötigter HTML Komponenten [Wik12]

CSS3-Support

Neben der Unterstützung von HTML5 ist die Unterstützung einiger CSS3-Komponentenseitens der Browser zu beachten. Für unter Anderem Gestaltung und Positionierungvon DOM-Elementen werden einige spezielle CSS3-Selektoren, wie z.B.: :nth-child,:root oder :empty für strukturelle Pseudoklassen benötigt. Alle oben aufgeführtenBrowser unterstützen diese Selektoren.

Zusammenfassung

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

3.2 Framework

Ein Framework ist ein in der Softwaretechnik verwendetes Programmiergerüst. Eswird als Skelett einer Applikation verstanden, mit dessen Hilfe Entwicklern bestehen-de Programmierkonstrukte und Funktionalitäten in vereinfachter Weise zugänglichgemacht wird. [GHJV94]

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



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

Vor- und Nachteile von JavaScript-Frameworks

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

3.2.1 Vorstellung der JavaScript-Frameworks

In diesem Kapitel sollen die bekanntesten freien JavaScript-Frameworks kurz vorge-stellt und im Anschluss anhand ausgewählter Kriterien entsprechend der gestelltenAnforderungen ausgewählt werden.

Prototype

Prototype ist ein unter der MIT-Lizenz veröffentlichtes, freies und objektorientiertesJavaScript-Framework, dessen vorrangiges Ziel es ist dynamischeWeb-Applikationeneinfach zu entwickeln. Das Framework wurde 2005 von Sam Stephenson entwickeltund bietet Klassenbibliotheken, Unterstützung für AJAX1, sowie einfache DOM-Manipulation.[Ste]

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



MooTools

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

jQuery

Das von John Resig 2006 entwickelte freie JavaScript-Framework jQuery ist wohl dasbekannteste und am weit verbreitetste unter den verfügbaren Frameworks. Nebeneiner sehr guten Dokumentation, zahlreichen Tutorials und Demos zeichnet es sichvor Allem durch seine leicht verständliche Anwendung und durch Browserkompati-bilität aus. Ein Plugin-System zur Erstellung eigener jQuery-Erweiterungen rundetdas Angebot ab. [VB11]

ExtJS

Ein weiteres bekanntes JavaScript-Framework ist ExtJS. Der Fokus des Frame-works liegt, dank AJAX-Unterstützung, auf der Entwicklung interaktiver Weban-wendungen. Dazu bietet ExtJS eine Sammlung von verschiedenen Formularelemen-ten, wie z.B. Registerkarten-Darstellung oder Kontextmenüs im Stile des Desktop-Betriebssystems.[SMCW]

Google Web Toolkit

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

3.2.2 Wahl des Frameworks

Um ein geeignetes Framework zur Entwicklung der Webapp zu finden wird diesesauf folgende Kriterien hin überprüft:

• Browserkompatibilität

• Komplexität/Verständlichkeit/Dokumentation

• Größe des Frameworks



• Geschwindigkeit

• Funktionsumfang

• Unterstützung für mobile Geräte

Die Gewichtung der Kriterien wurde nach Einschätzung der Notwendigkeit für dieWebapp durch den Autor gewählt. Weiterhin basiert die Einschätzung der Frame-works auf den Kriterien der Frameworks in aktueller, sowie in entwicklungsgeschicht-licher Hinsicht.

Kriterium Ge-wicht jQuery ExtJS GWT Moo-

ToolsProto-type

Browser-kompatibilität 4 8 32 7 28 7 28 7 28 8 32

Komplexität 4 4 32 4 16 3 12 5 20 3 12Größe desFrameworks 2 4 8 4 8 0 0 5 10 5 10

Geschwindig-keit 3 4 12 3 9 3 9 3 9 5 15

Funktions-umfang 5 9 45 7 35 7 35 6 30 5 25

Mobile Support 3 2 6 1 3 2 6 2 6 0 0Gesamt 21 119 99 90 103 94

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 BlackBerryvorrangig den Markt für mobile Browser teilen. Seit 2010 wurde die Entwicklungfür Symbian eingestellt, daher ist damit zu rechnen, dass es zukünftig vom Marktverschwinden wird. Daraus ergibt sich, dass die Webapp auf den zuerst genanntenBrowsern garantiert funktionsfähig sein muss.

Aus den ausgewählten Browsern gehen die zu unterstützenden Browser- bzw. Layout-Engines hervor; siehe Tabelle 3.4. Um eine möglichst hohe Abdeckung des Brow-sermarktes zu gewährleisten, werden auch Browser-Engines aus dem Bereich derAnderen berücksichtigt.

Anhand der Tabelle 3.5 lässt sich erkennen, dass die dem Internet Explorer - Mobi-le Browser zugrundeliegende Browser-Engine Trident die Spezifikation Offline WebApplications nicht erfüllt und somit ausscheidet. Weiterhin ist zu erkennen, dass die



Gecko-Engine die Voraussetzungen erfüllt und somit in die engere Auswahl aufge-nommen wird.

Die Punkteverteilung in Tabelle 3.6 zeigt eindeutig, dass die Frameworks jQueryund MooTools bei den gewichtigsten Kriterien am Besten abschneiden. Die Wahldes Autors fällt letzten Endes auf jQuery, da dieses die meisten Punkte erzielt unddank Plugin-System den größten Funktionsumfang besitzt.


4 Struktur der Software

Dieses Kapitel soll zunächst einen Überblick über die Komponenten der Softwareund die grafische Benutzeroberfläche der Webapp geben und anschließend verdeutli-chen, welche Komponenten in welcher Weise miteinander agieren. Dabei wird unterAnderem auf die Seitenaufteilung, die Menüführung, Design-Definitionen und struk-turelle Merkmale eingegangen, sowie der Ablauf der Software beschrieben.

4.1 Grafische Benutzeroberfläche

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

4.1.1 Konzept

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

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


4. Struktur der Software Fachhochschule Schmalkalden SS 2011

Abbildung 4.1: Aufbau des Hauptmenüs

Gemäß dem Aufgaben- und Anforderungskatalog (siehe Kapitel 2) unterstützt dieprototypische Umsetzung der Webapp drei Grundfunktionalitäten (News, Schedule,MySchedule).

Mit Betreten des Untermenüs News soll der Nutzer zunächst in Form einer Listeeinen Überblick über alle verfügbaren News-Einträge erhalten. Die angezeigten In-formationen belaufen sich innerhalb der Übersicht auf drei Komponenten. Wie inAbbildung 4.2 zu erkennen, sind diese der betreffende Studiengang, der Autor derNews und der Betreff der News. Nach einem Klick/Touch auf das entsprechendeListenelement soll der Nutzer zur Detailansicht einer News weitergeleitet werden,welche zusätzlich zu den Informationen aus der Listenübersicht noch Inhalt und dasDatum der News anzeigen soll.

Abbildung 4.2: Aufbau des Untermenüpunktes News

Das Untermenü Schedule soll ähnlich aufgebaut sein wie das Untermenü News. DerNutzer soll zunächst eine Auswahl aller verfügbaren Stundenpläne zu den einzelnen



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

Abbildung 4.3: Aufbau der Stundenplanübersicht

Die Detailansicht von Schedule unterscheidet sich dahingehend von denen der News,dass diese pro Ansicht einen Tag des gewählten Stundenplans anzeigen soll. Wie inAbbildung 4.4 zu sehen, soll mittels Navigationsbuttons dem Nutzer die Möglichkeitgegeben 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 derNutzer selbst gewählt hat. Analog zu Abbildung 4.4 soll das Untermenü MyScheduleeine Tagesansicht bereitstellen, die mittels Buttons navigiert werden kann.



4.1.2 Menüführung

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

Seite aufrufen

Startseite anzeigen

Hauptmenü Anzeigen

Untermenüauswählen

Newsübersichtanzeigen

Auswahltreffen

DetailansichtAnzeigen

Scheduleübersichtanzeigen

Aktion

Nächste Tagesansicht

TagesansichtAnzeigen

Aktion

Überprüfung:ist-Montag

AbfrageAdd To MySchedule

Füge Eventhinzu

VorherigeTagesansicht

Nächste Tagesansicht

TagesansichtAnzeigen

Aktion

Überprüfung

AbfrageDelete Event

Lösche Event

VorherigeTagesansicht

[News ausgewählt] [Schedule ausgewählt] [MySchedule ausgewählt]

[Back-Button] [Next-Button]

[nein][ja]

[Event ausgewählt]

[ja] [nein]

[ja] [nein]

[Event ausgewählt]

[Back-Button] [Next-Button]

[nein][ja]

[Back-Button gedrückt]

[Stundenplan ausgewählt]

[Back-Button gedrückt]

Abbildung 4.5: Aktivitätsdiagramm des regulären Anwendungsfalles



4.2 Kernkomponenten

Um die Entwicklung der Webapp nachvollziehbar und im Hinblick auf Erweiterbar-keit modularisierbar zu gestalten wird zunächst eine Struktur der Software festge-legt. Dazu werden wiederkehrende Teile der Webapp zu Komponenten zusammen-gefasst.

4.2.1 Seitenaufbau

Innerhalb der Webapp folgen alle Ansichten und Seiten demselben Muster. JedeSeite wird als solche gekennzeichnet und besteht aus den drei Bestandteilen Hea-der, Section und Footer, wobei Footer optional ist, siehe Abbildung 4.6. Im Headerbefinden sich die Navigationselemente, sowie eine kurze Beschreibung der jeweiligenSeite. Im Bereich Section werden die eigentlichen Seiteninhalte dargestellt.

Abbildung 4.6: Grundgerüst einer Ansicht

Der Aufbau einer Seite im Detail wird in Kapitel 5.3 näher beschrieben.

4.2.2 Komponentenaufteilung

Im Webdesign gilt im Allgemeinen das Prinzip Teile und Herrsche2. Bei der Ent-wicklung der Webapp wurde dieses Prinzip umgesetzt. Somit ergeben sich drei stetswiederkehrende Komponenten für jedes unterstützte Feature:

• Die Komponente Data ist für den Zugriff auf Stundenplan- und News-Datenverantwortlich. Sie stellt Javascript-Klassen und -Funktionen zur Verfügung,

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



um die Rohdaten in ein eigenes Datenformat zu überführen und dieses in derAnwendung anzubieten.

• Innerhalb der Komponente Structure werden JavaScript-Klassen zur Erstel-lung der HTML-Struktur zur Verfügung gestellt.

• MitPresentation wird eine Komponente geschaffen, die für die Ausgestaltungder HTML-Struktur zuständig ist. Hier werden mittels CSS und JavaScriptLayout und Design festgelegt.

Komposition

Die Komponente Data ist die Basiskomponente. Sie besitzt keinerlei Abhängigkei-ten zu anderen Komponenten. In ihr wird festgelegt, in welchem Format die Da-ten zur Verfügung gestellt werden. Structure dagegen benötigt zum Erstellen derHTML-Struktur des Seiteninhalts die in Kapitel 4.2.1 benötigte Grundstruktur ei-ner Seite/Ansicht. Die Ergebnisse von Data und Structure werden von der Kom-ponente Presentation benötigt. Sie bildet das Design zur angegeben HTML- undDatenstruktur. Das Endprodukt von Presentation umfasst die fertig ausgestaltetenSeite/Ansicht eines Features, siehe Komponentendiagramm 4.7.

« Component »Webapp - Feature

« Component »Structure

HTML-Structure

« Component »Data

Data-Structure

« Component »Presentation

finished Page

HTML-Page Structure

Abbildung 4.7: Komponentendiagramm: Aufbau eines Features

Eine zusammengesetzte Komponente wird als JavaScript-Datei definiert. Die dazu-gehörigen Komponenten Data, Structure und Presentation sind als abstrakte Ebenezu sehen und bestehen aus verschiedenen JavaScript-Klassen innerhalb dieser Datei.


5 Implementierung

In diesem Kapitel werden die prototypischen Implementierungen ausgewählter Funk-tionalitäten unter Verwendung der in Kapitel 3 und 4 gewonnenen Erkenntnissebeschrieben. Das Kapitel gliedert sich in vier Abschnitte. Zunächst wird auf denallgemeinen Aufbau einer Seite/Ansicht eingegangen. Daraufhin folgen die Imple-mentierungen der einzelnen Webapp-Features News, Schedule und MySchedule.

5.1 Allgemein

Bevor näher auf die Implementierung der Webapp eingegangen wird müssen zu-nächst einige besondere Merkmale bedacht werden. Der Autor legt im Zuge desPrinzips Teile und Herrsche Wert auf unobtrusive JavaScript1. Damit soll Über-sichtlichkeit und eine verbesserte Lesbarkeit des Quelltextes entstehen. Dazu werdendie Webapp-Features in eigene JavaScript-Dateien ausgelagert, welche im Kopfteilder index.html eingebunden werden müssen. Das Zusammenführen der Webapp-Features wird ebenfalls im Kopfbereich der Datei index.html durchgeführt.

Weiterhin ergeben sich aus der Wahl des Frameworks jQuery auf Grund des Plugin-Systems neue Möglichkeiten. Dazu zählen unter Anderem die Unterstützung für mo-bile Endgeräte durch das jQuery-Plugin jQuery Mobile, kurz jQM, welches innerhalbder Entwicklung Verwendung findet. Dies äußert sich durch die Verwendung plugin-eigener HTML-Tags und Attribute, zum Beispiel zur Strukturierung von Webapp-Ansichten oder für vereinfachte Darstellungen von Inhalten, wie Texten, Bildernoder Tabellen.

5.2 Seitenansicht

Die Ansicht einer Seite setzt sich aus den Bestandteilen Header, Content und Footerzusammen, wovon einige als optional zu betrachten sind. Die Grundstruktur einerjeden Seite bildet ein HTML-Gerüst, dass im Body-Tag der HTML-Seite eingefügtwerden muss.

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


5. Implementierung Fachhochschule Schmalkalden SS 2011

1 <section id="p1" data -role="page" ... >23 <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 >89 <section data -role=" content " ... >10 Content11 </section >1213 <footer >14 Additional15 </footer1617 </section >

Listing 5.1: HTML-Struktur einer Seite

Den Beginn einer Seite markiert der HTML5-Tag <section>, gefolgt von dem At-tribut data-role=”page”. Hiermit wird klargestellt, dass es sich um eine neue Seiten-ansicht 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 Ele-mente. Dabei handelt es sich um die Überschrift der Seite <h1> und die beidenNavigationselemente, welche über ihr Attribut class=”button” auf eine Schaltflächeverweisen. Mit href wird das Ziel der Schaltflächen angegeben. Die Buttons, sowieFooter sind hierbei optionale Elemente. Das Attribut data-role ist ein jQM-eigenesAttribut und gibt die Rolle des Elementes vor.

5.3 Menü

Im Content-Bereich des oben erklärten Seitenaufbaus nehmen die Seiteninhalte nor-malerweise die volle Breite des Bildschirms ein. Auf der Menüseite ist dies jedochanders. Um die einzelnen Menüeinträge übersichtlich darzustellen und zentral an-zuordnen, wird anstelle von HTML-Tabellen das Layoutraster von jQM verwendet.Das Raster wird über CSS-Klassen mit dem Namen ui-grid-* definiert. Als Wertewerden hier Buchstaben von a bis d eingetragen, die stellvertretend für die Spal-tenanzahlen 2 bis 5 stehen. Jedes Rasterelement ist ein, durch eine eindeutige IDgekennzeichneter Bereich, der einen Link zu einer Seitenansicht enthält, welcherwiederum durch ein Icon dargestellt wird. Die Spaltenposition wird mit der Klasseui-block-* angegeben. Analog zur Angabe der Spaltenbreite wird die Spaltenpositiondurch die Endbuchstaben a und b, stellvertretend für die Positionen 1 und 2, im



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 Menüs / Auszug aus index.html

Das Menü besitzt fünf Menüeinträge. Diese sind, wie bereits in Listing 5.2 durchihre 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 beschriebenenKomponentenmuster. Zunächst soll beschrieben werden, wie die News-Klasse derNews-Komponente aufgebaut ist und welche Besonderheiten durch die Verwendungvon JavaScript auftreten und dementsprechend beachtet werden müssen. Im An-schluss werden die Teilkomponenten Data, Structure und Presentation anhand aus-gewählter Funktionen und Methoden der News-Klasse beschrieben.



5.4.1 News Klasse

Die News-Klasse als solche besitzt keine eigene Definition. Objekte der News-Klassewerden mit Hilfe der sogenannten Fabrikmethode2 erstellt.

1 var News = function () {23 var tmp_news_set = new news_set ();4 return {5 ...6 }7 }

Listing 5.3: Fabrikmethode zur Erzeugung von Objekten der Newsklasse

Dadurch ist es möglich die Attribute der Klasse als private zu kennzeichnen, im Falleder News-Klasse ist es das Attribut tmp_news_set. Da in JavaScript jede Variablevom Typ Object ist und Funktionen auch in Variablen abgelegt werden können, kön-nen auch Funktionsobjekte erstellt werden (siehe Listing 5.3). Durch Aufrufen derGeneratorfunktion wird ein Objekt zurückgegeben, das nach dem Klassendiagrammaus 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. Dazuzählen das Laden von News, das Erstellen der News-Seite, sowie das Füllen derSeitenstruktur mit Inhalt.

2Bei der Fabrikmethode handelt es sich um ein Entwurfsmuster aus dem Bereich der Softwa-reenticklung, das beschreibt, wie ein Objekt durch Aufruf einer Methode anstatt durch den direktenAufruf des Konstruktors erzeugt wird.[GHJV94]



5.4.2 Datenformat der News-Daten

Das für Datenhaltung und -übertragung verwendete Datenformat ist JavaScriptObject Notation, kurz JSON. Der REST-Service aus dem Spirit-Bereich Data bietetdie Daten aller News im JSON-Format an, das heißt Informationen werden immermit Schlüsselwertpaaren nach dem Muster „Schlüssel: Wert” angegeben, wobei derSchlüssel immer ein String sein muss, der Wert jedoch sowohl vom Typ String, alsauch vom Typ Array oder Object sein kann. Wie in Listing 5.4 zu erkennen, gibtes 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 imfolgenden Kapitel näher erklärt wird. Der REST-Service bietet die Daten nur imGesamten an, folglich ist es nicht möglich einzelne News durch einen einzelnen Aufrufzu erhalten. Zwar hat dies performancetechnische Nachteile, jedoch ermöglicht esder Webapp alle Daten „in einem Zug” abzuarbeiten. Da es sich bei den Datenum Zeichenketten handelt ist die Gesamtgröße der zu übertragenden Daten relativgering. Sie befindet sich im zweistelligen Kilobyte-Bereich und behindert auch auflangsameren Geräten nur bedingt die Übertragung. Die Inhalte der Daten einerNews sind aus Listing 5.4 zu entnehmen. Sie sind selbsterklärend und bedürfenkeiner genaueren Erläuterung.

Neben dem offiziellen Datenformat der News vom REST-Service gibt es ein weitereswebapp-eigenes Datenformat, dass dem JSON-Format ähnelt. Der Grund für dieNutzung eines eigenen, weiteren Datenformats wird in Kapitel 5.5.2 näher erläu-tert. Dieses Datenformat ist eine strukturelle Nachbildung des JSON-Formates inJavaScript. Dazu existieren die drei Klassen Datapair, Single_News und News_Set.Nachfolgend wird erklärt wie diese aufgebaut sind.

Alle Klassen besitzen Attribute und Get-Methoden, um auf diese zuzugreifen.



1 function datapair (k, v) {2 this.key = k;3 this.val = v;45 this. getKey = function () {6 return this.key;7 };89 this. getValue = function () {10 return this.val;11 };12 };1314 function single_news (id) {15 this. datapairs = [];16 this. news_id ;1718 this. addDataPair = function ( datapair ) {19 this. datapairs .push( datapair );20 };2122 this. getDataPairs = function () {23 return this. datapairs ;24 };2526 this. getNewsID = function () {27 return this. news_id ;28 };29 };3031 function news_set () {32 this.news = [];3334 this. addSingleNews = function ( single_news ) {35 this.news.push( single_news );36 };3738 this. getNews = function () {39 return this.news;40 };41 };

Listing 5.5: Datenklassen des Datenformats



5.4.3 Bereitstellen der Daten

Die News-Klasse bietet zum Laden der News-Daten im JSON-Format die MethodeloadNews() an. Dazu wird die jQuery-Funktion getJSON genutzt. Diese stellt eineAJAX-Verbindung zur JSON-Quelle her und speichert die Daten in einem jQuery-Objekt ab. Die Daten werden innerhalb der Methode in das vorher genannte Formatüberführt.

1 loadNews : function () {23 // Get Data from JSON - Source4 var bac = $. getJSON (’news.json ’, function (data){56 var i = 0;7 $.each(data , function () {89 var tmp_singlenews = new single_news (i);10 $.each(data[i], function (key , val) {1112 // store Data in news_set variable13 var tmp_datapair = new datapair (key , val);14 tmp_singlenews . addDataPair ( tmp_datapair );15 });16 tmp_news_set . addSingleNews ( tmp_singlenews );17 i++;18 });19 });20 }

Listing 5.6: Laden der News-Daten

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

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



5.4.4 Erstellen der News-Seite

Zum Erstellen der News-Seite bietet die News-Klasse drei Methoden an. ShowNew-sOnElement erzeugt die Listenansicht der verfügbaren News, createNewsPage dieDetailansichten und getValueFromKey liefert einen Wert zum passenden Schlüsselaus einer Single_News.

1 showNewsOnElement : 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 >’ +

78 ’<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 >’ +1819 ’</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 HTML-Knotenpunkt beschreibt, auf dem die Listenansicht der News platziert werden soll.Mit der jQuery-Funktion append lassen sich Strings an ein Element im DOM-Baumanfügen. Repräsentieren diese ein HTML-Element, wie beispielsweise <li></li>(Zeile 6), werden diese als solche in das HTML-Dokument angefügt. In Zeile 5teilt das Attribut data-role=”listview” des HTML-Elements <ul> jQuery Mo-bile mit, dass eine neue Listenansicht erstellt werden soll. Weiterhin bekommt eseine ID listview zugewiesen, um es im weiteren Verlauf einfacher zu finden. An-schließend wird ein Listenelement zu der Listenansicht hinzugefügt. Das Listen-element bekommt dazu eine eindeutige ID zugewiesen (Zeile 8), welche benötigtwird, um mit $(’#listelement-’ + j).append(... a href=’newsPage-’ + j...); einen Link zur Detailansicht an dieses Listenelement anzufügen. Darauf fol-gend wird eine Tabelle erzeugt, die den zur Verfügung stehenden Anzeigebereich invier Teile gliedert. Mit getValueFromKey (siehe Listing 5.7wird aus dem News_Set



der News-Klasse der zum Schlüssel passende Wert gesucht und eingefügt. Für dieListenansicht sind es das betreffende Semester, der Autor und der Betreff der News.Nach Abschluss der Erstellung einer Listenansicht wird die entsprechende Detailan-sicht dieser News mit createNewsPage(j) erstellt (siehe Listing 5.7). Das Ganzewird für alle im News_Set vorhandenen News durchgeführt (Zeile 4).

1 getValueFromKey : function (key , news_number ) {2 for (var j=0; j< tmp_news_set . getNews (). length ; j++) {3 for (var i=0; i< tmp_news_set . getNews ()[j]. getDataPairs (). length

; i++) {4 if (( tmp_news_set . getNews ()[j]. getDataPairs ()[i]. getKey () ==

key) && (j == news_number )) {5 return tmp_news_set . getNews ()[j]. getDataPairs ()[i]. getValue

();6 }7 }8 }9 }

Listing 5.8: Suchen von Schlüssel und passendem Schlüsselwert aus Datenstruktur

Die Methode getValueFromKey liefert zu einem gegebenen Schlüssel und News-Indexden passenden Schlüsselwert. Dazu wird für alle im News-Set existierenden Newsgeprüft, ob die enthaltenden Datenpaare den gesuchten Schlüssel enthalten und obdiese auch zu der richtigen News gehören (Listing 5.8, Zeile 7).

1 createNewsPage : function ( news_id ) {2 $(’body ’). append (’<div data -role =" page" id=" newsPage -’ + news_id

+ ’"></div >’);3 $(’#newsPage -’ + news_id ). append (4 ’<div data -role =" header "> ’

+5 ’<h1 >’ + this. getValueFromKey (’subject ’, news_id ) + ’</h1 >’

+6 ’<a class =" button back" href ="# p2">Back </a>’ +7 ’</div >’

+8 ’<div data -role =" content ">’

+9 ’<ul data -role =" listview " data -inset =" true">’ +10 ’<li ><table width ="100%" > <tr >’ +11 ’<td >’ + this. getValueFromKey (’date ’, news_id ) +12 ’<td align =" right">’ + this. getValueFromKey (’writer ’,

news_id ) +13 ’</tr ></table ></li >’ +14 ’<li >’ + this. getValueFromKey (’news ’, news_id ) + ’</li >’ +15 ’</ul >’ +16 ’</div >’17 );18 }

Listing 5.9: Erstellen der Detailansichten einer News



Die Methode createNewsPage der News-Klasse erstellt die Detailansichten einerNews. Dazu wird zunächst die aus den Kapiteln 4.2.1 und 5.2 bekannte Seitenstruk-tur mit Hilfe der jQuery-Funktion append an den Body-Tag der Datei index.html mitentsprechender News-ID angefügt (Zeile 5). Innerhalb des Content-Bereichs wird zu-sätzlich eine Listenansicht generiert, welche mit Hilfe der Methode getValueFromKeydas Datum und den Autor in ein Listenelement(Zeile 13-16) und den eigentlichenText der News in ein zweites Listenelement (Zeile 17) einfügt.

5.5 Schedule

Die Beschreibung der Implementierung der Schedule-Komponente erfolgt analog zuder, aus der News-Komponente bekannten Vorgehensweise. Zunächst werden dieKlasse Schedule und das verwendete Datenformat beschrieben. Anschließend folgtdie Erklärung der für die Umsetzung der Data-Komponente zuständigen Verarbei-tungsklasse JSONProcessor. Zuletzt wird die Erstellung der Struktur der Schedule-Seitenansichten näher beschrieben.

5.5.1 Schedule Klasse

Die Schedule-Klasse besitzt, wie auch die News-Klasse, eine Generatorfunktion zumErstellen 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



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

5.5.2 Daten-Handling

Das Daten-Handling innerhalb der Komponente Schedule ist komplexer als das derNews-Komponente. Bedingt durch das komplexere JSON-Datenformat der Stun-denplandaten wird hierzu eine eigene Klasse JSONProcessor zur Verarbeitung derDatenstruktur 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 [23 ...,45 {6 " eventType ": " Vorlesung ",7 " titleShort ": "WV",8 "_id": "4 ed4d4eae4b096598055db6d ",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 },3132 ...3334 ]

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



So besitzt beispielsweise der Schlüssel member (Zeile 7) keinen Stringwert, son-dern ein Array von Objekten, die wiederum Schlüsselwertpaarelemente besitzen.Die Komplexität der Datenstruktur findet seinen Höhepunkt im Wert des Schlüsselsappointment (Zeile 15).

Die komplexe Datenstruktur des JSON-Datenformats und die Tatsache, dass sichebendieses noch im Entwicklungsprozess befindet und somit jederzeit abgeändertwerden kann, sind die ausschlaggebenden Gründe zur Entwicklung eines eigenenDatenformates. Dazu werden die Datencontainer aus Listing 5.5 wie folgt abgeän-dert:

1 var Datapair_v2 = function () {23 return {4 key: null ,5 value: null ,67 getKey : function () {8 return this.key;9 },10 getValue : function () {11 return this.value;12 },13 setKey : function (k) {14 this.key = k;15 },16 setValue : function (v) {17 this.value = v;18 }19 };20 };2122 var Subelement = function () {2324 return {25 elementdata : new Array (0) ,2627 addElementData : function ( dataelement ) {28 this. elementdata .push( dataelement );29 },3031 getElementData : function () {32 return this. elementdata ;33 }34 };35 };




1 var DataElement = function () {23 return {4 Elements : new Array (),56 addDataElement : function (elem) {7 this. Elements .push(elem);8 },910 getDataElementByIndex : 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 };


Die Klasse Datapair wurde um zwei Set-Methoden erweitert. Neu hinzugekommensind die Klassen Subelement und DataElement. DataElement repräsentiert ein imJSON-Format mit {}-Klammern gekennzeichnetes Objekt und die Klasse Subele-ment ein Array. Beide sind sich im Aufbau ähnlich, weisen jedoch Unterschiede beider Initialisierung und dem Verwalten ihrer Containerobjekte auf. Der Grund fürdie Verwendung marginal unterschiedlicher Klassen wird im Folgenden Abschnitterklärt.

Der JSON-Prozessor überführt die Daten des JSON-Format in das eigens erstellteDatenformat.

« 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



Dazu bietet die Klasse unter Anderem Methoden zum Laden der Daten aus einerJSON-Quelle und zum Exportieren der Daten an. Die Methode loadDataFromJ-SONSource weist einige Besonderheiten auf und wird daher näher betrachtet.

1 loadDataFromJSONSource : function () {23 var Loading = {4 ...56 };7 Loading . loadJSON ( tmp_Data );8 return tmp_Data ;9 }

Listing 5.13: Methode loadDataFromJSONSource

Die Methode enthält einen sogenannten Object-Literale4. Damit lassen sich Metho-den in Klassen verpacken, ohne dabei Instanzen dieses Objektes erstellen zu müssen.Weiterhin kann man mit ihnen einen Namensraum festlegen. Das wurde hier umge-setzt, da die Klasse JSONProcessor nicht zu stark aufgebläht werden soll und dieHelfer-Methoden zum Laden der Daten nicht außerhalb der JSONProzessor-Klasseund innerhalb anderer Methoden der JSONProzessor-Klasse verfügbar sein sollen.Das Prinzip von Schutzklassen wurde damit umgesetzt. Die Methoden des ObjektesLoading werden folgend erklärt:

1 isTypeOf : function ( variable ) {2 if ( typeof ( variable ) == ’object ’) {3 if ( variable . length >= 0) {4 return ’array ’;5 }6 else {7 return ’object ’;8 }9 }10 else {11 return ’primitive ’;12 }13 }

Listing 5.14: Methode isTypeOf()

JavaScript besitzt zur Ermittlung von Datentypen die Funktion typeof, jedoch bietetdiese Funktion keine Möglichkeit Arrays als solche zu erkennen, da in JavaScript alleVariablen entweder primitiven Datentypen oder dem Datentyp Object angehören.Mit isTypeOf wurde die Standard-Funktion typeof von JavaScript um die Erkennungvon Arrays erweitert. Dazu wird das als potentielles Objekt markierte Array auf seine

4Object-Literale sind in JavaScript ein Konstrukt zum Definieren von Object-Objekten in Kurz-schreibweise. Innerhalb von geschweiften Klammern befinden sich, durch Kommas getrennt, dieZuweisungen von Namen zu Objekten.[Sel]



Länge hin überprüft. Existiert im Objekt die Variable length mit mindestens nullElementen, so handelt es sich um ein Array (Zeile 3 - 4).

Das Überführen des JSON-Datenformates in das Webappeigene übernehmen dieMethoden loadJSON und saveData. Die erste Methode ist analog zu der gleich-namigen Methode aus der News-Klasse aufgebaut, jedoch mit dem geringfügigemUnterschied, dass anstelle von Datapair-Objekten (Datenpaaren) nur noch Object-Objekte abgespeichert werden. Somit werden die Stundenplan-Daten als ein Arrayvon Objekten abgespeichert. Das Erkennen und Abspeichern von Schlüsselwertenunterschiedlichen Typs erledigt die Methode saveData.

1 saveData : function (k, v) {23 if ( this. isTypeOf (v) == ’primitive ’) {45 var tmp_datapair = new Datapair_v2 ();6 tmp_datapair . setKey (k);7 tmp_datapair . setValue (v);89 return tmp_datapair ;10 }11 else {12 if (this. isTypeOf (v) == ’array ’) {1314 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) {2021 if ( typeof ( tmp_array [i]) != ’object ’) {22 tmp_array [i] = new DataElement ();23 }24 tmp_array [i]. addDataElement ( Loading . saveData (key , val));25 });2627 i++;28 tmp_datapair2 . setValue ( tmp_array );29 return tmp_datapair2 ;30 }31 else {32 tmp_datapair2 . setValue (new Array (0));33 return tmp_datapair2 ;34 }35 }36 ...

Listing 5.15: Methode saveData()

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



Typ Array (Zeile 12) wird zunächst nur der Schlüssel des Datenpaares eingetragen(Zeile 15). Darauf folgend wird die Länge des Arrays überprüft und im Falle einesleeren Arrays (wie es unter Anderem im Datenformat in Listing 5.10 vorkommt) mitder Länge Null (Zeile 24) erstellt. Besitzt das Schlüsselwert-Array aber Elemente,so ruft sich die Methode saveData() selbst für jedes Array-Element auf.

1 ...2 else {3 if (this. isTypeOf (v) == ’object ’) {45 var tmp_datapair3 = new Datapair_v2 ();6 tmp_datapair3 . setKey (k);78 var tmp_dataelement = new DataElement ();9 $.each(v, function (key , val) {1011 tmp_dataelement . addDataElement ( Loading . saveData (key , val)

);12 });13 tmp_datapair3 . setValue ( tmp_dataelement );14 return tmp_datapair3 ;15 }16 }17 }18 }

Listing 5.16: Methode saveData()

Analog zur Abarbeitung eines Arrays erfolgt die Abarbeitung für den Fall, dass derSchlüsselwert vom Typ Object ist. Um auf die abgespeicherten Stundenplandatenzugreifen zu können, bietet die Schedule-Klasse ebenfalls eine Methode getValueF-romKey. Im Unterschied zur News-Klasse besitzt diese einen zusätzlichen Parameterevent. Damit lassen sich Schlüsselwerte anhand ihres Schlüssels in einem Event su-chen.

In Listing 5.17 erkennt man, dass für jedes Datenelement in diesem Event die Funk-tion doSearch aufgerufen wird (Zeile 13). Sie ist das Such-Äquivalent zur rekursivenSpeicherfunktion saveData aus Listing 5.15.Mit der Abfrage in Zeile 14 wird die Gültigkeit des durch die Suche zurückgegebe-nen Wertes überprüft. Die Besonderheit des Rückgabestrings novalue ergibt sichaus dem Speziallfall, dass ein Schlüsselwert zwar existent ist, aber keinen eingetra-genen Wert enthält.

1 getValueFromKey : function (event , key) {23 var isTypeOf = function ( variable ) {4 ...5 };67 var doSearch = function (k, v) {8 ...



9 };1011 var ln = event. getElementData (). length ;12 for (var i=0; i<ln; i++) {13 var val = doSearch (event. getElementData ()[i]. getKey (), event.

getElementData ()[i]. getValue ());14 if (( isTypeOf (val) == ’primitive ’ && val != ’novalue ’ && val !=

null))15 return val;16 };17 }

Listing 5.17: Methode getValueFromKey()

Die Suchfunktion doSearch ist eine rekursive Funktion mit der Abbruchbedingung,dass ein Schlüsselwert immer einen primitiven Datentyp haben muss. Danach wirdauf das gesuchte Schlüsselwort geprüft und der Schlüsselwert bei erfolgreichem Such-vorgang zurückgegeben. Ist der Schlüsselwert vom Datentyp Array oder Object, sowird die Suche für alle in ihnen befindlichen Elemente wiederholt.

1 var doSearch = function (k, v) {2 if ( isTypeOf (v) == ’primitive ’)3 if (key == k)4 return v;5 else return ’novalue ’;6 else7 if ( isTypeOf (v) == ’array ’)8 for (var i=0; i<v. length ; i++) {9 var tmp_v = doSearch (k, v[i]);10 if ( typeof (tmp_v) == ’string ’ && tmp_v != ’novalue ’)11 return tmp_v;12 else return ’novalue ’;13 }14 else15 if ( isTypeOf (v) == ’object ’) {16 var len = v. Elements . length ;17 for (var j=0; j<len; j++) {18 var t_k = v. Elements [j]. getKey ();19 var t_v = v. Elements [j]. getValue ();20 var wert = doSearch (t_k , t_v);2122 if ( typeof (wert) == ’string ’ && wert != ’novalue ’)23 return wert;24 }25 }26 };

Listing 5.18: Methode doSearch()



5.5.3 Erstellen der Schedule-Seite

Für das Erstellen der Tagesansichten des Stundenplans bietet die Schedule-Klassedie Methode createStructureOfSchedulePages an. Sie bekommt einen Stundenplanals Parameter übergeben und erzeugt für diese sämtliche Tagesansichten.

1 createStructureOfSchedulePages : function ( schedule ) {23 var sched_name = this. getScheduleName ( schedule );4 var back_str ;5 var next_str ;67 for (var i=0; i <5; i++) {89 if (i <1)10 back_str = ’#p3’;11 else back_str = ’# schedulePage -’ + sched_name + ’-’ + (i -1);1213 if (i >=4)14 next_str = ’’;15 else next_str = ’# schedulePage -’ + sched_name + ’-’ + (i+1);1617 // create Schedule -Page of a day18 $(’body ’). append (’<div data -role =" page" id=" schedulePage -’ +

sched_name + ’-’ + i + ’"></div >’);19 $(’# schedulePage -’ + sched_name + ’-’ + i). append (20 ’<div data -role =" header ">’ +21 ’<h1 >’ + getDay (i) + ’</h1 >’ +22 ’<a class =" button " href ="’ + back_str + ’">Back </a>’ +23 ’<a class =" button " href ="’ + next_str + ’">Next </a>’ +24 ’</div >’ +25 ’<div data -role =" content ">’ +26 ’<ul data -role =" listview " data -inset =" true" id=" scheduleDay

-’ + getDay (i) + ’"></ul >’ +27 ’</div >’28 );2930 // deleting next Button if last page was reached31 if ( next_str == ’’)32 $(’# schedulePage -’+ sched_name + ’-’ + 4 + ’ a’). remove (’:

contains (" Next ")’);3334 ...35 }3637 ...38 }

Listing 5.19: Methode createStructureOfSchedulePages()

Zunächst filtert die Methode den zur Erstellung der Seiten notwendigen Namen desStundenplans (Zeile 3) heraus. Um die aus Abbildung 4.5 erkennbare Navigationder Tagesansichten zu erstellen ist es notwendig zu wissen, ob sich die zu erstellende



Tagesansicht am Anfang oder am Ende der Woche befindet. Handelt es sich bei derTagesansicht um einen Montag, so wird die Quellenangabe des Zurück-Buttons aufdas Hauptmenü gesetzt (Zeile 10), andernfalls auf den vorangehenden Tag (Zeile11). Handelt es sich bei der Tagesansicht um einen Freitag, so wird die Referenzdes Vorwärts-Buttons stillgelegt (Zeile 14), andernfalls auf den nachfolgenden Taggesetzt (Zeile 15).Das Erstellen der Seitenstruktur erfolgt nach dem bekannten Muster, mit dem Zu-satz, dass zwei Navigationselemente plus Tag im Kopf der Seitenansicht dargestelltwerden (Zeile 21-23). Die Funktion getDay liefert den Tag anhand einer Zahl zurück,wobei die Zahlen Null bis Sieben stellvertretend für Montag bis Sonntag stehen. Mitder Überprüfung in Zeile 31 wird der Vorwärts-Button aus der Navigationsleiste derTagesansicht entfernt, wenn es sich um den letzten Tag handelt.

Nachdem der Kopfbereich der Tagesansichten des Stundenplans erstellt ist wird dereigentliche Anzeigebereich mit den sieben Zeitslots erstellt. Analog zu getDay ausListing 5.19 existiert eine Funktion getTimeSlot, welche die zum Index des Zeitslotspassende Uhrzeit liefert (Zeile 12). Ein Listenelement ist in zwei Teile gegliedert. InTeil eins steht die Uhrzeit, während Teil zwei als Container für Events dient(Zeile13).

1 // deleting next Button if last page was reached2 if ( next_str == ’’)3 $(’# schedulePage -’+ sched_name + ’-’ + 4 + ’ a’). remove (’:

contains (" Next ")’);4 // creating timeslots for a day5 for (var j=0;j <7;j++) {67 $(’# schedulePage -’ + sched_name + ’-’ + i + ’ # scheduleDay -’

+ getDay (i)). append (89 ’<li id=" timeslot -’ + j + ’">’ +10 ’<a data -rel =" dialog " data - transition =" pop">’ +11 ’<table width ="100%" > <tr >’ +12 ’<td width ="50 px">’ + getTimeSlot (j) +’</td >’ +13 ’<td id=" eventcontainer "></td >’ +14 ’</tr ></table >’ +15 ’</a>’ +16 ’</li >’17 );18 }

Listing 5.20: Methode createStructureOfSchedulePages()

Im Anschluss an das Erstellen einer Tagesansicht des Stundenplans erfolgt das Fül-len der Event-Container mit Events. Dazu bietet die Schedule-Klasse die MethodefillSchedulePages an. Diese bekommt ebenfalls als Parameter einen Stundenplanübergeben. Zunächst werden alle Informationen zu einem Event gesammelt und an-schließend in den Container eingetragen.



1 fillSchedulePages : function ( schedule ) {23 var sched_name = this. getScheduleName ( schedule );45 // for each day6 for (var i=0; i <5; i++) {78 // and each timeslot9 for (var j=0; j <7; j++) {1011 // get events of the timeslot by day12 var daytimeEvents = this. getEventsByDayByTime (schedule ,

getDay (i), getRealTimeSlot (j));13 // yeah , so insert all step -by -step14 for (var k=0; k< daytimeEvents . length ; k++) {15 // get information about event16 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 ;2526 ...27 }28 }29 }30 }

Listing 5.21: Methode fillSchedulePages()

Um die richtigen Seiteninhalte zu bekommen müssen die passenden Events für jedenTag und jeden Zeitslot gefunden werden. Dies erledigt die Funktion getEventsBy-DayByTime in Zeile 12. Sie liefert ein Array von Events. Dieses wird im Anschlussdurchlaufen und die Informationen mit Hilfe der Methode getValueFromKey heraus-gefiltert.

Daraufhin wird geprüft, um welchen Event-Typ es sich handelt. Je nach Art wirddann entweder das Symbol für Vorlesung oder Übung geladen und festgelegt, ob essich um ein Event im wöchentlichen oder im zweiwöchentlichen Wiederholungszyklushandelt (Zeile 17-29, Listing 5.22).



1 fillSchedulePages : function ( schedule ) {23 var sched_name = this. getScheduleName ( schedule );45 // for each day6 for (var i=0; i <5; i++) {78 // and each timeslot9 for (var j=0; j <7; j++) {1011 // get events of the timeslot by day12 var daytimeEvents = this. getEventsByDayByTime (schedule ,

getDay (i), getRealTimeSlot (j));13 // yeah , so insert all step -by -step14 for (var k=0; k< daytimeEvents . length ; k++) {1516 ...17 // checkup event symbol18 if ( event_type == ’Vorlesung ’)19 event_icon = ’images / lecture .png ’20 else if ( event_type == ’Uebung ’)21 event_icon = ’images / uebung .png ’;2223 // checkup event type24 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 ’;3031 // append event to eventcontainer32 $(’# 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 : 15px"></div >’)40 );41 }42 }43 }44 }

Listing 5.22: Methode fillSchedulePages()



Im anschließenden Code-Block wird der zum Event zugehörige Container des Zeits-lots gesucht und die Eventinformationen darin eingetragen. Hervorzuheben ist hierZeile 33. Das Klassenattribut des DIV-Containers wird hier um denWert aus event_-week_type ergänzt. Das führt zur Nutzung unterschiedlicher CSS-Klassen, welcheEvents unterschiedlichen Wochentyps optisch unterscheiden. Weiterhin ist zu be-achten, dass das Icon des Events anhand der Variable event_icon festgelegt wurdeund nun dazu führt, dass Vorlesungen und Übungen unterschiedliche optische Kenn-zeichnungen bekommen (Zeile 35).

5.6 MySchedule

In diesem Unterkapitel wird die Funktionsweise des Features MySchedule näher be-schrieben. Die Komponente MySchedule besitzt die zwei Klassen MySchedule undLocalStorage. Während Erstere das Erstellen der Webseitenansichten und das Bereit-stellen der Datenstruktur der Stundenplan-Events behandelt, beherbergt die KlasseLocalStorage die technische Umsetzung des Lade- und Speichervorgangs.

5.6.1 Allgemein

Die Seitenansichten des Features MySchedule sind analog zu den Seitenansichtenvon Schedule aufgebaut, daher wird deren Erstellung nicht näher beschrieben. DieEvents, welche im vorangegangenen Kapitel in die Seitenansichten eingefügt wurdenbesitzen 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, be-sitzt ein Datenstrukturobjekt eines Events vier Elemente.

1 dataStructure : function (day , timeslot , data) {23 index ++;4 return {5 m_day: day ,6 m_timeslot : timeslot ,7 m_data : data ,8 m_id: index9 }10 }

Listing 5.23: Datenstruktur eines Event-Objektes



Day und timeslot kennzeichnen den Zeitpunkt des Events, während id den Indexeines zu speichernden Elements im lokalen Speicher des Browsers kennzeichnet. DasData-Objekt enthält eine String-Repräsentation der HTML-Baumstruktur(Listing5.24) eines Events. Dadurch wird sichergestellt, dass selbst bei Design- oder Lay-outänderungen der Events im Feature Schedule keinerlei Anpassungen durchgeführtwerden müssen. Die Events werden somit eins zu eins kopiert.

1 <td id="ls - eventcontainer ">2 <div id="event -5" class =" event_borders event_even ">3 <div >SWEProg </div >4 <div class=" event_icon_pos ">5 <img src=" images / uebung .png">6 </div >7 <div >Gruppe : 3</div >8 <div >B: PC1 </div >9 <div class=" event_owner_pos ">Recknagel </div >10 </div >11 </td >

Listing 5.24: HTML-Struktur eines Events

5.6.3 LocalStorage

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

5.6.4 Bereitstellen der Speicherfunktion

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



Zeitslot die Funktion createPopup gebunden. Somit wurde sichergestellt, dass nurEvents abgespeichert werden können, die auch tatsächlich existieren. Eine Beson-derheit ist in Zeile 19 zu sehen. Hier wird zunächst aus dem jQuery-Selektor-Stringein jQuery-Objekt geformt und anschließend der HTML-Baum dieses Objektes alsString-Repräsentation zurückgegeben. Diese ist wichtig für den weiteren Speicher-vorgang.

1 addStorageAbilityTo : function (lS) {23 var schedule_count = $(’# scheds li’).size ();4 var sched_name = $(’# scheds li’);56 var i=0;7 $.each(sched_name , function () {89 var the_a = $( sched_name [i]).find(’a’);10 var name = the_a.text ();1112 for (var j=0; j <5; j++)13 for (var k=0; k <7; k++) {14 var sstr = ’# schedulePage -’ + name + ’-’ + j + ’ #timeslot -

’ + k + ’ # eventcontainer ’;1516 var child_counter = $($(sstr). children ()).size ();17 if ( child_counter > 0) {1819 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ü. Nachdem Drücken auf ”Yes” wird das Event an die Methode storeEvent übergeben unddas Popup geschlossen, bei Druck auf ”No” wird nur das Popup geschlossen. In Zei-le 3 wird ein neues dataStructure-Objekt erzeugt. Die Daten aus den Parameternwurden zuvor gekapselt und von addStorageAbility(Listing 5.25, Zeile 20) über crea-tePopup an diese Methode weitergereicht. Der Parameter eventdata enthält dieString-Repräsentation des HTML-Baumes des Event-Containers.



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

Listing 5.26: Methode storeEvent()

Die API von Web Storage schreibt beim Hinzufügen von Elementen zum Brow-serspeicher vor, dass nur Schlüssel und dazugehörige Schlüsselwertpaare abgespei-chert werden können, wobei der Schlüssel eine Zahl und der Schlüsselwert ein Stringsein muss. Mit der Funktion stringify (Zeile 4) der JSON-API entsteht aus demdataStructure-Object eine String-Repräsentation, die im Browserspeicher abgespei-chert werden kann.

Die Methode loadEvent lädt alle Eventeinträge im Browserspeicher und fügt diese indie Tagesansicht des MySchedule-Stundenplans ein. Dazu wird, wie in Listing 5.27zu erkennen, für alle abgespeicherten Events zunächst einmal das Event geladen undanschließend mit Hilfe der Funktion JSON.parse in ein JavaScript-Objekt überführt.Das Event wird anschließend anhand seiner Daten (Tag und Zeitslot) der jeweiligenTagesansicht hinzugefügt (Zeile 8). Um doppelte Einträge zu vermeiden werden vordem Einfügen alle Einträge gelöscht (Zeile 6).

1 loadEvent : function () {23 for (var i=0; i< window . localStorage . length ; i++) {4 var t_item = JSON.parse( window . localStorage . getItem (i));56 $(’# localSchedule -’ + t_item .m_day + ’ #timeslot -’ +

getSlotNumberFromTimeSlot ( t_item . m_timeslot ) + ’ #ls -eventcontainer ’). children (). remove ();

78 $(’# localSchedule -’ + t_item .m_day + ’ #timeslot -’ +

getSlotNumberFromTimeSlot ( t_item . m_timeslot ) + ’ #ls -eventcontainer ’). append ( t_item . m_data );

9 }1011 }

Listing 5.27: Methode loadEvent()


6 Resümee

Diese Arbeit hat gezeigt, dass eine plattformunabhängige Umsetzung einer Applika-tion zur Veranschaulichung der Stundenpläne und des Aktuellen für mobile Endge-räte möglich ist. Die in Kapitel 2 angegeben Aufgaben und Anforderungen wurdenerfüllt. Die Webapp wurde rein clientseitig in Javascript, HTML5 und CSS3 imple-mentiert, mit minimalen Abhängigkeiten zu serverseitigen Vorgängen. Die Applika-tion ist sowohl online, als auch offline nutzbar. Weiterhin wurde erstmalig im Spirit-Projekt eine Möglichkeit geschaffen, einen Stundenplan über Semester- und Studien-ganggrenzen hinweg manuell zusammenzustellen. Das gewählte Design der Webapporientiert sich an den bereits existenten App-Umsetzungen der Spirit-Plattform unddem derzeitigen Design der Stundenplan-Webseite der Fakultät Informatik der FH-Schmalkalden.


7 Zukunftsaussichten

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

7.1 Funktionsumfang

• Exportfunktion des Stundenplans

• Ersetzen der Navigations-Buttons durch Wisch-Bewegungen

• Möglichkeit zur Konfiguration der angezeigten News- / Stundenplaninforma-tionen

• Möglichkeit zur Konfiguration des Designs

• Schnellwahl der Menüs durch Icons im Footer-Bereich

• „Eigenen Stundenplan löschen Funktion

• Funktion, um Webapp zum Startbildschirm des Endgerätes hinzuzufügen

7.2 Quellcode-Verbesserungen

• JSONProcessor-Klasse sowohl für Schedule, als auch für News verwenden

• Auslagerung von Neudeklarierungen der rekursiven Suche plus Callback-Para-meter

• 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


Abbildungsverzeichnis

3.1 Marktanteile der Mobilen Browser im Jahr 2011 . . . . . . . . . . . . 9

4.1 Aufbau des Hauptmenüs . . . . . . . . . . . . . . . . . . . . . . . . . 164.2 Aufbau des Untermenüpunktes News . . . . . . . . . . . . . . . . . . 164.3 Aufbau der Stundenplanübersicht . . . . . . . . . . . . . . . . . . . . 174.4 Aufbau der Stundenplanansicht (Montag bis Freitag) . . . . . . . . . 174.5 Aktivitätsdiagramm des regulären Anwendungsfalles . . . . . . . . . . 184.6 Grundgerüst einer Ansicht . . . . . . . . . . . . . . . . . . . . . . . . 194.7 Komponentendiagramm: Aufbau eines Features . . . . . . . . . . . . 20

5.1 Klassendiagramm der News-Klasse . . . . . . . . . . . . . . . . . . . 245.2 Klassendiagramm der Schedule-Klasse . . . . . . . . . . . . . . . . . 305.3 Klassendiagramm der JSON-Prozessor-Klasse . . . . . . . . . . . . . 33

A.1 Hauptmenü . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XIA.2 News - Listenübersicht . . . . . . . . . . . . . . . . . . . . . . . . . . XIA.3 News - Detailansicht . . . . . . . . . . . . . . . . . . . . . . . . . . . XIIA.4 Schedule - Studiengangübersicht . . . . . . . . . . . . . . . . . . . . . XIIA.5 Schedule - Detailansicht . . . . . . . . . . . . . . . . . . . . . . . . . XIIIA.6 MySchedule - Übersicht . . . . . . . . . . . . . . . . . . . . . . . . . XIII

Toni BolduanVI

Tabellenverzeichnis

3.1 Marktanteile der Desktop-Browser [Shaa] . . . . . . . . . . . . . . . . 73.2 Marktanteile der Mobile-Browser [Shab] . . . . . . . . . . . . . . . . 83.3 Marktanteile der mobilen Browser von Dez. 2010 bis Dez. 2011 [Shac] 83.4 Browser mit dazugehörigen Browserengines . . . . . . . . . . . . . . . 93.5 Unterstützung benötigter HTML Komponenten [Wik12] . . . . . . . . 103.6 Nutzwertanalyse von Frameworks (siehe Anhang B) . . . . . . . . . . 13

B.1 Punkteverteilung zu Kriterium Funktionsumfang[Len] . . . . . . . . . XIVB.2 Punkteverteilung zu Kriterium Browsersupport[Len] . . . . . . . . . . XIVB.3 Punkteverteilung zu Kriterium Größe des Frameworks[Sch] . . . . . . XIVB.4 Punkteverteilung zu Kriterium Komplexität[Sch] . . . . . . . . . . . . XV

Toni BolduanVII

Listings

5.1 HTML-Struktur einer Seite . . . . . . . . . . . . . . . . . . . . . . . 225.2 HTML-Struktur des Menüs / Auszug aus index.html . . . . . . . . . 235.3 Fabrikmethode zur Erzeugung von Objekten der Newsklasse . . . . . 245.4 Auszug aus http://spirit.fh-schmalkalden.de/rest/1.0/news . . . . . . 255.5 Datenklassen des Datenformats . . . . . . . . . . . . . . . . . . . . . 265.6 Laden der News-Daten . . . . . . . . . . . . . . . . . . . . . . . . . . 275.7 Erstellen der Seitenstruktur von News . . . . . . . . . . . . . . . . . . 285.8 Suchen von Schlüssel und passendem Schlüsselwert aus Datenstruktur 295.9 Erstellen der Detailansichten einer News . . . . . . . . . . . . . . . . 295.10 Auszug aus .../rest/1.0/schedule?classname=bai3 . . . . . . . . . . . 315.11 Datenklassen des Datenformats . . . . . . . . . . . . . . . . . . . . . 325.12 Datenklassen des Datenformats . . . . . . . . . . . . . . . . . . . . . 335.13 Methode loadDataFromJSONSource . . . . . . . . . . . . . . . . . . 345.14 Methode isTypeOf() . . . . . . . . . . . . . . . . . . . . . . . . . . . 345.15 Methode saveData() . . . . . . . . . . . . . . . . . . . . . . . . . . . 355.16 Methode saveData() . . . . . . . . . . . . . . . . . . . . . . . . . . . 365.17 Methode getValueFromKey() . . . . . . . . . . . . . . . . . . . . . . 365.18 Methode doSearch() . . . . . . . . . . . . . . . . . . . . . . . . . . . 375.19 Methode createStructureOfSchedulePages() . . . . . . . . . . . . . . . 385.20 Methode createStructureOfSchedulePages() . . . . . . . . . . . . . . . 395.21 Methode fillSchedulePages() . . . . . . . . . . . . . . . . . . . . . . . 405.22 Methode fillSchedulePages() . . . . . . . . . . . . . . . . . . . . . . . 415.23 Datenstruktur eines Event-Objektes . . . . . . . . . . . . . . . . . . . 425.24 HTML-Struktur eines Events . . . . . . . . . . . . . . . . . . . . . . 435.25 Methode addStorageAbility() . . . . . . . . . . . . . . . . . . . . . . 445.26 Methode storeEvent() . . . . . . . . . . . . . . . . . . . . . . . . . . . 455.27 Methode loadEvent() . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

Toni BolduanVIII

Literaturverzeichnis

[For] Force, The Internet Engineering T.: HTTP State Management Mecha-nism. http://tools.ietf.org/html/rfc2965, Abruf: 13.März. 2012

[GHJV94] Gamma, Erich ; Helm, Richard ; Johnson, Ralph ; Vlissides,John: Design Patterns: Elements of Reusable Object-Oriented Softwa-re. Addison-Wesley Professional, 1994

[Inc] Inc., Google: Google Web Toolkit Overview. http://code.google.com/intl/de-DE/webtoolkit/overview.html, Abruf: 21. Februar. 2012

[Kyr] Kyrnin, Jennifer: AJAX - Definition. http://webdesign.about.com/od/ajax/g/bldefajax.htm, Abruf: 16. Februar. 2012

[Len] Lennon, Joe: Framework comparison. http://public.dhe.ibm.com/software/dw/web/wa-jsframeworks/wa-jsframeworks-pdf.pdf, Ab-ruf: 22.März. 2012

[New08] Newton, Aaron: MooTools Essentials: The Official MooTools Referencefor JavaScript(TM) and Ajax Development. FirstPress, 2008

[Sch] Schuetz, Matthias: JavaScript Framework Matrix. http://matthiasschuetz.com/javascript-framework-matrix/de/, Abruf:22.März. 2012

[Sel] Selfhtmnl.org: Organisation von Javascripten. http://aktuell.de.selfhtml.org/artikel/javascript/organisation/#object-literale, Abruf: 7.März. 2012

[Shaa] Share, NetMarket (Hrsg.): Desktop Browser Market Share.http://netmarketshare.com/browser-market-share.aspx?qprid=0&qpcustomd=0, Abruf: 26. Januar. 2012

[Shab] Share, NetMarket (Hrsg.): Mobile Browser Market Share.http://netmarketshare.com/browser-market-share.aspx?qprid=0&qpcustomd=1, Abruf: 26. Januar. 2012

[Shac] Share, NetMarket (Hrsg.): Mobile Browser Market Share Trend.http://netmarketshare.com/browser-market-share.aspx?qprid=1&qpcustomb=1&qptimeframe=M&qpsp=143&qpnp=13, Abruf:

Toni BolduanIX

http://tools.ietf.org/html/rfc2965

http://code.google.com/intl/de-DE/webtoolkit/overview.html

http://code.google.com/intl/de-DE/webtoolkit/overview.html

http://webdesign.about.com/od/ajax/g/bldefajax.htm

http://webdesign.about.com/od/ajax/g/bldefajax.htm

http://public.dhe.ibm.com/software/dw/web/wa-jsframeworks/wa-jsframeworks-pdf.pdf

http://public.dhe.ibm.com/software/dw/web/wa-jsframeworks/wa-jsframeworks-pdf.pdf

http://matthiasschuetz.com/javascript-framework-matrix/de/

http://matthiasschuetz.com/javascript-framework-matrix/de/

http://aktuell.de.selfhtml.org/artikel/javascript/organisation/#object-literale



http://netmarketshare.com/browser-market-share.aspx?qprid=0&qpcustomd=0




http://netmarketshare.com/browser-market-share.aspx?qprid=1&qpcustomb=1&qptimeframe=M&qpsp=143&qpnp=13

http://netmarketshare.com/browser-market-share.aspx?qprid=1&qpcustomb=1&qptimeframe=M&qpsp=143&qpnp=13

Literaturverzeichnis Fachhochschule Schmalkalden SS 2011

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 Frame-work. http://api.prototypejs.org/, Abruf: 16. Februar. 2012

[VB11] Vollendorf, Maximillian ; Bongers, Frank: jQuery - Das Praxisbuch.Galileo Press, 2011

[15] (W3C), World Wide Web C.: Web Storage. http://www.w3.org/TR/webstorage/, Abruf: 13.März. 2012

[Wik12] Wikipedia: Comparison of layout engines (HTML5) — Wikipedia,The Free Encyclopedia. http://en.wikipedia.org/w/index.php?title=Comparison_of_layout_engines_(HTML5)&oldid=475427521.Version: 2012. – [Online; accessed 21-February-2012]

Toni BolduanX

http://www.sencha.com/products/extjs/

http://www.sencha.com/products/extjs/

http://api.prototypejs.org/

http://www.w3.org/TR/webstorage/

http://www.w3.org/TR/webstorage/

http://en.wikipedia.org/w/index.php?title=Comparison_of_layout_engines_(HTML5)&oldid=475427521

http://en.wikipedia.org/w/index.php?title=Comparison_of_layout_engines_(HTML5)&oldid=475427521

A Programmvorstellung

Abbildung A.1: Hauptmenü

Abbildung A.2: News - Listenübersicht

Toni BolduanXI

A. Programmvorstellung Fachhochschule Schmalkalden SS 2011

Abbildung A.3: News - Detailansicht

Abbildung A.4: Schedule - Studiengangübersicht

Toni BolduanXII

A. Programmvorstellung Fachhochschule Schmalkalden SS 2011

Abbildung A.5: Schedule - Detailansicht

Abbildung A.6: MySchedule - Übersicht

Toni BolduanXIII

B Details zur Nutzwertanalyse

Funktion jQuery ExtJS GWT MooTools PrototypeFeature Detection Ja Nein Nein Ja Nein

JSON Ja Ja Ja Ja JaDOM-Wrapped Ja Ja Ja Nein Nein

DOM-Manipulation Ja Ja Ja Ja Ja

DOM-Traversal Ja Ja Ja Ja JaEvent-Handling Ja Ja Ja Ja Ja

Selectors Ja Ja Ja Ja JaThemes Ja Nein Ja Nein NeinResizing Ja Ja Nein Nein NeinGesamt 9 7 7 6 5

Tabelle B.1: Punkteverteilung zu Kriterium Funktionsumfang[Len]

Browser jQuery ExtJS GWT MooTools PrototypeInternet Explorer 6.0+ 6.0+ 6.0+ 6.0+ 6.0+

Firefox 3.6+ 3.6+ 1.0+ 2.0+ 2.0+Opera 9.0+ 10.5+ 9.0+ 9.0+ 9.25+

Chrome 1.0+ 6.0+ no officialsupport 4.0+ 1.0

Safari 5.0.6 3.0+ 2.0+ 3.0+ 2.0+Gesamt 8 7 7 7 8

Tabelle B.2: Punkteverteilung zu Kriterium Browsersupport[Len]

Paket jQuery ExtJS GWT MooTools Prototypeminified 72 KB 48 KB - 65 KB 46 KB

uncompressed 229 KB 502 KB 180 MB 101 KB 278 KBGesamt 4 4 0 5 5

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

Toni BolduanXIV

B. Details zur Nutzwertanalyse Fachhochschule Schmalkalden SS 2011

Paket jQuery ExtJS GWT MooTools PrototypeDokumentation

der API 2 2 2 2 2

Tutorial 1 1 0 1 1Demo 1 1 1 1 0Gesamt 4 4 3 4 3

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

.

Toni BolduanXV

C Quelltext

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

Toni BolduanXVI

Eidesstattliche Erklärung

Ich versichere an Eides Statt durch meine eigenhändige Unterschrift, dass ich dievorliegende Arbeit selbstständig und ohne fremde Hilfe angefertigt habe. Alle Stel-len, die wörtlich oder dem Sinn nach auf Publikationen oder Vorträgen andererAutoren beruhen, sind als solche kenntlich gemacht. Ich versichere außerdem, dassich keine andere als die angegebene Literatur verwendet habe. Diese Versicherungbezieht sich auch auf alle in der Arbeit enthaltenen Zeichnungen, Skizzen, bildlichenDarstellungen und dergleichen.

Die Arbeit wurde bisher keiner anderen Prüfungsbehörde vorgelegt und auch nochnicht veröffentlicht.

Veilsdorf,den 22. März 2012

Ort, Datum Toni Bolduan

Toni BolduanXVII

Entwicklung einer auf JavaScript undHTML5 basierenden Smart-ClientApplikation zur Nutzung...

Documents

Transcript of Entwicklung einer auf JavaScript undHTML5 basierenden Smart-ClientApplikation zur Nutzung...