lernmaterial...formulare auswerten, html5, javascript, jquery, mobile web app, native app, phonegap...

Seite 1

Lernmaterial Clientseitig dynamische Webseiten mit einem

Javascript Framework (JQuery) entwickelnFachbereich Wirtschaftsinformatik

Stand: 2014

Berufliches Schulzentrum Wangen

Seite 2

Inhaltsverzeichnis 1 Stichworte...................................................................................................3

2 Allgemeines.................................................................................................3

3 Einführungsbeispiele DOM-Manipulation mit jQuery...........................................5 3.1 Bereitstellung des jQuery-Framework.........................................................6 3.2 Übung 1: DOM-Manipulation 1...................................................................8 3.3 Übung 2: DOM-Manipulation 2 (Methoden effizient auslagern)......................15 3.4 Übung 3: DOM-Manipulation 3 (Methoden überladen und verketten)..............20

4 Clientseitige Entwicklung einer Web-App mit JQuery........................................23 4.1 Beispiel 1: Navigation.............................................................................24 4.2 Beispiel 2: Dynamische Auswertung Taschenrechner...................................34 4.3 Beispiel 3: Dynamische Auswertung Währungsrechner................................44

5 Erweiterung zur Mobile-Web-App mit JQuery-Mobile.........................................53 5.1 Am Beispiel des Taschenrechners..............................................................54 5.2 Am Beispiel des Währungsrechners...........................................................61

6 Ausblick....................................................................................................62 6.1 Anwendungsbeispiel: Android App mit PhoneGap........................................63 6.1.1 Unsere WebApp wird zu einer nativen Android App..................................63 6.1.2 Mit PhoneGap-Build-Webservice eine .apk-Datei erzeugen........................66 6.1.3 Die Anwendung auf dem virtuellen Android-Gerät (AVD) installieren..........68

7 Einrichtung und Konfiguration in Eclipse.........................................................74 7.1 Allgemeines zur Konfiguration der Entwicklungsumgebung Eclipse.................75 7.2 Syntax-Hilfe mit dem Eclipse-PlugIn-Aptana...............................................79

8 Anhang.....................................................................................................83 8.1 Vorgangsbeschreibung am Beispiel des Taschenrechners..............................84 8.2 Vorgangsbeschreibung am Beispiel des Währungsrechners...........................88

9 Quellen.....................................................................................................91


Seite 3

1 StichworteCSS3, Dop-Down-Menü, DOM-Manipulation, Einführungsbeispiele, Framework,Formulare auswerten, HTML5, Javascript, JQuery, Mobile Web App, NativeApp, PhoneGap Build, Übungen, Web App, Webprogrammierung.

2 Allgemeines

JQuery ist ein Javascript Framework. Ein Rahmenwerk das im weiten Sinne die Vermitt-lerfunktion zwischen Browser und Javascript übernimmt und jede Menge Dienstfunktio-nen zur Verfügung stellt.

Damit sind die Bibliotheken organisiert, online verfügbar und zentral verwaltet.

Das Framework stellt, außer der jQuery Application Programming Interfaces (API), mitjQuery UI u.a. die Komponenten für die Benutzeroberflächen mobiler Endgeräte, derenZugriffsmethoden und CSS-Klassen, die Erweiterungen für die Gestaltung von Benutze-roberflächen mobiler Endgeräte, online zur Verfügung.

Der umständliche Umgang mit der Document Object Modell (DOM) wird mit Hilfe desFrameworks vereinheitlicht und erleichtert.

Dieses Rahmenwerk besteht aus einem in JavasScript geschriebenen Progamm. Es stelltMethoden zur Verfügung die es ermöglichen fortschrittliche Benutzerschnittstellen zuschaffen und aufregende, animierte, animierte, interaktive Websites zu entwerfen.

Einsatzbereiche:1. Elemente finden2. Elemente manipulieren3. Inhalte einfügen4. Bestandteile einer Seite animieren5. Event-Handling

Das Framework sorgt u.a. dafür, dass wir uns um die Verwirklichung unserer Ideen küm-mern können, anstatt sich mit verschiedenen Bugs und Tücken bestimmter JavaScript-Engines herumzuärgern. [VOL00]

Das Skript schildert den Umgang mit dem Framework anhand vonkonkreten Beispielen die unter Umständen auch in den Unterrichtim Fachbereich Wirtschaftsinformatik respektive im Fachbereich In-formatik einbetten lassen.

Aktuelle Versionen des Skriptes selbst und die im Skript behandel-ten Quellcodes können Sie online herunterladen und testen:

http://www.emotionalspirit.de/speaker2_3_3/index.php/2014/01/27/entwickeln-mit-javascript-framework-jquery-jquery-mobile/

Skript & Sources:

Download: Eclipse-Projekt (00_00jQuery.zip)Download: Eclipse-Android-Projekt (MyApp.zip)


Online-Lösungen:

Web-APPMobile-App



http://www.emotionalspirit.de/speaker2_3_3/wp-content/uploads/MyApp.zip

http://www.emotionalspirit.de/speaker2_3_3/wp-content/uploads/00_00jQuery.zip

http://www.emotionalspirit.de/mobile/

http://www.emotionalspirit.de/webapp/

Seite 4

Download (PDF): Arbeitmaterial_JQuery_clienseitig_finalDownload (ODT): Arbeitmaterial_JQuery_clienseitig_final

Für alle Inhalte gilt natürlich das Urheberrecht. Ich selber achteauch darauf. Um Details zur Creative-Commons-Lizenz für dievon mir selbst verfassten Texte und Quellcodes zu erhalten, kli-cken Sie links auf das CC-BY-NC-SA-Logo. Für Ergänzungs-und/oder Verbesserungsvorschläge scheiben Sie mir bitte eine E-Mail: [email protected]

Alle Quellangaben wurden nach bestem Gewissen genannt und aufgeführt. Permanentbegleitende Literatur waren:

[FRA00]

Franke, Florian, Ippen, Johannes,“Apps mit HTML5 und CSS3“,978-3-8362-1848-1,2013, Galileo Computing

[VOL00]

Vollendorf, Maximilian, Bongers, Frank, „jQuery das Praxisbuch“, 978-3-8362-1810-8,2013, Galileo Computing

[WEN00] Wenz, Christian, „Javascript“, 978-3-8362-1979-2, 2014, Galileo Computing

Sowie diverse Internetquellen, die in den Quellenangaben im letzten Kapitel aufgeführtwerden.


mailto:[email protected]

http://www.emotionalspirit.de/speaker2_3_3/wp-content/uploads/Arbeitmaterial_JQuery_clienseitig_final.odt

http://www.emotionalspirit.de/speaker2_3_3/wp-content/uploads/Arbeitmaterial_JQuery_clienseitig_final.pdf

http://creativecommons.org/licenses/by-nc-sa/3.0/deed.de

Seite 5

3 Einführungsbeispiele DOM-Manipulation mit jQuery

Einführungsbeispiele DOM-Manipulation

mit jQuery


Seite 6

3.1 Bereitstellung des jQuery-Framework

Starten Sie die EntwicklungsumgebungEclipse in der WEB-Perspektive und legenSie ein neues Web Project mit dem Namen>>00_00jQuery<< an:

Die jQuery Libs können lokal und onlineeingebunden werden.

Damit Sie jQuery lokal einbinden können,erzeugen Sie im Projektverzeichnis>>00_00jQuery<< ein neues Verzeichnismit dem Namen >>jquery<<.

Laden Sie die minimierte (komprimierte)Produktversion von jQuery herunter.

Nutzen Sie dazu die jQueryWebsite:http://jquery.com/

Klicken Sie auf die Schaltfläche Download.

Für die lokale Einbindung der Mobilen API:

http://jquerymobile.com/download/


http://jquerymobile.com/download/

http://jquery.com/

Seite 7

Klicken Sie die minimierte Version mit derlinken Maustaste an und wählen Sie imKontext-Menü die Option >>Link spei-chern unter<<.

Wählen Sie als Speicher-Ziel das geradeerzeugte Verzeichnis >>jquery<< aus undspeichern Sie die Datei

Wählen Sie in ihrem Projekt im Kontext-Menü die Option >>Refresh<< um die Ver-zeichnis-Inhalte zu aktualisieren.


Seite 8

Die Einführungsbeispiele wurden an die Anforderungen der Schulung angepasst und er-weitert [VOL00].

3.2 Übung 1: DOM-Manipulation 1

Erzeugen Sie ein neues Verzeichnis:

00_0manipulation

Die Projekte halten sich an das gängigeModell-View-Controller (MVC) Konzept.

Legen Sie deshalb zusätzliche Unterver-zeichnisse für das Stylesheet (css-verzeichnis) und das Javascript (js-Ver-zeichnis) an.

Klicken Sie das neu erzeugte Verzeichnisund wählen Sie im Kontextmenü die Option>> New >> Other >> Web >> HTML File

Nennen Sie die Datei >> index.html undklicken Sie auf >> Finish um den Vorgangabzuschließen.


Seite 9

Hinweis:Ändern Sie in Eclipse >> Window >> Gene-ral >> Workspace >> Text file encodingauf:

Damit werden die Umlaute in Strings beimöffen der Datei erkannt und korrekt darge-stellt.

Als HTML5-Dokument:

Fügen Sie im ersten Schritt die Meta-Infor-mationen hinzu.

Die Angaben zum verwendeten Zeichen-satz ist u.a. für die Darstellung vonSonderzeichen und Umlauten eine relevan-te Angabe. Wir wählen dazu das UCSTransformation Format, wobei UCS wieder-um Universal Character Set abkürzt, kurzUTF-8.

<meta http-equiv="content-type" content= "text/html; charset=UTF-8" />

Fügen Sie den Titel ein.

Die Datei bezieht die Formatangaben auseinem Stylesheet. In der Regel werden die-se Angaben ausgelagert in eine separateDatei. Fügen Sie dazu den Link zur Styles-heet Datei >> css/styles.css

<link href="css/styles.css" rel="stylesheet" type="text/css">


Seite 10

In den Eingangsbeispielen nutzen wir dasonline verfügbare Framework von jQuery.

Fügen Sie dazu den Link zur minimiertenVersion der aktuellen jQuery-Lib ein.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

Alternativ die lokale Lib:<script src="../jquery/jquery-1.11.0.min.js"></script>

Ziel ist eine horizontale Navigationsleistezu schaffen deren Farbgebung sich beein-flussen lässt.

Fügen Sie dazu im Körper des HTML-Doku-ments eine Div-Box mit der Liste und dendrei Listenpunkten ein.

<div id="box"><ul>

<li>Erster Menüpunkt</li><li>Zweiter Menüpunkt</li><li>Dritter Menüpunkt</li>

</ul></div>

Im Stylesheet styles.css können wir an-hand der id Formatangaben definieren.Zum Format gehören u.a. Angaben zurAusrichtung, Schrift und Farbe.

Im folgenden werden wir nun alle Format-angaben in einem Cascading Style sheetdefinieren. Dabei werden die in HTML-Aus-zeichnungen vor- oder selbstdefinierter Art(hier: div-“box“, ul, li) genutzt. Das Box-Modell wird sowie in CSS, als auch späterin JQuery die Basis für die Identifikationder Objekte im Dokument sein. Alle Inhalteim Body stecken in irgendeiner Box!


bodybox

ul li Erster Menüpunkt

li Zweiter Menüpunkt

li Dritter Menüpunkt

Seite 11

Nun zu den notwendigen Formatangaben.Erzeugen Sie dazu im css-Verzeichnis eineneue Datei >> styles.css

Betten Sie zu Beginn, wie üblich die Anga-ben für den Körper ein. Ändern Sie dazuden Zeichensatz. Definieren Sie dann an-schließend die verwendete Schrift-Familie,das Schrift-Gewicht, die relative Angabeder Schriftgröße und die relative Breite desDokuments.

@CHARSET "UTF-8";

body{font-family:Verdana, Arial, Helve-

tica,sans-serif;font-weight: normal;font-size:100,01%;width: 100%;

}


Seite 12

Erweitern Sie nun die Formatangaben fürdie Navigation. Die unsortierte Liste erhältdazu die Angabe keinen List-Style-Typ zuverwenden, die Listenpunkte werden imErgebnis ausgeblendet:

list-style-type:none;

Die Listenpunkte selbst sollen nebeneinan-der liegen, dazu definieren wir diese alsinline-Objekte:

display: inline;

Wir legen im gleichen Zug einen Außen-und Innenabstand fest der sicherstellt,dass die Titel der Listenpunkte nicht zu nahaneinander liegen:

margin: 0.4em; padding: 0.4em;

0.4em eine relative Angabe bezogen auf dieSchriftgröße des Elements.

Eine CSS-Klasse >> .green definiert dieSchrift- und Hintergrundfarbe neu.

Die Klasse dient im folgenden dazu, Inhaltemit einem bestimmten Wortlaut mit Hilfevon jQuery zu Manipulieren (zu ändern).

.green{color:#009933;background-color:#E2FFEC;

}

Mit dem Aufruf der Klasse soll sich die schriftfarbe

color:#009933;

Und die Hintergrundfarbe ändern.

background-color:#E2FFEC;

Ergänzen Sie nun im Kopfteil der HTML-Datei >> index.html, angrenzend an denLink zur jQuery-Lib, den folgenden Javas-cript Quellcode.


Seite 13

<script type="text/javascript">$(document).ready(function(){$("#box li:contains('Zweiter Menü-

punkt')").addClass('green');});

</script>

Sobald das Dokument fertig geladen wurde

$(document).ready(...);

Die Funktion ermittelt die im HTML-Doku-ment enthaltenen Div-Boxen mit der id„box“ und untersucht die Listenpunkte. Dieidentifizierten Objekten mit dem Wortlaut„Zweiter Menüpunkt“ wird daraufhin dieCSS-Klasse „green“ zugewiesen.

function(){$("#box li:contains('Zweiter Menü-

punkt')").addClass('green');}

vorher: View nachher: View


Seite 14

Quellcode: index.html

Quellcode: styles.css


Seite 15

3.3 Übung 2: DOM-Manipulation 2 (Methoden effizient auslagern)

Wir verwenden das zuvor erzeugte Ergeb-nis, um es zu erweitern. Kopieren Sie dazudas Verzeichnis >> 00_0manipulation undbenennen Sie es >> 00_1manipulation.

Erzeugen Sie im js-Verzeichnis eine Javas-cript Datei. Wählen Sie dazu imKontextmenü die Option >> New >> Other>> Javascript >> Javascript SourceFile

Nennen Sie die Datei >> my_jquery.js

Wir lagern künftig alle eigenen Javascript-Funktionen aus in eine extra Datei. Aufdiese Weise vermeiden wir Dopplungen vonQuellcode und können die Funktionen pro-blemlos wiederverwenden.

Ein weiterer Vorteil ist, dass wir bei Ände-rung einer Funktionalität einen zentralenOrt haben wo die Veränderung stattfindenmuss.

Lagern Sie den Javascript Quellcode ausder HTML Datei in die Javascript Datei aus.

Sobald das Dokument fertig geladen wurde

$(document).ready(...);

Erfolgt der Methodenaufruf

addGreen();

Die Funktion addGreen() enthält nichtsanderes, wie zuvor.


Seite 16

Ersetzen Sie dann den Javascript Quellcodeim Kopf der HTML Datei durch die Referenzauf die ausgelagerte Datei.

<script type="text/javascript" src="js/my_jquery.js"></script>

Testen Sie das Ergebnis. An der View solltesich in diesem Stadium noch nichts geän-dert haben.

Nun soll die Klasse „green“ erst dann zu-gewiesen werden, wenn eine derListenpunkte angeklickt wird.

Ergänzen Sie die Javascript-Datei >>my_jquery.js um die Funktion on-ClickGreen().

Die Methode weist nun auf Klick „click()“dem aktuellen Listenpunkt mit dem Selek-tor „#box li“ die CSS-Klasse „green“ zu.

Ersetzen Sie danach den Methodenaufruf

addGreen(); durch onClickGreen();

Erweitern Sie das Stylesheet um einenCurser-Pointer. Damit kann der Nutzer er-kennen, dass er auf die Listenpunkteklicken muss, um eine Veränderung her-vorzurufen.

Ergänzen Sie dazu die CSS-Anweisung fürdie Listenpunkte:

cursor: pointer;

Für den Fall, dass der Nutzer den Listen-punkt bereits angeklickt hat und die Klasse„green“ bereit zugewiesen wurde soll derCurser wieder auf „normal“ zurückgesetztwerden.


Seite 17

cursor:default;

Ohne Klick...

Auf Klick: View 1

Auf Klick: View 2

Auf Klick: View 3


Seite 18

Quellcode: index.html

Quellcode: styles.css


Seite 19

Quellcode: my_jquery.css


Seite 20

3.4 Übung 3: DOM-Manipulation 3 (Methoden überladen und verketten)

Wir verwenden das zuvor erzeugte Ergeb-nis, um es zu erweitern. Kopieren Sie dazudas Verzeichnis >> 00_1manipulation undbenennen Sie es >> 00_2manipulation.

Im obigen Beispiel haben wir den CSS-Selektor auf >>#box p<< statisch definiert.

Damit eine wiederverwendbare, flexiblereLösung entsteht, werden wir den CSS-Selektor gleichbedeutend in eine Objektva-riable packen und ihn als Parameterübergeben.

var mSelector = $("#box li");onClickGreen(mSelector);

Wir überladen dazu die bereits existierendeonClickGreen() Methode und deklariereneine parameterbehaftete Version.

function onClickGreen(pSelector){...

};


Seite 21

Die Methode soll gleichzeitig an Funktiona-lität gewinnen.

Dazu verketten wir mehrere Methodenauf-rufe nach folgenden Muster:

$(selektorausdruck) .methode1() .methode2() .methode3();

Die Erläuterung der einzelnen Aufrufe er-folgt im folgenden separat.

var pos = obj.index(this); Ermittelt den aktuellen Index (die Position)des angeklickten Listenpunktes und merktdiese Information in einem lokalen Attributpos vor.

obj.removeClass().parent().removeClass();

Da wir nicht wissen welche Aktionen derNutzer zuvor ausgeführt hat stellen wir denUrsprungszustand her. Wir entfernen dazudie Klasse „green“, traversieren zum El-ternknoten und entfernen auch dort alleCSS-Klassen (boxColor-0 bis 2).

$(this).addClass("green").parent().addClass("boxColor-" + pos);

Der angeklickte Listenpunkt erhält danndie Klasse „green“ zugewiesen. Dann tra-versieren wir zum Elternknoten und fügendie positionsabhängige Klasse hinzu.

Erweitern Sie das Stylesheet styles.css,um die benötigten Klassen boxColor-0 bis2.


Seite 22

Ohne Klick...

Auf Klick: View 1

Auf Klick: View 2

Auf Klick: View 3


Seite 23

4 Clientseitige Entwicklung einer Web-App mit JQuery

Clientseitige Entwicklungeiner Web-App mit JQuery


Seite 24

4.1 Beispiel 1: Navigation

View der Navigation: navi.html

Ein erster Entwurf der Benutzeroberfläche mit dem Textverarbeitungsprogramm:Einfaches Drop-Down-Menü


Aktuelles 2.0.0 Menüpunkt 3.0.0Home 1.0.0

2.0.1

2.0.2

2.0.3

Seite 25

Wir verwenden das Verzeichnis 01naviga-tion_aufg, um es zu erweitern.

<div class="page"> <img src="images/logo.png" class="schatten"/> </div>

Öffnen Sie die HTML-Datei navi.html

Ergänzen Sie den Quellcode für die Div-Boxpage.

Fügen Sie die Bildreferenz für die Logo-Datei logo.png ein.

Das Kunstwerk stammt aus dem Fundusder Gewerbliche, Kaufmännische, Landwirt-schaftliche Schule Wangen und wurde vonKlaus Merk abfotografiert.

Künstler: Hans-Georg Ziegler

Die in den Quellcodebeispielen eingebun-dene Grafik logo.png ist selbst erstellt.

.schatten{width:95%;height:auto;border:1px solid #fff;

Um die Grafik in der Box dynamisch anzu-passen und den Schatten einzufügenbenötigt das Stylesheet styles.css dieCSS-Klasse .schatten

Den Schatten erzeugt die Anweisung box-shadow dazu erfolgt die Angabe der horzi-ontalen und vertikalen Platzierung, demVersatz und der Farbe.

box-shadow: none|h-shadow v-shadow blurspread color |inset|initial|inherit;

Optionale Angaben Erklärung


Seite 26

/* Allgemein */box-shadow: 3px 2px 10px #999;

/* Mozilla Firefox */-moz-box-shadow: 3px 2px 10px #999;

/* Internet Explorer */ -ms-box-shadow: 3px 2px 10px #999;

/* Opera */-o-box-shadow: 3px 2px 10px #999;

/* Google Chrome */-webkit-box-shadow: 3px 2px 10px #999;

/* Allgemein */transform: rotate(1deg);

/* Mozilla Firefox */-moz-transform: rotate(1deg);

/* Internet Explorer */-ms-transform: rotate(1deg);

/* Opera */-o-transform: rotate(1deg);

/* Google Chrome */-webkit-transform:rotate(1deg);

}

blur unscharfe Distanzanga-be

spread die Größe des Schattens

inset erzeugt einen „innershadow“

initial setzt die default Werte

Die Präfixe für den Browser dienen demKompatibilitätsabgleich.Die Rotation erzeugt die Anweisungtransform: rotate(angle)

transform: rotate(1deg);

Ergänzen Sie den Quellcode für den Schat-ten in dem Stylesheet styles.css undtesten Sie das Ergebnis.

<div id="nav" >

</div>

Wir erweitern die HTML-Datei navi.html.Platzieren Sie im Anschluss an die Bildrefe-renz die Div-Box nav für die Navigation.

Fügen Sie darin die Listen für die Navigati-on ein.

Dazu werden unsortierte Listen geschach-telt. Die unteren Ebenen werden demHauptmenü untergeordnet.


Seite 27

Wir widmen uns der Listenformatierung imStylesheet styles.css.

Um das nebenstehende Ergebnis zu erzeu-gen folgen Sie den Erläuterungen dereinzelnen CSS-Anweisungen in den kom-menden Schritten.

Die leaf-Klassen dienen später dazu dieHintergrundfarbe der ul-Box zu manipulie-ren.

Für alle Listenelemente der unsortiertenListe innerhalb der div-box nav werden dieListenpunkte ausgeblendet.

list-style-type:none;

Die Breite der ul-Box orientiert sich an denInhalten automatisch.


Seite 28

width: auto;

Die Angabe der Zeilenhöhe erfolgt prozen-tual doppelt so hoch.

line-height: 200%;

Der Außenabstand wird für oben und untenauf 0 gesetzt, die restlichen (links undrechts) sollen sich automatisch anpassen.

margin: 0 auto;

Der Innenabstand wird für alle Seiten„genullt“.

padding:0;

Für jeden Listenpunkt wird eine Breite von150 Pixel fixiert.

width:150px;

Platziert man mehrere Listenelemente mitder gleichen Ausrichtung float: left er-folgt eine Aneinanderreihung auf derHorizontalen.

float:left;

Die Abstände (innen und außen) werden inKurzform definiert.

padding:0; margin:0.3em;

Mit der Anweisung display:block orien-tiert sich die Breite den Listenpunktfeldesnicht variabel am Inhalt, sondern an derBox selbst.

display:block;

Der Text innerhalb der li-Box soll zen-triert-mittig ausgerichtet sein und diestandardmäßige Unterstreichung von Hy-


Seite 29

perlinks soll unterlassen werden.

text-align:center; text-decoration:none;

Als Schriftfarbe legen wir schwarz fest.

color:#000;

Die Höhe wird einheitlich auf mindestens35 Pixel festgelegt.

height:35px;

Die Schriftgröße erfolgt relativ, abhängigvon der Angabe im Körper mit 80 Prozent.

font-size:0.8em;

Jeder Listenpunkt soll für sich einen Rah-men erhalten. 1 Pixel breit, durchgehendund in der Farbe Antrazit.

border:1px solid #CCC;

Der Mouseover-Effekt soll durch einenFarbwechsel der Schriftfabe offensichtlichwerden. Ein Hellblau wird festgelegt.

color:#18A2FA;

Alle Listenpunkte im Untermenü werden zuBeginn ausgeblendet und ansonsten am El-ternknoten ausgerichtet positioniert.Augenscheinlich erfolgt die Ausrichtungdann zentriert. Aufgeklappt werden die Un-termenüs erst bei einem Mouseover.

display:none;position:absolute;

Die Anweisung float: none erzeugt hierden Effekt, dass die Listenpunkte des Un-termenüs untereinander stattnebeneinander angezeigt werden.

float:none;


Seite 30

Die Hintergrundfarbe der Listenpunkte imUntermenü wird mit dem Zusatz wichtigdeklariert. Damit wird sichergestellt dassdie Farbgebung für die li-Box dominiert.Die Wichtigkeit wird hochgestuft!

background:#EBE7E6!important;

Die Angabe der Textausrichtung sorgt da-für, dass mehrzeilige Angaben nichtzentriert sondern linksbündig ausgerichtetwerden.

text-align:left;

Die Angabe der Höhe und Breite der li-Boxerfolgt jeweils automatisch.

height:auto; width:auto;

Die Zeilenhöhe wird relativ, abhängig vonder Angabe in der ul-Box halbiert.

line-height:1.0em;

Der Innenabstand wird für oben und untenmit 8 Pixel, für links und recht mit 20 Pixelabsolut festgelegt.

padding:8px 20px;

Damit die zuvor definierten Formatangabenfür die Untermenüs auch ersichtlich werdenmuss nun die interaktive Ansprache derListenelemente durch das Javascript imple-mentiert werden.

Dazu werden zwei Methoden in die Javas-cript-Datei my_jquery.js eingebettet.

Die Methode onClickColor() und die Me-thode onClickNavigate()


Seite 31

Fügen Sie für die Methode onClickColor()den fehlenden Quellcode an den dafür vor-gesehenen Stellen ein. Sie finden anentsprechender Stelle im Quellcode eineErklärung in Form eines Kommentars.

Fügen Sie für die Methode onClickNavi-gate() den fehlenden Quellcode an dendafür vorgesehenen Stellen ein. Sie findenan entsprechender Stelle im Quellcode eineErklärung in Form eines Kommentars.

Deklarieren Sie ein Attribut mSelector undinitialisiere es mit $("#nav a")

Rufen Sie danach die beiden deklariertenMethoden auf.

Ohne Klick und ohne Mousover


Seite 32

Mit Klick 1 und mit Mousover: View 1



Seite 33



Seite 34

4.2 Beispiel 2: Dynamische Auswertung Taschenrechner

Storyboard

Erster Taschenrechner-Entwurf der Benut-zeroberfläche mit dem Textverarbeitungsprogramm.


1Zahl 1:

Zahl 2:

++

Taschenrechner

Home | Taschenrechner | Währungsrechner

**

--

//

Ergebnis:

1

1

Ergebnis:

xx.xx

Seite 35

Wir verwenden das Verzeichnis02web_aufg, um es zu erweitern.

Wir widmen uns im Ersten Schritt dem Ta-schenrechnerformular. Öffnen Sie dazudie HTML-Datei taschenrechner.html

Ergänzen Sie im form-Container denHTML-Quellcode für die Texteingabefelderfür zahl1 und zahl2

<div class ="container"> <label for="zahl1">Zahl 1:</label> <input type="text" name="zahl1" id="zahl1"value="" /></div>

<div class ="container"> <label for="zahl2">Zahl 2:</label> <input type="text" name="zahl2" id="zahl2"value="" /></div>

Ergänzen Sie im form-Container denHTML-Quellcode für das Ergebnisfeld. Dain diesem Feld ausschließlich Ausgabenerfolgen soll deklarieren wir das Feld alsschreibgeschützt. Wir nutzen dazu dasKomponenten-Flag

readonly="readonly"

Quellcode für das Ergebnisfeld:

<div class ="container"> <label for="ergebnis">Ergebnis:</label> <input type="text" name="ergebnis" id="ergebnis" class ="readonly" value="" rea-donly="readonly"/></div>


Seite 36

Ergänzen Sie im form-Container denHTML-Quellcode für die Schaltflächen derRechnoperationen.

<div class ="container"> <button type="button" id="addition"> + </button> <button type="button" id="subtraktion"> - </button> <button type="button" id="multiplikation"> * </button> <button type="button" id="division"> / </button></div>

Wir widmen uns nun den noch zu ergän-zenden Formatangaben in der Stylesheet-Datei styles.css.

Für den body-Container definieren wir diegängigen Formatangaben für Webdoku-mente.

Zur Abwechslung nutzen wir die GoogleSchrift „Leckerli One“ in der kursiven Va-riante mit einem normalen Schrift-Gewicht. Im Kopfteil des HTML-Doku-ments wurde dazu bereits auf dieGoogleapi-Schriftquelle verwiesen.

font-family: 'Leckerli One', cursive;font-weight: normal;

Die Textfarbe ist mit einem dunklen Blau-ton an das Hintergrundbild „bluestripes“ angepasst. Der Text bekommteinen leicht horizontal und vertikal ver-schobenen Schatten in Antrazit.

color:#173b84;text-shadow: 1px 1px 0px #999;Background-image:url(../images/blu_stripes.png);

Beispielgebend war ein Hintergrundbild


Seite 37

aus dem online Repertoire der Subtle Pat-terns [SUB00].

Die in den Quellcodebeispielen eingebun-dene Grafik blu_stripes.png ist selbsterstellt.

Definieren Sie im nächsten Schritt dieFormatangaben für den Page-Container.Fügen Sie dazu erst die CSS-Anweisungenfür die .page-Klasse ein.

Wir definieren einen 6 Pixel breiten wei-ßen, durchgehenden Rahmen

border:6px solid #fff;

Wie zuvor in der .schatten-Klasse defi-nieren wir die .page-Klasse einenSchatten und die Rotation für den ganzenPage-Container.

/* Allgemein */box-shadow: 3px 2px 10px #999;/* Mozilla Firefox */-moz-box-shadow: 3px 2px 10px #999;/* Google Chrome */ -webkit-box-shadow: 3px 2px 10px #999; /* Internet Explorer */ -ms-box-shadow: 3px 2px 10px #999; /* Opera */-o-box-shadow: 3px 2px 10px #999; /* Allgemein */transform: rotate(1deg);/* Mozilla Firefox */-moz-transform: rotate(1deg);/* Internet Explorer */-ms-transform: rotate(1deg);/* Opera */-o-transform: rotate(1deg);/* Google Chrome */-webkit-transform:rotate(1deg);

Die Formatierung des iFrames ist zwin-gend erforderlich, um das bishernoch sichtbare iFrame-Fenster auszublen-den.

overflow: hidden;

Wird definiert für den Fall, dass der In-


Seite 38

halt über den Rand laufen würde. Mit demWert hidden der übergroße Inhalt abge-schnitten und nicht angezeigt.

Das Attribut gibt an, dass der iframeohne sichtbaren Rahmen in die Seite ein-gebettet werden soll. Das funktioniert aufdiese Weise auch beim IE.

Definieren Sie im navbar-Container desHTML-Dokuments footer.html die Listen-punkte mit den Verweisen der Fußzeile ein.

<ul> <li><a href="index.html">Home</a></li> <li><a href="taschenrechner.html">Taschenrechner</a></li> <li><a href="waehrungsrechner.html">Währungsrech-ner</a></li></ul>

Auch die Fußzeile >> footer.html ist Be-standteil des Page-Conatiners. Sie ist alsiFrame in die restlichen HTML-Dokumenteeingebunden und enthält eine Liste mitVerweisen. Für die im Page-Container ent-haltene Listenpunkte .page li definierenwir zusätzlich die bereits in den vorherge-henden Beispielen besprochenenFormatangaben.

list-style-type:none;color:#173b84;font-size:1.2em;line-height:1em;text-align:left;

Für den footer-Container wird die Hinter-grundfarbe gelb definiert.

background-color:yellow;

Da die Listenpunkte im Footer footer liauf der Horizontalen ausgerichtet werdensollen, müssen wir einige zuvor gemachteAngaben erweitern bzw. sogar überschrei-ben.

display: inline;list-style-type:none;padding:0.1em;font-size:0.8em;line-height:1em;text-align:left;


Seite 39

vorher

nachher

Nun zu den Feinheiten. Der Innenabstandvon oben und von links wird reguliert.

vorher

nachher

Die Regulierung der Schriftgröße fürÜberschriften vom Typ h1 im Header.

vorher

nachher

Der Innenabstand von oben und von linkswird auch für den content, das form undden container reguliert.


Seite 40

vorher

nachher

Bisher haben wir uns rein um das Layoutgekümmert. Nun wollen wir uns der For-mularauswertung widmen.

Anhand der im Formular festgelegten idsfür die Schaltflächen können wir dieclick-Events identifizieren und Aktionenauslösen. Wir übernehmen dazu die idsin die lokalen Attribute mAddieren,mSubtrahieren, mMultiplizieren undmDividieren.

Übernehmen Sie die Anweisungen, an derdafür ausgewiesenen Stelle, in der Javas-cript-Datei my_jquery.js.

var mAddieren = $("#addition");var mSubtrahieren = $("#subtraktion");var mMultiplizieren = $("#multiplikation");var mDividieren = $("#division");

Im Anschluss daran deklarieren und initia-lisieren wir Attribute für die Eingabewerte.

Für alle Textfelder wurden dazu im For-mular ids festgelegt. Damit imvorliegenden Fall die Eingaben zahl1 undzahl2 des Benutzers gelesen und verar-beitet werden können, übernehmen wirdie ids in die lokalen Attribute mZahl1und mZahl2.


Seite 41

var mZahl1 = $("#zahl1");var mZahl2 = $("#zahl2");

Für die Operation Addieren deklarierenwir eine Methode:

function onClickAddieren(pOperation, pZahl1,pZahl2){

};

Die Operation und Eingabewerte werdenals Parameter übergeben.

In der Methode selbst passiert folgendes:

Wir merken uns die Operation in einemlokalen Attribut operation vor. Außerdemdeklarieren wir ein Attribut für das ergeb-nis und initialisieren es mit demStandardwert 0.

var operation = pOperation;var ergebnis = 0;

Für den Fall, dass der Benutzer einenWert für zahl1 und zahl2 eingibt und aufdie Schaltfläche addieren klickt sollen die-se Werte übernommen werden.

Es folgt die click()-Methode. Diese wirdam Objekt der operation aufgerufen undübernimmt dabei die Funktion eines Liste-ners. Das funktioniert wie ein Fühler, deran der Oberfläche lauscht und registriertwenn die Schaltfläche angeklickt wird.

operation.click(function(){

});

Innerhalb dieser Funktion werden alsnächstes die Attribute für die Eingabewer-te deklariert und initialisiert.

Damit wir mit den eingegebenen WertenBerechnungen durchführen können, müs-sen sie analysiert (geparst) undgewandelt werden.


Seite 42

var zahl1 = parseFloat(pZahl1.val());var zahl2 = parseFloat(pZahl2.val());

JA-Fall (IF)

Es folgt gleich im Anschluss eine Kontrolleob die Werte auch nummerischer Natursind.

Wir nutzen dazu den Methodenaufruf derboolschen jQuery-Methode jQuery.is-Numeric(wert). Sie liefert uns denRückgabewert true für nummerischeWerte und false für nicht nummerischeWerte. Beide Fälle werden mit der Kon-trollstruktur if()-else{} abgefangenund behandelt.

if(jQuery.isNumeric(zahl1) && jQuery.isNume-ric(zahl2)){ //JA-Fall

}else{ //NEIN-Fall

}

Im JA-Fall (IF):Wird das Ergebnis berechnet.ergebnis = zahl1 + zahl2;

Die zahl1, zahl2 und das ergebnis wer-den in einem Dialogfenster (alert)angezeigt. Mit dem Ausdruck „\n“ werdenZeilensprünge erzeugt. Die Verkettungvon Strings (Zeichenketten) und Attri-butwerten erfolgt durch den „+“ Operator.

alert("Zahl 1: " +zahl1+ "\n" + "Zahl 2: "+zahl2+ "\n" + "Summe: " +ergebnis );

Mit einem Klick auf ok im Dialogfenstererfolgt dann abschließend die Ausgabedes ergebnis im Textfeld mit der id er-gebnis.

$("#ergebnis").val(ergebnis);


Seite 43

NEIN-Fall (ELSE)

Zur Kontrolle

Im NEIN-Fall (ELSE):Erfolgt lediglich die Ausgabe der Meldung"Eine Berechnung kann nur mit nummeri-schen Werten durchgeführt werden!" imDialogfenster.

alert("Eine Berechnung kann nur mit nummeri-schen Werten durchgeführt werden!");

Um die implementierte Methode testen zukönnen muss der Methodenaufruf erfol-gen.

Ergänzen Sie die ready()-Methode umden Methodenaufruf:

onClickAddieren(mAddieren,mZahl1,mZahl2);

Testen Sie die Anwendung.

Aufgabe:Erweitern Sie die Javascript-Dateimy_jquery.js.

Implementieren Sie mit ihren erworbenenKenntnissen den fehlenden Quellcode fürdie übrigen Rechenoperationen subtra-hieren, multiplizieren und dividieren.

Zusatzaufgabe:Stellen Sie sicher, dass der Benutzer beieiner Division durch null von seinem Tununterrichtet wird. Melden Sie in diesemFall: „Eine Division durch 0 ist nichtmöglich!“


Seite 44

4.3 Beispiel 3: Dynamische Auswertung Währungsrechner

Storyboard

Erster Währungsrechner-Entwurf der Be-nutzeroberfläche mit dem Textverarbeitungsprogramm. Ein einfache-res Beispiel bietet die Literatur [WEN00]

Im ersten Schritt ergänzen wir das Formu-lar für den Währungsrechner. Öffnen Siedazu das im Projekt bereits enthalteneHTML-Dokument waehrungsrechner.htmlmit dem HTML-Editor.

Wir möchten mit den folgenden Schrittendas nebenstehende Ergebnis erzeugen.


1Betrag:

1Ergebnis:


Währungsrechner

UmrechnenUmrechnen

Von:

In:

Ergebnis:

xx.xx

Währung wählen...

>

Währung wählen...

>

Seite 45

Das Dokument ist gleich aufgebaut, wiedas HTML-Dokument für den Taschenrech-ner. Es fehlen die Formular-Komponenten.

Erzeugen Sie, wie bereits im Taschenrech-nerformular praktiziert einen Containerder Klasse .container und implementie-ren Sie darin das Label und dasTexteingabefeld für den Betrag.

Außer den bereits bekannten Labels, Text-felder und Schaltflächen nutzen wir für dieAuswahl der Ausgangs- und Zielwährungdie allgemein üblichen Drop-Down-Menüs.

Der absolute Vorteil dieser Komponente ist,dass der Benutzer quasi keine Fehler beider Eingabe machen kann.

In HTML wir das Drop-Down-Menü durcheinen Select-Container realisiert. DieserContainer enthält die Auswahlfelder soge-nannte options. Der Select-Containerbekommt für die Ausgangswährung idwaehrung1. Die optionen erhalten ein Wertvalue 1 bis 4.

Fügen Sie im Anschluss an den Betrag denContainer container für die Ausgangswäh-rung (Von) ein. Kopieren und verwendenSie den Quellcode dann für die Zielwäh-rung (In). Benennen Sie den Select-Container für die Zielwährung mit der idwaehrung2, die Auswahlfelder optionenbleiben die selben.

Fügen Sie den Quellcode für das Ergebnis-feld mit der id ergebnis ein. Wie zuvor imTaschenrechnerformular sollen hier nurAusgaben erfolgen. Implementieren Siedeshalb das Komponentenflag „readonly“und nutzen Sie die bereits existierendeCSS-Klasse .readonly, um die Hinter-grundfarbe in Grau farblich abzusetzen.

class ="readonly" value="" readonly="readonly"


Seite 46

Legen Sie für die Größe des Textfeldes 30Zeichen fest.

size="30"

Definieren Sie die Schaltfläche für die Ope-ration umrechnen.

Da der Währungsrechner auf das gleiche Stylesheet styles.css zurückgreift, wie un-sere Taschenrechner-Anwendung werden wir die CSS-Klassen und -Boxen einfachwiederverwenden.

Wir können uns also gleich der Erweiterung der eigentlichen Funktionalität widmen.

Öffnen Sie dazu die Javascript-Datei my_jquery.js.

Zum Verständnis Ein Beispiel. Alle Wechselkurse beziehensich auf eine Einheit der Ausgangswäh-rung.

Die Angaben

US Dollar (USD) = 1.37Britische Pfund (GBP) = 0.82Japanischer Yen (JPY) = 140.71

bedeuten, dass 1 Euro 1.37706 USD bzw.140,71 JPY usw. entspricht.

Wir lassen bei unserer Betrachtung ersteinmal außer acht, dass für den Ankaufund Verkauf von Devisen unterschiedlicheWechselkurse existieren. Allerdings solltees natürlich möglich sein die Anwendungnachträglich zu erweitern. [OAN00]


Seite 47

Der Benutzer hat vier Angaben zu tätigen

1. den Betrag betrag

2. die Ausgangswährung waehrung1

3. die Zielwährung waehrung2

4. die Operation umrechnen

Alle Angaben macht er auf der Benutzero-berfläche, sodass wir in der Lage sind dieInformationen auszulesen und zu verarbei-ten.

Wir erweitern nun das Skript nach demgleichen Schema wie das zuvor beim Ta-schenrechner der Fall war. Da wir vier stattdrei Eingabewerte haben wird die MethodeonClickUmrechnen() mit vier Parameternausgestattet (siehe 1 – 4).

Nun zur Implementation der Methodeselbst. Es gibt unzählige Möglichkeiteneinen Währungsrechner zu programmieren.

Im Rahmen dieses Skriptes werden wir unsauf eine Lösungsmöglichkeit beschränken.function onClickUmrechnen(pOperation, pBetrag, pWaehrung1, pWaehrung2){

};

Wir deklarieren darin Attribute die wir imRahmen der Verarbeitung benötigen wer-den.var operation = pOperation;var zielwaehrung = 0;

Das Attribut meldung erhält später Meldun-gen die im Dialogfenster für den Benutzer erscheinen sollen.

var meldung = null;

Das Attribut wk_index erhält im Rahmender Auswertung den „Index im Daten-Container“ für den Wechselkurs, der ab-hängig von der ausgewählten Kombinationan Währungen (Ausgangswährung und


pBetrag

pWaehrung1

pWaehrung2

pOperation

Seite 48

Zielwährung) festgelegt wurde.

var wk_index = 0;

wechselkurs

waehrung

Wir nutzen zwei nummerierte Listen alsDaten-Container (Arrays):

1. den Wechselkurs-Container wechsel-kurs

var wechselkurs = new Array();

2. den Währungs-Container waehrung

var waehrung = new Array();

Der Wechselkurs-Container wird mit denWechselkursen initialisiert die abhängigvon der Kombination aus Ausgangs- undZielwährung ermittelt werden können.

Zur Aktualisierung können Sie den Tages-aktuellen Kursrechner von Oanda

http://www.oanda.com/currency/converter/ [OAN00]

nutzen.

Der Währungs-Container enthält die Detail-bezeichnungen für die verwendeten Wäh-rungen. Der Index stimmt mit den Wertenvalues aus dem Select-Container, des imFormular der HTML-Datei waehrungsrech-ner.html eingebetteten Drop-Down-Menüs, überein.

Werte lesen: Die Klick-Methode enthält nun alle restli-chen Anweisungen

1. Werte lesenBetrag, Ausgangswährung, Zielwährung

2. Werte verarbeitenPrüfung, Berechnung

3. Werte ausgebenDialogfenster, Ergebnisfeld

Das klassische Prinzip der Informatik:Eingabe, Verarbeitung und Ausgabe (kurz


1.00 0.82 1.37 140.71 ...

0 1 2 3 ...

'keine' 'EUR' 'GBP' 'USD' 'YEN'

0 1 2 3 4

http://www.oanda.com/currency/converter/

http://www.oanda.com/currency/converter/

Seite 49

EVA-Prinzip). Ausgelöst wird der Vorgangdurch den Klick auf die Schaltfläche um-rechnen.

operation.click(function(){

});

Innerhalb der Methode werden anfangs dieWerte gelesen. Besonderheit hier ist derMethodenaufruf der jQuery-Methode re-place('alt','neu').

Sie stellt hier sicher, dass der Nutzer einenDezimalwert als Betrag eingeben kann,ohne dass fehlerhafte Werte übernommenwerden. Die Methode ersetzt das Kommaggf. durch einen Punkt, bevor der Wert ge-parst (analysiert & gewandelt) wird.var ausgangswaehrung = parseFloat(pBe-trag.val().replace(',','.'));

Lesen der Währungsnummern valuesvar waehrung1 = parseFloat(pWaehrung1.val());var waehrung2 = parseFloat(pWaehrung2.val());

Werte verarbeiten: Prüfung Wir nutzen die Kontrollstruktur if(){}elseif(){} um die insgesamt 16 möglichenKombinationen zu prüfen und um den In-dex für den Wechselkurs festzulegen. Derist relevant für die darauf folgende Berech-nung.

Übernehmen Sie den Quellcode und ergän-zen Sie selbstständig die fehlenden Fälle.

Werte verarbeiten: Berechnung Zur Erläuterung. Wir nutzen die Umrech-nungsformel

zielwährung = ausgangswaehrung * wechselkurs

Um kaufmännisch, auf 2 Dezimalstellen zuRunden erweitert man den Term und nutzteinen Methodenaufruf der jQuery-MethodeMath.round(wert).


Seite 50

Die Methode rundet allerdings kaufmän-nisch auf Ganze Zahlen.

Ein kleiner Trick und wir können die Metho-de zum kaufmännischen Runden auf zweiDezimalstellen trimmen [WEB01]:

Math.round((ausgangswaehrung * wechselkurs) * 100) / 100

Der Wechselkurs muss abhängig vom er-mittelten wk_index dem Daten-Containerwechselkurs entnommen werden.

wechselkurs[wk_index]

Dem berechneten Wert für die zielwäh-rung wird die Detailbezeichnungangehängt. Dazu wird die Detailbezeich-nung abhängig von dem Wert value für diewaehrung2 aus dem Daten-Containerwaehrung ermittelt.

waehrung[waehrung2]

Dem Betrag (ausgangswährung) wird fürdie Ausgabe ebenfalls die Detailbezeich-nung angehängt.

waehrung[waehrung1]

Abschließen wird das Attribut meldung mitden Detailbezeichnungen erzeugt.

meldung = waehrung[waehrung1] + " - " + waeh-rung[waehrung2];

Werte ausgeben: Die Ausgabe im Dialogfenster:alert(meldung + "\n\n" + "Wechselkurs: " + wechselkurs[wk_index] + "\n" + "Ausgangswährung: " +ausgangswaehrung + "\n" + "Zielwährung: " +zielwaehrung);


Seite 51

Die Ausgabe in der im Ergebnisfeld:$("#zielwaehrung").val(zielwaehrung);

Testen Sie auch die Grenzfälle.

Eingabe einer Dezimalzahl:

Zusatzaufgabe:Erweitern Sie die Rechnung um die Kon-trolle des eingegebenen Betrages. DieKontrolle soll sicherstellen, dass der Wertauch nummerischer Natur ist (siehe Ta-schenrechner-Beispiel)

Im JA-Fall (IF):Erfolgt die Prüfung, Berechnung und Aus-gabe des Ergebnisses.


Seite 52

Im NEIN-Fall (ELSE):Erfolgt lediglich die Ausgabe der Meldung"Eine Berechnung kann nur mit einemnummerischen Wert durchgeführt werden!"im Dialogfenster.


Seite 53

5 Erweiterung zur Mobile-Web-App mit JQuery-Mobile

Erweiterung zur Mobile-Web-App mit JQuery-Mobile


Seite 54

5.1 Am Beispiel des Taschenrechners

Storyboard

Ausgehend vom letzten Zwischenergebnisfür den Taschenrechner, sind bei mobilenAnwendungen vor allen Dingen stilistischeFaktoren von Bedeutung. Die Business-Logik (jQuery-Quellcode) bleibt vielfachunangetastet.

Dinge die zur Anpassung gehören können:1. Mobile-APIs einbinden2. Typografie und Bilder anpassen3. Kopf- und Fußzeilen anpassen4. Navigationsleisten anpassen5. ggf. Browser-Optimierung

Wir verwenden das Verzeichnis 03web_aufg, um es zu erweitern.

Wir müssen als aller erstes die Bibliotheken(.js und .css-Datei) von JQuery undJQuery-Mobile einbinden.

Dazu werden in der Kopfzeile des HTML-Dokuments die entsprechende Referenzeneingefügt.

Im Hinblick darauf, dass die Mobile Appauch ohne Verknüpfung mit dem Internetdarstellbar und funktionstüchtig sein soll,binden wir in diesem Schritt alle Bibliothe-ken offline ein. Achten Sie dabei auf dieReihenfolge!

Kontrollieren Sie ob sich das jQuery-Styles-heet in das CSS-Verzeichnis befindet undfügen Sie den Verweis im Head des HTML-Dokuments taschenrechner.html ein.

<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css" />

Dann kontrollieren Sie ob sich die JQuery-Javascript-Datei im js-Verzeichnis befindet


1Zahl 1:

Zahl 2:

++

Taschenrechner


**

--

//

Ergebnis:

1

1

Ergebnis:

xx.xx

Seite 55

und ob im des HTML-Dokuments taschen-rechner.html den Verweis darauf ein.

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

Kontrollieren Sie dann ob sich die JQuery-Mobile-Javascript-Datei im js-Verzeichnisbefindet und fügen Sie in den Head desHTML-Dokuments taschenrechner.htmlden Verweis ein.

<script type="text/javascript" src="js/jquery.-mobile-1.4.2.min.js"></script>

Der Verweis auf die Javascript-Datei Pho-neGap.js wird erst im kommenden Kapitelrelevant, nämlich dann wenn wir denWebservice PhoneGap-Build nutzen um ausunserer web App eine native App zu erzeu-gen. Fügen Sie den Verweis im Hinblickdarauf ein.

<script type="text/javascript" src="Phone-Gap.js" charset="utf-8"></script>

Fügen Sie danach den Verweis auf unsereigenes Stylesheet styles.css ein.

<link rel="stylesheet" href="css/styles.css"type="text/css" />

Abschließend folgt noch der übliche Ver-weis auf unsere Javascript-Dateimy_jquery.js.

<script type="text/javascript"src="js/my_jquery.js"></script>

Das Cache-Manifest werden wir erst imkommenden Kapitel ansprechen.

Wir widmen uns nun im kommendenSchritt der für die Formatierung notwendi-gen Anpassungen im HTML-Dokumenttaschenrechner.html und im Stylesheetstyles.css.

Ersetzen Sie...<div class="page" id="p2" >

Wir beginnen mit dem Page-Container im


Seite 56

durch...<div data-role="page" id="p3">

HTML-Dokument taschenrechner.htmldata-role:Generell werden in jQuery-Mobile-Frame-work alle Definitionen und Inhaltstypenüber das data-role Attribut festgelegt.Dazu wird das Attribut im div-Containerdefiniert. Für alle Inhaltstypen existiert je-weils ein Wert. [FRA00]

• page (Seiten-Box)• header (Kopfzeilen-Box)• content (Inhalts-Box)• footer (Fußzeilen-Box)• fieldcontain (Komponenten-Box)• button (Schaltflächen-Box)• ...

Einige dieser Inhaltstypen werden wir fürunsere App nutzen.

Ändern Sie die Angaben im Page-Containerab, wie nebenstehend angezeigt. Wir er-gängzen dazu im folgenden die nochfehlenden data-role-Attribute an den ent-sprechenden Stellen.

Ersetzen Sie...<div class="header">

durch...<div data-role="header" class="header" data-tap-toggle="false" data-theme="b">

data-role:Wir nutzen das data-role-Attribut mit demWert header.

data-tap-toggle:Mit dem Wert „false“ wird erreicht, dass dieKopf- und Fußzeile bei einer Berührungoder auf Klick nicht ausgeblendet wird.[FRA00]

data-theme:Mit dem Wert „b“ nutzen wir eines der vomjQuery-Mobile-Framework zur Verfügunggestellten Themes (Layouts). Eine dunkleVariante mit blauen Highlight-Effekten.[JQU01]

Ändern Sie die Angaben im Header-Contai-ner ab, wie nebenstehend angezeigt.

Ersetzen Sie... data-role:


Seite 57

<a href="index.html" id="home" target="_pa-rent">Dieser Text wird nicht angezeigt</a>

durch...<a href="index.html" id="home" data-role="button" data-icon="home" data-icon-pos="notext" data-transition="fade" data-theme="b" target="_parent">Dieser Text wirdnicht angezeigt</a>

Wir nutzen das data-role-Attribut mit demWert button.

data-icon:Im jQuery-Mobile-Framework existiereneine Reihe von selbsterklärenden, vordefi-nierten Schaltflächen die wir im folgendennutzen werden. Das data-icon home er-zeugt ein kleines Haus-icon das in derRegel auf die Startseite einer Anwendungverweist.[JQU00]

Data-iconpos:Mit dem Wert “notext“ versteckt das Plu-gIn (die JQuery-Mobile-Erweiterung) denText. Andere mögliche Werte sind u.a.“right“, “left“, “top“, “bottom“.

data-transition:Das jQuery-Mobile-Framework beinhaltetein CSS-basierte Auswahl an Übergangsef-fekten. Diese können wahlweise inVerweise und Formularkomponenten ange-wendet werden. Fade ist der Standardwert(default-Wert). Die Effekte können wir aufden Seiten der W3Schoolshttp://www.w3schools.com/jquerymobile/jquerymobile_transitions.asp [W3S01]

target:Das HTML-Tag kennen Sie bereits. In Ver-weisen werden mit entsprechenden Wertendas Ziel sichergestellt. Der Wert „_parent“öffnet den Inhalt des Verweises im aktuel-len Fenster.

Ändern Sie den in der header-Box enthal-tenen Home-Verweis ab, wie nebenstehendangezeigt.

Ersetzen Sie...<a href="waehrungsrechner.html" id="forward"target="_parent">Dieser Text wird nicht ange-zeigt</a>

durch...<a href="waehrungsrechner.html" id="forward"data-role="button" data-icon="arrow-r" data-

Der einzige unterschied ist die data-icon-Angabe. Wir verwenden den Pfeil nachrechts.

Data-icon:Eine weitere vordefinierte Schaltfläche ist


http://www.w3schools.com/jquerymobile/jquerymobile_transitions.asp

http://www.w3schools.com/jquerymobile/jquerymobile_transitions.asp

Seite 58

iconpos="notext" data-transition="fade" tar-get="_parent">Dieser Text wird nichtangezeigt</a>

der Pfeil nach rechts, das data-icon ar-row-r

data-iconpos:Erhält den Wert notext!

data-transition:Erhält den Wert fade!

Ändern Sie den in der header-Box enthal-tenen Verweis auf diewaehrungsrechner.html ab, wie nebenste-hend angezeigt.

[data-role=page]{font-family:Verdana, Arial, Helve-

tica,sans-serif;font-weight: normal;font-size:100,01%;background-image:

url("../images/blu_stripes.png");}

[data-role=header] {padding-top:0.5em;padding-left:0.5em;

}

[data-role=header] h1{text-shadow: 0.5px 0.5px 0px rgba(255,

255, 255, .7);font-size:1.2em;

}

Ergänzen Sie die fehlenden Angaben fürdas data-role-Attribut:

1. page2. header

in der Stylesheet-Datei styles.css.

RGBA-Farbwert, der eine gewisse Transpa-renz zuweisen kann. Man registriert denUnterschied mit bloßem Auge nur, wennman das tag abwechselnd:

entfernt – testet – einfügt – testet

Ohne jQuery-Mobile-FrameworkMit jQuery-Mobile-Framework


Seite 59

Allgemeiner Hinweis zum data-role-Attribute und Aptana

HTML Validation warnings for the data-role attribute

„This had bugged me for months. ... What did work for me was turning off HTML Tidy Validator in Aptana 3.2.2.“

Forumseintrag, Mirko, 24.03.2013 http://stackoverflow.com/questions/7847596/aptana-studio-3-warnings-when-using-data-role-tags-of-html-5

Lösung:Preferences >> Aptana Studio >> Validation >> HTML

Beide Optionen deaktivieren HTML Tidy Validator build und reconciliation.

Ersetzen Sie...<div class ="content" id="taschenrecher-inhalt">

durch...<div data-role ="content" class ="content" id="taschenrecher-inhalt">

Fahren Sie mit der Implementierung derdata-role-Attribute fort.

Ersetzen Sie...<div class="container">

durch...<div data-role="fieldcontain" class ="contai-ner">

Alle Komponenten die zusammengehören,wie beispielsweise das Label zum zugehöri-gen Textfeld werden in fieldcontain-Boxen gepackt.

Ändern Sie alle div-Boxen der Klasse„container“ ab, wie nebenstehend ange-zeigt.

data-role="button"

data-transition="fade"

data-theme="b"

Fügen Sie für alle Schaltflächen (buttons)die nebenstehenden Attribute und Werteein.

[data-role=content]{width: 95%;

}

[data-role=fieldcontain]{margin-top: 0.5em;padding: 0em 0.5em;

}

Ergänzen Sie die fehlenden Angaben fürdas data-role-Attribut:

1. content2. fieldcontain

in der Stylesheet-Datei styles.css.


http://stackoverflow.com/questions/7847596/aptana-studio-3-warnings-when-using-data-role-tags-of-html-5

http://stackoverflow.com/questions/7847596/aptana-studio-3-warnings-when-using-data-role-tags-of-html-5

Seite 60

Eine notwendige Erweiterung der Javas-cript-Datei, fällt erst auf wenn wir dieAnwendung mit dem Firefox-Browser tes-ten.

Die Tatsache, dass bei Aufrufen der einzel-nen Seiten über die Header-, Footer- oderdas Menü auf der Startseite, der iFrameerst beim reload() korrekt angezeigt wird,ist auf einen Bug des Browsers zurückzu-führen.

Wir werden diesen Bug mit Hilfe von jQue-ry eliminieren.

Öffnen Sie dazu die Javascript-Dateimy_jquery.js.

Ergänzen Sie den Quellcode an den ge-kennzeichneten Stellen.

Den Schaltflächen haben wir vorsorglich jabereits eine eindeutige id gegeben. An-hand dieser id werden wir nun die denKlick durch den Benutzer erkennen und daserneute laden der iFrame-Datei forcieren.

Ergänzen Sie danach die Funktion für dasautomatische Laden des iFrames (in unse-rem Fall die Seite footer.html als Inhaltdes iFrames.

Wenn künftig eine der Navigationsflächenangeklickt wird, erfolgt mit dem Seiten-aufruf, das erneute laden des iFrames.Damit wird sichergestellt, dass die Fußzeileim korrekten Layout bereitgestellt wird.


Seite 61

5.2 Am Beispiel des Währungsrechners

Storyboard

Aufgabe:

Orientieren Sie sich an den bereits imple-mentierten Erweiterungen im HTML-Quell-code für den Taschenrechner und ergänzenSie den Quellcode für den Währungsrech-ner selbstständig.

Testen und korrigieren Sie gegebenenfallsdie Anwendung ausgiebig (alle Funktionen,alle Browser).


1Betrag:

1Ergebnis:


Währungsrechner

UmrechnenUmrechnen

Von:

In:

Ergebnis:

xx.xx

Währung wählen...

>

Währung wählen...

>

Seite 62

6 Ausblick

Ausblick


Seite 63

6.1 Anwendungsbeispiel: Android App mit PhoneGap

6.1.1 Unsere WebApp wird zu einer nativen Android App

Erzeugen Sie ein Android-Projekt.

Wir benötigen diese nur dazu, um die fürAndroid-Apps notwendige Projektstrukturzu verwenden.

Sie können dazu den App-Name MyAppverwenden und dem Assistenten einfachfolgen.

Belssen Sie die Angaben und klicken Sie 2-malig >> NEXT Bei der Konfiguration desApp-Icons können Sie die bereitgestellteGrafik ic_launcher_hdpi.png verwenden.

Schließen Sie den Vorgang mit ab:NEXT >> NEXT >> Finish


Seite 64

Erzeugen Sie im assets-Verzeichnis einwww-Verzeichnis und kopieren Sie das Er-gebnis aus Kapitel 4 in dieses Verzeichnis.

Grafikverzeichnisse. Hier werden dieGrafiken in unterschiedlicher Qualität zurVerfügung gestellt.

Ein Überblick zu den Auflösungen findenSie hier:

http://developer.android.com/design/style/iconography.html

[DEV00]




Seite 65

Cache-Manifest erstellen. Damit wird beieiner Offline-App sichergestellt welche Da-teien gespeichert werden sollen.

Die Datei config.xml enthält wichtigeMeta-Daten der Anwendung. Ergänzen Sieden Titel (name), das App-Icon, die Kurz-beschreibung und die Angaben zumUrheber.


Seite 66

6.1.2 Mit PhoneGap-Build-Webservice eine .apk-Datei erzeugen

Das MyApp Verzeichnis muss dazu gezippt werden.

https://build.phonegap.com/apps

sign in with github...

Sie benötigen ein Profil bei Github oder al-ternativ bei Adobe PhoneGap.

Mit dem angelegten Benutzernamen und Passwort können Sie sich dann einloggen.

Die zip-Datei können Sie mit einem klickauf die Schaltfläche APPS >> New app >>private.

Nutzen Sie die Schaltfläche Upload azip.-file >> Browse um die zip-Dateivon Ihrem Rechner auszuwählen.

zip-Datei auswählen und öffnen.



Seite 67


Seite 68

6.1.3 Die Anwendung auf dem virtuellen Android-Gerät (AVD) installieren


Der PhoneGap Webservice

Android Version mit einem Klick auf dieSchaltfläche „apk“ herunterladen.

Die Datei muss im Verzeichnis ihrer EclipseInstallation in das android-sdk-Verzeichnisgespeichert werden.

eclipse >> android-sdk >> plattform-tools

Wechseln Sie um fortzufahren wieder in dieEntwicklungsumgebung Eclipse.



Seite 69

Der AVD-Manager (Android Virtual DeviceManager) muss für eine Installation aufdem virtuellen Gerät gestartet sein.

Klicken Sie auf den AVD-Manager, um Einvirtuelles Gerät zu konfigurieren und mitOK zu bestätigen.

AVD starten >> Klick auf Start... >>launch

Den Installationsprozess veranlassen wir über die Konsole. Dazu die Konsole starten.Geben Sie dazu im Start-Menü den Befehl cmd ein.


Seite 70

Wechseln Sie mit den entsprechenden Kon-solen-Befehlen in das platform-tools-Verzeichnis.

Daszu den Laufwerksbuchstaben ihres ex-ternen Datenträgers, auf dem sich die Eclipse-Installation befindet, mit einem Doppelpunkt eingeben und mit Enter be-stätigen.

I:

Wechseln Sie dann mit dem cd-Befehl und der Pfadangabe in das plattform-tools-Verzeichnis und bestätigen sie die Eingabe wieder mit Enter.

cd Eclipse_MySQL_Stick\Programme\eclipse\adroid-sdk\platform-tools

Geben Sie dann den Installationsbefehl an und bestätigen sie nochmals mit Enter Ihre Eingabe.

adb install MyApp.apk

Die Installation sollte dann erfolgreich voll-zogen werden.

Dazu muss der Emulator muss gestartetsein!

Testinstallation auf der AVD des Emulators

Hinweis:Falls Sie die Installation wiederholen möch-ten ist es zwingend notwendig die schoninstallierte Version zuvor zu deinstallieren.

Klicken Sie dazu in der AVD auf die Schalt-fläche


Seite 71

Settings >> Apps >> MyApp >> Unin-stall


Seite 72

Wechsel Sie dann auf das virtuelle Gerät.

Schieben Sie das Schloss mit dem Maus-zeiger nach rechts, um auf die virtuelleBenutzeroberfläche des Mobiltelefons zugelangen.

Klicken Sie auf die Schaltfläche

Im Apps-Menü finden Sie nun das Icon un-serer Anwendung MyApp.

Mit einem Doppelklick auf die Schaltflächeöffnen sich die Anwendung.


Seite 73

Herzlichen Glückwunsch die Anwendung istnun einsatzfähig. Testen Sie alle Funktiona-litäten. Im Anhang finden Sie dazumögliche Vorgangsbeschreibungen!


Seite 74

7 Einrichtung und Konfiguration in Eclipse

Einrichtung und Konfiguration in

Eclipse


Seite 75

7.1 Allgemeines zur Konfiguration der Entwicklungsumgebung Eclipse

Die Installationen erfolgen auf Basis der Stick-Lösung 3 des LS:

http://www.schule-bw.de/unterricht/faecher/informatik/tools/digitale-schultaschen/

Version Eclipse Indigo, basierend auf derEclipse Classic Version 3.7.2

Es empfiehlt sich nach dem Herunterladenein Update der installierten Erweiterungen:Help >> Check for Updates

Hier ein Überblick genutzter Repositories

Window >> Preferences >> Install / Update

Hinweis:

Falls Sie eine manuelle Installation durchführen möchten beginnen Sie mit dem WTP-PlugIn (Web Tools Plattform), da einige der sonst aufgeführten Erweiterungen auf Teiledieses PlugIns zugreifen.


http://www.schule-bw.de/unterricht/faecher/informatik/tools/digitale-schultaschen/

Seite 76

Die ADT setzt einige Erweiterungen vorausu.a. die Eclipse Webtools (WTP / WST):

http://download.eclipse.org/relea-ses/indigo/

Erweitert durch die Android DeveloperTools (ADT):

Help >> Install Software >> Add

Repositor: Android-ADT-PlugInhttps://dl-ssl.google.com/android/eclipse/

Alternativ:http://dl-ssl.google.com/android/eclipse/

Im Netzwerk mit Proxy sollten in Eclipsedie Netzwerkeinstellungen erweitert wer-den:

Window >> Preferences >> General >>Network Connections

Erweitert durch den Software Develope-ment Kit (SDK).

Nur die SDK:

http://dl.google.com/android/installer_r22.3-windows.exe

Für das ganze Bundle:

http://developer.android.com/sdk/index.html#win-bundle






http://dl-ssl.google.com/android/eclipse/

https://dl-ssl.google.com/android/eclipse/

Seite 77

Installieren Sie die android-sdk am bestendirekt in ihr Eclipse-Programmverzeichnis.

Definieren Sie den Pfad in den Einstellun-gen. Wählen Sie dazu in der Menü-Leistedie Option >> Window >> Preferences>> Android >> SDK Location

Geben Sie über die Schaltfläche Browseden Pfad zum android-sdk-Verzeichnis an.

Falls nach dem Update und einem Neustartdie Icons für den Android SDK-Managerund AVD-Manager nicht in der Symbolleistein Eclipse ersichtlich sind, klicken Sierechts neben der Symbolleiste auf die freieFläche und wählen die Option im Kontext-Menü >> Customize Perspective

Stellen Sie sicher, dass auf dem ReiterCommand Groups Availability die OptionAndroid SDK and AVD Manager aktiviertist.


Seite 78

Starten Sie die Android SDK und installie-ren Sie die Tools und Android API (aktuell19). Vorsicht das kann dauern, man kannden Installationsvorgang auch im Hinter-grund ablaufen lassen.

Im Feld Status können Sie nachsehen wel-che Pakete installiert wurden.

Für den Unterricht empfehle ich den Schü-ler die Digitale Tasche mit Eclipse und deraktualisierten SDK ins Tauschverzeichnis zuspielen. Das kopieren dauert im Netzwerkallerdings auch seine Zeit!

Für den Fall, dass beim öffnen des AndroidSDK Manager der nebenstehende Fehlerauftaucht müssen Sie den Administratordes Systems fragen ob er sicherstellenkann, dass es möglich ist, für die Profile imNetzwerk eine solche Variable zu setzen.

Hilfe aus dem Netz:

http://wiki.answers.com/Q/How_do_you_fix_this_The_AVD_manager_normally_uses_the_user's_profile_directory_to_store_AVD_files_However_it_failed_to_find_the_default_profile_directory#slide=5&article=How_do_you_fix_this_The_AVD_manager_normally_uses_the_user's_profile_directory_to_store_AVD_files_However_it_failed_to_find_the_default_profile_directory





Seite 79

7.2 Syntax-Hilfe mit dem Eclipse-PlugIn-Aptana

http://www.aptana.com/products/studio3/download [APT00]

Wählen Sie die Option >> Eclipse Plu-gIn Version. Sie können ohne weitereAngaben fortschreiten

Das Repository:http://download.aptana.com/studio3/plugin/install

Das ist die aktuelle Quelle für das PlugIn.Laut Herstellerangaben besteht eine Kom-patibilität für die Eclipse Versionen 3.6 oderbesser.

Kopieren Sie die o. g. Internet-Adresse.

Öffnen Sie die EntwicklungsumgebungEclipse und wählen Sie in der Menü-Leistedie Option: Help >> Install New Soft-ware

Klicken Sie auf die Schaltfläche

und geben Sie Name und Location an.


http://download.aptana.com/studio3/plugin/install

http://download.aptana.com/studio3/plugin/install

http://www.aptana.com/products/studio3/download

http://www.aptana.com/products/studio3/download

Seite 80

Kontrollieren Sie die Auswahl und wählenSie die Schaltfläche >> Next, um im Instal-lationsprozess fortzuschreiten.

Wählen Sie im Fenster Review Licences dieOption:I accept the terms of the licence...

Installieren sie das plugIn mit einem Klickauf die Schaltfläche >> Finisch.

Starten Sie ihre Entwicklungsumgebung er-neut.


Seite 81

Aptana verwendet Standardmäßig die Edi-tor-Einstellung: Weiße Schrift aufSchwarzem Hintergrund. Das stört!

Ändern Sie diese Einstellung: Windows >>Preferences >> Aptana Studio >> The-mes

Theme "Aptana Studio 2.x" einstellenund mit einem Klick auf die Schaltfläche„OK“ die Veränderung bestätigen.

Fenster schließen!

Syntax-Hilfe einbinden:Menü >> Commands >> Bundle Develop-ment >> Install Bundle

JQuery auswählen und OK klicken.


Seite 82

Auf der Konsole werden folgende Befehleausgeführt.

Um die Syntaxhilfe für ein Projekt zu akti-vieren, sollten Sie später auf das Projektklicken und im Kontext-Menü die Option >>Properties >> Project Build Path wäh-len. Im rechten Fenster können Sie danndie verfügbare „Library“ mit einem Klickin der Checkbox aktivieren.

Spätestens nach einem Neustart kann mandie Syntax-Hilfe mit der Taste STRG +LEERTASTE bedienen.


Seite 83

8 Anhang

Anhang


Seite 84

8.1 Vorgangsbeschreibung am Beispiel des Taschenrechners

App öffnen...

Die Schaltfläche >>Taschenrechner<< anklicken...

Zahl1 eingeben...


Seite 85

Zahl2 eingeben...

Die Schaltfläche für die gewünschte Re-chenoperation anklicken...

Ausgabe im Dialogfenster mit OK bestä-tigen...


Seite 86

Ergebnis wird ins das Ergebnisfeld über-nommen und angezeigt...

Eingabe

1. Grenzfall: Eingabe von Dezimalzahlen

Erwartetes Ergebnis

Eingabe

2. Grenzfall: Division durch Null

Erwartetes Ergebnis


Seite 87

Eingabe

3. Grenzfall: Eingabe nicht nummerischer Werte

Erwartetes Ergebnis


Seite 88

8.2 Vorgangsbeschreibung am Beispiel des Währungsrechners

App öffnen und auf die Schaltfläche >> Währungsrechner klicken.

Betrag eingeben...

Ausgangswährung auswählen...


Seite 89

Zielwährung auswählen...

Schaltfläche >>Umrechnen<< anklicken...


Seite 90

Anzeige der Ausgabe im Dialogfenster und die Ausgabe mit OK bestätigen...

Übernahme des Ergebniswertes und anzei-ge des Ergebnis im Ergebnisfeld …

Hinweis:Formulieren Sie auch hier Testfälle, um die Grenzfälle zu testen!


Seite 91

9 Quellen

Quellen


Seite 92

LiteraturverzeichnisVOL00: Vollendorf, Maximilian, Bongers, Frank, jQuery das Praxisbuch, 2013FRA00: Franke, Florian, Ippen, Johannes, Apps mit HTML5 und CSS3, 2013WEN00: Wenz, Christian, Javascript, 2014SUB00: Seb Jachec, Blu Stripes, 2012, http://subtlepatterns.comOAN00: OANDA Corporation, Currency Converter, 1996-2014, http://www.oanda.com/currency/converter/WEB01: Wilhelm Jansen, Mathematik - Werte runden, 2003-2014, http://www.web-toolbox.net/webtoolbox/JQU01: The jQuery Foundation Developers, Themes framework, 2014, demos.jquerymobile.com/1.2.0/docs/api/JQU00: The jQuery Foundation Developers, List of Icons, 2014, http://api.jquerymobile.com/icons/W3S01: W3Schools Developers, jQuery Mobile Transitions, 1999-2014, http://www.w3schools.com/jquerymobileDEV00: Android Developers, Iconography, , http://developer.android.com/design/APT00: Appcelerator, Inc, Download - Aptana Studio 3.4.2, 2005, http://www.aptana.com/products/studio3/


lernmaterial...formulare auswerten, html5, javascript, jquery, mobile web app, native app, phonegap...

Documents