You are on page 1of 148

DEVELOPER

web & mobile

€ 14,95 

eutschland € 14,95 Schweiz sfr 29,90
D
Österreich, Belgien, Niederlande, Luxemburg € 16,45

Jobs für

ab S. 1
r
e
l
k
c
i
w
Ent

40

JavaScriptFrameworks
Data Binding in Web-Apps mit Knockout.js S. 14
• Mehr Struktur für Backbone.js mit Zusatzmodul
• Datenbanken mit Node.js anbinden S. 28

S. 22

Jahresarchiv
2013
Alle Ausgaben als PDF auf DVD
• 1773 Seiten Entwickler-Know-how
• Mit schneller Index-Suche

Web Development
Frameworks für PHP-Entwickler
• JavaScript-Frameworks
• PHP-Core 5.5.6
• Content-Management-Systeme

Mobile Development
Android SDK r22.3
• Genymotion 2.0.1 (Android-VM)
• MyPhoneExplorer 1.8.5

Grafiken und Animationen in 3D
Neue Gestaltungswelten mit CSS-Transforms realisieren

S. 40

Entwickeln für Firefox OS
02

Die Grundlagen für die Entwicklung erfolgreicher Applikationen

INFOProgramm
gemäß
§ 14
JuSchG

4 198255 014951

DEVELOPER

HTML5 • JavaScript • CSS3 • Apple iOS • Android • Windows 8 • PHP • Responsive Webdesign • MySQL • NoSQL

2/2014

DEVELOPER

2/2014

web & mobile

web & mobile

www.webundmobile.de

S. 74

Elastische Layouts und Frameworks
So läuft die Anpassung von Websites an Mobile Devices

S. 64

Die Programmierschnittstelle von Flickr
Das leistungsfähige API von Flickr optimal nutzen

S. 94

25. - 26. Februar 2014, München

Das Branchen-Event
des E-Commerce
2 Hallen I 11.000 m2 I 300 Aussteller

Besuch der Messe
kostenlos.

Jetzt
registrieren !

internetworld-messe.de

InternetWorldMesse
#iwm

EDITORIAL

Das Internet
der Dinge
Bei den vielen Prognosen für das neue Jahr, die um die Jahreswende immer verstärkt publiziert werden, taucht in diesem Jahr verstärkt das Schlagwort »Internet der
­Dinge« auf. Dieses Phänomen in Form intelligenter Consumer-Elektronik, medizinischer Geräte, Sensoren und vernetzter Systeme wird künftig eine immer wichtigere
Rolle spielen und damit auch Entwickler vor neue Herausforderungen stellen. Der
Tenor der Prognosen ist eindeutig: Skalierbarkeit und Komplexität erreichen neue
Dimen­sionen und die im Internet der Dinge erzeugte Datenmenge wächst explo­
sionsartig. Bei der Applikationsentwicklung wurde die Analyse der erzeugten Daten
bislang eher stiefmütterlich behandelt. Im Mittelpunkt der Applikationen standen die

»Intelligente Consumer-Elektronik,
Sensoren und vernetzte Systeme«
Funktionalität, die erreichbaren Datenquellen und die Datenübermittlung. Das ändert sich mit dem Internet der Dinge. Von einer nachgeordneten Tätigkeit rückt jetzt
die Analytik und damit die explizite, detaillierte und handlungsorientierte Analyse
der riesigen Mengen kontext- und ortsabhängiger Daten in den Mittelpunkt. Nur so
können Unternehmen den Datenschatz im Internet der Dinge heben.
Mit dieser Entwicklung einhergehen werden sicher auch neue Programmierwerkzeuge, neue Datenbanken und neue Analyse-Tools, mit denen sich Entwickler zur
Bewältigung der neuen Aufgaben rüsten können. Wie auch immer: Die Redaktion
wünscht allen Lesern, die an dieser Front kämpfen, ein erfolgreiches Jahr 2014. Interessant dürfte es in jedem Fall werden.

Ihr Max Bold
chefredakteur@maxbold.de

2/2014

3

Inhalt
Aktuell
6 Open-Source-Software
Text-Analyse im Web

Feature
14 Data Binding in Web-Apps
Knockout.js implementiert das Entwurfsmuster Model-View-ViewModel (MVVM) für
HTML und ermöglicht damit eine Datenbindung zwischen HTML und JavaScript
22 Mehr Struktur für Backbone.js
Das Zusatzmodul Marionette.js soll der
Bibliothek Backbone.js mehr Struktur und
Wiederverwendbarkeit verleihen
28 Datenbanken anbinden
Bei der Implementierung von Applikationen müssen immer wieder Daten gespeichert werden. Ein Tutorial zeigt, wie dies
mit Node.js geht

HTML, CSS & JavaScript

Mit JavaScript-Frameworks arbeiten

40 CSS3-Transformationen
Inzwischen sind die 3D-Transformationen
von CSS3 in allen aktuellen Browsern angekommen

JavaScript spielt in den Bereichen Web und Mobile eine immer größere
Rolle. Entsprechend wächst die Bedeutung von Frameworks und Bibliotheken als zentrales Werkzeug in den Händen von professionellen Entwicklern. Mit Hilfe solcher Frameworks lassen sich moderne und responsive Webdesigns schnell und rationell realisieren.
ab Seite 14

46 Das Canvas-Element in HTML5
Das neue <canvas>-Element in HTML5
bietet zahlreiche neue Möglichkeiten zur
Gestaltung von Illustrationen, Diagrammen
und Bildern

Grafiken und Animationen in 3D

52 Flexible Grids mit Sass
Es gibt zahlreiche Frameworks, die sich
mit der Gestaltung von flexiblen Gittern
beschäftigen. Eines davon ist Sass
58 HTML5: Offline-Webapplikationen
Was sich wie ein Widerspruch anhört, ist
im Alltag ein wichtiges Feature. Webseiten
müssen auch offline funktionieren

Mit CSS-Transforms lassen sich HTML-Elemente drehen, verschieben
oder in der Größe verändern. Und das funktioniert auch im 3D-Raum.
Vor allem diese Variante eröffnet neue Gestaltungswelten. Seite 40

Mobile Development

64 F rameworks, Tools und Techniken
Die mobile Internetnutzung wächst. Die
Anpassung von Websites für Smartphones und Tablets ist daher das Gebot der
Stunde
70 
Das iOS SpriteKit
Zusammen mit iOS 7 und OS X Mavericks
hat Apple neben anderen Bibliotheken
auch SpriteKit eingeführt
74 P rogrammierung für Firefox OS
Von einem Durchbruch kann noch keine
Rede sein, aber die Beliebtheit von Firefox
OS steigt
4

2/2014

Inhalt

Elastische Layouts und Frameworks
Mit HTML5, CSS und
JavaScript können
Webdesigner nicht
nur Webseiten, sondern auch vollwer­
tige Web-Apps für
mobile Geräte ent­
wickeln.  Seite 64

Die Programmierschnittstelle von Flickr
Das API von Flickr
ist gut dokumentiert und läuft absolut stabil. Es gibt
auch fertige Bibliotheken in verschiedenen Programmiersprachen, die die Arbeit mit dem API erleichtern.  Seite 94

Backend
86 Virtualisierungs-Umgebungen
Der Datenbankspezialist Oracle engagiert
sich auch in Sachen Virtualisierung
94 Flickr API nutzen
Aus Entwicklersicht wird Flickr gerade
durch sein leistungsfähiges API spannend

100 JavaFX mit IntelliJ IDEA
JetBrains, der Hersteller von IntelliJ IDEA,
bietet seit der Markteinführung von
JavaFX eine direkte Unterstützung für
­JavaFX an und arbeitet daran, diese
weiter auszubauen
108 CMS mit ASP.NET
Das Jano-CMS ist ein noch recht junges
Content-Management-System, das vollständig neu entwickelt wurde
114 Combit List & Label 19 – Reportgenerator
Im neuen List & Label 19 visualisieren Sie
Geodaten mit eigenen Shapefiles
120 Diashow mit Web-Developer-Bordmitteln
Als Web Developer kann man ohne großen
Aufwand selbst eine schöne Diashow implementieren

beyond Dev

122 Grafik für Entwickler
Bildmontagen sind ein gängiges Mittel des
Webdesigns. Dabei gibt es unterschiedliche Formen

Webdesign mit Bildmontagen
Collagen zeigen
mehrere Details aus
verschiedenen Bildern auf einer Fläche. Dabei ist jedes Objekt wichtig
und transportiert im
weitesten Sinn eine
Botschaft. Seite 122

126 Source Control Management (SCM)
Die Wiederholbarkeit von erfolgreichen
Softwareprojekten ist kein zufälliges Ereignis
130 Samsungs Entwicklerkonferenz SDC 2013
Das Android-Schwergewicht Samsung hat
im September zu seiner ersten weltweiten
Entwicklerkonferenz eingeladen
134 Mobile Trends 2014
Netbiscuits hat seine Mobile-Web-Prognosen für das Jahr 2014 veröffentlicht

Unser Service im Internet
■ Website: Aktuelle News, Tipps und Tricks,

Termine, Buchbesprechungen und vieles mehr
■ Newsletter: Jeden Montag fassen wir für

Sie das Wichtigste zusammen
■ Aktuelles Heft: Das Inhaltsverzeichnis

der aktuellen Ausgabe
■ Download-Service: Zu jeder Ausgabe

stellen wir die Beispiel-Listings zu aus­
gewählten Artikeln zur Verfügung

2/2014

Standards
3 Editorial
50 Heft-DVD
136 Bücher
138 Termine
140 Stellenmarkt
144 Dienstleisterverzeichnis
146 Impressum/Vorschau
5

Aktuell
News
Der Möbelmarkt im Internet
Die Anzahl der stationären Möbelhändler ist
schier unfassbar. Diejenigen, die auch im Web
Möbel und Einrichtungsgegenstände verkaufen, ist dagegen schon überschaubarer. Die
Fachzeitschrift Möbelkultur hat 180 OnlineMöbelhändler in Deutschland gezählt. Wer da
als stationärer Anbieter keine Internet-Strategie hat, könnte bald den Anschluss verlieren.
Doch die Händler werden zunehmend aktiv, allen voran Ikea: Der Online-Anteil des Umsatzes soll in den nächsten Jahren auf bis zu zehn
Prozent ansteigen.
▶ www.internetworld.de/Dossiers/
Moebelhandel-im-Internet

Online-Umfrage-Tool für Unternehmen
SurveyMonkey bringt seine Enterprise-Edition
nach Deutschland. Die Version seines Umfrage-Tools wurde für die Nutzung durch Unternehmen entwickelt und ermöglicht zentrales Management sowie eine einfachere teamübergreifende Zusammenarbeit.
▶ https://de.surveymonkey.com

Neue Funktion von Searchmetrics
Die sogenannte Keyword-not-provided-Strategie von Google stellt Werbungtreibende
vor neue Probleme: Der Internetkonzern hat
schon vor Längerem damit begonnen, Seitenbetreibern nicht mehr anzuzeigen, über welche
Suchbegriffe Besucher auf ihren Seiten gelandet sind. Mit Traffic Insight bringt Searchmetrics nun eine Funktion heraus, mit der Marketer weiterhin Traffic-Infos für ihre Keywords
erhalten.
▶ www.searchmetrics.com/de

So profitieren kleinere Händler von
M-Payment
Kleinere Händler, die bisher am PoS keine
Kreditkarten annehmen konnten, werden jetzt
mit einer Reihe von M-Payment-Lösungen bedient. Damit haben auch kleinere Händler die
Möglichkeit, die Zahlungsarten für ihre Kundschaft auszubauen.
Das mobile Bezahlen oder Kassieren per
Smartphone kommt in Deutschland endlich in
Fahrt – und erobert nun auch kleinere Shops
mit speziell auf diese Zielgruppe zugeschnittenen Lösungen. Dabei geht es weniger um den
Ansatz, dass Kunden am PoS über noch kaum
verbreitete Verfahren wie NFC drahtlos bezahlen können, sondern dass Händler Smartphones und Lesegeräte in Kombination mit speziellen Apps zum Kassieren verwenden.
▶ www.wirecard.de

6

CMS und RAD-Plattform

DotNetAge 3.1 vorgestellt
Auf der Open-Source-Plattform Codeplex
.com ist jetzt die Version 3.1 des Web-Content-Management-Systems DotNetAge 3.1
veröffentlicht worden. DotNetAge taugt
zugleich als RAD-System für den raschen
Aufbau von Webseiten per Drag and Drop.
DotNetAge ist zugleich ein Web-Content-Management-System und eine RADPlattform (Rapid Application Development) zum Entwickeln von Webauftritten.
Nach Aussage der Entwickler des Systems
liegt ihr Fokus auf der Ästhetik, der einfachen Bedienbarkeit per Drag and Drop
sowie dem Einhalten von Webstandards.
DotNetAge bietet ein intuitives Interface,
das es auch technisch wenig versierten

Anwendern erlauben soll, neue Sites aufzubauen oder die Funktionalität bestehender Webseiten zu erweitern. Dank eingebautem responsivem Webdesign passen
sich die mit DotNetAge produzierten Seiten an die Bildschirmgrößen der Empfängergeräte an.
Für Entwickler wird der DotNetAge
Developer Guide angeboten. Dort findet
man Informationen über das Backend des
auf ASP.NET MVC aufgebauten CMS-Systems. Der Download sowie weitere Dokumentation zum Open-Source-Produkt
sind auf der Codeplex-Seite zum Produkt
zu finden.
▶ http://dotnetage.codeplex.com

Open-Source-Software

Text-Analyse im Web
Aus der Fülle an Informationen die individuell wichtigen herauszufiltern ist eine der großen Herausforderungen
der Gegenwart. Um die
zunehmende Menge an
Informationen auf Webportalen besser bewältigen zu können, haben
Informatiker der Friedrich-Schiller-Universität
Jena und der Concordia Eine neue Software erleichtert die Analyse von Texten in Webportalen
Universität in Montreal
(Kanada) eine Software entwickelt, welsen, ohne es gründlich lesen zu müssen«,
che die Analyse von Texten in Portalen ersagt Löffler. Zu den Diensten der Semantic
leichtert.
Assistants zählt auch ein Indexer, um ähnBahar Sateli und Professor Dr. René Witlich wie in einem Buch alle relevanten Terte haben in Kanada die Sprachverarbeime in einer sortierten Reihe angezeigt zu
tungs-Software Semantic Assistants entbekommen, sowie eine automatische Textwickelt, mit deren Hilfe Texte leichter unZusammenfassung.
tersucht und transformiert werden könFinanziert wurde das Projekt vom Deutnen. Das Programm ist in Koopera­tion mit
schen Akademischen Austauschdienst
Felicitas Löffler und Professor Dr. Birgitta
und dem Natural Sciences and EngineeKönig-Ries von der Nixdorf-Professur für
ring Research Council of Canada. Die Zuverteilte Informationssysteme der Friedsammenarbeit der Universitäten in Jena
rich-Schiller-Universität Jena in das Openund Montreal endet nicht mit dem AbSource-Portal Liferay integriert worden.
schluss dieses Projekts. Im nächsten Jahr
So ist es nun unter anderem möglich, Persoll gemeinsam eine zusätzliche Persosonen, Orte und Organisationen in einem
nalisierungskomponente entwickelt werArtikel farblich hervorzuheben.
den.
▶ www.semanticsoftware.info/
»Diese Visualisierung erleichtert es, den
semantic-assistants-liferay
Inhalt eines Dokumentes schnell zu erfas2/2014

1&1 ALL-NET-FLAT
FLAT FESTNETZ
ALLE
FLAT HANDY-NETZE
FLAT INTERNET

19,

99,

HTC
One

29

ETZ
N
D
99 DNET
Z
€/Monat*
€/Mo
Monat*
Monat*

Sony
Xperia Z1

JETZT SICHERN:

2 FREI-MONATE!*
Samsung
Galaxy Note 3

Sofort
starten:

NACHT
OVERNIGHTLIEFERUNG

In Ruhe
ausprobieren:

MONAT
TESTEN

Defekt? Morgen
neu bei Ihnen:

TAG

AUSTAUSCH
VOR ORT

1und1.de
0 26 02 / 96 96

* 1&1 All-Net-Flat Basic in den ersten 24 Monaten für 19,99 €/Monat, danach 29,99 €/Monat. 2 Freimonate zur Verrechung im 4. und 5. Vertragsmonat. Oder auf Wunsch mit Smartphone,
dann immer für 29,99 €/Monat. Einmaliger Bereitstellungspreis 29,90 €, keine Versandkosten. 24 Monate Mindestvertragslaufzeit.
1&1 Telecom GmbH, Elgendorfer Straße 57, 56410 Montabaur

Aktuell
Studie zum Web 3.0

Der richtige Umgang mit Big Data
Die Entwicklung des Internets ins semantische Web 3.0 wird in den nächsten Jahren maßgeblich vom gezielten Umgang
mit Big Data geprägt sein. Zu diesem Ergebnis kommt der aktuelle IT-Trend Report 2013/2014 des IT- und Webexperten
DiOmega.
So sind 55 Prozent aller befragten Branchenexperten überzeugt, dass die intelligente Aufbereitung und Verknüpfung
enormer Datenmengen branchenübergreifend zunehmend entscheidende Faktoren sein werden. 36 Prozent halten entsprechende Big-Data-Lösungen in einigen

Bereichen für sinnvoll, während nur neun
Prozent der Befragten diesen nur eine geringe Bedeutung beimessen.
Angesichts weltweit massiv wachsender Datenmengen wird der richtige Umgang mit Big Data immer wichtiger: Aktuelle Prognosen gehen davon aus, dass bis
2016 mehr als ein Zettabyte Daten durch
die globalen Datennetze übertragen werden. Das Web 3.0 wird sich in den kommenden Jahren als Antwort auf die Datenflut etablieren.
Grundlage für die intelligente Verknüpfung von Daten sind Metatexte, die alle re-

levanten Angaben zu der Beziehung der
Informationen untereinander umfassen.
Diese können manuell vom Content-Ersteller selbst oder zunehmend automatisiert durch lernende Programme verfasst
werden.
Lösungen wie der Apple-Assistent Siri zeigen bereits heute, wie eine semantische, kontextbasierte Websuche im kleinen Rahmen aussehen kann. Die klassische Stichwortsuche über Suchmaschinen
wie Google könnte schon in einigen Jahren
der Vergangenheit angehören.
▶ www.diomega.de

Bitkom

Datensicherheit im Internet
Der Hightech-Verband Bitkom begrüßt
die Initiative von AOL, Facebook, Google, LinkedIn, Microsoft, Twitter und Yahoo
zur Reform der geheimdienstlichen Überwachung im Internet. »Wir unterstützen
den Vorstoß der Konzerne gegen die geheimdienstlichen
Überwachungsaktionen«, sagte Bitkom-Präsident Professor
Dieter Kempf. »Sowohl die Internetnutzer
als auch die Anbieter von Internetdiensten müssen vor einem ungezügelten Zugriff auf persönliche Daten durch die Geheimdienste geschützt werden.«
Es gebe auch in Deutschland einen massiven Vertrauensverlust, was die Sicherheit von Daten und die Integrität von
Diensten im Internet angeht. Das zeigt eine aktuelle Umfrage im Auftrag des Bitkom. Danach halten 80 Prozent der Internetnutzer in Deutschland ihre persönlichen Daten im Internet generell für unsicher. Im Juli, nach der ersten Welle der
Veröffentlichungen, hielten insgesamt erst
66 Prozent der Internetnutzer ihre Daten
für unsicher. Bei einer Bitkom-Umfrage im
Jahr 2011 waren es 55 Prozent. »Das Vertrauen vieler Internetnutzer in die Sicherheit ihrer Daten wurde durch die NSA-Affäre erschüttert«, sagte Kempf. Politik und
Wirtschaft seien jetzt gefordert. »Der Abhöraffäre zum Trotz: Die größte Gefahr
geht von der organisierten Cyber-Kriminalität aus«, warnte Kempf. »Diese Bedrohung dürfen wir nicht aus dem Blick verlieren.«

8

Laut Umfrage fühlt sich
fast die Hälfte der Internetnutzer von der Ausspähung
ihrer persönlichen Daten
durch staatliche Stellen bedroht. Im Juli waren es erst 39
Prozent. Damit übertrifft die
Sorge vor der Bespitzelung
durch den Staat inzwischen
sogar die Angst vor CyberKriminellen. 46 Prozent der
befragten Internetnutzer fühlen sich von einer möglichen
Ausspähung ihrer Daten
durch Kriminelle bedroht. Im
Juli waren es 46 Prozent. Immerhin 38 Prozent fürchten
die Ausspähung ihrer Daten Laut Bitkom schwindet das Vertrauen in Datensicherheit im
durch Unternehmen. Nur 15 ­Internet
Prozent der Befragten sagen,
haben dazu geführt, dass sich bei viedass sie sich im Internet überhaupt nicht
len Internetnutzern ein allgemeines Gebedroht fühlen.
fühl der Unsicherheit breit gemacht hat«,
Weiter gelitten hat auch das Vertrauen
sagte Kempf. Das ändere aber nichts da­
der Bürger, wenn es um den Umgang soran, dass Internetzugangsanbieter, Betreiwohl des Staates als auch der Wirtschaft
ber von Cloud-Services oder große Onmit ihren persönlichen Daten geht. Laut
line-Shops jedes Jahr Milliardensummen
Umfrage misstrauen 68 Prozent der Interin die Sicherheit der Daten ihrer Kunden
netnutzer Staat und Behörden beim Uminvestieren. Kempf: »Die Unternehmen in
gang mit ihren persönlichen Daten im
der IT-Branche haben ein hohes InteresWeb. Nicht weniger schlecht ist das Erse daran, ihren Kunden möglichst sichere
gebnis für die Wirtschaft. 64 Prozent der
Dienste anbieten zu können. Das Vertraubefragten Internetnutzer misstrauen der
en der Nutzer ist die Grundlage ihres Ge»Wirtschaft allgemein«, wenn es um den
schäftsmodells.«
Umgang mit ihren Daten im Netz geht.

www.bitkom.org
»Die geheimdienstlichen Spähaktionen
2/2014

Hosting mit
Shortcuts.
Mit Agentur-Tools Ideen sofort umsetzen.

www.mittwald.de

Aktuell
Big-Data-Umfrage

Deutsche Unternehmen scheuen Innovationen
Wie gehen deutsche Unternehmen mit
der Herausforderung Big Data um? Antworten auf diese Frage hat das Marktforschungsinstitut TNS Emnid im Auftrag
von Lexmark gesucht. Ein Ergebnis der
Erhebung: Auch wenn sich die befragten
Unternehmen wichtiger Trendthemen wie
Big Data, Cloud Computing oder Mobility durchaus bewusst sind, zeigen sie sich
beim Einsatz neuer Technologien eher zurückhaltend.
Die Studie zeigt, dass deutsche Unternehmen für die Speicherung ihrer Daten
mit Abstand am häufigsten interne Unternehmensnetzwerke nutzen (39 Prozent).
14 Prozent archivieren ihre Dokumente
noch immer in erster Linie in Papierform
und 11 Prozent nutzen vorwiegend ihre
lokale Festplatte, um wichtige Dokumente zu speichern. Auf unternehmensübergreifende Dokumenten- oder Enterprise-Content-Management-Systeme (ECM)
setzen nur 18 Prozent der befragten Unternehmen. Die bevorzugte Methode der
Datenverwaltung hängt vor allem von der
Unternehmensgröße ab: Während kleinere Unternehmen stärker auf klassische Papierdokumente und eine lokale Speicherung setzen, kommen zentrale ECM-Systeme häufiger in größeren Unternehmen
zum Einsatz.
Cloud-Dienste sind laut der Studie in
den Unternehmen noch nicht weit verbreitet. So nutzen lediglich 16 Prozent der

Unternehmen Dienste wie Dropbox oder
Google Drive. Dabei gibt es kaum Unterschiede zwischen großen und kleinen Unternehmen. Von den befragten Unternehmen, die Cloud-Dienste derzeit nicht nutzen, planen nur fünf Prozent künftig eine
Einführung dieser Services.
Geht es um die Nutzung privater mobiler Geräte am Arbeitsplatz – Stichwort
BYOD (Bring your own Device) – geben
sich die meisten deutschen Unternehmen restriktiv. Lediglich ein Fünftel erlaubt die betriebliche Nutzung des persönlichen Smartphones oder Tablets. Zumeist sind dies kleinere Unternehmen mit
50 bis 300 Mitarbeitern. Über die Hälfte aller befragten Unternehmen lässt eine
Nutzung privater mobiler Geräte am Arbeitsplatz nicht zu. 20 Prozent der Interviewten gaben an, dass es in ihrem Unternehmen hierzu keine klare Regelung gebe.
Das BYOD-Verbot wird umso restriktiver
gehandhabt, je größer das Unternehmen
ist: So untersagen von den befragten Unternehmen mit 50 bis 300 Mitarbeitern nur
36 Prozent den Einsatz privater mobiler
Geräte. Hingegen sind es in Unternehmen
ab 300 Mitarbeitern mehr als 60 Prozent.
Die Datenmenge steigt sowohl im Unternehmensumfeld als auch im privaten
Bereich rapide an – hierüber bestand bei
den meisten der befragten Entscheider
kein Zweifel. So erklärten 83 Prozent der
Befragten, dass sie einen deutlichen Trend

zur Verarbeitung immer größerer Datenmengen im Unternehmen erkennen. Die
meisten Befragten äußerten sich zufrieden
über die Schnelligkeit des Datenzugriffs:
In vier von zehn Unternehmen sind relevante Daten schnell verfügbar. Ebenso
viele Befragte sagten jedoch, dass sich die
Datensuche manchmal hinziehen könne.
14 Prozent der Umfrageteilnehmer erklärten zudem, dass sich die Datensuche
oft schwierig gestalte und viel Zeit in Anspruch nehme. Dabei schätzten Männer
die Datensuche problemloser ein als Frauen (45 zu 36 Prozent), und ältere Mitarbeiter sind zufriedener mit der Schnelligkeit
ihres Datenzugriffs als jüngere Mitarbeiter
(47 zu 34 Prozent).
Hartmut Rottstedt, Geschäftsführer der
Lexmark Deutschland GmbH, kommentiert: »Unsere Umfrage zeigt, dass viele
Unternehmen ihre Daten noch immer eher
traditionell handhaben. Dabei verbergen
sich in den zunehmend steigenden und
zumeist unstrukturierten Datenmengen
viele wertvolle Informationen, die oft erst
durch den Einsatz der richtigen Technologien zugänglich gemacht werden. Lexmark bietet seinen Kunden zahlreiche
maßgeschneiderte Lösungen, um diese
unstrukturierten Daten so zu verarbeiten,
dass die darin enthaltenen Informa­tionen
für die Geschäftsprozesse voll nutzbar
sind.«
www.lexmark.com/de_DE

Deutsche Unternehmen zeigen sich beim Einsatz neuer Technologien eher zurückhaltend

10

2/2014

Shopware

Neues Responsive
Template
Die Shopware AG empfiehlt ab sofort ein neues Responsive Template. Es wurde vom Shopware Solution Partner Conexco entwickelt
und stellt für Shopware-Nutzer eine effiziente Möglichkeit dar, den Shop auf Zugriffe
über die unterschiedlichsten mobilen Endgeräte vorzubereiten. Das neue Template passt
sich diesen Anforderungen an und bereitet
Shopbetreiber auf die immer größer werdende Anzahl von mobilen Zugriffen vor.
Bislang hatte Shopware vor, für Shop­ware
4 ein selbst entwickeltes Responsive Template anzubieten. »Durch die hervorragende und
enge Zusammenarbeit mit unserem Solution
Partner Conexco ist jedoch eine gemeinsame
Lösung entstanden. Das Plug-in wurde zusätzlich durch uns zertifiziert. Somit wollen
wir für die Produktgeneration Shopware 4 das
Rad nicht neu erfinden«, sagt Shopware-Vorstand Stefan Heyne. Weiterhin beschäftigt sich
Shopware selbst intensiv mit dem Thema Responsive Design und wird für das nächste Major Release eine eigene Lösung anbieten.
▶ www.shopware.de/mobile-commerce

C

M

Y

CM

MY

CY

CMY

OwnCloud Community Edition 6

Die eigene Cloud
Eine hübschere Haube und mehr unter der
Haube, so lässt sich Version 6 von OwnCloud
zusammenfassen. Ein frisches Design kombiniert mit neuen Möglichkeiten für das Erstellen, Teilen und Herunterladen von Dokumenten sowie ihr gemeinsames Bearbeiten und verbesserten sowie neuen Programmierschnittstellen – mit zahlreichen Funktionen glänzt die neue sechste Version der Community Edition von OwnCloud.
Die Open-Source-Software legt Dateien auf
einem flexibel wählbaren Datenspeicher ab
und ermöglicht das einfache Synchronisieren
und Teilen, ohne auf einen fremdkontrollierten Speicher im Internet angewiesen zu sein.
Mit weltweit mehr als einer Million Nutzern bietet OwnCloud einfach zu bedienende, flexible und erweiterbare Dienste, die die
volle Kontrolle über die eigenen Dateien und
Daten ermöglicht, unabhängig davon, ob die
Dateien und Daten auf eigenem Speicher oder
mit einem Cloud-Speicher verwendet werden.
▶ www.owncloud.org

K

Aktuell
IPDC in Köln

iOS 7 im Mittelpunkt
»Wie viel weniger ist nicht zu viel?« Diese Frage beantwortete Ivo Wessel auf der
IPDC – iPhone Developer Conference in
Köln, die vom 3. bis 4. Dezember 2013
im Barcelo Cologne City Center stattfand.
Rund 100 Teilnehmer lauschten der Keynote des iOS-Profis und starteten so in den
Konferenztag.
Custom UIViewController Transitions
sind eine der großen Neuerungen in iOS
7. Sie ermöglichen es, eigene Animationen
für die Übergänge zwischen zwei ViewControllern zu schreiben. Die APIs sind
sehr abstrakt definiert, um die Implementierung so generisch wie möglich zu halten. Aus diesem Grund referierte Vidu Pi-

rathaparajah zu diesem Thema. Vidu gliederte den Vortrag in zwei Teile: Im ersten Teil wurden die Konzepte und Hintergründe in kompakter Form vorgestellt.
Im zweiten Teil wurden diese dann umgesetzt. Zunächst in simplen Beispielen, anschließend an komplexen Beispielen erläutert. Gleichzeitig erklärte Benno Bartels die Konzeption von Mobile-Shopping-Apps: Glückliche User vom ersten
bis zum letzten Touchpoint. Weitere Themen waren unter anderem »Know you
too! – Xcode in der Praxis« von Karl Bode,
»Parallele Programmierung« von Florian
Kugler oder aber »Testen von iOS-Apps«
von Andreas Oetjen.

Die Keynote »Welche Punkte muss ich
beachten, um meine App zum Erfolg zu
bringen?« von Stephan Gillmeier schloss
den Konferenztag der IPDC.
Am 4. Dezember 2013 folgten die Workshops. Hier konnten sich interessierte Teilnehmer von Ivo Wessel gezielt zum Thema »Migration auf iOS 7« informieren und
schulen lassen. Ein weiteres Thema bei
den Workshops lautete »Modernes Objective-C«. Hier lieferte Amin Negm-Awad
den Teilnehmern interessante Infos.
Die DWX – Developer Week 2014 wird
vom 14. bis 17. Juli 2014 im NCC Ost Nürnberg stattfinden.
▶ http://developer-media.de/events

Accso

Microsoft

Für alle zugänglich

Cloud-OS-Netzwerk

Das Darmstädter Software-Unternehmen
Accso spricht sich deutlich für mehr Barrierefreiheit im Netz aus. Über eine klare Struktur, umsichtiges Design und mit
Hilfe nur weniger HTML-Kniffe könnten auch visuell beeinträchtigte Menschen
problemlos durch Webangebote navigieren.
»Die Forderung nach Barrierefreiheit ist
nicht einfach nur ein gut gemeinter Tipp.
Behörden müssen sich schon aus rechtlichen Gründen mit dem Thema auseinander setzen. Doch auch Betreiber von Websites der Industrie oder Wirtschaft sollten
sich unbedingt im Webdesign mit den Bedürfnissen visuell beeinträchtigter Men-

Microsoft hat gerade sein Cloud-OS-Netzwerk mit derzeit mehr als 25 Cloud-Serviceprovidern rund um den Globus vorgestellt. Die Partner haben sich auf hy­
bride Cloud-Szenarien auf Basis von Microsofts Cloud-Plattform spezialisiert. Sie
setzen dabei auf Windows Server in Verbindung mit Hyper-V, System Center und
dem Windows Azure Pack. Damit wird
Microsofts Vision eines durchgängigen
Cloud OS bestehend aus Kunden-Rechenzentrum, Serviceprovider-Cloud und Pub­
lic Cloud umgesetzt. Der Vorteil für Kunden: Flexibilität und Performance-Gewinn
beispielsweise für Big-Data-Projekte oder
auch bei der Umsetzung ihrer Bring-yourown-Device-Strategien. Ermöglicht wird
dies mit nahtlosen IT-Infrastrukturen,
die unternehmenseigene Rechenzentren
durchgängig mit Microsofts Public Cloud
Windows Azure oder den Cloud-Angeboten der Serviceprovider verbinden.
Unternehmen und Kunden steht durch
das neue Cloud-OS-Netzwerk breitgefächertes Know-how und Expertise zur Verfügung: Die Partner des Cloud-OS-Netzwerks bedienen mehr als 90 verschiedene Märkte weltweit, mit einem Kundenstamm von insgesamt drei Millionen Unternehmen. Sie betreiben insgesamt 2,4
Millionen Server in mehr als 425 Rechenzentren rund um den Globus.
▶ www.microsoft.com

schen näher beschäftigen. Die technischen
Möglichkeiten müssen ausgenutzt werden. Es geht einfach nicht, dass so viele
Menschen aus dem Web ausgeschlossen
werden«, so Thomas Jäger, CTO der Accso GmbH.
Visuell beeinträchtigte Menschen können gleich mehreren Herausforderungen
im Web begegnen. Animierte Texte machen das Lesen beispielsweise unmöglich,
nicht skalierbare Schriftgrößen verhindern
das Erkennen der Inhalte. Der CTO der
Accso GmbH ist trotz aller Anforderungen allerdings überzeugt, dass Barrierefreiheit nicht zu einem platten, unansehnlichen Design führen muss. »Modernität
und Barrierearmut schließen
sich nicht aus, wenn man ein
paar kleine Regeln beachtet.
Wichtig ist zum Beispiel eine
klare Struktur im Vorfeld des
Designs, von der übrigens jeder Website-Besucher profitiert.« Dazu sollen Designer,
Redakteure und Entwickler in den barrierefreien Entwicklungsprozess einbezogen werden. »Es geht immer
darum, einen Schritt weiterzudenken – und bei der Umsetzung Hand in Hand zu arbeiten.«
▶ www.accso.de
Barrierefreiheit: Mehr als nur ein gut gemeinter Tipp

12

2/2014

27
EURO
FÜR KULINARISCHE
GENÜSSE
Sichern Sie sich jetzt die
„web & mobile developer“, das
Fachmagazin für Web- und MobileEntwickler, und profitieren Sie von
aktuellstem Praxiswissen rund um
Tools, Techniken, Sprachen und
Frameworks.
„web & mobile developer“ erscheint
zwölf Mal pro Jahr.
Holen Sie sich jetzt das
„web & mobile developer“Jahresabonnement. Sie sparen damit
27 Euro gegenüber dem Kauf am Kiosk
und erhalten vollen Zugriff auf die
aktuelle Ausgabe auf Ihrem iPad!
Also gleich abonnieren und
dann auf zum Japaner!

Jetzt
inkl. iPa
Ausgabed!

www.webundmobile.de/abo

Feature

Data Binding in Web-Apps mit dem Knockout-Framework

Data Binding

Die JavaScript-Bibliothek Knockout.js implementiert das Entwurfsmuster Model-View-ViewModel (MVVM) für
HTML und ermöglicht damit eine Datenbindung zwischen HTML und JavaScript. Von Tam Hanna
Autor

Tam Hanna
ist Autor, Trainer und Berater mit
den Schwerpunkten Webent­
wicklung und Webtechnologien.
Er bloggt sporadisch unter:
▶ www.tamoggemon.com
Inhalt
Data Binding in Web-Apps mit
dem Knockout-Framework.

14

E

s stellt sich im Rahmen der Applikationsentwicklung die Frage, wie das Benutzer-Interface am effektivsten mit dem Rest des Programms verbunden werden kann. Traditionell
kamen oft Wedge-Klassen zum Einsatz, die eine Maklerfunktion zwischen den Programmelementen einnahmen. Dieser Struktur entsprechende Architekturen bezeichnet der Experte
angesichts der enthaltenen Komponenten als
Model-View-Controller-Pattern.
Nutzdaten finden sich beim Implementieren
einer nach dem in Bild 1 gezeigten Schema aufgebauten Applikation im Modell. Die View handhabt die Anzeige der Daten und das Entgegennehmen der Benutzereingaben, im Controller
erfolgen der Austausch und die Umsetzung der
Orders. In der Praxis gibt es immer wieder kleinere Unterschiede im Bereich der Rolle des Controllers.
Die Windows Presentation Foundation brachte der Welt eine neue Art der Erstellung von Benutzerschnittstellen. In XAML gehaltene GUIs
verbanden sich auf Wunsch automatisch mit

Properties, die in der im Code Behind erstellten Handler-Klasse exponiert wurden. Auf diese
Art und Weise entsteht eine perfekte Trennung
zwischen Logik und Präsentation – der Austausch der Daten erfolgt automatisiert.
Microsoft spezifizierte ein neues, als ­MVVM
gezeigtes Pattern. Es besteht wie sein historischer Vorgänger aus drei Komponenten, die
aber – wie in Bild 2 gezeigt – auf andere Bezeichnungen hören. In der View eines MVVM-Programms findet sich nur der Code, der sich nicht

Die klassische Model-View-Controller-Architektur
(Bild 1)
2/2014

Feature
durch Datenbindungs-Strings ausdrücken lässt.
Das ViewModel hat die Aufgabe, die vom Benutzer eingehenden Interaktionen auszuwerten
und die eingehenden Daten an die in der View
vorliegenden Gegebenheiten anzupassen.
Die Trennung zwischen Model und ViewModel ist nicht hundertprozentig streng. Microsoft empfiehlt in der Dokumentation, alle optischen Angelegenheiten, die später noch verändert werden, in die View zu platzieren. Im View­
Model landen all jene Funktionen, die für die
Aktualisierung der in der View angezeigten Informationen notwendig sind.
Zu guter Letzt gibt es auch hier eine Modellklasse. Diese hat keinerlei Referenzen auf View
oder ViewModel, und ist ausschließlich für Datenhaltung und das Management der Nutzdaten
verantwortlich. Wichtig ist, dass alle drei Klassen voneinander unabhängig testbar sein müssen. Interdependanzen zwischen den diversen
Programmmodulen sind unerwünscht. Trotz
der rigiden und unter http://msdn.microsoft.
com/en-us/library/gg405484(v=pandp.40).aspx
einsehbaren Spezifikation ist in der Praxis nur
eines wichtig: Der Code der Engine enthält keine Verweise auf das GUI.

MVVM trifft JavaScript
Durch die immer weiter reichende Verbreitung
von XAML gewann das bisher nur in universitären Kreisen bekannte Data Binding die Aufmerksamkeit vieler Entwickler. Unter Windows mit der Vorgehensweise vertraut gewordene Programmierer wollten diese Technik auch
auf anderen Plattformen nutzen, weshalb eine
Gruppe von MVVM-Bibliotheken für diverse
andere Systeme entstand.
Nüchtern
betrachtet
sind Data-Binding-Engines vergleichsweise primitiv. Die Produkte reagieren auf Änderungen
einer Property, indem sie
das der Eigenschaft zugewiesene Steuerelement in
der Benutzerschnittstelle
aktualisieren. Wenn der
Benutzer mit dem GUI interagiert, so muss der dazugehörende Wert in der
Programmlogik aktualisiert werden.
In JavaScript lässt sich
das Aktualisieren der Benutzerschnittstelle
ohne große Probleme abfangen, da die meisten
Steuer­
elemente im Rahmen der Interaktion di2/2014

Listing 1: HTML-Korpus
<html>
<head><title>NMG-Beispiel 1</title></head>
<body>
<button type="button" onclick="create()">Erstellen</button>
<button type="button" onclick="changePage()">Seite wechseln
</button> <br>
...
...
<div data-bind="visible: isPage1">
<span><h1>Formular 1</h1></span>
Das ist die erste Seite unserer Multipage-Anwendung.
Platzieren Sie wichtige Steuerelemente hier...
</div>
<div data-bind="visible: isPage2">
<span><h1>Formular 2</h1></span>
Auch die zweite Seite bietet jede Menge Platz für Inhalte...
</div>
<div data-bind="visible: isPage3">
<span><h1>Formular 3</h1></span>
Das gilt auch für Seite Nummer drei!
</div>
</body>
</html>

verse Signale emittieren. Die eigentliche Schwierigkeit liegt darin, die Änderungen in Variablen zu erkennen: Variablen-Änderungs-Notifications sind in JavaScript nicht vorgesehen.
Knockout löst dieses Problem durch die Einführung einer Gruppe von Facaden-Klassen, die
die Datenhaltung und deren Aktualisierung automatisieren. Damit fehlt eigentlich nur mehr eine einfache Engine, die die eingehenden Ereignisse weiterverarbeitet.
Nach diesen einführenden Bemerkungen ist
es an der Zeit, ein erstes Programm auf Basis
von Knockout zu realisieren. Anstelle des ▶

Das MVVM-Pattern unterscheidet sich von MVC durch das
Fehlen des Controllers (Bild 2)

15

Feature
Umstieg
Der Umstieg auf eine neue Version des Knockout-Frameworks
führt normalerweise nicht zu
großem Programmieraufwand.
Am wichtigsten ist, dass Knockout 3.0 beim Aufrufen der Changed-Handler weitaus schonender vorgeht: Die von einem Computed Observable abhängigen
Elemente werden nur mehr dann
aktualisiert, wenn sich das Resultat der Evaluation ändert. Bei
Elementen mit mehreren Bindungen aktualisiert sich ebenfalls nur mehr die, die auch geändert wurde.
Nutzer von optionsCaption
mussten eingehende Strings
bisher von Hand encodieren,
um HTML-Injections zu vermeiden. Dieses Verhalten ist ab sofort von Haus aus implementiert – entfernen Sie eventuell
in Ihrem Produkt enthaltene Encodierungen vor dem Versionssprung.

normalerweise verwendeten leeren Beispiels
mit der Textbox wollen wir diesmal eine Single-­
Page-Anwendung realisieren.
Ihr HTML-Korpus besteht aus drei Gruppen
von Steuerelementen. Als Erstes erstellen wir einige Steuerelemente, die für das Ein- und Ausschalten der gerade aktiven Seite und das Laden des Frameworks zuständig sind, darunter
folgen dann die eigentlichen Seiten (Listing 1).
Auf den ersten Blick handelt es sich hierbei
um eine normale HTML-Datei, die drei <div>Tags mit verschiedenen Steuerelementen enthält. Der einzige sofort sichtbare Unterschied
sind die drei data-bind-Attribute, die im HTMLStandard nicht vorgesehen sind.
Sie weisen die Knockout-Engine auf die Datenbeziehungen zwischen dem jeweiligen Element und dem für seine Regelung zuständigen
Feld in der Engine hin. Diese muss vor der Verwendung erstellt werden. Das ist die Rolle der
create()-Methode, deren Quellcode so aussieht:
<script type="text/javascript"

Nach dem Laden erscheinen alle drei Seiten am
Bildschirm (Bild 3)

Das Aktivieren von Knockout sorgt dafür, dass nur die
erste Page sichtbar ist (Bild 4)

src="knockout-3.0.0.debug.js">
</script>
<script type="text/javascript">
function create() {
window.myDataModel =
new NMGDataModel();
ko.applyBindings(window.myDataModel);
}

An dieser Stelle findet sich keine Raketenphysik. ChangePage analysiert den momentanen Zustand des Modells und aktualisiert die Flags je
nach Bedarf. Ein ideales Data-Binding-System
wäre damit einsatzbereit – ein Klick auf ChangePage würde ausreichen, um zwischen den drei
Seiten der Anwendung zu wechseln.

</script>

Die in diesem Artikel erstellten Beispiele nutzen die neue Version 3.0 des Frameworks. Diese
steht bisher noch nicht auf den üblichen Content
Delivery Networks bereit, weshalb die DebugEdition im Beispielarchiv beiliegt und durch ein
script-Tag eingebunden wird.
Create() erstellt eine Instanz des Datenmodells. Danach folgt ein Aufruf der FrameworkMethode applyBindings(). Diese hat die Aufgabe,
Knockout zu initialisieren und mit den diversen
Steuerelementen zu verbinden.
Beim Erstellen der Modellklasse greifen wir
auf das klassische Prototyp-Pattern zurück. Die
aus Bequemlichkeitsgründen als Teil der HTML-Datei angelegte Klasse sieht so aus:
function NMGDataModel() {
this.isPage1 = true;
this.isPage2 = false;
this.isPage3 = false;
}

Die einfachste Form eines Datenmodells besteht
nur aus einer Gruppe von Variablen. Das Framework wertet ihre Werte während der Initialisierung aus. Damit fehlt nur mehr die changePageMethode. Ihren Korpus zeigt Listing 2.

16

Konzept des Observables
Wenn Sie die soeben erstellte Seite in einem beliebigen Browser laden, so erscheinen nur die
auf Seite eins befindlichen Steuerelemente am
Bildschirm. Das Anklicken des Buttons führt
zu einer Änderung der Variablen, die sich aber
nicht auf das eigentliche Formular auswirkt
(Bild 3 und Bild 4).
Dieser Zustand entsteht, da JavaScript keine
einfache Methode zum Erkennen von Zustandsänderungen in Variablen anbietet.
Zur Umgehung dieses Problems bietet Knockout das Konzept des Observables an. Dabei handelt es sich um eine spezielle Speicherklasse, die
mehr oder minder beliebige Daten vorhält. Das
Schreiben und das Lesen der in einem Observable enthaltenen Informationen verlangt das Aufrufen von speziellen Methoden, die dem Framework die Beobachtung des Datenflusses durch
das Modell und das Benutzer-Interface erleichtern.
Der erste Schritt zur Adaptierung des Programms besteht darin, das Datenmodell auf die
Verwendung von Observables umzustellen:
function NMGDataModel() {
this.isPage1 = ko.observable(true);

2/2014

Feature
this.isPage2 =
ko.observable(false);
this.isPage3 =
ko.observable(false);
}

ko.observable handhabt die Generierung einer Instanz der observableKlasse. Der an die Funktion übergebene Wert wird in die Variable geschrieben, um das manuelle Initialisieren der Datenspeicher überflüssig
zu machen.
Das Resultat der obigen Routine ist in Bild 5
gezeigt. Das Datenmodell besteht fortan nicht
mehr aus Variablen, sondern aus Objekten.
Das im vorhergehenden Beispiel praktizierte direkte Überschreiben würde diese Objekte durch Wertinstanzen ersetzen. Aus diesem
Grund implementiert jedes Observable die zwei
in der neuen Variante von changePage verwendeten Funktionen, die das Auslesen und Setzen der
Inhalte ermöglichen.
Theoretisch wäre es möglich, den Zugriff auf
die im Observable enthaltenen Daten über Getter und Setter zu erledigen. Leider funktioniert
dieses Sprachfeature in älteren Versionen des Internet Explorers nicht, weshalb die hier gezeigte Vorgehensweise auf absehbare Zeit als Goldstandard erhalten bleibt.

Digitaler Selbstbedienungsladen
Bisher interagierte der Benutzer mit der Seitenauswahl nur, indem er einen der Buttons anklickte. In der Praxis bekommen Sie es als Entwickler immer wieder mit anderen Widgets zu
tun. Das klassischste Beispiel dafür wäre eine
Textbox.
Erfreulicherweise kommt Knockout auch
hiermit ohne allzu große Probleme zurecht. Der
Inhalt einer Textbox lässt sich ohne Weiteres
in eine Variable spiegeln, wo er für beliebige
String-Verarbeitungsroutinen bereitsteht.
Zur Einbindung der Textbox ist das folgende
HTML-Snippet erforderlich:

schon von den booleschen Observables bekannte Aufruf von ko.observable zum Einsatz:
function NMGDataModel()
{
this.myTextBox = ko.observable("1");
this.isPage1 = ko.observable
(true);
this.isPage2 = ko.observable
(false);
this.isPage3 = ko.observable
(false);
}

Hierzu noch ein kleiner Hinweis. Eine ähnliche
Eigenschaft lässt sich zum Realisieren von Labels einsetzen, die einen oder mehrere in der
Engine vorgehaltenen Werte anzeigen. Die dazu notwendige Vorgehensweise ist im folgenden Snippet ­illustriert:
<table>
<tr>
<th>Fuel
weight:</th>
<td><span databind="text:
fweight">
</td></tr>
<tr>
<th>Engine
weight:</th>
<td><span databind="text:

<p>Aktive Seite: <input
data-bind="value: myTextBox" /></p>

eweight">
</span></td></tr>
<tr>

An dieser Stelle ist der neue Binding-String interessant. Anstatt wie bisher auf visible zu verweisen, zeigt er fortan auf die Eigenschaft value. Das bedeutet, dass der Inhalt der Textbox
automatisch in die angewiesene Variable wandert. Diese können wir danach auf mehrere Arten weiterverarbeiten.
Im Modell erstellen wir ein neues Observable. Da die Objekte Variants enthalten (und da JavaScript nicht streng typisiert ist), kommt der
2/2014

Knockout-Datenmodelle
bestehen aus Gruppen von
Funktionen (Bild 5)

<th>Thrust:
</th>
<td><span databind="text:
thrust">
</td></tr></table>

Im Zusammenspiel mit
einem passenden Modell realisiert diese ▶

Listing 2: Funktion changePage()
function changePage()
{
if (window.myModel.isPage1() == true)
{
myWindow.myModel.isPage1(false);
myWindow.myModel.isPage2(true);
myWindow.myModel.isPage3(false);
}
else if (window.myModel.isPage2() ==
true)
{
myWindow.myModel.isPage1(false);
myWindow.myModel.isPage2(false);
myWindow.myModel.isPage3(true);
}
else if (window.myModel.isPage3() ==
true)
{
myWindow.myModel.isPage1(true);
myWindow.myModel.isPage2(false);
myWindow.myModel.isPage3(false);
}
}

17

Feature
Seite eine Tabelle, die die drei Modelleigenschaften fweight, eweight und ­thrust in ihren <td>-Tags
ausgibt. So diese als Observables rea­lisiert sind,
würden Änderungen im Datenmodell automatisch in die Tabelle wandern.

Auf Änderungen reagieren
Wenn Sie die soeben erstellte Seite in einem Debugger laden, so aktualisiert sich der im Observable gespeicherte Wert nach jeder Änderung
der Textbox. Leider hat das noch keinen Einfluss auf die angezeigten Seiten – unser Programm wird über die Änderungen im Observable nicht informiert.
Erfreulicherweise lässt sich die von Knockout
implementierte Logik um eigene Event Handler ergänzen. Diese informieren auf Wunsch sogar über aktuelle und vergangene Änderungen.
Unser Modell wird fortan auf folgende Weise
initialisiert:
function NMGDataModel()
{
this.myTextBox = ko.observable("1");
var subscription = this.myTextBox.
subscribe(function (newVal) { });
var subscriptionBefore =
this.myTextBox.

Listing 3: Subscribe
function NMGDataModel()
{
this.myTextBox = ko.observable("1");
var subscription = this.myTextBox.
subscribe(function (newVal)
{
if (newVal == 1)
{
window.myDataModel.isPage1(true);
window.myDataModel.isPage2(false);
window.myDataModel.isPage3(false);
}
else if (newVal == 2)
{
window.myDataModel.isPage1(false);
window.myDataModel.isPage2(true);
window.myDataModel.isPage3(false);
}
else if (newVal == 3) {
window.myDataModel.isPage1(false);
window.myDataModel.isPage2(false);
window.myDataModel.isPage3(true);
}
});
var subscriptionBefore =
this.myTextBox.subscribe(function
(oldVal) { }, this, "beforeChange");
this.isPage1 = ko.observable(true);
this.isPage2 = ko.observable(false);
this.isPage3 = ko.observable(false);
}

18

subscribe(function
(oldVal) { }, this,
"beforeChange");

Bindungen lassen sich durch
das Aufrufen der subscribe()Methode eines beliebigen Observable herstellen.
Wenn Sie über Änderungen
des Wertes informiert werden möchten, so brauchen
Sie nur die subscribe()-Methode aufzurufen.
Falls Sie Informationen
über den Wert vor der Änderung begehren, so müssen
Sie sich für das beforeChangeEreignis anmelden. In diesem Fall ist ein zweiter Parameter notwendig, der Informationen über den thisKontext enthält. Wenn die
als Parameter übergebene
Funktion ausgeführt wird,
zeigt this auf den hier übergebenen Wert.
Die Variablen subscription
und subscriptionBefore enthalten Subscription-Handler. Dabei handelt es sich um
spezielle Objekte, die Ihnen

das Lösen der Bindung zur Laufzeit erlauben –
rufen Sie einfach die dispose-Methode auf.
Damit können wir zur Implementierung der
Logik schreiten. Diese wandert aus Bequemlichkeitsgründen direkt in den Aufruf von subscribe (Listing 3).
Von Haus aus ruft Knockout die diversen
Event Handler nur dann auf, wenn der im Observable befindliche Wert geändert wird. Das
abermalige Einschreiben der schon im Objekt
befindlichen Informationen führt zu keiner Aktualisierung.
Wenn Sie dieses Verhalten aus irgendwelchen Gründen als unakzeptabel empfinden, so
weisen Sie das Observable zum Immer-Versenden von Notifications an. Der dazu notwendige
Code sieht so aus:
myViewModel.personName.extend({
notify: 'always' });

Unsere von Hand aktualisierte Version der Tabelle funktioniert so weit gut: Ändert sich der
Wert der Textbox, so folgt dank unserer Update-Routine eine Aktualisierung der aktiven
Seite. Leider ist auch das nicht der Weisheit
letzter Schluss. Die für die Beziehung zwischen
den Werten zuständige Logik sitzt außerhalb
des Frameworks. Es wäre weitaus intelligenter,
das Aufrufen der Aktualisierungsmethoden an
Knockout zu delegieren.
Diese Optimierung lässt sich durch das Verwenden von Computed Observables realisieren.
Dabei handelt es sich um eine spezielle Abart
des Observables, die sich bei Änderungen der
zugrunde liegenden Werte selbst aktualisiert. In
unserem Fall müssen wir die drei Seiten-Observables durch Computed Observables ersetzen.
Den dazu nötigen Code zeigt Listing 3.
Ein Computed Observable besteht aus einer
Funktion, die zur Ermittlung des zurückzugebenden Wertes eingesetzt wird. Der von ihr retournierte Wert dient als Ergebnis, das in die
Steuerelemente geschrieben wird. ko.observable
verlangt zwei Parameter: Der erste ist ein Zeiger auf diese Funktion. Der zweite Parameter
legt fest, worauf der this-Kontext im Rahmen
der Ausführung des Programmbeispiels zeigen
muss.
Leider funktioniert dieses Beispiel nicht – laden Sie es im Browser, um die in Bild 6 gezeigte
Fehlermeldung zu erhalten.
Der Grund für dieses seltsame Verhalten liegt
darin, dass ko.computed die Funktion sofort nach
dem Erstellen des Objekts aufruft. In unserem
Fall ist myTextBox zu diesem Zeitpunkt noch
nicht initialisiert, was zu einem Fehler führt.
Die korrigierte Version der Routine initialisiert alle normalen Observables, bevor die Deklaration der Computed Observables folgt. Auf
2/2014

Feature
diese Art und Weise führt die
Abarbeitung der Compute-Methoden nicht zu Problemen (Listing 4). Damit ist auch dieses Beispiel einsatzbereit. Ändern Sie
den Inhalt der Textbox, um die
aktive Seite zu wechseln.

Eingaben verifizieren
Damit bleibt nur noch eine Frage offen: Was passiert, wenn der
User aus Versehen (oder in böser Absicht) ungültige Daten eingibt?
Bei intelligenter Nutzung lässt sich Knockout
sogar zum Anzeigen einer Warnung benutzen.
Dazu genügt es, den Binding-String der TextBox
nach folgendem Schema anzupassen:
<button type="button"
onclick="create()">Erstellen
</button> <button type="button"
onclick="changePage()">Seite
wechseln</button> <br>
<p>Aktive Seite: <input
data-bind="value: myTextBox, style: {
backgroundColor: isOk}" /></p>
<div data-bind="visible: isPage1">
<span><h1>Formular 1</h1></span>
...

Knockout erlaubt Ihnen das Festlegen von mehreren Bindungen in einem Element. Trennen Sie
die Bindungs-Strings einfach durch Kommas.
Eine style-Bindung erlaubt Ihnen, das Element
mit weiteren CSS-Stilen zu versehen. Wir binden
die Hintergrundfarbe an die Eigenschaft isOk.
CSS-Kenner wundern sich eventuell über den
fehlenden Bindestrich zwischen background und
Color. Das liegt daran, dass der Zugriff auf einige Eigenschaften über spezielle Codewörter erfolgen muss. Diese sind unter www.comptech
doc.org/independent/web/cgi/javamanual/java
style.html aufgelistet. Auf der Codeseite sieht
das Modell so aus:

Das Laden des Formulars scheitert
mit einem seltsamen Fehler (Bild 6)
Tausende Applikationen beweisen, dass
Knockout problemlos funktioniert. Die rund 20
KByte große Bibliothek ist im Internet weit verbreitet. Computed Observables aktualisieren
sich automatisch, wenn sich die ihnen zugrunde liegenden Werte ändern. Die Erkennung der
Abhängigkeiten erfolgt in einem vergleichsweise komplexen Verfahren, das wir hier aus Verständnisgründen ansehen wollen.
Alle Aktualisierungen erfolgen über einen
Dependency Graph. Dieser englische Fachbegriff beschreibt eine in jedem Observable vorgehaltene Datenstruktur, die eine Liste aller auf
eine Änderung des dort gespeicherten Werts reagierenden Elemente enthält.
Die Erstellung dieses Baums erfolgt während
der Laufzeit durch die Analyse der Aufrufe: Jedes von ­einem Runnable abgefragte Observable wird zu seinem Dependency Graph hinzugefügt. Dieses auf den ersten Blick verblüffend einListing 4: Ko.computed
fach klingende Verfahren funktioniert in der Prafunction NMGDataModel()
xis sehr gut. Die folgende
{
this.isPage1 =
­Pseudocode-Routine
deko.computed(function ()
monstriert die Korrektheit:
{

if(this.myTextBox()==1)

observable a, b c

return true;

computed observable vo

else
return false;

if (a==true)

}, this);

return b;

this.isPage2 =
ko.computed(function ()

else
return c;

{
if (this.myTextBox() == 2)

this.isOk = ko.computed(function () {
if (this.myTextBox() == 1)
return 'green';
else if (this.myTextBox() == 2)
return 'green';
else if (this.myTextBox() == 3)
return 'green';
else
return 'red';
}, this);

Ist der Inhalt der Textbox legal, wird ihr Hinter­
grund grün eingefärbt. Die Eingabe eines bösartigen Inhalts führt zu einem roten Hintergrund.
2/2014

Am Beginn jedes Durchlaufs löscht Knockout vo aus
allen
Abhängigkeitsbäumen. Jeder Aufruf eines Observables führt sodann zur
Eintragung von vo in den
Dependency Graph des jeweiligen Objekts.
Wenn a true ist, wird vo
von Knockout als von a und
b abhängig betrachtet. Änderungen von c sind irrelevant, da sie vom Programm
nur dann behandelt ▶

return true;
else
return false;
}, this);
this.isPage3 =
ko.computed(function ()
{
if (this.myTextBox() == 3)
return true;
else
return false;
}, this);
this.myTextBox = ko.observable("1");
}

19

Feature
in Feindeshand
Die hier gezeigte Eingabeverifikation auf Basis von Knockout
führt zu attraktiv aussehenden
Warnmeldungen, kann und darf
aber eine Überprüfung der Eingangsdaten auf Serverseite keinesfalls ersetzen.
Knockout-Applikationen liegen
auf dem Rechner des Angreifers
und lassen sich somit nach Belieben verändern. Eine Grundregel im IT-Bereich besagt, dass
die Verifikation von Eingaben immer auf einem für Außenstehende nicht offenstehenden System erfolgen sollte – das Missachten dieses logischen Grundsatzes ist eine Einladung für jeden Hacker.

werden, wenn a auf false steht. Eine Änderung
des Wertes von a führt stets zu einer Neuevaluation: Steht der Bitschalter dann auf false, so ist
vo in Zukunft von a und c abhängig.
Wichtig ist, dass Knockout keine zirkuklären
Bindungen erlaubt. Ist der Wert eines Observables irgendwie von sich selbst abhängig, so scheitert die Evaluierung mit einer Fehlermeldung.
Die in manchen mathematischen Programmen
implementierten
Approximationsmethoden
sind in Knockout nicht vorhanden.

Änderungen an Arrays beobachten
ObservableArrays erlauben Ihnen, Ihre Inhalte an Steuerelemente zu binden. Ändert sich die
Zusammensetzung des Arrays, so wird die Benutzerschnittstelle aktualisiert. Änderungen an
den einzelnen im Array gespeicherten Werten
lösen keine Aktualisierungen aus.
Zum Erstellen eines Observable Arrays genügt es, die Funktion ko.observableArray aufzurufen. Auf Wunsch übernimmt sie – wie im folgenden Beispiel gezeigt – auch gleich eine Gruppe von Bindungszielen:
function NMGDataModel() {
this.myObsArray =
ko.observableArray([

<td data-bind="text: name"></td>
</tr>
</tbody>
</table>

Die Funktion einer foreach-Bindung ist relativ einfach: Zur Laufzeit kopiert Knockout die
DOM-Kinder des Eintrags. Jedes Element des
Arrays bekommt seine eigene Kopie, die danach
mit den gebundenen Eigenschaften bevölkert
wird. Theoretisch könnten Sie die einzelnen Objekte mit Observables ausstatten – in der Praxis
werden derartige Tabellen meist nur zur Anzeige des Inhalts eines Arrays verwendet.
Die tbody-Tags sind von eminenter Bedeutung.
Wenn Sie diese aus irgendeinem Grund vergessen, so erkennt Knockout die Tabelle nicht. Beim
Aufbauen der Data-Binding-Beziehungen wird
in diesem Fall kein Fehler ausgeworfen, was die
Isolation des Problems erschwert.
Knockout 3.0 führt die im Rahmen der Verwaltung der Elemente entstehenden Ereignisse
nach außen, wo sie von beliebigen Event Handlern weiterverarbeitet werden können.
Da die Dokumentation dieses Features im
Moment noch nicht komplett ist, wollen wir hier
einige Versuche wagen. Dazu erweitern wir unser soeben erstelltes Array-Beispiel um die folgende Passage:

{ name: 'A' },
{ name: 'B' },

function NMGDataModel()

{ name: 'C' }

{

]);

this.myObsArray =

}

ko.observableArray([
{ name: 'A' },

Im HTML-Markup sind einige Besonderheiten
zu beachten. Auf den ersten Blick erscheint das
folgende Codesnippet logisch:

{ name: 'B' },
{ name: 'C' }
]);
this.myObsArray.subscribe(function
(delta) {

<table>

console.log(delta);

<tbody >

}, null, "arrayChange");

<tr data-bind="foreach:
myObsArray">

}

<td data-bind="text: name"></td>
</tr>
</tbody>
</table>

Nach der Aktivierung des Frameworks wächst
die Tabelle nach links. Das liegt daran, dass der
foreach-Tag das innere <td> multipliziert hat. In
der Regel ist dieses Verhalten unerwünscht: normalerweise wachsen Tabellen nach unten.
Korrekt funktioniert das Programm nur dann,
wenn die Anordnung wie folgt aussieht:
<table>

Durch den Aufruf von subscribe sorgen wir dafür, dass jede Änderung an der Zusammensetzung des Arrays an die inline deklarierte Funktion weiterwandert. Diese wirft das übergebene
Objekt mit Zustandsinformationen in die Konsole aus.
Im nächsten Schritt müssen wir unser Array
mit den diversen Bearbeitungsfunktionen malträtieren, um Reaktionen zu provozieren. Obser­
vable Arrays enthalten exakte Duplizierungen
von vielen JavaScript-Array-Bearbeitungsmethoden. Als Erstes wollen wir ein neues Element
einpflegen. Der dazu nötige Code sieht so aus:

<tbody data-bind="foreach:
myObsArray">
<tr>

20

function add() {
window.myDataModel.myObsArray.push({

2/2014

Feature
name: 'Neu' });
}

In der JavaScript-Konsole entstehen die folgenden Ausgaben:
[Object]
0: Object
index: 3
status: "added"

Knockout ist auch zum Entfernen von Elementen befähigt. In diesem Fall sieht die HandlerFunktion so aus:
function del() {
window.myDataModel.myObsArray.pop();
}

Auf der Konsole tritt das Ereignis ebenfalls in
Erscheinung:
[Object]
0: Object
index: 2
status: "deleted"

Die Lösung für eine Verschiebung im Array ist
besonders interessant. Als Trigger soll diesmal
der folgende Code dienen, der den Stapelspeicher in sich selbst umdreht:
function shuffle() {
window.myDataModel.myObsArray.
reverse();
}

Auf der Konsole erhalten Sie folgendes:
[Object, Object, Object, Object]
0: Object
index: 0
moved: 2
status: "deleted"
1: Object
index: 0
moved: 2
status: "added"

Ereignisse und liest die eingehenden Informationen als Löschen und Neu-Einpflegen der
diversen Elemente. Komplexere Algorithmen erkennen das
gesetzte moved-Bit und korrelieren so die Verschiebung des
Elements – die beiden Notifications kommen normalerweise unmittelbar hintereinander.
Die meisten der in Knockout 3 implementierten Ereignisse beeindrucken zur Laufzeit mit einer Komplexität von
O(1). Das liegt daran, dass die
Ereignisse direkt an der Datenklasse abgegriffen werden. Die
in früheren Versionen notwendige Analyse der Inhalte ist ab
sofort nicht mehr notwendig.

Unter Windows Phone 7 gibt es einige kleinere
Fehler (Bild 7)

Windows Phone 8 ist voll kompatibel (Bild 8)

Plattformen
Moderne JavaScript-Anwendungen müssen auf einer Vielzahl verschiedener Browser­
Engines laufen. Die Entwickler
versprechen auf der Webseite
des Produkts Unterstützung
für die folgenden Plattformen:
Firefox OS spricht Knockout (Bild 9)
■ Internet Explorer ab v6,
■ Firefox ab v2,
■ Google Chrome ab v5,
■ Opera ab v10,
■ Safari für Windows ab v5,
■ Safari für Mac OS ab v3.1.2,
■ Safari für iOS ab v4.
Zum Testen der diversen Browser empfiehlt sich die Verwendung der auf Jasmine basierenden Testsuite. Diese lässt sich
BlackBerry 10 – hier in Form einer Dev Alpha – kommt
durch das Öffnen der Webseimit der Bibliothek zurecht (Bild 10)
te http://knockoutjs.com/spec/
runner.html aktivieren. Im Idealfall laufen alle Tests problemlos durch. Der
Autor testete das Framework auf einigen im
Unternehmen befindlichen Handcomputern.
Die Resultate der Tests zeigen Bild 7 bis Bild 10.

2: Object
index: 2
moved: 0
status: "deleted"
3: Object
index: 2
moved: 0
status: "added"

Zur Vereinfachung der Implementierung können Sie die Meldungen auf zwei Arten auswerten. Die primitive Logik ignoriert alle moved2/2014

Fazit
Den Entwicklern von Knockout gelingt ein Spagat: Das Framework bietet eine immense Vielzahl von Funktionen, ohne jedoch dabei für
Quereinsteiger unzugänglich zu sein. Dank des
einfachen Aufbaus ist Data Binding auch für
kleinste Anwendungen sinnvoll einsetzbar. Die
Programmierer verzichten konsequent darauf,
ihren Benutzern eine rigide Applikationstuktur
vorzuschreiben.
[mb]

21

Feature
Marionette.js

Mehr Struktur für Backbone.js
Marionette.js ist ein beliebtes Zusatzmodul für Backbone.js. Es soll der Bibliothek für Single-Page-Web-Apps
mehr Struktur und Wiederverwendbarkeit verleihen. Von Jochen H. Schmidt

Autor

Jochen H. Schmidt
ist Autor, Berater und SoftwareEntwickler mit den Schwerpunkten Webentwicklung und Webtechnologien.
Inhalt
Marionette.js.
Ressourcen
Die Listings zum Artikel finden
Sie auf www.webundmobile.de
in der Rubrik Aktuelles Heft.

B

ackbone.js hat sich zu einer der beliebtesten
Bibliotheken für Single-Page-Webanwendungen im Webbrowser entwickelt. Der »not
opinionated-Ansatz« gilt dabei als einer der entscheidenden Gründe für diesen Erfolg. Damit
ist gemeint, dass wenig vorgeschrieben wird,
wie und mit welchen Mitteln etwas implementiert werden soll. Der Vorteil: Man kann Backbone sehr flexibel auf die spezifischen Bedürfnisse der eigenen Projekte zurechtschneiden.
Doch dieser Ansatz birgt auch Nachteile: Der
Entwickler trägt eine größere Verantwortung,
auf saubere Strukturen und gute Wiederverwendung zu achten. Umfassende Frameworks
mit Fertiglösungen für nahezu jeden Zweck sind
zwar unflexibel, aber auch durch unerfahrene
Entwickler gut benutzbar.

Don’t repeat yourself
Spätestens seit Andy Hunts und Dave Thomas’
Buch »Der pragmatische Programmierer« ist
das Motto »Wiederhole dich nicht« zu e­ inem
Grundsatz für viele Entwickler geworden. In
undiszipliniert entstehenden Backbone-Projek­
ten kann man beobachten, dass immer wieder
niedergeschrieben
dieselben Dinge im Code ­
werden. Gute Entwickler erkennen das Pro­
blem und schaffen die nötigen Abstraktionen.
Ohne Abstraktion entwickeln sich unterschiedliche Varianten des immer gleichen Grundmusters in der ganzen Codebasis. Ein und derselbe
Bug kann so an mehrfacher Stelle auftreten und
es ist nicht trivial, alle Codestellen ausfindig zu

machen. Statt selbst nach den nötigen Abstraktionen zu suchen, kann man sich jedoch auch auf
den reichen Erfahrungsschatz anderer Entwickler stützen. Hier kommt Marionette.js ins Spiel.

Vorarbeit: Module mit RequireJS
Auf der Website des Projekts (Bild 1) gibt es unter der Überschrift »Pre-packaged« ein Archiv,
das Marionette und sämtliche notwendigen Abhängigkeiten enthält. Im Archiv befinden sich
sowohl die herkömmlichen Versionen als auch
spezielle Varianten, die bereits als AMD-Module angepasst wurden. Ich erstelle einen Ordner
für das Demo-Projekt und einen Unterordner js
für alle JavaScript-Dateien. In diesen Ordner kopiere ich folgende Dateien:
■ backbone.js,
■ backbone.wreqr.js,
■ backbone.babysitter.js,
■ jquery.js,
■ json2.js,
■ underscore.js,
■ core/amd/backbone.marionette.js.
Einer der großen Vorteile von RequireJS und
AMD-Modulen ist, dass man für neue Java­
Script-Dateien keine Anpassungen im HTML
vornehmen muss. Statt also ein script-Tag an der
hoffentlich passenden Stelle im HTML-Code zu
platzieren, genügt es bei einem AMD-Modul,
einfach die JavaScript-Datei im Skript-Ordner
zu platzieren. Alle Skripts, die dieses Modul benötigen, werden in den jeweiligen Modulabhängigkeiten genannt. Die HTML-Datei sieht dann
lediglich so aus:
<!DOCTYPE html>
<html>
<head>
<title>Marionette / RequireJS Demo
</title>
<script data-main="js/main.js"
src="js/require.js"></script>
</head>
<body>
</body>
</html>

Die Marionette.jsWebsite (Bild 1)

22

Das script-Tag lädt die JavaScript-Datei require.js.
Diese ermittelt anhand des Attributs data-main
2/2014

Feature
im script-Tag den Startpunkt für die AMD-Module – die Datei main.js (Listing 1).
Der erste Ausdruck konfiguriert RequireJS:
Nur die Dateien backbone.marionette.js und jquery sind als richtige AMD-Module ausgelegt; ­alle
anderen sind herkömmliche JavaScript-Dateien, die eigentlich über script-Tags eingebunden
werden müssten. Eine Möglichkeit wäre, diese
Dateien als AMD-Module umzuschreiben. Das
ist allerdings bei Fremdbibliotheken keine gute
Idee, weil man sonst nach jeder neu verfügbaren
Version erneut Konvertierungsaufwände hat.
RequireJS bietet jedoch eine Lösung an: Shims.
Die Abhängigkeitsinformation der JavaScriptDateien wird damit außerhalb der Dateien gepflegt. In der Shim-Konfiguration werden die
Namen der jeweiligen JavaScript-Dateien (ohne
.js) genannt und jeweils die Abhängigkeiten mit
deps verzeichnet. So weiß RequireJS, von welchen anderen Modulen diese Skripts abhängen,
und kann die Ladereihenfolge korrekt berechnen. Außerdem kann man mit exports noch den
Namen eines globalen JavaScript-Objekts angeben, das als Modul-Objekt benutzt werden soll.
Der zweite Ausdruck ruft die Funktion require mit zwei Parametern auf: dem Array abhängiger Module und einer Callback-Funktion, die
aufgerufen wird, sobald alle Module verfügbar
sind. Die jeweiligen Modulobjekte werden als
Parameter (hier nur einer) übergeben. In diesem Ausdruck wird ein AMD-Modul mit dem
Namen App referenziert. In der Callback-Funktion wird das Modul im Funktionsparameter
App zur Verfügung stehen; es wird die Methode
start() darauf aufgerufen. Mit der Funktion require kann man also jederzeit dynamisch Module laden. Da dies asynchron erfolgt, muss man
stets mit einem Callback arbeiten.

Anwendungen
Doch was ist das Modul App? Es ist das erste
projektspezifische AMD-Modul dieses DemoProjekts. Die zugehörige Datei App.js zeigt Listing 2.
Jedes AMD-Modul enthält einen Aufruf der
Funktion define. Dieser Aufruf sieht ähnlich aus
wie der von require in der main.js, aber es werden
keine Module geladen, sondern die JavaScriptDatei als Modul registriert. Das Modul kann
selbst Abhängigkeiten haben: Hier backbone.marionette und ein noch nicht existierendes Modul
Views, in dem später die Objekte für die Darstellung definiert werden.
Im App-Modul wird eine Instanz von Marionette.Application erzeugt. Dieses Objekt ist eine
der ersten Erweiterungen von Marionette gegenüber Backbone. Viele Entwickler haben in ihren Backbone-Projekten eigene Objekte als Anwendungs-Controller geschaffen. Marionette
2/2014

Listing 1: main.js
// Datei: js/main.js
requirejs.config({
shim: {
underscore: {
exports: "_"
},
backbone: {
deps: ["jquery", "underscore", "json2"],
exports: "Backbone"
},
"backbone.wreqr": {
deps: ["backbone"],
exports: "Backbone.Wreqr"
},
"backbone.babysitter": {
deps: ["backbone"],
exports: "Backbone.ChildViewContainer"
}
}
});
require(["App"], function (App) {
App.start();
});

Listing 2: app.js
// Datei: App.js (Version 1)
define(["backbone.marionette", "Views"],function (Marionette,
Views){
var App = new Marionette.Application;
App.on("initialize:after", function () {
App.viewport.show(new Views.HelloView());
});
App.addRegions({
viewport: "#viewport",
dialogs: "#dialogs"
});
return App;
});

stellt hier eine fertige Lösung bereit. Mit der in
main.js aufgerufenen Methode start() wird eine
Anwendung gestartet.
Marionette-Applications signalisieren Ereignisse über die Initialisierung und Lebenszeit. Eines davon ist das Ereignis initialize:after. Wie der
Name vermuten lässt wird damit signalisiert,
dass die Anwendung vollständig initialisiert
wurde. In der Demo-Anwendung wird dort eine Views.HelloView erzeugt und dargestellt.

Regionen: Platzhalter im DOM
Um die Views.HelloView darzustellen, wird
auf App.viewport die Methode show() mit der
neu erzeugten View aufgerufen. Doch wo- ▶

23

Feature
man mit Backbone eine View durch eine andere ersetzen, so muss man sich um das Löschen
der alten View ebenfalls selbst kümmern. Hier
nimmt Marionette dem Entwickler eine Menge Arbeit ab.

Verbesserte Views

Hierarchie der
MarionetteViews (Bild 2)
her kommt App.viewport? Es handelt sich dabei um eine am Anwendungsobjekt definierte
Marionette.Region. Diese wird im App-Modul
hinzugefügt (siehe den Aufruf App.addRegions).
Bei Regionen handelt es sich ebenfalls um eine
Marionette-Erweiterung. Ihr Zweck ist die Abstraktion von Bereichen im HTML-DOM; gewissermaßen Platzhalter. In der Demo-Anwendung wird die Region viewport und eine weitere Region dialogs hinzugefügt. Beide referenzieren HTML-Elemente anhand eines jQuery-Selektors. Die passenden DOM-Elemente müssen
in der HTML-Datei noch ergänzt werden (im Listing 3 blau hinterlegt).
Die beiden wichtigsten Methoden einer Region sind show() und close(). Mit show wird die
übergebene View gerendert und in das durch
die Region referenzierte Element eingefügt. War
bereits vorher eine View in der Region dargestellt, so wird sie zuerst entfernt. So kann man
sehr einfach eine View gegen eine andere austauschen. Bei Backbone ohne Marionette muss
man selbst die render()-Methode der View aufrufen und auch das generierte Element an geeigneter Stelle in das HTML-DOM einhängen. Will

Listing 3: Demo
<!DOCTYPE html>
<html>
<head>
<title>Marionette / RequireJS Demo</title>
<script data-main="js/main.js" src="js/require.js"></script>
</head>
<body>
<div id="viewport"></div>
<div id="dialogs"></div>
</body>
</html>

24

Obwohl Regionen durchaus auch mit herkömmlichen Instanzen von Backbone.View funktionieren, stellt Marionette noch einige eigene Views
bereit: Alle neuen Views sind von der abstrakten View Marionette.View abgeleitet (Bild 2). Dieeinfachste View ist Marionette.ItemView. Muss
man bei herkömmlichen Backbone.View noch
selbst die render-Methode implementieren, so
macht das Marionette bei seinen Views selbst.
Eine Marionette.ItemView rendert ein einzelnes Objekt mit einem gegebenen Template anhand des Models der View (Bild 3). Damit eine ItemView dargestellt werden kann, benötigt
man mindestens das Template. Hier eine minimale View:
var HelloView = Marionette.ItemView.
extend({
template: "<h1>Hello World</h1>"
});

Mit einem Backbone.Model sieht das so aus:
var HelloThing = Marionette.ItemView.
extend({
template: _.template("<h1>Hello
<%= thing %></h1>")
});
var v = new HelloThing({
model: new Backbone.Model({ thing:
"Foo"})
});

Eines fällt auf: Da nun Variablen im Template
vorkommen, benötigt man eine Template-Engine, um die Attribute des Models einzusetzen.
Da Backbone sowieso von Underscore.js abhängig ist, ist deren Template-Engine ein guter Start.
Der Funktion _.template übergibt man die Template-Zeichenkette. Das Resultat ist eine Funktion, der ein JavaScript-Objekt übergeben wird.
Der Wert des Attributs thing in diesem Objekt
wird in obigem Template eingesetzt.

Views für Sammlungen von Models
Mit Marionette.ItemView kann man mit wenig
Code bereits Views für Model-Objekte erzeugen. Der Einsatz von Marionette.js macht sich
schon fast damit schnell bezahlt. Doch häufig
geht es in Webanwendungen auch um Samm2/2014

Feature
lungen gleichartiger Objekte. Kommentarlisten,
Aufgabenlisten, Forenbeiträge – es gibt unzählige Beispiele. Für diesen Anwendungsfall gibt
es die Marionette.CollectionView (Bild 3): Statt
auf ein Backbone.Model greift diese View auf eine Backbone.Collection zu. Eine CollectionView
benötigt zusätzlich zwingend einen View-Typ,
der für die Models der Collection benutzt werden soll. Üblicherweise handelt es sich dabei um
Marionette.ItemViews:
var col =
new Marionette.CollectionView({

Listing 4: Liste
var HelloThing = Marionette.ItemView.extend({
tagName: "li"
template: _.template("Hello <%= thing %>")
});
var col = new Marionette.CollectionView({
itemView: HelloThing,
tagName: "ul"
collection: new Backbone.Collection([
{thing: "Eins"}, {thing: "Zwei"}, {thing: "Drei"}
]);
});

itemView: HelloThing,
collection:
new Backbone.Collection([
{thing: "Eins"}, {thing: "Zwei"},
{thing: "Drei"}
]);

Listing 5: Regionen
var CommandsView = Marionette.CollectionView({
collection: new Backbone.Collection([

});

{name: "Prev", id: "prev"},
{name: "Next", id: "next"},

Da Funktionsprinzip der CollectionView ist einfach: Die Collection wird vom ersten bis zum
letzten Model durchwandert. Für jedes Model
wird eine ItemView erzeugt. Diese werden gerendert und einfach per appendHtml hinterei­
nander ausgegeben. Ohne weiteres Zutun entsteht so ein div-Tag für die CollectionView mit
jeweils einem div für die einzelnen ItemViews.
Doch da sowohl die CollectionView als auch die
ItemView herkömmliche Backbone.Views sind,
kann man das leicht anpassen, um beispielsweise eine Liste zu erzeugen (Listing 4).
Man überschreibt bei beiden Views per Op­
tion tagName den gewünschten Tag-Namen, um
statt des div die gewünschten li und ul zu erhalten.
CollectionViews lauschen auf add, remove und
reset-Ereignisse der Collection. Bei add/remove
werden die ItemViews einzelner Models automatisch neu gerendert oder entfernt. Setzt man
die Collection komplett zurück, so löst das Ereignis reset ein vollständiges Neurendering aus.
Spätestens wenn man Marionette.ComponentView betrachtet, wird das Prinzip hinter

Views, Models und Collections (Bild 3)
2/2014

{name: "Index", id: "index"}
])
});
var GalleryLayout = Marionette.Layout.extend({
template: "<div><div id="nav"></div><div id="preview"></div>
</div>",
regions: {
navigation : "#nav",
preview : "#preview“
}
});
var galLayout = new GalleryLayout();
App.viewport.show(galLayout);
galLayout.navigation.show(new CommandsView());
galLayout.preview.show(new Marionette.ItemView(...);

Marionettes Views deutlich: Es geht nicht um
konkrete Widgets oder Bedienelemente, wie man
es von vielen Frameworks kennt; es geht um generische Design-Patterns für Views. ItemView ist
der Prototyp aller Model-Views. CollectionView
steht für eine homogene
Aufreihung von ModelViews. ComponentView
stellt einen Verbund dar:
Eine ItemView neben einem CollectionView; ein
Model neben einer Col­
lection. Entsprechend benötigt man für die ComponentView sowohl ein
Model als auch eine Col­
lection. Dieses Pattern
kann viele Anwendungsfälle haben: Ein Baum
kann mit Compo- ▶

Links zum Thema
Marionette.js
▶ http://marionettejs.com
Backbone.js
▶ http://backbonejs.org
Underscore.js
▶ http://underscorejs.org

25

Feature
nentViews erstellt werden, indem man den Elternknoten als Model und dessen Kinder als
Collection behandelt.

Layouts
Die bisher dargestellen Views orientierten sich
stets an der Modellschicht. Marionettes letzter
View-Typ ist anders: Marionette.Layout ist eine
View, die als Grundlage eine Sammlung von Regionen hat. Regionen wurden bereits bei Mario­
nette.Application und dessen Methode addRegions gezeigt. Doch Regionen gehören nicht

Listing 6: Router.js
define(["backbone.marionette", "GalleryController"], function
(Marionette, GalleryController) {
return Marionette.AppRouter.extend({
appRoutes: {
"gallery/:id" : "showGallery"
},
controller: GalleryController
})
});

zwingendermaßen direkt zur Anwendung; sie
werden in Marionette.RegionManager-Objekten verwaltet. Jede Marionette-Anwendung besitzt zumindest ihren RegionManager. Mit Layouts kann man die Regionen einer komplexen
Anwendung aufteilen und damit einfacher und
besser pflegbar gestalten (Listing 5).
Die CommandsView ist eine CollectionView,
die eine Reihe von Backbone-Models für Commands enthält. Das Layout GalleryLayout enthält eine Region für die Navigation und eine
für die Bildansicht. Wie jede View kann man
auch ein Layout einfach in eine bestehende Region rendern lassen. Ich lasse ein GalleryLayout in die vorhin definierte Region viewport der
Anwendung rendern. Danach kann ich in diesem Layout die Regionen mit eigenen Views
befüllen. Das Besondere: Wird ein Layout als
View in einer Region geschlossen, so schließt
es selbst ebenfalls alle Views in seinen Regio­
nen. So können komplexe Bedienoberflächen
aus verschachtelten Layouts und Views entstehen und die Verwaltung erfolgt weitgehend automatisch.

Die Kontrolle behalten
Listing 7: GalleryController
define(["backbone.marionette", "App"], function (Marionette, App)
{
var GalleryController = Marionette.Controller.extend({
showGallery: function (id) {
App.viewport.show(new Marionette.ItemView({
template: _.template("Gallery: <%= id %>"),
model: new Backbone.Model({id: id})}));
}
});
return new GalleryController();
});

Listing 8: App.js (Version 2)
define(["backbone.marionette"],function (Marionette){
var App = new Marionette.Application;
App.addRegions({
viewport: "#viewport",
dialogs: "#dialogs"
});
App.on("initialize:after", function () {
if (Backbone.history) {
Backbone.history.start();
}
});
return App;
});

26

Viel wurde diskutiert, ob Backbone mit seinen
Models, Views und Routern nun eine MVC-Architektur implementiere oder nicht. Der Konsens ist mittlerweile, dass Backbone zwar viele Eigenschaften einer MVC-Architektur teilt –
insbesondere das Prinzip »Separation of Concerns« –, aber die beteiligten Komponenten lassen sich nicht so einfach auf Model, View, Con­
troller abbilden. So mancher Backbone-Entwickler ging dazu über, Backbone.View-Objekte wie Controller zu benutzen. Mit Marionette
ist das nicht mehr notwendig, da der eigenständige Komponententyp Marionette.Controller eingeführt wird. Dabei besitzt dieses Objekt keine
besonderen Eigenschaften: Es implementiert die
Event-Schnittstellen und kann – wie bei Backbone üblich – über die Methode initialize initialisiert werden.
Der einzige Zweck dieser Objekte ist, zwischen den anderen Komponenten wie Models,
Views oder Routern zu vermitteln. Dazu verschlankt Marionette auch das Konzept der Router: Der Marionette.AppRouter ist darauf ausgelegt, sämtliche Routing-Aufrufe direkt an einen assoziierten Controller weiterzureichen (Listing 6).
Die Abhängigkeiten einer Marionette.js-Anwendung können Sie in Bild 4 sehen. Beachten
Sie, dass der Router keine Abhängigkeit auf
das App-Modul hat – Router müssen eigentlich
nur ihren Controller kennen. Den hier benutzten GalleryController zeigt Listing 7. Der GalleryController ist Mediator zwischen Router und
2/2014

Feature
App. Der Controller muss den Router nicht kennen, da dieser automatisch die Controller-Methode showGallery aufruft. Im Ergebnis soll auf
dem Viewport der App eine ItemView mit der
ID der Gallery ausgegeben werden. Damit der
Controller an die Region Viewport gelangt, benötigt er eine Referenz auf das App-Modul.

Listing 9: main.js (Version 2)
requirejs.config({
shim: {
underscore: {
exports: "_"
},
backbone: {
deps: ["jquery", "underscore", "json2"],

Das Routing starten
Damit das Routing funktioniert, muss die Backbone.history gestartet werden. Das geschieht
im nun deutlich vereinfachten App-Modul (Listing 8). Das neue App-Modul hat kaum Abhängigkeiten. Es werden lediglich nach wie vor die
globalen Regionen für Viewport und Dialoge
registriert.
Im Ereignis-Handler initialize:after wird nun
die Backbone.history gestartet. Damit reagiert
der Router auf den URL und löst alles weitere aus. Beachten Sie: Weder der Router noch
der GalleryController ist hier als Abhängigkeit
eingetragen. Bislang war die einzige Abhängigkeit in der main.js-Datei das App-Modul. Damit
würde weder der Router noch der GalleryController geladen werden. Die angepasste main.js
zeigt Listing 9.
Der Router wird als neue Abhängigkeit eingetragen, und bevor die Anwendung gestartet
wird, muss eine Instanz erzeugt werden. Der
GalleryController wird als Abhängigkeit des
Routers automatisch geladen. Wie vorher auch,
wird die App gestartet. Nach der Initialisierung
startet diese nun das Routing. Ein Besuch der
Seite http://localhost/index.html#gallery/streetphotography ruft die Gallery-Route auf und erzeugt eine ItemView mit dem Textinhalt Gallery:
streetphotography.

exports: "Backbone"
},
"backbone.wreqr": {
deps: ["backbone"],
exports: "Backbone.Wreqr"
},
"backbone.babysitter": {
deps: ["backbone"],
exports: "Backbone.ChildViewContainer"
}
}
});
require(["App", "Router"], function (App, Router) {
var mainRouter = new Router();
App.start();
});

Es ist erstaunlich wie wenig direkte Abhängigkeiten zwischen den einzelnen Komponenten bestehen: Router sollten demnach lediglich
ihren Controller kennen, und die App ist selbst
lediglich Abhängigkeit in allen Modulen, die anwendungsglobale Zugriffe benötigen. Die meisten Abhängigkeiten wird man wohl bei den als
Mediator fungierenden Controllern finden.

Fazit

Marionette.js schafft die Gratwanderung zwischen sinnvollen Automatismen, o
­ hne
dabei zu viel der Flexibilität von Backbone.js aufzugeben. Die Aufteilung
des Backbone.Routers in puristische
AppRouter ohne Logik und vom Routing unabhängig arbeitende Marionette.Controller ist ein sehr sinnvoller Ansatz. Auch die diversen Views erleichtern Entwicklern die Arbeit enorm.
Nervige Verwaltungs- und Auf­
räum­arbeiten erledigt das System nahezu automatisch. Am Ende spart man
so große Mengen an Boilerplate-Code,
hat eine schlankere, saubere Codebasis
und noch ein wenig mehr Struktur, als
sie durch Backbone.js alleine gewährleistet wird.
Damit kann man Backbone-Entwicklern, die sich noch kein eigenes
Werkzeug-Set geschaffen haben, empfehlen, es doch einmal mit Marionette.
Abhängigkeitsgraph einer Marionette.js-Webanwendung (Bild 4)
js zu probieren.
[mb]
2/2014

Jetzt Ihre
web & mobile developer
auf dem iPad lesen

Für
Abonne
nte
gratis! n
27

Feature
Node.js

Datenbanken anbinden
Bei der Implementierung von Applikationen müssen immer wieder Daten gespeichert werden. Node.js stellt
zur Persistierung von Daten lediglich das fs-Modul zur Verfügung. Von Sebastian Springer

Autor

Sebastian Springer
arbeitet als Teamleiter bei der
Mayflower GmbH in München.
Sein Fokus liegt auf der Entwicklung von dynamischen
Webapplikationen mit Java­
Script und PHP.
Inhalt
Datenbanken und Node.js.

Tabellen von relationalen Daten­
banken können über foreign keys
in Verbindung zueinander gesetzt
werden (Bild 1)

28

D

er Nachteil dieser Methode ist, dass der Zugriff auf die Daten problematisch ist. Im
schlechtesten Fall müssen Sie die gesamte Datei nach den gewünschten Informationen durchsuchen, was je nach Dateigröße sehr zeitintensiv sein kann. Dies ist ein Grund, warum Sie zur
Persistierung von Informationen in Ihrer Applikation Datenbanken verwenden sollten.
Der Zugriff auf Datenbanken erfolgt in der
Regel nicht direkt. In den meisten Fällen benötigen Sie eine Art von Treiber, der Ihnen als
Schnittstelle zur Datenbank dient. Diese Treiber
sind kein fester Bestandteil der Node.js-Plattform, sondern sie liegen als NPM-Module vor,
die Sie je nach Bedarf installieren können. Durch
diese Struktur ist die Unterstützung von Datenbanken nicht nur auf einige wenige Systeme beschränkt, stattdessen können Sie beispielsweise
die relationalen Datenbanken MySQL, MS SQL
oder SQLite verwenden.
Auch viele nichtrelationale Datenbanken wie
Redis, CouchDB oder MongoDB werden mittlerweile unterstützt. In diesem Artikel erfahren
Sie mehr über die Anbindung verschiedener Datenbanken an Ihre Node.js-Applikationen. Konkret werden MySQL, SQLite, Redis und MongoDB behandelt.
Für jede dieser Datenbanken werden Sie die
grundlegenden Datenbankoperationen, die im
Akronym CRUD zusammengefasst sind, umsetzen. CRUD bedeutet Create, Read, Update
und Delete. Sie erstellen also neue Datensätze,

Als Sprache zur Formulierung von Abfragen der Daten­
bank hat sich SQL durchgesetzt (Bild 2)
lesen diese aus, aktualisieren Werte in der Datenbank und entfernen bestehende Datensätze
wieder aus der Datenbank.
Außerdem erfahren Sie mehr über die Einsatzgebiete und Vor- und Nachteile der einzelnen Datenbanken.

Relationale Datenbanken
Relationale Datenbanken haben sich über Jahre
zu einem Standard für Datenbanken in der Informationstechnologie etabliert. Dieser Typ von
Datenbanken basiert auf einer Struktur von Tabellen, in denen die Daten vorgehalten werden.
Eine Tabelle definiert dabei den Aufbau einzelner Datensätze. Sie können sich eine Tabelle in
einer relationalen Datenbank wie eine ganz gewöhnliche Tabelle vorstellen. Die Zeilen stellen die einzelnen Datensätze dar und die Spalten die jeweiligen Eigenschaften. Das bedeutet,
dass sämtliche Datensätze einer Tabelle die gleiche Struktur aufweisen.
In relationalen Datenbanken haben Sie die
Möglichkeit, nicht nur eine Tabelle, sondern nahezu beliebig viele zu definieren. Diese Tabellen
können Sie dann über sogenannte foreign keys,
auf Deutsch Fremdschlüssel, in Verbindung zueinander setzen (Bild 1). So können Sie beispielsweise eine Tabelle definieren, in der Sie die Daten Ihrer Benutzer wie den Namen oder das Geburtsdatum speichern. In einer zweiten Tabelle
können Sie dann die Adressinformationen speichern. Über einen Fremdschlüssel können Sie
2/2014

Feature
zwischen den Datensätzen aus beiden Tabellen
eine Beziehung herstellen.
Als Sprache zur Formulierung von Abfragen
der Datenbank hat sich die Structured Query
Language, kurz SQL, durchgesetzt. SQL wurde durch die ISO und IEC standardisiert, wobei jede konkrete Implementierung eigene Erweiterungen zu diesem Standard hinzufügt.
Weitere Informa­tionen finden Sie unter http://
de.wikipedia.org/ wiki/SQL (Bild 2).
Die Abschnitte zu den einzelnen Datenbanken folgen dabei stets dem gleichen Aufbau.
Sie erfahren einige Detailinformationen über
die verschiedenen Datenbanken und die jeweiligen Vor- und Nachteile. Darauf folgen die Installation des jeweiligen Treibers für die Datenbank und ein konkretes Beispiel zur Verwendung der Datenbank innerhalb einer Node.jsApplika­tion. Als Beispiel dient eine Datenbank
für Adressdaten.

MySQL
MySQL ist eine der am weitesten verbreiteten
Datenbanken im Web. Mit nahezu allen bedeutenden Programmiersprachen können Sie auf
diese Datenbank zugreifen, so auch von Node.
js aus (Bild 3).
MySQL hat sich bereits seit vielen Jahren auch
in sehr großen Applikationen als Datenbank bewährt. Das System verfügt nicht nur über eine
einfache Serverkomponente, sondern erlaubt es
auch, dass Sie eine Datenbank auf mehreren Servern im Master-Slave-Verbund betreiben. Das
hat den Vorteil, dass Sie die Anfragen auf mehrere Systeme verteilen und so Ausfall­sicherheit
gewährleisten können. Für sehr große Datenmengen lässt sich eine Datenbank auch partitionieren und auf mehrere Systeme verteilen,
was weitere Möglichkeiten hinsichtlich Performance-Steigerungen bietet.
MySQL bietet viele nützliche Features. Diese umfassen beispielsweise Trigger, also Funktionen, die bei bestimmten Operationen ausgeführt werden, beziehungsweise Transaktionen.
Dies ist eine Gruppe von Operationen, die nur
in ihrer Gesamtheit oder überhaupt nicht ausgeführt werden dürfen.
Ein weiterer Vorteil von MySQL ist, dass diese Datenbank auf sehr vielen verschiedenen Betriebssystemen wie beispielsweise Linux, Windows oder Mac OS X verfügbar ist. Diese Verfügbarkeit und die weite Verbreitung haben zu
einer sehr aktiven Community geführt, auf die
Sie bei Fragen oder Problemen zurückgreifen
können.
Ein Nachteil von MySQL ist, dass es hinsichtlich des Feature-Sets noch nicht ganz mit den
großen SQL-Datenbanken wie Oracle oder DB2
mithalten kann. Dieser Nachteil wird aber im2/2014

mer mehr durch die WeiterListing 1: Datenbank anlegen
entwicklung der Datenbank
ausgeglichen. Generell beCREATE DATABASE 'node';
stehen zwei verschiedene
USE 'node';
Ansätze zur Verbindung mit
CREATE TABLE 'Addresses' (
einer MySQL-Datenbank.
'id' int(11) NOT NULL AUTO_INCREMENT,
'street' varchar(255) DEFAULT NULL,
Zum einen existiert ein
'place' varchar(255) DEFAULT NULL,
Treiber, der das MySQL-Pro'country' varchar(255) DEFAULT NULL,
tokoll selbst implementiert
PRIMARY KEY ('id')
und den komplett in Java­
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
Script geschrieben ist. Für
diesen Treiber wird keine
weitere Software benötigt,
und er kann direkt verwendet werden, um mit
einer Datenbank zu arbeiten.
Eine weitere Variante von MySQL-Treibern
basiert auf den MySQL-Clientbibliotheken. Diese haben den Vorteil, dass sie etwas performanter als die komplett in Java- Script implementierten Treiber arbeiten. Sie weisen allerdings den
Nachteil auf, dass die MySQL-Clientbibliotheken auf dem System, auf dem die Node.js-Applikation ausgeführt wird, installiert sein müssen (Bild 4).
Der auf den MySQL-Clientbibliotheken basierende Treiber ist als NPM-Modul verfügbar und
kann über die Kommandozeile installiert werden. Wie bereits erwähnt, müssen Sie jedoch darauf achten, dass auf Ihrem System die entsprechenden Bibliotheken installiert sind.
Im folgenden Listing sehen Sie die Kommandos, die erforderlich sind, um das Modul dbmysql auf einem Linux-System zu installieren:
MySQL ist eine der am
weitesten verbreiteten Datenapt-get install libmysqlclient-dev

banken im Web (Bild 3)

29

Feature
npm install

Listing 2: Verbindung

db-mysql

var mysql = require('db-mysql');
new mysql.Database({
hostname: 'localhost',
user: 'root',
password: '',
database: 'node'
}).on('error', function (err) {
console.log('An error occured: ' + err);
}).connect(function (err) {
console.log('connection established');
});

Nachdem Sie diese
Kommandos abgesetzt
haben, können Sie von
Ihrer Applikation aus
auf eine MySQL-Datenbank zugreifen.

Datenbankstruktur

Damit Sie die nachfolgenden Beispiele nachvollziehen können, benötigen Sie eine lauffähige Instanz einer MySQL-Datenbank auf einem
Server. Im Fall dieses Beispiels wird angenommen, dass sich Applikation und Datenbank auf
dem gleichen Rechner befinden.
Haben Sie die Statements aus Listing 1 ausgeführt, können Sie im nächsten Schritt mit der
Umsetzung der Beispielapplikation beginnen.

Verbindung aufbauen

MySQL-Clientbibliotheken
arbeiten etwas performanter
als die in JavaScript implementierten Treiber (Bild 4)

In jeder Applikation, die mit einer Datenbank
arbeitet, muss vor der Verwendung dieser Datenbank zuerst eine Verbindung aufgebaut werden, über die einerseits die Kommandos an das
Datenbanksystem gesendet werden und über
die auf der anderen Seite die Informationen der
Datenbank an die Applikation zurückfließen
können. Listing 2 zeigt Ihnen, wie Sie eine solche
Verbindung aufbauen.
Im Quellcode sehen Sie, dass Sie der Data­
base-Methode eine Objektstruktur übergeben
können, die die Konfiguration der Verbindung
enthält. Auf dem zurückgegebenen Objekt kön-

nen Sie verschiedene Methoden aufrufen. Über
die on-Methode können Sie beispielsweise direkt Callback-Funktionen an Ereignisse binden,
die im Verlauf des Verbindungsaufbaus auftreten können. Konkret sind dies die Ereignisse error, das im Fehlerfall auftritt, und ready, das ausgelöst wird, sobald die Datenbankverbindung
hergestellt wurde.
Die wichtigste Methode im Zusammenhang
mit der Datenbankverbindung ist connect. Diese
Methode akzeptiert eine Callback-Funktion als
Wert, die aufgerufen wird, sobald eine Verbindung hergestellt wurde. Sämtliche Datenbankoperationen finden also innerhalb dieser Callback-Funktion statt (Listing 3).
Sie legen einen neuen Datensatz durch eine
Kombination der Methoden query, insert und
execute an. Dabei stellt Ihnen die Query-Methode das Query-Objekt zur Verfügung, auf dem
Sie die insert-Methode aufrufen. Dieser Methode müssen Sie als ersten Wert den Namen der
Tabelle übergeben, in die Sie die Daten einfügen möchten. Das zweite Argument besteht aus
einem Array von Spaltennamen, denen im dritten Argument durch ein Array Werte zugewiesen werden.
Die execute-Methode, die Sie auf dem Rückgabewert der insert-Methode aufrufen, führt
schließlich die Abfrage aus. Diese Methode akzeptiert wiederum eine Callback- Funktion, die
ausgeführt wird, sobald das Ergebnis der Abfrage vorliegt. Als erstes Argument erhält diese
Callback-Funktion ein Fehlerobjekt, das einen
Wert beinhaltet, falls bei der Abfrage ein Fehler
aufgetreten ist. Das zweite Argument beinhaltet
das Resultat der Abfrage. Im Fall eines Inserts
sind dies die ID des neuen Datensatzes, die Anzahl der Datensätze, die betroffen waren, und
die Anzahl an Warnungen, die bei der Opera­
tion aufgetreten sind.

Datensätze auslesen
Nachdem Sie Datensätze in die Datenbank eingefügt haben, werden Sie diese in den meisten
Fällen auch wieder auslesen wollen. Der My­
SQL-Treiber bietet Ihnen hierfür die select-Methode des Query-Objekts. In Listing 4 sehen Sie
den konkreten Einsatz dieser Methode.
Wie Sie sehen können, geschieht die Abfrage der Datenbank wiederum über eine Kombination von Methoden. Am Anfang steht die
­query-Methode, die das Query-Objekt zur Verfügung stellt. Danach verketten Sie die verschiedenen Methoden, die schließlich die Abfrage bilden, die dann mit Hilfe von execute ausgeführt
wird. Die execute-Methode akzeptiert eine Callback-Funktion als Wert. Diese Callback-Funk­
tion erhält drei Argumente. Das erste ist, wie in
Node.js üblich, ein Fehlerobjekt. Das zweite Ar-

30

2/2014

Feature
gument ist das eigentliche Ergebnis der Abfrage.
Im Fall des Beispiels ist dies ein Array von Objekten, die die gefundenen Datensätze darstellen. Das dritte Argument enthält schließlich ein
Array mit Objekten, die die gefundenen Spalten
repräsentieren.
Zum Aufbau einer Abfrage können Sie auf
verschiedene Methoden zurückgreifen. Die Basis bilden die Methoden select und from. Zur Einschränkung der gefundenen Datensätze können
Sie mit der where-Methode Bedingungen definieren, die die Datensätze erfüllen müssen. Mit
join können Sie mehrere Tabellen innerhalb einer Abfrage verbinden.
Um den Rahmen dieses Artikels nicht zu
sprengen, werde ich hier nicht auf weiterführende Operationen wie die Verbindung mehrerer Tabellen eingehen.

Datensätze aktualisieren
Der Vorteil einer Datenbank ist, dass Sie sehr
schnell auf Daten zugreifen und diese bei Bedarf auch ändern können. Diese Aktualisierung
erreichen Sie über die update-Methode. Listing 5
zeigt Ihnen, wie Sie bei Datenaktualisierungen
vorgehen.
Hier formulieren Sie die Abfrage zum Ändern
von Datensätzen ähnlich, wie Sie es auch direkt
in SQL machen würden, also mit einer Kombination aus query, update, set, where und execute.
Mit update geben Sie an, welche Tabelle betroffen ist. set erhält die Werte, die geändert werden
sollen, in einer Objektstruktur als Argument.
Mit where schränken Sie die Datensätze ein, die
aktualisiert werden sollen.
Das Fragezeichen in der Zeichenkette dient
als Platzhalter, der bei der Ausführung durch
den Wert im Array, das Sie als zweites Argument übergeben, ersetzt wird. Dabei wird dieser Wert korrekt escapt, um Angriffe mit SQLInjections zu vermeiden. Schließlich führt execute die Abfrage aus.
Auch diesmal erhält diese Methode wieder
eine Callback-Funktion mit einem Fehlerobjekt
und einem Resultat-Objekt. Dieses Objekt enthält eine ID-Eigenschaft, die allerdings den Wert
0 aufweist, die Anzahl der betroffenen Zeilen
und die Anzahl der Warnungen.

Datensätze entfernen
Die letzte Operation, die Sie hier kennenlernen,
ist das Löschen von Datensätzen aus der Datenbank. Das Löschen von Datensätzen lässt sich
nicht ohne Weiteres rückgängig machen. Arbeiten Sie mit referenzieller Integrität über Fremdschlüssel, kann das Löschen eines Datensatzes
eine Kaskade von Löschungen anderer Datensätze nach sich ziehen, die auf diesem Datensatz aufbauen.
Eine weiterführende Erklärung zu Fremdschlüsseln unter MySQL finden Sie unter http://
dev.mysql.com/doc/refman/5.5/en/create-tableforeign-keys.html. Beim Löschen von Datensätzen sollten Sie also stets Vorsicht walten lassen.
Listing 6 zeigt Ihnen, wie Sie Datensätze aus Ihrer Datenbank entfernen können.
Auch in diesem Beispiel sehen Sie die gewohnte Kombination von Methoden zum Formulieren der Abfrage. Die Callback-Funktion
der execute-Methode erhält zwei Argumente.
Das erste Argument enthält eventuelle Fehler,
die bei der Löschoperation aufgetreten sind. Das
zweite Argument enthält das Ergebnis der Abfrage. Im Fall des Löschens eines Datensatzes
ist dies ein Objekt, das insgesamt drei Eigenschaften enthält. Die Eigenschaft id enthält immer den Wert 0, affected gibt an, wie viele Zeilen
gelöscht wurden, und warnings enthält die Anzahl der Warnungen, die während der Abfrage
aufgetreten sind. Eine Alternative zum endgültigen Löschen von Datensätzen ist das Mar- ▶

Listing 3: Neue Datensätze
this.query().insert('Addresses',
['street', 'place', 'country'],
['Broadway 1', 'New York', 'United States of America']
).execute(function (err, result) {
if (err) throw err;
console.log(result);
});

2/2014

Eine leichtgewichtige Alternative zu
MySQL stellt SQLite dar (Bild 5)

Listing 4: select-Methode
this.query().select('*').
from('Addresses').
execute(function(err, rows, cols) {
if (err) throw err;
console.log(rows);
console.log(cols);
});

31

Feature
zugreifen können. In den folgenden Abschnitten lernen Sie den sqlite3-Treiber kennen. Dieser
liegt als NPM-Paket vor und kann mit dem folgenden Kommando installiert werden:
$ npm install sqlite3

SQLite unterstützt nicht
den vollen SQL-Sprachumfang (Bild 6)

kieren von Datensätzen. In der Datenbank wird
dies durch ein weiteres Feld innerhalb der Tabelle repräsentiert. Dieses Feld enthält den Wert
0 für aktive Datensätze und den Wert 1 für gelöschte Datensätze. Der Nachteil dieser Variante ist, dass Sie sich selbst um die referenzielle Integrität Ihrer Datenbank kümmern müssen, also abhängige Datensätze selbst als gelöscht markieren müssen.

SQLite
Eine leichtgewichtigere Alternative zu MySQL
als Datenbank für Ihre Node.js-Applikation ist
SQLite (Bild 5).
SQLite ist im Vergleich zu MySQL ein Leichtgewicht. Einer der wichtigsten Unterschiede
ist, dass bei SQLite kein Serverprozess benötigt
wird. Die Clientsoftware greift bei Abfragen direkt auf die in einer Datei gespeicherten Datenbank zu. SQLite erfordert außerdem keine Konfiguration. Sie können die Datenbank nach der
Initialisierung sofort verwenden.
SQLite steht Ihnen auf den verschiedensten
Systemen zur Verfügung. So gibt es vorkompilierte Binärpakete für Linux, Mac OS X und auch
für Windows. Da SQLite die Datenbankdaten in
einer Datei speichert, können diese auf sehr einfache Weise kopiert und gesichert werden.
Im Gegensatz zu MySQL verfügt SQLite über
keine eigene Benutzerverwaltung. Sie haben also keine Möglichkeit, Berechtigungen zu vergeben, was ein Mehrbenutzersystem unmöglich macht. Für SQLite existieren verschiedene
Treiber, mit deren Hilfe Sie auf die Datenbank

Listing 5: Datenaktualisierung
this.query().update('Addresses').
set({'street': 'Tower Hill', 'place': 'London', 'country':
'United Kingdom'}).
where('id = ?', [1]).
execute(function(err, result) {
if (err) throw err;
console.log(result);
});

32

Sobald Sie das Paket installiert haben, können
Sie eine SQLite-Datenbank an Ihre Applikation
anbinden und diese zur Persistierung von Daten verwenden.
Bevor Sie jedoch mit der Datenbank interagieren können, müssen Sie diese anlegen. Lis­
ting 7 führt Sie durch diesen Prozess, an dessen
Ende eine funktionierende Datenbank mit einer Adresstabelle steht, die Sie in den folgenden Abschnitten als Ausgangssituation verwenden werden.
Beim Aufbau der Tabelle fällt Ihnen bestimmt
das Fehlen der ID-Spalte im Vergleich zu My­
SQL auf. Ein solches Feld ist bei SQLite unnötig,
da jeder Datensatz automatisch eine Zahl zugeordnet bekommt, die in der Tabelle eindeutig
ist und über die der Datensatz identifiziert werden kann. Zugreifen können Sie auf diesen Wert
über den Spaltennamen rowid.

SQLite verfügt über keine interne
Benutzerverwaltung
Da SQLite wie bereits erwähnt über keine interne Benutzerverwaltung verfügt, ist der Aufbau
einer Verbindung relativ problemlos. Das folgende Listing zeigt Ihnen, wie Sie die Verbindung zu einer SQLite-Datenbank aufbauen können, die in der Datei node.db liegt:
var sqlite = require('sqlite3');
var db = new sqlite.Database
('node.db');

Um eine Verbindung zu Ihrer Datenbank aufzubauen, reichen zwei Statements aus. Im ersten
Schritt binden Sie das NPM-Paket ein, das Ihnen die Verbindung zur Datenbank ermöglicht.
Im zweiten Schritt initialisieren Sie schließlich
die eigentliche Datenbankverbindung, indem
Sie ein Datenbank-Objekt erzeugen und dabei
den Namen der Datei angeben, in der sich die
Datenbank befindet. Im weiteren Verlauf Ihrer
Applikation können Sie mit diesem DatenbankObjekt Ihre Abfragen an die Datenbank senden.
Zunächst nutzen Sie nun die bestehende Verbindung zur Datenbank, um einen neuen Datensatz anzulegen.

Datensatz einfügen
Noch verfügt die Datenbank in der Datei node.
db lediglich über eine leere Tabelle Addresses. Im
2/2014

Feature
ersten Schritt fügen Sie nun einen neuen Datensatz ein. Listing 8 zeigt Ihnen den dazu erforderlichen Quellcode. Dabei wird davon ausgegangen, dass db das Datenbank-Objekt enthält.
Mit der run-Methode des Datenbank-Objekts
können Sie Abfragen zum Anlegen neuer Datensätze an die Datenbank absetzen. Diese Methode akzeptiert drei Argumente, von denen das
zweite optional ist. Das erste Argument besteht
aus der SQL-Abfrage, die an die Datenbank gesendet werden soll. Das zweite Argument enthält Parameter, die in die Abfrage eingebunden
werden sollen. Sie sehen in dem Beispiel, dass
die SQL-Abfrage drei Fragezeichen enthält. Diese werden durch das Array im zweiten Argument mit konkreten Werten ersetzt. Dabei kümmert sich der Datenbanktreiber um das korrekte Escaping der Werte.

Callback-Funktion
Das dritte Argument ist schließlich eine Callback-Funktion, die aufgerufen wird, sobald die
Antwort des Servers vorliegt. Das einzige Argument, auf das Sie in dieser Callback-Funktion
zugreifen können, ist ein Fehlerobjekt, das existiert, falls bei der Abfrage Probleme aufgetreten
sein sollten. Über this können Sie innerhalb der
Callback-Funktion auf weitere Informationen
zugreifen. Im Fall einer INSERT-Abfrage steht
Ihnen hier die Eigenschaft lastID zur Verfügung.
Sie enthält die rowid des Datensatzes, den Sie mit
diesem Kommando eingefügt haben.
Das Resultat der Operation können Sie entweder direkt über einen Kommandozeilen­
client für SQLite prüfen, oder Sie erweitern Ihren Code um eine weitere Abfrage, die die entsprechenden Werte wieder aus Ihrer Datenbank
ausliest. Der nächste Abschnitt beschäftigt sich
mit genau dieser Problemstellung.

Mehrere Methoden zum Auslesen
Haben Sie erst einmal Daten in Ihre Datenbank
geschrieben, möchten Sie diese zu einem bestimmten Zeitpunkt auch wieder auslesen. Der
von Ihnen bisher verwendete SQLite-Treiber
verfügt über mehrere Methoden, mit deren Hilfe Sie Daten aus Ihrer Datenbank auslesen können.
Die einfachste Variante, Daten aus Ihrer Datenbank auszulesen, ist die Verwendung der getMethode. Mit ihr kann ein einzelner Datensatz
abgefragt werden:
db.get('SELECT * FROM Addresses WHERE
rowid = ?',
[1],
function (err, row) {
if (err) throw err;

2/2014

console.log(row);
});

Listing 6: Daten entfernen
this.query().delete().

from('Addresses').
Die Signatur ist sehr ähnlich
where('id = ?', [ 1 ]).
zur run-Methode. Der ersexecute(function(err, result) {
te Wert, den Sie an den Aufif (err) throw err;
ruf dieser Methode übergeconsole.log(result);
ben, ist ebenfalls eine Zei});
chenkette, die die SQL-Abfrage enthält, die Sie ausführen möchten. Auch hier können Sie wieder Fragezeichen als Platzhalter verwenden, die durch die Werte im zweiten Argument ersetzt werden. Das dritte Argument besteht aus der Callback-Funktion, die ausgeführt
wird, sobald das Ergebnis der Abfrage vorliegt.
Das erste Argument dieser Funktion ist wie
bei Node.js üblich ein Fehlerobjekt. Das zweite Argument besteht aus einem Objekt, das den
ausgelesenen Datensatz repräsentiert. Die Spaltennamen sind dabei die Eigenschaften. Die jeweiligen Werte der Felder des Datensatzes werden dann diesen Eigenschaften zugewiesen.
Zusätzlich zur get-Methode bietet Ihnen der
SQLite-Treiber zwei weitere Methoden. Mit Hilfe der all-Methode können Sie nicht nur einen
einzelnen Datensatz, sondern sämtliche Datensätze, die eine SELECT-Abfrage zurückliefert,
verarbeiten. Die Verwendung der all-Methode
gleicht der der get-Methode, bis auf die Tatsache,
dass Sie in der Callback-Funktion nicht ein Objekt, sondern ein Array von Objekten als zweites Argument erhalten.
Die dritte Methode each ermöglicht es Ihnen schließlich, eine Callback-Funktion zu definieListing 7: Datenbank anlegen
ren, die für jeden Datensatz,
den eine Abfrage zurücklie$ sqlite3 node.db
fert, ausgeführt wird. Diese
SQLite version 3.7.9 2011-11-01
00:52:41
Methode verhält sich wie die
Enter ".help" for instructions
get-Methode, außer dass sie
Enter SQL statements terminated with
ein viertes Argument akzepa ";"
tiert. Dieses Argument ist eisqlite> CREATE TABLE 'Addresses' (
ne weitere Callback-Funkti'street' varchar(255) DEFAULT NULL,
on, die aufgerufen wird, so'place' varchar(255) DEFAULT NULL,
'country' varchar(255) DEFAULT NULL
bald sämtliche Callbacks für
);
die einzelnen Datensätze absqlite>
gearbeitet wurden. Der folgende Abschnitt zeigt Ihnen,
wie Sie vorgehen können,
falls Sie bestehende DatenListing 8: Datensatz anlegen
sätze, die sich bereits in Ihrer Datenbank befinden, ändb.run('INSERT INTO Addresses
VALUES (?, ?, ?)',
dern möchten.
['Broadway 1', 'New York', 'United
In SQLite können Sie wie
States of America'],
auch schon in MySQL die Infunction (err) {
formationen, die als Datenif (err) throw err;
console.log('ID: ' + this.lastID);
sätze in Ihrer Datenbank lie});
gen, über bestimmte Abfragen ändern. Der SQL- ▶

33

Feature

Häufig werden in nichtrelationalen Datenbanken Objektoder Dokumentstrukturen
gespeichert (Bild 7)

Standard sieht für diesen Fall die UPDATE-Abfrage vor. Um diese Art von Abfragen abzusetzen, müssen Sie auf die run-Methode zurückgreifen, die Sie bereits zum Anlegen von Datensätzen verwendet haben. Listing 9 stellt Ihnen vor,
wie Sie bei der Aktualisierung von Datensätzen
vorgehen sollten.
Der Quellcode dieses Listings funktioniert
ähnlich zu dem, den Sie implementiert haben,
als Sie Datensätze angelegt haben. Die einzigen
Unterschiede sind die geänderte SQL-Abfrage
im ersten Argument der run-Methode und die
Tatsache, dass in der Callback-Funktion im dritten Argument statt auf this.lastID auf this.changes
zugegriffen wird. Diese Eigenschaft enthält die
Anzahl der betroffenen Zeilen.
Die letzte Operation, die Sie hier zu S
­ QLite
kennenlernen sollen, ist das Entfernen von Datensätzen.

Einfache Anpassungen
Um Datensätze aus Ihrer Datenbank wieder zu
entfernen, können Sie wie beim Einfügen und
Aktualisieren auch auf die run-Methode zurück-

Listing 9: Datensatz aktualisieren
db.run('UPDATE Addresses SET street = ?, place = ?, country = ?
WHERE rowid =
?',
['Tower Hill', 'London', 'United Kingdom', 1],
function (err) {
if (err) throw err;
console.log(this.changes);
});

34

greifen. In Listing 10 sehen Sie, wie Sie Ihr Ziel mit
ein paar einfachen Anpassungen des Quellcodes
aus dem vorigen Listing erreichen können.
In der run-Methode müssen Sie im Vergleich
zur Aktualisierung von Datensätzen lediglich
die SQL-Abfrage anpassen und die Parameter,
die Sie verwenden möchten, entsprechend ändern. In der Callback-Funktion erfahren Sie wiederum über this.changes, wie viele Datensätze
von der Löschung betroffen waren.
Wie schon in den Abschnitten über MySQL
ist auch hier ein Wort der Warnung angebracht.
Das Löschen von Datensätzen kann nicht umgekehrt werden. Das bedeutet, dass einmal gelöschte Datensätze unwiederbringlich verloren
sind, es sei denn, Sie haben eine funktionierende Datensicherung, aus der Sie die Datensätze
wiederherstellen können.
Die hier vorgestellten Features von SQLite
und des SQLite-Treibers sind lediglich ein kleiner Ausschnitt des vollen Funktionsumfangs
(Bild 6).
Möchten Sie mehr darüber erfahren, was Sie
mit dieser Datenbank und dem zugehörigen
Treiber umsetzen können, verweise ich Sie an
dieser Stelle auf die jeweilige Online-Dokumentation unter www.sqlite.org/docs.html für SQLite und https://github.com/developmentseed/
node-sqlite3/wiki für den SQLite-Treiber.
Mit MySQL und SQLite haben Sie zwei Vertreter relationaler Datenbanken kennengelernt.
In den folgenden Abschnitten erfahren Sie mehr
über eine andere Kategorie von Datenbanken,
die nichtrelationalen Datenbanken.

Node.js und nichtrelationale
Datenbanken
Lange Zeit waren relationale Datenbanken die
einzige weitverbreitete Art, Daten strukturiert
zu speichern und sie für schnellen Zugriff wieder zur Verfügung zu stellen. Mittlerweile hat
sich allerdings auch noch eine weitere Art von
Datenbanken auf dem Markt etabliert. Sie setzen
bewusst auf einen anderen Ansatz.
Im Gegensatz zu relationalen Datenbanken
mit ihren fest definierten Tabellenstrukturen
wird bei nichtrelationalen Datenbanken keine
derartige Struktur vorgeschrieben. Häufig werden in nichtrelationalen Datenbanken Objektoder Dokumentstrukturen gespeichert, auf die
Sie über bestimmte Schlüssel- beziehungsweise
Indexwerte zugreifen können (Bild 7).
Diese werden unter dem Sammelbegriff No­
SQL zusammengefasst. Weiterführende Informationen finden Sie unter http://de.wikipedia.
org/wiki/ NoSQL. In den folgenden Abschnitten
lernen Sie mit Redis und MongoDB zwei Vertreter der Kategorie der nichtrelationalen Datenbanken kennen.
2/2014

Feature
Redis
Im Kern ist Redis ein einfacher Key-Value-Store.
Sie haben hier die Möglichkeit, Werte zu speichern und sie mit einem Schlüssel zu versehen.
Über diesen Schlüssel können Sie wieder auf
diesen Wert zugreifen (Bild 8).
Redis speichert die Werte im Arbeitsspeicher,
was zu einer sehr hohen Leistung bei Lese- und
Schreiboperationen führt. Der Nachteil dieser
Technologie ist, dass der Inhalt des Arbeitsspeichers nach einem Systemabsturz unwiederbringlich verloren ist. Die Entwickler von Redis
haben für dieses Problem eine sehr elegante Lösung gefunden. Das System kann zu definierbaren Zeitpunkten eine Sicherheitskopie der Datenbank auf die Festplatte schreiben, von der
aus eine Wiederherstellung der Inhalte problemlos möglich ist.

Werte werden im Arbeitsspeicher
abgelegt
Redis ist primär für POSIX-Systeme wie Linux,
BSD oder Mac OS X verfügbar und wird auch
auf diesen Systemen entwickelt. Für Windows
existiert zwar eine Version des Redis-Servers,
diese ist allerdings noch experimentell.

Der Redis-Client für
Node.js liegt wie die übrigen Treiber für Datenbanken auch als NPMPaket vor und kann über
die Kommandozeile installiert werden:

Listing 10: Datensatz entfernen
db.run('DELETE FROM Addresses WHERE
rowid = ?',
[1],
function (err) {
if (err) throw err;
console.log(this.changes);

$ npm install redis

});

Sobald Sie den RedisServer und das NPM-PaListing 11: Verbindung aufbauen
ket mit dem Redis-Client
auf Ihrem System instalvar redis = require('redis'),
liert haben, können Sie
client = redis.createClient();
Redis in Ihrer Node.jsclient.on('error', function (err) {
console.log('An error occured: ' + err);
Applikation verwenden.
});
Da Redis auf keine festen
client.quit();
Strukturen setzt, müssen
Sie keine weiteren Operationen zur Initialisierung einer Datenbank unternehmen, sondern
können sich direkt um die Verbindung mit dem
Server kümmern.
Der Verbindungsaufbau zu einem Redis-Server ist ähnlich einfach wie der zu einer SQLite-Datenbank. In Listing 11 sehen Sie, wie Sie die
Verbindung in nur wenigen Zeilen Quell- ▶

Professionelle
Webentwicklung!
Egal ob Sie Ihr Wissen über HTML5, CSS3
und JavaScript oder Responsive Webdesign
und andere Webtechnologien vertiefen
möchten: Unsere Bücher und VideoTrainings zeigen Ihnen, wie’s geht.
Mehr zum Thema Webentwicklung:

www.GalileoComputing.de

448 S., 2013, 24,90 €
ISBN 978-3-8362-2519-9

826 S., 2013, komplett in Farbe, 44,90 €
ISBN 978-3-8362-2020-0

Jetzt
reinschauen!
Wissen, wie’s geht.

Feature

Redis ist ein einfacher Key-ValueStore, der die Werte im Arbeits­
speicher speichert (Bild 8)

code herstellen können. Für die eigentListing 12: Verbindung aufbauen
liche Verbindung benötigen Sie lediglich zwei Kommandos. Das erste, reclient.get('node.js', function (err, res) {
quire, dient dazu, das NPM-Paket in
if (err) throw err;
Ihre Applikation einzubinden. Mit eiconsole.log(res);
client.quit();
nem Aufruf von createClient erzeugen
});
Sie ein Objekt, über das Sie mit dem
Redis-Server kommunizieren können.
Die Kommunikation erfolgt asynchron
client.quit();
und eventbasiert.
});
Das bedeutet konkret, dass Sie CallbackFunktionen auf verschiedene Ereignisse binden
Die set-Methode erhält insgesamt drei Arguund damit jeweils auf das Ereignis reagieren
mente. Das erste Argument ist eine Zeichenketkönnen. Im Beispiel sehen Sie dies anhand des
te, die den Schlüssel angibt, über den Sie späerror-Events, das ausgelöst wird, falls ein Fehler
ter wieder auf die Daten, die Sie im zweiten Arbei der Verbindung mit dem Redis-Server aufgument angeben, zugreifen können. Das drittritt. Weitere Ereignisse, auf die Sie reagieren
te Argument ist schließlich eine Callback-Funk­
können, sind ready, connect, end, drain und idle.
tion, die ausgeführt wird, sobald der Server eine Rückmeldung sendet.
Verbindung zum Server
Diese Callback-Funktion erhält zwei Werte.
Sobald Sie die Verbindung zum Server nicht
Der erste ist ein Fehlerobjekt, das im Standardmehr benötigen, sollten Sie diese mit einem Auffall den Wert null aufweist und nur im Fehlerfall
ruf der Methode exit oder quit beenden. Andernweitere Informationen enthält. Der zweite Wert
falls wird die Verbindung offengehalten und die
ist die Antwort des Servers. Gab es keine ProbApplikation nicht beendet.
leme beim Einfügen der Daten, erhalten Sie hier
Der Unterschied zwischen beiden Methoden
die Zeichenkette OK. Im Beispiel sehen Sie auliegt darin, dass exit die Verbindung sofort beenßerdem, dass innerhalb der Callback-Funktion
det, egal ob noch Antworten vom Server ausstedie Methode quit aufgerufen wird, um die Verhen oder nicht. quit dagegen wartet, bis sämtlibindung nach erfolgtem Einfügen der Daten zu
che Antworten vom Server vorliegen, und beenbeenden.
det dann die Verbindung.
Mit der Methode set können Sie neue DatenAuf die Daten zugreifen
sätze in Redis anlegen:
Haben Sie Daten eingefügt, möchten Sie dieclient.set('node.js', 'Hello World',
se irgendwann auch wieder auslesen. Sie sehen
function (err, res)
im folgenden Abschnitt, wie Sie mit wenig Auf{
wand auf Ihre Daten zugreifen können.
if (err) throw err;
Ähnlich einfach wie das Erstellen ist auch das
console.log(res);
Auslesen von Datensätzen. Mit der get-Methode können Sie über einen Schlüssel auf einen gespeicherten Wert zugreifen (Listing 12).
Im Gegensatz zur set-Methode akzeptiert get
lediglich zwei Eingabewerte. Der erste ist der
Schlüssel des Wertes, den Sie auslesen möchten, und der zweite eine Callback-Funktion, die
ausgeführt werden soll, sobald das Ergebnis
vom Server vorliegt. Die Callback-Funk­tion erhält zwei Argumente. Das erste besteht aus einem Fehlerobjekt, und das zweite enthält die
Antwort des Servers, bestehend aus dem Wert
für den zuvor angegebenen Schlüssel. Innerhalb der Callback-Funktion können Sie wiederum die Verbindung beenden.

Datensätze modifizieren
Möchten Sie Datensätze, die in Ihrer Datenbank liegen, modifizieren, können Sie hierbei
auf zwei verschiedene Arten vorgehen. Wollen

36

2/2014

Feature
Sie den Datensatz grundlegend verändern, erreichen Sie dies, indem Sie den neuen Wert einfach per set speichern. Dies überschreibt den bereits bestehenden Datensatz in der Datenbank.
Möchten Sie allerdings lediglich Informationen
an den Datensatz anhängen, können Sie die append-Methode verwenden. Listing 13 zeigt Ihnen
in einem stark verkürzten Beispiel, wie Sie in einem solchen Fall vorgehen müssen.
Die append-Methode wird wie set aufgerufen,
nur dass sie den bestehenden Datensatz nicht
ersetzt, sondern lediglich die Informationen anhängt.
Im Verlauf Ihrer Applikation kann es immer
wieder vorkommen, dass Sie Daten aus Ihrer
Datenbank wieder entfernen möchten. Der folgende Abschnitt beschäftigt sich damit, wie Sie
Datensätze aus Ihrer Datenbank entfernen.

Einträge aus der Datenbank
entfernen
Der Befehlssatz des Redis-Servers enthält das
Kommando del, mit dem Sie Einträge aus Ihrer
Datenbank entfernen können:
client.del('node.js', function (err,
res) {
console.log(res);
});

Um einen Datensatz aus Ihrer Datenbank zu
entfernen, übergeben Sie der del-Methode den
Schlüssel des Datensatzes, den Sie löschen
möchten. Als zweites Argument akzeptiert diese Methode eine Callback-Funktion, die ausgeführt wird, sobald die Löschung erfolgt ist. Sie
erhalten hier Zugriff sowohl auf ein Fehlerobjekt als auch auf die Anzahl der Datensätze, die
bei dieser Operation gelöscht wurden.
Diese Betrachtung von Redis und des RedisClients für Node.js ist nur ein kleiner Ausschnitt
des Feature-Sets, das Ihnen in diesem Zusammenhang zur Verfügung steht. Über den RedisClient können Sie auf den gesamten Befehlssatz,
den Ihnen der Redis-Server bietet, zugreifen. So
können Sie beispielsweise Hashes und Listen erstellen und mit diesen arbeiten. Sollten Sie sich
näher mit Redis beschäftigen wollen, ist http://
redis.io dafür ein guter Ausgangspunkt.

MongoDB
Mit MongoDB lernen Sie in den nächsten Abschnitten einen weiteren Vertreter nichtrelationaler Datenbanken kennen (Bild 9).
MongoDB ist ein Vertreter der dokumentenorientierten Datenbanken, die in der Programmiersprache C++ geschrieben ist. Das bedeutet,
dass die Grundlage der Speicherung von Infor2/2014

mationen in dieser Datenbank auf Dokumenten basiert, die im BSON-Format vorliegen. Informationen zu diesem Format finden Sie unter
http://bsonspec.org (Bild 10). Die Entwicklung
von MongoDB begann im Oktober 2007, die
Erstveröffentlichung fand im Februar 2009 statt.
MongoDB eignet sich aufgrund seiner guten
Performance auch für größere Applikationen
und bringt darüber hinaus einige weitere Features mit, die gerade bei sehr großen Datenmengen entscheidende Vorteile bringen.
MongoDB ist für die verschiedensten Betriebssysteme wie Linux, Windows, Solaris und
Mac OS X verfügbar. Sie können MongoDB also
auf allen Systemen installieren, auf denen auch

Node.js lauffähig ist.

MongoDB ist ein Vertreter
der dokumentenorientierten
Datenbanken (Bild 9)

Listing 13: append
client.set('node.js', 'Hello', function (err, res) {
client.append('node.js', ' World', function (err, res) {
client.get('node.js', function (err, res) {
console.log(res);
client.quit();
});
});
});

Listing 14: Verbindung
var Db = require('mongodb').Db,
Server = require('mongodb').Server;
var client = new Db('test', new Server("127.0.0.1", 27017, {}),
{w: 1});
client.open(function (err, client) {
client.createCollection('Addresses', function (err, collection) {
});
});

37

Feature
Listing 15: Datensätze Anlegen
var address = {
street: 'Broadway 1',
place: 'New York',
country: 'United States of America'
};
collection.insert(address, {safe: true}, function (err, res) {
if (err) throw err;
console.log(res);
});

Sobald Sie die Serversoftware von MongoDB
auf Ihrem System installiert haben, benötigen
Sie lediglich noch einen Treiber, über den Sie auf
Ihre Datenbank zugreifen können. Für ­Node.js
existiert für diese Zwecke ein in JavaScript implementierter Treiber als fertiges NPM-Paket,
das Sie über das folgende Kommando installieren können:
$ npm install mongodb

Im ersten Schritt erfahren Sie nun wie bei den
vorangegangenen Datenbanken auch, wie Sie
eine Verbindung zu Ihrer Datenbank herstellen
können, über die Sie später dann Datensätze erzeugen, auslesen, modifizieren und wieder löschen können.

MongoDB-Client initialisieren
Die Verbindung zur Datenbank basiert auf dem
MongoDB-Client. Diesen müssen Sie korrekt in-

node.js
JavaScript kennt jeder. Aber JavaScript ist nicht nur eine ClientTechnologie.
Mit Node.js können Sie sie auch serverseitig einsetzen und so an der
Performance-Schraube Ihrer Anwendungen drehen. Das Buch bietet einen umfassenden Einstieg in das faszinierende Universum von
­Node.js. Mit einfachen und leicht verständlichen Beispielen werden
die Grundlagen und weiterführende Technologien erklärt. Der Leser
erhält eine Erläuterung der Komponenten von Node.js und deren
Auswirkungen auf die Vorgehensweise bei der Entwicklung von Applikationen, die auf dieser Plattform entwickelt werden.
Im Verlauf des Buches werden auch die verschiedenen Module
und ihre Besonderheiten anhand praktischer Beispiele vorgestellt.
Im Fokus steht die Entwicklung eigener Applikationen. Zu den weiterführenden Themen, die durch dieses Buch abgedeckt werden,
zählen unter anderem Debugging, Qualitätssicherung und Skalierung von Node.js-Anwendungen. Außerdem wird gezeigt, wie sich
Node.js in heterogene Serverlandschaften mit anderen Webtechnologien integrieren lässt.
Das Buch eignet sich sowohl zum Erlernen von Node.js als auch
als Nachschlagewerk im täglichen Gebrauch.

38

Autor Sebastian
Springer
Verlag Galileo
Computing
ISBN 978-3-83622119-1,
469 Seiten
Preis 34,90 Euro
Auch als Online-Ausgabe
verfügbar

itialisieren. Listing 14 beschreibt, wie Sie hierbei
vorgehen müssen.
Zum Aufbau der Verbindung benötigen Sie
sowohl die Db-Klasse als auch die Server-Klasse des MongoDB-Clients. Das Client-Objekt erhalten Sie, indem Sie eine neue Instanz der Db-­
Klasse erzeugen. Der Konstruktor erhält den
Namen der Datenbank, das Serverobjekt und
die Optionen für die Verbindung.
Rufen Sie schließlich die open-Methode des
Clients auf, wird die Verbindung hergestellt. Eine weitere Besonderheit von MongoDB ist, dass
die Dokumente, die Sie anlegen, nicht direkt in
der Datenbank abgelegt werden, sondern in sogenannten Collections.
Das sind Sammlungen von Dokumenten, die
sich im weitesten Sinne mit Tabellen vergleichen lassen. Eine Collection können Sie über das
­Client-Objekt mit einem Aufruf der Methode
create­Collection erzeugen. Als ersten Wert akzeptiert diese Methode den Namen der Collection.
Der zweite Wert besteht aus einer CallbackFunktion, die für diese Collection ausgeführt
werden soll. Alle im Folgenden vorgestellten
Operationen werden innerhalb dieser CallbackFunktion ausgeführt.

Daten werden in einem JSON-ähnlichen
Format abgespeichert
Die Datensätze in MongoDB liegen in einem
JSON-ähnlichen Format vor. Das bedeutet, dass
Sie mit Node.js auf sehr einfache Art neue Datensätze erzeugen können. Der Client stellt Ihnen zu diesem Zweck die Methode insert zur
Verfügung. Die Verwendung dieser Methode
können Sie Listing 15 entnehmen.
Die insert-Methode erhält als erstes Argument
eine Objektstruktur, die den neuen Datensatz repräsentiert. Im Fall des Beispiels ist dies eine Adresse. Das zweite Argument besteht aus einem
Objekt mit Konfigurationsoptionen. Möchten
Sie im dritten Argument eine Callback-Funk­
tion angeben, die nach erfolgter Einfügung ausgeführt werden soll, müssen Sie hier das Schlüssel-Werte-Paar safe:true angeben. Nur dann wird
die Callback-Funktion erst nach dem Einfügen
ausgeführt.
Die Callback-Funktion erhält als erstes Argument ein Fehlerobjekt und als zweites das Ergebnis der Einfügung. Das zweite Objekt besteht
aus den Werten, die eingefügt wurden, plus der
eindeutigen ID, die MongoDB diesem Datensatz
zugewiesen hat.

Methode zum Auslesen von Daten
Haben Sie erst einmal Datensätze in der Datenbank angelegt, können Sie diese auch wieder mit
der find-Methode auslesen:
2/2014

Feature
collection.find().toArray(function
(err, docs)
{
if (err) throw err;
console.log(docs);

die
Callback-Funktion
im vierten Argument aktivieren, die ausgeführt
wird, sobald die Daten
aktualisiert sind.

});

Auf die mit createCollection erstellte Sammlung
von Dokumenten können Sie die find-Methode
aufrufen, um dort nach Dokumenten zu suchen,
die bestimmten Kriterien genügen.
Wenn Sie der find-Methode keinerlei Werte
übergeben, dann werden sämtliche Dokumente
ausgelesen. Sie können hier allerdings auch Abfragen definieren und auf diese Weise nur bestimmte Dokumente auswählen. So ist es beispielsweise möglich, nur Dokumente auszulesen, deren street-Schlüssel einen bestimmten
Wert aufweist.
Auf das von find zurückgegebene Objekt können Sie die toArray-Methode aufrufen. Diese
sorgt dafür, dass Ihnen in einer Callback-Funktion neben einem Fehlerobjekt ein Array mit
allen gefundenen Dokumenten zur Verfügung
steht. Haben Sie auf diese Weise Dokumente gefunden, kann es sein, dass Sie eines dieser Dokumente anpassen möchten. Der nächste Abschnitt zeigt Ihnen, wie Sie hierbei vorgehen
müssen.

Bestehende Datensätze anpassen
Wie bei vielen anderen Datenbanken haben Sie
auch bei MongoDB die Möglichkeit, die Werte bestehender Datensätze anzupassen. Mit der
update-Methode des MongoDB-Clients können
Sie dieses Ergebnis auf eine sehr einfache Weise erreichen:
var newAddress =
{street: 'Tower Hill',
place: 'London',
country: 'United Kingdom'};
collection.update({
street: 'Broadway 1'},
{$set: newAddress},
{safe: true},
function (err)
{
if (err) throw err;
});

Die update-Methode rufen Sie wie auch schon
die find-Methode auf eine Collection auf. Im ersten Argument formulieren Sie mit einem Objekt eine Bedingung, die ein Datensatz erfüllen
muss, damit er aktualisiert wird. Das zweite Argument gibt an, welche Werte ersetzt werden
müssen. Mit dem Konfigurationsobjekt im dritten Argument können Sie mit Hilfe von safe:true
2/2014

Hochperformante
Datenbank
Sind Datensätze in Ihrer Datenbank veraltet
oder müssen sie aus einem anderen Grund entfernt werden, können Sie
dies durch einen Aufruf
der remove-Methode erreichen:

MongoDB speichert Informationen
in Dokumenten, die im BSONFormat vorliegen (Bild 10)

collection.remove({
street:
'Tower Hill'},
{safe: true},
function (err, res)
{
if (err) throw err;
});

Die remove-Methode erhält als ersten Wert die
Bedingung, mit der die Datensätze identifiziert
werden, die gelöscht werden sollen. MongoDB
bietet eine Vielzahl weiterer Operationen, mit
denen Sie die Datenspeicherung innerhalb Ihrer Applikation unterstützen können.
Damit wird MongoDB zu einer hochperformanten Datenbank, wenn es darum geht, viele
Daten in Form von Dokumenten zu speichern.

Zusammenfassung
Wie Sie im Verlauf dieses Kapitels sehen konnten, unterstützt Node.js durch die als NPM-Pakete verfügbaren Datenbanktreiber eine Vielzahl von Datenbanken. Dabei ist die Unterstützung nicht nur auf relationale Datenbanken
beschränkt. Sie können stattdessen auch ver­
schiedenste nichtrelationale Datenbanken wie
Redis oder MongoDB verwenden. Mit Hilfe
der Treiber können Sie über die grundlegenden Datenbankfunktionen wie das Anlegen von
Datensätzen und dem Auslesen, Modifizieren
und Löschen von Datensätzen hinaus auch auf
erweiterte Features der Datenbanken zurückgreifen.
Je nachdem, welche Aufgabe Sie mit Ihrer Applikation lösen müssen, haben Sie die freie Wahl,
auf die dafür passende Datenbank zurückzugreifen.
[mb]
Wenn Sie mehr über Node.js erfahren wollen, lesen Sie das
gleichnamige Buch vom Autor dieses Artikels, Sebastian
Springer, erschienen im Verlag Galileo Computing.

Links zum Thema
Infos zum BSON-Format
▶ http://bsonspec.org
NoSQL
▶ http://de.wikipedia.org/
wiki/NoSQL
MongoDB
▶ www.mongodb.org
Redis
▶ http://redis.io
SQLite
▶ www.sqlite.org
MySQL
▶ www.mysql.de

39

HTML, CSS & JAVASCRIPT

CSS3-Transformationen

Die dritte Dimension
Inzwischen sind die 3D-Transformationen von CSS3 in allen aktuellen Browsern angekommen. Sie sind
die zentrale Technik für schicke Seitenübergangseffekte und mehr. Von Florence Maurice

Autorin

Dr. Florence Maurice
ist Autorin, Trainerin und Programmiererin. Ihr aktuelles Buch
ist dem Thema CSS3 gewidmet
und ist bei dpunkt erschienen
(ISBN 978-3-86490-118-8).
▶ www.maurice-web.de
Inhalt
CSS3-Transformationen.

40

M

it CSS-Transforms lassen sich HTML-Elemente drehen, verschieben oder in der Größe verändern. Und das funktioniert nicht nur
auf der flachen Ebene, sondern auch im 3DRaum. Als das WebKit-Team im Jahr 2009 seinen
Vorschlag für 3D-Transformationen vorstellte,
wirkte das wie CSS-Science-Fiction. Heute sind
Transformationen – auch in der 3D-Variante – in
allen aktuellen Browsern angekommen.
Ein wichtiges Feature sind sie allemal, denn
gerade die 3D-Variante eröffnet neue Gestaltungswelten. Die Einsatzbereiche sind vielfältig: So bilden Transformationen die Basis für
animierte Seitenübergänge, Bildüberblendeffekte und einiges mehr – ihr wahres Potenzial
zeigen sie in Kombination mit Transitions oder
Animations.
Transformationen sind in 2D und in 3D möglich. Da die 2D-Transformationen eigentlich ein
Subset der 3D-Transformationen sind, beginnen
wir mit diesen und sehen uns danach an, in welchen Punkten die 3D-Transformationen Erweiterungen darstellen.

Für alle Transformationen brauchen Sie die
Eigenschaft transform. Hinter dieser können
Sie unterschiedliche Funktionen schreiben – je
nachdem, ob Sie das Element drehen, skalieren
oder verschieben wollen.
Für Drehungen ist die rotate()-Funktion vorgesehen. In Klammern steht dabei der Winkel
der Drehung in der Einheit deg. Die folgende
Zeile dreht ein Element um 60 Grad im Uhrzeigersinn.
transform: rotate(60deg);

Nach den heutigen Browsergegebenheiten sollten Sie diese Angabe mit dem Präfix -webkitfür Chrome, Safari und andere WebKit-Browser schreiben, außerdem benötigt der Internet
Explorer 9 die Angabe -ms-. Der Internet Explorer ab Version 10 unterstützt allerdings die Standardangabe ohne Präfix.
Für ältere Firefox müssten Sie -moz- schreiben.
Seit Oktober 2012, als Firefox 16 erschienen ist,
interpretiert Firefox allerdings die Angabe ohne
2/2014

HTML, CSS & JAVASCRIPT
Präfix. Da Firefox mit einer Autoupdate-Funktion ausgestattet ist, können Sie heute auf das
-moz-Präfix verzichten.
Damit brauchen wir folgende Angaben, um
ein Element um 60 Grad zu drehen:
.gedreht {
-ms-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}

Wenn die Drehung entgegen dem Uhrzeigersinn erfolgen soll, muss die Gradangabe negativ sein.
.gedreht {
-ms-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}

durch Leerzeichen getrennt schreiben. Durch
folgenden Code wird ein Element gleichzeitig
verschoben, skaliert und gedreht.
transform: translate(80px, 80px)
scale(1.5, 1.5) rotate(45deg);

Die letzten Transformationsfunktionen heißen skewX() und skewY(). Sie verzerren ein Element um den angegebenen Grad. Das in früheren Versionen der Spezifikation beschriebene
skew() wird hingegen von Browsern nur noch
aus Gründen der Abwärtskompatibilität unterstützt.

Mit scale() können Sie die Größe von Elementen
variieren. Das Folgende vergrößert ein Element
auf das Doppelte:
transform: scale(2);

Auch nicht-proportionale Größenänderungen
sind möglich: scaleX() operiert nur auf der Breite, entsprechend verändert scaleY() nur die Höhe. Alternativ zu diesen beiden Funktionen können Sie zwei Werte hinter scale() schreiben, der
erste bezieht sich dann auf die x-, der zweite auf
die y-Achse:

Die Auswirkung von unterschiedlichen Werten für
transform-origin auf rotate()
und scale() (Bild 1)

transform-origin
Bisher war nur eine einzige CSS-Eigenschaft
bei den Transformationen involviert, nämlich
transform mit unterschiedlichen Transformationsfunktionen. Für 2D-Transformationen gibt
es noch eine weitere Eigenschaft mit Namen
transform-origin. Sie bestimmt den Ausgangspunkt der Transformation. Standardmäßig liegt
dieser in der Mitte des Elements, was sich auch
folgendermaßen schreiben lässt:
transform-origin: 50% 50%;

transform: scale(1, 2);

Diese Angabe belässt die Breite, aber macht das
Element doppelt so hoch.
Zum Verschieben von Elementen dient die
Funktion translate(). Schreiben Sie bei translate()
in Klammern die x- und y-Werte, um die das Element verschoben werden soll:

Bei transform-origin können Sie Prozentwerte
angeben, der erste bezieht sich auf die x-, der
zweite auf die y-Achse. Zusätzlich sind die von
der Positionierung von Hintergrundbildern bekannten Schlüsselwörter top, bottom, left, right
und center möglich. Außerdem können Sie den
Transformationsursprung auch über andere
Längenangaben bestimmen:

Oben ohne Transformation,
Mitte rotateY(), unten
rotateY() mit perspective beim
Elternelement (Bild 2)

transform: translate(20px, 100px);
transform-origin:

Damit ändert das Element seine Position, es erscheint 20 px weiter rechts (x-Achse) und 100 px
weiter unten (y-Achse). Neben translate() können Sie translateX() und translateY() nutzen. Dieselbe Wirkung wie durch die vorherige Codezeile ließe sich also auch so erzielen:
transform: translateX(20px)
translateY(100px);

Das letzte Beispiel zeigt, dass Sie mehrere Transformationen anwenden können, indem Sie die
Transformationsfunktionen hinter transform
2/2014

0px 44px;

Browserintern werden Prozentwerte übrigens immer in
feste Längenangaben wie Pixel
umgerechnet. Das sehen Sie,
wenn Sie in den EntwicklerTools von Firefox auf Berechnet
klicken.
transform-origin ist entscheidend für die Position, in der
sich ein mit rotate() behandeltes Element nach der Trans- ▶

41

HTML, CSS & JAVASCRIPT

Star-Wars-Texteffekt über
CSS-Transforms (Bild 3)

T

aining

s

Tr

formation befindet. Sie bekommen unterschiedliche
Ergebnisse, wenn Sie beispielsweise die Drehung
um den Mittelpunkt oder
über die rechte untere Ecke
durchführen. Aber transform-origin zeigt auch eine Auswirkung bei scale().
Wenn transform-origin auf
dem Mittelpunkt gesetzt
ist, vergrößert oder verkleinert sich das Element symmetrisch von allen Seiten. Ist hingegen die rechte untere Ecke als Transformationsursprung definiert, so bleibt diese fest und die Vergrößerung
findet von dort aus statt (Bild 1).
So weit, so gut – aber bisher ist alles noch
flach. Und damit kommen wir zu den 3D-Transformationen. Hier sind drei Achsen involviert:
die x-Achse ist wie gehabt die horizontal angeordnete, die y-Achse die senkrechte. Zusätzlich
gibt es die z-Achse, die sozusagen auf den Betrachter zu aus dem Bildschirm hinausragt.
Auch 3D-Transformationen setzen auf die Eigenschaft transform, aber es kommen eine Reihe
von neuen Transformationsfunktionen hinzu:
Neben den im 2D-Raum benutzten rotate() gibt
es für den 3D-Raum rotateX(), rotateY(), rotateZ()
oder rotate3d(). Ähnlich verhält es sich auch bei
den anderen Transformationsfunktionen.
Abgesehen von zusätzlichen Funktionen kommen bei den 3D-Transformationen auch weitere
Eigenschaften ins Spiel, nämlich perspective, perspective-origin, backface-visibility und transformation-style. Sehen wir uns diese einmal an.

Jetzt vom Profi
trainiert werden!
„Produktivität und
Know-how misst
man nicht in Gigahertz
oder Terabyte.“

Nicht ohne eine Perspektive
Die Perspektive ist ein entscheidender Faktor,
damit die 3D-Transformationen überhaupt als
3D wahrgenommen werden. Gehen wir von folgendem HTML-Code aus:
<div class="container">
<p>1</p>
<p>3</p>

-webkit-perspective: 700px;
perspective: 700px;
}

Jetzt sieht man deutlich die 3D-Drehung (Bild 2).
Die üblichen und empfohlenen Werte für die
Perspektive reichen von 200 px bis 900 px. Dabei gilt: Je geringer der Wert für die Perspektive
ist, desto extremer ist der Effekt.
Übrigens können Sie auch direkt dem Element, das transformiert wird, eine Perspektive zuweisen:
transform: perspective(450px)
rotateY(30deg);

Wenn Sie allerdings mehrere Elemente haben,
die transformiert im selben 3D-Raum erscheinen sollen, müssen Sie unbedingt dem umfassende Element die Perspektive zuweisen und
nicht den Einzelelementen.
Im Beispiel wurde die transform-Standardangabe durch eine Angabe mit dem Präfix -webkit- gedoppelt. Letzteres brauchen Sie für gängige WebKit-Browser. Weitere Präfixangaben sind
hingegen nicht notwendig: Der Internet Explorer unterstützt 3D-Transformationen zwar erst
ab Version 10, dafür ohne Präfix. Und beim
Firefox bräuchten Sie nur vor Version 16 das
Präfix -moz-.

Die Position des Betrachters
Sie können den Blickpunkt beeinflussen, von
dem aus die Elemente betrachtet werden. Dafür
ist die Eigenschaft perspective-origin gedacht. Sie
definiert die x- und y-Position, von der aus der
Betrachter auf die Elemente schaut. Der Standardwert ist 50% 50%, womit sich der Betrachter genau in der Mitte befindet. Aber das lässt
sich ändern:
perspective-origin: top center;

<p>4</p>
</div>

Drehen wir die p-Elemente auf der y-Achse:
.container p {
-webkit-transform: rotateY(60deg);
transform: rotateY(60deg);
}

42

.container {

<p>2</p>

Ivo Wessel
Softwareentwickler, Autor und Trainer

developer-media.de/trainings

schmaler aus als ursprünglich und kein bisschen
gedreht. Das ändert sich, wenn wir für das umfassende Element eine Perspektive definieren:

Beim Ergebnis ist allerdings so von Räumlichkeit keine Spur: Die Elemente sehen einfach nur

Diese Zeile legt die Position auf oben in der Mitte fest. Neben Prozentwerten sind bei perspective-origin auch Schlüsselwörter wie im Beispiel
oder feste Werte erlaubt. Intern werden sowohl
Schlüssel- als auch Prozentwerte vom Browser
in Pixel umgerechnet.
Wenn man ein Element um 180 Grad dreht,
sieht man seine Rückseite. Nehmen wir an, wir
haben ein Element mit einer Hintergrundfarbe und einem Text. Dreht man es jetzt um 180
Grad auf der y-Achse, wird das Element mit der
2/2014

HTML, CSS & JAVASCRIPT
Hintergrundfarbe sichtbar, wobei der Text auf
dem Kopf steht. Je nach Einsatzbereich kann es
gewünscht sein, dass ein Element nicht zu sehen ist, wenn nur seine Rückseite sichtbar wäre. An dieser Stelle kommt backface-visibility ins
Spiel. Mit backface-visibility: hidden schalten Sie
die Sichtbarkeit im gedrehten Zustand aus. Der
Standardwert ist hingegen backface-visibility: visible, das heißt die Rückseite ist sichtbar.

transform-style
Eine weitere Eigenschaft, nämlich transform-style, spielt nur eine Rolle bei verschachtelten transformierten Elementen. Nehmen wir folgende
HTML-Basis:
<div class="aussen">
<div class="mitte">
<div class="innen"></div>
</div>
</div>

Jetzt geben wir .aussen eine Perspektive
.aussen {
-webkit-perspective: 700px;
perspective: 700px;
}

Dann drehen wir sowohl .mitte als auch .innen:

Beginnen wir mit den Drehungen. Zur Verfügung stehen bei 3D-Transformationen die Eigenschaften rotateX(), rotateY(), rotateZ() und rotate3d().
rotateX() dreht das Element um die x-Achse,
dasselbe macht rotateY() für die y-Achse. Das
sind sicher die klassischsten Fälle, die Sie am
häufigsten einsetzen werden und die für einen
schönen 3D-Effekt sorgen. Wenn man etwa den
Vorspann der Star-Wars-Filme mit dem schräg
laufenden Einleitungstext per CSS nachbilden
möchte, benötigt man rotateX() (Bild 3).
rotateZ() dreht das Element auf der Z-Achse.
Von der Wirkung ist das nicht anders als eine
Drehung in 2D.
Außerdem gibt es rotate3d(), wenn die einfachen Drehungen nicht genügen. Hinter rotate3d() geben Sie vier Werte an. Die ersten drei
benennen einen Vektor, der die Achse der Drehung bestimmt, der dritte Wert den Grad der
Drehung. Ein Vektor ist wie ein Pfeil, der im
3D-Raum durch drei Zahlen beschrieben wird.
Der Ursprung des Vektors liegt dabei in dem
durch transform-origin benannten Punkt. Die erste Zahl benennt die Verschiebung in x-Richtung,
die zweite in y-Richtung und die dritte in zRichtung. Nehmen wir an, Sie haben einen Vektor wie (0, 1, 0), so gibt es keine Verschiebung
auf der x-Achse und auf der z-Achse. Hingegen
gibt es eine Verschiebung auf der y-Achse. Damit liegt der Vektor auf der y-Achse. Deswegen
ist die folgende Zeile:

.mitte, .innen {
background-color: black;

rotate3d(0,1,0, 60deg);

-webkit-transform: rotateX(60deg);
transform: rotateX(60deg);

gleichbedeutend mit:

}
.innen {

rotateY(60deg);

background-color: red;
}

Das Ergebnis: .mitte ist gedreht, was zu erwarten war. Das darin verschachtelte .innen-Element liegt allerdings flach auf .mitte. Ergänzt
man hingegen bei .mitte preserve-3d, so kann sich
das Kindelement aus dem Elternelement erheben (Bild 4):
.mitte {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}

Ein kleiner Wertmutstropfen: Der Internet Explorer interpretiert den Wert preserve-3d leider
nicht.
Das waren alle wichtigen Eigenschaften, die
für 3D-Transformationen relevant sind. Sehen
wir uns jetzt die Transformationsfunktionen an,
die zur Verfügung stehen.
2/2014

Ebenso entspricht rotate3d(1, 0, 0, 60deg) der Angabe rotateX(60deg), während rotate3d(0, 0, 1,
60deg) dieselbe Wirkung wie rotateZ(60deg) hat.
Aber natürlich sind die Fälle interessant, bei denen sich eine rotate3d()-Angabe nicht durch einen der anderen Ausdrücke ersetzen lässt.
Selbstverständlich können
Sie mehrere Drehungen bei einem Element spezifizieren. Dabei spielt allerdings die Reihenfolge der Transformationen eine Rolle. Wenn Sie zuerst die
Drehung auf der x-Achse und
danach die Drehung auf der yAchse durchführen, hat das ein vollständig anderes Ergebnis zur Folge als bei der umgekehrten Reihenfolge.
translateX() und translateY() kennen Sie von
den 2D-Transformationen. Im 3D-Raum gibt es
zusätzlich die Option einer Verschiebung auf ▶

Rechts mit transform-style:
preserve3d, links ohne (Bild 4)

43

HTML, CSS & JAVASCRIPT

Beim Hovern dreht sich die
Karte und die Vorderseite
wird sichtbar (Bild 5)

der z-Achse: Mit translateZ()
wird das Element näher an
den Betrachter gerückt beziehungsweise weiter von ihm
entfernt.
translateZ(-30px)
macht das Element kleiner,
weil es sich weiter vom Betrachter entfernt. Entsprechend wird das Element durch translateZ(30px)
vergrößert. Wie stark die Vergrößerung im konkreten Fall ist, hängt auch von der Perspektive
ab. Wie bei anderen Transformationen auch ist
der Effekt bei einem niedrigeren Wert für die
Perspektive extremer.
translate3d() fasst die anderen Werte zusammen. Durch folgende Angabe wird ein Element
um 30 px sowohl auf der x- als auch auf der yAchse und um 60 px auf der z-Achse verschoben:
transform: translate3d(30px, 30px,
60px);

Dasselbe Ergebnis erzielen Sie, wenn Sie die
Schritte einzeln formulieren:

Dargestellt wird eine Spielkarte mit Vorder- und
Rückseite. Zu Beginn ist die Rückseite zu sehen. Bei Mausberührung – alternativ ließe sich
auch eine andere Aktion als Auslöser wählen –
wird die Karte gedreht und die Vorderseite angezeigt. Die Basis für die Karte ist die folgende
HTML-Struktur:
<div class="karte">
<div class="vorderseite">♥</div>
<div class="rueckseite"></div>
</div>

Kommen wir zum CSS-Teil: Zuerst einmal müssen wir die beiden Kartenansichten übereinander platzieren. Das erreichen wir, indem wir für
.vorderseite und .rueckseite position: absolute festlegen. Außerdem erhält das umfassende .karteElement position: relative. Zusätzlich werden allen Elementen die gewünschten Ausmaße zugewiesen:
.karte

{

width: 150px;
height: 225px;
position: relative;

transform: translateX(30px)
translateY(30px) translateZ(60px);

}
.vorderseite, .rueckseite {

Bei scale() ist für den 3D-Raum scaleZ() hinzugekommen. Das Bemerkenswerte daran: Es vergrößert den Faktor, der bei translate() angegeben
wird. Nehmen wir folgendes Beispiel:

width: 150px;
height: 225px;
position: absolute;
top: 0;
}

transform: scaleZ(2)
translateZ(100px);

Dann hat dies dieselbe Auswirkung wie eine
­reine translateZ()-Angabe mit größerem Wert.
transform: translateZ(200px);

Modernizr

scale3d() zeigt hingegen keine Besonderheiten:
Es fasst die sonst über einzelne Schritte definierbaren Skalierungen zusammen. Die folgende Zeile:

Modernizr ist die JavaScript-Bibliothek zur Feature Detection.

transform: scale3d(1.5, 1.5, 0.75);

Anders als der Name vermuten
lässt, modernisiert Modernizr
nicht, sondern es diagnostiziert
nur: Mit Modernizr können Sie
überprüfen, ob ein bestimmtes
HTML5-oder CSS3-Feature unterstützt wird, und je nach Ergebnis alternative Formatierungen
festlegen. Dafür stellt Modernizr
sowohl eine CSS- als auch eine
JavaScript-Schnittstelle bereit.

44

könnte man also auch über mehrere Einzeltransformationsfunktionen schreiben:

Damit ist nur die Rückseite zu sehen. Gibt es bei
absolut positionierten Elementen Überschneidungen, so werden diejenigen Elemente, die im
Quellcode später stehen, weiter oben angezeigt.
Da bei uns im HTML-Part .rueckseite nach .vorderseite kommt, ist .rueckseite oben und verdeckt
vollständig die gleich große .vorderseite. Sollte eine andere Reihenfolge gewünscht sein, lässt sich
das über z-index bewerkstelligen.
Kommen wir zu den Drehungen. Im Beispiel
können wir die Perspektive bei den Elementen
direkt setzen. Die .vorderseite soll zu Beginn um
-180 Grad gedreht sein – also gegen den Uhrzeigersinn. Außerdem setzen wir die Sichtbarkeit der Rückseite auf hidden. Der Kürze halber
habe ich auf die zusätzliche Angabe mit -webkit- verzichtet:

transform: scaleX(1.5) scaleY(1.5)
scaleZ(0.75);

.vorderseite {
transform: perspective(450px)

Übrigens können Sie die genaue Position der
Elemente auch direkt über eine Matrix-Funk­tion
matrix3d() bestimmen.
Die Macht der Tranformationen zeigt sich besonders in Kombination mit Transitions oder
Animations. Sehen wir uns das am Beispiel an:

rotateY(-179.9deg);
backface-visibility: hidden;
}

Die Rückseite soll hingegen zu Beginn normal
sichtbar sein – das geben wir hier explizit über
2/2014

HTML, CSS & JAVASCRIPT
rotateY(0deg) an. Auch hier ist es wichtig, backface-visibility auf hidden zu schalten:
.rueckseite {
transform: perspective(450px)
rotateY(0deg);
backface-visibility: hidden;
}

Jetzt fehlt noch die Definition des zweiten Zustands, wenn also die Vorderseite dargestellt
werden soll. Im Beispiel soll dies dadurch ausgelöst werden, dass der Benutzer über .karte mit
der Maus fährt. In diesem Fall soll die .vorderseite nicht gedreht erscheinen:
.karte:hover .vorderseite {
transform: perspective(450px)
rotateY(0deg);
}

Hingegen soll die Rückseite gedreht werden:
.karte:hover .rueckseite {
transform: perspective(450px)
rotateY(179.9deg);
}

Damit die Drehung aber auch spürbar wird,
müssen wir eine Transition definieren – dieses
Mal mit dem WebKit-Präfix, weil es hier an zwei
Stellen erforderlich ist – bei transition und bei
transform:

Buckler bei Sitepoint – dafür sorgen, dass die
Drehung auch wirklich immer in die gewünschte Richtung erfolgt.
Diesen Effekt können Sie für verschiedene
Zwecke einsetzen, so ließen sich etwa zusätzliche Informationen zu einem Bild auf diese Art
unterbringen. Das Prinzip der Drehung und des
Anzeigens und Verbergens von Elementen lässt
sich aber für weit über dieses Beispiel hinaus gehende Fälle nutzen – es bildet eben auch die Basis für animierte Seitenübergänge oder animiertes Einblenden von Dialog- und ähnlichen Elementen.

Fallback-Lösungen
Bei den 2D-Transformationen ist die Browser­
unterstützung inzwischen sehr gut, einziger
Ausreißer ist der CSS3-Totalverweigerer Internet Explorer 8. Falls Sie hier nachbessern wollen oder müssen, hilft der proprietäre MatrixFilter. Den benötigten Code können Sie sich von
dem Tool »IE’s CSS3 Transforms Translator« erzeugen lassen.
Bei den 3D-Transformationen sieht die Unterstützung inzwischen fast genauso gut aus – nur
der IE 9 spielt noch nicht mit; denn der IE 9 hat
zwar die 2D-Transformationen implementiert,
aber nicht die 3D-Erweiterung. Bei Bedarf können Sie eine 2D-Transformation als Fallback für
3D-Transformationen einsetzen, wie im folgenden Beispiel:
div {
transform: scale(2) rotate(45deg);

.vorderseite, .rueckseite {

transform: scale(2)

-webkit-transition:

Transformationen beim W3C
▶ www.w3.org/TR/css-trans
forms-1
Matrix-Filter für den IE 8 erzeugen lassen
▶ www.useragentman.com/
IETransformsTranslator
3D-Transformationen bei Site­
point
▶ www.sitepoint.com/css3transformations-3d-back
face-visibility

rotate3d(0, 0, 1, 45deg);

-webkit-transform 3s;
transition: transform 3s;

Links zum Thema

}

}

Wenn Sie das Beispiel betrachten, sehen Sie deutlich, dass sich die Rückseite dreht und genau
dann, wenn sie senkrecht zum Benutzer steht,
die Vorderseite langsam sichtbar wird (Bild 5).
Das Beispiel demonstriert den Nutzen von
backface-visibility. Würden Sie dies nicht angeben, wäre beim Hovern die .rueckseite gedreht
– aber weiterhin oberhalb der .vorderseite und
würde sie verdecken. Hat man auf der Rückseite beispielsweise einen Text stehen, so wäre dieser nun spiegelverkehrt. In unserem Beispiel soll
die Rückseite im gedrehten Zustand nicht sichtbar sein – und das gelingt mit backface-visibility:
hidden. Denn wir ändern nicht wirklich die Zeichenreihenfolge, .rueckseite bleibt während des
ganzen Vorgangs oben, aber es wird eben dank
backface-visibility beim Hovern unsichtbar.
Vielleicht haben Sie sich gefragt, warum in
den Beispielen nicht 180 deg, sondern 179.9 deg
angegeben ist. Das soll – so zumindest Craig
2/2014

In diesem Beispiel steht zuerst die 2D-Transformation und zweiter Stelle die 3D-Transformation.
Browser, die mit 3D-Transformationen nichts
anfangen können, interpretieren die 2D-Transformation. In Browsern jedoch, die 3D-Transformationen verstehen, überschreibt die zweite Angabe die erste. Für den Einsatz müssen Sie
die herstellerspezifischen Präfixe ergänzen
Verwendet man die 3D-Transformationen
zum Ein- und Ausblenden von Elementen oder
Seiten, so empfiehlt es sich, zusätzlich als Fallbacklösung ein Fade-in/Fade-out zu definieren.
Bei Fade-Effekten wird das Ein- und Ausblenden über die Veränderung der opacity-Eigenschaft umgesetzt. Der Vorteil liegt darin, dass
sich die opacity-Eigenschaft auch in älteren IEs
über filter-Angaben nachbilden lässt. Übrigens
verfährt auch jQuery Mobile auf diese Art: In
Browsern, die 3D-Transformationen nicht unterstützen, wird stattdessen auf den Fade-Effekt
zurückgegriffen. 
[mb]

45

HTML, CSS & JAVASCRIPT
Das Canvas-Element in HTML5

Kleiner Zeichenkurs
Das neue <canvas>-Element in HTML5 bietet zahlreiche neue Möglichkeiten zur Gestaltung von
Illustrationen, Diagrammen und Bildern. Von Helmut Vonhoegen

Autor

Helmut Vonhoegen
arbeitet seit 1992 als freier Autor mit den Schwerpunkten Web­
entwicklung, Office-Anwendungen und XML. Er ist erreichbar
über:
▶ www.helmut-vonhoegen.de
Inhalt
Das Canvas-Element in ­HTML5.

Canvas mit einem eingezeichneten
Rechteck (Bild 1)

46

E

s spricht viel dafür, den Einstieg in H
­ TML5
nicht in einem Zug, sondern in kleineren Happen zu beginnen. Einige Bereiche von
­HTML5 sind in den bisherigen web & mobile developer-Ausgaben bereits behandelt worden, insbesondere die neuen Strukturelemente und der
Umgang mit Listen und Formularen. Hier beleuchten wir neue Möglichkeiten beim Einsatz
von Illustrationen, Diagrammen und Bildern.

Rechteckiger Bitmap-Bereich
Webseiten, die nur aus Textblöcken und starren
Bildern bestehen, zählen inzwischen zu den seltener werdenden Ruhezonen im Web. Zu den
Werkzeugen, mit denen mehr Leben und mehr
Dynamik auf die Seite kommt, gehört das in
­HTML5 bereitgestellte, neue Element <canvas>.
<canvas> ist definiert als ein von der gegebenen Auflösung abhängiger rechteckiger Bitmap-Bereich, in den Sie per JavaScript beliebige
Dinge hineinzeichnen. Was das Element auf der
Seite anzeigt, wird dynamisch erzeugt. Das Element <canvas> wird von dem Versprechen begleitet, Animationen ohne zusätzliche Add-ins
auf die Webseite zu bringen. Aktuell ist das, was
sich in einem Canvas ereignen kann, auf zweidimensionale Abbildungen beschränkt.
Zu beachten ist, dass alles, was in das Canvas gezeichnet wird, als Teil einer Bitmap auf
der Pixelebene und nicht als grafisches Element
wie bei einer Vektorgrafik eingefügt wird. Das
unterscheidet das HTML5-Canvas beispielsweise von den <canvas>-Elementen, die in Silverlight und XAML verwendet werden. Dort
geht es um Container
für Elemente, die als
skalierbare Vektorgrafiken eingefügt werden.
Das Canvas-Element in
­HTML ist eine leichter
zugängliche Alternative zu grafischen Lösungen mit SVG.
Jede Webseite darf
mehrere <canvas>-Elemente enthalten. Das
Element ist innerhalb
aller HTML-Elemente

erlaubt, die eingebettete Inhalte zulassen. Es hat
von sich aus keinen Inhalt. Was Sie zwischen
das Start- und Endtag schreiben, bestimmt im
Normalfall auch nicht den Inhalt des Canvas, es
liefert nur den Fallback-Inhalt. Dieser erscheint
nur, wenn der Browser das Element nicht unterstützt oder die Ausführung von JavaScript im
Browser unterbunden ist.
Wenn Sie ein <canvas>-Element mit einer Zeile
wie der folgenden in eine Seite einfügen, werden
Sie zunächst gar nichts zu sehen bekommen.
<canvas width="300" height="180">
</canvas>

Das Element hat von sich aus auch keinen Rahmen. Geben Sie der Seite selbst eine Hintergrundfarbe, werden Sie feststellen, dass der
Hintergrund des Canvas als Vorgabe transparent ist. Erste Spuren hinterlässt das Element
erst, wenn Sie beispielsweise eine Hintergrundfarbe oder einen Rahmen zuordnen.
<canvas width="300" height="180"
style="background:#FFFF00">
</canvas>

Mit den beiden Attributen width und height legen Sie die Größe des Bereichs fest. Fehlen Werte
für diese Attribute, gilt als Vorgabe width="300"
und height="150". Die Werte werden in Pixel
angegeben. Statt mit den Attributen zu arbeiten, können Sie aber auch entsprechende Werte über eine CSS-Regel (Cascading Stylesheets)
festlegen. Damit ein Skript das betreffende Element im DOM schnell finden kann, sollten Sie
über das id-Attribut noch eine eindeutige ID
einfügen.
<canvas id="r" ...>
</canvas>

Das Element lässt sich anschließend innerhalb
eines Skripts direkt ansprechen:
var canvas = document.
getElementById("r");

Für das <canvas>-Element ist der DOM-Baum
von HTML5 entsprechend erweitert worden. Je2/2014

HTML, CSS & JAVASCRIPT
des <canvas>-Element ist im DOM als eigenständige Instanz vertreten. Für jedes Element gilt dabei ein bestimmter Kontext. Erst über das drawing context-API stehen die Zeichenfunktionen
zur Verfügung, mit denen Sie den Bereich mit
Inhalt füllen. Diesen Kontext sprechen Sie in
Java­Script auf folgende Weise an:

Listing 1: Farbverlauf
function draw_gradients() {
var d1 = document.getElementById("d1");
var context = d1.getContext("2d");
var my_gradient =
context.createLinearGradient(
0, 0, 300, 0);
my_gradient.addColorStop(0, "white");

var context =

my_gradient.addColorStop(1, "blue");

canvas.getContext("2d")

context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 150);

Die Methode getContext() liefert Ihnen ein CanvasRenderingContext2D-Objekt, das alle Methoden und Eigenschaften anbietet, die Sie für
das Zeichnen brauchen. Eine genaue Beschreibung dieses Objekts finden Sie im WHATWGEntwurf für HTML5.

var d2 = document.getElementById("d2");
var context = d2.getContext("2d");
var my_gradient =
context.createLinearGradient(
0, 0, 0, 150);
my_gradient.addColorStop(0, "white");
my_gradient.addColorStop(1, "blue");
context.fillStyle = my_gradient;

Einfache Formen
Um ein Rechteck auf das Canvas zu bringen, arbeiten Sie mit den folgenden Eigenschaften und
Methoden:
■ Mit der Eigenschaft fillStyle wird eine Farbe, ein
Muster oder ein Farbverlauf zugeordnet. Erlaubt sind Werte in dem Format, das auch von
CSS benutzt wird. Vorgabe ist Schwarz.
■ Die Eigenschaft strokeStyle legt die Farbe, das
Muster oder einen Farbverlauf für den Zeichenstift fest.
■ Mit globalAlpha(Wert) wird die Transparenz geregelt: 0.0 steht für volle Transparenz, 1.0 für
keine Transparenz.
■ Um ein Rechteck in dem aktuellen fillStyle zu
zeichnen, verwenden Sie die Methode fillRect(x,
y, width, height), wobei x und y die Koordinaten
der oberen linken Ecke angeben. Diese Werte
beziehen sich jeweils auf das aktuelle Canvas.
■ Dagegen zeichnet strokeRect(x, y, width, height)
nur den Rahmen eines Rechtecks mit dem aktuellen Wert von strokeStyle.
■ Sollen alle Pixel in einem Rechteck gelöscht
werden, benutzen Sie clearRect(x, y, width,
height).
Ein einfaches Beispiel für eine entsprechende
Java­Script-Funktion sieht so aus:
function draw_rectangle() {
var rectangle_cv =
document.getElementById("r");
var r_context =
rectangle_cv.getContext("2d");
r_context.fillRect(0, 0, 200, 100);

context.fillRect(0, 0, 300, 150);
}

Ein horizontaler und ein
vertikaler Farbverlauf in
einem Canvas (Bild 2)

width="300" height="180"
onclick="draw_rectangle();
return false">
</canvas>

In diesem Fall zeichnet das
Skript ein schwarzes Rechteck
in das Canvas, wobei die linke
obere Ecke mit der des Canvas
übereinstimmt (Bild 1).
Für Flächen oder Pfade lassen
sich nicht nur solide Farben verwenden, sondern auch Farbverläufe, also stufenlose Übergänge
zwischen zwei oder mehreren Farben. Das drawing context-API unterstützt zwei Typen:
■ createLinearGradient(x0, y0, x1, y1) malt einen
Verlauf entlang einer Linie von den Koordinaten (x0, y0) nach (x1, y1).
■ createRadialGradient(x0, y0, r0, x1, y1, r1) malt
einen Verlauf entlang eines Kegels zwischen
zwei Kreisen. Die ersten drei Argumente geben die Koordinaten des Mittelpunktes und
den Radius des Startkreises an, die letzten drei
Argumente die Koordinaten des Mittelpunktes
und den Radius des Zielkreises.
Um das ganze Canvas mit einem linearen Verlauf auszumalen, richten wir im Folgenden einen einfachen Verlauf zwischen zwei Farben
ein. Zunächst ist dafür ein entsprechendes Objekt nötig:

}

Links zum Thema
Zugang zu dem Entwurf für
die HTML5-Spezifikation beim
W3C
▶ www.w3.org/TR/2011/
WD-html5-20110525
Zugang zu dem Entwurf für die
HTML5-Spezifikation bei der
WHATWG-Community
▶ www.whatwg.org/specs
Empfehlung des W3C zu CSS
Selectors Level 3
▶ www.w3.org/TR/selectors

var gradient =

Um das Zeichnen des Rechtecks auszulösen,
bauen Sie beispielsweise in das <canvas>-Element den Aufruf eines onClick-Handlers ein:
<canvas id="r"

2/2014

context.createLinearGradient(
0, 0, 300, 0);

In diesem Fall sind beide Werte für die y-Koordinaten gleich null, der Verlauf fließt also ▶

Canvas-Komponente für IE 7.0
und 8.0
▶ http://code.google.com/p/
explorercanvas

47

HTML, CSS & JAVASCRIPT
gleichmäßig von links nach rechts. Im nächsten
Schritt ordnen wir dem Verlaufsobjekt Farben
zu. Dies geschieht in Form von mindestens zwei
Farbstopps. Wo diese Stopps liegen, legen Sie
durch das erste Argument fest, das Werte zwischen 0 und 1 (einschließlich) annehmen darf:

nen von Kurven gibt es zusätzlich noch die Methoden context.quadraticCurveTo(), context.bezierCurveTo(), context.arcTo() und context.arc(). Mit
der letzten Methode lässt sich relativ einfach ein
Kreis oder ein Teilkreis zeichnen:
p_context.arc(50, 20, 10,

gradient.addColorStop(0, "white");

0, Math.PI * 2, false)

gradient.addColorStop(1, "blue");

Listing 2: Dreieck

Anschließend verwenden wir das Verlaufsobjekt, um die fillStyle-Eigenschaft des context-Objekts festzulegen. Listing 1 zeigt eine Funktion,
die ein Canvas mal mit einem horizontalen und
mal mit einem vertikalen Verlauf füllt (Bild 2).

function draw_path() {

Die beiden ersten Argumente sind die Koordinaten des Kreismittelpunkts, das dritte Argument gibt den Radius an. Es folgen der Startwinkel und der Endwinkel. Math.PI * 2 – das entspricht 360° – ergibt einen ganzen Kreis, Math.
PI einen Halbkreis. Das letzte Argument gibt
an, ob im Uhrzeigersinn gezeichnet werden soll
oder nicht.

Pfade zeichnen

Diagramm per Skript

var rectangle_cv =
document.getElementById("p");

Das Rechteck ist bisher die
var p_context =
einzige Form, für die im drarectangle_cv.getContext("2d");
wing Context direkte Methop_context.lineWidth = 3;
den zum Zeichnen zur Verp_context.fillStyle = "#FF0000";
fügung stehen. Alle anderen
p_context.strokeStyle = "#0000FF";
Formen zeichnen Sie mit Hilp_context.beginPath();
fe von entsprechenden Pfap_context.moveTo(10, 100);
p_context.lineTo(150, 10);
den in das Canvas. Um auf
p_context.lineTo(290, 100);
das Canvas gerade Linien zu
p_context.closePath();
zeichnen, verwenden Sie die
p_context.fill();
context-Methoden moveTo(x,
p_context.stroke();
y) und lineTo(x, y). Die erste
}
Methode legt den Startpunkt
der Linie fest, die zweite gibt
an, wohin die Linie von diesem Startpunkt aus gezogen
wird. Weitere Liniensegmente lassen sich direkt anschließen. Die Linien können aber
nur sichtbar werden, wenn
Sie mit der Eigenschaft strokeStyle eine Farbe, ein Muster oder einen Farbverlauf dafür festlegen. Um eine Form
Ein Dreieck mit einem Pfad
gezeichnet (Bild 3)
zu zeichnen, legen Sie neben der Farbe für den
Strich mit lineWidth noch eine Strichbreite und
mit fillStyle eine Füllfarbe fest.
Mit der Methode beginPath() starten Sie einen
Pfad, gezeichnet wird dabei aber noch nichts.
Mit closePath() geben Sie an, dass die Form an
dieser Stelle geschlossen werden soll. Erst die
am Ende aufgerufene Methode stroke() macht
den Pfad sichtbar und fill() füllt die von dem
Pfad eingeschlossene Form mit der angegebenen Füllfarbe. Listing 2 zeigt ein Skript, das ein
gleichseitiges Dreieck in ein <canvas>-Element
zeichnet. Bild 3 zeigt das Ergebnis.
Wird ein Pfad nicht geschlossen, steht noch
die Eigenschaft context.lineCap zur Verfügung.
Die Anweisung context.lineCap = "round" rundet
beispielsweise das Linienende. Für das Zeich-

48

Um eine etwas anspruchsvollere Aufgabe anzugehen, zeigen wir im Folgenden, wie Sie ein
komplettes Diagramm per JavaScript in ein Canvas zeichnen. Dabei sollen mehrere Funktionen
verwendet werden, die am Ende über eine übergeordnete Funktion aufgerufen werden. Zunächst wird eine Funktion draw_coord benötigt:
function draw_coord(dia)
{
dia.beginPath();
dia.moveTo(55, 20);
dia.lineTo(55, 260);
dia.moveTo(55, 260);
dia.lineTo(480, 260);
dia.strokeStyle = "#000";
dia.stroke();
}

Die nächste Funktion draw_grid fügt horizontale Hilfslinien in den Zeichnungsbereich des
Diagramms ein. Auch hier reichen die Methoden zum Zeichnen von Pfaden, wobei eine forSchleife verwendet wird:
function draw_grid(dia) {
dia.beginPath();
for (var y = 35; y < 260; y += 25)
{
dia.moveTo(55, y);
dia.lineTo(480, y); }
dia.strokeStyle = "#D3D3D3";
dia.lineWidth = 0.5;
dia.stroke();
}

Auch die Säulen des Diagramms lassen sich
über die Funktion draw_bar mit den Pfad-Methoden erzeugen, der Strich wird dazu einfach
entsprechend verbreitert.
2/2014

HTML, CSS & JAVASCRIPT
function draw_bar(dia)
{
dia.strokeStyle = "#CD5C5C";
dia.lineWidth = 40;
dia.beginPath();
dia.moveTo(120, 260);
dia.lineTo(120, 60);
dia.moveTo(220, 260);

Um das oben begonnene Diagramm zu beschriften, lassen sich zwei Funktionen verwenden. Die erste Funktion draw_xlabels bestimmt auf einfache Weise
die Beschriftungen der xAchse:

dia.lineTo(220, 120);
dia.moveTo(320, 260);

function draw_

dia.lineTo(320, 90);

xlabels(dia) {

dia.moveTo(420, 260);

dia.font = "bold

dia.lineTo(420, 70);

12px sans-serif";

dia.stroke();

dia.fontStyle = "FF0000";

}

Ein Diagramm per Skript
gezeichnet (Bild 4)

dia.textAlign = "right";
dia.textBaseline = "bottom";

Die Endpunkte der Säulen entsprechen dabei
den y-Werten des Diagramms. Wenn Sie dort
mit Variablen arbeiten, die ihren Wert von einer entsprechenden Datenquelle erhalten, haben Sie ein Diagramm, das sich automatisch diesen Werten anpasst. Das ist der Punkt, wo sich
der Einsatz eines Canvas gegenüber einem einfachen Abbild eines Diagramms zu lohnen beginnt.

dia.fillText("2008", 140, 280);
dia.fillText("2009", 240, 280);
dia.fillText("2010", 340, 280);
dia.fillText("2011", 440, 280);
}

Die Funktion für die y-Achse ist etwas komplexer, da die Werte skaliert sind:
function draw_ylabels(dia)

Beschriftungen
Wenn Sie ein solches Diagramm oder eine sonstige Illustration in ein Canvas ablegen, benötigen Sie in der Regel Beschriftungen, damit
die Betrachter die Grafik auch verstehen. Solche Texte zeichnen Sie mit der fillText()-Methode in das Canvas. Als Argument geben Sie zunächst den Text an, anschließend die Koordinaten der Stelle im Canvas, an der der Text beginnen soll. Das Verfahren ähnelt dem Einfügen
von Texten in eine Bitmap, wie es in einem Bildbearbeitungsprogramms üblich ist. Das heißt
auch, dass die Gestaltungsmöglichkeiten entsprechend eingeschränkt sind. Es gibt hier, anders als bei den sonstigen Texten in der Webseite, kein Box-Modell, und die üblichen CSS-Eigenschaften wie float, margin oder padding lassen
sich nicht anwenden. Immerhin gibt es im Kontext des Canvas aber einige Attribute, um die
Schriftgestaltung zu beeinflussen. Diese Einstellungen überschreiben die für das Canvas vorgegebene Schriftart und Schriftgröße:
■ Mit font geben Sie die Schrifteigenschaften an,
die Sie sonst mit CSS-Regeln festlegen: style,
font variant, font weight, font size, line height und
font family.
■ Mit textAlign bestimmen Sie die Ausrichtung.
Mögliche Werte sind start, end, left, right und
center.
■ Die Eigenschaft textBaseline legt fest, wohin der
Text in Bezug auf den Ausgangspunkt gezeichnet wird. Hier sind die Werte top, hanging, middle, alphabetic, ideographic und buttom erlaubt.
2/2014

{
dia.font = "bold 12px sans-serif";
dia.fontStyle = "FF0000";
dia.textBaseline = "top";
dia.textAlign = "right";
dia.textBaseline = "bottom";
for (var y = 35; y < 260; y += 25) {
dia.fillText(260-y, 40, y+5);
}
}

Um das Diagramm zu generieren, fehlt nur noch
eine Funktion, hier mit dem Namen draw_diagram, die die beschriebenen Funktionen nacheinander im Kontext des Canvas aufruft:
function draw_diagram()
{
var g = document.getElementById("g");
var dia = g.getContext("2d");
draw_grid(dia);
draw_coord(dia);
draw_ylabels(dia);
draw_xlabels(dia);
draw_bar(dia);
}

Bild 4 zeigt das fertige Diagramm. Das Einfügen
von Texten in ein Canvas macht diese Texte zu
Teilen der Bitmap. Diese Teile des Canvas lassen
sich über den DOM-Baum nicht mehr einzeln
ansprechen und verändern. Falls dies absehbar
notwendig werden kann, sollte besser mit SVGIllustrationen gearbeitet werden. 
[mb]

49

Heft-DVD
Jahresarchiv 2013

Inhalt der Heft-DVD
Auf der Heft-DVD finden Sie in einem PDF-Archiv alle Artikel, die im Jahr
2013 in der web & mobile developer erschienen sind.
Wir haben für Sie auf der Heft-DVD ein PDF-Archiv mit allen Ausgaben des Jahres 2013 zusammengestellt. Insgesamt 1773 Seiten zum Durchlesen und Recherchieren über einen schnellen
Index. Ein kleine Einführung auf der DVD zeigt,
wie Sie das Archiv unter Windows und Linux
am besten und effektivsten nutzen.

Linux Mint 16 Live- und Installer-DVD
Linux Mint 16 basiert auf Ubuntu 13.10,
bringt aber bereits viele Multimedia-Codecs
und Treiber sowie anwenderfreundliche Assistenten mit. Die Desktop-Umgebung Cinnamon forkt Gnome 3 und unterstützt daher viele Gnome-3-Funktionalitäten. Der Display-Manager MDM wurde in Linux Mint 16
überarbeitet; er ist schneller und erlaubt einen einfachen Wechsel zwischen verschiedenen Anwendern.

PHP 5.5.6 für Windows & Linux
PHP ist eine Skriptsprache mit einer an C angelehnten Syntax, die hauptsächlich zur Erstellung dynamischer Webseiten verwendet
wird. PHP ist Open-Source-Software unter
der GNU General Public License (GPL). PHP
zeichnet sich besonders durch die leichte Erlernbarkeit, die breite Datenbankunterstützung und Internet-Protokolleinbindung sowie die Verfügbarkeit zahlreicher zusätzlicher
Funktionsbibliotheken aus.

Weitere DVD-Highlights: die neueste Version
der NetBeans-IDE, die aktuellste PHP-Version
für Windows und Linux, das Android Software
Development Kit r22.3, die Virtualisierungstools VirtualBox 4.3.4 und VMware Player 6.0.1,
jeweils für Windows und Linux, sowie zahlreiche Skripts.
[mb]

Android SDK r22.3
Das Android SDK ist eine Umgebung für die
Entwicklung Java-basierter Applikationen für
Googles Mobilplattform Android. Sie enthält
die Dalvik VM zum Emulieren von mobilen
Geräten. Das System verwendet einen stark
modifizierten Linux-Kernel. Das Software Development Kit für bildet das komplette mobile Betriebssystem samt Hardware und vorinstallierten Anwendungen wie Adressbuch,
Webbrowser und Google Maps ab.

Oracle VirtualBox 4.3.4
Mit der kostenlosen Virtualisierungs-Software können Sie auf einem Windows- oder
Linux-Host-PC mit einem komfortablen Assistenten Windows- und Linux-Systeme als
Gast-Computer installieren. VirtualBox emuliert dabei einen kompletten Computer mit
allen Hardwarekomponenten wie Arbeitsspeicher, Festplatten, CD/DVD-Laufwerken,
Netzwerk-/Soundkarte und sogar externen
USB-Geräten.

keine dvd mehr da?
Unsere Zusammenstellung der Software erspart
Ihnen mühsame Internetrecherche. Vielleicht hat
aber schon ein Leser vor Ihnen genau das auf
der DVD gefunden, was er unbedingt brauchte
und schon lange gesucht hat – und die DVD
nicht mehr zurück- beziehungsweise weitergegeben. Kein ­Problem: Anruf, Fax oder Mail genügt,
und wir senden Ihnen Ihre persönliche Scheibe zu:
E-Mail: leserservice@nmg.de
Tel.: +49 (0)89 74117-205
Fax: +49 (0)89 74117-101

50

Auf der Heft-DVD
befinden sich
zahlreiche Tools
und Programme
2/2014

HTML, CSS & JAVASCRIPT
CSS3

Flexible Grids mit Sass
Es gibt zahlreiche Frameworks, die sich mit der Gestaltung von flexiblen Gittern beschäftigen. In diesem
Workshop zeigen wir Ihnen, wie Sie diese mit Hilfe von Sass umsetzen. Von Andreas Hitzig

Autor

Andreas Hitzig
arbeitet als Director IT bei einem mittelständischen Produktionsunternehmen und ist seit
fast 15 Jahren als IT Autor tätig.
Inhalt
Flexible Grids mit Sass.
Ressourcen
Die Listings zum Artikel finden
Sie auf www.webundmobile.de
in der Rubrik Aktuelles Heft.

Es soll ein Layout mit 6 Spalten
und einem geringen Innenabstand
von insgesamt 10 Prozent abgebildet werden (Bild 2)

52

D

er Aufbau von Websites auf Basis von Gittern oder Grids ist
heute zu einer gebräuchlichen Vorgehensweise geworden. Dies funk­
tioniert sowohl bei einem klassischen Layout einer Website als auch
bereits ansatzweise beim Respon­
sive Design. Bei Letzterem ist es
wichtig, keine starren Strukturen
mit festen Spaltenbreiten zu haben,
sondern die Verteilung der Spalten entsprechend anteilig festzulegen. Damit erhalten Sie auch bei
unterschiedlichen Seitenbreiten immer ein konsistentes Aussehen der
Webseite.

Entwicklung mit Sass
In diesem Workshop verfolgen wir
zwei verschiedene Ansätze. Im ersten Fall bauen wir das flexible Gitter Der Gridulator berechnet die Spaltenbreite bei vorgegebener
komplett auf Sass und CSS auf, oh- Bildschirmbreite und Anzahl der Spalten (Bild 1)
ne weitere Frameworks zu verwenHaben Sie bis jetzt bewusst auf ein gitterbaden. Im zweiten Fall nutzen wir das Framework
siertes Framework verzichtet, dann mussten Sie
Unsemantic (http://unsemantic.com).
eine Reihe von Arbeiten manuell verrichten. DaIm ersten Fall haben Sie mehr oder weniger
zu gehört auch die Berechnung der Breite der
die volle Kontrolle über Ihre Entwicklung, da
einzelnen Spalten. Es gibt im Internet zahlreiSie kein weiteres Framework als zusätzliche
che Werkzeuge, die Sie bei dieser Berechnung
Schicht nutzen. Damit wird auch der Umfang
unterstützen. Der Gridulator (http://gridulator.
des zusätzlichen Programmcodes, den Sie uncom) erlaubt Ihnen beispielsweise die Eingabe
nötigerweise mitschleppen, minimiert.
einer maximalen Breite sowie die Anzahl der geSollten Sie bereits gute Kenntnisse von Sass
wünschten Spalten. Auf dieser Basis macht das
besitzen, ist der erste Ansatz die logische KonWerkzeug verschiedene Vorschläge, die sich jesequenz, da er die Vorteile der Entwicklung mit
weils durch den Abstand zwischen den Spalten
dem vorhandenen Wissen kombiniert.
unterscheiden (Bild 1).
Befinden Sie sich hinsichtlich Ihrer KenntnisNachdem Sie die absoluten Zahlen besitzen,
se zu Sass eher noch im Anfängerstadium, dann
wie breit die jeweilige Spalte ist, müssen Sie
sollten Sie auf das Framework Unsemantic setdas Ganze natürlich noch in Prozentwerte umzen, da dies ebenfalls komplett auf Sass und
wandeln.
Compass aufsetzt und damit deren Vorteile entHaben Sie beispielsweise eine Gesamtbreite
sprechend ausnutzt. Dies bleibt jedoch ein wevon 1120 Pixel und eine Spaltenbreite von 126
nig unter der Oberfläche verborgen, wenn Sie
Pixel, dann beträgt der Prozentwert entspredies wünschen.
chend 126/1120*100 Prozent, also in diesem Fall
11,25 Prozent.
Im Vorfeld sollten Sie sich überlegen, in welcher Struktur Sie Ihren Programmcode ablegen
möchten. Die minimale Variante ist eine SCSSDatei, die zum Abschluss in eine CSS-Datei um2/2014

HTML, CSS & JAVASCRIPT
gewandelt wird. Natürlich lässt sich diese Struktur entsprechend ausbauen, damit Sie am Ende die einzelnen inhaltlichen Teile wie Typografie, die Variablen oder die Gridstruktur separieren können. Wir beschränken uns in diesem Beispiel auf eine Minimalstruktur mit einer
SCSS-Datei, da der Fokus auf der Gestaltung eines Grids liegt.
Zu Beginn legen Sie die Rahmenparameter Ihrer Webseite fest. Dies sind die maximale Breite,
die maximale Anzahl an Spalten sowie die Spaltenbreite und den Abstand zwischen den Spalten als Prozentwert. Dies könnte abhängig von
Ihrem Layout beispielsweise zu folgendem Ergebnis führen:
$max-width: 1000px;
$column-width: 15%;
$gutter-width: 2%;
$maximum-columns: 6;

In diesem Fall gibt es maximal sechs Spalten mit
einer Breite von jeweils 15 Prozent. Damit sind
90 Prozent des Bildschirms bereits belegt. Die
restlichen 10 Prozent werden für die Innenabstände zwischen den Spalten verwendet (Bild 2).

Wenn Sie eine verschachtelte Struktur aufbauen möchten, dann kommt der zweite Parameter zum Einsatz. Dieser stellt den Bezug zum
darüber liegenden Container her und gibt an,
wie viele Spalten das übergeordnete Element
besitzt:

Die Funktionen zur Umwandlung von Prozentwerten in
Pixel wurden dem Mixin
Bourbon entnommen (Bild 3)

div.parent {
width: columns(3);

Berechnung der Breite in Pixel
Nachdem Sie die Angabe in Prozent definiert
haben, müssen Sie diese natürlich für die Berechnung der entsprechenden Breite der jeweiligen Spalte wieder in Pixel zurückverwandeln.
Sass bietet zahlreiche Mixins zur Erweiterung.
Die beiden folgenden Funktionen sind in abgewandelter Form in einer Mixins-Sammlung
namens Bourbon (http://bourbon.io) zu finden
(Bild 3). Daraus sind die beiden Funktionen zur
Berechnung der Spaltenbreite und der Zwischenräume entstanden (Listing 1).
Mit diesen Funktionen ist es im Anschluss
möglich, eine erste Festlegung für die Anzahl
der Spalten und deren Aussehen zu treffen. Der
folgende Programmcode zeigt deren Anwendung. Sie benötigen für die Funktion columns()
zumindest einen Parameter, der die Anzahl der
Spalten repräsentiert.

margin-right: gutter;
div.child {
width: columns(1, 3);
margin-right: gutter(3);
}
}

In diesem Fall gibt es einen Container mit drei
Spalten und ein verknüpftes Element mit einer Spalte.

Benötigte Mixins
Die klassischen Frameworks arbeiten normalerweise mit Klassen, in denen Sie das Aussehen
basierend auf der Anzahl der Spalten festlegen.
In Kombination mit einem div-Tag wird entsprechend das Layout gestaltet. Diese Festlegungen
realisieren wir in Sass über ein Mixin. Das ▶

Listing 1: Spaltenbreite
@function columns($columns, $container-columns: $maximum-columns) {
$width: $columns * $column-width + ($columns - 1) * $gutter-width;
$container-width: $container-columns * $column-width + ($containercolumns - 1) * $gutter-width;
@return percentage($width / $container-width);
}
@function gutter($container-columns: $maximum-columns, $gutter:$gutter-width) {
$container-width: $container-columns * $column-width + ($containercolumns - 1) * $gutter-width;
@return percentage($gutter / $container-width);
}

2/2014

53

HTML, CSS & JAVASCRIPT
&:before, &:after { content: "";

Listing 2: Offset-Columns
@function offset-columns($columns) {
$margin: $columns * $column-width + $columns * $gutter-width;

display: table; }
&:after { clear: both; }
}

@return $margin;
}
@mixin offset($from-direction, $columns) {
@if $from-direction == left {
float: left;
margin-left: offset-columns($columns);
}

Dies ist nur eine minimalistische Implementierung, die bei Bedarf entsprechend erweitert werden kann:
@mixin nesting {
padding: 0;

@if $from-direction == right {

& > div {

float: right;

float: left;

margin-right: offset-columns($columns);
}

margin-right: gutter();

}

@include border-box;
}
}

folgende Beispiel zeigt die generische Implementierung:
@mixin row {
width: 100%;
max-width: $max-width;
margin: 0 auto;
@include clearfix;
@include nesting;
}

Neben der Breite und der maximalen Breite benötigen Sie noch den Abstand sowie einen Verweis auf ein weiteres Mixin nesting. Dieses dient
dazu, eine entsprechend verschachtelte Struktur zu gewährleisten. Zusätzlich ist ein weiteres Mixin clearfix notwendig, um die vorhandenen Strukturen wieder zurückzusetzen. Dieses
könnte wie folgt aussehen:
Eine komplette Umsetzung
eines flexiblen Grid-Modells
finden Sie in dem GitHub-Projekt
von Steve Hickey (Bild 4)

@mixin clearfix {
zoom: 1;

Die Verschachtelungen werden über das Mixin
nesting geregelt, wobei an dieser Stelle vorrangig der Innenabstand, das Thema Fließmuster
sowie der Abstand zum nächsten Nachbarn definiert werden. In diesem wird zusätzlich noch
auf ein weiteres Mixin namens border-box verwiesen. Dieses dient dazu, das CSS-Thema boxsizing konsistent über die vorhandenen Browser-Engines abzudecken:
@mixin border-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Wenn Sie bereits mit anderen Grid-Frameworks
gearbeitet haben, werden Ihnen an dieser Stelle noch die sogenannten Offset-Columns fehlen, mit denen Sie leere Spalten generieren können. Ein Vorschlag zur Implementierung ist in
der folgenden Funktion sowie dem zugeordneten Mixin zu finden (Listing 2).
Damit haben Sie die Grundfunktionen für die
Umsetzung eines flexiblen Grids auf Basis von
Sass zusammen. Es fehlen nur noch die entsprechenden Umsetzungen für die verschiedenen
Layout-Möglichkeiten, die sich an der Anzahl
der Spalten orientieren.
Eine komplette Umsetzung dieses Ansatzes finden Sie in dem GitHub-Projekt von Steve ­Hickey, das mich zu diesem Ansatz inspiriert hat. Sie finden dort eine komplette Umsetzung der Idee in Sass und können selbst
mit den Einstellungen und Mixins experimen­
tieren (https://github.com/freshtilledsoil/forgetframeworks-demo-bfe) (Bild 4).

Unsemantic Framework
Als Alternative zur direkten Nutzung von Sass
bietet sich das neue Framework Unsemantic

54

2/2014

HTML, CSS & JAVASCRIPT
(http://unsemantic.com) an. Dieses ist der direkte Nachfolger des 960-Grid-Systems und eliminiert die Nachteile im Zusammenspiel mit Responsive Design. Darüber hinaus baut es ebenfalls komplett auf Sass und Compass auf.
Das Framework arbeitet von der Vorgehensweise analog zu 960.gs, allerdings werden anstelle einer bestimmten Anzahl von Spalten die
Aufteilungen mit Hilfe von Prozentangaben abgebildet.
Wenn Sie beispielsweise eine Spalte benötigen, die 50 Prozent der Fensterbreite einnehmen
soll, dann weisen Sie dieser die Klasse grid-50
zu (Bild 5).
Im folgenden Beispiel zeigen wir Ihnen, wie
Sie eine Webseite auf Basis von Unsemantic aufbauen.
Die Webseite kennzeichnen Sie entsprechend
mit <!DOCTYPE html> als HTML5-Webseite.
Im Kopfbereich der Webseite gibt es zu Beginn drei Meta-Tags. Mit diesen legen Sie den
Zeichensatz, den Kompatibilitätsmodus sowie
den Viewport fest. Letzteres sorgt für eine optimale Darstellung auf den unterschiedlichen
Endgeräten:

Das Framework Unsemantic erlaubt die Aufteilung einer Webseite auf Basis von
Prozentangaben (Bild 5)

unsemantic-grid-responsive.css" />
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible"

Das Erstellen des ersten Grids
mit Unsemantic umfasst nur
­ enige Programmzeilen (Bild 6)
w

In diesem Fall befindet sich die Datei im Verzeichnis /asssets/stylesheets.

content="ie=edge" />
<meta name="viewport" content=
"width=device-width,
initial-scale=1, minimum-scale=1,
maximum-scale=1" />
...
</head>

Es kommen innerhalb des Meta-Tags viewport
mehrere Parameter zum Einsatz:
■ width: Legt die Breite des Bildschirms aus, für
welche die Anzeige optimiert ist. Im Beispiel
wird immer die maximale Breite des Bildschirms genutzt.
■ initial-scale: Legt die Skalierung der Anzeige
fest. Der Wert 1 entspricht einer Darstellung
ohne Skalierung.
■ minimum-scale: Gibt an, bis zu welchem Faktor
der Benutzer die Anzeige verkleinern kann. Im
Beispiel wird mit dem Faktor 1 eine Verkleinerung ausgeschlossen.
■ maximum-scale: Gibt entsprechend an, bis zu
welchem Faktor die Anzeige vergrößert werden kann.
Im nächsten Schritt müssen Sie noch die CSSDatei des Frameworks einbinden. Dies geschieht ebenfalls im Kopf der Webseite über ein
link-Tag:

Das erste Grid darstellen
Ein Gitter benötigt auch bei der Nutzung des
Frameworks Unsemantic nur wenige Programmzeilen an Coding. Die Klammer zwischen allem bildet ein div-Tag, dem die Klasse
grid-container zugewiesen wurde.
Auf der nächsten Ebene können Sie bereits
mit der Definition der einzelnen Säulen beginnen. In unserem Fall soll eine Aufteilung in drei
Teile erfolgen, wobei der erste Teil 50 Prozent
umfasst und die anderen beiden Teile jeweils
25 Prozent. Dies wird jeweils über eine Klasse grid-xx abgebildet, wobei xx der Prozentzahl

entspricht (Listing 3).

Listing 3: Grid
<div class="grid-container">
<div class="grid-50">
<section class="example-block">Ich bin 50% breit.</section>
</div>
<div class="grid-25">
<section class="example-block">Ich bin 25% breit.</section>
</div>
<div class="grid-25">
<section class="example-block">Ich bin 25% breit.</section>
</div>

<link rel="stylesheet" href="./assets/

</div>

stylesheets/

2/2014

55

HTML, CSS & JAVASCRIPT
Listing 4: grid-parent
<div class="grid-container">
<div class="grid-50 grid-parent">
<div class="grid-50">
<section class="example-block">Spalte 1: I bin 25%
</div>
<div class="grid-50">
<section class="example-block">Spalte 1: I bin 25%
</div>
<div class="grid-50">
<section class="example-block">Spalte 2: I bin 25%
</div>
<div class="grid-50">
<section class="example-block">Spalte 2: I bin 25%
</div>
</div>
<!-- An dieser Stelle folgen die weiteren Gitter -->
</div>

In der Desktop-Variante gibt es
drei Spalten mit einer Aufteilung
von 50 Prozent, 25 Prozent und
25 Prozent (Bild 7)

breit (50% von 50%)</section>

breit (50% von 50%)</section>

breit (50% von 50%)</section>

breit (50% von

Damit die einzelnen Bereiche auch sichtbar
werden, sind diese zusätzlich noch über ein
­selection-Tag mit der Klasse ­example-block versehen worden (Bild 6).
Betrachten Sie sich das Ergebnis Ihrer Arbeit
dann sehen Sie auch die Abstände zwischen den
einzelnen Bereichen. Diese werden durch einen

Listing 5: hide-on-mobile
<div class="grid-container">
<div class="grid-50 mobile-grid-100">
<section class="example-block">Ich bin 50% auf dem Desktop.
Ich bin 100% auf dem mobilen Endgerät.</section>
</div>
<div class="grid-25 mobile-grid-50">
<section class="example-block">Ich bin 25% auf dem Desktop.
Ich bin 50% auf dem mobilen Endgerät.</section>
</div>
<div class="grid-25 mobile-grid-50">
<span class="hide-on-desktop">
<section class="example-block">Ich bin unsichtbar auf dem
Desktop.</section>
</span>
<span class="hide-on-mobile">
<section class="example-block">Ich bin unsichtbar auf dem
mobilen Endgerät.</section>
</span>
</div>
</div>

Beim Unsemantic-Framework können Sie auch spezielle Layouts für mobile Endgeräte
hinterlegen (Bild 8)

56

jeweils 10 Pixel großen Abstand auf der linken und
rechten Seite des Bereichs
erreicht. Somit haben Sie
an den Punkten, an denen
zwei Bereiche direkt aufeinandertreffen, jeweils einen 20 Pixel breiten Puffer.

Verschachtelte Gitter

Auf diese Art und Weise
lassen sich natürlich nicht
50%)</section>
nur einfache Strukturen,
sondern auch verschachtelte Konstruktionen darstellen. Im folgenden Beispiel
teilen wir den zuvor erstellten linken Bereich mit 50
Prozent Breite in zwei weitere Säulen auf. Dafür verwenden Sie die gleiche Vorgehensweise wie im ersten Beispiel mit Unsemantic. Lediglich das Signalwort grid-parent weist auf eine entsprechende Verschachtelung hin. Dieses setzen Sie direkt auf der obersten Ebene der verschachtelten
Struktur (Listing 4).

Unterschiedliche Layouts
Das Framework erlaubt Ihnen ein abweichendes Design für Geräte mit einer Bildschirmbreite von weniger als 768 Pixel. Dies ist die Breite
eines klassischen iPads.
Das folgende Beispiel nutzt wieder eine 50-2525 Prozent Struktur für den klassischen Desktop. Im Fall eines mobilen Endgeräts soll es eine
etwas andere Darstellung geben. Die erste Spalte soll 100 Prozent ausfüllen und die beiden folgenden jeweils 50 Prozent.
In jeder der beiden Darstellungen gibt es jeweils eine Spalte, die nicht angezeigt werden
soll (Bild 7). Sie erreichen dies, indem Sie den einzelnen Spalten zwei Klassen zuordnen, die abhängig von der Breite des Bildschirms genutzt
werden. Dies ist zum einen die bereits bekannte
Variante grid-xx, die für die mobile Darstellung
entsprechend um mobile-grid-xx ergänzt wird.
Technisch realisiert wird die obige Anforderung mit insgesamt drei Spalten, wobei den
ersten beiden jeweils eine andere Klasse zugewiesen wird, abhängig von der Breite des Bildschirms. Nur bei der dritten wird von dieser
Vorgehensweise abgewichen.
In diesem Fall wird mit Hilfe des span-Tags
jeweils der nicht benötigte Bereich ausgeblendet. Die Klasse hide-on-desktop lässt den entsprechenden Abschnitt nur auf mobilen Endgeräten erscheinen, hide-on-mobile sorgt für die Dar2/2014

HTML, CSS & JAVASCRIPT
stellung im klassischen Browser des
Computers (Listing 5). Ziehen Sie den
Browser auf die entsprechende Pixelbreite um die 800 Pixel, dann sehen
Sie, wie das Layout beim Über- oder
Unterschreiten des jeweiligen Grenzwerts wechselt und entweder zum
Desktop-Design oder zur mobilen Variante wechselt (Bild 8).
Das Framework erlaubt Ihnen jedoch nicht nur eine Unterscheidung
zwischen Desktop und mobilem Endgerät, Sie können die Grenze auch
noch feiner ziehen. Die mobilen Endgeräte lassen sich zusätzlich in Smartphone und Tablet unterteilen.
Für den Einsatz dieser Klassen benötigen Sie eine spezielle CSS-Datei
mit dem Namen unsemantic-grid-responsive-tablet.css.
Unsemantic legt folgende Grenzen bezüglich
der Breite zwischen den drei Formen der Darstellung fest: Ein Smartphone besitzt eine Breite
von weniger als 768 Pixel im Querformat, ein Tablet entsprechend bis 1024 Pixel, und alles darüber ist dann ein Browser auf einem Desktop. Neben der Erweiterung der Klassen um eine tabletgrid-xx Variante gibt es auch eine Klasse hide-ontablet, mit der Sie analog die Darstellung unterbinden (Listing 6).

Zwischenräume selbst festlegen
Die Abstände der Säulen in den vorherigen Beispielen waren alle exakt 10 Pixel an der linken
und rechten Seite breit.
Diese Anforderung kann bei manchen Designs aber auch einmal abweichen und Sie benötigen mehr Abstand. Dieses Verhalten können Sie auf Basis der Klassen prefix-xx oder suffix-xx erreichen. In diesen Fällen wird ein leerer
Bereich von xx Pixeln links oder rechts der definierten Spalte erzeugt.
Diese Klassen gibt es sowohl für die Desktop-Variante als auch in einer mobilen und einer ­Tablet-Version.
Das Framework Unsemantic bietet natürlich
einen noch deutlich größeren Funktionsumfang,
als diese Beispiele zeigen konnten. Besonders
die direkte Ansprache der Sass-Variablen und
Sass-Platzhalter sind weitere Themen, die in der
Kurzvorstellung nicht berücksichtigt wurden.
Diese werden jedoch entsprechend ausführlich in der Online-Dokumentation des Frameworks vorgestellt und mit einer Reihe von Beispielen, die direkt mit Unsemantic ausgeliefert
werden, im Detail erläutert.
Alle Informationen sind direkt über die Website von Unsemantic (http://unsemantic.com)
verfügbar (Bild 9).
2/2014

Fazit
Es sind zwei sehr unterschiedliche Realisierungen, die beide auf Sass beruhen. Im ersten Beispiel erfolgt der Zugriff ohne Zwischenschritt
direkt auf Sass. Dafür sind aber gute Kenntnisse des CSS-Frameworks sowie einige Erfahrungen im Umgang mit Grids notwendig. Sollten Sie in diesen Bereichen bis jetzt wenig Wissen gesammelt haben, stellt das Framework Unsemantic eine überlegenswerte Alternative dar.
Es erlaubt die Definition der Spalten ohne Nutzung von Sass, bietet Anwendern aber die Möglichkeit, auch direkt auf der Ebene des darunter[mb]
liegenden Frameworks zu arbeiten.

Es gibt eine umfangreiche OnlineDokumentation zum Framework, in
der auch die Sass-Spezifikationen
im Detail erläutert werden (Bild 9)

Listing 6: hide-on-tablet
<div class="grid-container">
<div class="grid-50 mobile-grid-100 tablet-grid-50">
Ich bin 50% breit auf dem Desktop.
Ich bin 100% breit auf dem Smartphone.
Ich bin 50% breit auf dem Tablet.
</div>
<div class="grid-25 mobile-grid-50 tablet-grid-50">
Ich bin 25% breit auf dem Desktop.
Ich bin 50% breit auf dem Smartphone.
Ich bin 50% breit auf dem Tablet.
</div>
<div class="grid-25 mobile-grid-50 tablet-grid-100">
<span class="hide-on-desktop">
Ich bin unsichtbar auf dem Desktop.
</span>
<span class="hide-on-mobile">
Ich bin unsichtbar auf dem Smartphone.
</span>
<span class="hide-on-tablet">
Ich bin unsichtbar auf dem Tablet.
</span>
</div>
</div>

57

HTML, CSS & JAVASCRIPT
HTML5: Offline-Webapplikationen

Going offline
Was sich wie ein Widerspruch anhört, ist im täglichen Alltag ein wichtiges Feature. Webseiten müssen
gegebenenfalls auch offline funktionieren. Von Patrick Lobacher

Autor

Patrick Lobacher
ist Geschäftsführer der DigitalAgentur Typovision GmbH, Autor, Trainer, Programmierer und
Speaker auf internationalen
Kongressen.
Inhalt
Offline-Webapplikationen.
Ressourcen
Alle Listings zum Artikel finden
Sie auf www.webundmobile.de
in der Rubrik Aktuelles Heft.

Kompatibilitätstabelle der
Offline Web Applications (Bild 1)

E

s gibt zahlreiche Situationen,
Listing 1: Einkaufsliste.manifest
in denen man sich nicht darauf verlassen will oder kann,
CACHE MANIFEST
dass eine Internetverbindung
# 07.12.2013 - 17:42 Uhr
zur Verfügung steht – sowohl
mobil wie auch stationär. Im
CACHE:
Einkaufsliste.js
Flugzeug beispielsweise oder
bootstrap/css/bootstrap.min.css
wenn man unterwegs ist, wäbootstrap/js/bootstrap.min.js
re es dennoch praktisch, wenn
http://www.typovision.de/files/Einkaufsliste.png
man mit der Website beziehttp://codeorigin.jquery.com/jquery-2.0.3.min.js
hungsweise
Webapplika­tion
weiterarbeiten könnte. Oder
man bearbeitet Daten, die überhaupt nicht ins Internet gehören, sondern geDas Beispiel: Einkaufsliste
nauso gut lokal vorgehalten werden können.
Auf dieser Einkaufsliste wollen wir alle LebensFür solche Szenarien hat das W3C die sogemittel notieren, die wir beim Einkaufen benötinannten Offline Web Applications ins Leben gegen, und dann im Supermarkt – in dem es evenrufen, die Teil des HTML5.x-Standards sind.
tuell überhaupt kein Internet gibt – jeden EinBetrachtet man sich bei Caniuse.com die Vertrag abhaken können, sobald das entsprechenbreitung von Offline Web Applications, stellt
de Lebensmittel im Einkaufskorb liegt (Bild 2).
man schnell fest, dass alle aktuellen Browser
Die Bedienung ist denkbar einfach. Wenn
dieses Feature unterstützen – lediglich IE 8 und
man unter Anzahl und Name ein Lebensmittel
IE 9 haben damit Probleme. Dafür kann man
mittels Anlegen einträgt, wird es in der Liste geaber entsprechende Polyfills (siehe Linkliste am
speichert. Dann kann man auf einen ListeneinEnde des Artikels) einsetzen (Bild 1).
trag klicken (beziehungsweise tippen) und ihn
Wenn man nun aber schon offline (und daentsprechend editieren (mittels Aktualisieren)
mit lokal) ist, dann wäre es sehr praktisch, wenn
beziehungsweise löschen.
man eine lokale Datenbank benutzen könnte.
Unsere Einkaufsliste besteht im Grunde nur
Auch das macht HTML5 möglich – mit der sogeaus den folgenden drei Dateien, die wir in einem
nannten Web-SQL-Database-Spezifikation (die
Verzeichnis leer anlegen:
weitere Arbeit wurde 2010 zugunsten von In■ index.html,
dexed Database API eingestellt, aber Letztere
■ Einkaufsliste.manifest,
ist bislang kaum implementiert, während Erste■ Einkaufsliste.js.
re flächendeckend zur Verfügung steht). Beides
Zusätzlich laden wir Bootstrap (ein Frontendkombiniert schafft die Basis für leistungsfähige
Framework) auf der Website http://getboot
Webapplikationen. Jede Theorie ergibt erst mit
strap.com über den Button Download Bootstrap
einem entsprechenden Beispiel Sinn – wir erstelherunter, entpacken das erhaltene ZIP, benenlen daher eine virtuelle Einkaufsliste.
nen das erhaltene Verzeichnis dist in bootstrap
um und kopieren dieses ebenfalls in das initiale
Verzeichnis hinein (Bild 3).

Cache Manifest
Quelle: www.caniuse.com

Das sogenannte Cache Manifest ist eine Textdatei, die in Listenform sämtliche Ressourcen
aufführt, die offline zur Verfügung stehen sollen und daher in den Cache geschrieben werden. Dies betrifft Assets wie HTML-, CSS-, Java­
Script-, Bilddateien und Ähnliches.

58

2/2014

HTML, CSS & JAVASCRIPT
Dabei muss nicht jede einzelne Datei aufgerufen werden, wie dies bei einem normalen Caching im Browser geschieht. Vielmehr
geht der Browser beim Cache Manifest die Liste selbst durch und holt sich alle dort gelisteten
Ressourcen, und zwar beim ersten Aufruf einer
Website, bei der die Cache-Manifest-Datei referenziert wurde. Ab diesem Zeitpunkt werden
Ressourcen nicht mehr vom Webserver angefordert, sondern direkt aus dem sogenannten Application Cache.
Das Cache Manifest hat die folgenden Eigenschaften:
■ Der Mime-Type der Cache-Manifest-Datei
muss text/cache-manifest lauten.
■ Alternativ sollte das Suffix der Cache-Manifest-Datei .manifest lauten.
■ Das Cache Manifest muss mit der Zeile CACHE
MANIFEST beginnen.
■ Jede Zeile enthält entweder den URL einer Ressource oder einen Kommentar.
■ Kommentare sind immer einzeilig und werden
mit dem Hash-Zeichen (# ) eingeleitet.
■ Die URLs geben den Pfad zu den Ressourcen
an, entweder relativ oder absolut.
■ Die HTML-Datei, die die Referenz zur CacheManifest-Datei enthält, muss selbst nicht im
Manifest angegeben werden – sie ist automatisch inkludiert.
■ Die Cache-Manifest-Datei selbst darf nicht aufgeführt sein.
■ Ein Manifest kann drei unterschiedliche Abschnitte aufweisen: CACHE:, NETWORK: und
FALLBACK:
CACHE: Dies ist der Standardabschnitt für Einträge. Unter diesem Header (wenn dieser weggelassen wird, gilt es als Default) aufgeführte
Dateien werden nach dem ersten Herunterladen
explizit im Cache gespeichert. Die unter dem
Header NETWORK: aufgeführte Dateien sind

Ressourcen, die in der Whitelist aufgeführt sind
und für die eine Verbindung zum Server erforderlich ist. Bei allen Anfragen an diese Ressourcen wird der Cache umgangen, selbst wenn der
Nutzer offline ist.
FALLBACK: Das ist ein optionaler Abschnitt,
in dem Fallback-Seiten für den Fall angegeben
sind, dass auf eine Ressource nicht zugegriffen werden kann. Der erste URI ist die Ressource, der zweite das Fallback. Beide URIs müssen
relativ sein und denselben Ursprung haben wie
die Manifest-Datei. Unser Cache-Manifest sieht
daher wie in Listing 1 aus.
Der letzte Eintrag in der Liste ist hier ein Icon
für das iPhone, um die Website quasi als ▶

Listing 2: index.html
<!DOCTYPE HTML>
<html manifest="Einkaufsliste.manifest">
<head>
<meta name="viewport" content="width=480; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="http://www.typovision.de/files/
Einkaufsliste.png" rel="apple-touch-icon" />
<meta charset="utf-8">
<title>Einkaufsliste</title>
<script type="text/javascript" src="Einkaufsliste.js" >
</script>
<script type="text/javascript" src=
"http://codeorigin.jquery.com/jquery-2.0.3.min.js" ></script>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body onload="onInit()">
<div class="well" style="margin:10px">
<h3>Einkaufsliste</h3>
<ul id="itemData" class="list-group">
</ul>
<h4>Eingabe</h4>
<form name="itemForm">
<label for="id">ID:</label>
<input type="text" name="id" id="id" size="2"
disabled="true"/>
<br />
<label for="anzahl">Anzahl:</label>
<input type="text" name="anzahl" id="anzahl" size="2" />
<label for="name">Name:</label>
<input type="text" name="name" id="name" size="10" />
<br /><br />
<input type="button" name="create" value="Anlegen"
onclick="onCreate()" class="btn btn-success btn-xs" />
<input type="button" name="update" value="Aktualisieren"
onclick="onUpdate()" class="btn btn-primary btn-xs" />
<input type="button" name="delete" value="Löschen"
onclick="onDelete()" class="btn btn-danger btn-xs" />
</form>
<br />
<h4>Status</h4>
<div id="status"></div>
</div>
</body>
</html>

Die Einkaufsliste in Aktion (Bild 2)
2/2014

59

HTML, CSS & JAVASCRIPT

Verzeichnisstruktur des
Projekts (Bild 3)

App abzulegen. Eingebunden wird das Manifest über folgende Angabe:
<html manifest=
"Einkaufsliste.manifest">

Sobald eine Anwendung offline ist, bleibt sie im
Cache gespeichert, bis eine der folgenden Bedingungen eintritt:
■ Der Nutzer löscht den Datenspeicher seines
Browsers für die Website.
■ Die Manifest-Datei wird geändert. Dabei reicht
es nicht, die Ressource selbst zu ändern – auch
die Manifest-Datei muss aktualisiert werden,
etwa über ein neues Datum im Kommentar.

Listing 3: onInit()

■ Der App-Cache wird programmatisch aktua-

lisiert.
Bauen wir nun als Nächstes ein HTML-Grundgerüst nach dem Muster von Listing 2 auf.
Sobald die Seite geladen wurde, werden einerseits – dank der Manifest-Datei – alle weiteren Dateien offline zur Verfügung gestellt. Anschließend wird die JavaScript-Funktion onInit()
gestartet (Listing 3). Hier prüfen wir zunächst, ob
der Browser überhaupt Web SQL Databases unterstützt. Dann wird diese initialisiert, der Event
Listener des applicationCache wird gestartet, die
Tabellen werden angelegt und anschließend die
Anzeige aktualisiert.
Man kann nun Event Listener (Bild 4) auf die
applicationCache-Events legen, um zu beobachten, wie dieser aufgebaut wird (Listing 4).

Web SQL Database

function onInit(){
try {
if (!window.openDatabase) {
updateStatus("Fehler: Offline Data wird von diesem
Browser nicht unterstützt!");
} else {
initDatabase();
checkManifest();
createTable();
refresh();
}
}
catch (e) {
if (e == 2) {

Die realisierte Datenbank ist in allen Browsern
eine reduzierte SQLite-Version. Um die Datenbank zu verwenden, muss zunächst ein Datenbank-Objekt mit der Methode openDatabase initiiert werden (Listing 5). Sämtliche Operationen
auf der Datenbank werden nun asynchron und
transaktionsbasiert durchgeführt und haben immer demselben Aufbau:
mydb.transaction(
function (transaction) {

updateStatus("Fehler: Unbekannte Datenbank-Version.");

transaction.executeSql

} else {
updateStatus("Fehler: Unbekannter Fehler " + e + ".");

(SQL-Befehl, [Parameter],

}
return;
}
}
function updateStatus(status){
document.getElementById('status').innerHTML = status;
}

60

dataHandler, errorHandler); }
);

Sobald der SQL-Befehl einen Fehler wirft, wird
die Methode errorHandler aufgerufen. Läuft alles sauber durch, wird die Methode dataHandler
aufgerufen – in dieser steht dann auch das Ergebnis des SQL-Befehls zur Verfügung.

2/2014

n
e
r
T

präsentiert:

ds

u
s
ö
L

n
e
g
n

ow
n
K

-Ho

w

.NET Developer
DDC Conference 2014
14.-17. Juli 2014

Themenauswahl:
–A 
pplication Lifecycle Management
–D 
esktop (WPF, MVVM), Web (MVC,
WebAPI, Responsive Webdesign),
Mobile (Windows Phone, Mono)

–E 
nterprise Solutions (Verteilte
Anwendungen, CQRS, Event
Sourcing, Big Data, Cloud)

–S 
oftwareentwicklung im Großprojekt
–A 
rchitektur: Agiler Entwurf,
Brownfield refaktorisieren

–S 
prachen: C#, Visual Basic,
JavaScript, F#

NCC Ost, Nürnberg
–T 
ools: Visual Studio,
Datenbanken (SQL,
NoSQL, Graph DBs)
–R 
ichtiges Recruiting:
passende Mitarbeiter
finden, Einstellungstests,
Einstellungsgespräche
–Z 
usammenarbeit im Team:
Vor Ort und remote

Mit Very
Early Bird
€ 200,–
sparen!

Advisory Board:

Tilman Börner,
Chefredakteur,
dotnetpro

Dariusz Parys,
Technical Evangelist,
Microsoft Deutschland
GmbH

Golo Roden,
Wissensvermittler
und Technologieberater

Laurin Stoll,
Geschäftsführer,
YooApplications AG

dotnet-developer-conference.de

David Tielke,
Trainer,
david-tielke.de

Michael Wiedeking,
Geschäftsführer,
MATHEMA Software
GmbH

DDConference

HTML, CSS & JAVASCRIPT
Links zum Thema
W3C: Offline Web Applications
▶ www.w3.org/html/wg/drafts/
html/master/browsers.
html#offline
W3C: Web Storage
▶ www.w3.org/TR/webstorage
W3C: Indexed Database API
▶ www.w3.org/TR/IndexedDB
W3C: Web SQL Database
▶ www.w3.org/TR/webdata
base
HTML5 Polyfills
▶ https://github.com/Moder
nizr/Modernizr/wiki/HTML5Cross-browser-Polyfills
ApplicationCache-Tutorial
▶ www.html5rocks.com/de/
tutorials/appcache/beginner

Ausgabe des Event Listeners in der Konsole (Bild 4)
Legen wir nun als Nächstes die Tabelle für
die Einkaufsliste an. Nach der Erstellung der
Tabelle wird zuerst die Methode refresh aufgerufen (Listing 6).
Hier werden zunächst alle auf der Liste stehenden Lebensmittel entfernt und die Datenbank
per SELECT nach dort vorhandenen Einträgen
befragt. Alle dort gefundenen Datensätze werden als <li>-Elemente in die vorbereitete Liste <ul
id="itemData" class="list-group"> gehängt. Diese
bekommen zudem die ID als Attribut id= zugeordnet. So können die Einträge später in der Datenbank wieder identifiziert werden
Nun wartet die Applikation auf eine Ak­tion.
Zunächst sollte man Lebensmittel eingeben,
damit diese auf der Liste erscheinen. Dies geschieht in den beiden Feldern Anzahl und Name
und dem anschließenden Klick auf den Button
Anlegen, der wiederum die JavaScript-Funktion
onCreate() triggert (Listing 7).
Das Skript liest die Werte der beiden Formular-Felder aus und würde eine Fehlermeldung
erzeugen, wenn nicht in beiden wirklich Werte eingeben sind. Dann wird ein SQL INSERTBefehl ausgeführt, der die beiden Werte in die
Datenbank einträgt. Anschließend wird durch

Listing 4: Event Listener
function logEvent(event) {
console.lo g(event.type);
}

Aufruf der Methode updateForm() das Formular
wieder gelöscht und damit für die weitere Eingabe vorbereitet.
Klickt man nun auf einen der Listeneinträge,
wird die Methode onSelect() ausgeführt, die in
der Methode refresh() auf den onClick-Handler
gelegt wurde (Listing 8). Bei Klick auf einen Eintrag wird dessen ID ausgelesen und der entsprechende Datensatz aus der Datenbank gelesen.

Listing 5: DB-Initialisierung
var localDB = null;
function initDatabase(){
var shortName = 'el';
var version = '1.0';
var displayName =
'Einkaufsliste';
var maxSize = 65536;
localDB = window.openDatabase
(shortName, version,
displayName, maxSize);
}

Dieser wird in das Formular eingetragen und
dient als Basis für die darauf anzuwendenden
Aktionen onUpdate() oder onDelete() (Listing 9).
Das vorhergehende Skript sollte nun nahezu selbsterklärend sein: Zuerst werden die Formularfelder ausgelesen und anschließend per
SQL-Befehl UPDATE aktualisiert. Jetzt muss es
nur noch möglich sein, die Einträge zu löschen
(Listing 10).

function checkManifest(){
window.applicationCache.addEventListener ('checking', logEvent,
false);
window.applicationCache.addEventListener ('noupdate', logEvent,
false);
window.applicationCache.addEventListener ('downloading',
logEvent, false);
window.applicationCache.addEventListener ('cached', logEvent,
false);
window.applicationCache.addEventListener ('updateready',
logEvent,false);
window.applicationCache.addEventListener ('obsolete',logEvent,
false);
window.applicationCache.addEventListener ('error', logEvent,
false);
}

62

Fazit
Das Beispiel zeigt eine Applikation, die man
wunderbar offline betreiben kann oder vielleicht
sogar auch sollte. Weitere Szenarien könnten Benutzer-Interfaces sein, die – sobald man offline
ist – die Daten lokal speichern und dann – sobald
man wieder online geht – diese mit dem Server
abgleichen. Es gibt als zahlreiche Einsatzgebiete
für diese spannenden HTML5-Techniken.
Aus Platzgründen konnten nicht alle zitierten
Listings abgedruckt werden. Sie finden alle Listings auf www.webundmobile.de.
[mb]
2/2014

n
e
r
T

web & mobile

DEVELOPER

präsentieren:

DWX

ds

u
s
ö
L

n
e
g
n

Developer
Week 2014

ow
n
K

-Ho

w

Mit Very
Early Bird
€ 200,–
sparen!

14.-17. Juli 2014
NCC Ost, Nürnberg
DDC

.NET Developer
Conference

MDC

Mobile Developer
Conference

WDC

Web Developer
Conference

Advisory Board:

Benno Bartels,
Gründer,
insertEFFECT

Max Bold,
Chefredakteur,
web & mobile
developer

Pierre Joye,
Entwickler und
PHP-Experte

Michael Johann,
Gründer,
rails-experts.com

Golo Roden,
Wissensvermittler
und Technologieberater

Henrike Röse,
Event & Marketing
Manager, Microsoft
Deutschland GmbH

developer-week.de
Aussteller & Sponsoren:

Tilman Börner,
Chefredakteur,
dotnetpro

Markus Junginger,
Geschäftsführer,
greenrobot

Markus Stäuble,
freier Berater
und Autor

Markus Eilers,
Geschäftsführer,
Runtime Software
GmbH

Stefan Hoth,
freiberuflicher Softwareentwickler für Java, PHP,
Web und Android

Andreas Hucks,
Senior Developer,
SensioLabs
Deutschland

Patrick Lobacher,
Gründer und
Geschäftsführer,
typovision GmbH

Dariusz Parys,
Technical Evangelist,
Microsoft Deutschland
GmbH

Stefan Priebsch,
Mitbegründer,
thePHP.cc

Laurin Stoll,
Geschäftsführer,
YooApplications AG

David Tielke,
Trainer,
david-tielke.de

Michael Wiedeking,
Geschäftsführer,
MATHEMA Software
GmbH

DeveloperWeek

mobile development

Die besten Frameworks, Tools und Techniken

Webseiten mobilisieren
Die mobile Internetnutzung wächst ununterbrochen. Die Anpassung von Websites für Smartphones
und Tablets ist daher das Gebot der Stunde. Von Filipe Pereira Martins und Anna Kobylinska

M

Die Webseite der Mobilsparte
von Sony bietet ein elastisches
Layout (Bild 1)

64

obile Besucher entscheiden heute über den
Erfolg oder Misserfolg einer Web­site, erst
recht, wenn diese einen Webshop beinhaltet.
Mobile Besucher sind nämlich prinzipiell anspruchsvoller als schreibtischgebundene Anwender. Insbesondere in Bezug auf die Usability einer Webseite gehen mobile Nutzer keine
Kompromisse ein – ihre Geräte lassen es nicht
zu. Konventionelle Desktop-Websites funktionieren in vielen Fällen gar nicht, und falls doch,
geben sie dem mobilen Benutzer reichlich Gelegenheit zum Abspringen.
Hier schwankt die JavaScript-basierte Navigation, da fällt die Textgröße zu gering aus, woanders testet ein Webformular die Geduld des
Anwenders … Gründe gibt es viele, das Resultat ist immer dasselbe: eine unnötig hohe Absprungrate mobiler Besucher. Der Markt für mobile Kleingeräte verzeichnet nun aber Jahr für
Jahr ein solides zweistelliges Wachstum, zurzeit
liegt es laut IDC bei satten 45 Prozent, und der
relative Anteil mobiler Besucher wächst ununterbrochen. Heutzutage lautet die Frage nicht

mehr, ob eine Webseite mobile Nutzer zu berücksichtigen braucht, sondern wie sich die Mobilisierung bestehender Inhalte am besten umsetzen lässt. Es stellt sich die Frage nach der dominanten OS-Plattform und relevanten mobilen
Webbrowsern.

Kampf der Giganten: ein Marktüberblick
Die Großen der Branche führen seit jeher einen
erbitterten Kampf um die Führung – mal mit erfreulich innovativen Features, mal mit erbitterten Patentkämpfen vor Gerichten rund um den
Globus. Kaum ein anderer Markt verändert sich
so schnell wie der Markt mobiler Geräte. Es ist
noch nicht lange her, dass Apple mit iOS als der
unangefochtene Marktführer den Neid der Mitbewerber weckte. WebKit galt als der dominierende mobile Webbrowser. Dies ist mittlerweile
aber nicht mehr der Fall.
Mit einem Marktanteil von 81 Prozent für
Smartphones im dritten Quartal 2013 weltweit durchbrach Android OS die magische
2/2014

mobile development
80-Prozent-Grenze mit einem ganz respekta­
blen Wachstum von 6,1 Prozent zum Vorjahr,
geht aus einer aktuellen IDG-Studie hervor. iOS
wächst ebenfalls, wenn auch etwas langsamer.
Die eigentliche Überraschung lieferte jedoch
Windows Phone mit einem jährlichen Wachstum von 156 Prozent.
Die mobile Plattform Android kann die Führungsposition solide für sich in Anspruch nehmen, doch die Gerätehersteller haben mit der
Ausnahme von Samsung kaum einen Grund zu
feiern. Samsung brachte es auf einen Marktanteil von 39,90 Prozent und damit den ersten
Platz. Alle anderen Android-Anbieter konnten
nur jeweils einstellige Marktanteile (wie zum
Beispiel Google/Motorola) für sich verbuchen.
Der Wettbewerb im Markt für internetfähige Mobilgeräte wird zurzeit praktisch nur zwischen Apple (iOS) und Samsung (Android OS)
ausgetragen.
Die Dominanz von WebKit ist Schnee von gestern. Google hat seine Unterstützung für WebKit über Bord geworfen und auf die hauseigene
(wenn auch mit WebKit verwandte), gründlich
modernisierte Rendering-Engine Blink umgesattelt. Auch Opera (Desktop- und mobile Webbrowser) und Adobe (in AIR) setzen inzwischen
auf Blink statt wie zuvor WebKit. Damit verlor
WebKit praktisch über Nacht seine Relevanz.
Alle Browserfamilien haben eines gemeinsam: Ihre Entwickler fokussieren auf HTML5
und CSS3. HTML5 ist daher die Markup-Sprache der Wahl für mobiles Webdesign. Wer bisher noch zögerte, kann nun im mobilen Webdesign seiner Kreativität in HTML5 mit CSS3 und
jQuery freien Lauf lassen.
Beim Mobilisieren von Webseiten befolgen
Webdesigner zunehmend das Konzept der
progressiven Anreicherung mit einem klaren
Schwerpunkt auf »Mobiles zuerst«.

Zugriff auf eine so optimierte Webseite von einem Computer heraus ein Übertragungsfehler
auftreten, ließe sich die Webseite bereits in ihrer
minimalistischen Edition problemlos bedienen.
Um den Ansatz »Mobile first« umzusetzen
können Sie Frameworks wie Response JS nutzen.
Das Konzept der progressiven Anreicherung
mit dem Schwerpunkt auf »Mobile first« hat sowohl Befürworter als auch Gegner, doch beide Seiten sind sich einig: Ob man nun »Mobiles zuerst« oder »Mobiles zuletzt« vorzieht, an
responsivem Webdesign führt heute kein Weg
mehr vorbei. Responsiv bedeutet, dass sich das
Layout an die Viewport-Größe des Endgeräts
anpasst. Das geschieht, indem der Webbrowser
das passende CSS-Stylesheet lädt.

Responsives Webdesign mit
intelligenten Medienabfragen
Die Erkennung der Eigenschaften eines Endgeräts gelingt im responsiven Design mit Hilfe der
sogenannten Medienabfragen (Media Queries).
In CSS2.x ließ sich einem bestimmten Typ
von Medium ein eigenes Stylesheet zuweisen
(zum Beispiel screen oder print). In CSS3 besteht die Möglichkeit, mit Hilfe der sogenannten Medien­abfragen (Media Queries) bestimmte Eigenschaften des Zielgeräts in Erfahrung zu
bringen, um es mit einem für eben dieses Gerät optimierten Stylesheet zu beliefern. So können Sie etwa für verschiedene Breiten des Displays unterschiedliche Stylesheets bereithalten
und das passende Stylesheet dynamisch bereitstellen. Dadurch können Sie dieselben Inhalte
in verschiedenen Layouts präsentieren, die sich
sogar bei Bedarf an geänderte Eigenschaften des

Zielgeräts zur Laufzeit anpassen.

Autoren

Filipe Pereira Martins und
Anna Kobylinska sind interna­
tional anerkannte IT-Berater mit
Schwerpunkt auf Cloud-Lösun­
gen.
Inhalt
Mobilisieren von Websites.

iWebKit meistert das Erstellen
mobiler und iOS-optimierter
Websites (Bild 3)

Mobiles zuerst
Nach dem Ansatz »Mobile first« wird der Besucher standardmäßig erst einmal mit Daten beliefert, die für das kleine Display eines Smartphones und die geringe Bandbreite einer gewöhnlichen Mobilfunkanbindung optimiert sind. Gibt
das Endgerät zusätzliche Fähigkeiten zu erkennen – etwa Pixeldimensionen, die ein Tablet oder einen Desktop-Computer vermuten lassen –, so kann der Webserver immer noch weitere Daten nachliefern und das Layout der Webseite schleunigst anpassen, ohne das Gerät zu
überlasten oder den Besucher zu nerven. Durch
den Ansatz »Mobile first« wird vermieden, dass
sich ein Smartphone an der Übertragung einer
überdimensionierten Edition der Webseite verschluckt, wenn es diese ohnehin nicht hätte adäquat darstellen können. Sollte dagegen beim
2/2014

65

mobile development
Bedingungen für das Anwenden von Style­
sheets lassen sich entweder in HTML definieren:
<link rel="stylesheet" media="screen

Der geschickte Einsatz von CSS-Medienabfragen stellt eine wichtige, aber nicht die einzige
Voraussetzung für responsives Webdesign dar.
Das Layout der Webseite muss die Realitäten
mobiler Internetnutzung reflektieren.

and max-width: 320px" href="mobi.css">

Oder direkt in dem betreffenden CSS-Stylesheet, zum Beispiel so:
@media screen and (min-width: 600px)
and (max-width: 900px) {

Ein responsives Layout macht
auch auf Mobilgeräten eine
gute Figur: BonPress-Theme
für WordPress (Bild 2)

/* CSS-Anweisungen */
}

Oder so:
@media screen and (min-device-width:
320px) and (max-device-width: 480px) {
/* CSS-Anweisungen */
}

Mittels max-device-width können Sie die Gesamtbreite des Displays ermitteln. Mittels max-width
erfahren Sie dagegen die maximale Gesamtbreite des tatsächlich verfügbaren Browserfensters,
in dem die Webseite tatsächlich gerendert wird
(also ohne UI-Elemente wie die URL-Adressleiste oder Browserschaltflächen).
Smartphones und Tablets imitieren beim Zugriff auf eine Webseite standardmäßig einen
Desktop-Browser und zeigen die Desktop-Version des Dokuments in einer entsprechend geringeren Zoomstufe an. Medienabfragen versagen generell aus eben diesem Grund. Damit Medienabfragen in mobilen Geräten funktionieren,
gilt es der Webseite noch das benötigte <meta>Tag hinzuzufügen:
<meta name="viewport"
content="width=device-width>

Oder optional unter Angabe der gewünschten
Vergrößerungsstufe:
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">

Mit diesem <meta>-Tag setzen Sie die viewportEigenschaft auf den gewünschten Wert, nämlich auf die tatsächliche Breite des Displays (anstelle der standardmäßig voreingestellten Desktop-Emulation).
Medienabfragen in CSS3 erlauben es Ihnen,
anhand der Auflösung beziehungsweise der
Ausrichtung des Displays (iPad, iPhone) ein für
das betreffende Gerät optimiertes Stylesheet zu
liefern und bei Bedarf sogar die dargestellten Inhalte zu differenzieren.

66

Elastische Layouts, Rastersysteme
und Frameworks
Die knapp bemessene Fläche des Displays eines
mobilen Endgeräts gilt es bis auf den letzten Pixel zu nutzen, und so werden starre, pixelgenaue Layouts immer mehr zugunsten von elastischen Layouts verworfen. Pixelgenaue Layouts,
die das Web bisher dominierten, können sich
an geringfügige Abweichungen der Display­
auflösung mobiler Endgeräte nicht anpassen,
ohne den Benutzer zum Scrollen oder zum Zoomen zu zwingen. Ein gutes Beispiel für ein elastisches Layout bietet die deutsche Webseite der
Mobilsparte von Sony (http://sonymobile.com/
de). Das elastische Layout reagiert auf die aktuelle Breite des Browserfensters, indem es die Abbildungen neu anordnet, skaliert und die Texte
neu formatiert (Bild 1).
Der Einsatz elastischer Einheiten wie em und
Prozent nimmt ebenfalls zu. Dieser Trend folgt
der aktuellen Empfehlung des W3C, den Einsatz
der px-Einheit (mit der gelegentlichen Ausnahme von print-Stylesheets) zugunsten von elastischen Einheiten zu verwerfen. Zahlreiche CMSThemes reflektieren bereits diese Empfehlung,
darunter zum Beispiel BonPress (Bild 2).
Wer nicht gerade das Rad neu erfinden möchte, ist gut beraten, ein passendes Web-Framework zu Hilfe zu rufen. Frameworks gibt es
wie Sand am Meer für alle Ansprüche, für jeden Geldbeutel und mit jedem erdenklichen
Komplexitätsgrad, von ganz einfachen Rastersystemen für responsives, mobilisiertes Webdesign (Skeleton auf Basis von Boilerplate, Golden Grid System und SimpleGrid), über WebApp-Frameworks (iUI, iWebKit, jQuery Mobile) (Bild 3) bis hin zu vielseitig einsetzbaren AppEntwicklungs-Frameworks wie PhoneGap von
Adobe, Sencha Touch von Sencha und Titanium
Mobile von Appcelerator (Bild 4).
An Bedeutung gewinnen immer stärker elastische Layouts auf Basis eines Rasters. Diese Art
von responsivem Layout passt sich der Displaygröße des Endgeräts durch das dynamische Aufund Zusammenklappen des Rasters an.

Elastische Bilder und Videos
Ein elastisches Layout erfordert idealerweise
elastische Bilder, also Bilder mit einer kontextabhängigen Größe, die auf die geänderte Ausrichtung des Displays und die damit einhergehenden Anpassungen des Layouts flüssig reagieren.
2/2014

mobile development
Ein exzellentes Beispiel für eine gelungene Umsetzung elastischer Bilder stellt die Website der
Münchner Paulaner Brauerei dar (www.paula
ner.de). Das Layout passt sich hier ganz automatisch der Größe des Displays an und die Bilder
integrieren sich nahtlos in das Layout, unabhängig vom verwendeten Gerät (Bild 5).
Reagieren die Bilder responsiv, dürfen sie ruhig größer werden. Dieser Trend prägt immer
stärker responsive Themes, Bildergalerien und
Diashows, darunter Photoswipe, eine Bildergalerie für Smartphones im responsiven Design,
und Supersized, eine responsive Diashow für
Desktops und Mobilgeräte, die im Hintergrund
der Webseite läuft und das ganze Browserfenster für sich in Anspruch nimmt.

Grafiken statt Tabellen, HTML5-Video
statt Flash
Eine besondere Herausforderung beim Mobilisieren von Websites stellen Datentabellen dar.
Das Hinein- und Herauszoomen durch den Benutzer eines Touch-Displays ist hier aus Gründen der Usability keine gute Option. Viele Webdesigner greifen daher lieber – zumindest in
Smartphone-optimierten Layouts – zunehmend
auf Diagramme und Illustrationen statt auf Tabellen zurück.
Zu guter Letzt muss eine mobile Webseite auf
Flash-Video zugunsten von HTML5-Videos verzichten. Alleine diese Umstellung kann schon
erheblichen Aufwand bedeuten, es führt jedoch
kein wirklich gangbarer Weg daran vorbei.

Von mobilen Webseiten zu nativen
mobilen Web-Apps
Mit HTML5, CSS und JavaScript können Webdesigner nicht nur Webseiten, sondern auch
vollwertige Web-Apps für mobile Geräte entwickeln, die dann möglicherweise sogar in unterstützten Desktop-Umgebungen laufen. Durch
den Einsatz von lokalem Speicher in HTML5
(das localStorage-API) verhalten sich solche Applikationen wie native mobile Apps, indem sie
auch ohne aktiven Internetzugang und außerhalb des Browsers ablaufen. Für den gewöhnlichen Benutzer sind HTML5-basierte Apps von
nativen Apps der jeweiligen mobilen Plattform
nicht zu unterscheiden.
Sogar Microsoft ist voll auf den HTML5-Zug
aufgesprungen. Mit der Entscheidung, (mobile) Web-Apps auf Basis von HTML5, CSS3 und
Java­Script im Desktop von Windows 8.x ausführen zu lassen, hat Microsoft sein ganzes Gewicht
hinter moderne Webstandards geworfen. Windows 8.x lässt gutmütig sowohl moderne Applikationen im Metro-Stil auf Basis von HTML5,
CSS3 und JavaScript als auch klassische Desk2/2014

top-Applikationen auf Basis von Microsofts eigenen proprietären Technologien im Desktop
nebeneinander laufen. Microsofts Beweggründe
sind natürlich alles andere als altruistisch: Der
Anbieter kann so das Talent unzähliger Web­
entwickler anzapfen. Für Webentwickler eröffnet sich damit der Zugang zu Windows auf all
den Geräten, auf denen mittlerweile neue Iteration des Windows-Betriebssystems läuft. Web­
entwickler, die Microsofts C# und das .NETFramework niemals aus freien Stücken erlernen würden, können HTML5-basierte Apps für
Windows 8.x (Phone) quasi im Schlaf schreiben, und jeder gewinnt: Microsoft gewinnt Entwickler, Entwickler gewinnen neue Einnahmequellen und die Benutzer bekommen ihre Apps.
Es stellt sich nun die Frage, ob es sich beim
Mobilisieren von Websites um einen kurzlebigen Hype oder um ein langfristiges, dauerhaft
relevantes Thema handelt, um das man als Webschaffender nicht herumkommt. Mobile Geräte mögen nun immer smarter werden, immer
schneller und leistungsstärker, aber sie nähern
sich Desktops keinesfalls an. Jede Webpräsenz
sollte die Besonderheiten mobiler Geräte berücksichtigen.
Moderne HTML5-Frameworks sorgen dafür,
dass sich mobile Webseiten zunehmend wie native mobile Apps anfühlen. Die Grenzen zwischen den beiden werden fließend. Nachfolgend
sollen die wichtigsten Tools für die Mobilisierung von Websites vorgestellt werden.

Sencha Touch war eines der ersten
JavaScript-Frameworks für mobile
HTML5-Apps und Webseiten (Bild 4)

Gelungene Umsetzung elastischer
Bilder auf der Website der Münchner Paulaner Brauerei (Bild 5)

jQuery Mobile
jQuery Mobile (http://jquerymobile.com) ist ein
mobiles Framework mit Unterstützung für eine
breit gefächerte Auswahl an Geräten. Mit jQuery Mobile können Sie touch-optimierte mobile Web-Apps auf Basis von HTML5-, CSS- und
JavaScript-Code mit einem plattformüber- ▶

67

mobile development

jQuery Mobile basiert auf der
beliebten JavaScript-Bibliothek
jQuery (Bild 6)

greifend einheitlichen UI erzeugen. Es unterstützt unter anderem Apple iOS, Google An­
droid, BlackBerry und Windows Phone (http://
jquerymobile.com/gbs).
jQuery Mobile basiert auf der beliebten Java­
Script-Bibliothek jQuery und der zugehörigen
UI-Bibliothek jQuery UI. Zwar lässt sich bereits auch reines jQuery in gewissen Grenzen
für bestimmte mobile Aufgaben einspannen,
doch jQuery Mobile bietet einen weitaus umfassenderen Funktionsumfang für die Entwicklung mobiler Webapplikationen. jQuery Mobile
gilt derzeit als der Goldstandard in diesem Bereich (Bild 6).
Für die Gestaltung von Web-Apps mit jQuery UI greift man auf Themes zurück, um spezielle CSS3-Eigenschaften wie abgerundete Ecken,
Textschatten und Farbverläufe sowie Symbolbibliotheken einfach nutzen zu können. Entscheidend für den effektiven Einsatz der Themes ist
die strikte Trennung von Inhalt und Layout.
Jedes Theme umfasst bei jQuery Mobile mehrere globale Einstellungen für die Schriftart,
Schatteneffekte und Eigenschaften der Schaltflächen. Das Aktivieren der einzelnen Themes
gelingt durch die Zuweisung des zugehörigen
Buchstabens (a bis e) zum data-theme-Attribut
des betreffenden Elementes, zum Beispiel:
<a href="add-user.php" data-theme="c">
Speichern</a>

jQT ist ein jQuery-Plug-in für die
mobile Webentwicklung von Apps
unter anderem für iOS, Android
und HP/Palm WebOS (Bild 7)

Links zum Thema
IDC-Studie über die Entwicklung der Marktanteile
von Smartphones
▶ www.idc.com/getdoc.jsp?containerId=
prUS24442013
Marktanalysedaten von Comscore
▶ www.comscore.com/Insights/Press_Releases/
2013/11/comScore_Reports_September_2013
_U.S._Smartphone_Subscriber_Market_Share
W3C-Empfehlung bezüglich der Verwendung elastischer und nicht elastischer CSS-Einheiten:
▶ www.w3.org/Style/Examples/007/units.html
Kostenloser Download der responsiven Bilder­
galerie Photoswipe
▶ www.photoswipe.com
Kostenloser Download der responsiven Diashow
Supersized
▶ www.buildinternet.com/project/supersized/­
slideshow/3.2/demo.html
Das kostenlose WordPress-Theme BonPress ist
bereits responsiv
▶ www.wpzoom.com/themes/bonpress
Download des jQuery-Plug-ins FitText
▶ www.fittextjs.com

Themes lassen sich auf die Seiten, Leisten, Inhalte, Schaltflächen, Formularelemente und Listen
anwenden. Symbole bindet man über die Attribute data-icon und data-role mit den passenden
Werten ein, zum Beispiel:

Download des jQuery-Plug-ins FitVids
▶ www.fitvidsjs.com

<a href="index.html"

ResponseJS
▶ http://responsejs.com

data-role="button"

iWebKit
▶ http://snippetspace.com/portfolio/iwebkit

data-icon="delete">Löschen</a>

jQuery Mobile unterstützt auch die Erstellung
von Webformularen, die für Mobilgeräte optimiert wurden, von simplen Suchfeldern über
spezielle Radiobuttons, Ein- und Ausschalter,
Schieberegler – das mit HTML5 eingeführte
­range-Eingabefeld macht es möglich – bis hin zu
komplexen Auswahlmenüs. So lässt sich etwa
ein simples Zustandsfeld realisieren:

</select>
</div>

jQuery Mobile zeigt zusätzlich zum Schieberegler ein Feld an, in dem der aktuell eingestellte
Wert zu sehen ist:
<div data-role="fieldcontain">
<label for="slider">Ihr Alter:

<div data-role="fieldcontain">

</label>

<label for="slider">Geschlecht:

<input type="range" name="slider"

</label>

id="slider" value="25" min="18"

<select name="g" id="g"
data-role="slider">

max="120" />
</div>

<option value="w">Weiblich
</option>
<option value="m">Männlich
</option>

68

Die Attribute min und max geben jeweils den
niedrigsten und den höchsten Wert aus dem zulässigen Bereich vor.
2/2014

mobile development
Die breite Akzeptanz der klassischen jQueryBibliothek in der Gemeinde der Webentwickler und nicht zuletzt die starke Verbreitung von
jQuery-Programmierkenntnissen haben den
Weg für den Erfolg von jQuery Mobile und jQT
geebnet.
Benutzer von Dreamweaver CS 5.5, 6 und CC
können Webseiten und Web-Apps auf Basis von
jQuery Mobile im Übrigen direkt in ihrem WebEditor bearbeiten. Hierzu wählen Sie einfach
beim Erstellen einer neuen Webseite die Op­tion
Mobile Starters und legen fest, ob Sie mit lokalen
Dokumenten arbeiten möchten, ein CDN einsetzen oder PhoneGap-Unterstützung benötigen.
In all diesen Fällen stehen Ihnen anschließend
sowohl codebasierte als auch grafische Werkzeuge von Dreamweaver zur Verfügung.

jQT (zuvor jQTouch)
jQT (http://jqtjs.com) ist ein jQuery-Plug-in für
die mobile Webentwicklung von Apps unter anderem für iOS, Android OS, HP/Palm WebOS.
Dieses Framework implementiert den Großteil seiner Funktionalität mit Hilfe von reinem
CSS und nutzt nur spärlich JavaScript. So basieren etwa effektvolle Seitenübergänge auf nativen WebKit-Animationen. Dem umsichtigen
Einsatz von JavaScript verdankt das Framework
unter anderem seine bemerkenswert hohe Leistung auf unterdimensionierten Handsets (Bild 7).
Zu den Vorzügen von jQT zählt das Laden
von Bildern auf Vorrat (sogenanntes Preloading), die Unterstützung für Callback-Ereignisse, Themes und die Fähigkeit zur Erkennung
von Wischgesten. jQT meistert die Erstellung
von Offline-Apps und kann Location-Dienste
bereitstellen.
jQT lässt sich leicht erlernen, bietet jedoch
dementsprechend kaum Anpassungsfähigkeiten der gebotenen Funktionalität. Dank der Anbindung an jQuery lässt es sich allerdings um
zusätzliche Funktionalität erweitern.

PhoneGap
PhoneGap (http://phonegap.com) ist ein quell­
offenes Framework für die mobile Webentwicklung auf Basis von HTML5, CSS und Java­Script.
Mit Hilfe von PhoneGap können Sie Ihr Knowhow dieser Websprachen nutzen, um mobile
Apps zu entwickeln, die auf native Features der
jeweiligen Zielplattform zugreifen.
PhoneGap beinhaltet eine plattformunabhängige Web-Laufzeitumgebung, in der sich der
Webcode unabhängig von der darunterliegenden Hardwareplattform ausführen lässt, und
einen API-Stack, mit dem der Code auf hardwarespezifische Funktionen des jeweiligen Geräts zugreifen und native Ereignisse auswerten
2/2014

kann. So bietet PhoneGap beispielsweise die
Unterstützung für den Accelerometer, den Vi­
brationsalarm, einen Zugriff auf die Kamera für
die Aufnahme von Audio und Video, Geolocation und das Adressbuch mit Kontakten des Benutzers unter dem jeweiligen OS.
Dank der Anbindung an PhoneGap und
der Einbindung von jQuery Mobile können
weaver CC als eine professionelSie Dream­
le Entwicklungsumgebung zur Erstellung von
Webapplikationen und mobilen Apps für mehrere Plattformen Ihrer Wahl nutzen (Bild 8).

Dreamweaver CC unterstützt die
direkte Ausgabe von WebsiteEntwicklungsprojekten in die
Cloud, wo Adobes PhoneGap
Build Service mobile Apps
für bis zu sieben mobile Platt­
formen kompiliert (Bild 8)

Appcelerator Titanium Mobile
Bei Titanium Mobile (http://appcelerator.com/
titanium) handelt es sich um ein JavaScript-basiertes Interface zu nativen Code-Modulen für
verschiedene mobile Plattformen. Titanium
übersetzt Ihre hart gewonnenen Kenntnisse der
Webstandards in native Applikationen, die sich
so verhalten, als ob sie in Objective-C (iOS) oder
Java (Android OS) geschrieben worden wären.
Appcelerator Titanium Mobile bietet umfangreiche Unterstützung für Multimedia (unter anderem Musik, Fotos, Speichern und Streamen von Videos). Weiterhin erlaubt es ­Titanium
Mobile, die Voreinstellungen des Benutzers abzuspeichern, Daten in Dateien abzulegen und
Sitzungscookies für mobile Browser samt der
­SQLite-­Anbindung zu implementieren. Zudem
bietet es Zugriff auf das native Dateisystem von
iOS (iPhone, iPod und iPad) und Android OS.
Selbstverständlich lassen sich auch die Kameras eines Smartphones nutzen und die auf
diese Weise erstellten Clips in sozialen Netzen
veröffentlichen. Als besonderes Highlight bietet
Tita­nium Mobile Unterstützung für Zugriffe auf
cloudbasierte Dienste sowohl über sogenannte
RESTful APIs (Representational State Transfer)
als auch über das SOAP API (Simple Object Access Protocol).
[mb]

69

mobile development
Das iOS SpriteKit

Moving Monsters
Zusammen mit iOS 7 und OS X Mavericks hat Apple neben anderen Bibliotheken auch SpriteKit eingeführt.
Die neue Bibliothek soll die Entwicklung von 2D-Spielen vereinfachen. Von Christian Bleske

Autor

Christian Bleske
ist Autor, Trainer und Entwickler
mit den Schwerpunkten Clientund Server-Entwicklung sowie
mobile Technologien. Erreichbar
ist er unter:
▶ cb.2000@hotmail.de
Inhalt
Das iOS SpriteKit.
Ressourcen
Die Listings zum Artikel finden
Sie auf www.webundmobile.de
in der Rubrik Aktuelles Heft.

70

L

ange Zeit musste man zur Entwicklung von
Spielen unter iOS auf zusätzliche Bibliotheken wie beispielsweise Cocos 2D zurückgreifen. Diese Bibliotheken stellen komfortabel zu
verwendende Funktionen zur Verwaltung von
Sprites und zum Management von Spielen bereit. Ein Nachteil diese Bibliotheken ist allerdings, das diese nicht unbedingt (zum Beispiel
Cocos2D) speziell für iOS / OS X entwickelt
worden sind, was das Handling zum Teil etwas
komplizierter macht.
Mit der Einführung von iOS 7 stellt nun Apple
selbst ein Framework zur Programmierung von
Spielen zur Verfügung. SpriteKit ist eine neue
Bibliothek und steht neben iOS auch unter OS X
Mavericks zur Verfügung. Dadurch, dass die Bibliothek Bestandteil beider Betriebssysteme von
Apple ist, können Spiele auf derselben Code­
basis für beide Systeme erstellt werden. Um in
die Entwicklung von Spielen für iOS auf Basis
von SpriteKit einsteigen zu können, ist Xcode ab
Version 5.0 erforderlich.

Projekt mit SpriteKit
Innerhalb der Projektvorlagen von Xcode für
iOS findet man das Template SpriteKit Game.
Diese Vorlage erstellt Out of the Box, ein Beispiel,
in dem die Basisfunktionen der SpriteKit-Bibliothek demonstriert werden. Mit der Vorlage werden auch gleich die für erste Gehversuche notwendigen Klassen angelegt.
Ein Spiel, das auf Basis von SpriteKit geschrieben wird, wird natürlich in einer View angezeigt. Hierbei handelt es sich allerdings um eine besondere View-Klasse – SKView. Die Kombination mit weiteren Views ist aber durchaus
möglich. Ein SKView-Instanz wiederum dient
als Container für Szenen. Innerhalb einer Szene
werden dann die Sprites eingefügt.
Um die Sprites in Bewegung zu setzen, gibt
es weitere spezialisierte Klassen. Ein Spiel besteht also aus mindestens einer oder mehreren
Szenen sowie den zugehörigen Sprites. Darüber
hinaus gibt es zusätzlich noch Funktionen, beispielsweise um physikalische Berechnungen anzustellen. Die Projektvorlage von Xcode erzeugt
wie bereits erwähnt die für den Beginn notwendigen Klassen. Bild 1 zeigt ein neu angelegtes Projekt, basierend auf der Vorlage SpriteKit Game.

Die Projektstruktur in Xcode (Bild 1)
Der interessante Teil ist in den Klassen ViewCon­
troller und MyScene enthalten. Das Story­board
wird in einem SpriteKit-Projekt nicht benötigt.
Zusätzlich ist im Projekt eine Grafik für erste Experimente (Spaceship.png) enthalten.

Eine View für Sprites
Bevor Sprites gezeichnet werden können, muss
zuerst einmal die passende Umgebung geschaffen werden. Wird die Vorlage verwendet, so
wurde der dafür notwendige Code automatisch
erzeugt und ist innerhalb der Klasse ViewCont­
roller zu finden. Nachfolgend zuerst der Inhalt
der Header-Datei:
#import <UIKit/UIKit.h>
#import <SpriteKit/SpriteKit.h>
@interface ViewController :
UIViewController
@end

Wichtig ist hier nur der Import der SpriteKit-Bibliothek. Weiter geht es in Listing 1, das den Implementation-Teil der Klasse enthält.
2/2014

mobile development
Listing 1: ViewController des Templates
#import "ViewController.h"

{
return YES;

#import "MyScene.h"
}
@implementation ViewController
- (void)viewDidLoad
{

- (NSUInteger)
supportedInterfaceOrientations
{
if ([[UIDevice currentDevice]
userInterfaceIdiom] ==
UIUserInterfaceIdiomPhone) {

[super viewDidLoad];

return UIInterfaceOrientation
MaskAllButUpsideDown;

// Configure the view.
SKView * skView = (

}

SKView *)self.view;

return
UIInterfaceOrientationMaskAll;

skView.showsNodeCount = YES;

SKScene * scene = [MyScene
sceneWithSize:skView.bounds.size];
scene.scaleMode =
SKSceneScaleModeAspectFill;

}
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];

// Present the scene.
[skView presentScene:scene];

Lange Zeit mussten Apple-Entwickler zur Entwicklung von
Spielen auf separate Bibliotheken zurückgreifen. Mit SpriteKit
ändert sich das. Apples neue
Bibliothek zur Programmierung
von Spielen ist jetzt in iOS und
OS X integriert. Dieser Artikel verschafft einen Einblick in die Arbeit mit der neuen Bibliothek zur
Entwicklung von Spielen.

else {

skView.showsFPS = YES;

// Create and configure the scene.

Auf einen Blick

}

}
- (BOOL)shouldAutorotate

Im Ereignis viewDidLoad befinden sich die
notwendigen Zeilen, um eine View vom Typ
SKView zu erzeugen. Objekte der Klasse SKView
bilden den zu Beginn beschriebenen Container,
in dem später die Szenen eingefügt werden.
Zwei Eigenschaften der Klasse SKView werden
im Beispiel aktiviert. Mit showFPS wird der eingebaute Framecounter eingeschaltet und shows­
NodeCount sorgt dafür, dass die Anzahl der aktuell verwendeten Nodes angezeigt wird. Ein
Node ist dabei ein in eine Szene eingefügtes Objekt wie beispielsweise ein Sprite.
Nachdem die notwendige View erzeugt wurde, kann die erste Szene mit der Klasse SKScene

@end

angelegt werden. Eine Szene dient als Ausgangspunkt für Node-Objekte, die in die Szene
eingefügt werden.
Zur Initialisierung wird die Dimensionierung
des SKView-Objekts übergeben. Der Wert einer Eigenschaft, scaleMode, wird anschließend
für die Szene noch festgelegt. Mit scaleMode bestimmt man, wie die Szene innerhalb der View
dargestellt wird. Hierbei kann beispielsweise festgelegt werden, ob die Szene die gesamte Fläche der View zur Darstellung verwenden
soll oder nicht. Zuletzt wird die Methode pre­
sentScene der Klasse SKView aufgerufen und das
Objekt zur Anzeige übergeben.

Listing 2: Die Klasse MyScene
#import <SpriteKit/SpriteKit.h>
@interface MyScene : SKScene

SKLabelNode *myLabel =
[SKLabelNode
labelNodeWithFontNamed:
@"Chalkduster"];

@end

myLabel.text = @"Hello, World!";

Jetzt Ihre
web & mobile developer
auf dem iPad lesen

myLabel.fontSize = 30;

#import "MyScene.h"

myLabel.position =
CGPointMake(CGRectGetMidX(
self.frame),
CGRectGetMidY(self.frame));

@implementation MyScene
-(id)initWithSize:(CGSize)size {

[self addChild:myLabel];

if (self = [super
initWithSize:size]) {

}

/* Setup your scene here */

return self;
}

self.backgroundColor = [SKColor
colorWithRed:0.15 green:0.15
blue:0.3 alpha:1.0];

2/2014

@end

Für
Abonne
nte
gratis! n
71

mobile development
Für die Szene wurde eine eigene Ableitung der Klasse SKScene, MyScene, angelegt. Innerhalb dieser Klasse werden die
Node-Objekte, die ja den Inhalt der Szene
bilden, erzeugt, initialisiert und der Szene
hinzugefügt. Listing 2 enthält den hierfür
notwendigen Code.
Es gibt unterschiedliche Node-Klassen.
Nicht nur Sprites werden als Node in eine
Szene eingefügt. Um beispielsweise Text
in eine Szene einzufügen, wird die Klasse
SKLabelNode verwendet.
Die Vorlage SpriteKit Game verwendet
ein entsprechendes Objekt, um den berühmten Hallo Welt-Satz in einer Szene
anzuzeigen. In dem Beispiel wird hierzu im ersten Schritt die Hintergrundfarbe
der Szene mit einem Aufruf der Funktion
SKColor festgelegt.
Anschließend wird ein SKLabelNodeObjekt angelegt. Dem Objekt wird als Parameter der zu verwendende Font übergeben. Nachfolgend werden noch einige Eigenschaften (Text, FontSize und Position)
festgelegt, bevor das Objekt mit der Methode addChild der Node-Auflistung hinzugefügt wird. Wird die App anschließend gestartet, so ist der Text Hello, World!
zu sehen (Bild 2).

Listing 3: Anzeigen eines Sprites

Hello Monster

Ein Hallo Welt-Programm
mit SpriteKit (Bild 2)

72

Die Anzeige von Text ist ja schon ganz schön,
aber die Bibliothek heißt schließlich SpriteKit.
Im folgenden Schritt soll ein Sprite innerhalb
der Szene angezeigt werden. Hierzu benötigt
man natürlich eine entsprechende Grafik. Die Vorlage fügt dem
Projekt automatisch die Grafik
eines Raumschiffs hinzu.
Genauso gut kann aber auch
eine andere Grafik für erste
Gehversuche verwendet werden. Der Vorgang ist mit der
Anzeige eines SKLabelNodes
identisch. Zuerst muss das benötigte Objekt zur Darstellung
eines Sprites erzeugt und die
Grafik übergeben werden. Anschließend wird das initialisierte Sprite angezeigt. Listing 3 enthält die nötigen Schritte.
Der Code aus dem ersten Beispiel innerhalb der Klasse My­
Scene wird gegen den im Listing 3
ausgetauscht. Ausgangspunkt
ist nun nicht mehr die Methode initWithSize, sondern die Methode didMoveToView, die ausgeführt wird, sobald eine Szene

- (void)didMoveToView: (SKView *) view
{
if (!self.contentCreated)
{
[self createContent];
self.contentCreated = YES;
}
}
- (void)createContent
{
self.backgroundColor = [SKColor
whiteColor];
self.scaleMode =
SKSceneScaleModeAspectFit;
[self addChild: [self newMonster]];
}
- (SKSpriteNode *)newMonster
{
SKSpriteNode *sKSpriteNode =
[SKSpriteNode
spriteNodeWithImageNamed:
@"monster.png"];
sKSpriteNode.position =
CGPointMake(CGRectGetMidX(
self.frame),CGRectGetMidY(
self.frame));
sKSpriteNode.name = @"MonsterNode";
return sKSpriteNode;
}

in der View angezeigt wird. Innerhalb von did­
MoveToView wird zuerst geprüft, ob die Szene
erstellt wurde. Anschließend wird die Methode createContent aufgerufen. Innerhalb der Methode createContent werden zunächst die Hintergrundfarbe und der ScaleMode geändert.
Zuletzt wird dort die bekannte Methode
addChild aufgerufen und ein SKSpriteNode-Objekt übergeben, das zuvor innerhalb der Methode newMonster erzeugt wurde.
Zur Initialisierung des SKSpriteNode-Objekts
wird in der Methode newNonster zuerst der Name des für das Sprite verwendeten Bildes, mons­
ter.png, übergeben. Anschließend wird die Position zur Anzeige des Sprites festgelegt. Der
Position-Eigenschaft werden hierzu die Mittelpunkte der x- und y-Achse der View übergeben. Ein Name wird auch noch vergeben. Das
so konfigurierte Sprite wird anschließend zurückgegeben. Nach Ausführung der App wird
nun das Monster in der Bildschirmmitte angezeigt (Bild 3).

Dem Monster Beine machen
Das statische Monster ist zwar ganz nett anzusehen, aber schöner wäre es, wenn es sich auch
noch etwas bewegen würde.
Hierzu bedarf es einiger zusätzlicher Zeilen
Code. Extra für Animationen gibt es die Klas2/2014

mobile development
Listing 4: Moving Monster
- (void)touchesBegan:(NSSet *)
touches withEvent:(UIEvent *)
event
{
SKNode *monsterNode = [self
childNodeWithName:
@"MonsterNode"];
if (monsterNode != nil)
{
SKAction *moveUp = [SKAction
moveByX: 0 y: 200.0
duration: 0.5];
SKAction *moveDown = [SKAction
moveByX: 0 y: -400.0
duration: 0.5];
SKAction *moveUp2 = [SKAction
moveByX: 0 y: 200.0
duration: 0.5];
SKAction *zoom = [SKAction
scaleTo: 2.0 duration: 0.25];
SKAction *zoomIn = [SKAction
scaleTo: 1.0 duration: 0.25];
SKAction *moveSequence =
[SKAction
sequence:@[moveUp, moveDown,
moveUp2, zoom, zoomIn]];
[monsterNode runAction:
moveSequence];
}

se SKAction. Mit dieser Klasse können Bewegungsabläufe eingeleitet und gesteuert werden.
Um das Monster in Bewegung zu setzen, wird
ein Ereignis verwendet. Sobald das Display berührt wird, soll die Animation beginnen. Verwendet wird hierfür das touchesBegan-Ereignis
(Listing 4).

Gewünschte Animation
Innerhalb von touchesBegan muss zuerst der
­Verweis auf das in der Methode newMonster erzeugte Sprite gelesen werden. Hierzu wird die
Methode childNodeWithName verwendet, welcher der Name des SKSpriteNode-Objekts übergeben wird. Wenn es einen Verweis gibt, also ein Sprite erzeugt wurde, dann kann im folgenden Schritt die gewünschte Animation erzeugt werden.
Eine Animation wird definiert durch ein
SKAction-Objekt. Mittels eines SKAction-Objekts können unterschiedliche Animationsmuster definiert werden. Beispielsweise ist es möglich, ein Sprite zu einer bestimmten Koordinate
mittels der moveBy-Methode zu bewegen.
Hierzu werden drei Parameter übergeben.
Ausgehend von der aktuellen Position des Sprites werden die Anzahl der Pixel für die x- und
y-Koordinate übergeben, in der sich ein Objekt
bewegen soll. Außerdem wird die Dauer der
2/2014

Animation festgelegt. Daneben
gibt es auch die Möglichkeit,
ein Sprite zu verkleinern oder
zu vergrößern (scaleTo) sowie es
ausblenden zu lassen (fadeOut­
WithDuration). Für jede Animation wird ein SKAction-Objekt
angelegt. Nach der Definition
aller Animationen werden die
Objekte in einer Auflistung zusammengefasst und können anschließend ausgeführt werden.
In Listing 3 ist dies gut zu sehen.
Zuerst wird eine positive Bewegung entlang der y-Achse definiert. Anschließend folgt eine
negative Bewegung auf der yAchse.
Die letzte Bewegung auf der
y-Achse sorgt dafür, dass sich
das Sprite wieder am Ausgangspunkt befindet. Anschließend
wird das Sprite vergrößert und
wieder verkleinert.
Die Bewegungsabläufe sind damit definiert.
Die SKAction-Objekte werden nun nur noch
in einer Sequence-Auflistung eingefügt und anschließend an die Methode runAction als Parameter übergeben. Wird die App jetzt erneut gestartet, so bewegt sich das Monster nach der Berührung des Bildschirms in den vorgegebenen
Richtungen.

Ein Monster mit
SKSpriteNode (Bild 3)

Fazit
Mit SpriteKit integriert Apple zum ersten Mal
eine Bibliothek zur Programmierung von Spielen direkt in die Betriebssysteme iOS und
OS X. Wenn man etwas länger darüber nachdenkt, so fallen eine ganze Reihe weiterer Einsatzmöglichkeiten ins Auge.
Ein Nachteil der Bibliothek ist natürlich die
Beschränkung auf die Apple-Plattformen. Wenn
das nicht stört, findet man in SpriteKit ein komfortables Werkzeug zur Erstellung von Spielen
und Animationen.
[mb]

Links zum Thema
About SpriteKit
▶ https://developer.apple.com/LIBRARY/IOS/
documentation/GraphicsAnimation/Conceptual/
SpriteKit_PG/Introduction/Introduction.html
Jumping into SpriteKit
▶ https://developer.apple.com/library/prerelease/
ios/documentation/GraphicsAnimation/
Conceptual/SpriteKit_PG/GettingStarted/
GettingStarted.html

73

mobile development
Programmierung von Firefox-OS-Applikationen

Der gute Name
Von einem Durchbruch kann noch keine Rede sein, aber die Beliebtheit von Firefox OS steigt.
Ein Tutorial zeigt, wie man Apps dafür programmiert. Von Tam Hanna

Autor
Tam Hanna
ist Autor, Trainer und Berater mit
den Schwerpunkten Webent­
wicklung und Webtechnologien.
Er bloggt sporadisch unter:
▶ www.tamoggemon.com
Inhalt
Programmierung von Firefox-OSApplikationen.

Das Öffnen des URL unter
Firefox erlaubt das Installieren
des Add-ons (Bild 2)

74

N

ach dem wenig glorreichen Tod
des Klassikers Symbian klafft eine Lücke im Low-End-Segment der
Mobil-Betriebssysteme. An­droid ist
aufgrund der internen Architektur
zu anspruchsvoll, um auf richtig
preiswerter Hardware zu arbeiten.
iOS ist von Apple als Premiumprodukt vorgesehen; für Bada gibt es
zu wenige Applikationen. Windows
Phone wäre ­brauchbar, leidet aber
unter den ex­
trem rigiden Hardwarevorgaben seitens Microsoft.
Mozilla kämpft schon länger um
ein Geschäftsmodell abseits von
Browsern für Notebooks und Desktops. Die mobilen Versionen des
Webbrowsers erfreuten sich bisher nur sehr marginaler Popularität. Die unter Windows und Co. erreichten Marktanteile erscheinen im
Mobilbereich utopisch.
Als Lösung für das Problem sieht
Mozilla ein mobiles B
­ etriebssystem. Die Architektur von Firefox OS als Übersichtsdiagramm (Bild 1)
Bei genügend geringem Speicher­
steller brauchen Unterstützung bei der Adapverbrauch wäre es für die Erschließung bisher
tierung der von ihren Chipherstellern angebonicht Smartphone-begeisterter Nutzerschichten
tenen Treiber. Zur Umgehung dieser Problemaideal geeignet. Der gute Name des Desktoptik entschied man sich bei Mozilla für eine schon
browsers würde die Einstiegsbarriere senken:
von der Access Linux Platform bekannte VorgeWer am Desktop mit Firefox surft, gibt der Mohensweise: Anstatt dem Betriebssystem einen eibilversion des Systems vielleicht eine Chance.
genen Kernel zu spendieren, greift man stattdessen auf eine leicht adaptierte Version von Linux
Architektur im Blick
zurück. Das quelloffene Betriebssystem bietet
Die Entwicklung eines Kernels für ein Mobilein durchaus respektables Power-Management.
computer-Betriebssystem ist eine unergiebige
Aufgrund der enormen Verbreitung im EmbedArbeit, die erfahrene (und dementsprechend
ded-Bereich gibt es kaum einen Chiphersteller,
teure) Programmierer voraussetzt. Zudem ist es
der keine Referenztreiber anbietet.
mit der Codierung nicht getan: HardwareherBei Mozilla wird dieser Kernel als Gonk bezeichnet. Er unterscheidet sich vom klassischen
Kernel insofern, als er einige tiefere APIs für
obere Schichten freigibt: Gecko darf beispielsweise direkt auf den Frame-Buffer und auf den
Telefonie-Stack zugreifen (Bild 1).
Eine Ebene darüber findet sich die von Mozilla als Gecko bezeichnete HTML-RenderingEngine. Diese läuft direkt auf Gonk und enthält
neben den diversen zur Darstellung von HTML
und CSS benötigten Modulen laut MDN auch einen kleinen Netzwerk-Stack.
2/2014

mobile development
Die von Gecko bereitgestellten Open Web
Platform Interfaces dienen dem GUI-Modul
Gaia zum Realisieren seiner diversen Funktionen. Gaia ist eine komplett in HTML und CSS
geschriebene Webseite, die das gesamte GUI des
Telefons realisiert: Jedes Modul und jede von
Haus aus inkludierte Applikation basiert auf
Gaia. Drittanbieterprogramme werden ebenfalls in Gaia ausgeführt.
Mobilerfahrene Entwickler suchen bei dieser
Beschreibung nach einer Möglichkeit zur Ausführung von nativem Code. Diese ist nicht gegeben: Wer eine Anwendung für Firefox OS erstellen möchte, muss dazu auf Webtechnologien zurückgreifen. Anders als bei Palm WebOS
gibt es laut bisherigem Informationsstand im
Hause Mozilla auch noch keine Absicht, dies
zu ändern.

Erste Schritte in die Welt von FFOS
Gecko kommt nicht nur auf dem Smartphone
zum Einsatz: Die Windows-, Linux- und MacOSVersionen von Firefox nutzen die Rendering-­
Engine zur Darstellung der diversen Webinhalte. Aus diesem Grund setzt Mozillas Entwickler-Toolchain konsequent auf den hauseigenen
Desktop-Browser. Der erste Schritt in die Welt
von Firefox OS ist das Herunterladen der aktuellsten Version des Browsers.
Einige Funktionen setzen die inzwischen verfügbare Firefox-Version 26 voraus. Der Autor
nutzte für die im Artikel beschriebenen Schritte
noch die zu diesem Zeitpunkt neueste verfüg­
bare Beta-Version 26.0b8 unter einer 32-Bit-Version von Windows 7.
Nach der erfolgreichen Installation müssen
Sie den Firefox OS Simulator herunterladen. Dazu öffnen Sie den URL https://addons.mozilla.
org/en-US/firefox/addon/firefox-os-simulator
und klicken danach auf den in Bild 2 gezeigten
Button Add to Firefox.
Der Simulator ist rund 50 MByte groß. Sobald
der Download erfolgreich abgeschlossen ist,
präsentiert Firefox den Software-Installations­
dialog. Klicken Sie dort auf Install, um den Set­
up-Prozess für die Erweiterung anzustoßen.
Je nach Geschwindigkeit Ihres Rechners erscheint während des rund 30 Sekunden dauernden Installationsprozesses unter Umständen eine auf ein nicht reagierendes Skript hinweisende Fehlermeldung. Quittieren Sie diese durch
Klick auf Continue – das Abbrechen des Skripts
stoppt die Installation.
Nach dem erfolgreichen Abarbeiten der Routinen öffnet sich das Simulator-Dashboard.
Wenn dies auf Ihrem Rechner aus irgendeinem
Grund nicht der Fall ist, so öffnen Sie das Dashboard über Firefox, Web Developer und Firefox OS
Simulator (Bild 3).
2/2014

Die beiden Buttons am oberen Rand erlauben Ihnen das Hinzufügen der diversen von
Firefox OS unterstützten Applikationen. In­
stallierte Programme erscheinen in der Liste in
der Bildschirmmitte, die darunter aufscheinenden Knöpfe ermöglichen das Aktualisieren und
Ausgeben der Programme.
Zum Start des Simulators müssen Sie den
Schalter auf der linken Seite umlegen. Quasi nebenbei prüft das Dashboard auch, ob die Manifeste der diversen Programme gültig sind – Fehler werden sofort moniert.

Das Simulator Dashboard erlaubt
Ihnen die Verwaltung und den Test
Ihrer Applikationen (Bild 3)

Zwei Applikationen sollst du haben
Seit den zweifelhaften Erfolgen von Cabir und
Co. gibt es kaum ein mobiles Betriebssystem,
das ohne Rechteverwaltung auskommt. Im webbasierten Firefox OS ist die Lage um einiges
komplizierter: Das Betriebssystem führt sowohl
paketierte als auch im Internet verfügbare Programme aus.
Die Qualitätssicherung ersterer Applikatio­
nen ist vergleichsweise einfach. Im Web-Fall
gibt es nichts, was den Autor des Programms
daran hindert, seinen Code nach dem erfolgreichen Absolvieren des Quality-Assurance-Tests
zu pervertieren.
Firefox OS kennt im Moment drei verschiedene Arten von paketierter Applikation. Sie unterscheiden sich in Zugriffsrechten und Verhalten.
Tabelle 1 gibt Ihnen eine kleine Übersicht.
Die Erfahrung lehrt, dass die Dauer des Reviews in direktem Zusammenhang zur Komplexität der Applikation steht. Web-Apps sind
in der Regel in drei bis sieben Werktagen im
Store. Das Erstellen einer paketierten Ap- ▶

Tabelle 1: Applikations-Typen
Typ
Packaged App

Privileged App
Certified App

Beschreibung
Gehostete Webapplikation, die zur Vereinfachung der Offline-Nutzung verpackt wurde;
hat keine besonderen Rechte
Applikation mit höheren Rechten; stellt
extreme Ansprüche an die Codequalität
Nur für Gerätehersteller zugänglicher
Applikationstyp; gewährt maximale Rechte
bei vergleichsweise moderaten Ansprüchen
an die Codequalität

Manifest-Deskriptor
keine Änderung

privileged
certified

75

mobile development
Listing 1: base.js
// Install app

install.className = "show-install";

if (navigator.mozApps) {

install.onclick = function () {

var checkIfInstalled = navigator.mozApps.getSelf();

var installApp = navigator.mozApps.
install(manifestURL);

checkIfInstalled.onsuccess = function () {

installApp.onsuccess = function(data) {

if (checkIfInstalled.result) {

install.style.display = "none";

// Already installed

};

var installationInstructions = document.
querySelector("#installation-instructions");

installApp.onerror = function() {

if (installationInstructions) {

alert("Install failed\n\n:" +
installApp.error.name);

installationInstructions.style.display =
"none";

};

}

};

}

}

else {

};

var install =
document.querySelector("#install"),
manifestURL = location.href.substring(0,
location.href.lastIndexOf("/")) +
"/manifest.webapp";

}
else {
console.log("Open Web Apps not supported");
}

plikation mit Zugriff auf TCP-Sockets bringt Ihnen schon mal eine einmonatige Wartezeit auf
Freigabe ein.
Im Moment sollten Sie eine weitere Besonderheit beachten. Im Backend des Stores angemeldete Updates von gehosteten Webapplikationen erscheinen nicht in der New-Liste des
Firefox Marketplace. Dadurch wird es schwieriger, Neukunden anzusprechen.

Erste Anwendung
Das Firefox OS Boilerplate
besteht aus einer Gruppe
von Buttons (Bild 4)

76

Nach diesen eher theoretischen Überlegungen
ist es an der Zeit, eine erste Anwendung für
Firefox OS zusammenzubauen. Da es sich dabei um normale Webseiten handelt, gibt es nicht
allzu viel Template-Code – das Sitzen vor dem
leeren Bildschirm wirkt auf viele Entwickler abschreckend.
Zur Erleichterung des Einstiegs bietet Mozilla eine als Firefox OS Boilerplate App bezeichnete Vorlage an. Diese findet sich unter https://
github.com/robnyman/Firefox-OS-BoilerplateApp. Öffnen Sie den URL im Webbrowser und
klicken Sie den auf der rechten Seite des Bildschirms befindlichen Button Download ZIP an.
Extrahieren Sie das heruntergeladene Projekt
an ein beliebiges Verzeichnis im Dateisystem. Es
realisiert eine paketierte Applikation. Deshalb
müssen Sie es über den Button Add Directory des
Dashboards öffnen. Klicken Sie ihn an, um den
CommonDialog zu öffnen. Navigieren Sie mit
ihm in das Projektverzeichnis, und wählen Sie
die Manifestdatei aus. Das Programm erscheint
daraufhin automatisch in der Liste.
Das ist das Verdienst der Manifestdatei. Jede
Firefox-OS-Applikation enthält eine derartige
Datei, deren Name normalerweise auf manifest.
webapp lautet. In unserem Beispielprogramm
sieht der Inhalt des Files – stark gekürzt – so aus.

Die ersten vier Eigenschaften enthalten grundlegende Informationen über das Programm:
{"version": "1",
"name": "Firefox OS Boilerplate App",
"launch_path": "/index.html",
"description": "Boilerplate Firefox
OS app with example use cases to get
started",

Firefox OS ist mit diversen Bildschirmauflösungen kompatibel. Da sich SVG bei Entwicklern
von Handcomputerapplikationen bisher nicht
wirklich durchsetzen konnte, erlaubt das Betriebssystem das Anlegen mehrerer verschieden
großer Icons:
"icons": {
"16": "/images/logo16.png",
"32": "/images/logo32.png",
...
},

Die Daten im developer-Feld liefern Auskünfte
über die Herkunft des Programms:
"developer": {
"name": "Robert Nyman",
"url": "http://robertnyman.com" },
"installs_allowed_from": [ "*" ],

default_locale legt die von Haus aus voreingestellte Sprache fest. Das ist insofern wichtig, als
vom Betriebssystem nicht unterstützte Sprachen
über die Default-Einstellung bedient werden:
"default_locale": "en",

Je nach Applikationstyp sind mehr oder weniger Permissions erforderlich. Die Deklara­tion
2/2014

mobile development
ebendieser erfolgt im permissions-Feld. Pro Zugriffsrecht ist neben der eigentlichen Eigenschaft auch eine Beschreibung notwendig, die
den Grund der Anforderung erklärt:
"permissions": {
"desktop-notification": {
"description": "To show
notifications"
},
"geolocation": {
"description": "Marking out user
location"
}
},

Wenn Sie Ihre Applikation in mehrere Sprachen übersetzen möchten, müssen Sie die Manifestdatei um locales-Tags ergänzen. Die hier gezeigten Tags realisieren eine englische und eine
deutsche Version der Programmbeschreibung:

Als Erstes sticht die Verwendung des <header>Tags ins Auge. Er erlaubt Ihnen das Realisieren
einer Kopfzeile – die dazugehörenden CSS-Stile
sind ebenfalls Teil des Projekts und lassen sich
jederzeit in Ihr eigenes Programm verfrachten:

Die untere ­Entwicklerkonsole
­ist direkt mit dem Simulator
verbunden (Bild 5)

"locales": {
"en": {

<body>

"name": "Firefox OS Boilerplate
App", "description": "Boilerplate
Firefox OS app with example use
cases to get started"

<section role="region">
<header>
<!-- Icon that will indicate

},

whether you are online or offline

"de": {

- enabled if you are using

"name": "Firefox OS Boilerplate

offline/appcache (see above) -->

App", "description": "Boilerplate

<div id="online-status"

Firefox OS App mit Beispiel

title="Online"></div>

Anwendungsfälle, um loszulegen"

<menu type="toolbar">

},
}

<button id="install">
<span class="icon icon-add">
add</span>

Mozilla gibt keine integrierte Entwicklungsumgebung vor. Der Autor verwendet als Gewohnheitstier – trotz aller Performance-Probleme –
Visual Studio for Web. Andere Entwickler berichten von Erfolgen mit Mozilla, der Mitentwickler von TouchCalc realisierte seinen Teil mit
einem primitiven Texteditor.
index.html enthält den Gutteil der für die
Darstellung des in Bild 4 gezeigten Formulars
notwendigen Intelligenz. Aufgrund ihrer vergleichsweise hohen Komplexität wollen wir hier
nur einige interessante Abschnitte betrachten.

2/2014

</button>
</menu>
<h1 data-l10n-id="app-heading">
Firefox OS Boilerplate App
</h1>
</header>
</section>

Die mit data-l10n-id beginnenden Tags enthalten Informationen, die zur Internationalisierung
der Anwendung notwendig sind. Zur Laufzeit
werden die in der HTML-Datei enthaltenen ▶

Nach dem Start sieht der
Debugger-Tab nicht wirklich wie
ein Debugger aus (Bild 6)

77

mobile development
Nutzung von jQuery. Im Fall des Boilerplates
findet sich die Intelligenz in der Datei webapp.js:
...
var sendSMS = document.
querySelector("#send-sms");
if (sendSMS) {
sendSMS.onclick = function () {
var sms = new MozActivity({
name: "new", // Possible

Der Debugger zeigt Informationen
über den lokalen und den globalen
Programmzustand an (Bild 7)

compose-sms in future versions

Strings durch die Inhalte der passenden Sprachdatei ersetzt – die an data-l10n-id übergebenen
Schlüssel dienen der Identifikation des passenden Elements in der Sprachdatei.
Eine zweite Besonderheit von Firefox OS findet sich in der Deklaration der Buttons, die hier
in stark gekürzter Form wiedergegeben sei:
<button id="compose-email" data-l10nid="compose-email">Compose mail
</button>
<button id="save-bookmark" data-l10nid="save-bookmark">Save bookmark
</button>
<button id="open-video" data-l10nid="open-video">Open video
</button>

Paketierte Applikationen mit höherem Privilegiengrad dürfen aufgrund einer als CSP bezeichneten Richtlinie keinen inline-Code aufweisen – das Verwenden eines onClick-Tags
würde zur Laufzeit zur Verweigerung des Programms führen. Firefox-Entwickler umgehen
dieses Problem im Allgemeinen durch kreative

JavaScript mit Beschränkungen
JavaScript ist eine vergleichsweise unsichere Sprache – es gibt neben der bekannten eval()Funktion rund tausend weitere Wege, um Code am Reviewer vorbeizuschleusen. Mozilla umgeht
dieses Problem durch die Content Security Policy (CSP). Dabei handelt es sich um eine Spezi­
fikation, die manche Teile von JavaScript als verboten erklärt.
Im Fall von privilegierten Applikationen sieht die CSP so aus:
default-src *; script-src 'self'; object-src 'none'; style-src 'self'
'unsafe-inline'"

CSPs bestehen aus einer Gruppe von Directives, die verschiedene Beschränkungen für die En­
gine enthalten. Jedes Attribut ist mit einem Semikolon von den anderen getrennt – die hier vor­
liegende CSP besteht aus vier verschiedenen Anweisungsgruppen.
In der Praxis sorgt die zweite Directive für besonderen Ärger. Sie weist die JavaScript-Engine
dazu an, im HTML enthaltenen Inline-Code zu blockieren und Aufrufe von eval() und ihren Wrap­
perfunktionen (manche Overloads von setTimeout()) zu verweigern. Das Nullsetzen von objectsrc sorgt dafür, dass Elemente nach dem Schema <object>, <embed> oder <applet> verwei­
gert werden. Style-src weicht die Regeln im Bezug auf css-Dateien etwas auf, was das Verwen­
den des style-Attributs in der HTML-Datei erlaubt.
▶ https://developer.mozilla.org/en-US/docs/Security/CSP/Introducing_Content_Security_
Policy

78

data: {
type: "websms/sms",
number: "+46777888999"
}
});
}
}

In die HTML-Datei geladene JavaScript-Dateien
werden im Rahmen des Ladens der Seite evaluiert. Der hier gezeigte Code nutzt diese Gelegenheit, um einen Zeiger auf den Button zu erhalten
– so dieser vorliegt, wird er sogleich mit der für
onClick notwendigen Logik verdrahtet.
Aus systemtechnischer Sicht ist diese Vorgehensweise zumindest fragwürdig. Die Trennung von Benutzer-Interface und Programmlogik führt meist zu einer wesentlichen Steigerung
der Übersichtlichkeit: Eine Datei handhabt den
Glue Code, eine andere Datei ist für das Ansprechen der diversen Web APIs zuständig.

Homescreen-Einpflegung
Der iPod touch erlaubte seinen Benutzern von
Anfang an, Webseiten als Icons in der Programmliste einzupflegen. Mozilla kopiert diese durchaus innovative Funktion in Firefox OS.
Wenn Sie die index.htm-Datei des BoilerplateBeispiels im Simulator laden, so erscheint ein
Plus-Symbol in der Statusleiste.
Seine Realisierung ist die alleinige Aufgabe
des Entwicklers. Der HTML-Teil ist in der Boilerplate-Applikation über die weiter oben besprochene Toolbar realisiert – zur Auffrischung
hier nochmals das relevante Snippet:
<menu type="toolbar">
<button id="install"><span class=
"icon icon-add">add</span></button>
</menu>

In der Datei base.js findet sich sodann der Code
aus Listing 1, der bei jedem Laden der Webseite
ausgeführt wird.
Dieses auf den ersten Blick erschlagend wirkende Snippet ist in Wirklichkeit vergleichsweise einfach. Der bei jedem Start des Browsers abgearbeitete Teil des Codes prüft im ersten
2/2014

mobile development
Schritt, ob die Applikation schon auf dem Telefon installiert ist. In diesem Fall verschwindet
der Install-Button aus der Toolbar. Ist das Programm noch nicht auf dem Handy, so bekommt
der Button per jQuery einen Klick-Handler zugewiesen. Dieser nutzt die install-Methode des
mozApps-Objekts zum Anlegen einer Referenz
am Homescreen.

Applikation testen
Mozilla nahm in Sachen Browser-Developertools eine Pionierrolle ein: Der Browser bringt
seit Jahren eine Gruppe von attraktiven Werkzeugen zur Fehlersuche in Webapplikationen
mit. Diese lassen sich im Großen und Ganzen
auch im Zusammenspiel mit dem Firefox-OSSimulator verwenden.
Öffnen Sie dazu die Developer Tools über den
dazugehörenden Menübutton. Klicken Sie danach auf den Connect-Knopf neben der zu testenden Anwendung. Der Emulator startet da­
raufhin automatisch, in der Konsole erscheint
die in Bild 5 gezeigte Vollzugsmeldung.
Von Ihrer Applikation ausgegebene Konsolenmeldungen erscheinen im Console-Tab.
Zum Durchführen von komplexeren Analysen
des Laufzeitverhaltens sollten Sie auf den Debugger-Tab setzen. Im normalen Zustand zeigt
er den Inhalt der JavaScript-Dateien Ihres Programms an (Bild 6).
Wirklich nützlich wird die Konsole in dem
Moment, wo Sie einen Breakpoint festlegen. Dazu wählen Sie die relevante Datei in der Liste auf
der linken Seite des Bildschirms aus und klicken
danach die Zeilennummer an. Wenn die Codezeile das nächste Mal abgearbeitet wird, so zeigt
Ihnen das Produkt eine Vielzahl von nützlichen
Informationen an (Bild 7).
Das Zusammenstellen von CSS-Dateien ist in
der Regel eine frustrierende Feinarbeit, die von
den meisten IDEs nicht wesentlich vereinfacht
wird. Die Firefox Developer Tools bieten mit
dem ­Style Editor eine mehr als hilfreiche Sonderfunktion an.
Nach seiner Aktivierung erscheint eine an den
Debugger erinnernde Ansicht am Bildschirm,
die die CSS-Dateien Ihres Projekts auflistet. Die
ausgewählte Datei lässt sich direkt editieren, die
Resultate Ihrer Änderungen erscheinen wie in
Bild 8 gezeigt direkt. Wenn Ihnen die Resultate der Bearbeitung zusagen, so können Sie diese
durch Klick auf den Save-Link ohne Umweg in
die IDE speichern.

Firefox bietet viele der am Smartphone lauffähigen Web APIs auch am Desktop an. Zum Zeitpunkt der Drucklegung fehlen nur die folgenden Namespaces:
■ Telephony,
■ WebSMS,
■ WebBluetooth,
■ Ambient Light,
■ Proximity,
■ Network Information,
■ navigator.onLine and offline events,
■ Vibration.
Es ist immer sinnvoll, Programme vor der Auslieferung an Kunden auf einem realen Telefon
zu testen. Die Kombination aus Monitor, Tastatur und Maus kann die haptischen Gegebenheiten eines echten Handcomputers nur schwer
nachbilden. Zudem sind heutige Workstations
extrem schnell: Ein am Notebook perfekt flüssiges Programm kann am Smartphone zicken.
Leider unterscheidet sich die genaue Instal­
la­
tionsmethode von Hersteller zu Hersteller.
GeeksPhone bietet keine signierten Treiber an,
weshalb unter Windows 8 zusätzliche Handarbeit erforderlich ist (siehe https://developer.
mozilla.org/en-US/Firefox_OS/Debugging/Con
necting_a_Firefox_OS_device_to_the_desktop).
Die Treiber aus dem Hause ZTE sind signiert,
stehen aber nur für Windows und Linux zur
Verfügung (siehe https://hacks.mozilla.org/2013
/08/pushing-a-firefox-os-web-app-to-zte-openphone).
Nachdem die jeweiligen Installationsanweisungen erfolgreich abgearbeitet wurden, ▶

Das Anpassen von Farben – hier
auf Violett – geht mit dem Style
Editor rasch von der Hand (Bild 8)

Das Simulator-Dashboard hat
das Telefon erkannt (Bild 9)

App auf das Gerät
Da der Simulator als Teil von Gecko implementiert ist, kann er viele der Funktionen der
zugrunde liegenden Workstation mitnutzen.
2/2014

79

mobile development

Die Boilerplate-App ist auch im
App Manager lebensfähig (Bild 10)

sollte Ihr Gerät im Simulator-Dashboard erscheinen (Bild 9).
Der Button Push schiebt eine Anwendung auf
das angeschlossene Smartphone. Aufgrund diverser Beschränkungen im Betriebssystem müssen Sie die Applikation von Hand neu starten,
nachdem Sie eine aktualisierte Version eingespielt haben. Änderungen an der Manifestdatei
verlangen sogar einen Systemneustart.

Sprechen Sie App Manager?
Das im Simulator integrierte Dashboard weist
einige Schwächen auf. Es ist (unter anderem)
nicht wirklich möglich, Programme am Telefon
zu debuggen. Da ein Refactoring des existierenden Systems von Mozilla als nur wenig zielführend empfunden wurde, ersann das Unternehmen den App Manager.
Er ist in der Desktopversion von Firefox 26
enthalten und lässt sich durch die Eingabe des
URL about:app-manager öffnen. Er verlangt ei-

Listing 2: Beispiel
// Read
var tmgnRead= document.querySelector("#btnRead");
if (tmgnRead) {
tmgnRead.onclick = function ()
{
if (localStorage.length >= 1)
{
alert(localStorage.getItem("Schluessel"));
}
};
}
// Write
var tmgnStore = document.querySelector("#btnStore");
if (tmgnStore) {
tmgnStore.onclick = function () {
localStorage.setItem("Schluessel", "Hallo NMG!");
};
}

80

ne spezielle Variante des Firefox-OS-Simulators,
die unter dem URL https://ftp.mozilla.org/pub/
mozilla.org/labs/fxos-simulator herunterladbar
ist. Wenn Sie statt des Emulators auf ein reales
Gerät mit Firefox OS 1.2 zurückgreifen möchten, so installieren Sie statt dem 1.2-Simulator
den ADB-Helper.
Kenner von Googles quelloffenem Betriebssystem reiben sich beim Lesen dieses Artikels
mitunter verwundert die Augen. Firefox OS
nutzt die von Android bekannte Android Debug Bridge zur Kommunikation mit Endgeräten – der ADB Helper ist eine Standalone-Version des Debugging-Werkzeugs aus dem Google-SDK.
Nach der erfolgreichen Installation aller notwendigen Komponenten erscheint das gerade aktuelle Ziel in der Toolbar am unteren
Bildschirmrand. In den App Manager geladene Programme werden in einer Liste angezeigt
(Bild 10). Zum Ausführen von Programmen ist
eine Verbindung zu einem Simulator oder einem Gerät erforderlich. Wenn Sie kein Smartphone anschließen möchten, so klicken Sie auf
Start Simulator. Im nächsten Schritt folgt ein
Klick auf Update, um die installierte Version des
Programms mit der aktuellsten am Dateisystem
befindlichen zu überschreiben. Nach dem erfolgreichen Start der App klicken Sie auf Debug,
um eine schwebende Version der Debuggerkonsole auf den Bildschirm zu holen. Diese verhält
sich eins zu eins wie weiter oben besprochen.

Daten remanent speichern
Obwohl Firefox OS per se webbasiert ist, müssen die darauf befindlichen Applikationen i­hre
Daten auch offline remanent speichern können.
Dazu stellt das System eine Gruppe von verschiedenen Schnittstellen vor, die sich in der Art
der entgegengenommenen Datentypen und in
ihrer Repräsentation unterscheiden.
Am einfachsten speichern Sie kleine Datenmengen mit dem LocalStorage API. Dabei handelt es sich um eine im HTML5-Standard spezifizierte Schnittstelle, die Programmen zwischen
5 und 10 Megabyte Remanentspeicher an einem vom Programmierer nicht beeinflussbaren
Platz im Dateisystem zuweist.
Die zur Speicherung von Daten zum Einsatz
kommende Vorgehensweise erinnert stark an
die von Windows Phone bekannten Preferenzklassen. Das LocalStorage ist als remanentes
Key-Value-Array ausgelegt: Ihre Einträge wandern in Form von mit Strings versehenen Schlüsseln in den Speicher.
Dazu wollen wir ein kleines Beispiel zusammenstellen. Es erweitert das Boilerplate-Tem­
plate um zwei Buttons, die mit dem Code in Listing 2 belebt werden.
2/2014

mobile development
Wenn Sie das hier gezeigte Snippet in das Boilerplate-Beispiel einbinden, so können Sie den
als Beispiel verwendeten String in den Local
Storage schreiben und ebendort auslesen. Falls
Sie alle Einträge des Storage verarbeiten möchten, sollten Sie stattdessen auf die Methoden
key(index) und length() zurückgreifen. Zum Löschen des gesamten Storage dient die clear()Funktion.
LocalStorage ist in Firefox OS synchron realisiert, längere Leseoperationen blockieren den
für die Programmausführung lebenswichtigen
Hauptthread.
Zum Speichern von größeren Datenmengen
ist das IndexedDB API besser geeignet. Auch
hier handelt es sich um ein HTML5-API, das eine im Browser lebensfähige NoSQL-Datenbank
samt Transaktionssupport anbietet.
Die komplizierteste Version der Datenspeicherung ist der Zugriff auf die nativen Dateisysteme des Telefons. Firefox OS unterteilt die Remanentspeicherbänke in logische Blöcke, die in
Tabelle 2 aufgegliedert sind.
Wenn Ihr Programm auf eine der Bänke zugreifen möchte, so muss es die relevanten Permissions im Manifest beantragen. Das erfolgt
durch eine am folgenden Snippet angelehnte
Deklaration:

Tabelle 2: Remanentspeicherbänke
Akzessor
apps

music
pictures
sdcard
videos

Inhalt
Daten, die von den diversen auf dem Tele­
fon installierten Applikationen abgespeichert
werden
Musikdateien
Bilder
Root einer im Gerät befindlichen SD-Karte
Videos

Notwendige Rechte
certified

privileged
privileged
privileged
privileged

var size = this.result / 1000000;
}
request.onerror = function ()
{
}

Zur Suche nach Dateien kommen als Cursor bezeichnete Objekte zum Einsatz. Diese akzeptieren eine Gruppe von Parametern, die die zurückzuliefernden Elemente beschreiben – gefundene Items werden nacheinander an die von
Ihnen zu übergebende Erfolgsfunktion weitergeleitet:
var pics = navigator.
getDeviceStorage('pictures');
var cursor = pics.enumerate();

"permissions": {

cursor.onsuccess = function () {

"device-storage:videos":{ "access":

var file = this.result;

"readonly" },

if (!this.done) {
this.continue();

"device-storage:pictures":{
}

"access": "readwrite" }
}

}
cursor.onerror = function ()

Die Unterteilung der Speicherbänke ist nicht
willkürlich. Das Device Storage API prüft den
Mime-Typ einer ins Dateisystem geschriebenen
Datei auf Plausibilität – es ist nicht möglich, audio, videos oder pictures mit unpassenden MimeTypen zu füttern.
Der eigentliche Zugriff erfolgt über ein an
Symbian und Samsung Smart TV erinnerndes
Verfahren. Im ersten Schritt müssen Sie einen
Zeiger auf das jeweilige Dateisystem erhalten –
im Fall der SD-Card sieht der dazu notwendige
Befehl so aus:

{
}

Das Device Storage API ist vergleichsweise
komplex. Weitere Informationen zur Ver- ▶
­

Das Settings API ist nur für
zertifizierte Applikationen
zugänglich (Bild 11)

var sdcard = navigator.
getDeviceStorage("sdcard");

Anfragen erfolgen normalerweise asynchron.
Als Beispiel dafür dient folgendes Codesnippet,
das den bereits verbrauchten Speicherplatz im
Sdcard-Storage ermittelt:
var request = sdcard.usedSpace();
request.onsuccess = function ()
{

2/2014

81

mobile development
Listing 3: SMS
var dial = document.
querySelector("#dial");
if (dial) {
dial.onclick = function () {
var call = new MozActivity({
name: "dial",

wendung des API finden Sie
im Mozilla Developer Network unter dem URL https://
developer.mozilla.org/en/docs/
WebAPI/Device_Storage.

Sprechen Sie Web API

data: {

Firefox OS basiert im Großen
und Ganzen auf HTML5. In
});
normalen Browsern nicht an}
sprechbare Funktionen werden
}
über sogenannte Web APIs realisiert. Dabei handelt es sich um
var sendSMS = document.
querySelector("#send-sms");
von Mozilla selbst spezifizierif (sendSMS) {
te KommunikationsschnittstelsendSMS.onclick = function () {
len, die in dieser Form oft nicht
var sms = new MozActivity({
bei anderen Anbietern implename: "new", // Possible
mentiert sind.
compose-sms in future
versions
Zum Zeitpunkt der Druckledata: {
gung sind gute zwei Dutzend
type: "websms/sms",
APIs spezifiziert, die den Zunumber: "+46777888999"
griff auf diverse Hardwaresen}
soren, die Zahlungsengine des
});
}
Stores und auf klassische TCP}
Sockets erlauben. Im MDN finden Sie unter https://developer
.mozilla.org/en-US/docs/Web
API eine Übersicht über die verfügbaren Funktionen – die angebotenen Beispiele sind im Allgemeinen von hoher Qualität.
Beachten Sie, dass einige der APIs nur für privilegierte oder gar nur für zertifizierte Programme zur Verfügung stehen. Den Privilegierungsgrad einer Schnittstelle erkennen Sie an dem neben dem Namen angezeigten Bubble (Bild 11).
number: "+46777888999"

}

Listing 4: MozActivity
var pickAnything = document.querySelector("#pick-anything");
if (pickAnything) {
pickAnything.onclick = function () {
var pickAny = new MozActivity({
name: "pick"
});
pickAny.onsuccess = function () {
var img = document.createElement("img");
if (this.result.blob.type.indexOf("image") != -1) {
img.src = window.URL.createObjectURL(this.result.blob);
document.querySelector("#image-presenter").
appendChild(img);
}
};
pickAny.onerror = function () {
console.log("An error occurred");
};
}
}

82

Links zum Thema
HTML Geolocation API
▶ http://dev.w3.org/geo/api/spec-source.html
Marketplace für Firefox OS
▶ https://marketplace.firefox.com
Portierungsanleitung
▶ https://developer.mozilla.org/en-US/docs/
Mozilla/Firefox_OS/Porting?redirectlocale=
en-US&redirectslug=Firefox_OS%2FPorting
Firefox OS Simulator Plug-in
▶ https://addons.mozilla.org/de/firefox/addon/
firefox-os-simulator
Web-API-Liste
▶ https://developer.mozilla.org/en-US/docs/
WebAPI
Mozilla-Wiki zu Gaia Building Blocks
▶ https://wiki.mozilla.org/Gaia/Design/
BuildingBlocks
Building Firefox OS
▶ http://buildingfirefoxos.com

Eine der Grundideen von Unix besagt, dass
das Betriebssystem aus einer Gruppe von kleinen und hoch spezialisierten Applikationen aufgebaut ist. Programme und Shellskripts haben
die Aufgabe, diese Building Blocks zu nützlichen Systemen zusammenzustellen.
Unter Firefox OS wird ein ähnliches Pattern
unterstützt. Eine Web Activity ist ein Einsprungpunkt in ein anderes Programm. Dieses erledigt
die in der Aufforderung enthaltenen Aufgaben
und liefert Resultate zurück – Ähnlichkeiten mit
Android-Intents sind rein zufällig.
Von Haus aus implementiert das Betriebssystem gute zwei Dutzend Activities. Diese sind
unter https://developer.mozilla.org/en-US/docs/
WebAPI/Web_Activities#Firefox_OS_activities
aufgelistet – die meisten davon funktionieren
auch im Simulator.
Im Boilerplate finden Sie eine Gruppe von
Beispielen für das Ansprechen von Web Activities. Die beiden Methoden in Listing 3 realisieren das Anrufen und den Versand einer Kurznachricht.
Das Absetzen einer Web Activity erfolgt
durch das Erstellen einer MozActivity-Instanz.
Diese nimmt in ihrem Konstruktor einen oder
mehrere Parameter entgegen, die die auszuführende Anfrage konkretisieren. Beim Zurückliefern von Werten kommt eine etwas eigenwillige Syntax zum Einsatz (Listing 4). Das Festlegen
der Funktionen erfolgt erst nach dem Absetzen
2/2014

mobile development
der jeweiligen Anfrage. Da diese – auf den ersten Blick konterintuitive – Vorgehensweise in so
gut wie allen Beispielen implementiert ist, wird
sie auch funktionieren. Praktisch lässt sich dies
am ehesten durch Verzögerungen im Rahmen
der Bearbeitung des Aufrufs erklären, theoretisch warten die MozActivities auf das Zuweisen eines passenden Event Handlers.
Wenn Sie Ihr Programm für Drittanbieter ansprechbar gestalten möchten, so können Sie
auch eine eigene Web Activity deklarieren. Dazu sind keine besonderen Rechte erforderlich –
aus Latenzgründen setzt das Betriebssystem allerdings voraus, dass Ihr Programm in Form einer paketierten Applikation vorliegt.

Applikation vertreiben
Das Fernziel von Mozilla ist, dass jeder Netzbetreiber seinen Kunden seinen eigenen Store anbietet. Im Moment ist dies noch nicht der Fall:
Wer eine Firefox-OS-Applikation an den Mann
bringen möchte, muss dies über den Firefox
Marketplace tun. Der erste Schritt besteht darin, sich unter https://marketplace.firefox.com/
developers einzuloggen – die Verwendung des
Mozilla-eigenen Authentifizierungsdiensts Persona ist verpflichtend.
Im nächsten Schritt klicken Sie auf den Submit
an app-Knopf. Sofern von Ihrer Seite noch rechtliche Abklärungen erforderlich sind, erscheinen
diese am Bildschirm. Wenn Sie schon alle Verträge abgenickt haben, so landen Sie direkt im
Hochladedialog.
Dieser fragt Sie im ersten Schritt nach dem gewünschten Applikationstyp. Wenn Sie eine gehostete Applikation anbieten möchten, so müssen Sie dem Store den URL zur Manifestdatei
verraten. Ist Ihr Programm paketiert, so ist ein
ZIP-Archiv erforderlich. Dieses entsteht, indem
Sie alle relevanten Dateien samt dem Manifest
zippen. Wichtig ist, dass das Manifest nicht in einem Unterordner des Archivs liegen darf.
Im zweiten Schritt sind diverse Informationen über das Programm notwendig. Es ist empfehlenswert, das Icon samt sechs Screenshots im
Portrait Mode hochzuladen, um das Listing optimal auszunutzen. Ist Ihr Programm lokalisiert,
so sollten Sie jede Sprache mit einem eigenen
Beschreibungstext würdigen – die Suchengine
durchsucht alle Textvarianten, was die Findbarkeit Ihres Programms erhöht.
Zu guter Letzt noch ein Hinweis zur idealen
Textlänge. Der Firefox OS Marketplace stellt den
Beschreibungstext immer in zwei Spalten dar.
Bei sehr kurzen Beschreibungen führt das zu
unansehnlichen Resultaten (Bild 12 und Bild 13).
Der Firefox Store bietet im Moment keine
Möglichkeit an, um die Verbreitung der Applikation wirksam zu prüfen. Im Backend fin2/2014

det sich nur eine allgemeine Downloadzahl, die
nicht nach Geräten oder Geographien aufgesplittet ist. Als kleinen Ersatz bietet der Autor
die in Bild 14 gezeigten Informationen an.
Diese stammen vom für die Monetisierung
des wissenschaftlichen Taschenrechners TouchCalc verwendeten Werbenetzwerk Smaato. Da
WebOS und Firefox OS über ein gemeinsames
Konto laufen, ist eine gewisse Übergewichtung
der Vereinigten Staaten von Amerika nicht aus▶
zuschließen:

Zu kurze Beschreibungstexte
erscheinen aufgrund des
Zweispaltenlayouts mit einer
Lücke (Bild 12)

Ist der Beschreibungstext ausreichend lang, sieht das Listing
komplett aus (Bild 13)

83

mobile development
müssen Sie auf ein nach dem folgenden Schema
aufgebautes Snippet zurückgreifen:
var options = {
TYPE: "Banner",
REFRESH_RATE: 18,
APP_ID: "Test_App_ID"
};
var myAd = Inneractive.
createAd(options);
myAd.addTo(document.body);
myAd.placement("center", "center");

Die Transaktionen sind ungleich
über die Welt verteilt (Bild 14)

W

e bin ar

e

W

Jetzt online
weiterbilden!
„Komplexes Wissen begreifbar
machen, Fähigkeiten und
Fertigkeiten für eine stetige
Zukunftsgestaltung vermitteln.“

Golo Roden
Technologischer
Visionär, Referent,
Autor

developer-media.de/webinare

84

Trotz des durch WebOS verursachten Spikes
im Bereich der Vereinigten Staaten von Amerika
ist klar, dass Firefox OS ein Betriebssystem der
Entwicklungsländer ist.
Daraus folgt, dass das Anbieten einer englischsprachigen Applikation vergleichsweise
sinnfrei ist: Wenn Ihr Programm nicht zumindest Spanisch und Portugiesisch spricht, so sind
Sie auf dem Holzweg. Das Anbieten einer polnischen und einer ungarischen Version ist unter
Umständen ebenfalls ratsam.

Monetisierung?
In der Anfangsphase des Stores unterstützte Firefox OS nur das kostenlose Verteilen von
Programmen. Mittlerweile gibt es – auf dem
Papier – die Möglichkeit, Programme zu verkaufen. Das funktioniert erwartungsgemäß
schlecht: Viele Mozilla-Nutzer sind fanatische
Open-Source-Heads und bezahlen aus Prinzip
nicht für Software.
Die restliche Kundschaft ist überwiegend in
Entwicklungsländern angesiedelt. Kurz gefasst:
der Verkauf von Programmen ist unter Firefox
OS ein sehr gewagtes Monetisierungs-Modell.
Selbiges gilt auch für In-App-Purchases in Spielen. Auch in diesem Bereich ist bisher kein besonders erfolgreicher Entwickler bekannt geworden.
Mozilla empfiehlt seinen Entwicklern, zur
Monetisierung auf den von Nokia bekannten
Werbedienstleister InnerActive zurückzugreifen. Die Wartung der Werbebibliothek wurde
an Mozilla delegiert, die Datei inneractive.js finden Sie in einem unter https://github.com/mo
zilla/inneractive erreichbaren Git-Repository.
Nach dem Einbinden des JavaScript-Codes
müssen Sie eine Werbefläche anfordern. Dies
lässt sich nicht in Code realisieren – stattdessen

Die Inneractive-Bibliothek nistet sich im globalen Namespace als ein Objekt mit dem Namen
Inneractive ein. Zur Erstellung einer neuen Anzeige müssen Sie die Funktion createAd aufrufen. Type legt die Art der anzufordernden Anzeige fest, Refresh Rate die Erneuerungsrate in Sekunden. Der an AppID übergebene Wert dient
zur Korrelierung der Anzeigen – er entstammt
Ihrem Konto bei InnerActive.
Das zurückgegebene Ad-Objekt muss danach
in das Dokument eingeschrieben werden. Dazu gibt es die Methode addTo, die die Anzeige
an ein beliebiges DOM-Element antackert. Die
Platzierung darf nicht direkt beeinflusst werden
– die placement()-Funktion erlaubt Ihnen, einen
Wunschort festzulegen.
Sollten Sie mit InnerActive aus irgendeinem
Grund unzufrieden sein, so bleibt auch die Möglichkeit der Verwendung von Smaato. Das deutsche Traditionshaus bedient Firefox OS über den
Code für mobile Webseiten. Loggen Sie sich auf
Smaato.com ein, beordern Sie eine Werbefläche und integrieren Sie den retournierten Code
direkt in Ihre Anwendung. Er funktioniert mit
nichtprivilegierten Programmen problemlos,
ist mit der weiter oben besprochenen CSP aber
nicht kompatibel.

Fazit
Seit der Vorstellung des neuen Mobilbetriebssystems auf dem Mobile World Congress hat
sich in Sachen Firefox OS einiges getan: FirefoxSmartphones sind in einigen Ländern im Handel erhältlich und verkaufen sich in passablem Umfang. Dank des vergleichsweise einfachen und auf Webstandards aufgebauten API ist
das Zusammenklicken kleinerer Applikationen
kein Hexenwerk: Mit etwas Erfahrung in Sachen
­HTML und CSS haben Sie Ihr erstes Programm
in wenigen Stunden am Start.
Aufgrund der vergleichsweise speziellen Verteilung und Demografie der Nutzer ist Firefox
OS trotzdem nicht für jedermann geeignet.
Wenn Sie Ihr Unternehmen langfristig positionieren möchten, so können Sie der Plattform eine Chance geben.
[mb]
2/2014

D

D

e v b ook

s

Praxiswissen
für Entwickler
Rückschau 2013 – Vorschau 2014

◾ 

A uf den Punkt!

Jedes eBook liefert
Praxiswissen in kompakter
Form zu genau einem Thema.
Geschrieben von den Experten
der Branche.
◾ 

A uf jedem Gerät!

Egal, ob iPad, Kindle oder PC –
Sie entscheiden, auf welchem
Endgerät Sie ihr eBook lesen
möchten.
◾ 

A us der Praxis!

Jedes eBook liefert Ihnen
neben fundierter Theorie sofort
anwendbares Praxiswissen
mit Code für Ihr Projekt

kostein!
fre

Zu beziehen über www.developer-media.de/devbooks

backend

VirtualBox

Virtualisierungs-Umgebungen
Autor

Johann Baumeister
hat Informatik studiert und besitzt langjährige Erfahrung in der
Entwicklung, Anwendung und
dem Rollout von IT-Systemen.
Inhalt
VirtualBox.
Ressourcen
VirtualBox von der Heft-DVD.

86

W

er an Oracle denkt, denkt an Datenbanken – und vielleicht auch an deren Anwendungen oder die Middleware Fusion, aber wohl
kaum an Virtualisierung. Dennoch bietet das
Unternehmen einige Produkte in diesem Segment an. Oracle möchte durch sein Virtualisierungs-Engagement an diesem lukrativen Segment der IT teilhaben.
Auf seiner Website finden sich alle derzeit angebotene Produkte von Oracle wieder. Dies sind
allen voran die Oracle Database, Java, die Middleware Fusion, die Anwendungssysteme und
weitere Softwaresysteme. Aber auch wer nach
Virtualisierung aus dem Hause Oracle sucht,
wird hier fündig.
Der korrespondierende Link auf der Webseite ist mit Virtualisierung umschrieben. Klickt
man auf den Link, so öffnet sich die Seite www.
oracle.com/us/technologies/virtualization/over
view, die schon etwas mehr zu dem Thema zu
bieten hat (Bild 1).
Oracle beziehungsweise Sun hat sein Angebot
in Sachen Virtualisierung in den letzten Jahren

beständig ausgebaut. Dieses Angebot gruppiert
der Datenbankprofi in die folgenden Bereiche:
■ Server-Virtualisierungs-Produkte,
■ Virtualisierungs-Lösungen für Rechenzentren,
■ Desktop-Virtualisierungs-Produkte,
■ Desktop-Virtualisierung-Lösungen.
Oracle VM ist ein System zur Virtualisierung
von Serversystemen. Oracle hat seine Virtualisierungs-Lösung Oracle VM seit Ende des Jahres 2007 im Programm. Der Anbieter positioniert VM für das Data Center und dessen Anforderungen.
Die Server-Virtualisierungs-Produkte von
Oracle unterstützen x86- und SPARC-Architekturen. Gästeseitig kommt Oracle VM mit unterschiedlichen Arbeitslasten wie Linux, Windows
und Oracle Solaris zurecht.
Neben den auf Hypervisoren basierenden
Systemen bietet Oracle jedoch auch Virtualisierungs-Lösungen an, die in Hardware und
in Oracle-Betriebssysteme integriert sind. Mit
Oracle VM positioniert sich der Hersteller mit
seinen Virtualisierungs-Systemen in der Liga
2/2014

Foto: Aleksandar Velasevic / iStockphoto

Oracle wird vor allem mit seiner Datenbank assoziiert. Daneben engagiert sich der Datenbankspezialist aber auch
in Sachen Virtualisierung. Ein Artikel zeigt, was Oracle hier zu bieten hat. Von Johann Baumeister

backend
von VMware und dessen ESX-Server, dem Microsoft Hyper-V oder Citrix XenServer. Oracle VM unterstützt Installationen mit 160 physischen CPUs und 4 TByte Arbeitsspeicher. Ferner
sind bis zu 128 virtuelle CPUs pro virtueller Maschine machbar.
Oracle VM basiert auf den Konzepten von
Xen und setzt auch auf diesem Open-SourceProdukt auf. Infolgedessen ist Oracle VM mit
dem Citrix XenServer vergleichbar, dessen Wurzeln ebenso in Xen liegen. Die Oracle-Virtualisierungs-Software unterstützt Anwendungen
von Oracle und anderen Anbietern gleichermaßen (Bild 2).
Dennoch wird Oracle mit dem begrenzten
Angebot kaum in Wettbewerb zu VMware oder
Microsoft treten wollen und können. Das ist derzeit aber auch nicht das Ziel des Datenbank­
anbieters. Für die Kunden von Oracle steht damit aber eine Oracle-eigene VirtualisierungsSoftware zur Verfügung. Sie müssen nicht auf
Produkte von VMware oder Microsoft zurückgreifen.
Die Software unterstützt die gesamten Vir­
tualisierungs-Umgebungen, ausgehend vom
Betriebssystem Linux über die Datenbanksysteme von Oracle und deren Middleware ­Fusion
bis hin zu den Anwendungen der Benutzer.
Oracle gibt für diesen gesamten Stack seiner Produkte auch Support und unterstützt die
Kunden beim Einsatz und der Konfiguration
seines Virtualisierungs-Systems. Um den Einsatz der Systeme auf Oracle VM sicherzustellen, setzt das Unternehmen auf die Zertifizierung der Produkte.
Oracle selbst hat einen Großteil seiner Produkte geprüft und für den Lauf auf Oracle VM
zertifiziert. Wer möchte, kann sich die Software
kostenfrei von der Oracle-Website herunterladen, denn Oracle stellt diese den Anwendern
kostenfrei zur Verfügung.

Templates zur beschleunigten
Inbetriebnahme
Um die Inbetriebnahme von Anwendungen zu
beschleunigen, setzt das Unternehmen auf die
Nutzung von Templates. Oracle positioniert seine Virtualisierungs-Lösung in erster Linie für
die eigenen Kunden. Daher liefert das Unternehmen auch über 90 vorbereitete Templates
für die eigenen Produkte. Auch sie werden auf
der Oracle-Website kostenfrei angeboten. Diese Templates vereinfachenden den Betrieb der
Oracle-Produkte in den virtuellen Umgebungen
von Oracle VM.
Zu den Templates gehören jene für Oracle Applications, Middleware und Datenbanken. Die
Templates umfassen die Konfiguration der virtuellen Systeme und vereinfachen das Setup. Sie
2/2014

beinhalten all die Konzepte für die Bereitstellung eines voll konfigurierten Softwarepakets.
Diese helfen durch vorinstallierte und vorkonfigurierte Images, die Unternehmenssoftware
schnell zu aktivieren.
Oracle VM umfasst ferner die Funktionalitäten für das Server-Clustering im Kontext der
Server-Virtualisierung. Der Hersteller spricht in
diesem Zusammenhang auch von einer Umsetzung der Techniken des Grid Computing.

Oracle engagiert sich auch
im Themenfeld der Virtualisierung
von Systemen (Bild 1)

Die Wurzeln liegen in Xen
Oracle VM basiert auf Xen. Xen umfasst aber
nur den Hypervisor. Die Verwaltung kann über
das Kommandozeileninterface in Xen erfolgen.
Daneben bietet Oracle auch eine komfortablere
Verwaltungsoberfläche. Oracle positioniert das
Virtualisierungs-System VM für das Data Center und dessen Anforderungen. Es umfasst eine
Policy-basierte Verwaltung. Diese richtet sich an
den Regeln der geschäftlichen Anforderungen,
den Policies, aus.
Eingeschlossen ist ferner eine Verwaltung des
Massenspeichers. Dieses wird durch die Inte­
gration mit dem Oracle VM Storage Connect
Plug-in API erreicht. Neu ist außerdem eine
zentrale Verwaltung der virtuellen Netzwerke.
Oracle VM orientiert sich an dem Open Virtualization Format (OVF).
Die Inbetriebnahme Oracle VM ist vergleichsweise einfach. Das System umfasst das Betriebssystemimage mit den wichtigsten Diensten. ▶

Oracle möchte mit seinem
Angebot vom Desktop bis zum
Datacenter den kompletten
IT-Stack virtualisieren (Bild 2)

87

backend

VirtualBox für Windows kommt auch
mit Linux-Gästen zurecht (Bild 3)

nersystem mehrere verschiedene Gastbetriebssysteme gleichzeitig laufen zu lassen. Dies ist
vergleichbar mit den Konzepten, wie sie in der
VMware Workstation oder dem VMware Server
geboten werden.
Der Funktionsumfang von VirtualBox ist im
Vergleich mit der VMware Workstation geringer. Infolgedessen konnte VirtualBox sich im
Unternehmensumfeld eher weniger durchsetzen. Dafür allerdings wird VirtualBox von Oracle kostenlos abgegeben und hat daher viele Nutzer im privaten Umfeld oder den kleineren Unternehmen oder Testumgebungen. VirtualBox
unterstützt eine Vielzahl an Host-Betriebssystemen. Dazu gehören Windows, Mac OS X, Oracle Solaris, Oracle Linux und andere wichtige Linux-Systeme.
Der Hypervisor wird von einer bootfähigen CD
in wenigen Minuten installiert. Zur Verwaltung
setzt Oracle VM auf eine kostenfreie Instanz seiner eigenen Datenbank.
Auf diese werden die Konfigurationsinformationen und das Repository des Systems gespeichert. Über eine HTML-basierte Umgebung erfolgt die Verwaltung des Systems. Die Installation der virtuellen Gäste erfolgt entweder über
ein fertiges Template oder ein ISO-Image auf
dem Server.

Desktop-Virtualisierung:
Oracle VirtualBox
Das zweite Virtualisierungs-Produkt von Oracle
ist die VirtualBox. Oracle führt dieses unter dem
Bereich der Desktop-Virtualisierung. VirtualBox
wurde ursprünglich von Sun Microsystems entwickelt. Durch die Übernahme von Sun durch
Oracle kam das Produkt in den Oracle-Bestand.
VirtualBox ermöglicht es, auf einem X86-Rech-

Neuerungen der Version 4.3 von VirtualBox
VirtualBox 4.3 ist seit Mitte Oktober 2013 verfügbar. Zu den Neuerungen gegenüber den bisherigen VirtualBox-Versionen gehören unter anderem die folgenden Aspekte.
■ Support für neue Plattformen: Oracle VM VirtualBox 4.3 unterstützt die Input-Geräte-Eigen-

schaften der neuesten Plattformen in einer virtuellen Umgebung, darunter Windows 8.1, Windows Server 2012 R2 und Mac OS X 10.9. Für Windows 8.1 kann ein 10-Punkt-MultitouchGerät simuliert werden. Die verbesserte 3D-Beschleunigung berücksichtigt die Transluzenz-Effekte in den letzten Linux-Distributionen von Ubuntu und Fedora. Ein erweiterter Multi-MonitorSupport erlaubt es Anwendern mit mehreren Screens, diese von innerhalb der virtuellen Umgebung zu nutzen. Ferner unterstützt VirtualBox 4.3 weitere virtuelle Endgeräte und Dienstprogramme, wie zum Beispiel Webcams und die Möglichkeit, ein Gespräch mitzuschneiden. Unterstützung für Multitouch-basierte Betriebssystem wie beispielsweise Windows 8.x.
■ Neue Geräte und Dienstprogramme: Eine virtuelle USB-Webcam erlaubt die Nutzung von Video-Conferencing-Anwendungen wie Skype oder Google Hangouts auf virtuellen Maschinen.
Die teilweise oder vollständige Aufnahme von Virtual-Machine-Sessions ist jetzt möglich. Die
Video-Aufnahmen werden in einem WebM-Format kreiert und sind somit von vielen verschiedenen Movie-Playern leicht abspielbar.

88

Anwenderfreundlichkeit
VirtualBox liegt nun in der Version 4.3 vor. Zu
dessen Verbesserungen zählen vor allem jene im
Bereich der Anwenderfreundlichkeit und Flexibilität. Virtuelle Maschinen können nun besser
kopiert werden. Dabei nutzt VirtualBox auch
speicherplatzsparendes Linking anstelle einer
vollständigen Kopie. Ferner gibt es diverse Verbesserungen, die VirtualBox nun auch im Kontext großer Umgebungen besser platzieren sollen. Der Speicher der Gäste lässt sich auf 1 ­TByte
RAM ausdehnen.
Ein Host soll mehr als 1000 VMs aufnehmen
können. Verbessert wurde auch die Fernwartung mit dem Remote-Zugang. VM Scripting
erlaubt Scripting und Automatismen beim Kopieren von Files, bei Konfigurationsaufgaben
und bei vielem mehr. Zu den Neuerungen gehören ferner ein größerer Durchsatz, eine verbesserte Bedienbarkeit und die Unterstützung
für neue virtuelle Hardware wie Chipsätze und
PCI Express.
VirtualBox ist darüber hinaus in der Lage, das
VMDK-Format von VMware zu nutzen. VirtualBox unterstützt als Host-System neben Windows und Linux auch das Sun-System Solaris
und Apple MacOS. Die Software kann kostenfrei von Oracle-Website bezogen werden. Das
geladene Softwaremodul ist dann mit Hilfe der
jeweiligen Betriebssystem-Tools auf dem Hostsystem einzuspielen (Bild 3).
Die Oracle-Software ist mit diversen Hilfen
und Assistenten ausgestattet, die die Arbeit mit
dem System vereinfachen. Um beispielsweise
eine virtuelle Maschine zu erzeugen, aktivieren Sie den zugehörigen Schaltknopf Neu in der
Icon-Leiste des VirtualBox Managers. Der sich
nun öffnende Assistent fragt alle wichtigen Konfigurationsparameter in einer Dialogfolge ab.
Zu diesen Einstellungen gehören unter anderem die Größe des Arbeitsspeichers, die virtu2/2014

backend
elle Festplatte und die Netzwerkeinstellungen.
Bei der Konfiguration der virtuellen Festplatte können Sie außerdem bestimmen, ob diese
eine feste Größe auf ihrem System einnehmen
soll oder ob sie dynamisch anwachsen soll. Ferner müssen Sie noch den Speicherort für die dynamische Festplatte auf dem Host angeben. Damit ist die Konfiguration der virtuellen Maschine abgeschlossen.
Zu den weiteren Konfigurationseinstellungen gehören jene zur Bestimmung der Größe
des Hauptspeichers, der CPUs, der IO-Adressierung und der Start-Reihenfolge. VirtualBox
unterstützt, je nach der Hardware des Hosts, bis
zu acht CPUs.

Die Gäste in VirtualBox

beispielsweise virtuelle Festplatten, CDs, DVDs
und Ähnliches.
Und schließlich können Sie auch Images im
Open Virtualization Format (OVF) mit Ihrer
virtuellen Maschine verknüpfen. Im Gast-Fen­
ster werden die Ausgaben Ihres virtuellen Gastes eingeblendet. Die Anzeige des Gastsystems
kann dabei in unterschiedlichen Formaten erfolgen. Dazu gehören beispielsweise der Vollbildmodus, eine verkleinerte Anzeige und die automatische Anpassung der Anzeige an die Umgebung. Bei der Seamless (nahtlosen) Integration
wird der Gast so in das Fenster des Hosts eingepasst, dass die Ausgaben der Gäste in einem
Fenster des Hosts erfolgen.

Unter www.virtualbox.org finden
Sie viele Informationen zum
Betrieb der VirtualBox (Bild 4)

Auch die weitere Verwaltung einer virtuellen
Maschine unter VirtualBox ist vergleichsweise
einfach. Dies beruht aber auch darauf, dass das
gesamte Interface und die Konfigurationsmöglichkeiten überschaubar sind. Nach dem Anlegen der virtuellen Maschine durch den Virtual­
Box-Manager können Sie den virtuellen Gast
unmittelbar starten.
Beim erstmaligen Aufruf einer neu erzeugten
virtuellen Maschine öffnet das System einen AsOracles VDI-Implementierung
sistenten. Dieser hilft beim Setup der virtuellen
Neben VirtualBox hat Oracle ein weiteres ProMaschine und beim Einrichten des Betriebssysdukt zur Desktop-Virtualisierung im Angebot.
tems in der virtuellen Hülle.
Dieses orientiert sich an den Konzepten der
Als Installationsmedium kommen CD- und
Virtual Desktop Infrastructure. Oracle Virtual
DVD-Laufwerke oder aber ISO-Images in Frage.
Desktop Infrastructure ist eine Lösung für virtuNach dem Setup des Betriebssystems müssen
elle Desktops. Es umfasst alle Hilfen und Tools,
sie noch die VirtualBox-Gasterweiterungen inum virtuelle Benutzerarbeitsplätze zu erstellen
stallieren. Diese sind vergleichbar mit den VMund zu verwalten. Oracle Virtual Desktop Infra­
ware-Tools. Sie optimieren den Betrieb der VM
structure unterstützt unterschiedliche virtuelle
im Kontext von VirtualBox.
Desktops.
Diese Add-ons sorgen für eine bessere LeisDazu gehören Systeme mit Microsoft Wintung der virtuellen Maschinen und eine einfadows 7, Windows Vista, Windows XP und neuchere Bedienung. Dazu gehört beispielsweise
ere Windows-Systeme, ferner Oracle Linux,
die automatische Anpassung der BildschirmOracle Solaris, Suse Linux Enterprise Desktop
auflösung des Gast-Systems an die Fenstergröund Ubuntu Linux. Die Benutzerarbeitsplätze
ße oder die nahtlose Übergabe des Mauszeigers
werden von Oracle als Client Tier bezeich- ▶
in den Fenstern.
Verfügbar sind diese Gast­
erweiterungen für alle gängigen
Betriebssysteme von Windows,
aber auch für Linux und Solaris.
Neben dem Verwaltungsinterface
des VirtualBox-Managers steht
Ihnen die jeweilige Konsolenansicht zur Verfügung.
Zu den weiteren Einstellungen
gehören unter anderem jene für
virtuelle Netzwerke und diverse
Pfadangaben. Ferner haben Sie
die Möglichkeit, die weiteren Medien mit der virtuellen Maschi- Die Installation von VirtualBox 4.3 wird durch einen
Der gesamte Setup-Prozess für VirtualBox ist schnell
durchlaufen (Bild 6)
ne zu verknüpfen. Dazu zählen Assistenten einfach gemacht (Bild 5)
2/2014

89

backend
lichen Betriebssystemen wie Windows oder Linux bestückt.
VirtualBox selbst unterstützt unterschiedliche
Hostsysteme wie beispielsweise Windows, Linux und Solaris. Die Installation von VirtualBox
ist schnell vorgenommen (Bild 5).

Konfigurationsdialoge

VirtualBox unterstützt auch
eine breite Palette an LinuxDistributionen (Bild 7)

net. Dabei kann es sich um Sun-Ray-Clients,
Windows-PCs und Macs handeln.
Als Hostplattform für die Sun-Ray-Clients
setzt Oracle auf das eigene Linux. Daneben eröffnet Oracle den Anwendern aber auch weitere Lösungsszenarien. In Verbindung mit dem eigenen VDI-Angebot erlaubt Sun auch die Kombination von VirtualBox und Microsoft Hyper-V
oder VMware vSphere.

VirtualBox in der Praxis

Die neu erzeugte virtuelle
Maschine mit ihren Konfigurationsparametern (Bild 8)

In den folgenden Erläuterungen gehen wir im
Sinne eines Workshops auf die Details im Umgang mit der Oracle VirtualBox ein. VirtualBox
kann von der Oracle-Website oder unter Virtual­
Box.org bezogen werden. Darüber hinaus hält
die Website www.virtualbox.org auch viele weitere Informationen und Hilfen zum Einsatz des
Virtualisierungs-Tools bereit (Bild 4).
Für unsere Arbeiten mit VirtualBox und als
Grundlage für diesen Text haben wir die aktuelle Version VirtualBox 4.3 auf einem System unter Windows 7 eingerichtet und im Anschluss
mehrere virtuelle Maschinen (VMs) erzeugt.
Diese wiederum wurde dann mit unterschied-

Im Zuge der Setup-Prozedur erscheinen einige
Konfigurationsdialoge. Die wichtigsten wollen
wir kurz erläutern. Im ersten Konfigurationsdia­
log werden Sie nach dem Umfang Ihrer VirtualBox-Installation gefragt. Hier können Sie etwa festlegen, ob Sie den USB-Support oder das
VirtualBox Networking mit einrichten wollen.
Wie haben uns im Zuge unseres Berichts für die
Komplettinstallation der Software entschieden.
Wenn Sie die Networking-Funktion aktiviert
haben – was eine empfehlenswerte Option darstellt –, so gibt das Setup-Programm eine Warnung aus, dass die Netzwerkanbindung kurzfristig unterbrochen wird. Dies erfolgt deswegen, da VirtualBox Ihre Netzwerkanbindung
durch virtuelle Netzwerktreiber ersetzt. Der gesamte Setup-Vorgang ist in weniger als einer
Viertelstunde durchlaufen (Bild 6).
Anschließend können Sie damit beginnen,
virtuelle Maschinen in VirtualBox anzulegen.
Falls auf dem Rechner bereits eine frühere Version von VirtualBox eingerichtet war, so übernimmt der Setup-Prozess diese in die aktuelle
Installation.

Erzeugen einer virtuellen Maschine
unter Windows
Um eine neue virtuelle Maschine in VirtualBox
anzulegen, selektieren Sie das Icon Neu in der
Icon-Leiste des VirtualBox Managers. Ein Assistent startet, der alle benötigten Parameter in einer Dialogfolge abfragt. Dies sind zunächst der
Name der virtuellen Maschine und das Betriebs-

Das Einrichten des Betriebssystems in der virtuellen Maschine wird
durch einen Assistenten unterstützt (Bild 9)

90

2/2014

backend
system. VirtualBox unterstützt eine breite Palette an Gast-Betriebssystemen: Dies sind alle Windows-Varianten von Windows 3.1 bis hin zu den
neueren Windows-Server-Generatio­
nen und
außerdem diverse Linux-Distributionen (Bild 7).
Anschließend müssen Sie der neu zu erzeugen virtuellen Maschine noch den Arbeitsspeicher zuweisen. Dabei können Sie sich an den
Vorgaben der Betriebssystemhersteller orientieren. Im Gegensatz zu physischem Arbeitsspeicher können Sie den virtuell zugewiesenen Speicher aber leichter anpassen.
Im nächsten Schritt wird die virtuelle Festplatte parametrisiert. Hierbei gilt das analoge
Vorgehen wie beim Einrichten des Arbeitsspeichers: Um die Plattenkapazität zu erhöhen, genügt es, den Wert in dieser Konfigurationsmaske anzupassen. Ferner können Sie bestimmen,
ob die virtuelle Platte eine feste Größe auf dem
Host-System einnehmen soll, oder ob sie dynamisch bis zu ihrer maximalen Kapazität vergrößert werden soll.
Ferner müssen sie den Speicherort für die virtuelle Festplatte angeben. Damit ist die Konfiguration der virtuellen Maschine auch schon abgeschlossen (Bild 8).

Einrichten des Betriebssystems in der
virtuellen Maschine
Nach der Erzeugung der virtuellen Maschine,
wie oben beschrieben, haben Sie einen neuen
virtuellen Rechner. Dieser erhält die Ressourcen, die ihm bei der Konfiguration mitgegeben
wurden. Der virtuelle Rechner aber ist bis dato
ohne Software – und somit ohne jegliche Funktion. Der neu eingerichtete virtuelle Rechner
muss anschließend, wie ein physischer Rechner
auch, mit einem Betriebssystem und Anwendungen bestückt werden.
Dies erfolgt im nächsten Schritt. Hierzu gibt
es prinzipiell verschiedene Möglichkeiten. Eine

neu eingerichtete virtuelle Festplatte
muss ebenso wie eine physische Festplatte zuerst mit einem Betriebssystem versehen werden.

Festplatten-Image verwenden
Alternativ besteht aber auch die Möglichkeit ein bestehendes PlattenImage in eine virtuelle Festplatte zu übernehmen. Dann entfällt der manuelle Installationsvorgang natürlich. Für diesen weiteren Test gehen wir davon aus, die Platte neu einzurichten. Hierzu aktivieren Sie das Start-Icon in der
Menüzeile des VirtualBox Managers. Anschließend wird ein Assistent gestartet, der das Setup
der virtuellen Maschine durch den Administrator wesentlich erleichtert (Bild 9).
Er will unter anderem wissen, von welchem
Installationsmedium das Betriebssystem für die
virtuelle Maschine eingerichtet werden soll. An
diese Stelle haben Sie entweder die vorhandenen CD- und DVD-Laufwerke oder aber ISOImages zur Auswahl.
Nach der Auswahl des Installationsmediums
erfolgt die Installation des Betriebssystems. Diese unterscheidet sich in keiner Weise von der Installation auf physischen Rechnern.

Die Verwaltung der virtuellen
Maschine im VirtualBox
Manager (Bild 10)

Verwaltung der virtuellen Maschinen

Die Verwaltung der virtuellen Maschine in VirtualBox erfolgt durch den VirtualBox Manager.
Diese ist die Verwaltungskonsole, die nach dem
Setup von VirtualBox automatisch mit eingerichtet wird.
Der VirtualBox Manager hat neben den Hilfe-Hinweisen nur zwei Menüs. Unter Datei finden Sie die Optionen zum Verwalten von virtuellen Festplatten, CDs, DVDs und Diskettenabbildern mit VMs oder zum Verknüpfen mit virtuellen Maschinen (Bild 10).
Ferner können Sie an dieser Stelle auch Appliances im
Open Virtualization Format
(OVF) verwalten. Das OVFFormat wurde von VM­
ware
entwickelt, um einen Standard für virtuelle Maschinen
zu schaffen.
Eine OVF-Datei besteht
aus der virtuellen Maschinen
und der Beschreibung. Einen
Schritt weiter gehen die OVAFiles. Die Dateierweiterung
OVA steht für Open Virtualization Appliance. OVAs umfassen eine fertig konfigurierte virtuelle Maschine, die diWenn notwendig, lassen sich die Konfigurationseinstellungen jederzeit
wieder ändern (Bild 11)
rekt in Betrieb gehen kann. ▶

2/2014

91

backend

Die hardwarenahen Einstellungen der virtuellen Maschine
werden unter System
zusammengefasst (Bild 12)

Der von Windows bekannte Setup-Prozess über
WMI oder ähnliche Verfahren entfällt dabei
ganz. OVA-Files stellen eine Weiterentwicklung
des OVF-Dateiformats dar.
Das OVA-Format ist umfassender, als die
OVF-Files es sind. Bei OVA erhalten Sie bereits
eine fertige virtuelle Maschine als Appliance. Da
es sich dabei aber immer noch um eine virtuelle
Maschine handelt, wird diese Appliance als virtuelle Appliance bezeichnet. Der Begriff Appliance soll dabei lediglich ausdrücken, dass diese
virtuelle Maschine sofort in Betrieb gehen kann,
wie eine physische Appliance eben.
Im Menü Datei finden Sie unter Globale Einstellungen eine Reihe an Konfigurationsoptionen
für virtuelle Netzwerke, Pfadangaben zu virtuellen Maschinen oder etwa der Festlegung der
Host-Taste. Sie steuert den Mauszeiger für die
virtuelle Maschine beziehungsweise das Hostsystem. Durch den Assistenten wurde die vir-

Rechenzentrums-Virtualisierung
Das Konzept der Server-Virtualisierung kann auf das gesamte Rechenzentrum ausgedehnt
werden. Dann spricht man mitunter von der Rechenzentrums-Virtualisierung.
Bei den Cloud-Modellen unterscheidet man nach mehreren Varianten: Beim Modell der private Cloud werden die Ressourcen des eigenen Rechenzentrums genutzt. Sie stehen in der Regel
nur für das eigene Unternehmen zur Verfügung.
Bei der Public Cloud werden die Ressourcen im Internet angeboten beziehungsweise von
dort genommen. Die hybride Cloud stellt eine Mischform aus der privaten und der Public Cloud
dar. Alle Cloud-Varianten beruhen aber auf den Techniken der Server-Virtualisierung. Dennoch
ist die Cloud mehr als nur eine virtualisierte Serverfarm. Bei den Cloud-Techniken werden die
Techniken der Server-Virtualisierung genutzt und fortgeschrieben. In der Cloud werden die ITRessourcen in Pools gebündelt. Daneben stehen die Applikationsdienste. Wird ein Dienst (eine Anwendung) benötigt, so erhält dieser seine Ressourcen aus dem Pool zugewiesen. Diese
Bereitstellung der Applikationen und der zum Lauf benötigten Ressourcen erfolgt dynamisch.
Um den Prozess der Aktivierung und Deaktivierung von Anwendungen schnell ausführen zu
können, werden Skripts und Automatisierungs-Tools eingesetzt. Nicht mehr benötigte Anwendungen lassen sich auf diese Art und Weise auch wieder deaktivieren.

92

tuelle Maschine mit den gewählten Parametern
eingerichtet. Der Großteil diese Konfigurationseinstellungen kann später aber jederzeit verändert werden. Hierzu klicken Sie auf das Symbol
Ändern. Anschließend öffnet sich ein Fenster mit
mehreren Bereichen (Bild 11).
Wenn Sie eine der Optionen selektieren, blendet der Verwaltungsmanager von VirtualBox
rechts die dazugehörigen Einstellungen ein.
Diese können Sie nun ändern. Dabei gilt es zu
beachten, dass manche der Einstellungen nur
dann geändert werden könne, wenn die virtuelle Maschine nicht aktiv ist.
Unter dem Bereich System finden sich die
hardwarenahen Einstellungen. Diese bestimmen die virtuelle Hardware Ihres Rechners.
Hier finden Sie unterteilt in mehrere Reiter die
Konfigurationseinstellungen für die virtuelle Hauptplatine, den virtuellen Prozessor sowie Angaben zur Leistungssteuerung (unter Beschleunigung) (Bild 12).
An diese Stelle haben Sie auch die Möglichkeit, die Größe des Hauptspeichers und die
Boot-Reihenfolge zu ändern. Ferner können Sie
spezielle Hardware-Optionen aktivieren. Unter
dem Reiter Prozessor legen Sie die Anzahl der
virtuellen CPUs fest, die sie der virtuellen Maschinen zuordnen wollen.

Die Grafikspeicher und Bildschirme
Unter dem Menü Anzeige finden sie die Einstellparameter für den Grafikspeicher. Hier können
Sie Speicherbereiche festlegen sowie die Anzahl
der Bildschirme bestimmen. Ferner lassen sich
an dieser Stelle die 3D- beziehungsweise die 2DVideo-Beschleunigung einstellen.
Und schließlich finden sich an dieser Stelle
die Konfigurationseinstellungen für den Fernzugriff. Dabei können Sie beispielsweise den
Serverport und die Authentifizierungsmethode wählen. Standardmäßig nutzt VirtualBox für
den Zugriff den Port 3389. Wenn notwendig,
können Sie an dieser Stelle den Port anpassen.
Diese gilt beispielsweise immer dann, wenn auf
dem System Remote-Desktop verwendet wird,
denn dann ist dieser Port schon belegt.
Neben dieser Verwaltungskonsole des VirtualBox Managers befindet sich das Konsolenfenster der virtuellen Maschine. In dieses Fenster
werden alle Ausgaben der virtuellen Maschine eingeblendet. Auch in diesem Fensterbereich
können Sie einige Anpassungen vornehmen. So
lassen sich beispielsweise verschiedene Ansichten wie etwa der Vollbildmodus oder ein skalierter Modus auswählen.
Beim Seamless Mode wird der Desktop der
virtuellen Maschine nahtlos in den des Hosts
eingefügt. Die Gast-Anwendungen laufen dann
in einem Fenster des Hosts.
[mb]
2/2014

web & mobile

DEVELOPER

n
e
r
T

präsentiert:

ds

u
s
ö
L

n
e
g
n

ow
n
K

-Ho

w

Mobile Developer
MDC Conference 2014
14.-17. Juli 2014
Themenauswahl:

NCC Ost, Nürnberg

– Plattformen
(iOS, Android, Windows Phone)
– Enterprise Solutions (Verteilte
Anwendungen, Big Data, Cloud)

– Application Lifecycle
Management

– Architektur: Agiler Entwurf,
Pattern
– Sprachen: Objective-C, Java, C#,
JavaScript

– Richtiges Recruiting:
passende Mitarbeiter
finden, Einstellungstests,
Einstellungsgespräche

– Tools und Frameworks:
Eclipse, PhoneGap, Xamarin

– Zusammenarbeit im
Team: Vor Ort und remote

Mit Very
Early Bird
€ 200,–
sparen!

Unsere Experten (Auswahl):

Benno Bartels,
Gründer,
insertEFFECT

Markus Eilers,
Geschäftsführer,
Runtime Software
GmbH

Stefan Hoth,
freiberuflicher
Softwareentwickler für
Java, PHP, Web und
Android

Michael Johann,
Gründer,
rails-experts.com

mobile-developer-conference.de

Markus Junginger,
Geschäftsführer,
greenrobot

Henrike Röse,
Event & Marketing
Manager, Microsoft
Deutschland GmbH

MDConference

backend
Flickr API nutzen

Leistungsfähiges API
Aus Sicht eines Entwicklers wird Flickr gerade durch sein leistungsfähiges API spannend, mit dem man
auf alle Funktionalitäten des Bilderdienstes zugreifen kann. Von Carsten Möhrke

Autor

Carsten Möhrke
ist Autor, Trainer und Berater mit
den Schwerpunkten Webent­
wicklung und Webtechnologien.
Inhalt
Einführung in die Nutzung des
Flickr API.
Ressourcen
Die Listings zum Artikel finden
Sie auf www.webundmobile.de
in der Rubrik Aktuelles Heft.

Registrieren einer neuen
Anwendung (Bild 2)

94

F

lickr gehört in der heutigen, schnelllebigen
Zeit fast schon zu den Internet-Urgesteinen.
Der Dienst, der vor knapp zehn Jahren online
ging, ist sicher nicht ganz so cool wie Instagram,
Hipstamatic oder andere. Aber es wäre sicher
auch unfair, diese Dienste miteinander zu vergleichen.
Flickr verfolgt das Ziel, seinen Usern die Möglichkeit zu geben, ihre Bilder zu organisieren
und die Bilder anderen zugänglich zu machen.
Und das macht Flickr auch ganz gut. Neben der
Tatsache, dass User kostenlos 1 Terabyte Speicherplatz zur Verfügung gestellt bekommt, unterstützen auch viele Programme, wie beispielsweise Lightroom oder Aperture, den direkten
Upload von Daten zu Flickr.
Für den Upload nutzen diese Anwendungen
das API, das Flickr zur Verfügung stellt. Dieses
API können Sie auch in Ihren eigenen Anwendungen nutzen, um Ihre Bilder beispielsweise
auf Ihrer Homepage oder in Ihrem Blog einzubinden (Bild 1).

Das API
Im Gegensatz zu vielen anderen APIs ist das
von Flickr gut dokumentiert und läuft absolut
stabil. Eine komplette Dokumentation des API
finden Sie unter dem URL www.flickr.com/ser
vices/api. Dort finden Sie auch eine Liste von fertigen Bibliotheken in verschiedenen Programmiersprachen, die Sie mit dem API einsetzen
können. Sollten Sie eine dieser Bibliotheken einsetzen wollen, dann beachten Sie bitte, dass es
sich um keine offiziellen Bibliotheken von Flickr handelt.
Daher kann es gut sein, dass
die ein oder andere veraltet
ist oder nicht rund funktioniert.
Um auf das API von Flickr
zugreifen zu können, muss
Ihre Applikation natürlich berechtigt sein, das zu tun. Die
Authentifikation einer Applikation erfolgt über ­
OAuth,
ein standardisiertes, offenes
Protokoll, das in vielen Anwendungen zu Anwendung
kommt. Flickr hat früher ein

Die Flickr-Homepage (Bild 1)
eigenes Authentifizierungsverfahren unterstützt, das inzwischen aber nicht mehr genutzt
werden soll.
In groben Zügen beschrieben funktioniert
OAuth folgendermaßen. Die Applikation, die
Zugriff auf das API haben möchte, kontaktiert
den Flickr-Server und initiiert den Prozess zum
Austausch eines Tokens. Danach wird der User
von der Anwendung auf ein Formular des Servers geleitet, auf dem er sich mit seinen Zugangsdaten einloggt. Ist das Login korrekt,
übergibt der Server ein Token an die Anwendung, mit dem sie sich danach authentifizieren kann. Diese Vorgehensweise hat den Vorteil, dass der User seine Anmeldeinformationen
nicht bei der Anwendung selbst eingeben und
somit offenlegen muss.

Consumer Key und Consumer Secret
Damit Ihre Anwendung sich gegenüber Flickr
authentifizieren kann, benötigen Sie zunächst
einen Key, damit Flickr beim ersten Aufruf erkennen kann, dass die Applikation auch berechtigt ist. Diesen erhalten Sie unter www.flickr.
com/services/apps/create/apply. Danach erhalten Sie ein Schlüsselpaar, bestehend aus dem
Consumer Key (der obere String) und dem Consumer Secret (der untere String) (Bild 2).
Nachdem Sie die Anwendung angelegt haben, können Sie sie jederzeit über die Menüpunkte Entdecken, App Garden und Anwendungen von Ihnen aufrufen. Dort können Sie die beiden Keys auch jederzeit nachschlagen. Bitte klicken Sie nicht den Menüpunkt Authentifizie2/2014

backend
rungs-Flow an. Er dient dazu, das alte Authentifizierungsverfahren zu konfigurieren. Haben
Sie dort eine Einstellung vorgenommen, dann
kommt es schnell zu Problemen mit der OAuthAuthentifizierung und zu unerklärlichen Phänomenen. Dann hilft es meist, die Anwendung
bei Flickr zu löschen und neu anzulegen.
Nun stellt sich die Frage, wie Sie die OAuthAuthentifizierung in Ihrer Anwendung implementieren. Die erste Möglichkeit wäre es, den
Zugriff manuell zu implementieren, was aber
sehr aufwendig wäre. Die zweite Variante wäre es, die PHP-Funktionen zu nutzen, die dafür
vorgesehen sind.
Leider sind diese aber nicht im PHP-Kern enthalten, sondern ein Bestandteil von PECL. Somit stehen sie nicht unbedingt überall zur Verfügung. Daher empfiehlt es sich, auf eine fertige Bibliothek zurückzugreifen. Für die Nutzung
mit PHP gibt es eine ganze Menge verschiedener Bibliotheken.

Listing 1: Initialisieren der Anwendung
include_once "oauth-php/library/OAuthStore.php";
include_once "oauth-php/library/OAuthRequester.php";
$db = array('server' => '127.0.0.1',
'username' => 'root',
'password' => geheim,
'database' => 'oauth');
$store

= OAuthStore::instance('MySQL', $db);

$user_id = 1;

$server = array(
'consumer_key' =>
'a518be4d682bc9bb1a695d80dd07959e',
'consumer_secret' => 'c51b3afc6be0a03a',
'server_uri' => 'http://api.flickr.com/services/rest',
'signature_methods' => array('HMAC-SHA1'),
'request_token_uri' =>
'http://www.flickr.com/services/oauth/request_token',
'authorize_uri' =>
'http://www.flickr.com/services/oauth/authorize',
'access_token_uri' =>
'http://www.flickr.com/services/oauth/access_token'

OAuth per Bibliothek
Hier werde ich auf die Bibliothek zurückgreifen, die unter https://code.google.com/p/oauthphp heruntergeladen werden kann. Die Bibliothek ist recht leistungsfähig und nimmt einem
einiges an Arbeit ab. Insbesondere die TokenVerwaltung wird automatisiert. Das heißt, das
Token, das die Anwendung von Flickr zurückbekommt, wird automatisch von der Bibliothek
verwaltet. Selbiges wird standardmäßig in einer
Datenbank abgelegt. Die SQL-Skripts zum Anlegen der benötigten Tabellen finden Sie nach dem
Entpacken in store/mysql.
Führen Sie das Skript aus, damit die benötigten Tabellen angelegt werden. Danach muss der
Client nur noch konfiguriert werden. In einem
ersten Schritt muss der User, für den der Schlüssel bestimmt ist, in der Datenbank angelegt werden. In diesem Beispiel arbeite ich aber nur mit
einem User. Daher codiere ich die User-ID fest
im Code (Listing 1).
Mit diesen Zeilen werden alle relevanten Informationen für den Zugriff in der Datenbank
abgelegt. Die URLs, die ich hier genutzt habe,
gelten genauso für Ihre Anwendung. Die Werte für consumer_key und consumer_secret müssten Sie natürlich durch Ihre Schlüssel ersetzen.
Nachdem Sie das Skript aus Listing 1 ein erstes
Mal ausgeführt haben, ist das System vorbereitet und Sie können die eigentliche Authentifizierung implementieren.
Diese besteht aus zwei Skripts. Das erste baut
eine Verbindung zu Flickr auf und holt das Request-Token. Das zweite Skript dient dazu, im
zweiten Schritt das temporäre Request-Token
durch das endgültige Access-Token zu ersetzen
(Listing 2).
2/2014

);
$consumer_key = $store->updateServer($server, $user_id);

Dabei ist zu beachten, dass der Parameter
o­ auth_callback einen URL Ihrer Anwendung
enthalten muss. Dieser URL wird im nächsten Schritt durch Flickr angesprochen. Bei dem
Server flickr.local.net handelt es sich um einen
lokalen, virtuellen Server, den ich für diesen
Artikel eingerichtet habe. Mit dem Parameter
perms können Sie festlegen, welche Rechte Ihre Anwendung anfordern soll. Mögliche Werte sind hier read, ­write oder delete, wobei das
Schreibrecht das Leserecht beinhaltet und das
Löschrecht die beiden anderen inkludiert.

Listing 2: Erster Teil der Autorisierung
$user_id = 1;
$consumer_key = 'a518be4d652bc9bbae694d80dd07959e';
$params = array('oauth_callback' =>
'http://flickr.local.net/store_key.php',
'perms' => 'write');
try {
$token = OAuthRequester::requestRequestToken(
$consumer_key, $user_id, $params, 'GET');
if (strpos($token['authorize_uri'], '?')) {
$uri = $token['authorize_uri'] . '&';
} else {
$uri = $token['authorize_uri'] . '?';
}
$uri .= 'oauth_token='.$token['token'];
}
catch (OAuthException2 $e) {
var_dump($e);
}
header('Location: '.$uri);

95

backend
Listing 3: Zweiter Teil
$user_id = 1;
$consumer_key = 'a518be4d652bc8b
b1a695d80dd07959e';
$oauth_token =
$_GET['oauth_token'];
$oauth_verifier =
$_GET['oauth_verifier'];
try
{
OAuthRequester::requestAccessToken(
$consumer_key,
$oauth_token, $user_id, 'GET',
array('oauth_verifier' =>
$oauth_verifier));
} catch (OAuthException2 $e){
var_dump($e);
}

Autorisieren der Anwendung
durch den User (Bild 3)

Nachdem der User das Skript im Browser aufgerufen hat, landet er bei Flickr (Bild 3). Er muss
sich einloggen und Flickr fragt ihn, ob er der Anwendung den Zugriff auf seinen Account gewähren möchte. Bestätigt er die Rechte, dann
schickt Flickr den User weiter zu dem URL, der
im Listing mit dem Parameter oauth_callback definiert wurde. Bei diesem Aufruf wird das endgültige Access-Token übergeben, das für spätere API-Aufrufe benötigt wird. Den Code dafür
zeigt Listing 3.
Damit ist die Anwendung authorisiert und
Sie können alle API-Funktionen – solange sie
nicht mit den gewährten Rechten kollidieren –
nutzen.
Wenn Sie testen möchten, ob alles funktioniert
hat, dann führen Sie Listing 4 aus.
Mit Hilfe von $request_uri wird der URL spezifiziert, der bei Flickr angesprochen werden soll.
Der Key method im Array $params legt fest, welche Funktion des API aufgerufen werden soll.
flickr.test.login liefert den Usernamen und die
User-ID zurück und benötigt nur Leserechte,
sodass diese Zeilen eine Ausgabe wie diese generieren sollten:

<rsp stat="ok">

<?xml version="1.0"

{"user": {"id":"110371703@N04",

encoding="utf-8" ?>

"username": {"_content":"barphly42"} },

<user id="110371703@N04">
<username>barphly42</username>
</user>
</rsp>

Wie Sie sehen, handelt es sich bei der Antwort
um XML. XML ist sicher nicht schlecht, aber andere Formate sind meist praktischer. Das ist allerdings kein Problem, da das API verschiedene
Antwortformate unterstützt. Neben der Standard-XML-Antwort, die Sie oben sehen, können Sie auch andere XML-Formate wie SOAP
nutzen.
Alternativ können Sie aber auch JSON oder
serialisiertes PHP anfordern. In den meisten Fällen wird JSON sicher die beste und flexibel­
ste Variante sein. Damit die Antwort im JSONFormat erfolgt, geben Sie als zusätzlichen Eintrag beim $params-Array 'format' => 'json' und
'nojsoncallback' =>1 an.
Der zweite Parameter stellt sicher, dass Sie reinen JSON-Code erhalten, der nicht noch in einen
Funktionsaufruf gewrappt ist. Für die Funk­tion
test.login sieht der Rückgabewert nun so aus:

"stat":"ok"}

Listing 4: Ein erster Test
$user_id = 1;
$request_uri = 'http://api.flickr.com/services/rest';
$params = array(
'method' => 'flickr.test.login'
);
$req = new OAuthRequester($request_uri, 'GET', $params);
$result = $req->doRequest($user_id);
echo "<pre>".htmlspecialchars($result['body'])."</pre>";

96

Bei der Verarbeitung ist zu beachten, dass Elemente, die in XML als reine Textknoten dargestellt worden wären, hier als Eigenschaft _content abgelegt werden.

Bilder auslesen
Wie Sie in der Dokumentation des API auf www.
flickr.com/services/api sehen können, sind die
Funktionalitäten alle ordentlich gruppiert. Die
2/2014

backend
Listing 5: Auslesen von Bildern
$user_id = 1;
$request_uri = 'http://api.flickr.com/services/rest';
$params = array(
'method' => 'flickr.photos.search',
'format' => 'json',
'nojsoncallback' => 1,
'user_id' => '110371703@N04'
);
$req = new OAuthRequester($request_uri,
'GET', $params);
$result = $req->doRequest($user_id);
$data = json_decode($result['body']);
$photos = $data->photos;

Sortierung orientiert sich an den Funktionalitäten, die Flickr anbietet. Alles, was mit Galerien
zu tun hat, finden Sie unter dem Punkt galleries,
alle Funktionalitäten zu den Statistiken sind unter stats aufgelistet et cetera.
Um Bilder auszulesen, die in einem Account
vorhanden sind, haben Sie verschiedene Möglichkeiten. Sie könnten die Bilder nach Alben
oder Galerien auslesen, Sie können explizit nach
Bildern mit bestimmten Eigenschaften suchen,
oder Sie können sich alle Bilder zurückgeben
lassen, die zu keiner Galerie gehören.
Die leistungsfähigste Möglichkeit, Bilder zu
ermitteln, ist dabei die Suche mit Hilfe von flickr.
photos.search. Dieser API-Aufruf bietet eine Vielzahl von Möglichkeiten, nach welchen Kriterien
Sie nach Bildern suchen können. Im einfachsten Fall wollen Sie alle Bilder auslesen, die Ihrem Account zugeordnet sind. In diesem Fall
müssten Sie die User-ID, die Sie beispielsweise
mit flickr.test.login ermitteln können, als einziges
Suchkriterium angeben.
Das Beispiel in Listing 5 liest alle Bilder aus,
die zu dem User gehören, und gibt sie aus. Der
URL, der zu dem Bild gehört, ist nicht direkt in
den Daten enthalten, sondern muss konstruiert
werden (Bild 4). Das hat den Vorteil, dass Sie sich
die Größe des Bildes, das dargestellt werden
soll, direkt aussuchen können. Flickr berechnet
nämlich eine Vielzahl von Vorschaubildern aus
dem Original. In diesem Fall steht das _m am
Ende des Dateinamens für die Größe m, mit einer Kantenlänge von maximal 240 Pixeln. Alternativ können Sie zum Beispiel auch s für 75x75
Pixel nutzen, q für eine Größe von 150x150 Pixeln oder b für eine maximale Kantenlänge vom
1024 Bildpunkten angeben. Eine Liste der Formate finden Sie unter www.flickr.com/services/
api/misc.urls.html. Um die kompletten Informationen zu einem Bild auszulesen, nutzen Sie den
Aufruf flickr.photos.getInfo, und die Exif-Daten
erhalten Sie mit Hilfe von flickr.photos.getExif.
2/2014

foreach ($photos->photo as $photo) {
echo "Bild-ID: " . $photo->id."<br>";
echo "User-ID Eigentuemer: " .
$photo->owner."<br>";
echo "Secret: " . $photo->secret."<br>";
echo "Server: " . $photo->server."<br>";
echo "Farm: " . $photo->farm."<br>";
echo "Title: " . $photo->title."<br>";
$pic_url = "http://".
"farm".$photo->farm.".staticflickr.com/".
$photo->server."/". //Server-ID
$photo->id."_".$photo->secret."_m.jpg";
echo "<img src='$pic_url'>";
echo "<hr>";
}

Bevor ich zum Upload komme, möchte ich
aber noch kurz auf die Suche mit flickr.photos.
search zurückkehren. Im obigen Beispiel habe
ich als Suchkriterium die User-ID angegeben.
Ohne die Angabe der User-ID würde die Funktion alle öffentlich zugänglichen Bilder durchsuchen. Der API-Aufruf kennt aber noch eine Vielzahl von anderen Möglichkeiten. Mit Hilfe des
Argumentes text können Sie die Beschreibungen
und Titel durchsuchen. Die Schlüssel min_upload_date, max_upload_date, min_taken_date und
max_taken_date erlauben es Ihnen, die Such­
ergebnisse nach Upload- beziehungsweise Aufnahmedatum einzuschränken, wobei das Datum als Unix-Timestamp oder im MySQL-Format angegeben werden kann. Insgesamt stellt der Aufruf ein sehr
breites Spektrum an Möglichkeiten zur Verfügung, das ich hier
nicht komplett beschreiben kann.
Sie finden in der API-Dokumentation aber eine komplette Liste.

Die Bilder des Users (Bild 4)

Bilder uploaden
Nachdem Sie nun wissen, wie
Sie Bilder herunterladen können,
stellt sich noch die spannende Frage, wie Sie Bilder zu Flickr hochladen. Leider ist die Vorgehensweise dabei etwas anders. Flickr stellt
dafür keinen API-Call zur Verfügung, sondern sieht einen direkten Upload per
POST vor. Das heißt, Sie müssen auf einen Upload via Curl zurückgreifen. Ein direkter Upload per Formular ist leider nicht möglich, da
der Upload mittels OAuth zertifiziert werden
muss. Und da fängt es dann auch leider an, etwas kompliziert zu werden. Da Flickr für den
Upload auf einen anderen URL zurückgreift,
können wir leider nur in Teilen auf die Funktionalitäten der Bibliothek zurückgreifen. ▶

97

backend
Links zum Thema
Flickr
▶ www.flickr.com
Flickr-API-Dokumentation
▶ www.flickr.com/services/api
Die verwendete OAuth-Biblio­
thek
▶ https://code.google.com/p/
oauth-php
Infoarmationen zu OAuth
▶ http://oauth.net

Glücklicherweise helfen aber die Methoden, die
in der Klasse implementiert sind, um eine recht
schmerzfreie Umsetzung zu realisieren.
Um sicherzustellen, dass die Daten korrekt
übertragen werden, muss ein OAuth-Request
mit einer Signatur versehen werden. Diese Sig­
natur basiert auf einem SHA1-Hash, der aus
dem sogenannten Base-String berechnet wird.
Bei dem Base-String handelt es sich um eine normalisierte Darstellung des URL, der aufgerufen wird, wobei die Übertragungsmethode (also GET oder POST) vorangestellt und alle Felder, die übertragen werden, angehängt werden.
PHP sieht keine Funktionen dafür vor, was die
OAuth-Bibliothek aber glücklicherweise kompensiert (Listing 6).
Bei dem Erstellen der Signatur müssen Sie
beachten, dass das Bild selbst nicht mit signiert
werden darf und somit erst später zu den Feldern hinzugefügt werden darf. Bei dem Wert
für oauth_nonce, den ich hier mit einem festen
Wert belegt habe, sollte es sich eigentlich um
ein Unique Token handeln. Dieser »einzigartige
Wert« kann dazu genutzt werden, Requests zu
erkennen, wenn parallel mehrere Abfragen ausgeführt werden, was hier aber vernachlässigt
werden kann (Bild 5).
Wurde der Upload erfolgreich durchgeführt,
dann bestätigt Flickr dies mit der ID des neu angelegten Bildes. Im Fehlerfall wird natürlich ei-

Das neu hochgeladene Bild bei Flickr (Bild 5)
ne Fehlermeldung zurückgegeben, die hier allerdings nicht ausgewertet wird. Mögliche Fehlercodes und weitere Argumente für einen Upload finden Sie unter www.flickr.com/services/
api/upload.api.html.

Fazit
Wie so oft reicht der hier verfügbare Platz leider nicht, um alles zu beschreiben. Das API ist
wirklich leistungsfähig und eröffnet eine Menge Möglichkeiten. Stöbern Sie einfach mal in der
Dokumentation des API. Die Doku ist – mit Ausnahme der Beschreibung der Upload-Funktionalität – wirklich sehr gut. 
[mb]

Listing 6: Upload eines Bildes
include_once "oauth-php/library/OAuthStore.php";
include_once "oauth-php/library/OAuthRequester.php";
include_once "oauth-php/library/".
"signature_method/OAuthSignatureMethod_HMAC_SHA1.php";
$db = array('server' => '127.0.0.1',
'username' => 'root',
'password' => geheim,
'database' => 'oauth');
$store = OAuthStore::instance('MySQL', $db);
$user_id = 1;
$consumer_key = 'a518be4d651bc9bb1d695d80dd07959e';

'oauth_version' => '1.0',
'title' => 'Käse in Holland'
$req = new OAuthRequest($request_uri, 'POST');
foreach ($fields as $name => $value) {
$req->setParam($name, $value);
}
$signer = new OAuthSignatureMethod_HMAC_SHA1();
$signature = $signer->signature($req,
$req->signatureBaseString(),
$consumer_secret, $token_secret);
$signature = urldecode($signature);
$fields['oauth_signature'] = $signature;

$ret = $store->getSecretsForSignature(
'http://api.flickr.com/services/rest', $user_id);
$token = $ret['token'];
$token_secret = $ret['token_secret'];
$consumer_secret = $ret['consumer_secret'];
$request_uri =
'http://up.flickr.com/services/upload/';
// OAuth-Header erstellen
$fields = array(
'oauth_consumer_key' => $consumer_key,
'oauth_token' => $token,
'oauth_nonce' => 8376, // Beliebiger Wert
'oauth_signature_method' => 'HMAC-SHA1',
'oauth_timestamp' => time(),

98

$fields['photo'] = '@./kaese.jpg';
$ch = curl_init();
$curlConfig = array(
CURLOPT_URL
=> $request_uri,
CURLOPT_POST
=> true,
CURLOPT_ENCODING
=> "UTF-8",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_POSTFIELDS
=> $fields
);
curl_setopt_array($ch, $curlConfig);
$result = curl_exec($ch);
curl_close($ch);
echo "Das neue Bild hat die ID ".$result;

2/2014

„Die Faszination der Softwareentwicklung liegt darin begründet,
dass nur die eigene Fantasie und
Kreativität begrenzen, was möglich ist.“
Golo Roden
Technologischer Visionär, Referent, Autor

Visual Studio

Trainer: David Tielke

Softwarequalität
Einsteiger

23.01.2014
18 Uhr, 45 Min.
39 € zzgl. MwSt.

Trainer: David Tielke

Node.js

Blackberry 10

04.03.2014
17 Uhr, 1,5 h
39 € zzgl. MwSt.

11.03.2014
18 Uhr, 1,5 h
39 € zzgl. MwSt.

Trainer: Golo Roden

W

W

18.02.2014
18 Uhr, 1,5 h
39 € zzgl. MwSt.

Trainer: Ekkehard Genz

Weitere Informationen zu den Inhalten der
­Webinare finden Sie auf der Webseite.

developer-media.de/webinare

e bin ar

e

Upgrades für ihr
Know-How

backend
JavaFX – die Zukunft von Java

JavaFX mit IntelliJ IDEA
JetBrains, der Hersteller von IntelliJ IDEA, bietet seit der Markteinführung von JavaFX – also schon sehr lange –
eine direkte Unterstützung für JavaFX an und arbeitet daran, diese weiter auszubauen. Von Ellen Simon

Autorin

Ellen Simon
arbeitet in der Software-Entwicklung mit folgenden Arbeitsgebieten: Entwicklung, Programmierung, Test und Debugging
von Cloud-, Rich-Internet- und
Webanwendungen sowie Mobile Apps, inklusive deren SystemManagement.
▶ web_mobile_developers@
gmx.eu
Inhalt
JavaFX mit IntelliJ IDEA.

D

ie Anzahl der am Markt erfolgreichen professionellen Entwicklungsumgebungen für
Java-Programmierer hat sich über viele Jahre
hinweg auf maximal fünf bedeutende Hersteller oder Produkte reduziert. Von diesen verfügt
lediglich JetBrains mit IntelliJ IDEA über die
einzige kommerzielle Java-IDE, die noch einen
sig­nifikanten Marktanteil einnimmt. Ein cleverer Schachzug gegenüber den Mitbewerbern gelang JetBrains im vergangenen Jahr zusammen
mit Google: Auf der Entwicklerkonferenz Google I/O 2013 stellte der Suchmaschinengigant das
gemeinsame neue Produkt Android Studio vor
und distanzierte sich damit von der übermächtigen Eclipse-Gemeinde.
Diese neue Java-IDE für die Programmierung
von Android-Apps entstammt einem Kooperationsprojekt von Google und JetBrains; beide
erschlossen sich damit in wachsenden Märkten
wichtige Absatzpotenziale. JetBrains verwendete als Ausgangsbasis für Android Studio die seit
vielen Jahren verfügbare IntelliJ-Plattform. Diesen Entwicklungsansatz verfolgte JetBrains bereits mehrfach auch für andere Technologien
wie JavaFX: Auf der Basis bisheriger Erfahrungen und konkreter Anforderungen seitens der
Kunden realisiert man diese auf der bewährten Plug-in-Architektur der IntelliJ-Plattform.
Gleichzeitig nutzt man die in der IntelliJ-Plattform implementierten IDE-Features, um schnell

Die Stärken der IntelliJ-Plattform
Intelligentes Verhalten: Diese Zielsetzung der Entwickler inspirierte den Hersteller, als Produktname IntelliJ IDEA zu wählen.
■ Refactoring (Restrukturierung): Automatische Strukturverbesserung von Quellcode (unter Bei-

behaltung des Programmverhaltens), um ihn lesbarer, verständlicher, wartbarer und erweiterbarer zu machen.
■ Produktivität: Durch intelligente Codeanalyse, Codevervollständigung, Code Folding, Live Templates, Prüfmechanismen (Inspection), Quickfixes, schnelle Navigation, Arbeiten mit unvollständigem Code, Tastaturbefehlen und vieles andere.
■ Polyglot-IDE: IntelliJ IDEA stellt eine Mehrsprachen-IDE dar. In der Java-Welt ist dieses Paradigma der Polyglot-Programmierung weit verbreitet. So kann die JVM gleichzeitig mehrere
Sprachen ausführen. Erst eine Polyglot-IDE ermöglicht es, die Vorteile unterschiedlicher Programmier-Paradigmen zu nutzen.
■ Plug-ins: Die IDE basiert auf einer Plug-in-Architektur, die Drittherstellern ein SDK zur Entwicklung eigener Tools bietet. Seit 2006 veranstaltet JetBrains einen jährlichen Plug-in-Wettbewerb,
um die besten IDE-Erweiterungen zu prämieren.

100

Serie: JavaFX
1: JavaFX auf dem Sprung ins JDK
2: JavaFX – das neue Swing
3: Scene Builder für Visual Design
4: JavaFX mit NetBeans
5: JavaFX mit Eclipse
6: JavaFX mit IntelliJ IDEA
7: Tools von Drittherstellern

die bestmögliche Unterstützung für Androidoder JavaFX-Entwickler bereitzustellen.

Auswahl zwischen Community Edition
oder Ultimate
JetBrains vermarktet für Java-Entwickler zwei
Produkte: ein frei zugängliches Open-Source-­
Produkt IntelliJ IDEA Community Edition und
eine mit zusätzlichen Funktionen ausgestattete kommerzielle Entwicklungsumgebung
IntelliJ
IDEA Ultimate (Bild 1). Seitens der Betriebssysteme
unterstützt der Hersteller
für beide IDE-Editions sowohl Windows, Mac OS X
als auch Linux. Während
der Schwerpunkt der Community Edition eher auf
dem Einsatz als Programmierumgebung (Groovy, JetBrains vermarktet
Java, Scala, XML und an- IntelliJ IDEA Ultimadere) mit integriertem GUI- te als kommerzielle
Tool liegt, handelt es sich Java-IDE für die Polyglot-Programmiebei IntelliJ IDEA Ultimate
rung (Bild 1)
um eine vollwertige Entwicklungsumgebung, die
man bereits in den frühen Phasen der SoftwareEntwicklung für Analyse, Modellierung und
Design einsetzen kann.
Als Programmierumgebung stellt die Community Edition (CE) quasi eine Untermenge der
Features der Ultimate Edition (UE) zur Verfügung. Jedoch geht bereits die CE über die benötigten Funktionen einer reinen Programmierumgebung hinaus: Sie besitzt für die Verwaltung von Projekten und Quellcode Schnittstellen
zu allen wichtigen Change-Konfigurations- und
2/2014

backend
Build-Systemen (Ant, Gradle, Maven), für das
Testing zu JUnit, TestNG, Spock, Cucumber und
anderen sowie für die Projekt­arbeit und Fehlerverfolgung zu YouTrack, ­JIRA, Lighthouse, GitHub, Redmine et cetera. Die UE ergänzt oder
erweitert die CE zu einer profes­sionellen Entwicklungsumgebung für unternehmensweite
Anwendungen inklusive Webanwendungen,
Rich-Internet-Applikationen und Mobile Apps.
So verfügt die UE über Database Tools, UML
Designer und erlaubt zusätzlich den Einsatz von
HTML (mit JavaScript und CSS).
Darüber hinaus unterstützt die UE wichtige
Frameworks wie Spring, Java EE, Google Web
Toolkit, Grails, Griffon, JBoss Seam, SASS, Rails
oder Node.js. Application Server wie Tomcat,
TomEE, JBoss, Jetty, WebSphere, GlassFish oder
WebLogic macht einzig die UE, nicht aber die
CE zugänglich. Dasselbe gilt für die Changeund Konfigurationssysteme ClearCase, Team
Foundation Server, Perforce und Visual Source­
Safe. Für die UE bietet JBrains einen Rund-umdie-Uhr-Support, während der Support für die
CE über die IntelliJ-IDEA-Community-Foren
und Issue Tracker, ein frei zugängliches Problem- und Projektverfolgungs-Tool auf Basis des
JetBrains-Produkts YouTRACK, erfolgen muss.

Bei der JavaFX-Unterstützung von
Anfang an dabei
Wegen des positiven Einflusses von IntelliJ
IDEA auf den Erfolg von JavaFX entschlossen
sich Sun als auch JetBrains bereits 2008, ein JavaFX-Plug-in bereitzustellen. Aufgrund der bevorstehenden Übernahme von Sun durch Oracle und der sich abzeichnenden Neuausrichtung
der JavaFX-Technologie zogen sich die Entwickler des JavaFX-Plug-ins bei Sun vollständig zurück. Lediglich das Team bei JetBrains vollendete die Entwicklungsaktivitäten und kündigte mit IntelliJ IDEA 8.1.1 ein JavaFX-Plug-in für
die Entwicklung mit JavaFX-Version 1.x an, dem
Vorgänger des heutigen JavaFX 2.x (Bild 2). Aufgrund der geringen Akzeptanz und der fehlenden größeren Verbreitung dieser JavaFX-Ver­
sion 1.x reduzierte schließlich auch JetBrains
den Entwicklungsaufwand.
Daher ruhten eine Zeitlang die Anstrengungen der Plug-in-Entwicklung bei Sun und JetBrains. Erst nach der Übernahme von Sun durch
Oracle überarbeitete das JavaFX-Team seine bisherige Konzeption und stellte Ende 2011 die Rea­lisierung der neuen Version JavaFX 2 vor. Das damit verknüpfte Funktions- und Leistungsspektrum führte, verbunden mit in JavaFX-Version
2.x klar erkennbaren Neuerungen und Verbesserungen, schnell zu einer besseren Resonanz in
der Java-Gemeinde. Parallel erkannte auch JetBrains die Bedeutung der JavaFX-Technologie
2/2014

für die Zukunft von Java. Daher entschloss sich
JetBrains, die bisherigen Arbeiten für die Bereitstellung eines JavaFX-Plug-ins fortzusetzen. Die
neuen Entwicklungsaktivitäten führten Anfang
vergangenen Jahres zu einer neuen Version des
JavaFX-Plug-ins.
Mit Version 12.1 von IntelliJ IDEA (Bild 3)
machte der Hersteller erstmals ein neues, auf
Java­FX 2 ausgerichtetes Plug-in einer breiten Öffentlichkeit zugänglich. JetBrains liefert das JavaFX-Plug-in nicht nur mit der
kommerziellen Ultimate, sondern gleich auch mit der Community Edition aus. JavaFX-Entwicklern steht somit das komplette Leistungsspektrum der
IDE zur Verfügung. Dazu gehören sämtliche Arbeitsschritte wie
intelligentes Editieren, Übersetzen und Bereitstellen der Anwendung. Insbesondere unterstützt
das Plug-in alle mit der JavaFX-

Technologie verbundenen Spezifika. So kennt
die IDE nicht nur Struktur und Inhalte der JavaFX-Klassenbibliothek, sondern auch alle verfügbaren Sprachen und Tools wie FXML, Scene
Builder oder die JavaFX-Ant-Erweiterungen.

Das JavaFX-Team bei JetBrains
befasste sich frühzeitig auch mit
der aufgrund konzeptioneller
Schwächen wenig erfolgreichen
JavaFX-Version 1.x (Bild 2)

Seit Frühjahr 2013 unterstützt
IntelliJ IDEA den offiziellen
Swing-Nachfolger – die neue
JavaFX-Version 2.x (Bild 3)

Installation der IDE mit JavaFX-Plug-in
von JetBrains
Generelle Voraussetzung für die JavaFX-2.xEntwicklung mit IntelliJ IDEA (möglich ab Version 12.1.x) ist die Installation eines JDK (ab ▶

IntelliJ IDEA – vom Plug-in zur Polyglot-IDE
Ursprünglich als Renamer-Plug-in für JBuilder auf den Markt gebracht, entstand aus diesem
Produkt die rein in Java programmierte IDE IntelliJ IDEA.
Bei Konzeption und Entwicklung flossen die beiden hauseigenen Technologien Renamer und
CodeSearch mit ein. Als treibende Kraft bei der Umsetzung dienten dem Hersteller die Leitlinien »Entwickle mit Freude« und »Arbeite hochproduktiv«. Programmierer sollten beim Einsatz
der IDE positive Erfahrungen sammeln, um so für ihre Projekte längerfristigen Erfolg zu sichern.
Deshalb integrierte JBrains in IntelliJ IDEA die besonders hilfreichen Features Refactoring,
Syntax-Highlighting, Live Templates, Codevervollständigung, intelligente Fehlerverarbeitung und
andere. Diese Charakteristika führten über viele Jahre hinweg zu zahlreichen Auszeichnungen
und Preise, die der Hersteller für IntelliJ IDEA erhielt. Da die IDE von Anfang an auf einer Plugin-Architektur basierte, war sie leicht und damit schnell um weitere Features erweiterbar. Inzwischen unterstützt die IDE den kompletten Lifecycle und zahlreiche Sprachen, sodass JetBrains
über eine Polyglot-IDE verfügt.

101

backend

In der IDE-Version ab 12.1.x
findet man das
JavaFX-Plug-in
im Dialog Select
Other Plugins,
da die JavaFXTechnologie die
beiden anderen ­Kategorien
Web/JavaEE als
auch HTML/
JavaScript umfasst (Bild 4)

Einstellungen
IntelliJ IDEA gruppiert die Einstellungen der IDE in verschiedene Kategorien:
■ Template

Project Settings:
Stellen die Voreinstellungen
bei der Neuanlage eines Projekts dar; können über File,
Other Settings, Default Settings … bearbeitet werden.
■ Project Settings: Gelten für ein
spezielles Projekt und werden
über das .idea-Verzeichnis direkt beim Projekt abgebildet.
Die zugehörigen Einstellungen findet man in den dortigen
XML-Dateien, deren Werte legt
man über File, Settings … fest.
■ IDE Settings: Beziehen sich auf
Vorgaben zur IDE und gelten für
alle mit einer IDE-Version abgewickelten Projekte. Die Einstellungen befinden sich im config-Verzeichnis beim Benutzerprofil der IDE-Installation, zum
Beispiel: \Users\ESimon\.IntelliJIdea13.
■ settings.jar: Diese Datei enthält vom Benutzer ausgewählte
Einstellungen. File, Export Settings … erzeugt die settings.
jar-Datei im config-Ordner für
einen späteren Import in ein
anderes IntelliJ-IDEA-System.

102

Version 7 – siehe Serienteil 1) und des JavaFX
Scene Builders (ab Version 1.1 – siehe Serienteil 3). Bei Vorliegen dieser beiden Voraussetzungen startet man unter Windows das von der
IntelliJ-IDEA-Downloadseite heruntergeladene
Installationsprogramm. Sollte bereits eine IDEVersion eingerichtet sein, so bietet das Installationsprogramm dafür eine De-Installation an.
Unter Mac OS X und Linux führt man die Installation wie bei diesen Betriebssystemen üblich
als Systemadministrator durch. Die Installation
richtet gleichzeitig eine Java Runtime Environment (JRE) für die eigenen Dienste beziehungsweise Services der IDE ein.

Einstellungen übernehmen
Bereits beim erstmaligen Start einer neu installierten IDE-Version besteht die bei Open-SourceProdukten häufig fehlende Möglichkeit, bisherige Einstellungen der Konfiguration eines vorhandenen IntelliJ-IDEA-Systems sofort zu übernehmen. Dies ist auch nach dem Programmstart
noch über das Dialogfenster Welcome to IntelliJ IDEA mit Configure, Import Settings oder über
das IDE-Hauptfenster File, Import Settings …
möglich. Eine Übernahme oder einen Import
von IDE-Einstellungen führt man spezifiziert
nach bestimmten Vorgaben durch, die vorher in
die Datei settings.jar exportiert wurden. Um Anfängern einen schnellen und fehlerfreien Einstieg zu gewährleisten, stellt JetBrains die Community Edition integriert mit den am häufigsten
benötigten Plug-ins bereit.
Im Unterschied zur CE legt man beim erstmaligen Start der UE zunächst ein durch das
Projekt vorgegebenes Versionsverwaltungssystem (Version Control System/VCS) fest. Danach
wählt man jeweils über drei eigenständige Dia­
logfenster die geplanten Web/JavaEE Technolo-

gy-Plug-ins, im Anschluss daran die HTML/JavaScript Development-Plug-ins und ganz zum
Schluss die Other Plugins aus. Derzeit kann man
erst im dritten Dialogfenster Select Other Plugins das JavaFX-Plug-in (Bild 4) für JavaFX-2-Unterstützung aktivieren. Für beide IntelliJ IDEAEditionen erreicht man dieses direkte Plug-inAuswahlfenster über File, Other Settings …, Configure Plugins …. Natürlich lässt sich das JavaFXPlug-in wie alle anderen auch nachträglich in eine vorhandene IDE-Installation integrieren.
Am schnellsten geht dies nach Programmstart, solange noch kein Projekt angelegt wurde,
über Configure, Plugins. Dort zeigt man sich die
noch verfügbaren und nicht installierten Plugins durch Auswahl von Disabled plugins in der
Dropdown-Liste Show an. Ist bereits ein Projekt definiert, wählt man: File, Settings …, IDE
Settings, Plugins. Ein Klick auf das Optionskästchen vor dem Namen des JavaFX-Plug-ins aktiviert es nach erneutem IDE-Start. Für JavaFXAnt-Builds installiert man abschließend noch
das Ant Support-Plug-in und macht es der IDE
zugänglich. Die Startdauer der IDE lässt sich
optimieren, indem man einfach nicht benötigte Plug-ins über den Dialog Welcome to … (Settings, Plugins) oder File, Other Settings …, Configure Plugins … ausschaltet.

Konfiguration der IDE für die
JavaFX-Entwicklung
Nach Start von IntelliJ IDEA macht man für
die JavaFX-Entwicklung in der IDE zunächst
das JavaFX SDK zugänglich; Oracle liefert dieses ab dem JDK Version 7 integriert mit aus.
Über das Dialogfenster Welcome to … erledigt
man dies durch Configure, Project Defaults, Project Structure. Bei bereits existierenden Projekten
in der IDE erreicht man diese Konfigurationseinstellung über File, Other Settings, Default Project Structure … Im Dialog Project Structure klickt
man in der Kategorie Platform Settings auf SDKs,
danach im mittleren Fensterausschnitt auf das
kleine, grüne Plus-Symbol. Es öffnet sich der
Dialog Select Home Directory for JDK, über den
man das Installationsverzeichnis der gewünschten Java SE (ab Version 7) festlegt. Der Dialog
Project Structure darf nicht durch einfachen OKKlick, sondern muss, um eine tatsächliche projektübergreifende Zuordnung eines JDK vorzunehmen, über die Apply-Schaltfläche verlassen
werden.
In der Regel sollte für Entwicklung und Test
eine Java Runtime Environment (JRE) ausgewählt werden, die mit der im Anwendungsbetrieb übereinstimmt. Diese Bedingung kontrolliert man kurz auf der Ebene des Betriebssystems. Die Prüfung führt man recht einfach über
den Befehl java -version oder durch Ausgabe der
2/2014

backend
aktuellen Einstellung der Umgebungsvariablen JAVA_HOME durch. IntelliJ IDEA erlaubt es,
die gerade beschriebene Zuordnung einer gewünschten JDK-Version auch nachgelagert beim
Einrichten eines JavaFX-Projekts vorzunehmen.
Den Dialog New Project erreicht man im Fenster
Welcome to … durch Klick auf Create New Project
oder bei aktuell geöffnetem Projekt über File,
New Project … In der linken Spalte des Dialogs
New Project (Bild 5) wählt man in der Kategorie
Java als Anwendungstyp JavaFX Application aus.
Im rechten Fensterausschnitt befindet sich eine Dropdown-Auswahlliste Project SDK mit allen der IDE verfügbaren JDK-Versionen. Derzeit
befindet sich in dieser Auswahlliste der Eintrag
<None>, der verdeutlicht, dass noch keine JDKVersion zugeordnet wurde.
Dies erledigt man jetzt durch Klick auf die direkt neben der Auswahlliste stehende Schaltfläche New … Es erscheint wieder der Dialog Select Home Directory for JDK, um das gewünschte JDK über dessen Installationsverzeichnis auszuwählen. IntelliJ IDEA erlaubt für das GUI-Design den Einsatz des JavaFX Scene Builders von
Oracle. Im Dialog Welcome to … macht man der
IDE den Scene Builder über Configure, Settings
zugänglich. Es erscheint das gleichnamige Dialogfenster, dort klickt man in der Kategorie IDE
Settings auf den Eintrag JavaFX.
Hat man in der IDE ein existierendes Projekt
geöffnet, so erreicht man diese Ausgangssitua­
tion auch über File, Settings und die Auswahl
von IDE Settings sowie JavaFX.
Daraufhin zeigt der Settings-Dialog das Eingabefeld Path to SceneBuilder an; über dessen
ganz rechts stehende  …-Schaltfläche öffnet sich
das Dialogfenster SceneBuilder Configuration.
Jetzt ordnet man der IDE über das Installationsverzeichnis des Scene Builders die gewünschte Version zu.

Einrichten eines JavaFX-Projekts
Den Projekt-Assistenten (Project Wizard) für
die JavaFX-Entwicklung erreicht man im Dialogfenster Welcome … über Create New Project
oder bei geöffnetem Projekt mittels File, New
Project … Im sich öffnenden Dialog New Project klickt man im linken Fensterbereich auf den
Eintrag JavaFX Application und legt im rechtem Fensterausschnitt passende Projektvorgaben fest. Als Project name gibt man zum Beispiel myJavaFXAnwndg vor, legt den Ablageort
für die Projektdateien über Project location fest
und wählt das für die Programmierung zu verwendende JDK mittels der Auswahlliste Project
SDK aus.
Durch Klick auf die OK-Schaltfläche und Bestätigung der Neuanlage des zugehörigen Ordners generiert der Projekt-Assistent neben der
2/2014

Ablagestruktur verschiedene Dateien mit JavaFX- und FXML-Quellcode; zu diesen gehören (Bild 6): eine Main-Klasse, eine FXML-Datei und eine zugehörige Controller-Datei. Dabei orientiert sich der IntelliJ IDEA-Generator
am Entwurfsmuster MVC (Model-View-Controller). Zusätzlich erzeugt der Projekt-Assistent für den Build-Prozess der zu programmierenden Java­FX-Anwendung den seitens IntelliJ IDEA benötigten Artifact. Dieser erhält nach
Standardvorgabe den Namen JavaFXApp.xml;
man findet ihn im Directory.idea unter dem Verzeichnis artifacts.
Leider bietet IntelliJ IDEA im linken Fensterbereich des Projekt-Assistenten derzeit nur den
Projekttyp JavaFX Application zur Auswahl an.
Bei diesem handelt es sich allerdings nicht um
den gleichnamigen, aus der JavaFX-Spezifikation bekannten Projekttyp; vielmehr entspricht
dieser einem Projekt vom Typ JavaFX FXML Application. Die anderen laut JavaFX-Spezifikation
definierten Projekttypen JavaFX Application, JavaFX in Swing Application und JavaFX Preloader
generiert der Projekt-Assistent von IntelliJ IDEA
zurzeit noch nicht. Die aktuell bei Oracle diskutierten Projekttypen Swing in JavaFX und SWT
Support unterstützt die IDE ebenfalls noch nicht.
JetBrains will, abhängig von den Anforderungen in konkreten Projekten, die fehlenden Quellcode-Generatoren für weitere JavaFX-Rahmenprogramme schnellstmöglich implementieren.
Das ist aufgrund der seitens IntelliJ IDEA
unterstützten File and Code Templates auch
­
leicht umzusetzen. Zudem wäre es sinnvoll, im
linken Fensterausschnitt des Projekt-Assistenten die Samples Gallery (Bild 5) um JavaFX-Beispielanwendungen zu erweitern. Der Hersteller
sollte überlegen, ob man hier nicht in einer jeweiligen IDE-Version deren aktuell unterstützte Java­FX-Anwendungstypen als Beispiel bereitstellen sollte. Vielleicht ist es für den Einstieg
in die Java­FX-Programmierung vorteilhaft, alle oder bestimmte ausgewählte JavaFX-SceneBuilder-Anwendungen aus dessen umfangreicher Samples-Sammlung an dieser Stelle mit

aufzunehmen.

Java(FX)-Projekte basieren immer
auf einem JDK, das in der
IntelliJ-IDEA-Terminologie Project
SDK genannt wird (Bild 5)

Im src-Ordner befinden sich Quelldateien, in .idea/artifacts das zugehörige Artifact für Builds und in External Libraries alle externe Bibliotheken; während die Konfigura­tion
der Anwendung die IML-Modul-­
Datei beschreibt (Bild 6)

Artifact
Der Ergebnistyp Artifact von IntelliJ IDEA.
JetBrains führte in IntelliJ IDEA
Version 9 das Konstrukt eines
Artifacts als neues, einfaches
Hilfsmittel für die Spezifikation
von Ausgabeergebnissen eines
Projekts ein. Der Dialog zur Definition und Verwaltung von Artifacts befindet sich im Bereich
der Project Settings. Bei geöffnetem Projekt erreicht man diesen
über File, Project Structure …

103

backend

Quellcode-Editoren bieten
Programmierern während der
Codevervollständigung auch das
Nachschlagen von Definitionen
des Quellcodes an (Bild 7)

Shortcuts
Tastaturbefehle (Shortcuts) für
die Codierung.
■ Einfache

Codevervollständigung: Name der Klasse, Methode, Variable und [Strg Leertaste].
■ Smart Codevervollständigung:
Zeigt die Liste der Methoden
und Variablen nach dem erwarteten Datentyp an: [Strg Umschalt Leertaste].
■ Vervollständigung des Klassennamens: Zeigt die Namen
der Projektklassen unabhängig
von den aktuellen import-Anweisungen an: [Strg Alt Leertaste].
■ Vervollständigung der kompletten Anweisung: [Strg Umschalt Eingabetaste].

104

JavaFX-Rahmenprogramm erweitern
und analysieren
Bei der Neuanlage einer JavaFX-Anwendung erzeugt der Projekt-Assistent im FXML-Quellcode
derzeit als Container ein GridPane. Wesentlich
besser geeignet wäre ein AnchorPane, da dieses
mehr Anwendungsfälle abdeckt als das komplexere, auf Zeilen und Spalten ausgerichtete
GridPane.
Ein AnchorPane im Rahmenprogramm stellt
sicherlich für viele Anwendungsfälle eine gute und bessere Ausgangsbasis als ein doch recht
spezielles GridPane dar. Am meisten Flexibilität für den Entwickler würde jedoch eine Dropdown-Auswahlliste mit den seitens JavaFX verfügbaren Layout-Managern/Containern bieten.
Das vom Projekt-Assistenten generierte JavaFXRahmenprogramm lässt sich auf der Ebene des
Quellcodes mittels der in IntelliJ IDEA implementierten Editoren ändern. Dazu existiert in
der IDE für jede Datei eines Ergebnistyps ein
spezieller Quellcode-Editor:
■ J avaFX,
■F 
XML,
■C 
SS,
■ J avaFX Ant.
IntelliJ IDEA bietet eine Codevervollständigung
für alle drei Typen von Quellcode-Editoren und
für JavaFX Ant-Builds an. Die IDE kennt den
kompletten Aufbau und Inhalt der JavaFX-Klassenbibliothek, das heißt ihre Struktur, sämtliche
Packages, alle Parameter und Konstanten sowie
die komplette Java(FX)-Sprachsyntax.
Der in IntelliJ IDEA implementierte FXMLCode-Editor vervollständigt FXML-Anweisungen, er kennt die in der Oberfläche bereits vorhandenen Elemente und unterstützt deren Konfiguration über FXML.
Hierzu stehen einem Programmierer alle
defi­nierten fx:-Attribute zur Verfügung, also alle über die JavaFX-Klassenbibliothek deklarierten Klassen mit ihren Attributen und Methoden.
Über diese fx:-Attribute kann man neue Elemente auf der bisherigen Oberfläche aufnehmen und
erweitern oder die vorhandenen ändern.

Hilfreich während der Bearbeitung von Quellcode ist die Kenntnis von Tastaturbefehlen (Shortcuts).
Mit ihrer Hilfe arbeiten auch weniger erfahrene Entwickler sehr produktiv, da die Editoren die Sprachsyntax kennen und dem Programmierer direkt Vorschläge zur Ergänzung der Anweisungen anbieten.
Zudem verfügt IntelliJ IDEA über
eine besondere Hilfsfunktion: Open
Quick Definition Lookup.
Dieses Feature startet man im Editor mit Hilfe der Tastenkombination [Strg Umschalt I]; es zeigt in einem Fenster,
das sich separat öffnet, die Definition des ausgewählten Code-Elements an.
Dieses Feature kann innerhalb der IDE nicht
nur für bereits im Editor erfasste QuellcodeAnweisungen, sondern auch für alle seitens
der IDE aktuell im Editor angebotenen Vorschläge der Codevervollständigung genutzt
werden (Bild 7).

TODOs als Aufgabenlisten
In großen Projekten hat es sich bewährt, auf das IDEFeature der ToDo-Aufgabenlisten zurückzugreifen.
Hierzu besitzt IntelliJ IDEA als vordefiniertes Kennzeichen für den Beginn einer ToDo-Aufgabe das Präfix TODO. Bei den IDE-Settings legt man Ergänzungen
zu diesem Präfix in Anlehnung an bereits vorhandene
weitere TODO-Pattern/Muster an.
Jeder Kommentar in sämtlichen Projektdateien,
der mit diesem Präfix und einer definierten Ergänzung beginnt, wird als Aufgabe aufgefasst. Alle Aufgaben mit gleichem Präfix und Ergänzungsmuster fasst
die IDE zu einer Aufgabenliste zusammen, die das TODO-Fenster (View, Tool Windows, TODO) im MessagesBereich anzeigt.

IntelliJ IDEA integriert den JavaFX Scene Builder – das seitens Oracle bereitgestellte Werkzeug für die visuelle Gestaltung der Bedienoberfläche.
Dieses GUI-Tool legt die vom Designer spezifizierte Oberfläche in eine FXML-Datei ab. Der
Projekt-Assistent für eine JavaFX-Anwendung
hat bereits eine solche FXML-Datei als Ausgangspunkt für das eigentliche Design der Bedienoberfläche generiert. Markiert man diese
sample.fxml-Datei im Project Explorer der IDE,
so erscheint in dessen Kontextmenü der Eintrag
Open in SceneBuilder.
Wählt man diesen Eintrag aus, so startet das
GUI-Tool, um die Oberfläche der Anwendung
visuell gestalten zu können (siehe Serienteil 3).
Befindet sich der Eingabe-Cursor im FXML2/2014

backend
Quellcode, so öffnet sich der Scene Builder alternativ auch über das gleichnamige Kontextmenü.

Quellcode analysieren und
Anwendung testen
Während man den Quellcode ändert und erweitert, führt IntelliJ IDEA selbstständig ­quasi im
Hintergrund eine sogenannte On-the-fly Code
Analysis durch. Im Bedarfsfall erscheinen im
Quellcode-Editor Warnungen oder Fehlerhinweise, zu denen man mittels der Tastenkombination [Strg F1] nähere Erläuterungen erhalten
kann. Positioniert man den Eingabe-Cursor an
den Zeilenanfang einer Warn- oder Fehlermeldung, so gibt die IDE am Zeilenanfang das Symbol einer kleinen farbigen Glühbirne oder eines
kleinen Bleistifts aus.
Ein Klick auf das Icon oder die Tastenkombination [Alt Eingabe] öffnet eine sogenannte
Intention Action-Beschreibung. Diese stellt Vorschläge bereit, um die Warnung beziehungsweise Fehlermeldung zu beseitigen. Hierzu gehören Quickfixes (rote Glühbirne mit kleinem
Ausrufezeichen); trifft man aus ihnen eine Auswahl, so korrigiert IntelliJ IDEA automatisch
den Quellcode.
Zusätzlich kann man für das gesamte JavaFXProjekt eigene Code-Inspections anstoßen. Hierzu hat JetBrains in IntelliJ IDEA bereits einige
der durchzuführenden Prüfungen vorgegeben.
Diese findet man bei den Project Settings im Bereich Inspections (Bild 8); über dieses Dialogfen­
ster kann man eine bestimmte Prüfung aktivieren oder ausschalten, vorhandene InspectionProfiles an eigene Bedürfnisse anpassen, diese
als XML-Datei exportieren und anderen Projekten zugänglich machen.
Die eigentliche Code-Analyse startet man
über Analyze, Inspect Code …, wobei über das
Dialogfenster Specify Inspection Scope noch der
zu untersuchende Code-Bereich festzulegen ist.

Nach Ausführung der Code-Analyse gibt die
IDE im Messages-Bereich in Form einer Baumstruktur klassifiziert Warnungen oder Fehlerhinweise aus.
Das vom Projekt-Assistent erzeugte Rahmenprogramm ist vollständig in Java(FX) und FXML
codiert; es lässt sich direkt in IntelliJ IDEA für
Prototyping oder Test ausführen. Hierzu wählt
man über das Menü Run den Eintrag Run
('Main'), oder man markiert im Project Explorer die im Package sample stehende Datei Main.
java und startet über deren Kontextmenü den
Befehl Run ('Main'). Darauf stößt die IDE eine
Übersetzung an. Im Fehlerfall unterbricht die
IDE diese und gibt im Messages-Bereich über
das Register Make unterhalb der fehlerhaften
Da­teien die Fehlermeldungen mit der zugehörigen Zeilennummer aus. Klickt man dort gezielt
auf die Zeile einer Fehlermeldung, so öffnet IntelliJ IDEA die zugehörige Quellcode-Datei und
positioniert den Eingabecursor an die betroffene, fehlerhafte Stelle.
Ist die Übersetzung fehlerfrei, so startet die
IDE in der Java Virtual Machine einen Prozess,
zeigt diesen im Messages-Bereich über das Register Run (Main) an und führt die JavaFX-Anwendung aus. Im Hauptfenster der IDE erscheinen unterhalb des Messages-Bereichs alle aktuell vorhandenen Register nebeneinander aufgereiht (Bild 9). Klickt man auf den Namen eines
Registers, so gibt die IDE im Messages-Bereich
die zugehörigen Nachrichten als aktuelle Ausgabezeilen aus. Links neben den angezeigten
Ausgaben befindet sich die zum jeweiligen Register gehörende Toolbar mit den individuellen
Menübefehlen (Bild 9). Für späteres Nacharbeiten hat es sich im Fehlerfall bewährt, den Quellcode mittels TODO-Kommentaren zu erweitern
und so Arbeitsaufträge direkt Team-Mitgliedern
zugänglich zu machen.

Build und Packaging der Anwendung
durchführen

Im Hauptfenster der IDE befindet sich im unteren Fensterausschnitt der Messages-Bereich (Bild 9)
2/2014

Die JavaFX-Technologie greift beim Build auf
das Apache Ant-System zurück; Oracle hat für
diese Zwecke eigene JavaFX-Ant-Taks implementiert. Alle Builds in IntelliJ IDEA basieren
auf Artifacts, die mittels einer eigenen XML-Beschreibung definiert werden. Der Projekt-Assistent der IDE generiert für das JavaFX-Rahmenprogramm im Ordner .idea/artifacts das Artifact
JavaFXApp.xml. Die Definition eines Artifacts,
IntelliJ IDEA spricht von Konfiguration, er- ▶

IntelliJ IDEA verfügt über bereits
vordefinierte Inspections
(Code-Analysen) von JavaFXQuellcode (Bild 8)

Generierung
Erweiterungen der Code-Generierung.
Die direkte Code-Generierung
für JavaFX und FXML fehlt derzeit auf der Klassen/Datei-Ebene innerhalb der IDE vollständig.
Bei Auswahl eines Eintrags im
Projekt-Browser findet man über
File, New oder über den Eintrag
New im Kontextmenü keinerlei
Unterstützung für JavaFX-Klassen oder FXML-Dateien. Hier wäre es sinnvoll, die Code-Generatoren innerhalb der IDE zu erweitern. Damit würde JetBrains
insbesondere Anfängern in die
Java(FX)-Programmierung den
Einstieg erleichtern.

105

backend
man über die beiden Register Output Layout und
JavaFX fest:
■ Output Layout: Markiert man unterhalb der <output root> die *.jar-Datei, so kann man über die
beiden Schaltflächen ein Manifest erzeugen
oder ein bestehendes zuordnen.
■ Pre/Post-Processing: Über diese Registerreiter
legt man zusätzliche Artifacts/Ant-Targets fest,
die vor oder nachdem das aktuelle Artifact erzeugt wurde, von der IDE auszuführen sind.
■ JavaFX: Hier vergibt man alle spezifischen Java­
FX-Einstellungen wie Application class, Title,
Vendor, HTML Parameters, Application Parameters, Native bundle und Enable signing. Über die
Auswahlliste Native bundle legt man den Typ
des zu erzeugenden Bundles fest. Klickt man
auf Enable signing, so aktiviert man JAR Signing
und wählt über die Edit Certificates-Schaltfläche
ein Zertifikat aus.

Build-Datei für das Apache-Ant-System
In der IDE erfolgt die Verwaltung
und Erzeugung von Ausgabeergebnissen über Artifacts (Bild 10)

folgt auf der Ebene eines geöffneten Projekts:
File, Project Structure …, in der Kategorie Artifacts bei den Project Settings. Im dreiteiligen Dia­
logfenster befindet sich in der Mitte der Fensterausschnitt Element Selector (Bild 10).
Im Beispiel erscheint dort das bereits eingerichtete JavaFXApp-Artifact; direkt oberhalb befindet sich die zugehörige Toolbar, um neue Artifacts anzulegen, bestehende zu löschen oder
nach deren Verwendung zu suchen. Neben JavaFX Application hat JetBrains als weiteren speziellen JavaFX-Artifact den Typ JavaFX Preloader vordefiniert. Markiert man im Fensterausschnitt Element Selector ein Artifact, so bietet die
IDE dessen Einstellungen ganz rechts zur Bearbeitung an: Name, Type, Output directory und
Build on make. Weitere Einstellungen im Fall eines Artifacts vom Typ JavaFX Application legt

Um die Ergebnisse vorgenommener Änderungen bei der Definition des Artifacts in das Projekt zu übernehmen, wählt man Build, Build Artifacts …, Build | Rebuild. Die Build-Datei für das
Apache-Ant-System erzeugt man mittels Build,
Generate Ant Build … Es erscheint das Dialogfenster Generate Ant Build, um weitere Einstellungen für die Ant-Build-Datei festzulegen. Dabei erzeugt IntelliJ IDEA alle erforderlichen Java­
FX-Ant-Tasks. Danach öffnet man über View,
Tool Windows, Ant Build das Ant Build Tool-Fen­
ster und wählt durch Klick auf das kleine grüne Plus-Symbol die gewünschte Ant-Build-Datei aus. Den eigentlichen Ant Build startet man
nach Auswahl eines der im Ant-Build-Fenster
angezeigten Targets durch Klick auf das nach
rechts gerichtete grüne Pfeil-Symbol. Im Messages-Bereich der IDE nimmt Apache Ant die zugehörigen Ausgaben vor.
[mb]

Links zum Thema
Homepage von IntelliJ IDEA
▶ www.jetbrains.com/idea
Download-Seite von IntelliJ IDEA (Ultimate und
Community Edition)
▶ www.jetbrains.com/idea/download
Download-Seite von IntelliJ IDEA 13 Early Access
Program (Ultimate und Community Edition)
▶ http://confluence.jetbrains.com/display/
IDEADEV/IDEA+13+EAP
Der JavaFX CSS Reference Guide von Oracle
▶ http://docs.oracle.com/javafx/2/api/javafx/
scene/doc-files/cssref.html

106

Download-Seite von JavaFX Scene Builder
Version 1.1
▶ www.oracle.com/technetwork/java/javafx/
downloads
Download-Seite von JavaFX Scene Builder 2.0
Early Access
▶ www.oracle.com/technetwork/java/javafx/
downloads/devpreview-1429449.html

▶ 

www.oracle.com/technetwork/java/javase/
downloads/jdk7-downloads-1880260.html

Oracle JDK 7 and JRE 7 Certified System Configurations Contents
▶ www.oracle.com/technetwork/java/javase/
config-417990.html

Homepage von Oracle für JavaFX
▶ www.javafx.com

JavaFX 2 Certified System Configurations
▶ www.oracle.com/technetwork/java/javafx/
downloads/supportedconfigurations-1506746.
html

Download-Seite von JDK 7 mit integriertem
­JavaFX für alle gängigen Desktop-Plattformen

JavaFX-2-Dokumentation
▶ http://docs.oracle.com/javafx

2/2014

web & mobile

DEVELOPER

n
e
r
T

präsentiert:

ds

u
s
ö
L

n
e
g
n

ow
n
K

-Ho

w

Web Developer
WDC Conference 2014
14.-17. Juli 2014

Themenauswahl:
–A 
pplication Lifecycle Management
–W 
eb (MVC, Symfony, TYPO3,

NCC Ost, Nürnberg

Responsive Webdesign)

–E 
nterprise Solutions (Verteilte
Anwendungen, CQRS, Event Sourcing,
Big Data, Cloud)

–S 
oftwareentwicklung im Großprojekt
–A 
rchitektur: Agiler Entwurf,
Brownfield refaktorisieren

–S 
prachen: PHP, Python, JavaScript,
HTML, CSS

–T 
ools: Eclipse, Datenbanken
(MySQL, NoSQL, Graph DBs)

–R 
ichtiges Recruiting:
passende Mitarbeiter
finden, Einstellungstests,
Einstellungsgespräche

–Z 
usammenarbeit im Team:

Mit Very
Early Bird
€ 200,–
sparen!

Vor Ort und remote

Advisory Board:

Max Bold,
Chefredakteur,
web & mobile
developer

Andreas Hucks,
Senior Developer,
SensioLabs
Deutschland

Pierre Joye,
Entwickler und
PHP-Experte,
Microsoft Open Source
Technology Center

Patrick Lobacher,
Gründer und
Geschäftsführer,
typovision GmbH

web-developer-conference.de

Stefan Priebsch,
Mitbegründer,
thePHP.cc

Golo Roden,
Wissensvermittler
und Technologieberater

WDConference

backend
Porträt des neuen Jano-CMS

CMS mit ASP.NET
Das Jano-CMS ist ein noch recht junges Content-Management-System, das vollständig neu entwickelt wurde.
Erfahren Sie in diesem Artikel, wie es aufgebaut ist und verwaltet wird. Von Marc André Zhou

Autor

Marc André Zhou
ist als freiberuflicher .NET-Technologieberater tätig. Seine
Schwerpunkte liegen im Bereich
Webportale und Anwendungen,
.NET Entwicklung, SharePoint,
Software-Architekturen
und
Frameworks. Er ist als MCPD,
MCITP und MCTS im Bereich
SharePoint zertifiziert.
▶ zhou@dev-sky.net
Inhalt
Porträt des neuen Jano-CMS.

Eine mögliche ServerArchitektur (Bild 2)

108

A

uch wenn bereits eine Vielzahl
an Content-Management-Systemen
auf dem Markt existiert, handelt es sich
beim Jano-CMS um eine vollkommene
Neuentwicklung. Das System basiert
auf der Microsoft .NET-Plattform und
verwendet somit ASP.NET. Das System benutzt allerdings nicht das klassische ASP.NET-Web-Framework, sondern setzt auf das ASP.NET-MVC-Modell auf. Somit ist das System leichtgewichtiger und ermöglicht an vielen
Stellen eine moderne, REST-basierte
Anwendungsarchitektur.
Gespeichert werden alle Inhalte in
einer Microsoft SQL-Datenbank, wobei hier die Azure-Version unterstützt
wird – aber dazu später mehr. Als Die Jano-CMS Struktur (Bild 1)
­Datenbank-Mapping-Werkzeug findet
te Version mit vielen Funktionen und Erweidas Entity Framework Verwendung. Um Ladeterungsmöglichkeiten aufwarten. Das System
zeiten zu optimieren, kommen an einigen Stelist mehrsprachig ausgelegt und ermöglicht die
len Stored Procedures zum Einsatz. Diese sind
einfache Umsetzung eines internationalisierten
dann wichtig, wenn verschachtelte Daten aus
Webauftritts.
der Datenbank geladen werden müssen.
An der Oberfläche finden sich die typischen
UI-Bibliotheken einer modernen Weboberfläche
Sprache festlegen
wieder. Die gesamte Logik wird – wie bei einer
Zu Beginn müssen dazu lediglich die gewünschreinen Webanwendung üblich – per JavaScript
ten Sprachen festgelegt werden. Später können
abgebildet, wobei hier jQuery und einige Plugdann alle Inhalte mehrsprachig abgelegt werins tatkräftige Unterstützung leisten. Als Layden. Das Jano-CMS unterstützt hierbei auch eine
outsystem wird das von Twitter bekannte Bootautomatische Maschinenübersetzung von neustrap Framework verwendet.
en Inhalten. Die Übersetzungsfunktion kann bei
Auch wenn das Jano-CMS noch ein sehr junBedarf für jede gewünschte Sprache einzeln akges und neues CMS ist, kann bereits die erstiviert werden. Bei aktivierter Übersetzung werden neue Inhalte vorübersetzt, die danach zur
Optimierung im System bereitstehen. Bei Bedarf kann die Mehrsprachigkeit auch deaktiviert und der Webauftritt somit nur einsprachig
realisiert werden.
Für die Verwaltung von Bildern und Medien
steht ein Medienmanager zur Verfügung. Dieser ist in der Lage, Bilder bei Bedarf auf gewünschte Größen serverseitig zu skalieren. Dazu muss beim Aufruf eines Bildes lediglich die
gewünschte Zielgröße über einen sogenannten
QueryString-Parameter mitgegeben werden.
Skalierte Bilder werden intern gespeichert und
stehen beim nächsten Abruf direkt wieder zur
Verfügung.
2/2014

backend
Das Jano-CMS ist rollenbasiert und erlaubt
so die Delegation von Aufgaben an CMS-Anwender.
Auf der Bearbeitungsebene existieren die beiden wesentlichen Rollen Autor und Editor. Ein
Autor ist in der Lage, Inhalte zu ändern, darf
aber keine neuen Inhalte publizieren. Dies darf
nur der Editor – der natürlich auch Inhalte ändern darf. Für die Freischaltung von geänderten
Inhalten durch den Autor existiert ein Freigabeprozess (Workflow). Hierbei sendet der Autor eine neue oder geänderte Seite an den Editor – optional mit einem Kommentar. Der Editor kann dann die Seite freigeben oder kommentiert abweisen und den Autor um Nachbesserung bitten.
Weiterhin können gleichzeitig mit der Freischaltung neuer Inhalte Facebook- und TwitterMeldungen automatisiert erstellt werden. Als
letztes Feature seien hier noch Gadgets erwähnt.
Gadgets ermöglichen die einfache Integration
von erweiterten Funktionen – wie zum Beispiel
einer Bildergalerie – auf eine Webseite. Das JanoCMS bringt schon einige einsatzbereite Gadgets
mit. Es ist aber auch möglich, eigene Gadgets zu
implementieren und einzubinden.

Genereller Aufbau und Architektur
Bevor ein genauerer Blick auf die Administra­
tion geworfen wird, soll an dieser Stelle zunächst der generelle Aufbau des CMS dargestellt werden. Der gesamte Aufbau ist hierarchisch gestaltet und diese Struktur spiegelt sich
in der Administration ebenfalls wider.
Im Grunde richtet sich die Administrationsoberfläche an der späteren Webseitenstruktur
aus. Somit wird es möglich, Inhalte – wie zum
Beispiel Bilder und Dokumente – dort abzulegen, wo diese verwendet werden. Zur Verdeutlichung zeigt das Bild 1 die logische Struktur des
Systems. Wie hier deutlich wird, besitzt jede
Ebene eine eigene Bibliothek für Bilder, Dokumente, Berechtigungen und natürlich für weitere Unterebenen. Diese Struktur wächst später
dynamisch mit der konkreten Webseitenstruktur mit.
Die Struktur verbietet aber nicht die Verwendung von Medien aus anderen Ebenen, dies ist
ohne Beschränkung möglich. Neben den dynamischen Ebenen und deren Bibliotheken für Bilder und Medien existieren einige Systembibliotheken. Innerhalb von Systembibliotheken werden Inhalte und Informationen gespeichert, die
keiner Ebene direkt zugeordnet werden können. So verwaltet zum Beispiel die Bibliothek
Seiten- und Webvorlagen die verschiedenen Rahmen- und Seitenlayouts. Weiterhin stehen unter
anderem eigenständige Bibliotheken für CSS/
JS-Dateien und layoutspezifische Bilder bereit.
2/2014

Diese Daten sowie alle dynamischen Inhalte werden in einer Datenbank gespeichert. Abhängigkeiten zum Dateisystem sind nicht vorhanden. Das erleichtert die Einrichtung des Systems, da keinerlei Zugriffsrechte auf das Dateisystem benötigt werden. Somit beschränkt sich
das Backup- und Recovery-Szenario auf die Sicherung der Datenbank. Auch Umzüge auf eine
andere Serverhardware sind einfach möglich.
Weiterhin erlaubt diese Architektur die Realisierung von Hochverfügbarkeitsszenarien, indem
zum Beispiel der SQL-Server über Log-Shipping
gespiegelt wird (Bild 2).
Auf der Web-Frontend-Seite kann eine zusätzliche Lastverteilung erreicht werden, indem
mehrere Webserver zum Einsatz kommen. Da
das Jano-CMS auf dem .NET Framework beruht, kommt in diesem Fall der MS Internet Information Server (IIS) ins Spiel.

Hosting von Jano-CMS auf
Azure-Servern (Bild 3)

Cloud-Server (Microsoft Azure)
Das CMS kann wahlweise sowohl auf Servern
innerhalb der eigenen Infrastruktur als auch bei
einem Hosting-Provider auf Windows-Servermaschinen betrieben werden. Weiterhin ist das
CMS auch cloudkompatibel und kann problemlos auf virtuellen Windows-Azure-Maschi- ▶
Azure-Skalierung (Bild 4)

109

backend

Jano-CMS: Dashboard (Bild 5)
nen installiert werden. Bild 3 zeigt dazu eine
mögliche Konfiguration.
Bei der Verwendung von Azure-Servern ist lediglich zu beachten, dass die Server in der gleichen Region angesiedelt sind. Ansonsten entsteht unnötiger Netzverkehr, der sich negativ
auf das Antwortzeitverhalten der Webseite auswirkt. Der Vorteil dieser Variante besteht im reduzierten Administrationsaufwand und in der
leichten Skalierbarkeit.
Zu Beginn kann das CMS in der StandardWebsite-Variante betrieben werden. In dieser
Konstellation steht eine Maschine mit den folgenden Kenndaten zur Verfügung:
■ 1 CPU,
■ 1,75 GByte RAM.
Zu Beginn reicht diese Systemkonfiguration
aus. Steigt die Anzahl der gleichzeitigen Webseitenbenutzer, muss eventuell entsprechend
skaliert werden.
Dies ist im Azure-Portal über die Adminis­
trationsoberfläche (Bild 4) relativ einfach möglich. Dabei ist allerdings zu beachten, dass eine leistungsfähigere Maschine zusätzliche Kosten verursacht.

Administration

Dateien im Wurzelverzeichnis
des IIS (Bild 6)

110

Bild 5 zeigt die Einstiegsseite – das sogenannte Dashboard – der Administration. Im oberen
Bereich befinden sich mehrere Kacheln (Links)
zu den wichtigsten Funktionen. Im unteren Be-

reich gibt es eine Übersicht über Seiten, die sich
derzeit in irgendeinem Bearbeitungsprozess
(Workflow) befinden.
Die angezeigten Elemente sind abhängig vom
aktuell angemeldeten Benutzer und seinen Berechtigungen. Darüber hinaus gibt es auf der
rechten Seite eine kleine Statistik über Seitenzugriffe und zu den verwendeten Browsern.
Über die linke Navigation können alle Bibliotheken und Einstellungsseiten aufgerufen werden. Wie feststellbar ist, gliedert sich die Navigation in die beiden Hauptbereiche ALLGEMEINE VERWALTUNG und EBENE VERWALTEN.
In der Erstgenannten finden sich alle Bibliotheken wieder, die unabhängig von einer konkreten
Ebene verwaltet werden können. Ebenso werden hier alle globalen Systemeinstellungen verwaltet.
Der zweite Bereich enthält alle Bibliotheken
und Einstellungen, die jeweils zu einer Ebene
gehören. Unter dem Bereich Konfiguration und
Einstellungen finden sich die allgemeinen Einstellungsmöglichkeiten, die Sprachverwaltung
sowie erweiterte Systemeinstellungen. Innerhalb der Systemeinstellungen werden zum Beispiel SMTP-Serverinformationen, Twitter-Account- sowie Facebook-Account-Informationen
verwaltet.
Unter Sicherheit und Benutzer befindet sich
derzeit nur ein Punkt Benutzer, hier werden alle
Benutzer verwaltet. Über Nachrichten können alle Nachrichten eingesehen werden, die zum Beispiel über ein Kontaktformular gesendet wurden. Der Bereich Layouts und Ressourcen enthält
alle wesentlichen Bibliotheken für die Ablage
von Layout-Informationen für Rahmen- und
Seitenvorlagen.
Der letzte Punkt Systembibliotheken ermöglicht
die Verwaltung von CSS- und JavaScript-Dateien, Gadgets und Übersetzungsbeschriftungen.
Wie diese einzelnen Bibliotheken zusammenspielen, wird im weiteren Verlauf deutlich. Die
verfügbaren Punkte innerhalb der linken Navigation sind wiederum von den Berechtigungen
des aktuell angemeldeten Benutzers abhängig.

Einrichten einer Seite
Nachdem die Administration kurz überflogen
wurde, geht es nun darum, eine neue Web­seite,
basierend auf dem Jano-CMS, zu realisieren. Die
Vorbereitung des Webservers ist relativ schnell
erledigt.
Da das Jano-CMS auf dem .NET Framework
basiert, wird der Webserver mittels Copy and
Paste mit den notwendigen DLLs (Binaries) und
statischen Dateien versorgt. Das heißt: Steht ein
neues Web im IIS bereit, werden die Jano-CMSDateien (DLLs, CSS/JS et cetera) in das Stammverzeichnis des Webservers kopiert (Bild 6).
2/2014

backend
Listing 1: Datenbank-Konfiguration
<add name="CMSDBContext" providerName="System.Data.SqlClient" connectionString="Data Source=SERVERNAME;Initial
Catalog=DBNAME;User ID=CMS;Password=PASSWORT" />
<add name="CMSDBUserContext" providerName="System.Data.SqlClient" connectionString="Data
Source=SERVERNAME;Initial Catalog=DBNAME;User ID=CMS;Password=PASSWORT" />

Anschließend muss die Datenbank vorbereitet werden. Derzeit steht dafür ein SQL-Skript
bereit, das die notwendigen Datenbankobjekte
und initialen Daten bereitstellt. Am einfachsten
kann das Skript direkt im Microsoft-SQL-Server-Managementstudio geöffnet und auf einer
bestehenden Datenbank ausgeführt werden. Je
nach Umgebung werden allerdings noch weitere Datenbankobjekte für die Verwaltung von Benutzerdaten und Berechtigungen benötigt. Soll
Jano-CMS die Rollen und Benutzer selbst verwalten, muss das zusätzliche Skript jano-cmsmembership.sql ausgeführt werden. Dieses installiert die notwendigen Objekte für die interne Benutzerverwaltung. Die Installation kann
in der gleichen oder in einer separaten Datenbank erfolgen.
Alternativ kann auch der eingebaute Provider für die Benutzerverwaltung durch einen eigenen – der dann zum Beispiel ein vorhandenes
Active Directory oder andere Verzeichnisdienste nutzt – ausgetauscht werden. Nach dem erfolgreichen Anlegen der Datenbank beziehungsweise Datenbanken müssen innerhalb der web.
config-Datei – diese befindet sich im Wurzelverzeichnis des zuvor eingerichteten Webs im IIS
– die Verbindungsinformationen an die Umgebung angepasst werden. Für jede Verbindungszeichenfolge sind die Werte für Data Source, Initial Catalog, User ID und Password anzupassen,
so, wie es auch im Listing 1 ersichtlich ist.
Ist dies erfolgt, kann die Jano-CMS-Login-Seite über den URL http://[DOMAIN]/account/login
aufgerufen werden. Im Gegensatz zu anderen
Systemen existiert zunächst kein einziger Benutzer-Account. Der erste Benutzer, der sich registriert, wird automatisch zum Systemadministrator und hat somit alle Berechtigungen im
System. Nach erfolgreicher Erstanmeldung werden die Administrationsoberfläche geladen und
das Dashboard angezeigt. Um die Erstkonfiguration zu erleichtern, werden im oberen Bereich
des Dashboards (Bild 7) Hinweise zu notwendigen Konfigurationsschritten eingeblendet.

Sprachen und Vorlagen
Der erste und einfachste Schritt besteht darin,
die Sprachen einzustellen, die von der Webseite
inhaltlich unterstützt werden sollen. Dazu kann
am einfachsten der Link in der entsprechenden
Meldung im oberen Dashboard-Bereich ange2/2014

wählt werden.
Daraufhin wird
die
Sprachenverwaltung geladen. Über die
Schaltfläche Neuer Eintrag muss
nun mindestens
­eine Sprache angegeben werden.
Dabei ist zu beachten, dass nur
­eine Hauptsprache möglich ist
(Bild 8).
Alle weiteren
Sprachen sind sogenannte Sprachvarianten der
Hautsprache. Soll die Webseite nur einsprachig
betrieben werden, kann nach der Einrichtung
einer Sprache die Sprachunterstützung deaktiviert werden. Den entsprechenden Punkt dazu
findet man in dem Bereich Konfiguration und Einstellungen. Über die Checkbox Mehrsprachigkeit
aktivieren wird die Sprachenunterstützung gesteuert. Als Nächstes muss die erste Ebene angelegt werden, da ansonsten noch keine Webseite aufrufbar ist. Den entsprechenden Link dazu findet man ebenfalls auf dem Dashboard im
oberen Bereich.

Das Dashboard mit Hinweisen
zur Einrichtung (Bild 7)

Anlegen einer neuen Ebene
Bild 9 zeigt den Dialog für die Anlage einer neuen Ebene. Auf der ersten Registerkarte sind zunächst die Werte für Name, URL Bezeichnung und
Einbeziehung in die Navigation von Bedeutung.
Auf der Registerkarte Darstellung muss festgelegt werden, welches
Layout für die übergreifende und welches für die Detaildarstellung
verwendet
werden soll. Da bisher
keine eigenen Layouts
erstellt worden sind,
kann hier derzeit nur
eines der eingebauten
Layouts ausgewählt
werden. Sind all diese
Angaben getätigt worden, kann die neue
Ebene über Submit ▶

Festlegung der Standardsprache (Bild 8)

111

backend

Einrichtung einer Ebene (Bild 9)

Seite im Standard-Layout (Bild 10)
angelegt werden. Ist die erste Ebene erfolgreich
erstellt worden, findet man in der Seitenbibliothek einen ersten Seiteneintrag. Mit einem Klick
auf den Link in der gleichnamigen Spalte wird
die Seite im Browser geladen und im Standardlayout angezeigt (Bild 10). Da bisher für diese Seite noch keine erste Version existiert, zeigt das
CMS die Vorschau der Seite an. Über die entsprechenden Schaltflächen kann die Seite in den
Bearbeitungsmodus geschaltet werden und lassen sich Inhalte bearbeiten.

Listing 2: Minimale Rahmen-Vorlage (HTML)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
... ausgelassen ...
@Html.Partial("_Globals")
@*For all user - specific CMS Layout *@
@Html.CSSForAuthenticatedUser("~/Content/css")
@Html.CSSForAuthenticatedUser("~/Content/admin/coreCSS")
@Html.CSSForAuthenticatedUser("~/Content/redactor/css")
@* Main javascript file - core - *@
@Html.JSForAuthenticatedUser("~/bundles/cmscoreinit")
@Html.JSForAuthenticatedUser("~/bundles/redactor/js")
@* Specific frontend functions *@
@Scripts.Render("~/bundles/cmsfrontend")
</head>
<body>
<div>
<section>
@Html.Action("MainMenu", "Menu")
@using (Html.BeginForm())
{
@Html.Partial("_PageVersionInfo")
@Html.Partial("_AdminConsole")
@RenderBody()
}
</section>
<footer>
<small>jano-CMS - minimales Rahmenlayout</small>
</footer>
</div>
</body>
</html>

112

Die Erstkonfiguration ist somit abgeschlossen. Jetzt geht es darum, zu erläutern, wie das
bestehende Layout an eigene Bedürfnisse angepasst werden kann. Als Erstes soll das Rahmenlayout ein wenig verändert werden. Dazu muss
wiederum die CMS-Administration aufgerufen
und der Punkt Vorlagen verwalten in der Kategorie Layouts und Ressourcen angesteuert werden.
Über die Schaltfläche Neue Rahmenvorlage wird
zunächst eine vollständige neue Rahmenvorlage angelegt. Im ersten Register müssen der Name sowie optional eine Beschreibung der Vorlage hinterlegt werden. Das eigentliche (HTML-)
Layout findet man auf dem zweiten Register
Vorlage (Bild 11). Um die Erstellung zu erleichtern, ist dort bereits eine minimale HTML-Struktur mit den wichtigsten CMS-Steuerelementen
eingefügt (Listing 2).

Layoutanpassungen
Im oberen Listing ist die HTML-Struktur der
minimalen Rahmenvorlage zu erkennen. Die
HTML-­Struktur kann flexibel angepasst werden
und unterliegt keinerlei Beschränkungen. Einige Referenzen und Steuerelemente müssen jedoch auf der Vorlage zwingend vorhanden sein,
da ansonsten nicht alle Funktionen auf der Seite bereitstehen. Dazu gehören auch die verlinkten CSS- und JavaScript-Ressourcen, die über
JSForAuthenticatedUser beziehungsweise CSSForAuthenticatedUser eingebunden wurden. Zu
den wesentlichen Steuerelementen gehören die
beiden folgenden:
■ @Html.Partial("_PageVersionInfo"),
■ @Html.Partial("_AdminConsole").
Das erste Element ist für die Ausgabe der Seiteninformationen zuständig, das zweite für die
Bereitstellung der Aktionsschaltflächen und
das Aktionsmenü. Fehlen diese Elemente, kann
die Seite nicht in den Bearbeitungsmodus geschaltet werden. Neben den CMS- spezifischen
Steuer­elementen stehen noch weitere bereit. Dazu zählen unter anderen der Login-Bereich, die
Haupt-Navigation, die Kontext-Navigation und
das Seiten-Logo.
2/2014

backend
Diese können über die Auswahlliste Steuerelement einfügen einfach eingearbeitet werden. Eigene CSS- und JavaScript-Dateien lassen sich
über die linken Auswahllisten dem Layout hinzufügen. Zuvor müssen jedoch noch eigene JS/
CSS-Dateien im System hinterlegt werden.
Nachdem das CSS eingefügt wurde, wird das
erste div-Tag nach dem body um ein id-Attribut
mit dem Wert MainContent erweitert. Anschließend kann der Dialog über die Schaltfläche Submit verlassen werden. Um nun das neue Layout in Aktion zu sehen, muss innerhalb der Ebenenkonfiguration die Layoutdarstellung auf das
neue Layout gewechselt werden.
Wird die Seite im Browser erneut aufgerufen,
sind die Änderungen direkt sichtbar. Wie anhand dieses Beispiels deutlich wurde, hat der
Webdesigner die vollständige Kontrolle über
das HTML und kann dieses frei gestalten. Weiterhin sind aber auch einige Standardvorlagen
vorhanden, die ohne HTML-Kenntnisse direkt
verwendet werden können.

Seitenvorlagen
Zum Abschluss soll noch eine neue Seitenvorlage erstellt werden. Dazu ist wieder der Bereich
Vorlagen verwalten aufzurufen. Für die Neuanlage einer Seitenvorlage ist die Schaltfläche Neue
Seitenvorlage verantwortlich. Der Anlageprozess
ist vergleichbar mit der Neuanlage einer Rahmenvorlage. Unterschiedlich ist jedoch die Definition des Layouts. Auf dem Register Vorlage
befindet sich nun ein erweiterter Editor (Bild 12)
anstelle einer reinen Textfläche. Eine Vorlage
besteht in der Regel aus einer HTML-Struktur
und Platzhaltern für dynamische Inhalte. Das
Jano-CMS verwendet Feldsteuerelemente als
Platzhalter für Inhalte. Diese können der Vorlage über die rechte Toolbar-Schaltfläche hinzugefügt werden. Es stehen verschiedene Feldsteuerelemente bereit, die sich in unterschiedlicher
Weise auf der Seite im Bearbeitungsmodus darstellen, wie später zu erkennen ist. Das Listing 3
zeigt ein einfaches Beispiel einer Seitenvorlage.
Nachdem die neue Vorlage im System gespeichert wurde, kann diese für neue oder beste-

hende Seiten verwendet werden. Für einen Test
kann nun die Startseite der neuen Webseite aufgerufen werden.
Zunächst muss die Seite über die Schaltfläche
Seite bearbeiten in den Bearbeitungsmodus geschaltet werden. Auf der rechten Seite ist dann
über die Auswahlliste Vorlage der Wechsel zu einer anderen Seitenvorlage möglich. Die neue
Vorlage enthält jetzt alle definierten Platzhalter.
Wie hieran auch gut erkennbar ist, besitzt jeder
Platzhalter unterschiedliche Funktionen. Neben
den hier verwendeten stehen noch weitere für
zum Beispiel Bilder, Dokumente, Links, TwitterMeldungen et cetera bereit. Auf gleiche Art und
Weise werden auch Online-Formulare mit den
dazugehörigen Feldsteuerelementen realisiert.

Anlegen eines Rahmenlayouts (Bild 11)

Links zum Thema
Weitere Informationen über
das Jano-CMS
▶ www.jano-cms.net
Windows-Azure-Portal
▶ www.windowsazure.com

Fazit
Auch wenn das Jano-CMS ein noch recht neues CMS ist, besitzt es schon reichhaltige Funk­
tionen und Erweiterungsmöglichkeiten. Die Installation erfordert derzeit noch ein wenig Windows-Server-Know-how, was sich aber in Grenzen hält. Durch die Ablage aller Inhalte in einer Datenbank sind Datensicherungen schnell
und einfach möglich. Dank der offenen Schnittstellen und Erweiterungsmöglichkeiten können
neue Funktionen relativ schnell umgesetzt und
eingebunden werden.
[mb]

Verwendung der neuen
Seitenvorlage (Bild 12)

Listing 3: Seitenvorlage 
<h2>
@Html.SingleTextBox("Headline")
</h2>
<h3>
@Html.DateTextBox("DateOfPost")
</h3>
<div>
@Html.RichTextBox("Content")
</div>

2/2014

113

backend
Combit List & Label 19 – Reportgenerator

Mehr als 1000 Worte
Im neuen List & Label 19 visualisieren Sie Geodaten mit (eigenen) Shapefiles und gestalten Berichte
mit Sammel- und Berichtsparametern flexibel. Von Andreas Maslo

Autor

Dipl.-Ing. Andreas Maslo
leitet das Ingenieurbüro IngES,
das sich mit der Erstellung von
EDV-Publikationen und der Software-Entwicklung befasst. Er ist
als freier Journalist, Herausgeber, EDV-Berater, Fachbuchautor, Entwickler und Redakteur
tätig.
Inhalt
Combit List & Label 19 – Reportgenerator.

Die Designerfunktionalität ist in
lokalen und Webanwendungen
nutzbar (Bild 1)

114

S

ie bestimmen in jedem Programm, das Daten verwaltet, auch, wie diese Daten intern
verarbeitet, gespeichert, zusammengefasst und
berechnet werden. Ferner legen Sie in Ihren Programmen fest, wie die Daten aufbereitet, ausgegeben, verteilt oder auch ausgedruckt werden. Dabei spielen eine leichte Handhabung der
Anwendung und die Übersichtlichkeit der Daten eine herausragende Rolle, wobei die Daten
wahlweise über die lokale oder eine Webanwendung eingegeben, automatisiert über das Web
bezogen und optional in lokalen oder entfernten Datenbanken abgelegt werden.

Berichte verwenden
In Berichten werden Zahlen übersichtlich zusammengefasst, durch eine Filterung bereinigt,
selektiert, sortiert und gruppiert. Zahlenwüsten haben in der Regel weniger Aussagekraft als
die Ergebnisse statistischer Berechnungen. Und
statistische Berechnungen lassen sich wiederum
anschaulicher mit Geschäfts- und Präsentationsgrafiken visualisieren.
Über Diagramme erfassen Sie Ergebnisse einfach und heben bestimmte Werte hervor, ohne
die zugrunde liegenden Daten im Detail selbst
auszuwerten. Bei der Datenverteilung benötigen Sie nicht nur sinnvolle und gängige Exportformate, sondern auch einfach zu handhabende
Verteilungs- und Ausgabefunktionen.
Prinzipiell definieren Sie selbst in eigenen
Programmen Berichte, Diagramme, Grafiktypen und Druckerausgaben. In den Berichten berechnen Sie aus vorhandenen Daten neue Werte

oder filtern unwichtige Daten heraus. Doch was
tun, wenn Sie die Ausgaben selbst flexibel gestalten wollen, und zwar so, dass der Anwender
Berichte nicht nur erzeugen, einsehen und ausgeben, sondern auch im Detail und bezogen auf
die Inhalte, die verwendeten Diagramme und
Diagrammtypen sowie die Ausgabeformate ändern und manipulieren soll?
Dann bietet es sich an, eine vorgefertigte, leistungsfähige Komponente für den Berichtsentwurf und die Integration von Berichtsfunktionen in eigenen Anwendungen zu nutzen, die
alle benötigten Anforderungen bereits abdeckt
und eine Komponente für den Entwurf und die
Bearbeitung von Berichten beinhaltet.
Der leistungsfähigste Berichtsgenerator, der
all die zuvor genannten Funktionen bietet, ist
List & Label. Das Produkt liegt mittlerweile in
Version 19 vor und bringt in dieser viele neue
Funktionen und Verbesserungen mit.

Systeme und Sprachen
List & Label adressiert ausschließlich die Windows-Plattform und kann wahlweise in lokalen
oder Webanwendungen per Verweis und über
sprach- beziehungsweise plattformspezifische
Komponenten integriert werden (Bild 1).
In lokalen Anwendungen erhalten Sie über
die Komponente Zugriff auf den Berichtsdesigner sowie die Vorschau-, Druck- und Exportfunktionen. Ferner greifen Sie alternativ über eine Programmierschnittstelle auf Quelltextebene
auf die Komponente und deren Funktionalität
zu. Über den Designer arbeiten Sie und der Programmanwender interaktiv mit dem Berichtsgenerator.
Mit spezifischen Quelltextanweisungen nutzen Sie auch im Hintergrund Berichtsfunktio­
nen und führen bestimmte Aktionen durch.
Webanwendungen werden serverseitig verwaltet. Hier werden die Funktionen für eine Vorschau, den Druck und den Export über die List
& Label-Komponente entfernt verarbeitet.
Lokal interagiert der Webbrowser mit dem
Webserver über List & Label und eine zugehörige Webdesigner-Komponente, die die Designerfunktionalität in gängige Webbrowser (zum
Beispiel Firefox, Chrome und Internet Explorer) integriert.
2/2014

backend
List & Label arbeitet bereits mit den
neuen Entwicklungsumgebungen RAD
Studio XE5 sowie Visual Studio 2013 zusammen (Bild 2), kann aber auch mit deren Vorgängern, mit programmierbaren Datenbanken (zum Beispiel Access),
Skriptsprachen (zum Beispiel VBA, LotusScript) sowie nicht mehr weiterentwickelten Programmiersystemen (zum Beispiel Visual Basic 6.0) verwendet werden.
Für COM-basierte Entwicklungssysteme stehen ActiveX-Komponenten für
die Anbindung bereit. .NET-Sprachen
greifen ihrerseits über .NET-Komponenten sowie Steuerelemente der Windows
Forms auf den Berichtsgenerator zurück,
die über das WindowsFormsHost-Steuer­
element auch in WPF-Anwendungen eingebettet werden können. Spezielle Komponenten
für moderne Anwendungen, die über den Windows App Store bereitgestellt werden, stehen
derzeit allerdings nicht zur Verfügung.
Für Delphi gibt es eine angepasste VCL-Komponente. Per JNI (Java Native Interface) wird die
Komponente an Java gebunden. Für alle Programmiersprachen, für die keine spezialisierten Komponenten bereitstehen, nutzen Sie die
Funktionalität über eine gesonderte DLL und
zugehörige API-Deklarationen. Deklarationsdateien liegen für eine große Anzahl von Sprachen
vor. Für nicht direkt unterstützte Sprachen definieren Sie die benötigten Deklarationsanweisungen – sofern diese Sprachen API-Aufrufe unterstützen – auch selbst.
Prinzipiell gilt: Insbesondere ältere Entwicklungssysteme müssen Sie unter Windows 8 und
8.1 gezielt im Administratormodus ausführen
(zum Beispiel Access, VB6), da ansonsten Fehler bei der Ausführung der mitgelieferten Beispielanwendungen auftauchen, die auf einen
Schreibschutz der Systemregistrierung hinweisen. In Visual Studio 2013 erhalten Sie mitunter
einen Hinweis auf ein unbekanntes .NET Framework. Um diesen Hinweis auszublenden,
markieren Sie im zugehörigen Dialog das
Kontrollfeld In Zukunft nicht mehr anzeigen und bestätigen mit OK.
Würden Sie eine eigene Komponente
ausschließlich für die von Ihnen verwendete Entwicklungsplattform und Programmiersprache umsetzen, unterstützt
List & Label alle gängige Entwicklungssysteme und Programmiersprachen. Sie
haben somit den Vorteil, dass Sie die
Hauptfunktionalität auch dann weiterhin zur Verfügung haben, wenn Sie später das Entwicklungssystem oder aber
die Programmiersprache wechseln. Die
wichtigsten Funktionsmerkmale von List
& Label stellt Tabelle 1 zusammen.
2/2014

Der Berichtsgenerator ist in den Editionen
Standard, Professional und Enterprise verfügbar:
■ Standard: Diese Edition liegt als reine 32-BitKomponente vor. Sie bietet einen integrierten
und frei verteilbaren Berichtsdesigner mit zugehöriger und ebenfalls verteilbarer Dokumentation und unterstützt die Definition, das
Bearbeiten, das Verteilen und Ausdrucken von
Berichten. In Berichten kann mit Formeln, einer Vielzahl an Diagrammen, aber nur mit einem einzelnen Berichtsparameter gearbeitet
werden. Bereits diese Version unterstützt alle Entwicklungsumgebungen und Programmiersprachen. Mit einem gesonderten Konverter sind Berichte von Crystal Reports (VS2010)
überführbar.
■ Professional: Diese Edition bietet neben der 32Bit- auch eine 64-Bit-Unterstützung an. Sie beinhaltet alle Funktionen der Standardkomponente. Außerdem stehen erweiterte Barcodes
(Balken- oder Strichcodes) bereit. Ein DOMModell erlaubt es, Projekte nicht nur ohne Designer zu erzeugen, sondern auch zu verändern.
Die Anzahl der unterstützten Berichtsparameter in den Berichten ist nicht limitiert.

List & Label 19 integriert
sich in die Entwicklungsumgebung von Visual Studio
2013 (Bild 2)

Mit dem Designer enwerfen Sie
Layouts, füllen diese mit Daten
und exportieren und drucken
die Ergebnisse aus (Bild 3)

115

backend
Tabelle 1: Grundlegende Informationen zu List & Label 19
Funktion

Beschreibung

Information

Systemplatt­
formen

Windows

Windows 8/8.1, Windows 7, Windows Vista, Windows 2000, Windows Server
2008, Windows Server 2003

Sprachunter­
stützung

Alle gängigen Win32/64- (COM) und .NET-Programmiersprachen und Entwicklungssysteme

Access, Alaska XBase++, C++ Builder, Centura, Clarion, Cobol, dBase plus,
Delphi, Excel, Gupta SQL, Java, Lotus Script, .NET-Sprachen (VB.NET, C#), Ord,
PHP, PowerBuilder, Progress, Python, Toolbook, Visual Basic, Visual C++, Visual
DataFlex, Visual FoxPro, Visual Objects, Prism

Komponenten

Sprachspezifische Entwicklungskomponenten
zur vereinfachten Anbindung von List & Label

.NET (C#, VB.NET), dBase Plus, Delphi/C++ (VCL), JNI-DLL (Java), ActiveX/
COM, DLL und API (mit sprachspezifischen Deklarationsdateien), Webdesigner-Control für IE, Firefox und Chrome

Dokumentation

Designerhandbuch (373 Seiten) und Programmierreferenz (circa 434 Seiten)

Handbücher im Buchformat, Online-Hilfe, frei verteilbares und bearbeitbares
Designerhandbuch

Diagrammtypen

Viele Diagramme in 2D-/3D-Varianten unter anderem mit Farbmanipulation, Animationseffekten, Funktionen
zum Stapeln / Staffeln / Gruppieren,
Beschriftungsfunktionen, Rotation, logarithmischer Skalierung, x-/y-Achsenbearbeitung,
Designthemen/-schemas

Balken/Band, Kreis, Ring, Kegel, Oktaeder, Linien, Trichter, Flächen, Blasen
(vierdimensional), Mischgrafiken (Balken und Linien), Cockpit-Grafiken und
Messinstrumente (Tachometer, Thermometer mit Glaseffekten, variablen Anzeigen und Nadelstilen), zeitleistenbasierte Gantt-Diagramme, Shapefile-Grafiken (Geodatenvisualisierung nur in der Enterprise-Edition)

Datenformate

Berichte lassen sich in Dokument- und alle
gängigen Grafikformate exportieren

PDF, HTML, MHTML, XHTML/CSS, XML), RTF, EMF, TIFF, Multi-TIFF, JPEG, PNG,
BMP, WMF, PCX, DIB, SVG,TTY, Excel (XLS/XLSX), XPS, JQM, Word (DOCX), CSV,
ZIP-Archivdateiformat, Grafik, Windows Fax, jQuery Mobile HTML Export, List &
Label-Vorschaudateien (für kostenlosen Viewer)

Datenquellen

Über gesonderte Datenprovider werden Datenquellen mit List & Label verbunden

SQL Server, Oracle, OLE DB, ODBC, ADO.NET, XML, LINQ, JSON, MySQL, Business-Objekte, ORM/EF, OData, NuoDB, SQLite, PostgreSQL, DB2, NoSQL, gemischte Datenquellen, CSV (Comma Separated Values), REST, per VCL (ADORecordset, BDE, TdataSource-basierte Datenquellen)

Formeln und
­Parameter

Mit Formeln und Paramatern führen Sie in
Berichten Berechnungen und Auswertungen
durch und gestalten interaktive Berichte

Berichtsparameter, Summen-, Benutzer- und Sammelvariablen, über 180 integrierte Funktionen, 20 Operatoren, Formeln, Bedingungen, Filter

Barcodes

Mehr als 50 Barcodes

Alle Editionen: Code 11, Code 93, Code 128, Deutsche Post Identcode/Litecode, GTIN 8, EAN 8, UCC-8, GTIN 13, GTIN 13, UCC-13, German parcel,
ISBN, MSI, Pharma Znetral Nummer (PZN), Royal Mail, US-Postnet und andere;
ab Professional: PDF417, Maxicode, DataMatrix, Aztec, QR-Code, Deutsche
Post Premiumadresse

Besonderheit

Designer und Webdesigner

Mit dem Designer lassen sich alle Ausgaben entsprechend einem DTP-Programm (Desktop Publishing) frei variieren und nachbearbeiten; per Webdesigner wird der Online-Berichtsentwurf in gängigen Webbrowsern unterstützt

Preise (Brutto)

Enterprise-Edition

2142 Euro (Erstjahr), 1071 Euro (Folgejahr)

Professional

1428 Euro (Erstjahr), 714 Euro (Folgejahr)

Standard

773,50 Euro, 464,10 Euro (Update)

Volumenlizenzen

Für alle Versionen verfügbar

116

2/2014

backend
■ Enterprise: Die Enterprise-Edition bietet alle

Leistungsmerkmale der Professional-Variante. Die erweiterten Funktionalitäten liegen bei
dieser Edition im Web (Windows Azure, Amazon Web Services, Cloud Computing) und in
einem verbesserten Support. Darüber erhalten
Sie zudem Subscription-basiert Informationen
zu Nachfolgeversionen, frühen Zugriff auf die
Betas der Nachfolgeversionen sowie vergünstigte Schulungen. Die Enterprise-Edition ist zudem die einzige Edition, die das Definieren
von Diagrammen über Shapefiles für die Geovisualisierung erlaubt und außerdem die Einbindung des Formelassistenten in eigenen Anwendungen unterstützt. Sie bietet eine unlimitierte Anzahl an Server-/Webserver-Lizenzen.

Datenanbindung und Datenauswertung
Die Daten, die Sie in List & Label auswerten,
übergeben Sie direkt oder aus allen bekannten Datenquellen und Datenbanken über sogenannte Datenprovider (zum Beispiel Ado­
Data­Provider, DataSource, ObjectDataProvider,
­OleDbConnectionDataProvider, OracleConnectionDataProvider, SqlConnectionDataProvider,
XmlDataProvider).
Über den Datenprovider DataProviderCollection führen Sie die Dateninhalte mehrerer getrennter Datenprovider in nur einer Datenquelle
zusammen. Mit einem neu eingeführten RESTDatenprovider (Representational State Transfer)
binden Sie Daten ein, die protokollbasiert über
Webanfragen zurückgeliefert werden.
REST findet Anwendung in CMS-Systemen,
Webanwendungen sowie webbasierten Datenbankapplikationen. Der ebenfalls neu eingeführte OData-Datenprovider macht Internetdaten, die auf dem Open Data Protocol basieren,
für List & Label verfügbar.
OData ist ein auf HTTP basierendes Protokoll,
das den Zugriff auf Daten zwischen kompatiblen (aber nicht identischen) Software-Systemen
erlaubt. OData wurde von Microsoft entwickelt
und kommt beim Cloud Computing und den
Azure-Cloud-Diensten zum Einsatz. Der zugehörige Datenprovider erlaubt die Verwendung
von Daten aus Visual LightSwitch.

Auch Messinstrumente und Cockpit-Anzeigen nehmen Sie in Berichte auf (Bild 4)
der Vorschau mit den zugrunde liegenden Echtdaten (Bild 3).
Um Berichte aufzubauen, stehen diverse Entwurfsobjekte bereit, wie Text-, Bild-, Barcode-,
RTF-Text-, Formular-, HTML- oder auch PDFObjekte. Auch die OLE-Container-Objekte gängiger und registrierter Anwendungen (zum Beispiel der Office-Anwendungen) platzieren Sie
auf Wunsch in die Berichte. Das Aussehen und
Verhalten der Objekte passen Sie im Designer
per Eigenschaftenfenster an.
Einzelne Objekte lassen sich optional in Objektgruppen zusammenfassen und so vereinfacht in mehreren Berichten wiederverwenden.
Änderungen, die Sie später zentral an der Objektgruppe vornehmen, haben direkte Auswirkung auf die Berichte, in die eine Objektgruppe platziert wurde. Die Berichtsstruktur wird
hierarchisch verwaltet. Entsprechend wer- ▶

Mit dem frei verteilbaren Viewer
geben Sie Berichte ohne zusätz­
liche Anwendung aus (Bild 5)

Designer und Viewer
Ein Kernelement von List & Label ist der mitgelieferte und in Anwendungen ohne zusätzliche
Lizenzgebühren frei verteilbare Designer. Der
Designer entspricht einem komfortablen DTPProgramm (Desktop Publishing), mit dem Sie
Listen, Etiketten oder auch Karteikarten frei gestalten. Über den Designer platzieren Sie die einzelnen Elemente einer Datenquelle in ein Entwurfslayout und füllen dieses Layout dann in
2/2014

117

backend

Mehr Übersicht: Teilinhalte von
Berichten werden wahlweise
aus- und eingeklappt (Bild 6)

Links zum Thema
Homepage des Herstellers
▶ www.combit.net
Handbücher
▶ www.combit.net/reporting/
list-label-downloads#
Dokumentationen
Testversion
▶ www.combit.net/testversionlist-label
Produktfilme
▶ www.combit.net/reporting/
list-label-downloads#
Produktfilme

den auch Objekte, Ebenen
und Vorschauelemente zur
Direktanwahl zusammengestellt. In den Hintergrund
positionieren Sie gegebenenfalls Formularvorlagen. Berichte unterstützen mehrere
Ebenen, greifen auf Designschemas mit vorgegebenen
Farbgruppen zurück, unterstützen Bausteine und Abschnitte.
Daten werden über deren Feldbezeichnungen und
definierte Variablen hierarchisch verwaltet.
Sie werden per Drag and Drop in einen Bericht übernommen und fungieren im Layout als
Platzhalter. Neben vorgegebenen Datenfeldern
berechnen Sie auch neue Werte über Formeln,
bilden Summen oder führen Variablen benutzerdefiniert ein.
Auch diese Inhalte übernehmen Sie in einen
Bericht. Formeln bauen Sie vereinfacht per Formelassistent in einem Dialog auf. Ein Formatierungsassistent hilft Ihnen bei der Formatierung
von Werten. Werte geben Sie über Cockpitanzeigen und bearbeitbare Messinstrumente aus
(Bild 4). Optional statten Sie einen Bericht mit einem Inhaltsverzeichnis und einem Index aus.
Um den Designer an eigene Anwendungen
anzupassen, variieren Sie wahlfrei das Erscheinungsbild und die freigeschaltete Funktionalität. Sie blenden nicht nur bestimmte Fensterelemente aus, sondern sperren gezielt Menübefehle, Objekte oder auch Funktionen. Ferner erweitern Sie den Designer auch um neue, eigene
Funktionen, Objekte oder Aktionen. Beispiele,
wie Sie den Designer selbst erweitern und an eigene Bedürfnisse anpassen, werden anhand von
Beispielprojekten veranschaulicht.
Die mit List & Label erstellten Vorschaudateien werden unter dem Dateityp LL gesichert.

Mit Berichtsparametern filtern Sie die angezeigten Informationen in einem Bericht (Bild 7)

118

Die Dateien geben Sie optional auch über den
kostenfreien, auch an Dritte verteilbaren List &
Label Viewer aus. Der Viewer erlaubt den gezielten Zugriff auf alle, einzelne oder bestimmte Seiten, erlaubt das Blättern und Zoomen sowie das Suchen nach Begriffen in den angezeigten Berichten.
Ferner bietet der das Programm eine Exportfunktion für ausgewählte Dokument- und Grafikformate (PDF, TIF, TXT, EMF, JPG, PNG und
XPS) (Bild 5). Der Viewer selbst wurde gegenüber der Vorversion verbessert und mit einer
Multifunktionsleiste ausgestattet.

Interaktive Berichte
Berichte enthalten in der Regel sehr viele Informationen. Sie sind mitunter schwer zu durchschauen oder aufgrund des schlechten Entwurfs
kaum inhaltlich zu erschließen. Der Anwender
oder Entwickler, der einen Bericht gestaltet,
muss für die Übersicht sorgen.
Dies erreicht er durch eine sinnvolle Definition des Layouts. List & Label versucht zudem mit
neuen Zusatzfunktionen, das Erstellen von interaktiven Berichten zu vereinfachen. Dazu werden in Tabellen Funktionen bereitgestellt, über
die Sie Spalten durch einfache Anwahl der Spaltenköpfe umsortieren oder aber innerhalb von
Berichten mit wahlweise ein- und ausklappbaren Bereichen arbeiten (Bild 6).
Sammelvariablen sind neue Variablen, die
wie herkömmliche Benutzervariablen eingeführt werden. Benutzervariablen erlauben es,
Werte und Ausdrücke für eine spätere, mehrfache Verwendung zu sichern, wobei jede Benutzervariable einen eindeutigen Namen erhält und über Funktionen (zum Beispiel numerische, mathematische oder auch Datums- und
Zeichenkettenfunktionen), Operatoren sowie
Bedingungen aufgebaut wird. Sammelvariablen bieten gegenüber den Benutzervariablen eine erweiterte Funktionalität an.
Darüber fassen Sie Daten zusätzlich zusammen, ordnen die
Daten in Kategorien ein oder
versehen diese mit zusätzlichen Attributen, wobei Sie Bezug auf die Daten eines existierenden Datenbestands nehmen. Weiterhin bereitgestellt
werden die Summenvariablen,
über die Sie Summen über unterschiedliche Hierarchien einer Tabelle bilden.
Ebenfalls neu sind die Berichtsparameter. Erlaubt die
Standard-Edition lediglich die
Definition eines einzelnen Berichtsparameters in einem Be2/2014

backend
richt, so ist die Anzahl der Berichtsparameter in
den anderen Editionen in einem einzelnen Bericht nicht beschränkt. Berichtsparameter werden über einen Bezeichner eingeführt und über
Berichtsparameter bearbeitet. Per Dialog weisen Sie die Datenquelle, das Datenfeld, die Sortierung, einen Filter oder auch eine Formel für
den anzuzeigenden Wert zu (Bild 7).
Berichtsparameter platzieren Sie wie Felder in
Berichte. In Formeln setzen Sie die Berichtsparameter zudem wie herkömmliche Variablen ein.
Berichtsparameter können zudem voneinander
abhängig sein und stehen, da direkt über den
Designer definiert, auch beim Endanwender der
Anwendung zur Verfügung, die List & Label als
Komponente verwendet.
Shapefiles sind die Grundlage zur Visualisierung von Geodaten (Bild 9)

Neue Diagramme
Um Daten hervorzuheben oder zusammenzufassen, kommen Diagramme und Präsentationsgrafiken zum Einsatz. Neu in der Version 19
ist das Trichterdiagramm, mit dessen Hilfe Sie
Daten veranschaulichen, die einen trichterförmigen Wertezuwachs oder eine entsprechende
Werteabnahme haben.
Pipeline-Diagramme sind eine Sonderform
des Trichterdiagramms. Hier wird die relative
Breite des Trichteranfangs und des Trichterendes auf jeweils 100 Prozent gesetzt. Der Abstand
der Teilelemente kann dabei über die ExplosionsDistanz zum Trichterabschnitt variiert werden.
Im sich daraus ergebenden Diagramm werden Rechtecke mit unterschiedlichen Breiten
und gleicher Höhe nebeneinander gesetzt, wobei die Breite abhängig vom dargestellten Wert
ist. In den neuen Mischdiagrammen kombinieren Sie schließlich Balken- und Liniendiagramme, um über die Linien beziehungsweise Ausgleichsgrade bestimmte Werte oder auch Mittelwerte hervorzuheben (Bild 8).
Neu in List & Label 19 ist die Unterstützung
von Shapefiles (standardisiertes Vektorbeschreibungsformat, für zum Beispiel Landkarten, Sitzpläne mit Datenanbindung), über die Sie Geo­
daten visualisieren.
Diese Funktionalität steht ausschließlich in
der Enterprise-Edition zur Verfügung. Neben
vordefinierten Shapefiles (zum Beispiel Karten
der Welt und von Europa, Nordamerika, Asien,
Südamerika, Ozeanien) binden Sie auch benutzerdefinierte Shapefiles ein.
Shapefiles sind per Definition ein Verbund
aus mehreren Dateien, über die Geometriedaten, Sachdaten sowie ein Index definiert werden, der wiederum zur Verknüpfung der Geometrie- mit den Sachdaten genutzt wird. Hinzu
kommen optionale Dateien. Im Internet stehen
diverse Tools kostenfrei zur Verfügung, mit deren Hilfe Sie Shapefiles definieren (Bild 9).
2/2014

Fazit
List & Label überzeugt auch in der neuen Ver­
sion. Herausragend ist nicht nur die für die Enterprise-Edition bereitgestellte ­Unterstützung von
Shapefiles, sondern sind auch die in allen Editionen nutzbaren Berichtsparameter und Sammelvariablen, mit deren Hilfe Sie Berichte interaktiv gestalten.
Am Komfort, in der Stabilität, den Unmengen
an Beispielprogrammen sowie in der Bedienung
bleiben keine Wünsche offen. Bleibt abzuwarten, wie sich List & Label in der nächsten Version zeigen wird. Wird es echte Steuerelemente
für WPF und die moderne Oberfläche oder gar
moderne List & Label-Apps aus dem Windows
App Store geben?
[mb]
Zu den neuen
­Diagrammtypen
zählen die
­Trichter-, Ring-,
Pipeline- und
Mischdiagramme
(Bild 8)

119

backend
Diashow mit Web-Developer-Bordmitteln

Mit PHP und JavaScript
Es steht eine Feier oder eine Präsentation an und man möchte ein paar Fotos über den Beamer vorführen.
Allein – die passende Präsentations-Software fehlt. Von Timo Krotzky

D

Autor

Timo Krotzky
ist Diplom-Bioinformatiker und
am Institut für Pharmazeutische
Chemie der Uni-Marburg tätig.
Mit Web Development und der
Webserver-Administration beschäftigt er sich sowohl beruflich als auch privat.
Inhalt
Diashow mit Web-DeveloperBordmitteln.
Ressourcen
Die Listings zum Artikel finden
Sie auf www.webundmobile.de
in der Rubrik Aktuelles Heft.

ie in Windows integrierte Diashow-Funk­
tion erfüllt nicht die eigenen Anforderungen oder lässt sich nicht genug anpassen. Die
schnelle Suche nach einer geeigneten Software
gestaltet sich schwierig, weil sie sehr einfach zu
bedienen sein soll und darüber hinaus den eigenen Vorstellungen entsprechen muss.
Zum Glück kann man als Webentwickler aber
auch ohne großen Aufwand selbst eine schöne Diashow für den Browser implementieren.
Dazu braucht es nicht einmal Frameworks wie
jQuery, da man mit den Bordmitteln von PHP
und JavaScript problemlos auskommt. Natürlich könnte jQuery verwendet werden, um etwa Bilderwechsel durch ein Überblenden aufzupeppen. Der vorliegende Artikel soll sich aber
auf ein Minimalbeispiel beschränken.

Voraussetzungen
Voraussetzung für eine Diashow, die etwa noch
das Datum zu jedem Foto anzeigt, ist, dass diese
Daten auch einfach für ein Skript auslesbar sind.
In unserem Beispiel wurden alle Fotos in einer
Ordnerstruktur mit entsprechender Datumsbezeichnung abgelegt. Die Ordner haben dabei alle einen Namen im Format YYYY-MM-DD.
Alternativ ist natürlich auch ein Vorhalten des
Datums in den Dateinamen selbst denkbar, so
wie es viele Digitalkameras und Handys von
Haus aus tun. In unserem Fall spielt es aller-

dings keine Rolle, welchen Namen die Bilder in
den Verzeichnissen tragen. Ebenso ist das Bildformat nicht von großer Bedeutung. Wichtig ist
nur, dass ein Webbrowser dieses Format anzeigen kann.
Die Diashow wird, wie ein normaler Webservice auch, als ein Zusammenspiel von PHP,
Java­Script und HTML realisiert. Sehen wir uns
zunächst das sehr einfache HTML-Grundgerüst
der Webseite in Listing 1 an.
In der Style-Definition von body im Body-Tag
selbst wird für einen schwarzen Seitenhintergrund gesorgt und zudem dafür, dass die Fotos später direkt an den Seitenrändern anliegen
können und keine unnötigen Abstände entstehen. Der Body enthält lediglich zwei div-Container, wobei der erste später das Bild und der
zweite das Datum enthalten wird. Das Datum
wird in weißer Farbe mit Schriftgröße 60px mittig auf dem Foto platziert.
PHP ist nun dafür zuständig, alle Bilder in
den Unterordnern von fotos zu sammeln (Listing 2). Hier kommt die rekursive Funktion get_
pics zum Einsatz, um alle gefundenen Bilder inklusive der Pfade in das globale Array $pics einzutragen. Mit diesen Daten wird anschließend
durch PHP ein JavaScript-Array pics erzeugt, in
das alle Werte kopiert werden:
<script type="text/javascript">
var pics = new Array(<?php
for ($i = 0; $i <
sizeof($pics) - 1; $i++)

Listing 1: HTML-Grundgerüst

print '"'.$pics[$i].
'", ';

<!DOCTYPE html>

font-weight: bold;

<html>

position: absolute;

print

top: 20px;

'"'.$pics[sizeof($pics)

letter-spacing: 2px;

-1].'"';

<head>
<title>Diashow</title>
<style>

}

?>);

body {

</style>

</script>

margin: 0px;
padding: 0px;

</head>
<body marginheight="0" marginwidth="0">

background: #000;
<div style="text-align:center;">

}
#dateDiv {

<img id="diashowImg" />

z-index: 2;

</div>

text-align: center;

<div id="dateDiv"></div>

width: 100%;

120

font-size: 60px;

</body>

color: #fff;

</html>

Jetzt können wir uns mit dem
JavaScript-Code befassen, der
­
für das eigentliche Anzeigen
und Umschalten der Bilder benötigt wird. Dazu wird ­
eine
Funktion change_pic implemen­
tiert, die das nächste Foto anzeigt und zudem den Datums­
text aktualisiert (Listing 3).
2/2014

backend
Listing 2: Fotos sammeln
<?php
$picDir = "fotos";
$pics = array();
function get_pics($path)
{
global $pics;
$dp = opendir($path);
while ($entry = readdir($dp)) {
if ($entry == "." or $entry == "..")
continue;
if (is_dir($path."/".$entry))
get_pics($path."/".$entry);

Screenshot der Diashow im Vollbildmodus des ­
Browsers (Bild 1)
Dabei wird zunächst wird ein zufälliger Array-Index rand erzeugt, der später dafür verwendet wird, die src-Property des neuen ImageObjekts zu aktualisieren. Sobald dies passiert,
sollen noch diverse weitere Aktionen ausgeführt
werden, weshalb eine Funktion auf das onloadEvent des Objekts gelegt wird. In dieser Funktion wird zunächst das Datum des Fotos ermittelt und im deutschen Format in den div-Container dateDiv geschrieben. Anschließend wird die
src-Property von diashowImg auf das neue Bild
geändert. Im dritten Schritt muss nun noch dafür gesorgt werden, dass die Dimensionen des
img-Tags an die des neuen Bildes angepasst werden. Sowohl ein Bild im Querformat als auch
im Hochformat soll das Browserfenster so weit
wie möglich ausfüllen. Deshalb wird das Bild
nach Dreisatzregeln in Höhe und Breite entsprechend neu skaliert. Dies passiert im if-Fall für ein
Bild im Querformat und im else-Fall für ein Bild
im Hochformat. In der letzten Zeile des Skripts
wird dann noch ein Intervall erzeugt, das alle
fünf Sekunden die Funktion change_pic aufruft
und damit für einen Bildwechsel sorgt. Im Voll-

else {
$extension = substr(strtolower($entry),
strrpos($entry, ".") + 1);
if (in_array($extension,
array("jpg", "jpeg", "bmp", "gif", "png")))
$pics[] = $path."/".$entry;
}
}
closedir($dp);
}
get_pics($picDir);
?>

bildmodus des Browsers (Taste [F11]) erscheinen die Bilder damit über den kompletten Bildschirm (Bild 1).

Fazit
Mit einfachen Mitteln lässt sich via PHP und
Java­Script eine Diashow erstellen. Das vorgestellte Beispiel kann auf verschiedenste Weisen
erweitert werden. So kann man beispielsweise
in einem weiteren div Kommentare zu den einzelnen Bilder anzeigen lassen, oder es ließe sich
die Übergangszeit zwischen den Bildern durch
eine Zufallsfunktion variabel gestalten.  [mb]

Listing 3: JavaScript
<script type="text/javascript">
function change_pic()
{
var rand = 1000000;
while (rand > pics.length)
rand = Math.round(Math.random() * 10000);
var pic = new Image();
pic.onload = function(){
var pathParts = pic.src.split("/");
var dateParts = pathParts[pathParts.length 2].split("-");
document.getElementById("dateDiv").innerHTML =
dateParts[2] + "." + dateParts[1] + "." +
dateParts[0];
document.getElementById("diashowImg").src =
pic.src;
if (pic.width > pic.height) // Querformat
{
document.getElementById("diashowImg").width =
window.innerWidth;

2/2014

document.getElementById("diashowImg").height =
Math.round(pic.height * window.innerWidth /
pic.width);
}
else

// Hochformat

{
document.getElementById("diashowImg").height =
window.innerHeight;
document.getElementById("diashowImg").width =
Math.round(pic.width * window.innerHeight /
pic.height);
}
}
pic.src = pics[rand];
}
var myInterval = window.setInterval("change_pic()",
5000);
</script>

121

beyond dev
Grafik für Entwickler

Bilderwerkstatt
Bildmontagen, bei denen mehrere Objekte auf einer Fläche vereint werden, sind ein gängiges Mittel
des Webdesigns. Dabei gibt es unterschiedliche Formen. Von Katharina Sckommodau

Autorin

Katharina Sckommodau
arbeitet nach dreijähriger Tätigkeit als Redakteurin für das
Fachmagazin MACup nun als
freiberufliche Autorin, Grafikerin
und Dozentin, unter anderem für
die Akademie der Bayerischen
Presse und für Macromedia. Sie
veröffentlicht regelmäßig Beiträge in renommierten Fachzeitschriften und verwirklichte mehrere Buchprojekte zu verschiedenen Grafik-Themen.
Inhalt
Grafik für Entwickler.

Die Startseite des iPhone-Readers von Ecoki zeigt eine Bildmontage, bei der die montierten
Objekte (iPhone und Teetasse)
zu Bestandteilen des Hintergrundbildes werden (Bild 2)

122

W

ebseiten unterscheiden sich von
Print-Produkten in einem wichtigen Punkt: Die Verweildauer des
Betrachters ist auf der einzelnen ­Seite
wesentlich kürzer. Der Leser erwartet hier keine längeren Texte, sondern
sucht zunächst grafische Strukturen
auf der Seite, an denen er sich orientieren kann. Entscheidend ist also das
passende Bildmaterial.
Auch Apps transportieren ihre Informationen eher über Bilder und Bei der Android-App FIFA 14 von EA Sports zeigt der Startscreen
Grafiken – unabhängig davon, ob es ­eine Montage aus Ausschnitten, die eine Spielsituation aus mehreren
sich um ein digitales Magazin oder Blickwinkeln zeigen (Bild 1)
um eine andere Anwendung, beilich ist, das abgebildete iPhone auf den Balken
spielsweise um ein Spiel, handelt. Ob der Anzu stellen. Somit bleibt nur die Bildmontage,
wender auf der Seite verweilen wird, oder für
bei der auch die Lichtverhältnisse berücksichwelche App er sich entscheidet, hängt stark vom
tigt werden müssen: Bei nachträglich ins Bild
ersten Eindruck ab. Bilder dienen also im digieingefügten Objekten muss der Designer einen
talen Bereich nicht nur als Informationsquelle,
im Einfallswinkel passenden Schatten konstrusie versuchen auch – besonders auf der Startseiieren.
te beziehungsweise dem Startscreen –, den User
von der Anwendung zu überzeugen.

Einsatz von Montagen
Collagen zeigen mehrere Details aus verschiedenen Bildern auf einer Fläche. Dabei ist jedes
auf einen Hintergrund montierte Objekt wichtig und transportiert im weitesten Sinn eine Botschaft – sei es eine Auswahl an vorzustellenden
Dingen oder verschiedene Ausschnitte des Inhalts (Bild 1).
Eine Montage kann jedoch auch dazu dienen,
wichtige Details, die auf einem Bild fehlen, aus
anderen Bildern so zu ergänzen, dass sie sich realistisch in das Gesamtbild einfügen. So zeigt beispielsweise der Webauftritt des iPhone-Readers von Ecoki vor
dem Hintergrundbild, einer
ansprechenden Landschaft,
einen nachträglich montierten Balken, auf dem ein
iPhone und eine Tasse Tee
zu sehen sind (Bild 2).
Fotografisch wäre diese
Aufgabe kaum zu lösen, da
es physikalisch nicht mög-

Bildmontagen als Hintergrund
Bildmontagen werden häufig als Startscreen
eingesetzt. Hier muss in der Regel nur wenig
Text untergebracht werden. Oft befinden sich
auf dem ersten Screen nur der Titel der Anwendung, das Logo des Herstellers und die notwendigsten Navigationselemente. Gut untergebracht sind ganzflächige Hintergrundbilder
während des Ladevorgangs einer Spiele-App,
wie es beispielsweise die Fußballmanager-App
Top Eleven zeigt (Bild 3).
Sieht der Anwender lediglich den Hinweis
Please wait …, besteht die Gefahr dass er sich in
der gefühlt zu langen Wartezeit der Konkurrenz
zuwendet. Hier unterhält eine Collage den Wartenden mit sehr unterschiedlichen Bildelementen, die grafisch ansprechend miteinander kombiniert sind: Im Vordergrund ist das Gesicht des
portugiesischen Fußballtrainers José Mourinho
zu sehen. Mit einem Effekt versehen, der von
Bicolor nach unten in Schwarzweiß übergeht,
wurde das Porträt an die weiteren Bestandteile der Montage angepasst; einem Bild des Spielfelds im Hintergrund, das zusätzlich von der
Sig­natur und einem weiteren Foto einer Spiel­
situation überlagert wird.
2/2014

beyond dev

Die Spiele-App für Android und iPhone Top Eleven
zeigt eine Collage im Hintergrund, während das Spiel
lädt (Bild 3)
Befindet sich hingegen viel Text auf dem
Screen, eignen sich Collagen nicht als Hintergrundbild. Zudem geht der Trend hin zu einem
klareren Design, insbesondere auf professionellen Geschäftsseiten. Zeigten verschiedene Webauftritte früher mit großflächigen Bildern und
weiteren grafischen Details ein eher verspieltes
Layout, erscheinen die neuen Seiten desselben
Anbieters heute oft in einem schlichteren Layout. Bilder finden einen definierten Platz, die
Texte stehen auf einfarbigem Hintergrund – was
der Lesbarkeit durchaus guttut.

Die Kombi-Montage
Soll die komplette Fläche einer App oder der
Webseite grafisch gestaltet werden, bieten sich
feststehende Flächen für Textelemente an. Ein
solcher Texthintergrund kann eine Montage aus
einzelnen Bildausschnitten, eigens dafür generierten 3D-Elementen und Verläufen sein. Im
Idealfall nimmt die Fläche das Thema der Bilder
auf, die zusätzlich auf der Fläche erscheinen. So
reserviert beispielsweise die Webseite Baederland.de den unteren Bereich für alle Text-Informationen. Als feststehenden Hintergrund hat
der Designer eine blaue Fläche mit dezentem
Verlauf gewählt, deren Abschluss nach oben ei-

Baederland.de kombiniert ein feststehendes Bildelement unten für den Text geschickt mit den oben
wechselnden Bildern (Bild 4)

Die Android App African Scene von
Mastermind-Arts zeigt die Tiere der
Savanne nur als homogene Farbfläche vor einem bunten Hintergrund
(Bild 5)

ne plastische Wasseroberfläche bildet. Die da­
rüber eingeblendeten Bilder fügen sich harmonisch in diese Design-Struktur ein. So entsteht
eine grafisch gelungene Struktur für alle notwendigen Informationen (Bild 4).

Schnelle Lösung: Scherenschnitt
Sollen verschiedene Objekte realitätsgetreu in
einen neuen Hintergrund eingebaut werden, ist
viel Feinarbeit im Bildbearbeitungsprogramm
notwendig. Die einzelnen Elemente müssen
sauber freigestellt werden, Schatten und Lichter müssen stimmen.
Nimmt man jedoch nur den Umriss eines
Objekts und füllt ihn mit Farbe – meist wird
Schwarz gewählt –, so besteht diese Form vor
fast jedem Hintergrund mit Bravour. Bei ▶

Formen des Porträts
Viele Startseiten zeigen unterschiedliche Formen
eines Porträts.

hingegen zeigt nur die Ansätze der Schulter. Zudem kann ein Porträt aus unterschiedlichen Per­
spektiven aufgenommen werden. Bei einer frontalen Aufnahme ist der Oberkörper zwar leicht ge-

dreht, das Gesicht jedoch dem Fotografen direkt
zugewandt. Das Profil zeigt lediglich eine Seite
des Kopfes. Dazwischen liegen das Halbprofil soEin Porträt muss nicht immer nur das Gesicht des
wie das Dreiviertelprofil.
zu Porträtierenden zeigen. Ist der kompletIn der Regel befindet sich bei allen vier
te Körper zu sehen – ob stehend oder sitPorträt-Arten die Kamera ungefähr auf Auzend – spricht man von einer Ganzfigur. Die
genhöhe – unsere gewohnte Ansicht, der
Abbildung bist zum Knie wird Kniestück geFotograf ist auf der gleichen Höhe wie das
nannt. Beim Hüftbild ist die Figur bis zum
Model. Wird das Porträt hingegen von oben
Schritt zu sehen, die Halbfigur hingegen
aufgenommen, blickt der Fotograf gewisendet auf der Höhe der Taille; meist sind
sermaßen auf sein Model herab. Die Bildie Arme und Hände ebenfalls (abgewinder hingegen, die von unterhalb der Augenkelt) im Bild. Ist im unteren Bereich noch
linie aufgenommen wurden, zeigen die Perdie Hälfte des Oberkörpers zu sehen, han- Porträt-Ausschnitte; von links nach rechts: Büste, Bruststück,
son größer, der Betrachter muss zu seinem
delt es sich um ein Bruststück, die Büste Halbfigur, Hüftbild, Kniestück und Ganzfigur
Gegenüber aufblicken.

2/2014

123

beyond dev

Die Outline eines freigestellten
Porträts dient als Rahmen für
zwei weitere Fotos (Bild 6)

diesem Kunstgriff sind keinerlei Anpassungen an Licht und
Schatten notwendig. P
­ assende
Formen gibt es im Internet zum
Download. Eine große Auswahl an kostenlosen Formen
und Grafiken ist bei Openclip­
art.org zu finden.
Neben verschiedenen Transparenz-Werten bieten sich auch
andere Effekte an, um das Objekt mit dem Hintergrund zu
verschmelzen und so die Szene aufzupeppen. Denkbar sind
künstliche Sterne, Schmutzflecken und vieles mehr.
In der Wallpaper-App African Scene hat der
Hersteller Mastermind-Arts mit solchen Stilmitteln gearbeitet: Vor einem stimmungsvollen
Hintergrundbild erscheinen schemenhaft die
Tiere der Savanne, und kleine beleuchtete Partikel bewegen sich bei Berührung des Screens
über das Bild (Bild 5).

Montagen dieser Art funktionieren jedoch nur
dann, wenn einige Gestaltungsregeln eingehalten werden. Bewegte Hintergrundbilder sollten
ruhigere Flächen zeigen und eine andere Farbigkeit als die Bildausschnitte, die darüber platziert werden. Das gezeigte Beispiel arbeitet mit
leuchtenden Farben im Vordergrund, hier wurden die gestochen scharfen Bilder teils mit Effekten versehen. Der animierte Hintergrund zeigt
zwar ein ähnliches Farbspektrum, die Farben
sind jedoch etwas dunkler und nicht so stark
gesättigt. Zudem wurde eine leichte Unschärfe über den Hintergrund gelegt. Die Montage
täuscht damit eine geringe Schärfentiefe vor.

Tipps zur Umsetzung
Sollen mehrere Bildausschnitte zu einer Collage zusammengefügt werden, müssen diese aufeinander abgestimmt werden. Handelt es sich
dabei nur um rechteckige Bildausschnitte, die
auf einen Hintergrund gesetzt werden, ist es

Spiel mit Objektformen

Eine Anzeige aus der MagazinApp Windsurf Magazine für iPad/
iPhone zum Produkt Hero 3
Black Edition zeigt den korrekten
Körperschatten (Bild 8)

124

Mit den Kanten eines ausgewählten Objekts
lässt sich jedoch noch mehr anstellen. Werden
diese als Rahmen verwendet, lassen sie sich mit
unterschiedlichen Bildern oder auch Texten füllen. Ein gelungenes Beispiel dafür liefert Bild 6:
Hier übernimmt der Designer Jim Ramsden die
Kontur seines freigestellten Porträts und verwendet diese als Rahmen für zwei weitere Fotos. Eine spannende Sache; zwei unterschiedliche Informationen verschmelzen zu einem Bild:
Die Form von Ramsdens Porträt, in der zwei Fotos platziert sind, die (nicht nur) seine Arbeit widerspiegeln: Stadt und Land, bearbeitet mit einem Instagram-Effekt.
Neben statischem Bildmaterial, das immer einen festen Platz einnimmt, kann bei
einer digitalen Anwendung auch eine kleinere Filmschleife oder eine
Animation zum Einsatz kommen.
So ist es beispielsweise möglich, ein
einzelnes Bild oder eine ganze Bilderserie als Diashow per Ken Burns
zu animieren.
Animierte Bilder können entweder auf einem ruhigen Hintergrund
platziert werden oder selbst zum
Hintergrund werden. Ein gelungenes Beispiel dazu liefert des Internetauftritt des Mode-Labels Loisjeans: Hier wechseln mehrere Hintergrundbilder, die mit einem KenBurns-Effekt animiert wurden; da­
rüber liegen kleinere Bildausschnitte der aktuellen Kollektion (Bild 7).

Auf der Webseite Loisjeans.com ist hinter DetailAnsichten eine Diashow mit Ken-Burns-Effekt im
Hintergrund zu sehen (Bild 7)
nicht unbedingt notwendig, diese zuvor in einem Bildbearbeitungsprogramm zu bearbeiten.
Anders verhält es sich jedoch mit komplexeren
Objekten, besonders dann, wenn sie nahtlos mit
dem Ursprungsbild verschmelzen sollen. Anbei
einige Tipps zur Fotobearbeitung:
■ Lichtstimmung und Schattenwurf: Kommt im Hintergrundbild das Licht von rechts oben, sollten die eingesetzten Objekte ebenfalls aus dieser Richtung beleuchtet sein. Auch die Schatten müssen stimmen – und zwar nicht nur im
Winkel: So wirft zum Beispiel das Sonnenlicht
im Juli um 12 Uhr mittags einen sehr kurzen
Schatten mit relativ scharfen Rändern. Abendsonne hingegen generiert lange Schatten, die, je
weiter sie vom schattenspendenden Objekt entfernt sind, eine unschärfere Kante zeigen. Auch
der Körperschatten, also die dunklen Schattenbereiche auf dem Objekt, müssen zur gezeigten
Lichtquelle passen. Ein Beispiel liefert die Abbildung, die auf der Anzeige im Bild 8 zu sehen
2/2014

beyond dev
Der Ken-Burns-Effekt
Entwickelt wurde dieser Effekt für eine Bewegung
von Fotos oder Grafiken durch den Dokumentarfilmer
Kenneth Burns, der bei seiner Arbeit oft Filmszenen
mit statischen Aufnahmen mischte.
Beim Ken-Burns-Effekt werden die einzelnen Bilder
einer Diashow ineinander überblendet. Über gezieltes Schwenken und Zoomen kommt zudem Bewegung ins Bild, die den Blick des Betrachters auf wichtige Details lenkt.
Eine Diashow mit Ken-Burns-Effekt lässt sich sehr
einfach mit verschiedenen Programmen erstellen. Für
den Mac gibt es beispielsweise iMovie von Apple,
PhotoMagico von Boinx, Photo to Movie von LQ Graphics oder PulpMotion von Aquafadas. Die beiden
Programme Wow Slider oder Wondershare DVD Slideshow Builder laufen auf dem Mac und auf dem
PC. Windows-Anwender erstellen eine Slideshow mit
Ken-Burns-Effekten mit Ashampoo Slideshow Studio oder dem kostenlosen Open-Source-Programm
PhotoFilmStrip.

ist: Hier ist zwar kein direkter Schattenwurf
zu beachten. Der Körperschatten auf dem Surfer muss jedoch mit der Lichtstimmung in der
Landschaft übereinstimmen.
■
Auswählen und Freistellen: Details, die auf einen neuen Hintergrund gesetzt werden sollen, müssen zunächst freigestellt werden. Annähernd jedes Bildbearbeitungsprogramm bietet dafür die notwendigen Werkzeuge, etwa einen Zauberstab für eine Auswahl nach Farben
oder ein Lasso, um die Formen exakt zu umfahren. Die umfangreichsten Tools bietet nach
wie vor Adobe Photoshop CC oder eine Vorversion; hier gibt es zum Wählen das Schnell­
auswahlwerkzeug, das automatisch zusam-

menhängende Bildbereiche und deren Kanten
erkennt (Bild 9).
■ Verstümmelungen vermeiden: Gerade bei Bildmontagen und Retuschen kann es leicht passieren, dass einzelne Bereiche eines Objekts versehentlich abgeschnitten oder ausradiert werden. Manche Gestalter greifen sogar bewusst
zur Schere und löschen Bereiche eines Elements, die sie für die Collage als nicht notwendig erachten. So geben sich beispielsweise auf
der Webseite Pfotenhelfer-ev.de Mensch und
Hund die Hand beziehungsweise Pfote. Diese
Körperteile enden jedoch hinter zwei Hunden
im Vordergrund der Montage und wirken dadurch wie abgeschnitten (Bild 10).
■ Farben anpassen: Die Farbstimmung sollte bei
allen Bildelementen einer Collage zusammenpassen. Wird beispielsweise ein Objekt aus einem Bild mit kalter Farbstimmung auf einem
Hintergrund platziert, der in warmen Farben
einen Sonnenuntergang zeigt, so wird sich dieses Objekt sicher nicht in die Umgebung einpassen und immer »wie ausgeschnitten« wirken. Die einzelnen Details lassen sich meist
über eine Farbkorrektur gut aneinander anpassen. Hierzu gibt es, je nach gewähltem Bildbearbeitungsprogramm, unterschiedliche Filter
und Funktionen. Eine weitere – und weitaus
schnellere – Möglichkeit besteht darin, die fertige Montage in einer Farbe nach Wahl einzufärben (Bild 11).

Fazit

Freistellen mit Adobe Photoshop CC: Das Schnellauswahlwerkzeug erkennt die Flächen und Kanten der zu
wählenden Objekte, die gestrichelte Linie zeigt die
Auswahl (Bild 9)
2/2014

Montagen eignen sich bei vielen Anwendungen
gut als Startscreen. Dabei sollte das Bild nicht
von wichtigen Elementen auf der Fläche ablenken. Handelt es sich um eine Montage für eine
App, ist zudem die kleinere Fläche des Ausgabegeräts zu beachten. Detailreiche Collagen wirken auf einem Smartphone nicht so gut wie etwa
auf der größeren Fläche eines Tablets.
Hier bietet es sich an, für die verschiedenen
Ausgabegeräte unterschiedliche Versionen zu
planen: Gibt es zum Beispiel eine flächenfül­
lende Collage für den Desktop oder Tablet-Startscreen, könnte die ­Variante für das Smartphone
nur einen Ausschnitt daraus zeigen.
[mb]

Die einzelnen Elemente einer
Montage sollten vollständig
abgebildet werden; hier wurden Arm und Hundebein abgeschnitten (Bild 10)

Die Android-App Night Shadow
von Mastermind-Arts versucht,
ansprechende Mondstimmungen
zu vermitteln. Durch die nachträgliche Färbung der gesamten
Montage fügt sich der montierte
Mond recht glaubwürdig in die
Szene ein (Bild 11)

125

beyond dev
Source Control Management (SCM)

Wiederholbarkeit
Die Wiederholbarkeit von erfolgreichen Softwareprojekten ist kein zufälliges Ereignis, sondern das
Resultat aus strukturiertem und überlegtem Vorgehen. Von Marco Schulz

Autor

Marco Schulz
ist freier Software Engineer und
Autor verschiedener Fachartikel.
Seine Themen sind Java- und
PHP-Webentwicklung mit den
Schwerpunkten Architektur und
Deployment.
▶ banaalo@web.de
Inhalt
Source Control Management
(SCM).

Schematische Darstellung eines
Branch Models (Bild 1)

126

V

ielen Projekten wohnt ein eigener Charakter inne, der auch durch das Team geprägt
wird, das die Herausforderung annimmt, gemeinsam die gestellte Aufgabe zu bewältigen.
Agile Methoden greifen diese Erkenntnis auf
und bieten potenzielle Lösungen, um IT-Projekte erfolgreich durchführen zu können. Ein
wichtiges Konzept, das allen Strategien zugrunde liegt, besteht darin, möglichst viele Aufgaben zu automatisieren, was wiederholbare Ergebnisse garantiert und potenzielle Fehlerquellen reduziert. Kern einer erfolgreichen Automatisierung ist eine durchdachte Organisation des
Source Control Managements (SCM), um den
gestellten Anforderungen gerecht zu werden.
Mit dem Erscheinen von Git kam vor einigen
Jahren etwas Bewegung in die Community, und
dies hat dazu beigetragen, dem bis dato marktführenden System Subversion (SVN) die Position streitig zu machen. Durch die Konkurrenz
mit dem neuen Star hat auch SVN einige Verbesserungen erfahren, was sich besonders auf die
Performance ausgewirkt hat.
Die meist sehr erregt geführten Diskussionen über Vor- und Nachteile von zentralem versus verteiltem Repository sind mittlerweile auf
ein erträgliches Maß zurückgegangen. Unternehmen haben oft über die Jahre eine artenreiche SCM-Landschaft aufgebaut. Alte Projekte,
die noch mit CVS versioniert wurden, sind aus
wirtschaftlichen Gründen nicht auf neuere Systeme migiert worden. Ein Update der bestehenden SCM-Systeme hin zu aktuellen Versionen
sollte besonders bei aktiven Projekten regelmäßig vollzogen werden.
So hat sich beispielsweise bei Subversion ab
der Version 1.5, ein erheblicher Performance­
gewinn für Commits eingestellt. Ein Vergleich

von mehr als 25 SCM-Systemen hinsichtlich
ihrer Funktionen ist auf der Webseite Better
SCM (http://better-scm.shlomifish.org/compari
son/comparison.html) zu finden. Eine endgültige Entscheidung für die Verwendung eines speziellen SCM hängt in letzter Konsequenz aber
von der Beschaffenheit des Projekts ab.
So selbstverständlich die Verwendung von
Versionierungs-Werkzeugen ist, so unklar ist deren optimaler Gebrauch. Denn in der Praxis entstehen dabei vielfältige Fragen:
■ Was ist die optimale Häufigkeit zur Speicherung der Änderungen?
■ Welche Dateien gehören unter Konfigurationsmanagement gestellt?
■ Was ist der beste Weg, die Konfiguration kompletter Systeme zu sichern?
■ Wie können verschiedene Versionen einer Datenbank archiviert werden?
■ Was ist die optimale Ablagestrategie für binäre Daten?
Jeder einzelne Punkt beschreibt einen Teil des
entwickelten Softwaresystems. Eine erfolgreiche Auslieferung des Projekts beinhaltet die
Möglichkeit, alle notwendigen Komponenten
mit wenigen Handgriffen bereitzustellen. Die
Organisation des Quelltextes ist daher nur ein
Artefakt des Ganzen. Treu nach dem Grundsatz:
Nur das Genie beherrscht das Chaos, alle anderen müssen sich organisieren.

Ordnung im Repository durch
Branch Models
Branch Models erlauben es, die Implementierung von Funktionalitäten in eigene Verzweigungen (Branches) zu kapseln und diese dann nach
Bedarf zu einem Release zusammenzuführen
(merge). Ein geschickt angewendetes
Branch Model gestattet es, zügig relevante Knoten im Revisionsgraphen zu
identifizieren und diese zu einem neuen Knoten zusammenzuführen. Knoten mit Verzweigungen zu einem neuen Release sind für die Erhebung von
Qualitätsanalysen und deren anschließenden Vergleich von besonderem Interesse. Im Hauptentwicklungsstrang
(Trunk) des SCM werden fest definierte Punkte, die Releases, vorgehalten.
2/2014

beyond dev
Für jede neue Funktionalität wird vom trunk
eine neue Verzweigung erzeugt. Alle fertiggestellten Features werden vorerst in einem separaten Feature Branch zusammengeführt. Für jedes Release existiert ein eigener Bugfix Branch,
in dem globale Fehler behoben werden. Global
bezieht sich hierbei vor allem auf Lösungen, die
sich aus dem Zusammenschluss mehrere Features ergeben haben. Fehler, die einem konkreten Feature zugeordnet werden können, sind
im entsprechenden Branch des jeweiligen Features zu beheben.
Auf den ersten Blick erzeugt dieses Vorgehen
eine nicht unerhebliche Anzahl an Verzweigungen, was aber eine enorme Flexibilität erlaubt. Es
können praktisch alle möglichen Kombinatio­
nen von umgesetzten Funktionalitäten zu einer
Anwendung zusammengebaut werden. Das gestattet es im Fall einer fehlgeplanten Funktionalität, diese aus dem Livesystem herauszunehmen oder auf ein späteres Fertigstellungsdatum
zu verschieben (Bild 1).

Konfigurations-Management
Ein weiterer Punkt für den effizienten Umgang
mit SCM-Systemen ist, im Repository keine Binärdateien wie beispielsweise 3rd-Party Libraries einzuchecken. Dafür gibt es eigene Lösungen
wie NuGet (www.nuget.org) und Nexus (www.
sonatype.org/nexus ), die es erlauben, verschiedene Versionen eines Artefakts mit einem Repository Manager unter Konfigurationsmanagement zu stellen.
Ein Vorteil dieser Lösung ist unter anderem,
dass die Dimension des Sourcecode-Repositorys in einer angenehm kleinen Größe bleibt, was
wiederum zu kurzen Checkout-Zeiten führt. Ein
weiterer Pluspunkt ist, dass auch eigene Artefakte bereits als fertiges Kompilat im Repository
Manager vorgehalten werden können.
Das wirkt sich positiv auf die Dauer des
Builds aus und ermöglicht das unternehmensweite Verteilen der eigenen Artefakte. Das Bindeglied zwischen Sourcen und binären Artefakten ist die Build-Logik, die den einzelnen Modu-

Hook-Skripts
Hook-Skripts werden meist vor oder nach einem Commit in das SCM ausgeführt. Sie ermöglichen das Ausführen verschiedenster Aktionen, wie Versenden einer E-Mail, Ersetzen von Tokens oder automatisches
Formatieren des Sourcecodes. Die Skripts können in
unterschiedlichen Sprachen geschrieben sein. Bedingung ist, dass ein entsprechender Interpreter auf dem
System vorhanden ist, auf dem das Repository residiert. Um plattformunabhängig zu sein, empfiehlt sich
für diese Aufgabe Python als Skriptsprache.

2/2014

len die entsprechenden Artefakte in ihrer korrekten Version zuordnet. Bild 2 zeigt vereinfacht
das Zusammenspiel der Komponenten einer
Build-Infrastruktur.
Jede Interaktion mit dem SCM-System, die
den internen Zustand des Systems ändert, lässt
eine interne Revisionsnummer hochzählen und
erfordert einen Kommentar. Der Kommentar ist
eine Beschreibung der durchgeführten Aktion
und sollte stets verständlich und nachvollziehbar sein. Bei richtiger Verwendung erlauben die
Kommentare eine automatisierte Kopplung zu
Ticket-Systemen. Die Syntax, die sich dabei als
praktikabel erwiesen hat, zeigt Bild 3.
Wird eine neue Ticketnummer bearbeitet, so
ist ein neuer Branch anzulegen, und dieser erhält den entsprechenden Kommentar:

Komponentenübersicht der
Build-Infrastruktur (Bild 2)

[ISSUE-0001] {open} #{BRANCH}

Da es sich um eine SCM-Operation handelt ist
das Feld additonal info obsolet. Analog dazu ist
der Aufbau für abgeschlossene Tickets, deren
Branch wieder in den Trunk überführt wird:
[ISSUE-0001] {close} #{MERGE}

Für Arbeiten an einem Ticket innerhalb eines
Branches ergibt sich folgender Aufbau:
[ISSUE-0001] {work} –{create Models}

Hier ist der Kommentar nicht optional, sondern beschreibt kurz die umgesetzte Lösung.
Das Beheben von Fehlern stellt einen Sonderfall
da. Da diese Änderungen global gelten, wird
nur bei umfangreichen Änderungen ein ­Branch
erzeugt:

127

beyond dev
Auf einen Blick
Auch wenn SCM-Werkzeuge zum
Standard gehören, ist deren korrekter Gebrauch den meisten
Entwicklern unklar. Dieser Artikel
beschreibt, wie SCM innerhalb
eines Projekts durch die richtige Anwendung zu einer Performancesteigerung der Entwicklung führen kann.
Die Grundlagen des Mergen
und Branchen in VersionierungsWerkzeugen wie CVS, SVN oder
Git sollten bekannt sein.

[ISSUE-0002] {work} #{BUGFIX} –
{Change ArraySize from 10 to 15.}

Die Forderung, dass Entwickler, sobald sie eine
Aufgabe bearbeiten, im SCM einen Branch erzeugen und diesen nach getaner Arbeit wieder
in den Trunk überführen, erlaubt einen Rückschluss auf die benötigte Zeit für die Umsetzung
der Lösung. Wichtig für die Akzeptanz und somit auch eine konsequente Nutzung korrekter
Commit-Messages ist eine Unterstützung der
Entwickler bei der Eingabe korrekter Messages.
Der Commit sollte erst dann gestattet werden,
wenn der Kommentar in der korrekten Syntax
vorliegt und die Ticket-Nummer zur vorhandenen Aktion verifiziert ist. Das lässt sich beispielsweise über Hook-Skripts erreichen. Ein Ticket-System kann ähnlich wie ein CI-Server gegen das SCM konfiguriert sein und anhand des
Revisionsgraphen den Status der Tickets selbstständig aktualisieren.

Prozessorientierte Workflows

Typische Workflows für
SCM-Systeme (Bild 4)

128

Hört man die Aussagen der meisten Entwickler,
so behindert das SCM im besten Fall ihre Arbeit
nicht. So passiert es hin und wieder, dass durch
einen Upload (Commit) von Änderungen in das
Repository durch Entwickler das Projekt wegen
eines Fehlers nicht mehr gebaut werden kann.
Das hat zur Folge dass die verbleibenden
Teammitglieder, die ihre lokale Arbeitskopie aktualisiert haben (update), den Fehler erst beheben müssen, um ihre Arbeit fortsetzen zu können. Solche Störungen sind im Arbeitsprozess

nicht nur lästig, sondern bei häufigerem Auftreten auch kostenintensiv. Als eine sehr prakti­
ka­ble Lösung für zerstörte Builds in Teams, die
nicht verteilt arbeiten, dient das Zahlen einer
Strafgebühr in die Kaffeekasse.
Aus Sicht der Open-Source-Community werden andere Lösungen benötigt, da sich schwerlich von weltweit verteilten Entwicklern, die zudem noch in ihrer Freizeit kostenlos arbeiten, ein
Beitrag für die Kaffeekasse einziehen lässt. Die
Betrachtung der typischen Workflows für SCM
vermittelt einen besseren Überblick in die Thematik und offeriert mögliche Lösungen. Klassische Workflows für die Arbeit mit SCM-Systemen sind: Basic, Shared und Managed (Bild 4).
Im Basic Workflow existiert ein zentrales Repository, auf das alle Entwickler Schreib- und
Lesezugriff haben. Die SCM-Veteranen CVS
und Subversion sind für dieses Vorgehen konzipiert worden. Durch die starke Verbreitung
von Open-Source-Projekten, in denen sich weltweit verteilte Entwickler zu einem Team zusammenschließen, haben sich neue Anforderungen
für Versionierungswerkzeuge ergeben. Dies
war der Auftakt für die Entwicklung verteilter
SCM-Systeme, deren populärste Vertreter Git
und Mercurial sind.
Die Haupteigenschaft dieser SCM-Gattung
besteht im Klonen des gesamten globalen Repositorys auf einen lokalen Rechner. Aus dem lokalen Repository wird dann die eigentliche Arbeitskopie bereitgestellt. Die Änderungen werden zunächst wieder auf das lokale Repository
übertragen und erst in einem zweiten Schritt an
ein Remote Repository gesendet. Diese Architektur erlaubt es, vor dem Senden die
Adresse des Remote Repositorys zu
ändern, womit es möglich wird, dass
Entwickler untereinander Code über
die Versionsverwaltung austauschen,
ohne dass das gesamte Team davon
betroffen ist. Daraus ergibt sich auch
die Bezeichnung Shared Workflow.
Eine weitere Ausprägung des
Shared Workflows ist der Managed
Workflow, der sich durch zwei zen­
trale Repositories auszeichnet. Das
erste Repository ist write-only, in das
die Entwickler ihre Änderungen übertragen können. Ein Update des lokalen Repositorys erfolgt über ein zweites Repository, auf das per read-only zugegriffen werden darf. Die Synchronisation der zentralen Repositories erfolgt ausschließlich zu festgelegten Zeitpunkten durch den Build
Manager. Dadurch wird sichergestellt, dass dem gesamten Team jederzeit eine funktionsfähige Version des
Sourcecodes zur Verfügung steht.
2/2014

beyond dev
Im Jahr 2000 initiierte Brian Chan mit Liferay
(www.liferay.com) eine Open-Source-Java-EEPortallösung, deren Enterprise Edition sich bei
renommierten Unternehmen wie Cisco, ­Barclays
und T‐Mobile im produktiven Einsatz befindet.
Die Sourcen werden mit Git verwaltet und sind
über den Anbieter GitHub frei zugänglich. Zudem besteht die Möglichkeit des anonymen lesenden Zugriffs auf die Issue‐ und Bug‐Datenbank sowie eine ausführliche Dokumentation.
Die grafische Darstellung offenbart bereits
deutlich, dass der Prozess für Branch Models
optimierungsfähig ist. Um die Details deutlicher zu illustrieren, wurde aus dem Issue-Management der zur Revision 6.2.0-M1 behobene
Fehler LPS-31007 herausgehoben.
Der Screenshot des Git-Clients zeigt für diesen Fehler fünf Commits im Zeitraum zwischen dem 19.11.2012 und 22.5.2013 jeweils in
den HEAD des aktiven Entwicklungsstrangs.
Da sich der Milestone 1 nicht im gleichen Pfad
befindet wie die nachfolgenden Milestones M2–
M6, liegt die Vermutung nahe, dass der Knoten
des Milestone 1 keine Änderungen erfahren hat.

das Datenmodell entsprechend anzupassen. Im
günstigsten Fall handelt es sich um Erweiterungen. Es kommt aber auch vor, dass das bestehende Datenmodell verändert werden muss. In
diesem Fall ist es notwendig, auch die Datenbank unter Konfigurationsmanagement zu halten, damit für ältere Versionen der Applikation
das zugehörige Datenmodell verfügbar ist.
Der Hersteller Redgate (www.red-gate.de) offeriert mit verschiedenen kommerziellen Tools
eine Möglichkeit, bestehende Datenbanken unter Konfiguration zu stellen und Versionen zu
vergleichen.
Ein anderer Weg ist die Verwendung moderner O/R-Mapper wie Hibernate, Doctrine oder
Propel. Die Persistenz-Frameworks sind für viele objektorientierte Programmiersprachen wie
PHP, Java und .NET verfügbar.
Tabellen werden als Entitätsobjekte dargestellt, aus denen die Datenbank beim Applikationsstart erzeugt wird. Das Befüllen (populate)
der erzeugten Datenbank erfolgt über ein einfaches SQL-Skript. Der zusätzliche Charme dieser Lösung ist, dass das Datenbanksystem je-

Gegenüberstellung des Revisionsgraphen mit einem zugeordneten Bugfix (Bild 3)
Diese Annahme wurde durch eine nähere Betrachtung der Commit-Messages des SCM bestätigt, wo am 7.11.2012 ein Branch für den Milestone 1 mit einer Verzweigung vom Knoten
LPS-30792 angelegt wurde, welcher aber keine
weiteren Nachfolger aufweist.
Aus dem Commit-Datum für LPS-30792, von
dem M1 erzeugt wurde, ergibt sich das ReleaseDatum 1.11.2012 für M1. Dem steht das offizielle Publishing Date für M1 gegenüber, das in
­JIRA mit dem 5.11.2013 gekennzeichnet wurde.
Diese Fakten erschweren nachträgliche Recherchen, da die Zuordnung der Labels nicht
korrekt ist. Im konkreten Fall des Fehlers LPS31007 handelt es sich um eine API-Erweiterung,
die nicht im Milestone M1 verfügbar ist, sondern
im Milestone 5 mit der letzten Änderung im Repository zugeordnet ist.
Das hat wiederum zur Folge, dass die vorher
ausgelieferten Releases nicht konsistent zu den
mitgelieferten Release Notes sind, was besonders die Kompatibilität von Erweiterungen einschränken kann, weil zugesicherte Eigenschaften nicht vorhanden sind.
Typischerweise kommen moderne Applika­
tionen kaum noch ohne eine Datenbank als Persistenzschicht aus. Das bedeute natürlich auch:
Wenn eine Applikation erweitert wird, ist auch
2/2014

derzeit ausgetauscht werden kann. Ein zusätzlicher Versionierungsschritt ist nicht notwendig,
da die Datenbank automatisch zu den Entitätsobjekten der entsprechenden Revision gehört.

Kurze Gedanken zur Sicherheit
Neben den bereits aufgeführten Aspekten ist
auch die Sicherheit nicht zu vernachlässigen.
Das umfasst unter anderem eine ausgefeilte
Nutzerverwaltung, die Schreib- und Lesezugriffe auf das Repository überwacht.
Dieser Aufgabe widmen sich meist kommerzielle Hersteller, die ihren Lösungen einen eigenen Security Layer überstülpen. Die klassischen Open-Source-Vertreter wie beispielsweise Git und SVN besitzen in der Standardversion
nur eine einfache Benutzerverwaltung ohne Policy Management.
Unternehmen, die ihren Entwicklern den Zugriff auf das Repository auch außerhalb des
hauseigenen Intranets bereitstellen, sollten sich
eventuell auch Gedanken über die Verschlüsselung der Kommunikation von Checkouts und
Commits machen. Auch sollte man sich im Klaren sein, dass verteilte SCM-Systeme immer
den kompletten Zweig in die lokale Arbeitskopie klonen.
[mb]

Links zum Thema
Vergleich verschiedener SCMSysteme
▶ http://better-scm.shlomi
fish.org/comparison/
comparison.html
.NET Repository Manager
NuGet
▶ www.nuget.org
Java Repository Manager
Sonatype Nexus
▶ www.sonatype.org/nexus
Commit Naming der DrupalCommunity
▶http://drupal.org/node/
52287
Richtige Benennung von CSMCommits
▶ http://wildbit.com/blog/
2008/11/11/theimportance-of-commitmessages
Branchmodel der Git-Community
▶ http://nvie.com/posts/
a-successful-git-branchingmodel
Homepage des Liferay-Projekts
▶ www.liferay.com
Issue- und Bug-Management
des Liferay-Projekts
▶ http://issues.liferay.com/
browse/LPS
Homepage des Unternehmens
Redgate
▶ www.red-gate.de

129

beyond dev
Samsungs Entwicklerkonferenz SDC 2013

Samsung, Software …
Es war spannend: Das Android-Schwergewicht Samsung hat im September zu seiner ersten
weltweiten Entwicklerkonferenz eingeladen. Hier der Bericht. Von Marcus Ross

Autor

Marcus Ross
ist Dipl.-Informatik-Betriebswirt
und arbeitet als freier ­IT-Berater
und Trainer. In der Software-Entwicklung ist er seit über zehn
Jahren tätig. Als Deutschlands
erster Trainer für Titanium ­Mobile
widmet er sich seit 2010 dem
Schwerpunkt der mobilen CrossPlattform-Entwicklung mit Java­
Script.
▶ marcus.ross@zahlenhelfer.de
Inhalt
Samsungs Entwicklerkonferenz
SDC 2013.

Curtis Sasaki, Senior Vice President and Head of Media Solution
Center America (Bild 2)

Das neue Smart-TVTop-Modell mit 4KAuflösung (Bild 3)

130

A

m 28. Oktober fand der Auftakt zu
Samsung erster weltweiter Entwicklerkonferenz statt. Zwei Tage lang konnten die Teilnehmer in San Francisco sehen, was der Multikonzern Samsung so
alles zum Entwickeln bereitstellt. Als
Location war nicht das Moscone Center
gebucht, sondern das Westin St. Francis Hotel. Allerdings war damit das gesamte Hotel durch Samsung belegt. Alle
Flure oberhalb des Eingangs waren mit
blauen Samsung-Planen geflaggt. Beim Gregory Lee, der Präsident von Samsung Mobile US, hält die
Konferenzfrühstück neben dem Grand Keynote (Bild 1)
Ballroom fragten sich viele Teilnehmer,
Kein Turtle­neck, keine Turnschuhe und keine
was wohl gezeigt wird.
Gottesgesten. Auch der amerikanische AwesoAuch über die Teilnehmerzahl war man im
me-Counter blieb quasi auf null. Das ausschweiUnklaren, da Samsung bis zum letzten Tag die
fend amerikanische »Alles ist fantastisch« wurRegistrierung offenließ. Eines war aber klar: Aus
de vermieden. In dieser Ruhe lag aber die Kraft,
der ganzen Welt waren Entwickler gekommen,
zu zeigen, was Samsung ist.
um zu sehen, was passieren wird. Auch Europa
Lee bedankte sich erst einmal bei den 1.300
war gut vertreten, trotz des Samsung Developer
Teilnehmern. Samsung hatte bei der Eröffnung
Days in London im November, der ein Destillat
der Registrierung nie mit so vielen Teilnehmern
dieser Konferenz sein sollte.
gerechnet. Danach erklärte er, was der Samsung
Multi-Konzern ist. Und das hatte es in sich: DieDie Keynote
ser Konzern verkauft nicht nur 250 Millionen GeMit einiger Verspätung wurde dann die Konferäte aus der Galaxy-Reihe, sondern auch noch jerenz offiziell mit der Keynote eröffnet (Bild 1).
de Sekunde zwei Smart TVs weltweit. Doch daWer dabei auf eine Keynote à la Apple oder
mit nicht genug, Samsung hat auch HaushaltsGoogle gehofft hatte, wurde enttäuscht. Die
geräte und Beleuchtung im Portfolio. Alles das
Pump-up-Musik vor dem Start blieb auf Zimsoll smart werden. Samsungs System-Kameras
merlautstärke-Niveau. Das Line-up der Fühzum Beispiel laufen bereits mit Android.
rungsriege von Samsung war sehr asiatisch zurückhaltend und ausgesprochen ruhig. Den
Smart TV
Anfang machte G
­regory
Tizen, Smart TV, Galaxy Android Roadmap – all
Lee. Der Präsident von
das sind Themen. Das Galaxy Gear, die smarSamsung Mobile US gab
te Armbanduhr, wurde nicht explizit erwähnt,
sich im normalen schwarsondern nur ausgestellt. Dieses gesamte Portfozen Anzug mit Oberhemd.
lio soll die Zukunft sein, und zwar vernetzt und
smart verbunden. Und diese Aufgabe soll daher
indirekt den Entwicklern zufallen, also den Teilnehmern. Curtis Sasaki (Senior Vice President
and Head of Media Solution Center America)
zeigte daher die Updates der Samsung Services
und neuen APIs. Ein ganzer Reigen von Diensten soll das Ökosystem von Samsung noch besser machen (Bild 2).
Ein an Apples Passbook erinnernder Service,
der Samsung Wallet 2.0 heißt, soll sich um das
2/2014

beyond dev
Bezahlen und vor allem das Koordinieren von
Tickets oder Eintrittskarten kümmern. Auch
ein eigener Chat-Dienst mit dem Namen Chat­
On wurde gezeigt. Der Samsung-eigene Werbemarkt für Entwickler mit dem Namen AdHub
wurde vorgestellt und dabei immer auf die passenden Sessions verwiesen.
Danach folgte die Vorstellung der aktuellen
Zahlen. Dazu kam Eric Anderson (Vice President Content and Product Solutions, Samsung
Consumer Electronics America) auf die Bühne.
Er präsentierte das neue Smart-TV-Top-Modell
mit 4K-Auflösung, einem Quad-Core-Prozessor und einem Nex-Gen-Design (Bild 3). Dieser Fernseher oder besser Multiseher wurde zusammen mit dem SmartTV SDK 5.0 Beta vorgestellt. Anders als vermutet steckt in den Smart
TVs von Samsung kein Android, sondern ein Linux, das per HTML5, CSS3 und JavaScript läuft.
Letzteres wird mit dem 2013/2014-Line-up sogar
per V8-Engine beschleunigt. Für das Hands-on
wurde Juan Pablo Gnecco (Senior Director of
Samsung Media Solutions Center America) auf
die Bühne geholt. Er zeigte ein Fußballspiel, zu
dem dann weiterführende Statistiken der Spieler eingeblendet wurden.

Multiscreen/Second Screen
Interaktiv wurde es dann mit einer In-GameTwitter-Demo. Direkt beim Fernsehen konnte
dann das Spiel getweetet werden, alles auf einem Smart TV. Der Musik-Streaming-Dienst
Pandora zeigte live, wie der Switch von Smartphone zum Smart TV abläuft.
Aber neben Multiscreen- und Second-ScreenThemen, die unter dem Namen Convergence
laufen, soll auch der Spielesektor mittels Gamepad-Integration für Galaxy-Smartphones gangbar gemacht werden. Für das Finden von Mitspielern wurde die Chord genannte Technologie vorgestellt. Sie hilft mittels UDP-Discover
über alle Adapter hinweg, spielfreudige Gegner
im direkten Umkreis zu finden. Dies und mehr
zeigte Kyuho Kim (Senior Vice President, Media
Solution Center, Samsung Electronics). Er sagte auch, es werde derzeit an einem GameDeveloper-Kit gearbeitet. Damit kann jedes GalaxySmartphone einfach in eine Spielekonsole verwandelt werden. Wenn ein Smart TV vorhanden ist, kann dieser alternativ zur Ausgabe genutzt werden.
Um die Spiele-Entwickler einfach auf diese
Plattform zu bringen, wird mit dem Hersteller
Unity zusammengearbeitet. Neben dem Consumer-Bereich will Samsung auch noch stärker im
Enterprise-Markt mitmischen. Ein Angriff auf
BlackBerrys Domäne, die gerade einige Erschütterung erhält. Daher stellte Injong Rhee (Senior
Vice President, B2B R&D Group / Technology)
2/2014

die Sicherheitslösung KNOX vor (Bild 4). Es gebe
für eine solche Lösung einen großen Markt, sagte er. Nach Samsungs Angaben werden 40 Prozent der Smartphone-Verkäufe im EnterpriseBereich getätigt. Außer einem MDM für Galaxy
Smartphones geht es bei KNOX um eine dem
BlackBerry-Balance ähnliche Lösung von Privat- versus Business-Apps. Diese werden in separaten Kontexten ausgeführt. Mehr dazu sollte in den Sessions gezeigt werden. Denn bereits
die angekündigten eineinhalb Stunden Keynote
waren zu diesem Zeitpunkt schon lange überzogen. Aber genau dies sowie die ungehypte
Stimmung machten die Veranstaltung überraschend charmant.
David Eun (EVP of the Open Innovation Center Samsung Electronics) zeigte dann kurz vor
dem Ende noch einen Überblick über das OpenInnovation-Programm (Bild 5): ein Samsung-eigener Inkubator, in dem sich Start-ups mit Hilfe
von Samsung verwirklichen können.
Am Schluss der Keynote gab es dann doch
noch eine kleine Überraschung. Michael Ludden (Senior Manager of Media Solution Center America at Samsung Electronics) schloss die
zeitlich überzogenen Keynote mit der Mitteilung, dass jeder Teilnehmer am zweiten Tag der
Konferenz ein Galaxy-Note-8-Tablet bekommen
wird (Bild 6). Damit setzt Samsung ganz klar ein
Zeichen, dass die Stift-Hardware weiter entwickelt werden soll. Die Keynote zeigte allerdings
ganz klar, dass die Nummer-eins-Position im
Android-Markt weiter gehalten werden soll und
die Entwickler sogar dazu gebracht werden sollen, von Googles Play Store in den Samsungeigenen Marktplatz zu wechseln. Auch ein Einbinden des eigenen Samsung API wird sehr begrüßt.

Injong Rhee stellt die Sicherheitslösung KNOX vor (Bild 4)

Die Sessions
Ein gut gefülltes Programm konnten die Teilnehmer sehen. Bis zu fünf Sessions wurden dabei simultan gezeigt, insgesamt über 40. Hier
wurde die gesamte Produktpalette abgebildet,
natürlich mit dem Schwerpunkten Smart TV
und Android API. Durch jede Session zu gehen
würde sicherlich den Rahmen der Berichterstattung sprengen. Aber jeder Entwickler hatte zu
jeder Technologie immer die Chance, etwas Passendes zu finden.
1300 Teilnehmer ist schon eine Ansage. Diese
kamen tatsächlich aus allen Teilen der Welt, von
Indien über Holland, Kanada, England und allen Teilen der USA. Wenn man Teilnehmer fragte, warum sie herkamen, bekam man immer die
gleiche Antwort: »Ich will wissen, was Samsung
als Nächstes macht, daher ist es wichtig hier zu
sein.« Auf die Anschlussfrage, ob für Samsung
entwickelt, wird kam häufig: »Ja, die Gerä- ▶

David Eun präsentiert das OpenInnovation-Programm (Bild 5)

131

beyond dev

Michael Ludden, Senior
Manager of Media Solution
Center America (Bild 6)

te werde gut im Markt angenommen und man
kennt die Hardware.«
Der stark fragmentierte Android-Markt
macht es für viele Entwickler schwer, einen
Standard zu finden. Durch die große Verbreitung von Samsung-Geräten wird hier eine gewisse Sicherheit gegeben. Es wurde auch unter den Teilnehmern diskutiert, ob Samsung das
nächste Nokia ist.
Die Geräte laufen, sind ordentlich verarbeitet
und bezahlbar. Also das, was auch Nokia in den
späten 90ern zu den Zeiten der Feature-Phones
51xx, 6xxx oder der Communicator-Reihe war.

Die Aussteller

Link zum Thema
Video der Keynote
▶ http://global.samsung
tomorrow.com/?p=29411

Immer wieder spannend sind die Boothes der
Aussteller. Hier hat Samsung wirklich alles richtig gemacht. Alle Aussteller wurden am zweiten
Tag im Grand Ballroom untergebracht, in dem
am Tag zuvor auch die Keynote gehalten wurde.
Um den Ausstellern auch Publikum zu geben,
wurde eine Art Bingo gespielt (Bild 7).
Jeder Teilnehmer bekam eine Karte mit Austellernummern. Wenn er sich bei einem Stand
informiert hatte, wurde das jeweilige Kästchen
vom Aussteller gestempelt. Waren mindestens
sieben Stempel vorhanden, konnte man bei der
Verlosung von drei Galaxy Note 3 teilnehmen.
Neben dieser Aussteller-Gamification war
ein klares Business vor Ort zu sehen. Aussteller
wie der Dropbox-Konkurrent Box.net waren da.
SAP USA zeigte seine SAP-mobile-Lösung auf
Samsung-Geräten, die mit dem neuen KNOXSicherheitsmodell zusammen lief.
Die üblichen Advertisement-Agenturen waren natürlich auch vertreten. Außerdem vertreten waren noch etwas Testing-Dienstleistung sowie einige Samsung eigene Departments. Übersichtlich, aber nicht zu klein oder zu groß: 28
Aussteller waren vor Ort.

Die Party

Eine Art Bingo sorgte für Publikum
bei den Austellern (Bild 7)

132

Wie es sich für eine Konferenz gehört, hat
Samsung ein Social Event am ersten Abend organisiert. Dabei wurde das Exploratorium am
San Francisco Pier 15 angemietet. Dies ist eine
Art große Mitmach-Erlebnis-Ausstellung.
Dabei werden viele physikalische Gesetze spielerisch erklärt. Diese konnten alle entspannt und unter Ausschluss der normalen Besucher ausprobiert werden. Außerdem wurde
ein wirklich großartiges Catering geboten, das
von Vegan bis fleischlicher Küche keine Wünsche offen ließ.
Neben dem leiblichen Wohl wurde mit Damon Wayans ein bekannter Schauspieler aus der
amerikanische ABC-Serie »My Wife and Kids«
für die intellektuelle Unterhaltung präsentiert.

Er las ein Poem auf die elektronische Weiterentwicklung von Unterhaltung und wie es in Zukunft in den Medien aussehen könnte. Danach
sprach der CEO von Samsung noch einmal kurz,
und der aktuell in SF angesagte DJ Cams sorgte für die musikalische Unterhaltung am Abend.

Trends
Sicherlich stellt sich nach den zwei Tagen die
Frage, was sich an Trends ablesen lässt. Klar ist,
dass wir in Europa mit dem Thema Smart TV
noch viel Entwicklungspotenzial haben. Zwar
wird aktuell etwa jeder zweite Fernseher mit einer Netzwerkbuchse und smarter Platine ausgeliefert, aber die Anwendungen fehlen noch.
Wenn es in den USA normal ist, Obamas Weekly Adress per Smart-TV-App zu sehen, wird es
hier noch schwierig, die Ansprache der Kanzlerin per Smart TV zu konsumieren.
Aber mit dem normalen einen Jahr Entwicklungsversatz, die zu den USA herrschen, muss
diese Frage in einem Jahr beantwortet werden. Wichtig ist die Feststellung, dass die Entwicklung für Smart TVs auf den Webstandards
­HTML5, CSS und JavaScript fußt und damit einfach und schnell bestehende Anwendungen zu
portieren sein sollten und das Neuentwickeln
vereinfacht wird.
Was sich aber bereits bei den Spielen abzeichnet, ist das Thema Second Screen. Da wird plötzlich das Tablet zum Inventar für ein Rollenspiel
auf dem PC beziehungsweise der Konsole, zu einer Karte der Umgebung oder etwas anderem.
Dieser Trend wird sich sicher weiter ausbreiten.
Die Smart-Home-Entwicklung ist auch in
Deutschland nicht aufzuhalten. Allerdings fehlt
es hier an einem offenen Standard für die Entwickler. Ob RWE Smart Home oder Philips Hue
oder Samsung Intelligence Fridge, alles ist derzeit proprietär. Es wird sich zeigen, ob es hier einen Konsolidierung oder einen Quasi-Standard
geben wird.
Der Trend der Wearables ist aber ganz klar.
Auch Samsung spielt mit dem Galaxy Gear in
der Liega der SmartWatch mit. Allerdings bisher ohne SDK für Entwickler. Doch das soll sich
noch ändern.

Fazit
Alle reden über Themen wie Second Screen,
Wearables, Smart Home oder TV. Samsung
zeigte auf der Konferenz, dass sie in der Lage
sind, alle Teile zu liefern. Dabei wird es natürlich ein Vendor-Lock-in geben. Aber dieser Konzern könnte in den nächsten Jahren wirklich eine komplette Lösung aller Medien und Dienste entwickeln. Ob die Entwickler dies allerdings
mitmachen, ist die große Frage.
[mb]
2/2014

DWX

Developer
Week 2014

14.-17. Juli 2014
NCC Ost, Nürnberg

2

1

4

3

7

6

14

13

12

11

5

20

19
18
22

24

23
26

Werden auch Sie Aussteller:
developer-week.de/Ausstellung

beyond dev
Prognosen für das Jahr 2014

Mobile Trends
Netbiscuits hat seine Mobile-Web-Prognosen für das Jahr 2014 veröffentlicht: Nutzer wollen überall
und jederzeit angepasste mobile Webanwendungen. Von Michael Hofer

Autor
Michael Hofer
ist Autor und Entwickler mit dem
Spezialgebiet HTML, XML und
CSS. Außerdem programmiert
er in PHP.
Inhalt
Mobile Trends für das Jahr 2014.

Immer mehr Menschen leiden an
No-Mobile-Phone-Phobia (Bild 1)

134

N

etbiscuits, ein führender Anbieter von Soft­
ware-Lösungen für adaptive, mobile Web­
anwendungen, hat seine Prognosen zur Ent­
wicklung des mobilen Internets im Jahr 2014
veröffentlicht und sagt eine steigende No-Mobi­
le-Phone-Phobia (Nomophobie) voraus. Zudem
haben Nutzer schnell wechselnde Erwartungen
und steigende Ansprüche an Geräteanwendun­
gen, auf die sie von überall aus zugreifen.
Die Prognosen beruhen auf Trends, die aus
der Netbiscuits Cloud Platform ersichtlich wer­
den. Diese zeigen außerdem, wie wichtig geräte­
übergreifende Anwendungen sind. Denn Nut­
zer wollen mit verschiedenen Geräten gleich­
zeitig mit Marken interagieren und ihre eigene,
persönliche Online-Erfahrung aufbauen.
Jeder möchte immer und überall auf das Inter­
net zugreifen können und erwartet die richtige
Anwendung für seinen spezifischen Nutzungs­
kontext. Eine der größten Herausforderungen
für Unternehmen im Jahr 2014 wird es sein,
genau das bieten zu können. Die Interaktion
von Unternehmen mit ihren Kunden wird sich
grundlegend verändern. Unternehmen müssen
sich für eine der größten Veränderungen jemals
rüsten. Marken werden künftig nicht mehr al­
lein mit einem Unternehmen in Verbindung ge­
bracht werden. Sie rücken mit den Menschen,

die mit ihnen in Verbindung treten, zusammen –
und Ende 2014 wird das eine größere Rolle spie­
len als je zuvor.
»2013 hatten viele Unternehmen einen ganz
klaren Fokus und rückten das Thema Mobili­
ty zum ersten Mal ins Zentrum ihrer Webstra­
tegie – aber das war erst der Anfang. Wir begin­
nen jetzt erst zu verstehen, wie sehr sich Kun­
den auf das mobile Internet verlassen, und dass
für eine mobile Weberfahrung beides wichtig ist
– das Gerät an sich und der Nutzungskontext«,
so Daniel Weisbeck, COO und CMO bei Net­
biscuits. »2014 wird die Anzahl der neuen Ge­
räte wieder enorm steigen, viele Nutzer werden
mehrere Geräte besitzen und diese auch zeit­
gleich verwenden. Sie rechnen damit, dass Un­
ternehmen optimierte Webseiten anbieten und
sie die bestmögliche Anwendung für das Gerät
bekommen, das sie nutzen, und auch Aspek­
te, wie Bandbreite oder Internetgeschwindigkeit
berücksichtigt werden.«

Die Prognosen
Als Nomophobie bezeichnet man die Angst,
mobil unerreichbar zu sein – zum Beispiel we­
gen geringem Akku-Status, einem Funkloch
oder wenn das Mobilgerät verloren geht. Man­
che meinen sogar, sie könnten ohne mobiles Te­
lefon nicht normal funktionieren. Was ist der
Grund dafür? Haben sie ein so großes Vertrauen
in ihr Gerät und glauben, dass es ihnen hilft, ihr
tägliches Leben zu meistern? Die Nutzer rech­
nen damit, dass bestimmte Informationen im­
mer verfügbar sind, wenn sie sie brauchen, und
dass sie tägliche Dinge wie Lebensmittel oder
Parkplatzgebühren mit ihrem Mobilgerät be­
zahlen können. Die Nutzer verlassen sich auf
ihr Gerät und können nicht mehr ohne (Bild 1):
■ Dieser Trend wird von neuen Geräten wie
Smartwatches und Wearables weiter voran­
getrieben. Der Einfluss von Innovationen wie
Google Glass ist dagegen gering. Ein beträcht­
liches Wachstum wird im Bereich WearableTechnik erwartet.
■ Exetech entwickelt mit XS-3 eine AndroidSmartwatch mit Touchscreen. Wi-Fi, mobile
Verbindungsfähigkeit und GPS ermöglichen es
den Trägern dieser Uhr, direkt über ihr Hand­
gelenk zu telefonieren.
2/2014

beyond dev
■ Wearable-Technik wird dem Nutzer das Inter­

net näher bringen als je zuvor. Sensoren kön­
nen Informationen wie zum Beispiel zur Ge­
sundheitskontrolle liefern, und die generel­
le Nutzung von Ortungsdaten wird entschei­
dend.
Das ist der erste Schritt in Richtung Verbrau­
cherakzeptanz bei der Verbindung von tagtäg­
lichen Dingen mit dem Internet.

Gerätelandschaft verändert sich
Immer mehr Menschen werden 2014 ein erstes
mobiles Gerät kaufen können – vor allem in den
Schwellenländern. Dort sind mobile Geräte für
viele die erste und einzige Möglichkeit, online
zu gehen. Dadurch wird es immer wahrschein­
licher, dass die erste Berührung eines Kunden
mit einer Marke über ein mobiles Gerät erfolgt:
■ Über Outlets werden mehr kostengünstige Ge­
räte verfügbar sein. Zum Beispiel werden Su­
permärkte überall auf der Welt günstigere Al­
ternativen zu den führenden Gerätemarken auf
Lager haben.
■ 2014 wird das Jahr der uneinheitlichen Bild­
schirmgrößen. Je mehr Geräte im 5- bis 7-ZollBereich auf den Markt kommen, desto mehr
traditionelle Geräteklassifikationen, die kei­
ne weiteren Informationen bieten, werden un­
brauchbar.
■ Es gibt viel Raum zum Wachsen. Die Markt­
durchdringung der Smartphones in Ländern
wie Brasilien (26 Prozent) und Indien (13 Pro­
zent) bleibt gering (Bild 2).
■ Im Juli 2013 gab es 26 verschiedene Bildschirm­
größen unter den 100 meistgenutzten Geräten
auf der Netbiscuits Cloud Platform. Ende 2014
wird diese Zahl die 30 leicht überschreiten.
Netbiscuits geht davon aus, dass 2014 das Jahr
der frustrierten Kunden wird, die eine bestän­
dige, geräteübergreifende Anwendung erwar­
ten. Entscheidende Kriterien in 2014 und da­
mit auch Unterscheidungsmerkmal von Unter­
nehmen werden die Möglichkeiten sein, schnell
von einem Gerät auf ein anderes zu wechseln
und dabei mit einer Aktion fortfahren zu kön­
nen sowie das Multitasking mit mehreren Ge­
räten. Unternehmen, die diese bildschirmüber­
greifenden Anwendungen nicht bieten, werden
zunehmenden Wettbewerbsnachteilen gegen­
überstehen:
■ Mehr Unternehmen erörtern, wie bildschirm­
übergreifende Anwendungen in ihr Design in­
tegriert werden können.
■ Eine große Mehrheit an C-Level Executives in
den USA geben an, dass die Möglichkeit von
Multiscreen entscheidend oder sehr wichtig
für ihre Strategie ist (80 Prozent).
■ Das Ziel sollte sein, die Möglichkeit zu haben,
eine Anwendung von einem Gerät auf ein an­
2/2014

deres zu übertragen, auch wenn die Suchop­
tion in 2014 wahrscheinlich die gängigste Art
bleiben wird, um eine Aktivität auf einem an­
deren Gerät aufzugreifen.
Die Menschen wollen Geräte und Anwendun­
gen, die ihrem Lebensstil und ihrem Nutzungs­
kontext entsprechen. Unternehmen, die es ver­
stehen »Individualisiertes für alle« zu bieten,
werden die Gewinner 2014 sein. Der Knack­
punkt dafür wird die Erkennung der richtigen
Zutaten sein, die es ermöglichen, dass es für je­
den Einzelnen optimiert ist, und die dem Nutzer
das Gefühl geben, dass es hochgradig persona­
lisiert ist und speziell für sie entwickelt wurde.
Die auf Kundenwünsche anpassbaren Elemen­
te können mit Web Analytics sichtbar werden.
Web Analytics liefern umsetzbare Erkenntnis­
se und werden ein zentrales Thema in 2014 sein:
■ Durch die Kombination von Webverhalten mit
Mobile Analytics ergeben sich enorme Mög­
lichkeiten für Marketers.
■ 86 Prozent der Marketers sind der Meinung,
dass Big Data die Funktion des Marketings ver­
ändern wird.
■ Anbieter versuchen bereits, für jeden alles zu
sein, von einem Mobilgerät, das auf Windows
und Android läuft, über Google Project Ara,
das es Nutzern ermöglicht, ihre eigenen Mo­
dule auf den Mobilgeräten hinzuzufügen – wie
Tastaturen und Sensoren.
■ Der Wunsch nach kundenorientierter Anpas­
sung wird neue Technologien vorantreiben,
wie auch bei den 3D-Druckern.
Weitere Informationen zu den Mobile-Web-Pro­
gnosen von Netbiscuits für 2014 findet man im
Web unter der Adresse www.netbiscuits.com/
resources/netbiscuits-reports/2014-trend-predic
tions-for-the-mobile-web. 
[mb]

Vor allem in den Schwellen­
ländern werden 2014 immer
mehr Menschen ein erstes
mobiles Gerät kaufen (Bild 2)

135

Neue Bücher

CSS3 – Die neuen Features für fortgeschrittene Webdesigner
Webdesign

▶ Autorin:

Florence Maurice
Verlag: dpunkt, 2013,
374 Seiten
Preis: 39,90 Euro
ISBN: 978-3-86490-118-8
Auch als E-Book verfügbar

Kein Webdesigner kommt heute mehr an
CSS3 vorbei. Dieses Buch bietet für diese Ziegruppe profundes Wissen zu den
wichtigsten Features und zu fortgeschrittenen CSS3-Techniken samt einer Fülle
von Tricks für die Praxis.
Die Themen, die in dem Buch schwerpunktmäßig behandelt werden, sind grafische Effekte wie runde Ecken, Transparenzen und Schatten, Webfonts, Farbverläufe, die Transformation von Elementen im
3D-Raum und die Bewegung von Inhalten mit Transitions und Animations. Weitere Schwerpunkte, die ausführlich behandelt werden, sind Responsive Layouts für
Smartphones, Tablets und Desktops und
die neuen Layoutmodule.
Anhand zahlreicher Beispiele zeigt die
Autorin Florence Maurice, die auch für die
web & mobile developer schreibt, diese Techniken und gibt dem Leser dabei auch Hinweise für die richtige Strategie im Umgang mit älteren Browsern. Ein besonderer Schwerpunkt liegt auf der Erstellung
performanter und mobiler Webseiten.

Die Entwicklung von CSS bleibt nicht
stehen, darum sind die aktuellsten Innovationen in die zweite Auflage des Buches
eingearbeitet worden. Dies betrifft vor allem CSS3 für mobile Geräte, Icon-Fonts,
CSS3-Buttons, Bildüberblendeffekte, animierte Seitenübergänge, Off-Canvas-Darstellung, die neue Flexbox-Syntax, Ausklappnavigation fürs Responsive Webdesign, Einführung in LESS/Sass sowie das
Zusammenspiel mit JavaScript bei Transitions und Animations.
Das Buch richtet sich an fortgeschrittene
Webdesigner und setzt fundierte Kenntnisse im klassischen CSS 2.1 sowie Erfahrung in der Gestaltung von Weblayouts
voraus. Wer noch nicht mit CSS3 gearbeitet hat, findet hier einen anschaulichen
Einstieg. Wer bereits das eine oder andere CSS3-Feature einsetzt, aber keinen systematischen Überblick hat, erfährt hier
die Zusammenhänge und lernt nützliche
Tricks und weitergehende Möglichkeiten.
Das Layout des Buches ist aufwendig und
durchgängig in Farbe gehalten.

In diesem Programmierkurs erwirbt der
Leser das JavaScript-Grundwissen für die
Entwicklung interaktiver Websites. Wichtige Techniken und Frameworks – Ajax,
CSS, HTML5, jQuery und jQuery Mo­bile –
werden alle behandelt. Die einzelnen Themen werden jeweils mit einer kurzen Beschreibung der Theorie, einem aussagefähigen Screenshot, einem vollständigen,
lauffähigen Beispielprogramm und einer
ausführlichen praktischen Erläuterung
vorgestellt.
Auf diese Weise erhält der Leser einen
raschen Einstieg in jedes Thema. Er ist
nicht gezwungen, vereinzelte Codezeilen
zunächst in einen passenden Kontext zu
setzen, um ihre Wirkung zu betrachten.
Alle Beispielprogramme finden sich darüber hinaus auf dem Datenträger zum
Buch beziehungsweise bei der elektronischen Buchausgabe im Download-Paket.
Nach der Einleitung folgen die Grundlagen der Programmierung. Hier zeigen
sich Ähnlichkeiten mit vielen anderen
Programmiersprachen. Objekte spielen

in JavaScript und auch im Buch eine große Rolle. Zur Interaktion mit dem Benutzer wird mit Ereignissen und ihren Folgen
gearbeitet, auch dies wird in einem Kapitel ausführlich erläutert. Die Kenntnis des
Aufbaus einer Internetseite nach dem Document Object Model (DOM) wird ebenfalls vermittelt. Auch den Themen Ajax
und CSS ist jeweils ein Kapitel im Buch gewidmet. Wie man die weit verbreiteten Bibliotheken jQuery und jQuery UI in eigenen Applikationen einsetzen kann, erfährt
der Leser ebenfalls.
Abgeschlossen wird das Buch mit einem Kapitel »Beispielprojekte«, in dem in
einer Reihe von größeren und ausführlich kommentierten Beispielprojekten das
Zusammenspiel vieler Elemente gezeigt
wird. Die zusätzlichen, aber noch nicht
überall vorhandenen Möglichkeiten von
HTML5 und JavaScript werden ebenfalls
erläutert.
Das Buch wendet sich an den JavaScriptEinsteiger, der in die Welt der dynamischen Webanwendungen einsteigen will.

Einstieg in JavaScript
Programmierung

▶ Autor: Thomas Theis
Verlag: Galileo Computing, 2014,
438 Seiten mit CD
Preis: 24,90 Euro
ISBN: 978-3-8362-2587-8
Auch als Online-Ausgabe verfügbar

136

2/2014

Neue Bücher

Android 4 – Übungsbuch für die App-Entwicklung
Mobile Development

▶ Autorin: Elisabeth Jung
Verlag: mitp, 2013,
464 Seiten
Preis: 24,95 Euro
ISBN: 978-3-8266-9501-8

Dieses Buch ist kein Lehrbuch, sondern ein
reines Übungsbuch. Es richtet sich einerseits an Leser, die ihre Android-Kenntnisse anhand zahlreicher praktischer Übungen durch »Learning by Doing« vertiefen und festigen möchten. Es ist aber auch
geeignet für Java-Programmierer, die sich
anhand von Übungen in die Android-Programmierung einarbeiten möchten. Entsprechende Java-Kenntnisse und grundlegende Android-Kenntnisse werden vorausgesetzt.
Jedes Kapitel enthält zunächst eine kompakte Zusammenfassung des Stoffes, der
in den Übungsaufgaben verwendet wird.
Anschließend haben Sie die Möglichkeit,
zwischen Aufgaben in drei verschiedenen
Schwierigkeitsstufen – von einfach bis anspruchsvoll – zu wählen. Anhand dieser
Aufgaben können Sie Ihr Wissen praktisch
testen. Am Ende der Kapitel finden Sie
vollständige und kommentierte Musterlösungen.
Das dritte Kapitel ist das umfangreichste des Buches. Es befasst sich mit der er-

weiterten App-Programmierung. Das in
Android integrierte SQLite-Datenbanksystem wird vorgestellt und es wird anhand von Übungsaufgaben gezeigt, wie
Daten in einer Datenbank gespeichert, geändert, gelöscht und abgefragt werden
können. Diese Daten gehören der App, in
der die DB erstellt wurde. Sollten sie auch
anderen Applikationen zur Verfügung gestellt werden, kommen Content Provider
zum Einsatz.
Des Weiteren geht es in diesem Kapitel um die Art und Weise, wie Multimedia- und Geocoding-Eigenschaften in Android-Apps eingebunden werden können.
Anhand von Tests wird das Laden von
Bild-, Sound- und Videodateien aus dem
lokalen Verzeichnis, von der SD-Karte und
aus dem Internet geprüft.
Es folgen Hinweise für das Laden und
Testen der Apps auf einem Smart­phone,
Remote Debugging, das Erstellen von
Screen­shots auf dem Handy, die Veröffentlichung von Applikationen und das
An­droid SDK 4.2.2.

Der Social Media Manager
Soziale Netzwerke

▶ Autorin: Vivian Pein
Verlag: Galileo Computing, 2014,
575 Seiten
Preis: 29, 90 Euro
ISBN: 978-3-8362-2023-1
Auch als Online-Ausgabe verfügbar

2/2014

Noch viel zu oft sieht die Realität in
Deutschland nach Auffassung der Autorin Vivian Pein so aus, dass die Verantwortung für das Social-Media-Engagement eines Unternehmens entweder zusätzlich von einem webaffinen Mitarbeiter
aus dem Bereich Marketing oder PR übernommen oder direkt einem Praktikanten
übertragen wird. Die Reichweite einer solchen Entscheidung ist den Verantwortlichen dabei oft nicht klar. Die Person, die
ein Unternehmen im Bereich Social Media vertritt, hat bei bestimmten Zielgruppen eine höhere Reichweite als bisweilen
der Pressesprecher. Ein Social Media Manager ist daher der richtige Mann/Frau für
einen solchen Job.
Was ist ein Social Media Manager? Welche Aufgaben nimmt er im Unternehmen
wahr? Und welche Ausbildungsmöglichkeiten gibt es für diesen neuen Beruf? Auf
diese Fragen gibt das Buch Antworten. Es
ist ein Handbuch für jeden, der diesen Job
anstrebt oder die Stelle im Unternehmen
einführen möchte. Der Leser erfährt alles

zum Thema Online-Marketing, Marktforschung, Online-Recht und Kundenkommunikation und lernt die Grundlagen des
Social Media Managements kennen.
Das Buch ist in drei Teile gegliedert. Im
ersten Teil geht es um das Berufsbild, die
Anforderungen und das Aufgabengebiet.
Hier erfährt der Leser, was ein Social Media Manager können muss, welche Ausund Weiterbildungsmöglichkeiten es gibt
und wie er sich erfolgreich bewirbt.
Der zweite Teil zeigt, wie man erfolgreich in das Social Media Management
einsteigt. Der Leser lernt die Grundlagen
und Möglichkeiten kennen, die Social Media für die unterschiedlichen Unternehmensbereiche bietet. Es geht um die richtige Strategie, um Corporate Content und
um Change Management.
Der dritte Teil erläutert, wie man Social Media im Unternehmen richtig einsetzt. Der Praxisguide hilft bei der Standortbestimmung und stellt mögliche Modelle zur reibungslosen Integration von
Social Media vor.

137

Termine
Schulungen, Seminare, Konferenzen 2014
Termin

Thema

Anbieter

Webadresse

Ort

Januar 2014
13.01.14 – 15.01.14

Webseiten für mobile Endgeräte (Mobile Webseiten)

SanData IT-Trainingszentrum

www.it-trainings.de

Berlin

13.01.14 – 15.01.14

Objektorientierte Geschäftsprozessmodellierung mit der UML

Protranet Institut

www.protranet.de

Berlin

13.01.14 – 15.01.14

Webseiten für mobile Endgeräte (Mobile Webseiten)

SanData IT-Trainingszentrum

www.it-trainings.de

Frankfurt/M.

13.01.14 – 15.01.14

Webseiten für mobile Endgeräte (Mobile Webseiten)

SanData IT-Trainingszentrum

www.it-trainings.de

München

21.01.14 – 23.01.14

Omnicard – Ausstellung und Konferenz für Chipkartentechnologie

InTime Berlin

www.omnicard.de

Berlin

23.01.14 – 24.01.14

HTML5, CSS3 und JavaScript

Integrata

www.integrata.de/seminare

Münster

27.01.14 – 29.01.14

C# – Kompakt

Hilf!

www.hilf.de

München

28.01.14 – 29.01.14

Der IT-Lizenzmanager

Management Circle

www.managementcircle.de

Frankfurt/M.

Februar 2014
03.02.14 – 07.02.14

OOP 2014

SIGS Datacom

www.sigs-datacom.de

München

04.02.14 – 06.02.14

Cloudzone

Karlsruher Messe- und Kongress
GmbH

www.messe-karlsruhe.de

Karlsruhe
Berlin

17.02.14 – 19.02.14

jQuery JavaScript Framework Einführung

SanData IT-Trainingszentrum

www.it-trainings.de

17.02.14 – 19.02.14

Objektorientierte Geschäftsprozessmodellierung mit der UML

Protranet Institut

www.protranet.de

Berlin

17.02.14 – 19.02.14

jQuery JavaScript Framework Einführung

SanData IT-Trainingszentrum

www.it-trainings.de

Frankfurt/M.

17.02.14 – 19.02.14

jQuery JavaScript Framework Einführung

SanData IT-Trainingszentrum

www.it-trainings.de

München

18.02.14 – 19.02.14

Der IT-Lizenzmanager

Management Circle

www.managementcircle.de

München

18.02.14 – 20.02.14

IT-Trans

Karlsruher Messe- und Kongress
GmbH

www.messe-karlsruhe.de

Karlsruhe
Berlin

18.02.14 – 21.02.14

Build IT Berlin

Messe Berlin

www.messe-berlin.de

20.02.14 – 20.02.14

Metall IT – Fachmesse für Software im Metallhandwerk

Messe Berlin

www.messe-berlin.de

Berlin

24.02.14 – 26.02.14

Business Analyse – Planung und Business Case

ibo Beratung und Training

www.ibo.de

Bad Nauheim

24.02.14 – 27.02.14

Mobile World Congress 2014

GSM Association

www.mobileworldcongress.com

Barcelona

25.02.14 – 26.02.14

Internet World

INTERNET WORLD Business

www.internetworld-messe.de

München

25.02.14 – 26.02.14

Affiliate TactixX 2014

Neue Mediengesellschaft Ulm

www.affiliate-tactixx.de

München

26.02.14 – 28.02.14

jQuery – Programmierung mit der JavaScript-Bibliothek

Integrata

www.integrata.de/seminare

Hamburg

März 2014
03.03.14 – 04.03.14

Illustrator Grundlagen

Macromedia Akademie

www.macromedia-firmenseminare.de

Köln

03.03.14 – 04.03.14

Photoshop Grundlagen

Macromedia Akademie

www.macromedia-firmenseminare.de

München

03.03.14 – 04.03.14

Flash Grundlagen

Macromedia Akademie

www.macromedia-firmenseminare.de

Osnabrück

03.03.14 – 04.03.14

Flash Grundlagen

Macromedia Akademie

www.macromedia-firmenseminare.de

Stuttgart

03.03.14 – 05.03.14

Agiles Projektmanagement SCRUM

Sänger & Partner
Unternehmensberater

http://saenger-projektmanagement.de

Nürnberg

05.03.14 – 06.03.14

Illustrator Aufbau

Macromedia Akademie

www.macromedia-firmenseminare.de

Köln

05.03.14 – 06.03.14

Photoshop Aufbau

Macromedia Akademie

www.macromedia-firmenseminare.de

München

06.03.14 – 07.03.14

HTML5, CSS3 und JavaScript

Integrata

www.integrata.de/seminare

Berlin

11.03.14 – 15.03.14

CeBIT

Deutsche Messe

www.cebit.de

Hannover

17.03.14 – 18.03.14

HTML5 und CSS Grundlagen

Macromedia Akademie

www.macromedia-firmenseminare.de

Stuttgart

17.03.14 – 19.03.14

Objektorientierte Geschäftsprozessmodellierung mit UML

Protranet Institut

www.protranet.de

Berlin

18.03.14 – 19.03.14

Der IT-Lizenzmanager

Management Circle

www.managementcircle.de

Köln

20.03.14 – 21.03.14

Illustrator Aufbau

Macromedia Akademie

www.macromedia-firmenseminare.de

Hamburg

24.03.14 – 25.03.14

Photoshop Grundlagen

Macromedia Akademie

www.macromedia-firmenseminare.de

Hamburg

24.03.14 – 25.03.14

Flash Grundlagen

Macromedia Akademie

www.macromedia-firmenseminare.de

München

25.03.14 – 26.03.14

SMX Search Marketing Expo

Rising Media

www.smxmuenchen.de

München

27.03.14 – 28.03.14

Flash Grundlagen

Macromedia Akademie

www.macromedia-firmenseminare.de

Köln

31.03.14 – 01.04.14

Photoshop Aufbau

Macromedia Akademie

www.macromedia-firmenseminare.de

Hamburg

31.03.14 – 01.04.14

Photoshop Grundlagen

Macromedia Akademie

www.macromedia-firmenseminare.de

Köln

31.03.14 – 01.04.14

Illustrator Aufbau

Macromedia Akademie

www.macromedia-firmenseminare.de

München

31.03.14 – 02.04.14

Webgestaltung II

Integrata

www.integrata.de/seminare

München

SanData IT-Trainingszentrum

www.it-trainings.de

Berlin

April 2014
07.04.14 – 09.04.14

Web-Apps mit HTML5 erstellen

07.04.14 – 09.04.14

Web-Apps mit HTML5 erstellen

SanData IT-Trainingszentrum

www.it-trainings.de

Nürnberg

07.04.14 – 09.04.14

Web-Apps mit HTML5 erstellen

SanData IT-Trainingszentrum

www.it-trainings.de

Stuttgart

14.04.14 – 15.04.14

HTML5, CSS3 und JavaScript

Integrata

www.integrata.de/seminare

Hannover

138

2/2014

Termine

Termin

Thema

Anbieter

Webadresse

Ort

14.04.14 – 16.04.14

jQuery JavaScript Framework Einführung

SanData IT-Trainingszentrum

www.it-trainings.de

Berlin

14.04.14 – 16.04.14

jQuery JavaScript Framework Einführung

SanData IT-Trainingszentrum

www.it-trainings.de

Frankfurt/M.

14.04.14 – 16.04.14

jQuery JavaScript Framework Einführung

SanData IT-Trainingszentrum

www.it-trainings.de

München

28.04.14 – 29.04.14

Informationssysteme im Projektmanagement

Sänger & Partner Unternehmensberater

http://saenger-projektmanagement.de

Frankfurt/M.

28.04.14 – 30.04.14

Objektorientierte Geschäftsprozessmodellierung mit UML

Protranet Institut

www.protranet.de

Berlin

Mai 2014
13.05.14 – 13.05.14

ecommerce conference

INTERNET WORLD Business

www.ecommerce-conference.de

Hamburg

14.05.14 – 16.05.14

IT-Projekte erfolgreich managen

Sänger & Partner
Unternehmensberater

http://saenger-projektmanagement.de

Frankfurt/M.

19.05.14 – 21.05.14

Objektorientierte Geschäftsprozessmodellierung mit UML

Protranet Institut

www.protranet.de

Berlin

20.05.14 – 20.05.14

ecommerce conference

INTERNET WORLD Business

www.ecommerce-conference.de

Frankfurt/M.

22.05.14 – 22.05.14

ecommerce conference

INTERNET WORLD Business

www.ecommerce-conference.de

München

26.05.14 – 27.05.14

HTML5, CSS3 und JavaScript

Integrata

www.integrata.de/seminare

Stuttgart

26.05.14 – 28.05.14

jQuery – Programmierung mit der JavaScript-Bibliothek

Integrata

www.integrata.de/seminare

Frankfurt/M.

Juni 2014
23.06.14 – 25.06.14

Web-Apps mit HTML5 erstellen

SanData IT-Trainingszentrum

www.it-trainings.de

Berlin

23.06.14 – 25.06.14

Agiles Projektmanagement SCRUM

Sänger & Partner
Unternehmensberater

http://saenger-projektmanagement.de

Düsseldorf

23.06.14 – 25.06.14

Web-Apps mit HTML5 erstellen

SanData IT-Trainingszentrum

www.it-trainings.de

Nürnberg

23.06.14 – 25.06.14

Web-Apps mit HTML5 erstellen

SanData IT-Trainingszentrum

www.it-trainings.de

Stuttgart

25.06.14 – 27.06.14

Business Analyse – Planung und Business Case

ibo Beratung und Training

www.ibo.de

Hamburg

26.06.14 – 27.06.14

Informationssysteme im Projektmanagement

Sänger & Partner
Unternehmensberater

http://saenger-projektmanagement.de

Köln

30.06.14 – 02.07.14

Objektorientierte Geschäftsprozessmodellierung mit UML

Protranet Institut

www.protranet.de

Berlin

30.06.14 – 02.07.14

IT-Projekte erfolgreich managen

Sänger & Partner
Unternehmensberater

http://saenger-projektmanagement.de

Nürnberg

Juli 2014
10.07.14 – 11.07.14

HTML5, CSS3 und JavaScript

Integrata

www.integrata.de/seminare

Köln

14.07.14 – 16.07.14

Webgestaltung II

Integrata

www.integrata.de/seminare

Münster

14.07.14 – 17.07.14

Developer Week 2014

Neue Mediengesellschaft Ulm

www.developer-week.de

Nürnberg

21.07.14 – 23.07.14

Objektorientierte Geschäftsprozessmodellierung mit UML

Protranet Institut

www.protranet.de

Berlin

Frankfurt/M.

ab August 2014
18.08.14 – 19.08.14

HTML5, CSS3 und JavaScript

Integrata

www.integrata.de/seminare

25.08.14 – 27.08.14

Objektorientierte Geschäftsprozessmodellierung mit UML

Protranet Institut

www.protranet.de

Berlin

25.08.14 – 27.08.14

XML Cocoon

Protranet Institut

www.protranet.de

München

29.08.14 – 03.09.14

Internationale Funkausstellung IFA Berlin

Messe Berlin

www.ifa-berlin.de

Berlin

15.09.14 – 17.09.14

Business Analyse – Planung und Business Case

ibo Beratung und Training

www.ibo.de

München

15.09.14 – 17.09.14

jQuery – Programmierung mit der JavaScript-Bibliothek

Integrata

www.integrata.de/seminare

München

15.09.14 – 17.09.14

IT-Projekte erfolgreich managen

Sänger & Partner Unternehmensberater

http://saenger-projektmanagement.de

Würzburg

15.09.14 – 17.09.14

XML Cocoon

Protranet Institut

www.protranet.de

München

22.09.14 – 23.09.14

HTML5, CSS3 und JavaScript

Integrata

www.integrata.de/seminare

München

25.09.14 – 26.09.14

Informationssysteme im Projektmanagement

Sänger & Partner Unternehmensberater

http://saenger-projektmanagement.de

Nürnberg

29.09.14 – 01.10.14

Objektorientierte Geschäftsprozessmodellierung mit UML

Protranet Institut

www.protranet.de

Berlin

08.10.14 – 09.10.14

OMCap

Online Marketing Capital

www.omcap.de

Berlin

08.10.14 – 10.10.14

IT & Business, DMS Expo und CRM-Expo

Messe Stuttgart

www.messe-stuttgart.de

Stuttgart

20.10.14 – 22.10.14

XML Cocoon

Protranet Institut

www.protranet.de

München

23.10.14 – 24.10.14

HTML5, CSS3 und JavaScript

Integrata

www.integrata.de/seminare

Düsseldorf

27.10.14 – 29.10.14

Objektorientierte Geschäftsprozessmodellierung mit UML

Protranet Institut

www.protranet.de

Berlin

10.11.14 – 12.11.14

Agiles Projektmanagement SCRUM

Sänger & Partner Unternehmensberater

http://saenger-projektmanagement.de

Frankfurt/M.

17.11.14 – 19.11.14

jQuery – Programmierung mit der JavaScript-Bibliothek

Integrata

www.integrata.de/seminare

Düsseldorf

19.11.14 – 21.11.14

IT-Projekte erfolgreich managen

Sänger & Partner Unternehmensberater

http://saenger-projektmanagement.de

Düsseldorf

24.11.14 – 26.11.14

Objektorientierte Geschäftsprozessmodellierung mit UML

Protranet Institut

www.protranet.de

Berlin

24.11.14 – 26.11.14

XML Cocoon

Protranet Institut

www.protranet.de

München

2/2014

139

Trends am Arbeitsmarkt
Monatliches Ranking

Die Jobmaschine brummt
An dieser Stelle finden Sie jeden Monat eine
Antwort auf die Frage, in welcher der 15 größ­
ten deutschen Städte es besonders viele Job­
angebote für Webentwickler gibt.
Am Stichtag für die Datenerhebung im
Monat Dezember waren in der Datenbank der Meta-Jobsuchmaschine Jobkralle.de 19.775 Jobs zu finden, die entweder
das Wort Entwickler oder das Wort Developer in der Titelzeile des Angebots aufwiesen und noch nicht älter als vier Wochen
waren. Rund 6900 dieser Stellenangebote
waren sogar höchstens eine Woche alt. Die
Nachfrage nach Entwicklern ist weiterhin
überaus groß.
Detaillierter betrachtet werden hier in
jedem Monat die Zahl der Jobs für Webent­
wickler sowie die Zahl der Jobs für Mobi-

le Developer, wobei bei den Angeboten
für Webentwickler die Nachfrage in den
15 größten deutschen Städten betrachtet
wird, für die Entwickler für MobilgeräteAnwendungen jedoch auf die Bundesländer geschaut wird.
Tabelle 1 zeigt die Verteilung der Jobangebote auf die 15 größten deutschen Städte. Die Reihenfolge der vier erstplatzierten Städte lautet wie im Vormonat: München, Berlin, Hamburg und Stuttgart. Dahinter gab es jedoch reichlich Bewegung.
Köln, Düsseldorf, Hannover, Dortmund
und Bremen konnten sich um jeweils einen Rang verbessern. Für alle anderen
Städte, mit Ausnahme von Duisburg, das
auch im Vormonat schon die wenigsten
Jobangebote aufwies, ging es um je einen
Platz nach unten.

Tabelle 1: Jobs für Webentwickler
Rang
1
2
3
4
5
6
7
8

Stadt
München
Berlin
Hamburg
Stuttgart
Köln
Frankfurt am Main
Düsseldorf
Nürnberg

Anteil *
24,8 %
20,1 %
16,3 %
8,3 %
6,1 %
5,8 %
4,4 %
4,0 %

Rang
9
10
11
12
13
14
15

Stadt
Hannover
Leipzig
Dortmund
Dresden
Bremen
Essen
Duisburg

Anteil *
3,0 %
2,4 %
1,6 %
1,3 %
1,0 %
0,6 %
0,3 %

* Prozentualer Anteil der Treffer

Tabelle 2: Geforderte Programmiersprachenkenntnisse
Rang
1
2
3
4
5
6

Sprache
Java
PHP
C#
C++
HTML
JavaScript

Anteil *
50,3 %
13,0 %
12,0 %
11,9 %
4,1 %
4,0 %

Rang
7
8
9
10
11
12

Sprache
CSS
Perl
Ruby
Python
Visual Basic
Objective-C

Anteil *
1,6 %
0,9 %
0,8 %
0,7 %
0,7 %
0,0 %

* Prozentualer Anteil der Treffer

Tabelle 3: Geforderte Technologiekenntnisse
Rang
1
2
3
4
5
6
7
8

Technologie
MySQL
SharePoint
Microsoft SQL Server
Android
HTML5
iOS
ASP.NET
WPF

* Prozentualer Anteil der Treffer

140

Anteil *
22,0 %
17,7 %
12,7 %
9,1 %
8,3 %
6,8 %
6,3 %
4,2 %

Rang
9
10
11
12
13
14
15
16

Technologie
CSS3
WCF
NoSQL
Silverlight
Windows Phone
Windows Forms
Workflow Foundation
Cocoa

Anteil *
4,0 %
2,4 %
1,6 %
1,5 %
1,2 %
1,1 %
0,6 %
0,5 %

Regelmäßig werden rund die Hälfte aller Stellenangebote für die aufgeführten
drei Großstädte ausgeschrieben. Die andere Hälfte der Entwickler wird für Jobs in
kleinen und mittelgroßen Städten gesucht.
Für Mobile Developer wurde auch in diesem Monat wieder untersucht, in welchen
Bundesländern am meisten Jobs angeboten werden. Hier liegt Bayern unverändert auf dem ersten Platz, wenn auch der
Anteil der Treffer auf 22,9 Prozent zurückgegangen ist. Auf den zweiten Platz hat
es in diesem Monat Nordrhein-Westfalen
geschafft (16,1 Prozent). Auf dem dritten
Rang liegt wie im Vormonat Baden-Württemberg mit 15,2 Prozent, während es für
Berlin (Platz 4, 14,1 Prozent) um zwei Plätze nach unten ging. Noch nennenswerte Anteile am Jobkuchen haben Hamburg
(11,7 Prozent), Hessen (7,1 Prozent), Sachsen (4,1 Prozent) und Niedersachsen (3,4
Prozent).

Programmiersprachen
Tabelle 2 zeigt, welche Programmiersprachenkenntnisse in den in der Datenbank
von Jobkralle.de verzeichneten Stellenangeboten gefordert werden. Spitzenreiter ist darin regelmäßig Java, das diesmal
sogar in über 50 Prozent der gefundenen
Stellenangebote nachgefragt wurde. Dabei werden übrigens nur Treffer berücksichtigt, welche die Sprache in der Titelzeile des Jobangebots ausweisen. Auf dem
zweiten Rang liegt wieder PHP, das im
vergangenen Monat C# den Vortritt lassen musste. In diesem Monat ist die .NETSprache wieder auf den dritten Platz zurückgefallen. Am Ende der Tabelle haben
Ruby und Python die Plätze getauscht.
Tabelle 3 zeigt, welche Technologien in
den Stellenangeboten aufgeführt werden.
Dabei werden auch Nennungen berücksichtigt, die sich im Text der Stellenangebote befinden. Traditionell ist dies die stabilste der drei Tabellen. Ganz oben sind
MySQL, SharePoint und Microsoft SQL
Server zu finden. Als die gefragteste Mobiltechnologie hat sich Android etabliert.
Zwischen Android und iOS liegt HTML5.
Im Monat Dezember gab es am Ende der
Tabelle drei Verschiebungen: NoSQL und
Silverlight stiegen um je einen Rang, während Windows Phone zwei Plätze abgeben
musste.
[Bernhard Lauer]
2/2014

Trends am Arbeitsmarkt
Zufriedenheit mit dem Job

Buch

Zufrieden? Geht so!

Jobsuche im
Social Web

Die Gesellschaft für Konsumforschung
(GfK) und Monster.de haben deutsche Arbeitnehmer nach ihrer Zufriedenheit mit
ihrem Job befragt. Die Umfrage zeigt, dass
mehr als die Hälfte (54 Prozent) ihren Job
mag und als angemessene Option für ihre jetzige Situation betrachtet. Lediglich
fünf Prozent lieben ihre Arbeit. Die Umfrage wurde zugleich auch in den Niederlanden, Großbritannien, den USA, Indien, Kanada und Frankreich durchgeführt.
Im diesem Ländervergleich liegt Deutschland an letzter Stelle. Am glücklichsten
mit ihrem Job sind die Kanadier (64 Prozent). Dicht dahinter folgen die Niederlande (57 Prozent), Indien (55 Prozent), die
USA (53 Prozent), das Vereinigte Königreich (46 Prozent) und Frankreich (43 Prozent). Gerade die jungen Arbeitnehmer in
Deutschland sind überraschend unglück-

Deutschland ist das Land mit der größten JobUnzufriedenheit
lich im Berufsleben: So mag zwar nahezu die Hälfte von ihnen (46 Prozent) ihren
Job, ist davon aber nicht völlig überzeugt.
Vergleicht man Vielverdiener, Durchschnittsverdiener und Geringverdiener,
so offenbart die Umfrage, dass besser bezahlte Arbeitnehmer nicht glücklicher
sind. 41 Prozent der Geringverdiener lieben oder mögen ihren Job sehr, bei den
Vielverdienern sind es 38 Prozent. Arbeitnehmer mit durchschnittlichem Einkommen zeigen sich am wenigsten zufrieden
(28 Prozent).
▶ www.monster.de ▶ www.gfk.de

OpenHPI

Fünf neue IT-Online-Kurse
Das Hasso-Plattner-Institut (HPI) bietet
im Jahr 2014 fünf kostenlose Online-Kurse
an. Folgende Themen sind geplant: Konzepte parallelen Rechnens, Vernetzung
per Internetprotokoll TCP/IP, semantische
Web-Technologien, In-Memory Data Management und Einführung in die Internetsicherheit. Die jeweils sechswöchigen
Massive Open Online Courses (MOOC)
startet das Hasso-Plattner-Institut auf seiner interaktiven Bildungsplattform OpenHPI.de am 3. Februar, 31. März, 26. Mai,
1. September und 27. Oktober 2014.

OpenHPI bietet seine kostenlosen, für
jeden frei zugänglichen Online-Kurse zu
Themen der Informationstechnologie seit
September 2012 an – in deutscher und englischer Sprache.
Aufgrund des internationalen Erfolgs
will das HPI seine interaktive Bildungsplattform weiter ausbauen. Wie HPI-Direktor Professor Christoph Meinel bekannt gab, wird das zugrunde liegende
System derzeit technisch für weiter steigende Nutzerzahlen vorbereitet.
▶ www.openhpi.de

Das Social Web hat nicht nur viele neue
Berufe hervorgebracht, sondern auch die
Bewerbungskultur stark verändert: Immer öfter machen Bewerber mit unkonventionellen Online-Bewerbungen auf
sich aufmerksam, um aus der Menge der
Mitbewerber hervorzustechen. Auch, wer
es bodenständiger mag, findet eine Fülle
an Möglichkeiten, die sozialen Netze für
die Jobsuche zu nutzen. Das Buch zur Jobsuche im Social Web, das jetzt im O’ReillyVerlag erschienen ist, gibt seinen Lesern
viele Anregungen und zeigt, wie sie Facebook, Twitter, einen Blog und viele andere Social-Media-Kanäle für die Jobsuche
nutzen können.
Autorin Larissa Vassilian betreut für
Firmen und Medienhäuser Twitter- und
Face­book-Accounts. In ihrem gemeinsam
mit Christine Dingler verfassten Buch
zeigt sie, wie die Leser ihre Social-Media-Kanäle für die Jobsuche nutzen. Das
Buch beschreibt, wie man sein Auftreten
auf allen genutzten Plattformen in Einklang bringt, eine persönliche Marke ausbildet und sich auch inhaltlich mit Hilfe
von Twitter, Pinterest & Co. als kompetenter Gesprächspartner präsentiert.
Co-Autorin Christine Dingler hat 2013
mit ihrer Bewerbungskampagne im So­cial
Web (@punktefrau) viel Aufsehen erregt.
In einem Gastkapitel berichtet sie von ihren Erfahrungen. Außerdem steuern ausgewählte Social-Media-Experten weitere
Tipps für das Buch bei.
Der Titel »Das Buch zur Jobsuche im Social Web« (ISBN 978-3-95561-502-4) gibt es
gedruckt und als E-Book (PDF).
▶ www.oreilly.de

Studie

Mehr Arbeit macht dümmer
Dass Überstunden nicht gerade die effektivste Arbeitszeit sind, kennt jeder Entwickler aus eigener Anschauung. Eine
Studie hat jetzt den Zusammenhang zwischen längeren Arbeitszeiten und der Entwicklung der kognitiven Fähigkeiten erforscht. Das Resultat: Wer mehr arbeitet
verliert an Intelligenz und leidet vermehrt
unter körperlichen Beschwerden. Die Stu2/2014

die des Finnish Institute of Occupational
Health, die kürzlich im American Journal
of Epidemiology (AJE) veröffentlicht wurde, untersuchte dafür britische Angestellte. Um das Nachlassen der Leistungen in
den Intelligenztests festzustellen, genügte
bereits eine 55 Stundenwoche.
▶ http://aje.oxfordjournals.org/
content/169/5/596.full

Larissa Vassilian und Christine Dingler zeigen
in diesem Buch neue Wege der Bewerbung auf,
über Personal Branding mit Blogs, Twitter,
Pinterest & Co.

141

Das kostenlose Upgrade
für Ihr Abo!

Jetzt Ihre web &
mobile developer
auf dem iPad lesen

◾ 

A bo-Upgrade:
Greifen Sie als Abonnent
auf alle Ausgaben der
web & mobile zu. Gratis!

◾ 

Volltextsuche:
Sie suchen ein Stück
Code im Heft? Nutzen
Sie die Volltextsuche
in der App – auch für
Listings.

◾ 

P apierlos & mobil:
Ihr gesamtes Archiv ist
auch unterwegs immer
parat – ohne Papierberge.

Für
Abonnenten
gratis!

web & mobile

DEVELOPER

Stellenmarkt

Online-Stellenmarkt
Das ausführliche Stellenangebot finden Sie unter:
http://webundmobile.de/stellenmarkt
.NET Consultant / Softwareentwickler (m/w) 
cellent AG

Bundesweit

Lead Developer (m/w) - beim führenden
Company Builder (Online Start-ups)
INTERNETONE AG 

Köln

Buchen Sie jetzt Ihre Anzeige unter:
Kerstin Berthmann, kerstin.berthmann@nmg.de

Tel: 089/74117–327

Bei uns gibt es
Software-Entwickler!
Stellenmarkt

dotnetpro & web & mobile Developer

31.000 Exemplare
Gesamtauflage
16.000 NewsletterEmpfänger
120.000 PI‘S

+++ HTML5&CSS +++ PHP & RIA +++ IOS & ANDROID +++ .NET +++
Kontakt: Kerstin Berthmann • Tel. 089/74117-327 • kerstin.berthmann@nmg.de

2/2014

143

dienstleister

Dienstleisterverzeichnis
Anbieter in Deutschland, Schweiz und Österreich.
Consulting / Dienstleister
Cellent AG
Ringstrasse 70
70736 Fellbach
T: 0711 - 52030 - 0
F: 0711 - 52030 - 40
info@cellent.de
www.cellent.de
prodot GmbH
Schifferstraße 196
47059 Duisburg
T: 0203 - 346945 - 0
F: 0203 - 346945 - 90
info@prodot.de
www.prodot.de
TriniDat Software-Entwicklung
GmbH
Am Wehrhahn 45
40211 Düsseldorf
T: 02 11 / 1 71 93 56
F: 02 11 / 1 71 93 58
ihrkontakt@trinidat.de
www.trinidat.de

Ihr IT-Partner für ein erfolgreicheres Business, bietet seit 30 Jahren PremiumQualität bei der Realisierung ganzheitlicher, innovativer IT- und Organisationslösungen.
Die cellent AG zählt zu den TOP 20 IT-Beratungs- und Systemintegrationsunternehmen in
Deutschland und unterstützt Sie mit Know-how von der Konzeption bis
zur Realisierung ihrer individuellen Lösung.

Unsere Mission ist die Entwicklung qualitativ hochwertiger Softwarelösungen für international agierende Unternehmen und Konzerne.prodot verbindet die Passion für technisch
anspruchsvolle Software mit intuitivem Design. Qualität und Nutzerfreundlichkeit stehen
im Fokus der exklusiv auf die Wünsche unserer Kunden zugeschnittenen Lösungen. Wir
beginnen da, wo Standardsoftware aufhört. Effizient. Stabil. Kostensenkend. Seit über
15 Jahren vertrauen unsere Kunden unserem Engagement und unserer Expertise, mit ihnen gemeinsam den weltweiten Wettbewerb zu meistern.
Starten Sie Ihr erfolgreiches Software-Projekt und kontaktieren Sie uns! Seit 1997 entwickeln wir mit nunmehr 20 Mitarbeitern individuelle Software für Unternehmen. Ob
nach Aufwand, zum Festpreis, bei uns oder bei Ihnen vor Ort: Wir garantieren beste Qualität und langfristige Kundenbeziehungen, denn wir sind verbindlich, kompetent und
preiswert. Überzeugen Sie sich selbst und nutzen Sie die Gelegenheit, mit einem unserer Kunden zu sprechen! Als Microsoft Partner entwickeln wir Windows- und Web-Anwendungen vorwiegend mit Microsoft-Technologien (ASP.Net MVC, WinForm, WPF), aber auch
mit PHP und Java.

conplement AG
generic.de software technologies AG
SDX AG

eCommerce/Payment
Allied Wallet
Nina Hülsken
Bockenheimer Landstraße 2-4
60306 Frankfurt
T: 069 - 667748 - 254
www.alliedwallet.com

Allied Wallet ist ein weltweit führender Anbieter von Online Payment Lösungen und
bietet für seine Services ein attraktives Vertriebspartnermodell an - wir erklären sehr
gern die Vorzüge! Wir bieten PCI-DSS Level 1-Konformität // Auf den Händler angepasste
Betrugsprävention // 128-Bit SSL Verschlüsselungstechnologie // Liveschaltung der
Händler für Payment Processing innerhalb von 24 Stunden. Mit Allied Wallet können
Händler Zahlungen in 164 verschiedenen Währungen akzeptieren und in 25 ohne
Umrechnungsgebühr auszahlen lassen.

Giropay GmbH
InterCard AG
paymorrow GmbH
Payone GmbH & Co. KG
Paysafecard.com Wertkarten AG
Peaches Group
Six Payment Services (Germany) GmbH
Wirecard Technologies GmbH

Hosting
Centron GmbH
Biegenhofstrasse 13
96103 Hallstadt
T: 0951 - 96834 - 0
F: 0951 - 96834 - 29 
info@centron.de 
www.centron.de

144

Die centron GmbH ist deutschlandweit einer der führenden IT-Dienstleister im
B2B-Sektor und bietet als Rechenzentrumsbetreiber umfassenden Full Service
rund um Managed Server, Root Server, Managed Hosting und Cloud.
Mit ccloud bietet centron eine hochverfügbare Cloud-Infrastructure für den
professionellen Einsatz. 2014 nimmt die centron GmbH ihr zweites Rechenzentrum in
Hallstadt/Bamberg in Betrieb.

2/2014

dienstleister
Hosting
ECS Webhosting
Inh. Ingo Fritz
Oedenberger Str. 155
90491 Nürnberg
T: 0911 - 4 967 967 - 00
F: 0911 - 4 967 967 - 99
suport@ecs-webhosting.de
www.ecs-webhosting.de

ECS-Webhosting in Nürnberg wurde 1995 gegründet und bietet professionelle Hosting
Lösungen wie hochverfügbares Webhosting, Managed Server, skalierbare Cloud Server,
weltweite Domainregistration sowie Cloud Lösungen wie Microsoft Hosted Exchange an.
Es wird viel Wert auf individuelle Betreuung und kompetenten Support mit viel
Erfahrung gelegt.

1&1 Internet AG
1blu AG
Black Point Arts Internet Solutions GmbH
CompOffice
goneo Internet GmbH
Host Europe GmbH
Hostpoint AG
nbsp GmbH
Pixel X e.K.
Profihost AG
ProWebMa Hosting GmbH & Co. KG
ratiokontakt GmbH
STRATO AG
synergetic agency AG
united-domains AG

Schulungen /Fortbildung
oose Innovative Informatik GmbH
SIGS DATACOM GmbH

Web-/Mobile-Entwicklung & Content Management
ComVISTEC
Compact Vision Technologies GbR
Fuggerstraße 6
D-87463 Dietmannsried
T: +49 8374 586826-3
info@com-vistec.de
www.com-vistec.de

Durch die Spezialisierung für kamerabasierte Apps wird ComVISTEC Ihr B2B-Partner
für die mobile Bildverarbeitung. Mit unseren Produkten und Erfahrungen erreichen Sie
das Maximum an Performance und Qualität, das Sie wünschen und Ihre Kunden erwarten!
Wir bieten Ihnen ein Komplettpaket zur Erstellung Ihrer individuellen iOS-App an.
Vom Konzept, über die Entwicklung bis hin zur Qualitätssicherung durch
Testautomatisierung begleiten wir Ihr Projekt aktiv!
Vereinbaren Sie einen Termin und realisieren Sie schon heute Ihr Projekt mit uns!

digitalmobil GmbH & Co. KG
Bayerstraße 16a, 80335 München, T: +49 (0) 89 7 41 17 760, info@digitalmobil.com, www.digitalmobil.com
vipe events gmbh
Bahnhofstrasse 29
CH-8810 Horgen
T: +41 (0)44 515 61 16
F: +41 (0)44 515 61 15
vipe@vipeevents.ch
www.vipeevents.ch

vipe it up! Unter diesem Motto entwickeln wir für Sie professionelle iOS, Android und
Windows-Mobile-Applikationen welche nicht nur höchsten Sicherheitsstandards Stand
halten, sondern auch Ihr Tagesgeschäft näher zu Ihren Kunden und Ihre Mitarbeiter
näher an ihr Unternehmen heran bringen. Ergänzend hierzu bieten wir spezialisierte
Intranet-Lösungen, Homepages und zum guten Schluss noch die Integration bestehender Systeme in die Möglichkeiten von heute. Wir sind Ihr Partner für vollständige
IT-Lösungen – weltweit, 24 Stunden am Tag, 7 Tage die Woche.
Wir freuen uns, Ihre Lösung zu werden.

CELLULAR Germany
dietzk. Creatives GmbH & Co. KG
ELBventure UG
Exozet Berlin GmbH
Triplesense GmbH

In allen Fragen rund um das Dienstleisterverzeichnis berät Sie Frau Roschke gerne persönlich!

Juliane Roschke  ▪  089 / 7 41 17 - 283  ▪ juliane.roschke@nmg.de

2/2014

145

Vorschau

Ausgabe 3/2014:

Impressum
Verlag
Neue Mediengesellschaft Ulm mbH
Bayerstraße 16a,
80335 München
Telefon: (089) 741 17-0,
Fax: (089) 741 17-101
(ist zugleich Anschrift aller Verantwortlichen)
Herausgeber
Dr. Günter Götz

Ab 13. Februar am Kiosk

Artikelserie zu AngularJS

Chefredakteur
Max Bold
– verantwortlich für den redaktionellen Teil –
E-Mail: redaktion@webundmobile.de

Bei AngularJS handelt es sich um ein
Java­Script-Framework zum Erstellen von
browserbasierten Single-Page-Anwendungen. In einer mehrteiligen Artikelserie
nimmt sich web & mobile developer dieses
Themas an. Wir starten mit einer grundlegenden Einführung, dann geht es mit der
Service-Programmierung weiter. Der dritte Teil bietet eine Einführung in das AngularJS-Routing-System, und der vierte Teil
zeigt, wie man eigene AngularJS-Direk­
tiven entwickelt. Abgeschlossen wird die
Serie mit einem Artikel über das automatisierte Testen mit dem Karma-Framework für AngularJS.

Schlussredaktion
Ernst Altmannshofer
Redaktionelle Mitarbeit
Johann Baumeister, Annegret Behncke,
Christian Bleske, Tam Hanna, Andreas Hitzig,
Michael Hofer, Anna Kobylinska, Timo Krotzky,
Bernhard Lauer, Patrick Lobacher, Filipe
Martins, Andreas Maslo, Florence Maurice,
Carsten Möhrke, Marcus Ross, Jochen H.
Schmidt, Marco Schulz, Katharina Sckommodau, Ellen Simon, Sebastian Springer,
Helmut Vonhoegen, Marc André Zhou
Art Directorin
Maria-Luise Sailer
Grafik & Bildredaktion
Alfred Agatz, Dagmar Breitenbauch,
Catharina Burmester, Hedi Hefele,
Manuela Keller, Simone Köhnke,
Cornelia Pflanzer, Petra Reichenspurner,
Ilka Rüther, Christian Schumacher,
Nicole Üblacker, Mathias Vietmeier
Anzeigenleitung
Angelika Hochmuth
Telefon: (089) 741 17-432
Fax: (089) 741 17-269
E-Mail: angelika.hochmuth@nmg.de
Anzeigendisposition
Marita Brotz
Telefon: (089) 741 17-281
Fax: (089) 741 17-269
E-Mail: marita.brotz@nmg.de
Leitung Herstellung/Vertrieb
Thomas Heydn
Telefon: (089) 741 17-111
E-Mail: thomas.heydn@nmg.de
Leserservice
Hotline: (089) 741 17-205
Fax: (089) 741 17-101
E-Mail: leserservice@nmg.de
Kooperationen
Larissa Oßwald
Telefon: (089) 741 17-116
E-Mail: kooperationen@nmg.de
Druck
L.N. Schaffrath Druckmedien
Marktweg 42-50
47608 Geldern
DVD-Produktion
Stroemung GmbH
Vertrieb
Axel Springer Vertriebsservice GmbH
Objektvertriebsleitung Lothar Kosbü
Süderstraße 77
20097 Hamburg
Telefon (040) 34724857
Bezugspreise
web & mobile developer ist das Profi-­Magazin
für Web- und Mobile-Entwickler und erscheint
zwölfmal im Jahr. Der Bezugszeitraum für Abonnenten ist jeweils ein Jahr. Der Bezugspreis im
Abonnement beträgt 76,20 Euro inklusive Versand und Mehrwertsteuer im Halbjahr, der
Preis für ein Einzelheft 14,95 Euro. Der Jahresbezugspreis beträgt damit 152,40 Euro.
In Österreich sowie im übrigen Ausland kostet
das Abonnement 83,70 Euro im Halbjahr. Der
Jahresbezugspreis beträgt somit 167,40 Euro.
In der Schweiz kostet das Abonnement 152,00
Franken im Halbjahr. Der Jahresbezugspreis
in der Schweiz beträgt 304,00 Franken. Das
Abonnement verlängert sich automatisch um
ein Jahr, wenn es nicht sechs Wochen vor Ablauf der Bezugszeit schriftlich beim Verlag gekündigt wird. Studenten erhalten bei Vorlage eines Nachweises einen Rabatt von 50 Prozent.
Veröffentlichung gemäß Art. 8 Abs. 3 BayPrG:
Alleiniger Gesellschafter der Neuen Mediengesellschaft Ulm mbH ist die Neue Medien Ulm
Holding GmbH, die wiederum eine 100-Prozent-Tochter der Verlagsgruppe Ebner Ulm
GmbH & Co. KG ist.
ISSN: 2194-4105
© 2013 Neue Mediengesellschaft Ulm mbH

146

Message-QueueingSys­teme im Vergleich

Mehrdimensionale Arrays
in der Praxis

Zur Koppelung von Softwaresystemen und Teilen einer Anwendung, auch über Rechnergrenzen hinweg, stehen neben der direkten Kommunikation auch sogenannte Message-QueueingSysteme hoch im Kurs. Wir haben uns drei bekannte Vertreter der Gattung näher angesehen.
Deren Möglichkeiten der Anbindung an verschiedenste Programmiersprachen wie auch der
für das Setup zu treibende Aufwand sind durchgängig mit gut bis sehr gut zu bewerten. Ebenso stehen für alle drei Messagebroker eine aktive
Community und ausführliche Tutorials bereit.

Die Palette der Operationen, die in PHP mit Arrays und Feldern ausgeführt werden können, ist
lang. In einem ausführlichen Tutorial geht es um
Operationen für numerisch und assoziativ indizierte Felder und vor allem um die Arbeit mit
zweidimensionalen Feldern. Bei mehrdimensio­
nalen Feldern können sowohl numerische und
assoziative Felder als auch gemischte Felder angewandt werden. Ein gemischtes Feld beinhaltet
sowohl numerische als auch assoziative Komponenten. Auch bei Datenbankoperationen spielen
Arrays und Felder eine bedeutende Rolle.

Schon abonniert?
www.webundmobile.de/abo
Lesen Sie auch die aktuelle Ausgabe von
dotnetpro Ausgabe 2/2014, ab 16. Januar am Kiosk
■ Schwerpunkt: Moderne Webtechnologien
■ Code-Struktur und -Abhängigkeiten visualisieren
■ Garbage Collection: Das ist neu unter .NET 4.5
■ Node.js gegen .NET: Wettkampf über fünf Runden

2/2014

Crossmedial
Mitarbeiter finden
Print, Online, Newsletter, Apps ▪ Optimale Zielgruppenansprache
Hohe Verbreitung ▪ effizient und ohne Streuverluste

In allen Fragen rund um das Karriereportal berät Sie Frau Berthmann gerne persönlich!

Kerstin Berthmann ▪ 0 89 / 7 41 17 - 327 ▪ kerstin.berthmann@nmg.de

Und wie flexibel ist Ihr Server?

Anbieter: domainfactory GmbH, Oskar-Messter-Str. 33, 85737 Ismaning, Deutschland
Foto: Akhilesh Sharma / Fotolia

Flexibel skalierbare CloudServer On Demand
mit nutzungsbasierter Abrechnung

JiffyBox direkt einrichten und 24 Stunden gratis testen