Sie sind auf Seite 1von 148

DEVELOPER

web & mobile

14,95

 eutschland 14,95 Schweiz sfr 29,90


D
sterreich, Belgien, Niederlande, Luxemburg 16,45

Jobs fr

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 fr 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 fr 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 fr Firefox OS
02

Die Grundlagen fr 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 luft die Anpassung von Websites an Mobile Devices

S.64

Die Programmierschnittstelle von Flickr


Das leistungsfhige API von Flickr optimal nutzen

S.94

25. - 26. Februar 2014, Mnchen

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 fr das neue Jahr, die um die Jahreswende immer verstrkt publiziert werden, taucht in diesem Jahr verstrkt das Schlagwort Internet der
Dinge auf. Dieses Phnomen in Form intelligenter Consumer-Elektronik, medizinischer Gerte, Sensoren und vernetzter Systeme wird knftig eine immer wichtigere
Rolle spielen und damit auch Entwickler vor neue Herausforderungen stellen. Der
Tenor der Prognosen ist eindeutig: Skalierbarkeit und Komplexitt erreichen neue
Dimensionen und die im Internet der Dinge erzeugte Datenmenge wchst explo
sionsartig. Bei der Applikationsentwicklung wurde die Analyse der erzeugten Daten
bislang eher stiefmtterlich behandelt. Im Mittelpunkt der Applikationen standen die

Intelligente Consumer-Elektronik,
Sensoren und vernetzte Systeme
Funktionalitt, die erreichbaren Datenquellen und die Datenbermittlung. Das ndert sich mit dem Internet der Dinge. Von einer nachgeordneten Ttigkeit rckt jetzt
die Analytik und damit die explizite, detaillierte und handlungsorientierte Analyse
der riesigen Mengen kontext- und ortsabhngiger Daten in den Mittelpunkt. Nur so
knnen 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
Bewltigung der neuen Aufgaben rsten knnen. Wie auch immer: Die Redaktion
wnscht allen Lesern, die an dieser Front kmpfen, ein erfolgreiches Jahr 2014. Interessant drfte es in jedem Fall werden.

Ihr Max Bold


chefredakteur@maxbold.de

2/2014

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) fr
HTML und ermglicht damit eine Datenbindung zwischen HTML und JavaScript
22 Mehr Struktur fr Backbone.js
Das Zusatzmodul Marionette.js soll der
Bibliothek Backbone.js mehr Struktur und
Wiederverwendbarkeit verleihen
28 Datenbanken anbinden
Bei der Implementierung von Applikationen mssen 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 grere
Rolle. Entsprechend wchst die Bedeutung von Frameworks und Bibliotheken als zentrales Werkzeug in den Hnden 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 Mglichkeiten 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
beschftigen. Eines davon ist Sass
58 HTML5: Offline-Webapplikationen
Was sich wie ein Widerspruch anhrt, ist
im Alltag ein wichtiges Feature. Webseiten
mssen auch offline funktionieren

Mit CSS-Transforms lassen sich HTML-Elemente drehen, verschieben


oder in der Gre verndern. Und das funktioniert auch im 3D-Raum.
Vor allem diese Variante erffnet neue Gestaltungswelten. Seite 40

Mobile Development

64 F rameworks, Tools und Techniken


Die mobile Internetnutzung wchst. Die
Anpassung von Websites fr 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 eingefhrt
74 P rogrammierung fr 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 knnen
Webdesigner nicht
nur Webseiten, sondern auch vollwer
tige Web-Apps fr
mobile Gerte ent
wickeln.  Seite 64

Die Programmierschnittstelle von Flickr


Das API von Flickr
ist gut dokumentiert und luft 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 leistungsfhiges API spannend

100 JavaFX mit IntelliJ IDEA


JetBrains, der Hersteller von IntelliJ IDEA,
bietet seit der Markteinfhrung von
JavaFX eine direkte Untersttzung fr
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 vollstndig 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 groen
Aufwand selbst eine schne Diashow implementieren

beyond Dev

122 Grafik fr Entwickler


Bildmontagen sind ein gngiges Mittel des
Webdesigns. Dabei gibt es unterschiedliche Formen

Webdesign mit Bildmontagen


Collagen zeigen
mehrere Details aus
verschiedenen Bildern auf einer Flche. 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 zuflliges 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 fr das Jahr 2014 verffentlicht

Unser Service im Internet


Website: Aktuelle News, Tipps und Tricks,

Termine, Buchbesprechungen und vieles mehr


Newsletter: Jeden Montag fassen wir fr

Sie das Wichtigste zusammen


Aktuelles Heft: Das Inhaltsverzeichnis

der aktuellen Ausgabe


Download-Service: Zu jeder Ausgabe

stellen wir die Beispiel-Listings zu aus


gewhlten Artikeln zur Verfgung

2/2014

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

Aktuell
News
Der Mbelmarkt im Internet
Die Anzahl der stationren Mbelhndler ist
schier unfassbar. Diejenigen, die auch im Web
Mbel und Einrichtungsgegenstnde verkaufen, ist dagegen schon berschaubarer. Die
Fachzeitschrift Mbelkultur hat 180 OnlineMbelhndler in Deutschland gezhlt. Wer da
als stationrer Anbieter keine Internet-Strategie hat, knnte bald den Anschluss verlieren.
Doch die Hndler werden zunehmend aktiv, allen voran Ikea: Der Online-Anteil des Umsatzes soll in den nchsten Jahren auf bis zu zehn
Prozent ansteigen.
www.internetworld.de/Dossiers/
Moebelhandel-im-Internet

Online-Umfrage-Tool fr Unternehmen
SurveyMonkey bringt seine Enterprise-Edition
nach Deutschland. Die Version seines Umfrage-Tools wurde fr die Nutzung durch Unternehmen entwickelt und ermglicht zentrales Management sowie eine einfachere teambergreifende 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 Lngerem 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 fr ihre Keywords
erhalten.
www.searchmetrics.com/de

So profitieren kleinere Hndler von


M-Payment
Kleinere Hndler, die bisher am PoS keine
Kreditkarten annehmen konnten, werden jetzt
mit einer Reihe von M-Payment-Lsungen bedient. Damit haben auch kleinere Hndler die
Mglichkeit, die Zahlungsarten fr 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 Lsungen. Dabei geht es weniger um den
Ansatz, dass Kunden am PoS ber noch kaum
verbreitete Verfahren wie NFC drahtlos bezahlen knnen, sondern dass Hndler Smartphones und Lesegerte in Kombination mit speziellen Apps zum Kassieren verwenden.
www.wirecard.de

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
verffentlicht worden. DotNetAge taugt
zugleich als RAD-System fr 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 Funktionalitt bestehender Webseiten zu erweitern. Dank eingebautem responsivem Webdesign passen
sich die mit DotNetAge produzierten Seiten an die Bildschirmgren der Empfngergerte an.
Fr 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 Flle an Informationen die individuell wichtigen herauszufiltern ist eine der groen Herausforderungen
der Gegenwart. Um die
zunehmende Menge an
Informationen auf Webportalen besser bewltigen zu knnen, haben
Informatiker der Friedrich-Schiller-Universitt
Jena und der Concordia Eine neue Software erleichtert die Analyse von Texten in Webportalen
Universitt in Montreal
(Kanada) eine Software entwickelt, welsen, ohne es grndlich lesen zu mssen,
che die Analyse von Texten in Portalen ersagt Lffler. Zu den Diensten der Semantic
leichtert.
Assistants zhlt 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 knFinanziert wurde das Projekt vom Deutnen. Das Programm ist in Kooperation mit
schen Akademischen Austauschdienst
Felicitas Lffler und Professor Dr. Birgitta
und dem Natural Sciences and EngineeKnig-Ries von der Nixdorf-Professur fr
ring Research Council of Canada. Die Zuverteilte Informationssysteme der Friedsammenarbeit der Universitten in Jena
rich-Schiller-Universitt Jena in das Openund Montreal endet nicht mit dem AbSource-Portal Liferay integriert worden.
schluss dieses Projekts. Im nchsten Jahr
So ist es nun unter anderem mglich, Persoll gemeinsam eine zustzliche 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 fr 19,99 /Monat, danach 29,99 /Monat. 2 Freimonate zur Verrechung im 4. und 5. Vertragsmonat. Oder auf Wunsch mit Smartphone,
dann immer fr 29,99 /Monat. Einmaliger Bereitstellungspreis 29,90 , keine Versandkosten. 24 Monate Mindestvertragslaufzeit.
1&1 Telecom GmbH, Elgendorfer Strae 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 nchsten Jahren mageblich vom gezielten Umgang
mit Big Data geprgt 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 Verknpfung
enormer Datenmengen branchenbergreifend zunehmend entscheidende Faktoren sein werden. 36 Prozent halten entsprechende Big-Data-Lsungen in einigen

Bereichen fr sinnvoll, whrend 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 fr die intelligente Verknpfung von Daten sind Metatexte, die alle re-

levanten Angaben zu der Beziehung der


Informationen untereinander umfassen.
Diese knnen manuell vom Content-Ersteller selbst oder zunehmend automatisiert durch lernende Programme verfasst
werden.
Lsungen 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 knnte schon in einigen Jahren
der Vergangenheit angehren.
www.diomega.de

Bitkom

Datensicherheit im Internet
Der Hightech-Verband Bitkom begrt
die Initiative von AOL, Facebook, Google, LinkedIn, Microsoft, Twitter und Yahoo
zur Reform der geheimdienstlichen berwachung im Internet. Wir untersttzen
den Vorsto der Konzerne gegen die geheimdienstlichen
berwachungsaktionen, sagte Bitkom-Prsident Professor
Dieter Kempf. Sowohl die Internetnutzer
als auch die Anbieter von Internetdiensten mssen vor einem ungezgelten Zugriff auf persnliche Daten durch die Geheimdienste geschtzt werden.
Es gebe auch in Deutschland einen massiven Vertrauensverlust, was die Sicherheit von Daten und die Integritt von
Diensten im Internet angeht. Das zeigt eine aktuelle Umfrage im Auftrag des Bitkom. Danach halten 80 Prozent der Internetnutzer in Deutschland ihre persnlichen Daten im Internet generell fr unsicher. Im Juli, nach der ersten Welle der
Verffentlichungen, hielten insgesamt erst
66 Prozent der Internetnutzer ihre Daten
fr 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-Affre erschttert, sagte Kempf. Politik und
Wirtschaft seien jetzt gefordert. Der Abhraffre zum Trotz: Die grte Gefahr
geht von der organisierten Cyber-Kriminalitt aus, warnte Kempf. Diese Bedrohung drfen wir nicht aus dem Blick verlieren.

Laut Umfrage fhlt sich


fast die Hlfte der Internetnutzer von der Aussphung
ihrer persnlichen 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 fhlen sich von einer mglichen
Aussphung ihrer Daten
durch Kriminelle bedroht. Im
Juli waren es 46 Prozent. Immerhin 38 Prozent frchten
die Aussphung ihrer Daten Laut Bitkom schwindet das Vertrauen in Datensicherheit im
durch Unternehmen. Nur 15 Internet
Prozent der Befragten sagen,
haben dazu gefhrt, dass sich bei viedass sie sich im Internet berhaupt nicht
len Internetnutzern ein allgemeines Gebedroht fhlen.
fhl der Unsicherheit breit gemacht hat,
Weiter gelitten hat auch das Vertrauen
sagte Kempf. Das ndere aber nichts da
der Brger, wenn es um den Umgang soran, dass Internetzugangsanbieter, Betreiwohl des Staates als auch der Wirtschaft
ber von Cloud-Services oder groe Onmit ihren persnlichen Daten geht. Laut
line-Shops jedes Jahr Milliardensummen
Umfrage misstrauen 68 Prozent der Interin die Sicherheit der Daten ihrer Kunden
netnutzer Staat und Behrden beim Uminvestieren. Kempf: Die Unternehmen in
gang mit ihren persnlichen Daten im
der IT-Branche haben ein hohes InteresWeb. Nicht weniger schlecht ist das Erse daran, ihren Kunden mglichst sichere
gebnis fr die Wirtschaft. 64 Prozent der
Dienste anbieten zu knnen. Das Vertraubefragten Internetnutzer misstrauen der
en der Nutzer ist die Grundlage ihres GeWirtschaft allgemein, wenn es um den
schftsmodells.
Umgang mit ihren Daten im Netz geht.

www.bitkom.org
Die geheimdienstlichen Sphaktionen
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 zurckhaltend.
Die Studie zeigt, dass deutsche Unternehmen fr die Speicherung ihrer Daten
mit Abstand am hufigsten 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 unternehmensbergreifende Dokumenten- oder Enterprise-Content-Management-Systeme (ECM)
setzen nur 18 Prozent der befragten Unternehmen. Die bevorzugte Methode der
Datenverwaltung hngt vor allem von der
Unternehmensgre ab: Whrend kleinere Unternehmen strker auf klassische Papierdokumente und eine lokale Speicherung setzen, kommen zentrale ECM-Systeme hufiger in greren 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 groen und kleinen Unternehmen. Von den befragten Unternehmen, die Cloud-Dienste derzeit nicht nutzen, planen nur fnf Prozent knftig eine
Einfhrung dieser Services.
Geht es um die Nutzung privater mobiler Gerte am Arbeitsplatz Stichwort
BYOD (Bring your own Device) geben
sich die meisten deutschen Unternehmen restriktiv. Lediglich ein Fnftel erlaubt die betriebliche Nutzung des persnlichen Smartphones oder Tablets. Zumeist sind dies kleinere Unternehmen mit
50 bis 300 Mitarbeitern. ber die Hlfte aller befragten Unternehmen lsst eine
Nutzung privater mobiler Gerte 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 grer das Unternehmen
ist: So untersagen von den befragten Unternehmen mit 50 bis 300 Mitarbeitern nur
36 Prozent den Einsatz privater mobiler
Gerte. 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 hierber bestand bei
den meisten der befragten Entscheider
kein Zweifel. So erklrten 83 Prozent der
Befragten, dass sie einen deutlichen Trend

zur Verarbeitung immer grerer Datenmengen im Unternehmen erkennen. Die


meisten Befragten uerten sich zufrieden
ber die Schnelligkeit des Datenzugriffs:
In vier von zehn Unternehmen sind relevante Daten schnell verfgbar. Ebenso
viele Befragte sagten jedoch, dass sich die
Datensuche manchmal hinziehen knne.
14 Prozent der Umfrageteilnehmer erklrten zudem, dass sich die Datensuche
oft schwierig gestalte und viel Zeit in Anspruch nehme. Dabei schtzten Mnner
die Datensuche problemloser ein als Frauen (45 zu 36 Prozent), und ltere Mitarbeiter sind zufriedener mit der Schnelligkeit
ihres Datenzugriffs als jngere Mitarbeiter
(47 zu 34 Prozent).
Hartmut Rottstedt, Geschftsfhrer 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 zugnglich gemacht werden. Lexmark bietet seinen Kunden zahlreiche
mageschneiderte Lsungen, um diese
unstrukturierten Daten so zu verarbeiten,
dass die darin enthaltenen Informationen
fr die Geschftsprozesse voll nutzbar
sind.
www.lexmark.com/de_DE

Deutsche Unternehmen zeigen sich beim Einsatz neuer Technologien eher zurckhaltend

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 fr Shopware-Nutzer eine effiziente Mglichkeit dar, den Shop auf Zugriffe
ber die unterschiedlichsten mobilen Endgerte vorzubereiten. Das neue Template passt
sich diesen Anforderungen an und bereitet
Shopbetreiber auf die immer grer werdende Anzahl von mobilen Zugriffen vor.
Bislang hatte Shopware vor, fr Shopware
4 ein selbst entwickeltes Responsive Template anzubieten. Durch die hervorragende und
enge Zusammenarbeit mit unserem Solution
Partner Conexco ist jedoch eine gemeinsame
Lsung entstanden. Das Plug-in wurde zustzlich durch uns zertifiziert. Somit wollen
wir fr die Produktgeneration Shopware 4 das
Rad nicht neu erfinden, sagt Shopware-Vorstand Stefan Heyne. Weiterhin beschftigt sich
Shopware selbst intensiv mit dem Thema Responsive Design und wird fr das nchste Major Release eine eigene Lsung anbieten.
www.shopware.de/mobile-commerce

CM

MY

CY

CMY

OwnCloud Community Edition 6

Die eigene Cloud


Eine hbschere Haube und mehr unter der
Haube, so lsst sich Version 6 von OwnCloud
zusammenfassen. Ein frisches Design kombiniert mit neuen Mglichkeiten fr das Erstellen, Teilen und Herunterladen von Dokumenten sowie ihr gemeinsames Bearbeiten und verbesserten sowie neuen Programmierschnittstellen mit zahlreichen Funktionen glnzt die neue sechste Version der Community Edition von OwnCloud.
Die Open-Source-Software legt Dateien auf
einem flexibel whlbaren Datenspeicher ab
und ermglicht 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 ermglicht, unabhngig davon, ob die
Dateien und Daten auf eigenem Speicher oder
mit einem Cloud-Speicher verwendet werden.
www.owncloud.org

Aktuell
IPDC in Kln

iOS 7 im Mittelpunkt
Wie viel weniger ist nicht zu viel? Diese Frage beantwortete Ivo Wessel auf der
IPDC iPhone Developer Conference in
Kln, 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 groen Neuerungen in iOS
7. Sie ermglichen es, eigene Animationen
fr die bergnge zwischen zwei ViewControllern zu schreiben. Die APIs sind
sehr abstrakt definiert, um die Implementierung so generisch wie mglich 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 Hintergrnde in kompakter Form vorgestellt.
Im zweiten Teil wurden diese dann umgesetzt. Zunchst in simplen Beispielen, anschlieend an komplexen Beispielen erlutert. Gleichzeitig erklrte Benno Bartels die Konzeption von Mobile-Shopping-Apps: Glckliche 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 Nrnberg stattfinden.
http://developer-media.de/events

Accso

Microsoft

Fr alle zugnglich

Cloud-OS-Netzwerk

Das Darmstdter Software-Unternehmen


Accso spricht sich deutlich fr mehr Barrierefreiheit im Netz aus. ber eine klare Struktur, umsichtiges Design und mit
Hilfe nur weniger HTML-Kniffe knnten auch visuell beeintrchtigte Menschen
problemlos durch Webangebote navigieren.
Die Forderung nach Barrierefreiheit ist
nicht einfach nur ein gut gemeinter Tipp.
Behrden mssen sich schon aus rechtlichen Grnden mit dem Thema auseinander setzen. Doch auch Betreiber von Websites der Industrie oder Wirtschaft sollten
sich unbedingt im Webdesign mit den Bedrfnissen visuell beeintrchtigter 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 durchgngigen
Cloud OS bestehend aus Kunden-Rechenzentrum, Serviceprovider-Cloud und Pub
lic Cloud umgesetzt. Der Vorteil fr Kunden: Flexibilitt und Performance-Gewinn
beispielsweise fr Big-Data-Projekte oder
auch bei der Umsetzung ihrer Bring-yourown-Device-Strategien. Ermglicht wird
dies mit nahtlosen IT-Infrastrukturen,
die unternehmenseigene Rechenzentren
durchgngig mit Microsofts Public Cloud
Windows Azure oder den Cloud-Angeboten der Serviceprovider verbinden.
Unternehmen und Kunden steht durch
das neue Cloud-OS-Netzwerk breitgefchertes Know-how und Expertise zur Verfgung: Die Partner des Cloud-OS-Netzwerks bedienen mehr als 90 verschiedene Mrkte 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 nher beschftigen. Die technischen


Mglichkeiten mssen ausgenutzt werden. Es geht einfach nicht, dass so viele
Menschen aus dem Web ausgeschlossen
werden, so Thomas Jger, CTO der Accso GmbH.
Visuell beeintrchtigte Menschen knnen gleich mehreren Herausforderungen
im Web begegnen. Animierte Texte machen das Lesen beispielsweise unmglich,
nicht skalierbare Schriftgren verhindern
das Erkennen der Inhalte. Der CTO der
Accso GmbH ist trotz aller Anforderungen allerdings berzeugt, dass Barrierefreiheit nicht zu einem platten, unansehnlichen Design fhren muss. Modernitt
und Barrierearmut schlieen
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
FR KULINARISCHE
GENSSE
Sichern Sie sich jetzt die
web & mobile developer, das
Fachmagazin fr Web- und MobileEntwickler, und profitieren Sie von
aktuellstem Praxiswissen rund um
Tools, Techniken, Sprachen und
Frameworks.
web & mobile developer erscheint
zwlf Mal pro Jahr.
Holen Sie sich jetzt das
web & mobile developerJahresabonnement. Sie sparen damit
27 Euro gegenber 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) fr


HTML und ermglicht 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

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 Prsentation der Austausch der Daten erfolgt automatisiert.
Microsoft spezifizierte ein neues, als MVVM
gezeigtes Pattern. Es besteht wie sein historischer Vorgnger aus drei Komponenten, die
aber wie in Bild 2 gezeigt auf andere Bezeichnungen hren. 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 ausdrcken lsst.
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 spter noch verndert werden, in die View zu platzieren. Im View
Model landen all jene Funktionen, die fr 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 ausschlielich fr Datenhaltung und das Management der Nutzdaten
verantwortlich. Wichtig ist, dass alle drei Klassen voneinander unabhngig testbar sein mssen. Interdependanzen zwischen den diversen
Programmmodulen sind unerwnscht. 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 enthlt keine Verweise auf das GUI.

MVVM trifft JavaScript


Durch die immer weiter reichende Verbreitung
von XAML gewann das bisher nur in universitren 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 fr diverse
andere Systeme entstand.
Nchtern
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 dazugehrende Wert in der
Programmlogik aktualisiert werden.
In JavaScript lsst sich
das Aktualisieren der Benutzerschnittstelle
ohne groe 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 fr Inhalte...
</div>
<div data-bind="visible: isPage3">
<span><h1>Formular 3</h1></span>
Das gilt auch fr 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 lst dieses Problem durch die Einfhrung 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 einfhrenden 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
fhrt normalerweise nicht zu
groem Programmieraufwand.
Am wichtigsten ist, dass Knockout 3.0 beim Aufrufen der Changed-Handler weitaus schonender vorgeht: Die von einem Computed Observable abhngigen
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 gendert 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 fr das Ein- und Ausschalten der gerade aktiven Seite und das Laden des Frameworks zustndig 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 enthlt. 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 fr seine Regelung zustndigen
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 dafr, 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
wre damit einsatzbereit ein Klick auf ChangePage wrde 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 zurck. Die
aus Bequemlichkeitsgrnden 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 whrend 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 fhrt
zu einer nderung der Variablen, die sich aber
nicht auf das eigentliche Formular auswirkt
(Bild3 und Bild 4).
Dieser Zustand entsteht, da JavaScript keine
einfache Methode zum Erkennen von Zustandsnderungen 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 vorhlt. 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 berflssig
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 wrde 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 ermglichen.
Theoretisch wre es mglich, 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 dafr wre eine
Textbox.
Erfreulicherweise kommt Knockout auch
hiermit ohne allzu groe Probleme zurecht. Der
Inhalt einer Textbox lsst sich ohne Weiteres
in eine Variable spiegeln, wo er fr 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 lsst 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 knnen 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 realisiert sind,
wrden 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 lsst sich die von Knockout
implementierte Logik um eigene Event Handler ergnzen. 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 mchten, so brauchen
Sie nur die subscribe()-Methode aufzurufen.
Falls Sie Informationen
ber den Wert vor der nderung begehren, so mssen
Sie sich fr das beforeChangeEreignis anmelden. In diesem Fall ist ein zweiter Parameter notwendig, der Informationen ber den thisKontext enthlt. Wenn die
als Parameter bergebene
Funktion ausgefhrt 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 Lsen der Bindung zur Laufzeit erlauben


rufen Sie einfach die dispose-Methode auf.
Damit knnen wir zur Implementierung der
Logik schreiten. Diese wandert aus Bequemlichkeitsgrnden 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 gendert wird. Das
abermalige Einschreiben der schon im Objekt
befindlichen Informationen fhrt zu keiner Aktualisierung.
Wenn Sie dieses Verhalten aus irgendwelchen Grnden 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 fr die Beziehung zwischen
den Werten zustndige Logik sitzt auerhalb
des Frameworks. Es wre weitaus intelligenter,
das Aufrufen der Aktualisierungsmethoden an
Knockout zu delegieren.
Diese Optimierung lsst 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 mssen wir die drei Seiten-Observables durch Computed Observables ersetzen.
Den dazu ntigen Code zeigt Listing 3.
Ein Computed Observable besteht aus einer
Funktion, die zur Ermittlung des zurckzugebenden 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 Ausfhrung 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 fr 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 fhrt.
Die korrigierte Version der Routine initialisiert alle normalen Observables, bevor die Deklaration der Computed Observables folgt. Auf
2/2014

Feature
diese Art und Weise fhrt die
Abarbeitung der Compute-Methoden nicht zu Problemen (Listing4). 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 bser Absicht) ungltige Daten eingibt?
Bei intelligenter Nutzung lsst sich Knockout
sogar zum Anzeigen einer Warnung benutzen.
Dazu gengt 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 Codewrter 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 groe Bibliothek ist im Internet weit verbreitet. Computed Observables aktualisieren
sich automatisch, wenn sich die ihnen zugrunde liegenden Werte ndern. Die Erkennung der
Abhngigkeiten erfolgt in einem vergleichsweise komplexen Verfahren, das wir hier aus Verstndnisgrnden 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 enthlt.
Die Erstellung dieses Baums erfolgt whrend
der Laufzeit durch die Analyse der Aufrufe: Jedes von einem Runnable abgefragte Observable wird zu seinem Dependency Graph hinzugefgt. Dieses auf den ersten Blick verblffend 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 grn eingefrbt. Die Eingabe eines bsartigen Inhalts fhrt zu einem roten Hintergrund.
2/2014

Am Beginn jedes Durchlaufs lscht Knockout vo aus


allen
Abhngigkeitsbumen. Jeder Aufruf eines Observables fhrt 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 abhngig 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
fhrt zu attraktiv aussehenden
Warnmeldungen, kann und darf
aber eine berprfung der Eingangsdaten auf Serverseite keinesfalls ersetzen.
Knockout-Applikationen liegen
auf dem Rechner des Angreifers
und lassen sich somit nach Belieben verndern. Eine Grundregel im IT-Bereich besagt, dass
die Verifikation von Eingaben immer auf einem fr Auenstehende nicht offenstehenden System erfolgen sollte das Missachten dieses logischen Grundsatzes ist eine Einladung fr jeden Hacker.

werden, wenn a auf false steht. Eine nderung


des Wertes von a fhrt stets zu einer Neuevaluation: Steht der Bitschalter dann auf false, so ist
vo in Zukunft von a und c abhngig.
Wichtig ist, dass Knockout keine zirkuklren
Bindungen erlaubt. Ist der Wert eines Observables irgendwie von sich selbst abhngig, 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
lsen keine Aktualisierungen aus.
Zum Erstellen eines Observable Arrays gengt 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 bevlkert
wird. Theoretisch knnten 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 fhrt die im Rahmen der Verwaltung der Elemente entstehenden Ereignisse
nach auen, wo sie von beliebigen Event Handlern weiterverarbeitet werden knnen.
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 wchst


die Tabelle nach links. Das liegt daran, dass der
foreach-Tag das innere <td> multipliziert hat. In
der Regel ist dieses Verhalten unerwnscht: 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 dafr, 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 nchsten Schritt mssen wir unser Array
mit den diversen Bearbeitungsfunktionen maltrtieren, 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 ntige 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 befhigt. 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 Lsung fr 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 Lschen 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 Komplexitt von
O(1). Das liegt daran, dass die
Ereignisse direkt an der Datenklasse abgegriffen werden. Die
in frheren 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 mssen auf einer Vielzahl verschiedener Browser
Engines laufen. Die Entwickler
versprechen auf der Webseite
des Produkts Untersttzung
fr die folgenden Plattformen:
Firefox OS spricht Knockout (Bild 9)
Internet Explorer ab v6,
Firefox ab v2,
Google Chrome ab v5,
Opera ab v10,
Safari fr Windows ab v5,
Safari fr Mac OS ab v3.1.2,
Safari fr iOS ab v4.
Zum Testen der diversen Browser empfiehlt sich die Verwendung der auf Jasmine basierenden Testsuite. Diese lsst 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 knnen 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 fr
Quereinsteiger unzugnglich zu sein. Dank des
einfachen Aufbaus ist Data Binding auch fr
kleinste Anwendungen sinnvoll einsetzbar. Die
Programmierer verzichten konsequent darauf,
ihren Benutzern eine rigide Applikationstuktur
vorzuschreiben.
[mb]

21

Feature
Marionette.js

Mehr Struktur fr Backbone.js


Marionette.js ist ein beliebtes Zusatzmodul fr Backbone.js. Es soll der Bibliothek fr 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.

ackbone.js hat sich zu einer der beliebtesten


Bibliotheken fr Single-Page-Webanwendungen im Webbrowser entwickelt. Der not
opinionated-Ansatz gilt dabei als einer der entscheidenden Grnde fr 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 Bedrfnisse der eigenen Projekte zurechtschneiden.
Doch dieser Ansatz birgt auch Nachteile: Der
Entwickler trgt eine grere Verantwortung,
auf saubere Strukturen und gute Wiederverwendung zu achten. Umfassende Frameworks
mit Fertiglsungen fr nahezu jeden Zweck sind
zwar unflexibel, aber auch durch unerfahrene
Entwickler gut benutzbar.

Dont repeat yourself


Sptestens seit Andy Hunts und Dave Thomas
Buch Der pragmatische Programmierer ist
das Motto Wiederhole dich nicht zu e inem
Grundsatz fr 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 ntigen 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 ntigen Abstraktionen zu suchen, kann man sich jedoch auch auf
den reichen Erfahrungsschatz anderer Entwickler sttzen. 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 smtliche notwendigen Abhngigkeiten enthlt. Im Archiv befinden sich
sowohl die herkmmlichen Versionen als auch
spezielle Varianten, die bereits als AMD-Module angepasst wurden. Ich erstelle einen Ordner
fr das Demo-Projekt und einen Unterordner js
fr 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 groen Vorteile von RequireJS und
AMD-Modulen ist, dass man fr 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, gengt es bei einem AMD-Modul,
einfach die JavaScript-Datei im Skript-Ordner
zu platzieren. Alle Skripts, die dieses Modul bentigen, werden in den jeweiligen Modulabhngigkeiten 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 ldt die JavaScript-Datei require.js.


Diese ermittelt anhand des Attributs data-main
2/2014

Feature
im script-Tag den Startpunkt fr 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 herkmmliche JavaScript-Dateien, die eigentlich ber script-Tags eingebunden
werden mssten. Eine Mglichkeit wre, diese
Dateien als AMD-Module umzuschreiben. Das
ist allerdings bei Fremdbibliotheken keine gute
Idee, weil man sonst nach jeder neu verfgbaren
Version erneut Konvertierungsaufwnde hat.
RequireJS bietet jedoch eine Lsung an: Shims.
Die Abhngigkeitsinformation der JavaScriptDateien wird damit auerhalb der Dateien gepflegt. In der Shim-Konfiguration werden die
Namen der jeweiligen JavaScript-Dateien (ohne
.js) genannt und jeweils die Abhngigkeiten mit
deps verzeichnet. So wei RequireJS, von welchen anderen Modulen diese Skripts abhngen,
und kann die Ladereihenfolge korrekt berechnen. Auerdem 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 abhngiger Module und einer Callback-Funktion, die
aufgerufen wird, sobald alle Module verfgbar
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 Verfgung 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 zugehrige Datei App.js zeigt Listing 2.
Jedes AMD-Modul enthlt 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 Abhngigkeiten haben: Hier backbone.marionette und ein noch nicht existierendes Modul
Views, in dem spter die Objekte fr die Darstellung definiert werden.
Im App-Modul wird eine Instanz von Marionette.Application erzeugt. Dieses Objekt ist eine
der ersten Erweiterungen von Marionette gegenber 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 Lsung 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 lsst wird damit signalisiert,
dass die Anwendung vollstndig 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 Lschen
der alten View ebenfalls selbst kmmern. 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
hinzugefgt (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; gewissermaen Platzhalter. In der Demo-Anwendung wird die Region viewport und eine weitere Region dialogs hinzugefgt. Beide referenzieren HTML-Elemente anhand eines jQuery-Selektors. Die passenden DOM-Elemente mssen
in der HTML-Datei noch ergnzt 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 eingefgt. 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 einhngen. 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 herkmmlichen 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 herkmmlichen 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, bentigt
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 fllt auf: Da nun Variablen im Template


vorkommen, bentigt man eine Template-Engine, um die Attribute des Models einzusetzen.
Da Backbone sowieso von Underscore.js abhngig 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 fr Sammlungen von Models


Mit Marionette.ItemView kann man mit wenig
Code bereits Views fr Model-Objekte erzeugen. Der Einsatz von Marionette.js macht sich
schon fast damit schnell bezahlt. Doch hufig
geht es in Webanwendungen auch um Samm2/2014

Feature
lungen gleichartiger Objekte. Kommentarlisten,
Aufgabenlisten, Forenbeitrge es gibt unzhlige Beispiele. Fr diesen Anwendungsfall gibt
es die Marionette.CollectionView (Bild 3): Statt
auf ein Backbone.Model greift diese View auf eine Backbone.Collection zu. Eine CollectionView
bentigt zustzlich zwingend einen View-Typ,
der fr 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. Fr jedes Model
wird eine ItemView erzeugt. Diese werden gerendert und einfach per appendHtml hinterei
nander ausgegeben. Ohne weiteres Zutun entsteht so ein div-Tag fr die CollectionView mit
jeweils einem div fr die einzelnen ItemViews.
Doch da sowohl die CollectionView als auch die
ItemView herkmmliche 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 gewnschten Tag-Namen, um
statt des div die gewnschten 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 zurck, so lst das Ereignis reset ein vollstndiges Neurendering aus.
Sptestens 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 fr Views. ItemView ist
der Prototyp aller Model-Views. CollectionView
steht fr eine homogene
Aufreihung von ModelViews. ComponentView
stellt einen Verbund dar:
Eine ItemView neben einem CollectionView; ein
Model neben einer Col
lection. Entsprechend bentigt man fr die ComponentView sowohl ein
Model als auch eine Col
lection. Dieses Pattern
kann viele Anwendungsflle 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 gehren nicht

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

zwingendermaen 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 fr Commands enthlt. Das Layout GalleryLayout enthlt eine Region fr die Navigation und eine
fr 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
befllen. Das Besondere: Wird ein Layout als
View in einer Region geschlossen, so schliet
es selbst ebenfalls alle Views in seinen Regio
nen. So knnen komplexe Bedienoberflchen
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 eigenstndige Komponententyp Marionette.Controller eingefhrt 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, smtliche Routing-Aufrufe direkt an einen assoziierten Controller weiterzureichen (Listing 6).
Die Abhngigkeiten einer Marionette.js-Anwendung knnen Sie in Bild 4 sehen. Beachten
Sie, dass der Router keine Abhngigkeit auf
das App-Modul hat Router mssen 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, bentigt 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 (Listing8). Das neue App-Modul hat kaum Abhngigkeiten. Es werden lediglich nach wie vor die
globalen Regionen fr Viewport und Dialoge
registriert.
Im Ereignis-Handler initialize:after wird nun
die Backbone.history gestartet. Damit reagiert
der Router auf den URL und lst alles weitere aus. Beachten Sie: Weder der Router noch
der GalleryController ist hier als Abhngigkeit
eingetragen. Bislang war die einzige Abhngigkeit in der main.js-Datei das App-Modul. Damit
wrde weder der Router noch der GalleryController geladen werden. Die angepasste main.js
zeigt Listing 9.
Der Router wird als neue Abhngigkeit eingetragen, und bevor die Anwendung gestartet
wird, muss eine Instanz erzeugt werden. Der
GalleryController wird als Abhngigkeit 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 Abhngigkeiten zwischen den einzelnen Komponenten bestehen: Router sollten demnach lediglich
ihren Controller kennen, und die App ist selbst
lediglich Abhngigkeit in allen Modulen, die anwendungsglobale Zugriffe bentigen. Die meisten Abhngigkeiten 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 Flexibilitt von Backbone.js aufzugeben. Die Aufteilung
des Backbone.Routers in puristische
AppRouter ohne Logik und vom Routing unabhngig arbeitende Marionette.Controller ist ein sehr sinnvoller Ansatz. Auch die diversen Views erleichtern Entwicklern die Arbeit enorm.
Nervige Verwaltungs- und Auf
rumarbeiten erledigt das System nahezu automatisch. Am Ende spart man
so groe Mengen an Boilerplate-Code,
hat eine schlankere, saubere Codebasis
und noch ein wenig mehr Struktur, als
sie durch Backbone.js alleine gewhrleistet wird.
Damit kann man Backbone-Entwicklern, die sich noch kein eigenes
Werkzeug-Set geschaffen haben, empfehlen, es doch einmal mit Marionette.
Abhngigkeitsgraph einer Marionette.js-Webanwendung (Bild 4)
js zu probieren.
[mb]
2/2014

Jetzt Ihre
web&mobile developer
auf dem iPad lesen

Fr
Abonne
nte
gratis! n
27

Feature
Node.js

Datenbanken anbinden
Bei der Implementierung von Applikationen mssen immer wieder Daten gespeichert werden. Node.js stellt
zur Persistierung von Daten lediglich das fs-Modul zur Verfgung. Von Sebastian Springer

Autor

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

Tabellen von relationalen Daten


banken knnen ber foreign keys
in Verbindung zueinander gesetzt
werden (Bild 1)

28

er Nachteil dieser Methode ist, dass der Zugriff auf die Daten problematisch ist. Im
schlechtesten Fall mssen Sie die gesamte Datei nach den gewnschten Informationen durchsuchen, was je nach Dateigre 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 Fllen bentigen 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 knnen. Durch
diese Struktur ist die Untersttzung von Datenbanken nicht nur auf einige wenige Systeme beschrnkt, stattdessen knnen Sie beispielsweise
die relationalen Datenbanken MySQL, MS SQL
oder SQLite verwenden.
Auch viele nichtrelationale Datenbanken wie
Redis, CouchDB oder MongoDB werden mittlerweile untersttzt. In diesem Artikel erfahren
Sie mehr ber die Anbindung verschiedener Datenbanken an Ihre Node.js-Applikationen. Konkret werden MySQL, SQLite, Redis und MongoDB behandelt.
Fr 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 Datenstze,

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 Datenstze
wieder aus der Datenbank.
Auerdem erfahren Sie mehr ber die Einsatzgebiete und Vor- und Nachteile der einzelnen Datenbanken.

Relationale Datenbanken
Relationale Datenbanken haben sich ber Jahre
zu einem Standard fr 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 Datenstze. Sie knnen sich eine Tabelle in
einer relationalen Datenbank wie eine ganz gewhnliche Tabelle vorstellen. Die Zeilen stellen die einzelnen Datenstze dar und die Spalten die jeweiligen Eigenschaften. Das bedeutet,
dass smtliche Datenstze einer Tabelle die gleiche Struktur aufweisen.
In relationalen Datenbanken haben Sie die
Mglichkeit, nicht nur eine Tabelle, sondern nahezu beliebig viele zu definieren. Diese Tabellen
knnen Sie dann ber sogenannte foreign keys,
auf Deutsch Fremdschlssel, in Verbindung zueinander setzen (Bild 1). So knnen Sie beispielsweise eine Tabelle definieren, in der Sie die Daten Ihrer Benutzer wie den Namen oder das Geburtsdatum speichern. In einer zweiten Tabelle
knnen Sie dann die Adressinformationen speichern. ber einen Fremdschlssel knnen Sie
2/2014

Feature
zwischen den Datenstzen 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 hinzufgt.
Weitere Informationen 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 fr die Datenbank und ein konkretes Beispiel zur Verwendung der Datenbank innerhalb einer Node.jsApplikation. Als Beispiel dient eine Datenbank
fr Adressdaten.

MySQL
MySQL ist eine der am weitesten verbreiteten
Datenbanken im Web. Mit nahezu allen bedeutenden Programmiersprachen knnen Sie auf
diese Datenbank zugreifen, so auch von Node.
js aus (Bild 3).
MySQL hat sich bereits seit vielen Jahren auch
in sehr groen Applikationen als Datenbank bewhrt. Das System verfgt 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 Ausfallsicherheit
gewhrleisten knnen. Fr sehr groe Datenmengen lsst sich eine Datenbank auch partitionieren und auf mehrere Systeme verteilen,
was weitere Mglichkeiten hinsichtlich Performance-Steigerungen bietet.
MySQL bietet viele ntzliche Features. Diese umfassen beispielsweise Trigger, also Funktionen, die bei bestimmten Operationen ausgefhrt werden, beziehungsweise Transaktionen.
Dies ist eine Gruppe von Operationen, die nur
in ihrer Gesamtheit oder berhaupt nicht ausgefhrt werden drfen.
Ein weiterer Vorteil von MySQL ist, dass diese Datenbank auf sehr vielen verschiedenen Betriebssystemen wie beispielsweise Linux, Windows oder Mac OS X verfgbar ist. Diese Verfgbarkeit und die weite Verbreitung haben zu
einer sehr aktiven Community gefhrt, auf die
Sie bei Fragen oder Problemen zurckgreifen
knnen.
Ein Nachteil von MySQL ist, dass es hinsichtlich des Feature-Sets noch nicht ganz mit den
groen 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';
Anstze 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. Fr
diesen Treiber wird keine
weitere Software bentigt,
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 ausgefhrt wird, installiert sein mssen (Bild 4).
Der auf den MySQL-Clientbibliotheken basierende Treiber ist als NPM-Modul verfgbar und
kann ber die Kommandozeile installiert werden. Wie bereits erwhnt, mssen 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, knnen Sie von
Ihrer Applikation aus
auf eine MySQL-Datenbank zugreifen.

Datenbankstruktur

Damit Sie die nachfolgenden Beispiele nachvollziehen knnen, bentigen Sie eine lauffhige 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 ausgefhrt, knnen Sie im nchsten 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 zurckflieen
knnen. Listing 2 zeigt Ihnen, wie Sie eine solche
Verbindung aufbauen.
Im Quellcode sehen Sie, dass Sie der Data
base-Methode eine Objektstruktur bergeben
knnen, die die Konfiguration der Verbindung
enthlt. Auf dem zurckgegebenen Objekt kn-

nen Sie verschiedene Methoden aufrufen. ber


die on-Methode knnen Sie beispielsweise direkt Callback-Funktionen an Ereignisse binden,
die im Verlauf des Verbindungsaufbaus auftreten knnen. Konkret sind dies die Ereignisse error, das im Fehlerfall auftritt, und ready, das ausgelst 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. Smtliche 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 Verfgung, auf dem
Sie die insert-Methode aufrufen. Dieser Methode mssen Sie als ersten Wert den Namen der
Tabelle bergeben, in die Sie die Daten einfgen mchten. 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 Rckgabewert der insert-Methode aufrufen, fhrt
schlielich die Abfrage aus. Diese Methode akzeptiert wiederum eine Callback- Funktion, die
ausgefhrt wird, sobald das Ergebnis der Abfrage vorliegt. Als erstes Argument erhlt 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 Datenstze, die betroffen waren, und
die Anzahl an Warnungen, die bei der Opera
tion aufgetreten sind.

Datenstze auslesen
Nachdem Sie Datenstze in die Datenbank eingefgt haben, werden Sie diese in den meisten
Fllen auch wieder auslesen wollen. Der My
SQL-Treiber bietet Ihnen hierfr die select-Methode des Query-Objekts. In Listing 4 sehen Sie
den konkreten Einsatz dieser Methode.
Wie Sie sehen knnen, geschieht die Abfrage der Datenbank wiederum ber eine Kombination von Methoden. Am Anfang steht die
query-Methode, die das Query-Objekt zur Verfgung stellt. Danach verketten Sie die verschiedenen Methoden, die schlielich die Abfrage bilden, die dann mit Hilfe von execute ausgefhrt
wird. Die execute-Methode akzeptiert eine Callback-Funktion als Wert. Diese Callback-Funk
tion erhlt 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 Datenstze darstellen. Das dritte Argument enthlt schlielich ein
Array mit Objekten, die die gefundenen Spalten
reprsentieren.
Zum Aufbau einer Abfrage knnen Sie auf
verschiedene Methoden zurckgreifen. Die Basis bilden die Methoden select und from. Zur Einschrnkung der gefundenen Datenstze knnen
Sie mit der where-Methode Bedingungen definieren, die die Datenstze erfllen mssen. Mit
join knnen Sie mehrere Tabellen innerhalb einer Abfrage verbinden.
Um den Rahmen dieses Artikels nicht zu
sprengen, werde ich hier nicht auf weiterfhrende Operationen wie die Verbindung mehrerer Tabellen eingehen.

Datenstze aktualisieren
Der Vorteil einer Datenbank ist, dass Sie sehr
schnell auf Daten zugreifen und diese bei Bedarf auch ndern knnen. 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 Datenstzen hnlich, wie Sie es auch direkt
in SQL machen wrden, also mit einer Kombination aus query, update, set, where und execute.
Mit update geben Sie an, welche Tabelle betroffen ist. set erhlt die Werte, die gendert werden
sollen, in einer Objektstruktur als Argument.
Mit where schrnken Sie die Datenstze ein, die
aktualisiert werden sollen.
Das Fragezeichen in der Zeichenkette dient
als Platzhalter, der bei der Ausfhrung 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. Schlielich fhrt execute die Abfrage aus.
Auch diesmal erhlt diese Methode wieder
eine Callback-Funktion mit einem Fehlerobjekt
und einem Resultat-Objekt. Dieses Objekt enthlt eine ID-Eigenschaft, die allerdings den Wert
0 aufweist, die Anzahl der betroffenen Zeilen
und die Anzahl der Warnungen.

Datenstze entfernen
Die letzte Operation, die Sie hier kennenlernen,
ist das Lschen von Datenstzen aus der Datenbank. Das Lschen von Datenstzen lsst sich
nicht ohne Weiteres rckgngig machen. Arbeiten Sie mit referenzieller Integritt ber Fremdschlssel, kann das Lschen eines Datensatzes
eine Kaskade von Lschungen anderer Datenstze nach sich ziehen, die auf diesem Datensatz aufbauen.
Eine weiterfhrende Erklrung zu Fremdschlsseln unter MySQL finden Sie unter http://
dev.mysql.com/doc/refman/5.5/en/create-tableforeign-keys.html. Beim Lschen von Datenstzen sollten Sie also stets Vorsicht walten lassen.
Listing 6 zeigt Ihnen, wie Sie Datenstze aus Ihrer Datenbank entfernen knnen.
Auch in diesem Beispiel sehen Sie die gewohnte Kombination von Methoden zum Formulieren der Abfrage. Die Callback-Funktion
der execute-Methode erhlt zwei Argumente.
Das erste Argument enthlt eventuelle Fehler,
die bei der Lschoperation aufgetreten sind. Das
zweite Argument enthlt das Ergebnis der Abfrage. Im Fall des Lschens eines Datensatzes
ist dies ein Objekt, das insgesamt drei Eigenschaften enthlt. Die Eigenschaft id enthlt immer den Wert 0, affected gibt an, wie viele Zeilen
gelscht wurden, und warnings enthlt die Anzahl der Warnungen, die whrend der Abfrage
aufgetreten sind. Eine Alternative zum endgltigen Lschen von Datenstzen ist das Mar-

Listing 3: Neue Datenstze


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 knnen. 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 untersttzt nicht


den vollen SQL-Sprachumfang (Bild 6)

kieren von Datenstzen. In der Datenbank wird


dies durch ein weiteres Feld innerhalb der Tabelle reprsentiert. Dieses Feld enthlt den Wert
0 fr aktive Datenstze und den Wert 1 fr gelschte Datenstze. Der Nachteil dieser Variante ist, dass Sie sich selbst um die referenzielle Integritt Ihrer Datenbank kmmern mssen, also abhngige Datenstze selbst als gelscht markieren mssen.

SQLite
Eine leichtgewichtigere Alternative zu MySQL
als Datenbank fr 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 bentigt
wird. Die Clientsoftware greift bei Abfragen direkt auf die in einer Datei gespeicherten Datenbank zu. SQLite erfordert auerdem keine Konfiguration. Sie knnen die Datenbank nach der
Initialisierung sofort verwenden.
SQLite steht Ihnen auf den verschiedensten
Systemen zur Verfgung. So gibt es vorkompilierte Binrpakete fr Linux, Mac OS X und auch
fr Windows. Da SQLite die Datenbankdaten in
einer Datei speichert, knnen diese auf sehr einfache Weise kopiert und gesichert werden.
Im Gegensatz zu MySQL verfgt SQLite ber
keine eigene Benutzerverwaltung. Sie haben also keine Mglichkeit, Berechtigungen zu vergeben, was ein Mehrbenutzersystem unmglich macht. Fr 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, knnen


Sie eine SQLite-Datenbank an Ihre Applikation
anbinden und diese zur Persistierung von Daten verwenden.
Bevor Sie jedoch mit der Datenbank interagieren knnen, mssen Sie diese anlegen. Lis
ting 7 fhrt 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 fllt Ihnen bestimmt
das Fehlen der ID-Spalte im Vergleich zu My
SQL auf. Ein solches Feld ist bei SQLite unntig,
da jeder Datensatz automatisch eine Zahl zugeordnet bekommt, die in der Tabelle eindeutig
ist und ber die der Datensatz identifiziert werden kann. Zugreifen knnen Sie auf diesen Wert
ber den Spaltennamen rowid.

SQLite verfgt ber keine interne


Benutzerverwaltung
Da SQLite wie bereits erwhnt ber keine interne Benutzerverwaltung verfgt, ist der Aufbau
einer Verbindung relativ problemlos. Das folgende Listing zeigt Ihnen, wie Sie die Verbindung zu einer SQLite-Datenbank aufbauen knnen, 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 ermglicht.
Im zweiten Schritt initialisieren Sie schlielich
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 knnen Sie mit diesem DatenbankObjekt Ihre Abfragen an die Datenbank senden.
Zunchst nutzen Sie nun die bestehende Verbindung zur Datenbank, um einen neuen Datensatz anzulegen.

Datensatz einfgen
Noch verfgt die Datenbank in der Datei node.
db lediglich ber eine leere Tabelle Addresses. Im
2/2014

Feature
ersten Schritt fgen Sie nun einen neuen Datensatz ein. Listing 8 zeigt Ihnen den dazu erforderlichen Quellcode. Dabei wird davon ausgegangen, dass db das Datenbank-Objekt enthlt.
Mit der run-Methode des Datenbank-Objekts
knnen Sie Abfragen zum Anlegen neuer Datenstze 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 enthlt Parameter, die in die Abfrage eingebunden
werden sollen. Sie sehen in dem Beispiel, dass
die SQL-Abfrage drei Fragezeichen enthlt. Diese werden durch das Array im zweiten Argument mit konkreten Werten ersetzt. Dabei kmmert sich der Datenbanktreiber um das korrekte Escaping der Werte.

Callback-Funktion
Das dritte Argument ist schlielich eine Callback-Funktion, die aufgerufen wird, sobald die
Antwort des Servers vorliegt. Das einzige Argument, auf das Sie in dieser Callback-Funktion
zugreifen knnen, ist ein Fehlerobjekt, das existiert, falls bei der Abfrage Probleme aufgetreten
sein sollten. ber this knnen Sie innerhalb der
Callback-Funktion auf weitere Informationen
zugreifen. Im Fall einer INSERT-Abfrage steht
Ihnen hier die Eigenschaft lastID zur Verfgung.
Sie enthlt die rowid des Datensatzes, den Sie mit
diesem Kommando eingefgt haben.
Das Resultat der Operation knnen Sie entweder direkt ber einen Kommandozeilen
client fr SQLite prfen, oder Sie erweitern Ihren Code um eine weitere Abfrage, die die entsprechenden Werte wieder aus Ihrer Datenbank
ausliest. Der nchste Abschnitt beschftigt sich
mit genau dieser Problemstellung.

Mehrere Methoden zum Auslesen


Haben Sie erst einmal Daten in Ihre Datenbank
geschrieben, mchten Sie diese zu einem bestimmten Zeitpunkt auch wieder auslesen. Der
von Ihnen bisher verwendete SQLite-Treiber
verfgt ber mehrere Methoden, mit deren Hilfe Sie Daten aus Ihrer Datenbank auslesen knnen.
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 enthlt, die Sie ausfhren mchten. Auch hier knnen Sie wieder Fragezeichen als Platzhalter verwenden, die durch die Werte im zweiten Argument ersetzt werden. Das dritte Argument besteht aus der Callback-Funktion, die ausgefhrt
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 reprsentiert. Die Spaltennamen sind dabei die Eigenschaften. Die jeweiligen Werte der Felder des Datensatzes werden dann diesen Eigenschaften zugewiesen.
Zustzlich zur get-Methode bietet Ihnen der
SQLite-Treiber zwei weitere Methoden. Mit Hilfe der all-Methode knnen Sie nicht nur einen
einzelnen Datensatz, sondern smtliche Datenstze, die eine SELECT-Abfrage zurckliefert,
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 ermglicht es Ihnen schlielich, eine Callback-Funktion zu definieListing 7: Datenbank anlegen
ren, die fr jeden Datensatz,
den eine Abfrage zurcklie$ sqlite3 node.db
fert, ausgefhrt wird. Diese
SQLite version 3.7.9 2011-11-01
00:52:41
Methode verhlt sich wie die
Enter ".help" for instructions
get-Methode, auer 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 smtliche Callbacks fr
);
die einzelnen Datenstze absqlite>
gearbeitet wurden. Der folgende Abschnitt zeigt Ihnen,
wie Sie vorgehen knnen,
falls Sie bestehende DatenListing 8: Datensatz anlegen
stze, die sich bereits in Ihrer Datenbank befinden, ndb.run('INSERT INTO Addresses
VALUES (?, ?, ?)',
dern mchten.
['Broadway 1', 'New York', 'United
In SQLite knnen Sie wie
States of America'],
auch schon in MySQL die Infunction (err) {
formationen, die als Datenif (err) throw err;
console.log('ID: ' + this.lastID);
stze in Ihrer Datenbank lie});
gen, ber bestimmte Abfragen ndern. Der SQL-

33

Feature

Hufig werden in nichtrelationalen Datenbanken Objektoder Dokumentstrukturen


gespeichert (Bild 7)

Standard sieht fr diesen Fall die UPDATE-Abfrage vor. Um diese Art von Abfragen abzusetzen, mssen Sie auf die run-Methode zurckgreifen, die Sie bereits zum Anlegen von Datenstzen verwendet haben. Listing 9 stellt Ihnen vor,
wie Sie bei der Aktualisierung von Datenstzen
vorgehen sollten.
Der Quellcode dieses Listings funktioniert
hnlich zu dem, den Sie implementiert haben,
als Sie Datenstze angelegt haben. Die einzigen
Unterschiede sind die genderte 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 enthlt die
Anzahl der betroffenen Zeilen.
Die letzte Operation, die Sie hier zu S
QLite
kennenlernen sollen, ist das Entfernen von Datenstzen.

Einfache Anpassungen
Um Datenstze aus Ihrer Datenbank wieder zu
entfernen, knnen Sie wie beim Einfgen und
Aktualisieren auch auf die run-Methode zurck-

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 knnen.
In der run-Methode mssen Sie im Vergleich
zur Aktualisierung von Datenstzen lediglich
die SQL-Abfrage anpassen und die Parameter,
die Sie verwenden mchten, entsprechend ndern. In der Callback-Funktion erfahren Sie wiederum ber this.changes, wie viele Datenstze
von der Lschung betroffen waren.
Wie schon in den Abschnitten ber MySQL
ist auch hier ein Wort der Warnung angebracht.
Das Lschen von Datenstzen kann nicht umgekehrt werden. Das bedeutet, dass einmal gelschte Datenstze unwiederbringlich verloren
sind, es sei denn, Sie haben eine funktionierende Datensicherung, aus der Sie die Datenstze
wiederherstellen knnen.
Die hier vorgestellten Features von SQLite
und des SQLite-Treibers sind lediglich ein kleiner Ausschnitt des vollen Funktionsumfangs
(Bild 6).
Mchten Sie mehr darber erfahren, was Sie
mit dieser Datenbank und dem zugehrigen
Treiber umsetzen knnen, verweise ich Sie an
dieser Stelle auf die jeweilige Online-Dokumentation unter www.sqlite.org/docs.html fr SQLite und https://github.com/developmentseed/
node-sqlite3/wiki fr 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 fr schnellen Zugriff wieder zur Verfgung 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. Hufig werden in nichtrelationalen Datenbanken Objektoder Dokumentstrukturen gespeichert, auf die
Sie ber bestimmte Schlssel- beziehungsweise
Indexwerte zugreifen knnen (Bild 7).
Diese werden unter dem Sammelbegriff No
SQL zusammengefasst. Weiterfhrende 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 Mglichkeit, Werte zu speichern und sie mit einem Schlssel zu versehen.
ber diesen Schlssel knnen Sie wieder auf
diesen Wert zugreifen (Bild 8).
Redis speichert die Werte im Arbeitsspeicher,
was zu einer sehr hohen Leistung bei Lese- und
Schreiboperationen fhrt. Der Nachteil dieser
Technologie ist, dass der Inhalt des Arbeitsspeichers nach einem Systemabsturz unwiederbringlich verloren ist. Die Entwickler von Redis
haben fr dieses Problem eine sehr elegante Lsung gefunden. Das System kann zu definierbaren Zeitpunkten eine Sicherheitskopie der Datenbank auf die Festplatte schreiben, von der
aus eine Wiederherstellung der Inhalte problemlos mglich ist.

Werte werden im Arbeitsspeicher


abgelegt
Redis ist primr fr POSIX-Systeme wie Linux,
BSD oder Mac OS X verfgbar und wird auch
auf diesen Systemen entwickelt. Fr Windows
existiert zwar eine Version des Redis-Servers,
diese ist allerdings noch experimentell.

Der Redis-Client fr
Node.js liegt wie die brigen Treiber fr 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, knnen 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, mssen
Sie keine weiteren Operationen zur Initialisierung einer Datenbank unternehmen, sondern
knnen sich direkt um die Verbindung mit dem
Server kmmern.
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
mchten: Unsere Bcher und VideoTrainings zeigen Ihnen, wies 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, wies geht.

Feature

Redis ist ein einfacher Key-ValueStore, der die Werte im Arbeits


speicher speichert (Bild 8)

code herstellen knnen. Fr die eigentListing 12: Verbindung aufbauen


liche Verbindung bentigen 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 knnen.
Die Kommunikation erfolgt asynchron
client.quit();
und eventbasiert.
});
Das bedeutet konkret, dass Sie CallbackFunktionen auf verschiedene Ereignisse binden
Die set-Methode erhlt insgesamt drei Arguund damit jeweils auf das Ereignis reagieren
mente. Das erste Argument ist eine Zeichenketknnen. Im Beispiel sehen Sie dies anhand des
te, die den Schlssel angibt, ber den Sie sperror-Events, das ausgelst wird, falls ein Fehler
ter wieder auf die Daten, die Sie im zweiten Arbei der Verbindung mit dem Redis-Server aufgument angeben, zugreifen knnen. Das drittritt. Weitere Ereignisse, auf die Sie reagieren
te Argument ist schlielich eine Callback-Funk
knnen, sind ready, connect, end, drain und idle.
tion, die ausgefhrt wird, sobald der Server eine Rckmeldung sendet.
Verbindung zum Server
Diese Callback-Funktion erhlt zwei Werte.
Sobald Sie die Verbindung zum Server nicht
Der erste ist ein Fehlerobjekt, das im Standardmehr bentigen, sollten Sie diese mit einem Auffall den Wert null aufweist und nur im Fehlerfall
ruf der Methode exit oder quit beenden. Andernweitere Informationen enthlt. Der zweite Wert
falls wird die Verbindung offengehalten und die
ist die Antwort des Servers. Gab es keine ProbApplikation nicht beendet.
leme beim Einfgen der Daten, erhalten Sie hier
Der Unterschied zwischen beiden Methoden
die Zeichenkette OK. Im Beispiel sehen Sie auliegt darin, dass exit die Verbindung sofort beenerdem, 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 smtlibindung nach erfolgtem Einfgen der Daten zu
che Antworten vom Server vorliegen, und beenbeenden.
det dann die Verbindung.
Mit der Methode set knnen Sie neue DatenAuf die Daten zugreifen
stze in Redis anlegen:
Haben Sie Daten eingefgt, mchten 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 knnen.
if (err) throw err;
hnlich einfach wie das Erstellen ist auch das
console.log(res);
Auslesen von Datenstzen. Mit der get-Methode knnen Sie ber einen Schlssel auf einen gespeicherten Wert zugreifen (Listing 12).
Im Gegensatz zur set-Methode akzeptiert get
lediglich zwei Eingabewerte. Der erste ist der
Schlssel des Wertes, den Sie auslesen mchten, und der zweite eine Callback-Funktion, die
ausgefhrt werden soll, sobald das Ergebnis
vom Server vorliegt. Die Callback-Funktion erhlt zwei Argumente. Das erste besteht aus einem Fehlerobjekt, und das zweite enthlt die
Antwort des Servers, bestehend aus dem Wert
fr den zuvor angegebenen Schlssel. Innerhalb der Callback-Funktion knnen Sie wiederum die Verbindung beenden.

Datenstze modifizieren
Mchten Sie Datenstze, die in Ihrer Datenbank liegen, modifizieren, knnen Sie hierbei
auf zwei verschiedene Arten vorgehen. Wollen

36

2/2014

Feature
Sie den Datensatz grundlegend verndern, erreichen Sie dies, indem Sie den neuen Wert einfach per set speichern. Dies berschreibt den bereits bestehenden Datensatz in der Datenbank.
Mchten Sie allerdings lediglich Informationen
an den Datensatz anhngen, knnen Sie die append-Methode verwenden. Listing 13 zeigt Ihnen
in einem stark verkrzten Beispiel, wie Sie in einem solchen Fall vorgehen mssen.
Die append-Methode wird wie set aufgerufen,
nur dass sie den bestehenden Datensatz nicht
ersetzt, sondern lediglich die Informationen anhngt.
Im Verlauf Ihrer Applikation kann es immer
wieder vorkommen, dass Sie Daten aus Ihrer
Datenbank wieder entfernen mchten. Der folgende Abschnitt beschftigt sich damit, wie Sie
Datenstze aus Ihrer Datenbank entfernen.

Eintrge aus der Datenbank


entfernen
Der Befehlssatz des Redis-Servers enthlt das
Kommando del, mit dem Sie Eintrge aus Ihrer
Datenbank entfernen knnen:
client.del('node.js', function (err,
res) {
console.log(res);
});

Um einen Datensatz aus Ihrer Datenbank zu


entfernen, bergeben Sie der del-Methode den
Schlssel des Datensatzes, den Sie lschen
mchten. Als zweites Argument akzeptiert diese Methode eine Callback-Funktion, die ausgefhrt wird, sobald die Lschung erfolgt ist. Sie
erhalten hier Zugriff sowohl auf ein Fehlerobjekt als auch auf die Anzahl der Datenstze, die
bei dieser Operation gelscht wurden.
Diese Betrachtung von Redis und des RedisClients fr Node.js ist nur ein kleiner Ausschnitt
des Feature-Sets, das Ihnen in diesem Zusammenhang zur Verfgung steht. ber den RedisClient knnen Sie auf den gesamten Befehlssatz,
den Ihnen der Redis-Server bietet, zugreifen. So
knnen Sie beispielsweise Hashes und Listen erstellen und mit diesen arbeiten. Sollten Sie sich
nher mit Redis beschftigen wollen, ist http://
redis.io dafr ein guter Ausgangspunkt.

MongoDB
Mit MongoDB lernen Sie in den nchsten 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
Erstverffentlichung fand im Februar 2009 statt.
MongoDB eignet sich aufgrund seiner guten
Performance auch fr grere Applikationen
und bringt darber hinaus einige weitere Features mit, die gerade bei sehr groen Datenmengen entscheidende Vorteile bringen.
MongoDB ist fr die verschiedensten Betriebssysteme wie Linux, Windows, Solaris und
Mac OS X verfgbar. Sie knnen MongoDB also
auf allen Systemen installieren, auf denen auch

Node.js lauffhig 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: Datenstze 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, bentigen
Sie lediglich noch einen Treiber, ber den Sie auf
Ihre Datenbank zugreifen knnen. Fr Node.js
existiert fr diese Zwecke ein in JavaScript implementierter Treiber als fertiges NPM-Paket,
das Sie ber das folgende Kommando installieren knnen:
$ npm install mongodb

Im ersten Schritt erfahren Sie nun wie bei den


vorangegangenen Datenbanken auch, wie Sie
eine Verbindung zu Ihrer Datenbank herstellen
knnen, ber die Sie spter dann Datenstze erzeugen, auslesen, modifizieren und wieder lschen knnen.

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

node.js
JavaScript kennt jeder. Aber JavaScript ist nicht nur eine ClientTechnologie.
Mit Node.js knnen 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 verstndlichen Beispielen werden
die Grundlagen und weiterfhrende Technologien erklrt. Der Leser
erhlt eine Erluterung 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 weiterfhrenden Themen, die durch dieses Buch abgedeckt werden,
zhlen unter anderem Debugging, Qualittssicherung und Skalierung von Node.js-Anwendungen. Auerdem wird gezeigt, wie sich
Node.js in heterogene Serverlandschaften mit anderen Webtechnologien integrieren lsst.
Das Buch eignet sich sowohl zum Erlernen von Node.js als auch
als Nachschlagewerk im tglichen Gebrauch.

38

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

itialisieren. Listing 14 beschreibt, wie Sie hierbei


vorgehen mssen.
Zum Aufbau der Verbindung bentigen 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 erhlt den
Namen der Datenbank, das Serverobjekt und
die Optionen fr die Verbindung.
Rufen Sie schlielich 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 knnen Sie ber das
Client-Objekt mit einem Aufruf der Methode
createCollection erzeugen. Als ersten Wert akzeptiert diese Methode den Namen der Collection.
Der zweite Wert besteht aus einer CallbackFunktion, die fr diese Collection ausgefhrt
werden soll. Alle im Folgenden vorgestellten
Operationen werden innerhalb dieser CallbackFunktion ausgefhrt.

Daten werden in einem JSON-hnlichen


Format abgespeichert
Die Datenstze in MongoDB liegen in einem
JSON-hnlichen Format vor. Das bedeutet, dass
Sie mit Node.js auf sehr einfache Art neue Datenstze erzeugen knnen. Der Client stellt Ihnen zu diesem Zweck die Methode insert zur
Verfgung. Die Verwendung dieser Methode
knnen Sie Listing 15 entnehmen.
Die insert-Methode erhlt als erstes Argument
eine Objektstruktur, die den neuen Datensatz reprsentiert. Im Fall des Beispiels ist dies eine Adresse. Das zweite Argument besteht aus einem
Objekt mit Konfigurationsoptionen. Mchten
Sie im dritten Argument eine Callback-Funk
tion angeben, die nach erfolgter Einfgung ausgefhrt werden soll, mssen Sie hier das Schlssel-Werte-Paar safe:true angeben. Nur dann wird
die Callback-Funktion erst nach dem Einfgen
ausgefhrt.
Die Callback-Funktion erhlt als erstes Argument ein Fehlerobjekt und als zweites das Ergebnis der Einfgung. Das zweite Objekt besteht
aus den Werten, die eingefgt wurden, plus der
eindeutigen ID, die MongoDB diesem Datensatz
zugewiesen hat.

Methode zum Auslesen von Daten


Haben Sie erst einmal Datenstze in der Datenbank angelegt, knnen 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 ausgefhrt
wird, sobald die Daten
aktualisiert sind.

});

Auf die mit createCollection erstellte Sammlung


von Dokumenten knnen Sie die find-Methode
aufrufen, um dort nach Dokumenten zu suchen,
die bestimmten Kriterien gengen.
Wenn Sie der find-Methode keinerlei Werte
bergeben, dann werden smtliche Dokumente
ausgelesen. Sie knnen hier allerdings auch Abfragen definieren und auf diese Weise nur bestimmte Dokumente auswhlen. So ist es beispielsweise mglich, nur Dokumente auszulesen, deren street-Schlssel einen bestimmten
Wert aufweist.
Auf das von find zurckgegebene Objekt knnen Sie die toArray-Methode aufrufen. Diese
sorgt dafr, dass Ihnen in einer Callback-Funktion neben einem Fehlerobjekt ein Array mit
allen gefundenen Dokumenten zur Verfgung
steht. Haben Sie auf diese Weise Dokumente gefunden, kann es sein, dass Sie eines dieser Dokumente anpassen mchten. Der nchste Abschnitt zeigt Ihnen, wie Sie hierbei vorgehen
mssen.

Bestehende Datenstze anpassen


Wie bei vielen anderen Datenbanken haben Sie
auch bei MongoDB die Mglichkeit, die Werte bestehender Datenstze anzupassen. Mit der
update-Methode des MongoDB-Clients knnen
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 erfllen
muss, damit er aktualisiert wird. Das zweite Argument gibt an, welche Werte ersetzt werden
mssen. Mit dem Konfigurationsobjekt im dritten Argument knnen Sie mit Hilfe von safe:true
2/2014

Hochperformante
Datenbank
Sind Datenstze in Ihrer Datenbank veraltet
oder mssen sie aus einem anderen Grund entfernt werden, knnen 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 erhlt als ersten Wert die


Bedingung, mit der die Datenstze identifiziert
werden, die gelscht werden sollen. MongoDB
bietet eine Vielzahl weiterer Operationen, mit
denen Sie die Datenspeicherung innerhalb Ihrer Applikation untersttzen knnen.
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, untersttzt Node.js durch die als NPM-Pakete verfgbaren Datenbanktreiber eine Vielzahl von Datenbanken. Dabei ist die Untersttzung nicht nur auf relationale Datenbanken
beschrnkt. Sie knnen stattdessen auch ver
schiedenste nichtrelationale Datenbanken wie
Redis oder MongoDB verwenden. Mit Hilfe
der Treiber knnen Sie ber die grundlegenden Datenbankfunktionen wie das Anlegen von
Datenstzen und dem Auslesen, Modifizieren
und Lschen von Datenstzen hinaus auch auf
erweiterte Features der Datenbanken zurckgreifen.
Je nachdem, welche Aufgabe Sie mit Ihrer Applikation lsen mssen, haben Sie die freie Wahl,
auf die dafr passende Datenbank zurckzugreifen.
[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 fr schicke Seitenbergangseffekte 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

it CSS-Transforms lassen sich HTML-Elemente drehen, verschieben oder in der Gre verndern. Und das funktioniert nicht nur
auf der flachen Ebene, sondern auch im 3DRaum. Als das WebKit-Team im Jahr 2009 seinen
Vorschlag fr 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 erffnet neue Gestaltungswelten. Die Einsatzbereiche sind vielfltig: So bilden Transformationen die Basis fr
animierte Seitenbergnge, Bildberblendeffekte und einiges mehr ihr wahres Potenzial
zeigen sie in Kombination mit Transitions oder
Animations.
Transformationen sind in 2D und in 3D mglich. 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.

Fr alle Transformationen brauchen Sie die


Eigenschaft transform. Hinter dieser knnen
Sie unterschiedliche Funktionen schreiben je
nachdem, ob Sie das Element drehen, skalieren
oder verschieben wollen.
Fr 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 Prfix -webkitfr Chrome, Safari und andere WebKit-Browser schreiben, auerdem bentigt der Internet
Explorer 9 die Angabe -ms-. Der Internet Explorer ab Version 10 untersttzt allerdings die Standardangabe ohne Prfix.
Fr ltere Firefox mssten Sie -moz- schreiben.
Seit Oktober 2012, als Firefox 16 erschienen ist,
interpretiert Firefox allerdings die Angabe ohne
2/2014

HTML, CSS & JAVASCRIPT


Prfix. Da Firefox mit einer Autoupdate-Funktion ausgestattet ist, knnen Sie heute auf das
-moz-Prfix 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 heien skewX() und skewY(). Sie verzerren ein Element um den angegebenen Grad. Das in frheren Versionen der Spezifikation beschriebene
skew() wird hingegen von Browsern nur noch
aus Grnden der Abwrtskompatibilitt untersttzt.

Mit scale() knnen Sie die Gre von Elementen


variieren. Das Folgende vergrert ein Element
auf das Doppelte:
transform: scale(2);

Auch nicht-proportionale Grennderungen


sind mglich: scaleX() operiert nur auf der Breite, entsprechend verndert scaleY() nur die Hhe. Alternativ zu diesen beiden Funktionen knnen 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 fr


transform-origin auf rotate()
und scale() (Bild 1)

transform-origin
Bisher war nur eine einzige CSS-Eigenschaft
bei den Transformationen involviert, nmlich
transform mit unterschiedlichen Transformationsfunktionen. Fr 2D-Transformationen gibt
es noch eine weitere Eigenschaft mit Namen
transform-origin. Sie bestimmt den Ausgangspunkt der Transformation. Standardmig liegt
dieser in der Mitte des Elements, was sich auch
folgendermaen schreiben lsst:
transform-origin: 50% 50%;

transform: scale(1, 2);

Diese Angabe belsst 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 knnen Sie Prozentwerte


angeben, der erste bezieht sich auf die x-, der
zweite auf die y-Achse. Zustzlich sind die von
der Positionierung von Hintergrundbildern bekannten Schlsselwrter top, bottom, left, right
und center mglich. Auerdem knnen Sie den
Transformationsursprung auch ber andere
Lngenangaben 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 20px weiter rechts (x-Achse) und 100px
weiter unten (y-Achse). Neben translate() knnen Sie translateX() und translateY() nutzen. Dieselbe Wirkung wie durch die vorherige Codezeile liee sich also auch so erzielen:
transform: translateX(20px)
translateY(100px);

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

0px 44px;

Browserintern werden Prozentwerte brigens immer in


feste Lngenangaben wie Pixel
umgerechnet. Das sehen Sie,
wenn Sie in den EntwicklerTools von Firefox auf Berechnet
klicken.
transform-origin ist entscheidend fr 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)

aining

Tr

formation befindet. Sie bekommen unterschiedliche


Ergebnisse, wenn Sie beispielsweise die Drehung
um den Mittelpunkt oder
ber die rechte untere Ecke
durchfhren. Aber transform-origin zeigt auch eine Auswirkung bei scale().
Wenn transform-origin auf
dem Mittelpunkt gesetzt
ist, vergrert oder verkleinert sich das Element symmetrisch von allen Seiten. Ist hingegen die rechte untere Ecke als Transformationsursprung definiert, so bleibt diese fest und die Vergrerung
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. Zustzlich
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 fr den 3D-Raum rotateX(), rotateY(), rotateZ()
oder rotate3d(). hnlich verhlt es sich auch bei
den anderen Transformationsfunktionen.
Abgesehen von zustzlichen Funktionen kommen bei den 3D-Transformationen auch weitere
Eigenschaften ins Spiel, nmlich perspective, perspective-origin, backface-visibility und transformation-style. Sehen wir uns diese einmal an.

Jetzt vom Profi


trainiert werden!
Produktivitt 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 (Bild2).


Die blichen und empfohlenen Werte fr die
Perspektive reichen von 200px bis 900px. Dabei gilt: Je geringer der Wert fr die Perspektive
ist, desto extremer ist der Effekt.
brigens knnen 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, mssen Sie unbedingt dem umfassende Element die Perspektive zuweisen und
nicht den Einzelelementen.
Im Beispiel wurde die transform-Standardangabe durch eine Angabe mit dem Prfix -webkit- gedoppelt. Letzteres brauchen Sie fr gngige WebKit-Browser. Weitere Prfixangaben sind
hingegen nicht notwendig: Der Internet Explorer untersttzt 3D-Transformationen zwar erst
ab Version 10, dafr ohne Prfix. Und beim
Firefox bruchten Sie nur vor Version 16 das
Prfix -moz-.

Die Position des Betrachters


Sie knnen den Blickpunkt beeinflussen, von
dem aus die Elemente betrachtet werden. Dafr
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 lsst
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 ursprnglich und kein bisschen


gedreht. Das ndert sich, wenn wir fr das umfassende Element eine Perspektive definieren:

Beim Ergebnis ist allerdings so von Rumlichkeit 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 Schlsselwrter wie im Beispiel
oder feste Werte erlaubt. Intern werden sowohl
Schlssel- als auch Prozentwerte vom Browser
in Pixel umgerechnet.
Wenn man ein Element um 180 Grad dreht,
sieht man seine Rckseite. 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
gewnscht sein, dass ein Element nicht zu sehen ist, wenn nur seine Rckseite sichtbar wre. 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 heit die Rckseite ist sichtbar.

transform-style
Eine weitere Eigenschaft, nmlich 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 Verfgung stehen bei 3D-Transformationen die Eigenschaften rotateX(), rotateY(), rotateZ() und rotate3d().
rotateX() dreht das Element um die x-Achse,
dasselbe macht rotateY() fr die y-Achse. Das
sind sicher die klassischsten Flle, die Sie am
hufigsten einsetzen werden und die fr einen
schnen 3D-Effekt sorgen. Wenn man etwa den
Vorspann der Star-Wars-Filme mit dem schrg
laufenden Einleitungstext per CSS nachbilden
mchte, bentigt man rotateX() (Bild 3).
rotateZ() dreht das Element auf der Z-Achse.
Von der Wirkung ist das nicht anders als eine
Drehung in 2D.
Auerdem gibt es rotate3d(), wenn die einfachen Drehungen nicht gengen. 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. Ergnzt
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
fr 3D-Transformationen relevant sind. Sehen
wir uns jetzt die Transformationsfunktionen an,
die zur Verfgung stehen.
2/2014

Ebenso entspricht rotate3d(1, 0, 0, 60deg) der Angabe rotateX(60deg), whrend rotate3d(0, 0, 1,


60deg) dieselbe Wirkung wie rotateZ(60deg) hat.
Aber natrlich sind die Flle interessant, bei denen sich eine rotate3d()-Angabe nicht durch einen der anderen Ausdrcke ersetzen lsst.
Selbstverstndlich knnen
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 durchfhren, hat das ein vollstndig anderes Ergebnis zur Folge als bei der umgekehrten Reihenfolge.
translateX() und translateY() kennen Sie von
den 2D-Transformationen. Im 3D-Raum gibt es
zustzlich 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 nher an
den Betrachter gerckt 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)
vergrert. Wie stark die Vergrerung im konkreten Fall ist, hngt auch von der Perspektive
ab. Wie bei anderen Transformationen auch ist
der Effekt bei einem niedrigeren Wert fr die
Perspektive extremer.
translate3d() fasst die anderen Werte zusammen. Durch folgende Angabe wird ein Element
um 30px sowohl auf der x- als auch auf der yAchse und um 60px 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


Rckseite. Zu Beginn ist die Rckseite zu sehen. Bei Mausberhrung alternativ liee sich
auch eine andere Aktion als Auslser whlen
wird die Karte gedreht und die Vorderseite angezeigt. Die Basis fr 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 mssen wir die beiden Kartenansichten bereinander platzieren. Das erreichen wir, indem wir fr
.vorderseite und .rueckseite position: absolute festlegen. Auerdem erhlt das umfassende .karteElement position: relative. Zustzlich werden allen Elementen die gewnschten Ausmae zugewiesen:
.karte

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

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

}
.vorderseite, .rueckseite {

Bei scale() ist fr den 3D-Raum scaleZ() hinzugekommen. Das Bemerkenswerte daran: Es vergrert 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 grerem 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


lsst, modernisiert Modernizr
nicht, sondern es diagnostiziert
nur: Mit Modernizr knnen Sie
berprfen, ob ein bestimmtes
HTML5-oder CSS3-Feature untersttzt wird, und je nach Ergebnis alternative Formatierungen
festlegen. Dafr stellt Modernizr
sowohl eine CSS- als auch eine
JavaScript-Schnittstelle bereit.

44

knnte man also auch ber mehrere Einzeltransformationsfunktionen schreiben:

Damit ist nur die Rckseite zu sehen. Gibt es bei


absolut positionierten Elementen berschneidungen, so werden diejenigen Elemente, die im
Quellcode spter stehen, weiter oben angezeigt.
Da bei uns im HTML-Part .rueckseite nach .vorderseite kommt, ist .rueckseite oben und verdeckt
vollstndig die gleich groe .vorderseite. Sollte eine andere Reihenfolge gewnscht sein, lsst sich
das ber z-index bewerkstelligen.
Kommen wir zu den Drehungen. Im Beispiel
knnen wir die Perspektive bei den Elementen
direkt setzen. Die .vorderseite soll zu Beginn um
-180 Grad gedreht sein also gegen den Uhrzeigersinn. Auerdem setzen wir die Sichtbarkeit der Rckseite auf hidden. Der Krze halber
habe ich auf die zustzliche Angabe mit -webkit- verzichtet:

transform: scaleX(1.5) scaleY(1.5)


scaleZ(0.75);

.vorderseite {
transform: perspective(450px)

brigens knnen Sie die genaue Position der


Elemente auch direkt ber eine Matrix-Funktion
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 Rckseite 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 ausgelst werden, dass der Benutzer ber .karte mit
der Maus fhrt. In diesem Fall soll die .vorderseite nicht gedreht erscheinen:
.karte:hover .vorderseite {
transform: perspective(450px)
rotateY(0deg);
}

Hingegen soll die Rckseite gedreht werden:


.karte:hover .rueckseite {
transform: perspective(450px)
rotateY(179.9deg);
}

Damit die Drehung aber auch sprbar wird,


mssen wir eine Transition definieren dieses
Mal mit dem WebKit-Prfix, weil es hier an zwei
Stellen erforderlich ist bei transition und bei
transform:

Buckler bei Sitepoint dafr sorgen, dass die


Drehung auch wirklich immer in die gewnschte Richtung erfolgt.
Diesen Effekt knnen Sie fr verschiedene
Zwecke einsetzen, so lieen sich etwa zustzliche Informationen zu einem Bild auf diese Art
unterbringen. Das Prinzip der Drehung und des
Anzeigens und Verbergens von Elementen lsst
sich aber fr weit ber dieses Beispiel hinaus gehende Flle nutzen es bildet eben auch die Basis fr animierte Seitenbergnge oder animiertes Einblenden von Dialog- und hnlichen Elementen.

Fallback-Lsungen
Bei den 2D-Transformationen ist die Browser
untersttzung inzwischen sehr gut, einziger
Ausreier ist der CSS3-Totalverweigerer Internet Explorer 8. Falls Sie hier nachbessern wollen oder mssen, hilft der proprietre MatrixFilter. Den bentigten Code knnen Sie sich von
dem Tool IEs CSS3 Transforms Translator erzeugen lassen.
Bei den 3D-Transformationen sieht die Untersttzung inzwischen fast genauso gut aus nur
der IE9 spielt noch nicht mit; denn der IE9 hat
zwar die 2D-Transformationen implementiert,
aber nicht die 3D-Erweiterung. Bei Bedarf knnen Sie eine 2D-Transformation als Fallback fr
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 fr den IE8 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 Rckseite 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. Wrden Sie dies nicht angeben, wre beim Hovern die .rueckseite gedreht
aber weiterhin oberhalb der .vorderseite und
wrde sie verdecken. Hat man auf der Rckseite beispielsweise einen Text stehen, so wre dieser nun spiegelverkehrt. In unserem Beispiel soll
die Rckseite im gedrehten Zustand nicht sichtbar sein und das gelingt mit backface-visibility:
hidden. Denn wir ndern nicht wirklich die Zeichenreihenfolge, .rueckseite bleibt whrend des
ganzen Vorgangs oben, aber es wird eben dank
backface-visibility beim Hovern unsichtbar.
Vielleicht haben Sie sich gefragt, warum in
den Beispielen nicht 180deg, sondern 179.9deg
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 knnen, interpretieren die 2D-Transformation. In Browsern jedoch, die 3D-Transformationen verstehen, berschreibt die zweite Angabe die erste. Fr den Einsatz mssen Sie
die herstellerspezifischen Prfixe ergnzen
Verwendet man die 3D-Transformationen
zum Ein- und Ausblenden von Elementen oder
Seiten, so empfiehlt es sich, zustzlich als Fallbacklsung ein Fade-in/Fade-out zu definieren.
Bei Fade-Effekten wird das Ein- und Ausblenden ber die Vernderung der opacity-Eigenschaft umgesetzt. Der Vorteil liegt darin, dass
sich die opacity-Eigenschaft auch in lteren IEs
ber filter-Angaben nachbilden lsst. brigens
verfhrt auch jQuery Mobile auf diese Art: In
Browsern, die 3D-Transformationen nicht untersttzen, wird stattdessen auf den Fade-Effekt
zurckgegriffen. 
[mb]

45

HTML, CSS & JAVASCRIPT


Das Canvas-Element in HTML5

Kleiner Zeichenkurs
Das neue <canvas>-Element in HTML5 bietet zahlreiche neue Mglichkeiten 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

s spricht viel dafr, 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 Mglichkeiten beim Einsatz
von Illustrationen, Diagrammen und Bildern.

Rechteckiger Bitmap-Bereich
Webseiten, die nur aus Textblcken und starren
Bildern bestehen, zhlen inzwischen zu den seltener werdenden Ruhezonen im Web. Zu den
Werkzeugen, mit denen mehr Leben und mehr
Dynamik auf die Seite kommt, gehrt das in
HTML5 bereitgestellte, neue Element <canvas>.
<canvas> ist definiert als ein von der gegebenen Auflsung abhngiger 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 zustzliche Add-ins
auf die Webseite zu bringen. Aktuell ist das, was
sich in einem Canvas ereignen kann, auf zweidimensionale Abbildungen beschrnkt.
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 eingefgt wird. Das
unterscheidet das HTML5-Canvas beispielsweise von den <canvas>-Elementen, die in Silverlight und XAML verwendet werden. Dort
geht es um Container
fr Elemente, die als
skalierbare Vektorgrafiken eingefgt werden.
Das Canvas-Element in
HTML ist eine leichter
zugngliche Alternative zu grafischen Lsungen 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 untersttzt oder die Ausfhrung von JavaScript im
Browser unterbunden ist.
Wenn Sie ein <canvas>-Element mit einer Zeile
wie der folgenden in eine Seite einfgen, werden
Sie zunchst 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 hinterlsst 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 Gre des Bereichs fest. Fehlen Werte
fr diese Attribute, gilt als Vorgabe width="300"
und height="150". Die Werte werden in Pixel
angegeben. Statt mit den Attributen zu arbeiten, knnen 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
einfgen.
<canvas id="r" ...>
</canvas>

Das Element lsst sich anschlieend innerhalb


eines Skripts direkt ansprechen:
var canvas = document.
getElementById("r");

Fr das <canvas>-Element ist der DOM-Baum


von HTML5 entsprechend erweitert worden. Je2/2014

HTML, CSS & JAVASCRIPT


des <canvas>-Element ist im DOM als eigenstndige Instanz vertreten. Fr jedes Element gilt dabei ein bestimmter Kontext. Erst ber das drawing context-API stehen die Zeichenfunktionen
zur Verfgung, mit denen Sie den Bereich mit
Inhalt fllen. Diesen Kontext sprechen Sie in
JavaScript 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 fr
das Zeichnen brauchen. Eine genaue Beschreibung dieses Objekts finden Sie im WHATWGEntwurf fr 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 fr den Zeichenstift fest.
Mit globalAlpha(Wert) wird die Transparenz geregelt: 0.0 steht fr volle Transparenz, 1.0 fr
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 gelscht
werden, benutzen Sie clearRect(x, y, width,
height).
Ein einfaches Beispiel fr eine entsprechende
JavaScript-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).
Fr Flchen oder Pfade lassen
sich nicht nur solide Farben verwenden, sondern auch Farbverlufe, also stufenlose bergnge
zwischen zwei oder mehreren Farben. Das drawing context-API untersttzt 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. Zunchst ist dafr ein entsprechendes Objekt ntig:

Links zum Thema


Zugang zu dem Entwurf fr
die HTML5-Spezifikation beim
W3C
www.w3.org/TR/2011/
WD-html5-20110525
Zugang zu dem Entwurf fr 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 auszulsen,


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 fr die y-Koordinaten gleich null, der Verlauf fliet also

Canvas-Komponente fr IE 7.0
und 8.0
http://code.google.com/p/
explorercanvas

47

HTML, CSS & JAVASCRIPT


gleichmig von links nach rechts. Im nchsten
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 (einschlielich) annehmen darf:

nen von Kurven gibt es zustzlich noch die Methoden context.quadraticCurveTo(), context.bezierCurveTo(), context.arcTo() und context.arc(). Mit
der letzten Methode lsst 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

Anschlieend 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 fllt (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, fr die im drarectangle_cv.getContext("2d");
wing Context direkte Methop_context.lineWidth = 3;
den zum Zeichnen zur Verp_context.fillStyle = "#FF0000";
fgung 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 anschlieen. Die Linien knnen aber
nur sichtbar werden, wenn
Sie mit der Eigenschaft strokeStyle eine Farbe, ein Muster oder einen Farbverlauf dafr festlegen. Um eine Form
Ein Dreieck mit einem Pfad
gezeichnet (Bild 3)
zu zeichnen, legen Sie neben der Farbe fr den
Strich mit lineWidth noch eine Strichbreite und
mit fillStyle eine Fllfarbe 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() fllt die von dem
Pfad eingeschlossene Form mit der angegebenen Fllfarbe. 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 Verfgung.
Die Anweisung context.lineCap = "round" rundet
beispielsweise das Linienende. Fr 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. Zunchst wird eine Funktion draw_coord bentigt:
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 nchste Funktion draw_grid fgt 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 Sulen 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 Sulen 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 gegenber 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 fr 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, bentigen 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 zunchst den Text an, anschlieend die Koordinaten der Stelle im Canvas, an der der Text beginnen soll. Das Verfahren hnelt dem Einfgen
von Texten in eine Bitmap, wie es in einem Bildbearbeitungsprogramms blich ist. Das heit
auch, dass die Gestaltungsmglichkeiten entsprechend eingeschrnkt 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 fr das Canvas vorgegebene Schriftart und Schriftgre:
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.
Mgliche 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 Einfgen


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 verndern. 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 fr 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 Einfhrung 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 untersttzt daher viele Gnome-3-Funktionalitten. 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 fr Windows & Linux


PHP ist eine Skriptsprache mit einer an C angelehnten Syntax, die hauptschlich 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 Datenbankuntersttzung und Internet-Protokolleinbindung sowie die Verfgbarkeit zahlreicher zustzlicher
Funktionsbibliotheken aus.

Weitere DVD-Highlights: die neueste Version


der NetBeans-IDE, die aktuellste PHP-Version
fr Windows und Linux, das Android Software
Development Kit r22.3, die Virtualisierungstools VirtualBox 4.3.4 und VMware Player 6.0.1,
jeweils fr Windows und Linux, sowie zahlreiche Skripts.
[mb]

Android SDK r22.3


Das Android SDK ist eine Umgebung fr die
Entwicklung Java-basierter Applikationen fr
Googles Mobilplattform Android. Sie enthlt
die Dalvik VM zum Emulieren von mobilen
Gerten. Das System verwendet einen stark
modifizierten Linux-Kernel. Das Software Development Kit fr 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 knnen 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-Gerten.

keine dvd mehr da?


Unsere Zusammenstellung der Software erspart
Ihnen mhsame 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 zurck- beziehungsweise weitergegeben. Kein Problem: Anruf, Fax oder Mail gengt,
und wir senden Ihnen Ihre persnliche 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 beschftigen. 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 mittelstndischen Produktionsunternehmen und ist seit
fast 15 Jahren als IT Autor ttig.
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

er Aufbau von Websites auf Basis von Gittern oder Grids ist
heute zu einer gebruchlichen 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 Anstze. 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 gehrt auch die Berechnung der Breite der
die volle Kontrolle ber Ihre Entwicklung, da
einzelnen Spalten. Es gibt im Internet zahlreiSie kein weiteres Framework als zustzliche
che Werkzeuge, die Sie bei dieser Berechnung
Schicht nutzen. Damit wird auch der Umfang
untersttzen. Der Gridulator (http://gridulator.
des zustzlichen Programmcodes, den Sie uncom) erlaubt Ihnen beispielsweise die Eingabe
ntigerweise mitschleppen, minimiert.
einer maximalen Breite sowie die Anzahl der geSollten Sie bereits gute Kenntnisse von Sass
wnschten Spalten. Auf dieser Basis macht das
besitzen, ist der erste Ansatz die logische KonWerkzeug verschiedene Vorschlge, 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 Anfngerstadium, dann
wie breit die jeweilige Spalte ist, mssen Sie
sollten Sie auf das Framework Unsemantic setdas Ganze natrlich 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 Oberflche verborgen, wenn Sie
Pixel, dann betrgt der Prozentwert entspredies wnschen.
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
mchten. Die minimale Variante ist eine SCSSDatei, die zum Abschluss in eine CSS-Datei um2/2014

HTML, CSS & JAVASCRIPT


gewandelt wird. Natrlich lsst sich diese Struktur entsprechend ausbauen, damit Sie am Ende die einzelnen inhaltlichen Teile wie Typografie, die Variablen oder die Gridstruktur separieren knnen. Wir beschrnken 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 knnte abhngig von
Ihrem Layout beispielsweise zu folgendem Ergebnis fhren:
$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 fr die Innenabstnde zwischen den Spalten verwendet (Bild 2).

Wenn Sie eine verschachtelte Struktur aufbauen mchten, dann kommt der zweite Parameter zum Einsatz. Dieser stellt den Bezug zum
darber 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, mssen Sie diese natrlich fr die Berechnung der entsprechenden Breite der jeweiligen Spalte wieder in Pixel zurckverwandeln.
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 Zwischenrume entstanden (Listing 1).
Mit diesen Funktionen ist es im Anschluss
mglich, eine erste Festlegung fr die Anzahl
der Spalten und deren Aussehen zu treffen. Der
folgende Programmcode zeigt deren Anwendung. Sie bentigen fr die Funktion columns()
zumindest einen Parameter, der die Anzahl der
Spalten reprsentiert.

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 verknpftes Element mit einer Spalte.

Bentigte 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 bentigen Sie noch den Abstand sowie einen Verweis auf ein weiteres Mixin nesting. Dieses dient
dazu, eine entsprechend verschachtelte Struktur zu gewhrleisten. Zustzlich ist ein weiteres Mixin clearfix notwendig, um die vorhandenen Strukturen wieder zurckzusetzen. Dieses
knnte 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 Fliemuster
sowie der Abstand zum nchsten Nachbarn definiert werden. In diesem wird zustzlich 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 knnen. Ein Vorschlag zur Implementierung ist in
der folgenden Funktion sowie dem zugeordneten Mixin zu finden (Listing 2).
Damit haben Sie die Grundfunktionen fr die
Umsetzung eines flexiblen Grids auf Basis von
Sass zusammen. Es fehlen nur noch die entsprechenden Umsetzungen fr die verschiedenen
Layout-Mglichkeiten, 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 knnen 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. Darber 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 bentigen, 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 Kompatibilittsmodus sowie
den Viewport fest. Letzteres sorgt fr eine optimale Darstellung auf den unterschiedlichen
Endgerten:

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, fr
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 vergrert werden kann.
Im nchsten Schritt mssen Sie noch die CSSDatei des Frameworks einbinden. Dies geschieht ebenfalls im Kopf der Webseite ber ein
link-Tag:

Das erste Grid darstellen


Ein Gitter bentigt 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 nchsten Ebene knnen Sie bereits
mit der Definition der einzelnen Sulen 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 zustzlich 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 Abstnde 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 Endgert.</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 Endgert.</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 Endgert.</section>
</span>
</div>
</div>

Beim Unsemantic-Framework knnen Sie auch spezielle Layouts fr mobile Endgerte


hinterlegen (Bild 8)

56

jeweils 10 Pixel groen 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 natrlich 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 Sulen auf. Dafr 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 fr Gerte 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 fr den klassischen Desktop. Im Fall eines mobilen Endgerts soll es eine
etwas andere Darstellung geben. Die erste Spalte soll 100 Prozent ausfllen 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 abhngig von der Breite des Bildschirms genutzt
werden. Dies ist zum einen die bereits bekannte
Variante grid-xx, die fr die mobile Darstellung
entsprechend um mobile-grid-xx ergnzt wird.
Technisch realisiert wird die obige Anforderung mit insgesamt drei Spalten, wobei den
ersten beiden jeweils eine andere Klasse zugewiesen wird, abhngig 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 bentigte Bereich ausgeblendet. Die Klasse hide-on-desktop lsst den entsprechenden Abschnitt nur auf mobilen Endgerten erscheinen, hide-on-mobile sorgt fr 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 Endgert, Sie knnen die Grenze auch
noch feiner ziehen. Die mobilen Endgerte lassen sich zustzlich in Smartphone und Tablet unterteilen.
Fr den Einsatz dieser Klassen bentigen Sie eine spezielle CSS-Datei
mit dem Namen unsemantic-grid-responsive-tablet.css.
Unsemantic legt folgende Grenzen bezglich
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 darber 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).

Zwischenrume selbst festlegen


Die Abstnde der Sulen 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 bentigen mehr Abstand. Dieses Verhalten knnen Sie auf Basis der Klassen prefix-xx oder suffix-xx erreichen. In diesen Fllen wird ein leerer
Bereich von xx Pixeln links oder rechts der definierten Spalte erzeugt.
Diese Klassen gibt es sowohl fr die Desktop-Variante als auch in einer mobilen und einer Tablet-Version.
Das Framework Unsemantic bietet natrlich
einen noch deutlich greren Funktionsumfang,
als diese Beispiele zeigen konnten. Besonders
die direkte Ansprache der Sass-Variablen und
Sass-Platzhalter sind weitere Themen, die in der
Kurzvorstellung nicht bercksichtigt wurden.
Diese werden jedoch entsprechend ausfhrlich in der Online-Dokumentation des Frameworks vorgestellt und mit einer Reihe von Beispielen, die direkt mit Unsemantic ausgeliefert
werden, im Detail erlutert.
Alle Informationen sind direkt ber die Website von Unsemantic (http://unsemantic.com)
verfgbar (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. Dafr 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 Mglichkeit, 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 erlutert 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 anhrt, ist im tglichen Alltag ein wichtiges Feature. Webseiten mssen
gegebenenfalls auch offline funktionieren. Von Patrick Lobacher

Autor

Patrick Lobacher
ist Geschftsfhrer 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.

Kompatibilittstabelle der
Offline Web Applications (Bild 1)

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 Verfgung steht sowohl
mobil wie auch stationr. Im
CACHE:
Einkaufsliste.js
Flugzeug beispielsweise oder
bootstrap/css/bootstrap.min.css
wenn man unterwegs ist, wbootstrap/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
Webapplikation
weiterarbeiten knnte. Oder
man bearbeitet Daten, die berhaupt nicht ins Internet gehren, sondern geDas Beispiel: Einkaufsliste
nauso gut lokal vorgehalten werden knnen.
Auf dieser Einkaufsliste wollen wir alle LebensFr solche Szenarien hat das W3C die sogemittel notieren, die wir beim Einkaufen bentinannten 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 knnen, 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 untersttzen lediglich IE8 und
man unter Anzahl und Name ein Lebensmittel
IE9 haben damit Probleme. Dafr kann man
mittels Anlegen eintrgt, 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 wre es sehr praktisch, wenn
beziehungsweise lschen.
man eine lokale Datenbank benutzen knnte.
Unsere Einkaufsliste besteht im Grunde nur
Auch das macht HTML5 mglich 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, whrend Erste Einkaufsliste.js.
re flchendeckend zur Verfgung steht). Beides
Zustzlich laden wir Bootstrap (ein Frontendkombiniert schafft die Basis fr leistungsfhige
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 smtliche Ressourcen
auffhrt, die offline zur Verfgung 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 enthlt 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 enthlt, muss selbst nicht im
Manifest angegeben werden sie ist automatisch inkludiert.
Die Cache-Manifest-Datei selbst darf nicht aufgefhrt sein.
Ein Manifest kann drei unterschiedliche Abschnitte aufweisen: CACHE:, NETWORK: und
FALLBACK:
CACHE: Dies ist der Standardabschnitt fr Eintrge. Unter diesem Header (wenn dieser weggelassen wird, gilt es als Default) aufgefhrte
Dateien werden nach dem ersten Herunterladen
explizit im Cache gespeichert. Die unter dem
Header NETWORK: aufgefhrte Dateien sind

Ressourcen, die in der Whitelist aufgefhrt sind


und fr 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 fr den Fall angegeben
sind, dass auf eine Ressource nicht zugegriffen werden kann. Der erste URI ist die Ressource, der zweite das Fallback. Beide URIs mssen
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
fr 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="Lschen"
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 lscht den Datenspeicher seines
Browsers fr die Website.
Die Manifest-Datei wird gendert. 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 Nchstes ein HTML-Grundgerst nach dem Muster von Listing 2 auf.
Sobald die Seite geladen wurde, werden einerseits dank der Manifest-Datei alle weiteren Dateien offline zur Verfgung gestellt. Anschlieend wird die JavaScript-Funktion onInit()
gestartet (Listing 3). Hier prfen wir zunchst, ob
der Browser berhaupt Web SQL Databases untersttzt. Dann wird diese initialisiert, der Event
Listener des applicationCache wird gestartet, die
Tabellen werden angelegt und anschlieend 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 untersttzt!");
} 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 zunchst ein Datenbank-Objekt mit der Methode openDatabase initiiert werden (Listing 5). Smtliche Operationen
auf der Datenbank werden nun asynchron und
transaktionsbasiert durchgefhrt 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. Luft alles sauber durch, wird die Methode dataHandler
aufgerufen in dieser steht dann auch das Ergebnis des SQL-Befehls zur Verfgung.

2/2014

n
e
r
T

prsentiert:

ds

u
s

n
e
g
n

ow
n
K

-Ho

.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 Groprojekt
A
 rchitektur: Agiler Entwurf,
Brownfield refaktorisieren

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

NCC Ost, Nrnberg


T
 ools: Visual Studio,
Datenbanken (SQL,
NoSQL, Graph DBs)
R
 ichtiges Recruiting:
passende Mitarbeiter
finden, Einstellungstests,
Einstellungsgesprche
Z
 usammenarbeit im Team:
Vor Ort und remote

Mit Very
Early Bird
200,
sparen!

Advisory Board:

Tilman Brner,
Chefredakteur,
dotnetpro

Dariusz Parys,
Technical Evangelist,
Microsoft Deutschland
GmbH

Golo Roden,
Wissensvermittler
und Technologieberater

Laurin Stoll,
Geschftsfhrer,
YooApplications AG

dotnet-developer-conference.de

David Tielke,
Trainer,
david-tielke.de

Michael Wiedeking,
Geschftsfhrer,
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 Nchstes die Tabelle fr
die Einkaufsliste an. Nach der Erstellung der
Tabelle wird zuerst die Methode refresh aufgerufen (Listing 6).
Hier werden zunchst alle auf der Liste stehenden Lebensmittel entfernt und die Datenbank
per SELECT nach dort vorhandenen Eintrgen
befragt. Alle dort gefundenen Datenstze werden als <li>-Elemente in die vorbereitete Liste <ul
id="itemData" class="list-group"> gehngt. Diese
bekommen zudem die ID als Attribut id= zugeordnet. So knnen die Eintrge spter in der Datenbank wieder identifiziert werden
Nun wartet die Applikation auf eine Aktion.
Zunchst sollte man Lebensmittel eingeben,
damit diese auf der Liste erscheinen. Dies geschieht in den beiden Feldern Anzahl und Name
und dem anschlieenden 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 wrde eine Fehlermeldung
erzeugen, wenn nicht in beiden wirklich Werte eingeben sind. Dann wird ein SQL INSERTBefehl ausgefhrt, der die beiden Werte in die
Datenbank eintrgt. Anschlieend wird durch

Listing 4: Event Listener


function logEvent(event) {
console.lo g(event.type);
}

Aufruf der Methode updateForm() das Formular


wieder gelscht und damit fr die weitere Eingabe vorbereitet.
Klickt man nun auf einen der Listeneintrge,
wird die Methode onSelect() ausgefhrt, 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 fr die darauf anzuwendenden
Aktionen onUpdate() oder onDelete() (Listing 9).
Das vorhergehende Skript sollte nun nahezu selbsterklrend sein: Zuerst werden die Formularfelder ausgelesen und anschlieend per
SQL-Befehl UPDATE aktualisiert. Jetzt muss es
nur noch mglich sein, die Eintrge zu lschen
(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 knnten 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
fr diese spannenden HTML5-Techniken.
Aus Platzgrnden 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

prsentieren:

DWX

ds

u
s

n
e
g
n

Developer
Week 2014

ow
n
K

-Ho

Mit Very
Early Bird
200,
sparen!

14.-17. Juli 2014


NCC Ost, Nrnberg
DDC

.NET Developer
Conference

MDC

Mobile Developer
Conference

WDC

Web Developer
Conference

Advisory Board:

Benno Bartels,
Grnder,
insertEFFECT

Max Bold,
Chefredakteur,
web & mobile
developer

Pierre Joye,
Entwickler und
PHP-Experte

Michael Johann,
Grnder,
rails-experts.com

Golo Roden,
Wissensvermittler
und Technologieberater

Henrike Rse,
Event & Marketing
Manager, Microsoft
Deutschland GmbH

developer-week.de
Aussteller & Sponsoren:

Tilman Brner,
Chefredakteur,
dotnetpro

Markus Junginger,
Geschftsfhrer,
greenrobot

Markus Stuble,
freier Berater
und Autor

Markus Eilers,
Geschftsfhrer,
Runtime Software
GmbH

Stefan Hoth,
freiberuflicher Softwareentwickler fr Java, PHP,
Web und Android

Andreas Hucks,
Senior Developer,
SensioLabs
Deutschland

Patrick Lobacher,
Grnder und
Geschftsfhrer,
typovision GmbH

Dariusz Parys,
Technical Evangelist,
Microsoft Deutschland
GmbH

Stefan Priebsch,
Mitbegrnder,
thePHP.cc

Laurin Stoll,
Geschftsfhrer,
YooApplications AG

David Tielke,
Trainer,
david-tielke.de

Michael Wiedeking,
Geschftsfhrer,
MATHEMA Software
GmbH

DeveloperWeek

mobile development

Die besten Frameworks, Tools und Techniken

Webseiten mobilisieren
Die mobile Internetnutzung wchst ununterbrochen. Die Anpassung von Websites fr Smartphones
und Tablets ist daher das Gebot der Stunde. Von Filipe Pereira Martins und Anna Kobylinska

Die Webseite der Mobilsparte


von Sony bietet ein elastisches
Layout (Bild 1)

64

obile Besucher entscheiden heute ber den


Erfolg oder Misserfolg einer Website, erst
recht, wenn diese einen Webshop beinhaltet.
Mobile Besucher sind nmlich prinzipiell anspruchsvoller als schreibtischgebundene Anwender. Insbesondere in Bezug auf die Usability einer Webseite gehen mobile Nutzer keine
Kompromisse ein ihre Gerte lassen es nicht
zu. Konventionelle Desktop-Websites funktionieren in vielen Fllen gar nicht, und falls doch,
geben sie dem mobilen Benutzer reichlich Gelegenheit zum Abspringen.
Hier schwankt die JavaScript-basierte Navigation, da fllt die Textgre zu gering aus, woanders testet ein Webformular die Geduld des
Anwenders Grnde gibt es viele, das Resultat ist immer dasselbe: eine unntig hohe Absprungrate mobiler Besucher. Der Markt fr mobile Kleingerte verzeichnet nun aber Jahr fr
Jahr ein solides zweistelliges Wachstum, zurzeit
liegt es laut IDC bei satten 45 Prozent, und der
relative Anteil mobiler Besucher wchst ununterbrochen. Heutzutage lautet die Frage nicht

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

Kampf der Giganten: ein Marktberblick


Die Groen der Branche fhren seit jeher einen
erbitterten Kampf um die Fhrung mal mit erfreulich innovativen Features, mal mit erbitterten Patentkmpfen vor Gerichten rund um den
Globus. Kaum ein anderer Markt verndert sich
so schnell wie der Markt mobiler Gerte. Es ist
noch nicht lange her, dass Apple mit iOS als der
unangefochtene Marktfhrer 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 fr
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
wchst ebenfalls, wenn auch etwas langsamer.
Die eigentliche berraschung lieferte jedoch
Windows Phone mit einem jhrlichen Wachstum von 156 Prozent.
Die mobile Plattform Android kann die Fhrungsposition solide fr sich in Anspruch nehmen, doch die Gertehersteller 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) fr sich verbuchen.
Der Wettbewerb im Markt fr internetfhige Mobilgerte wird zurzeit praktisch nur zwischen Apple (iOS) und Samsung (Android OS)
ausgetragen.
Die Dominanz von WebKit ist Schnee von gestern. Google hat seine Untersttzung fr WebKit ber Bord geworfen und auf die hauseigene
(wenn auch mit WebKit verwandte), grndlich
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 fr mobiles Webdesign. Wer bisher noch zgerte, kann nun im mobilen Webdesign seiner Kreativitt 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, liee sich die Webseite bereits in ihrer
minimalistischen Edition problemlos bedienen.
Um den Ansatz Mobile first umzusetzen
knnen Sie Frameworks wie Response JS nutzen.
Das Konzept der progressiven Anreicherung
mit dem Schwerpunkt auf Mobile first hat sowohl Befrworter als auch Gegner, doch beide Seiten sind sich einig: Ob man nun Mobiles zuerst oder Mobiles zuletzt vorzieht, an
responsivem Webdesign fhrt heute kein Weg
mehr vorbei. Responsiv bedeutet, dass sich das
Layout an die Viewport-Gre des Endgerts
anpasst. Das geschieht, indem der Webbrowser
das passende CSS-Stylesheet ldt.

Responsives Webdesign mit


intelligenten Medienabfragen
Die Erkennung der Eigenschaften eines Endgerts 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 Mglichkeit, mit Hilfe der sogenannten Medienabfragen (Media Queries) bestimmte Eigenschaften des Zielgerts in Erfahrung zu
bringen, um es mit einem fr eben dieses Gert optimierten Stylesheet zu beliefern. So knnen Sie etwa fr verschiedene Breiten des Displays unterschiedliche Stylesheets bereithalten
und das passende Stylesheet dynamisch bereitstellen. Dadurch knnen Sie dieselben Inhalte
in verschiedenen Layouts prsentieren, die sich
sogar bei Bedarf an genderte Eigenschaften des

Zielgerts zur Laufzeit anpassen.

Autoren

Filipe Pereira Martins und


Anna Kobylinska sind interna
tional anerkannte IT-Berater mit
Schwerpunkt auf Cloud-Lsun
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 standardmig erst einmal mit Daten beliefert, die fr das kleine Display eines Smartphones und die geringe Bandbreite einer gewhnlichen Mobilfunkanbindung optimiert sind. Gibt
das Endgert zustzliche Fhigkeiten 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 Gert 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 htte adquat darstellen knnen. Sollte dagegen beim
2/2014

65

mobile development
Bedingungen fr 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 fr responsives Webdesign dar.
Das Layout der Webseite muss die Realitten
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 Mobilgerten eine
gute Figur: BonPress-Theme
fr 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 knnen Sie die Gesamtbreite des Displays ermitteln. Mittels max-width
erfahren Sie dagegen die maximale Gesamtbreite des tatschlich verfgbaren Browserfensters,
in dem die Webseite tatschlich gerendert wird
(also ohne UI-Elemente wie die URL-Adressleiste oder Browserschaltflchen).
Smartphones und Tablets imitieren beim Zugriff auf eine Webseite standardmig 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 Gerten funktionieren,
gilt es der Webseite noch das bentigte <meta>Tag hinzuzufgen:
<meta name="viewport"
content="width=device-width>

Oder optional unter Angabe der gewnschten


Vergrerungsstufe:
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">

Mit diesem <meta>-Tag setzen Sie die viewportEigenschaft auf den gewnschten Wert, nmlich auf die tatschliche Breite des Displays (anstelle der standardmig voreingestellten Desktop-Emulation).
Medienabfragen in CSS3 erlauben es Ihnen,
anhand der Auflsung beziehungsweise der
Ausrichtung des Displays (iPad, iPhone) ein fr
das betreffende Gert optimiertes Stylesheet zu
liefern und bei Bedarf sogar die dargestellten Inhalte zu differenzieren.

66

Elastische Layouts, Rastersysteme


und Frameworks
Die knapp bemessene Flche des Displays eines
mobilen Endgerts 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, knnen sich
an geringfgige Abweichungen der Display
auflsung mobiler Endgerte nicht anpassen,
ohne den Benutzer zum Scrollen oder zum Zoomen zu zwingen. Ein gutes Beispiel fr 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 mchte, ist gut beraten, ein passendes Web-Framework zu Hilfe zu rufen. Frameworks gibt es
wie Sand am Meer fr alle Ansprche, fr jeden Geldbeutel und mit jedem erdenklichen
Komplexittsgrad, von ganz einfachen Rastersystemen fr responsives, mobilisiertes Webdesign (Skeleton auf Basis von Boilerplate, Golden Grid System und SimpleGrid), ber WebApp-Frameworks (iUI, iWebKit, jQuery Mobile) (Bild3) 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 strker elastische Layouts auf Basis eines Rasters. Diese Art
von responsivem Layout passt sich der Displaygre des Endgerts durch das dynamische Aufund Zusammenklappen des Rasters an.

Elastische Bilder und Videos


Ein elastisches Layout erfordert idealerweise
elastische Bilder, also Bilder mit einer kontextabhngigen Gre, die auf die genderte Ausrichtung des Displays und die damit einhergehenden Anpassungen des Layouts flssig reagieren.
2/2014

mobile development
Ein exzellentes Beispiel fr eine gelungene Umsetzung elastischer Bilder stellt die Website der
Mnchner Paulaner Brauerei dar (www.paula
ner.de). Das Layout passt sich hier ganz automatisch der Gre des Displays an und die Bilder
integrieren sich nahtlos in das Layout, unabhngig vom verwendeten Gert (Bild 5).
Reagieren die Bilder responsiv, drfen sie ruhig grer werden. Dieser Trend prgt immer
strker responsive Themes, Bildergalerien und
Diashows, darunter Photoswipe, eine Bildergalerie fr Smartphones im responsiven Design,
und Supersized, eine responsive Diashow fr
Desktops und Mobilgerte, die im Hintergrund
der Webseite luft und das ganze Browserfenster fr 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 Grnden der Usability keine gute Option. Viele Webdesigner greifen daher lieber zumindest in
Smartphone-optimierten Layouts zunehmend
auf Diagramme und Illustrationen statt auf Tabellen zurck.
Zu guter Letzt muss eine mobile Webseite auf
Flash-Video zugunsten von HTML5-Videos verzichten. Alleine diese Umstellung kann schon
erheblichen Aufwand bedeuten, es fhrt jedoch
kein wirklich gangbarer Weg daran vorbei.

Von mobilen Webseiten zu nativen


mobilen Web-Apps
Mit HTML5, CSS und JavaScript knnen Webdesigner nicht nur Webseiten, sondern auch
vollwertige Web-Apps fr mobile Gerte entwickeln, die dann mglicherweise sogar in untersttzten 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 auerhalb des Browsers ablaufen. Fr den gewhnlichen 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
JavaScript im Desktop von Windows 8.x ausfhren zu lassen, hat Microsoft sein ganzes Gewicht
hinter moderne Webstandards geworfen. Windows 8.x lsst gutmtig 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 proprietren Technologien im Desktop


nebeneinander laufen. Microsofts Beweggrnde
sind natrlich alles andere als altruistisch: Der
Anbieter kann so das Talent unzhliger Web
entwickler anzapfen. Fr Webentwickler erffnet sich damit der Zugang zu Windows auf all
den Gerten, auf denen mittlerweile neue Iteration des Windows-Betriebssystems luft. Web
entwickler, die Microsofts C# und das .NETFramework niemals aus freien Stcken erlernen wrden, knnen HTML5-basierte Apps fr
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 Gerte mgen nun immer smarter werden, immer
schneller und leistungsstrker, aber sie nhern
sich Desktops keinesfalls an. Jede Webprsenz
sollte die Besonderheiten mobiler Gerte bercksichtigen.
Moderne HTML5-Frameworks sorgen dafr,
dass sich mobile Webseiten zunehmend wie native mobile Apps anfhlen. Die Grenzen zwischen den beiden werden flieend. Nachfolgend
sollen die wichtigsten Tools fr die Mobilisierung von Websites vorgestellt werden.

Sencha Touch war eines der ersten


JavaScript-Frameworks fr mobile
HTML5-Apps und Webseiten (Bild 4)

Gelungene Umsetzung elastischer


Bilder auf der Website der Mnchner Paulaner Brauerei (Bild 5)

jQuery Mobile
jQuery Mobile (http://jquerymobile.com) ist ein
mobiles Framework mit Untersttzung fr eine
breit gefcherte Auswahl an Gerten. Mit jQuery Mobile knnen Sie touch-optimierte mobile Web-Apps auf Basis von HTML5-, CSS- und
JavaScript-Code mit einem plattformber-

67

mobile development

jQuery Mobile basiert auf der


beliebten JavaScript-Bibliothek
jQuery (Bild 6)

greifend einheitlichen UI erzeugen. Es untersttzt 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 zugehrigen
UI-Bibliothek jQuery UI. Zwar lsst sich bereits auch reines jQuery in gewissen Grenzen
fr bestimmte mobile Aufgaben einspannen,
doch jQuery Mobile bietet einen weitaus umfassenderen Funktionsumfang fr die Entwicklung mobiler Webapplikationen. jQuery Mobile
gilt derzeit als der Goldstandard in diesem Bereich (Bild 6).
Fr die Gestaltung von Web-Apps mit jQuery UI greift man auf Themes zurck, um spezielle CSS3-Eigenschaften wie abgerundete Ecken,
Textschatten und Farbverlufe sowie Symbolbibliotheken einfach nutzen zu knnen. Entscheidend fr den effektiven Einsatz der Themes ist
die strikte Trennung von Inhalt und Layout.
Jedes Theme umfasst bei jQuery Mobile mehrere globale Einstellungen fr die Schriftart,
Schatteneffekte und Eigenschaften der Schaltflchen. Das Aktivieren der einzelnen Themes
gelingt durch die Zuweisung des zugehrigen
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 fr die


mobile Webentwicklung von Apps
unter anderem fr 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 bezglich 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, Schaltflchen, 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">Lschen</a>

jQuery Mobile untersttzt auch die Erstellung


von Webformularen, die fr Mobilgerte optimiert wurden, von simplen Suchfeldern ber
spezielle Radiobuttons, Ein- und Ausschalter,
Schieberegler das mit HTML5 eingefhrte
range-Eingabefeld macht es mglich bis hin zu
komplexen Auswahlmens. So lsst sich etwa
ein simples Zustandsfeld realisieren:

</select>
</div>

jQuery Mobile zeigt zustzlich 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">Mnnlich
</option>

68

Die Attribute min und max geben jeweils den


niedrigsten und den hchsten Wert aus dem zulssigen 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 fr den Erfolg von jQuery Mobile und jQT
geebnet.
Benutzer von Dreamweaver CS 5.5, 6 und CC
knnen Webseiten und Web-Apps auf Basis von
jQuery Mobile im brigen direkt in ihrem WebEditor bearbeiten. Hierzu whlen Sie einfach
beim Erstellen einer neuen Webseite die Option
Mobile Starters und legen fest, ob Sie mit lokalen
Dokumenten arbeiten mchten, ein CDN einsetzen oder PhoneGap-Untersttzung bentigen.
In all diesen Fllen stehen Ihnen anschlieend
sowohl codebasierte als auch grafische Werkzeuge von Dreamweaver zur Verfgung.

jQT (zuvor jQTouch)


jQT (http://jqtjs.com) ist ein jQuery-Plug-in fr
die mobile Webentwicklung von Apps unter anderem fr iOS, Android OS, HP/Palm WebOS.
Dieses Framework implementiert den Groteil seiner Funktionalitt mit Hilfe von reinem
CSS und nutzt nur sprlich JavaScript. So basieren etwa effektvolle Seitenbergnge 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 Vorzgen von jQT zhlt das Laden
von Bildern auf Vorrat (sogenanntes Preloading), die Untersttzung fr Callback-Ereignisse, Themes und die Fhigkeit zur Erkennung
von Wischgesten. jQT meistert die Erstellung
von Offline-Apps und kann Location-Dienste
bereitstellen.
jQT lsst sich leicht erlernen, bietet jedoch
dementsprechend kaum Anpassungsfhigkeiten der gebotenen Funktionalitt. Dank der Anbindung an jQuery lsst es sich allerdings um
zustzliche Funktionalitt erweitern.

PhoneGap
PhoneGap (http://phonegap.com) ist ein quell
offenes Framework fr die mobile Webentwicklung auf Basis von HTML5, CSS und JavaScript.
Mit Hilfe von PhoneGap knnen Sie Ihr Knowhow dieser Websprachen nutzen, um mobile
Apps zu entwickeln, die auf native Features der
jeweiligen Zielplattform zugreifen.
PhoneGap beinhaltet eine plattformunabhngige Web-Laufzeitumgebung, in der sich der
Webcode unabhngig von der darunterliegenden Hardwareplattform ausfhren lsst, und
einen API-Stack, mit dem der Code auf hardwarespezifische Funktionen des jeweiligen Gerts zugreifen und native Ereignisse auswerten
2/2014

kann. So bietet PhoneGap beispielsweise die


Untersttzung fr den Accelerometer, den Vi
brationsalarm, einen Zugriff auf die Kamera fr
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 knnen
weaver CC als eine professionelSie Dream
le Entwicklungsumgebung zur Erstellung von
Webapplikationen und mobilen Apps fr mehrere Plattformen Ihrer Wahl nutzen (Bild 8).

Dreamweaver CC untersttzt die


direkte Ausgabe von WebsiteEntwicklungsprojekten in die
Cloud, wo Adobes PhoneGap
Build Service mobile Apps
fr 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 fr
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 wren.
Appcelerator Titanium Mobile bietet umfangreiche Untersttzung fr 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 fr 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.
Selbstverstndlich lassen sich auch die Kameras eines Smartphones nutzen und die auf
diese Weise erstellten Clips in sozialen Netzen
verffentlichen. Als besonderes Highlight bietet
Titanium Mobile Untersttzung fr 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 eingefhrt.
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

ange Zeit musste man zur Entwicklung von


Spielen unter iOS auf zustzliche Bibliotheken wie beispielsweise Cocos 2D zurckgreifen. 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 fr iOS/OS X entwickelt
worden sind, was das Handling zum Teil etwas
komplizierter macht.
Mit der Einfhrung von iOS 7 stellt nun Apple
selbst ein Framework zur Programmierung von
Spielen zur Verfgung. SpriteKit ist eine neue
Bibliothek und steht neben iOS auch unter OS X
Mavericks zur Verfgung. Dadurch, dass die Bibliothek Bestandteil beider Betriebssysteme von
Apple ist, knnen Spiele auf derselben Code
basis fr beide Systeme erstellt werden. Um in
die Entwicklung von Spielen fr iOS auf Basis
von SpriteKit einsteigen zu knnen, ist Xcode ab
Version 5.0 erforderlich.

Projekt mit SpriteKit


Innerhalb der Projektvorlagen von Xcode fr
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 fr erste Gehversuche notwendigen Klassen angelegt.
Ein Spiel, das auf Basis von SpriteKit geschrieben wird, wird natrlich in einer View angezeigt. Hierbei handelt es sich allerdings um eine besondere View-Klasse SKView. Die Kombination mit weiteren Views ist aber durchaus
mglich. Ein SKView-Instanz wiederum dient
als Container fr Szenen. Innerhalb einer Szene
werden dann die Sprites eingefgt.
Um die Sprites in Bewegung zu setzen, gibt
es weitere spezialisierte Klassen. Ein Spiel besteht also aus mindestens einer oder mehreren
Szenen sowie den zugehrigen Sprites. Darber
hinaus gibt es zustzlich noch Funktionen, beispielsweise um physikalische Berechnungen anzustellen. Die Projektvorlage von Xcode erzeugt
wie bereits erwhnt die fr 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 Storyboard
wird in einem SpriteKit-Projekt nicht bentigt.
Zustzlich ist im Projekt eine Grafik fr erste Experimente (Spaceship.png) enthalten.

Eine View fr Sprites


Bevor Sprites gezeichnet werden knnen, muss
zuerst einmal die passende Umgebung geschaffen werden. Wird die Vorlage verwendet, so
wurde der dafr 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 enthlt.
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 zurckgreifen. 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 spter die Szenen eingefgt werden.
Zwei Eigenschaften der Klasse SKView werden
im Beispiel aktiviert. Mit showFPS wird der eingebaute Framecounter eingeschaltet und shows
NodeCount sorgt dafr, dass die Anzahl der aktuell verwendeten Nodes angezeigt wird. Ein
Node ist dabei ein in eine Szene eingefgtes 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 fr Node-Objekte, die in die Szene
eingefgt werden.
Zur Initialisierung wird die Dimensionierung
des SKView-Objekts bergeben. Der Wert einer Eigenschaft, scaleMode, wird anschlieend
fr 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 Flche 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

Fr
Abonne
nte
gratis! n
71

mobile development
Fr 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
hinzugefgt. Listing 2 enthlt den hierfr
notwendigen Code.
Es gibt unterschiedliche Node-Klassen.
Nicht nur Sprites werden als Node in eine
Szene eingefgt. Um beispielsweise Text
in eine Szene einzufgen, wird die Klasse
SKLabelNode verwendet.
Die Vorlage SpriteKit Game verwendet
ein entsprechendes Objekt, um den berhmten 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.
Anschlieend 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 hinzugefgt wird. Wird die App anschlieend 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 schn,


aber die Bibliothek heit schlielich SpriteKit.
Im folgenden Schritt soll ein Sprite innerhalb
der Szene angezeigt werden. Hierzu bentigt
man natrlich eine entsprechende Grafik. Die Vorlage fgt dem
Projekt automatisch die Grafik
eines Raumschiffs hinzu.
Genauso gut kann aber auch
eine andere Grafik fr erste
Gehversuche verwendet werden. Der Vorgang ist mit der
Anzeige eines SKLabelNodes
identisch. Zuerst muss das bentigte Objekt zur Darstellung
eines Sprites erzeugt und die
Grafik bergeben werden. Anschlieend wird das initialisierte Sprite angezeigt. Listing 3 enthlt die ntigen Schritte.
Der Code aus dem ersten Beispiel innerhalb der Klasse My
Scene wird gegen den im Listing3
ausgetauscht. Ausgangspunkt
ist nun nicht mehr die Methode initWithSize, sondern die Methode didMoveToView, die ausgefhrt 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 geprft, ob die Szene
erstellt wurde. Anschlieend wird die Methode createContent aufgerufen. Innerhalb der Methode createContent werden zunchst die Hintergrundfarbe und der ScaleMode gendert.
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 fr das Sprite verwendeten Bildes, mons
ter.png, bergeben. Anschlieend 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 anschlieend zurckgegeben. Nach Ausfhrung 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 schner wre es, wenn es sich auch
noch etwas bewegen wrde.
Hierzu bedarf es einiger zustzlicher Zeilen
Code. Extra fr 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 knnen Bewegungsablufe eingeleitet und gesteuert werden.
Um das Monster in Bewegung zu setzen, wird
ein Ereignis verwendet. Sobald das Display berhrt wird, soll die Animation beginnen. Verwendet wird hierfr das touchesBegan-Ereignis
(Listing 4).

Gewnschte 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 gewnschte Animation erzeugt werden.
Eine Animation wird definiert durch ein
SKAction-Objekt. Mittels eines SKAction-Objekts knnen unterschiedliche Animationsmuster definiert werden. Beispielsweise ist es mglich, 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 fr die x- und
y-Koordinate bergeben, in der sich ein Objekt
bewegen soll. Auerdem wird die Dauer der
2/2014

Animation festgelegt. Daneben


gibt es auch die Mglichkeit,
ein Sprite zu verkleinern oder
zu vergrern (scaleTo) sowie es
ausblenden zu lassen (fadeOut
WithDuration). Fr jede Animation wird ein SKAction-Objekt
angelegt. Nach der Definition
aller Animationen werden die
Objekte in einer Auflistung zusammengefasst und knnen anschlieend ausgefhrt werden.
In Listing 3 ist dies gut zu sehen.
Zuerst wird eine positive Bewegung entlang der y-Achse definiert. Anschlieend folgt eine
negative Bewegung auf der yAchse.
Die letzte Bewegung auf der
y-Achse sorgt dafr, dass sich
das Sprite wieder am Ausgangspunkt befindet. Anschlieend
wird das Sprite vergrert und
wieder verkleinert.
Die Bewegungsablufe sind damit definiert.
Die SKAction-Objekte werden nun nur noch
in einer Sequence-Auflistung eingefgt und anschlieend an die Methode runAction als Parameter bergeben. Wird die App jetzt erneut gestartet, so bewegt sich das Monster nach der Berhrung 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 lnger darber nachdenkt, so fallen eine ganze Reihe weiterer Einsatzmglichkeiten ins Auge.
Ein Nachteil der Bibliothek ist natrlich die
Beschrnkung auf die Apple-Plattformen. Wenn
das nicht strt, 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 dafr 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

ach dem wenig glorreichen Tod


des Klassikers Symbian klafft eine Lcke im Low-End-Segment der
Mobil-Betriebssysteme. Android ist
aufgrund der internen Architektur
zu anspruchsvoll, um auf richtig
preiswerter Hardware zu arbeiten.
iOS ist von Apple als Premiumprodukt vorgesehen; fr Bada gibt es
zu wenige Applikationen. Windows
Phone wre brauchbar, leidet aber
unter den ex
trem rigiden Hardwarevorgaben seitens Microsoft.
Mozilla kmpft schon lnger um
ein Geschftsmodell abseits von
Browsern fr Notebooks und Desktops. Die mobilen Versionen des
Webbrowsers erfreuten sich bisher nur sehr marginaler Popularitt. Die unter Windows und Co. erreichten Marktanteile erscheinen im
Mobilbereich utopisch.
Als Lsung fr das Problem sieht
Mozilla ein mobiles B
etriebssystem. Die Architektur von Firefox OS als bersichtsdiagramm (Bild 1)
Bei gengend geringem Speicher
steller brauchen Untersttzung bei der Adapverbrauch wre es fr die Erschlieung 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 fr eine schon
browsers wrde 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
zurck. Das quelloffene Betriebssystem bietet
Die Entwicklung eines Kernels fr 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 fr
obere Schichten freigibt: Gecko darf beispielsweise direkt auf den Frame-Buffer und auf den
Telefonie-Stack zugreifen (Bild 1).
Eine Ebene darber findet sich die von Mozilla als Gecko bezeichnete HTML-RenderingEngine. Diese luft direkt auf Gonk und enthlt
neben den diversen zur Darstellung von HTML
und CSS bentigten 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 ausgefhrt.
Mobilerfahrene Entwickler suchen bei dieser
Beschreibung nach einer Mglichkeit zur Ausfhrung von nativem Code. Diese ist nicht gegeben: Wer eine Anwendung fr Firefox OS erstellen mchte, muss dazu auf Webtechnologien zurckgreifen. 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 verfgbare Firefox-Version 26 voraus. Der Autor
nutzte fr die im Artikel beschriebenen Schritte
noch die zu diesem Zeitpunkt neueste verfg
bare Beta-Version 26.0b8 unter einer 32-Bit-Version von Windows 7.
Nach der erfolgreichen Installation mssen
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,
prsentiert Firefox den Software-Installations
dialog. Klicken Sie dort auf Install, um den Set
up-Prozess fr die Erweiterung anzustoen.
Je nach Geschwindigkeit Ihres Rechners erscheint whrend des rund 30 Sekunden dauernden Installationsprozesses unter Umstnden 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 Hinzufgen der diversen von
Firefox OS untersttzten Applikationen. In
stallierte Programme erscheinen in der Liste in
der Bildschirmmitte, die darunter aufscheinenden Knpfe ermglichen das Aktualisieren und
Ausgeben der Programme.
Zum Start des Simulators mssen Sie den
Schalter auf der linken Seite umlegen. Quasi nebenbei prft das Dashboard auch, ob die Manifeste der diversen Programme gltig 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 fhrt sowohl
paketierte als auch im Internet verfgbare Programme aus.
Die Qualittssicherung 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 Komplexitt 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 hheren Rechten; stellt
extreme Ansprche an die Codequalitt
Nur fr Gertehersteller zugnglicher
Applikationstyp; gewhrt maximale Rechte
bei vergleichsweise moderaten Ansprchen
an die Codequalitt

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 fr
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
mssen 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 whlen Sie
die Manifestdatei aus. Das Programm erscheint
daraufhin automatisch in der Liste.
Das ist das Verdienst der Manifestdatei. Jede
Firefox-OS-Applikation enthlt eine derartige
Datei, deren Name normalerweise auf manifest.
webapp lautet. In unserem Beispielprogramm
sieht der Inhalt des Files stark gekrzt 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 Bildschirmauflsungen kompatibel. Da sich SVG bei Entwicklern
von Handcomputerapplikationen bisher nicht
wirklich durchsetzen konnte, erlaubt das Betriebssystem das Anlegen mehrerer verschieden
groer Icons:
"icons": {
"16": "/images/logo16.png",
"32": "/images/logo32.png",
...
},

Die Daten im developer-Feld liefern Ausknfte


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 untersttzte Sprachen
ber die Default-Einstellung bedient werden:
"default_locale": "en",

Je nach Applikationstyp sind mehr oder weniger Permissions erforderlich. Die Deklaration
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 erklrt:
"permissions": {
"desktop-notification": {
"description": "To show
notifications"
},
"geolocation": {
"description": "Marking out user
location"
}
},

Wenn Sie Ihre Applikation in mehrere Sprachen bersetzen mchten, mssen Sie die Manifestdatei um locales-Tags ergnzen. 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 dazugehrenden 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>

Anwendungsflle, 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 enthlt den Gutteil der fr die
Darstellung des in Bild 4 gezeigten Formulars
notwendigen Intelligenz. Aufgrund ihrer vergleichsweise hohen Komplexitt 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
Schlssel 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 gekrzter 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 hherem Privilegiengrad drfen aufgrund einer als CSP bezeichneten Richtlinie keinen inline-Code aufweisen das Verwenden eines onClick-Tags
wrde zur Laufzeit zur Verweigerung des Programms fhren. Firefox-Entwickler umgehen
dieses Problem im Allgemeinen durch kreative

JavaScript mit Beschrnkungen


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 erklrt.
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 Beschrnkungen fr 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 fr 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 dafr, 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 fr
onClick notwendigen Logik verdrahtet.
Aus systemtechnischer Sicht ist diese Vorgehensweise zumindest fragwrdig. Die Trennung von Benutzer-Interface und Programmlogik fhrt meist zu einer wesentlichen Steigerung
der bersichtlichkeit: Eine Datei handhabt den
Glue Code, eine andere Datei ist fr das Ansprechen der diversen Web APIs zustndig.

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
ausgefhrt wird.
Dieses auf den ersten Blick erschlagend wirkende Snippet ist in Wirklichkeit vergleichsweise einfach. Der bei jedem Start des Browsers abgearbeitete Teil des Codes prft 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 Groen und Ganzen
auch im Zusammenspiel mit dem Firefox-OSSimulator verwenden.
ffnen Sie dazu die Developer Tools ber den
dazugehrenden Menbutton. 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 Durchfhren 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 ntzlich wird die Konsole in dem
Moment, wo Sie einen Breakpoint festlegen. Dazu whlen Sie die relevante Datei in der Liste auf
der linken Seite des Bildschirms aus und klicken
danach die Zeilennummer an. Wenn die Codezeile das nchste Mal abgearbeitet wird, so zeigt
Ihnen das Produkt eine Vielzahl von ntzlichen
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
ausgewhlte Datei lsst sich direkt editieren, die
Resultate Ihrer nderungen erscheinen wie in
Bild 8 gezeigt direkt. Wenn Ihnen die Resultate der Bearbeitung zusagen, so knnen Sie diese
durch Klick auf den Save-Link ohne Umweg in
die IDE speichern.

Firefox bietet viele der am Smartphone lauffhigen 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 flssiges 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 zustzliche 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 fr Windows und Linux zur
Verfgung (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 Gert


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 lebensfhig (Bild 10)

sollte Ihr Gert im Simulator-Dashboard erscheinen (Bild 9).


Der Button Push schiebt eine Anwendung auf
das angeschlossene Smartphone. Aufgrund diverser Beschrnkungen im Betriebssystem mssen 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 Schwchen auf. Es ist (unter anderem)
nicht wirklich mglich, Programme am Telefon
zu debuggen. Da ein Refactoring des existierenden Systems von Mozilla als nur wenig zielfhrend empfunden wurde, ersann das Unternehmen den App Manager.
Er ist in der Desktopversion von Firefox 26
enthalten und lsst 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
Gert mit Firefox OS 1.2 zurckgreifen mchten, 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 Endgerten 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
(Bild10). Zum Ausfhren von Programmen ist
eine Verbindung zu einem Simulator oder einem Gert erforderlich. Wenn Sie kein Smartphone anschlieen mchten, so klicken Sie auf
Start Simulator. Im nchsten 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 verhlt
sich eins zu eins wie weiter oben besprochen.

Daten remanent speichern


Obwohl Firefox OS per se webbasiert ist, mssen die darauf befindlichen Applikationen ihre
Daten auch offline remanent speichern knnen.
Dazu stellt das System eine Gruppe von verschiedenen Schnittstellen vor, die sich in der Art
der entgegengenommenen Datentypen und in
ihrer Reprsentation 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 Eintrge wandern in Form von mit Strings versehenen Schlsseln 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 knnen Sie den
als Beispiel verwendeten String in den Local
Storage schreiben und ebendort auslesen. Falls
Sie alle Eintrge des Storage verarbeiten mchten, sollten Sie stattdessen auf die Methoden
key(index) und length() zurckgreifen. Zum Lschen des gesamten Storage dient die clear()Funktion.
LocalStorage ist in Firefox OS synchron realisiert, lngere Leseoperationen blockieren den
fr die Programmausfhrung lebenswichtigen
Hauptthread.
Zum Speichern von greren Datenmengen
ist das IndexedDB API besser geeignet. Auch
hier handelt es sich um ein HTML5-API, das eine im Browser lebensfhige NoSQL-Datenbank
samt Transaktionssupport anbietet.
Die komplizierteste Version der Datenspeicherung ist der Zugriff auf die nativen Dateisysteme des Telefons. Firefox OS unterteilt die Remanentspeicherbnke in logische Blcke, die in
Tabelle 2 aufgegliedert sind.
Wenn Ihr Programm auf eine der Bnke zugreifen mchte, so muss es die relevanten Permissions im Manifest beantragen. Das erfolgt
durch eine am folgenden Snippet angelehnte
Deklaration:

Tabelle 2: Remanentspeicherbnke
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 Gert 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 zurckzuliefernden 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 Speicherbnke ist nicht


willkrlich. Das Device Storage API prft den
Mime-Typ einer ins Dateisystem geschriebenen
Datei auf Plausibilitt es ist nicht mglich, audio, videos oder pictures mit unpassenden MimeTypen zu fttern.
Der eigentliche Zugriff erfolgt ber ein an
Symbian und Samsung Smart TV erinnerndes
Verfahren. Im ersten Schritt mssen 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 fr


zertifizierte Applikationen
zugnglich (Bild 11)

var sdcard = navigator.


getDeviceStorage("sdcard");

Anfragen erfolgen normalerweise asynchron.


Als Beispiel dafr 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 Groen


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 verfgbaren Funktionen die angebotenen Beispiele sind im Allgemeinen von hoher Qualitt.
Beachten Sie, dass einige der APIs nur fr privilegierte oder gar nur fr zertifizierte Programme zur Verfgung 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 fr 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 ntzlichen Systemen zusammenzustellen.
Unter Firefox OS wird ein hnliches Pattern
untersttzt. Eine Web Activity ist ein Einsprungpunkt in ein anderes Programm. Dieses erledigt
die in der Aufforderung enthaltenen Aufgaben
und liefert Resultate zurck hnlichkeiten mit
Android-Intents sind rein zufllig.
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 fr 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 auszufhrende Anfrage konkretisieren. Beim Zurckliefern 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 lsst sich dies
am ehesten durch Verzgerungen im Rahmen
der Bearbeitung des Aufrufs erklren, theoretisch warten die MozActivities auf das Zuweisen eines passenden Event Handlers.
Wenn Sie Ihr Programm fr Drittanbieter ansprechbar gestalten mchten, so knnen Sie
auch eine eigene Web Activity deklarieren. Dazu sind keine besonderen Rechte erforderlich
aus Latenzgrnden 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 mchte, 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 nchsten Schritt klicken Sie auf den Submit
an app-Knopf. Sofern von Ihrer Seite noch rechtliche Abklrungen erforderlich sind, erscheinen
diese am Bildschirm. Wenn Sie schon alle Vertrge abgenickt haben, so landen Sie direkt im
Hochladedialog.
Dieser fragt Sie im ersten Schritt nach dem gewnschten Applikationstyp. Wenn Sie eine gehostete Applikation anbieten mchten, so mssen 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 wrdigen die Suchengine
durchsucht alle Textvarianten, was die Findbarkeit Ihres Programms erhht.
Zu guter Letzt noch ein Hinweis zur idealen
Textlnge. Der Firefox OS Marketplace stellt den
Beschreibungstext immer in zwei Spalten dar.
Bei sehr kurzen Beschreibungen fhrt das zu
unansehnlichen Resultaten (Bild 12 und Bild 13).
Der Firefox Store bietet im Moment keine
Mglichkeit an, um die Verbreitung der Applikation wirksam zu prfen. Im Backend fin2/2014

det sich nur eine allgemeine Downloadzahl, die


nicht nach Gerten oder Geographien aufgesplittet ist. Als kleinen Ersatz bietet der Autor
die in Bild 14 gezeigten Informationen an.
Diese stammen vom fr 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
zuschlieen:

Zu kurze Beschreibungstexte
erscheinen aufgrund des
Zweispaltenlayouts mit einer
Lcke (Bild 12)

Ist der Beschreibungstext ausreichend lang, sieht das Listing


komplett aus (Bild 13)

83

mobile development
mssen Sie auf ein nach dem folgenden Schema
aufgebautes Snippet zurckgreifen:
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)

e bin ar

Jetzt online
weiterbilden!
Komplexes Wissen begreifbar
machen, Fhigkeiten und
Fertigkeiten fr eine stetige
Zukunftsgestaltung vermitteln.

Golo Roden
Technologischer
Visionr, 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
Entwicklungslnder 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
Umstnden ebenfalls ratsam.

Monetisierung?
In der Anfangsphase des Stores untersttzte Firefox OS nur das kostenlose Verteilen von
Programmen. Mittlerweile gibt es auf dem
Papier die Mglichkeit, Programme zu verkaufen. Das funktioniert erwartungsgem
schlecht: Viele Mozilla-Nutzer sind fanatische
Open-Source-Heads und bezahlen aus Prinzip
nicht fr Software.
Die restliche Kundschaft ist berwiegend in
Entwicklungslndern angesiedelt. Kurz gefasst:
der Verkauf von Programmen ist unter Firefox
OS ein sehr gewagtes Monetisierungs-Modell.
Selbiges gilt auch fr 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 zurckzugreifen. 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
mssen Sie eine Werbeflche anfordern. Dies
lsst 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 mssen 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 zurckgegebene 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 Mglichkeit der Verwendung von Smaato. Das deutsche Traditionshaus bedient Firefox OS ber den
Code fr mobile Webseiten. Loggen Sie sich auf
Smaato.com ein, beordern Sie eine Werbeflche 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 Lndern im Handel erhltlich 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 fr jedermann geeignet.
Wenn Sie Ihr Unternehmen langfristig positionieren mchten, so knnen Sie der Plattform eine Chance geben.
[mb]
2/2014

e v b ook

Praxiswissen
fr Entwickler
Rckschau 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 Gert!

Egal, ob iPad, Kindle oder PC


Sie entscheiden, auf welchem
Endgert Sie ihr eBook lesen
mchten.

A us der Praxis!

Jedes eBook liefert Ihnen


neben fundierter Theorie sofort
anwendbares Praxiswissen
mit Code fr Ihr Projekt

kostein!
fre

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

backend

VirtualBox

Virtualisierungs-Umgebungen
Autor

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

86

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 mchte 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 fndig.
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

bestndig ausgebaut. Dieses Angebot gruppiert


der Datenbankprofi in die folgenden Bereiche:
Server-Virtualisierungs-Produkte,
Virtualisierungs-Lsungen fr Rechenzentren,
Desktop-Virtualisierungs-Produkte,
Desktop-Virtualisierung-Lsungen.
Oracle VM ist ein System zur Virtualisierung
von Serversystemen. Oracle hat seine Virtualisierungs-Lsung Oracle VM seit Ende des Jahres 2007 im Programm. Der Anbieter positioniert VM fr das Data Center und dessen Anforderungen.
Die Server-Virtualisierungs-Produkte von
Oracle untersttzen x86- und SPARC-Architekturen. Gsteseitig kommt Oracle VM mit unterschiedlichen Arbeitslasten wie Linux, Windows
und Oracle Solaris zurecht.
Neben den auf Hypervisoren basierenden
Systemen bietet Oracle jedoch auch Virtualisierungs-Lsungen 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 untersttzt 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 untersttzt Anwendungen
von Oracle und anderen Anbietern gleichermaen (Bild 2).
Dennoch wird Oracle mit dem begrenzten
Angebot kaum in Wettbewerb zu VMware oder
Microsoft treten wollen und knnen. Das ist derzeit aber auch nicht das Ziel des Datenbank
anbieters. Fr die Kunden von Oracle steht damit aber eine Oracle-eigene VirtualisierungsSoftware zur Verfgung. Sie mssen nicht auf
Produkte von VMware oder Microsoft zurckgreifen.
Die Software untersttzt 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 fr diesen gesamten Stack seiner Produkte auch Support und untersttzt 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 Groteil seiner Produkte geprft und fr den Lauf auf Oracle VM
zertifiziert. Wer mchte, kann sich die Software
kostenfrei von der Oracle-Website herunterladen, denn Oracle stellt diese den Anwendern
kostenfrei zur Verfgung.

Templates zur beschleunigten


Inbetriebnahme
Um die Inbetriebnahme von Anwendungen zu
beschleunigen, setzt das Unternehmen auf die
Nutzung von Templates. Oracle positioniert seine Virtualisierungs-Lsung in erster Linie fr
die eigenen Kunden. Daher liefert das Unternehmen auch ber 90 vorbereitete Templates
fr 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 gehren jene fr Oracle Applications, Middleware und Datenbanken. Die
Templates umfassen die Konfiguration der virtuellen Systeme und vereinfachen das Setup. Sie
2/2014

beinhalten all die Konzepte fr die Bereitstellung eines voll konfigurierten Softwarepakets.
Diese helfen durch vorinstallierte und vorkonfigurierte Images, die Unternehmenssoftware
schnell zu aktivieren.
Oracle VM umfasst ferner die Funktionalitten fr 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
Verwaltungsoberflche. Oracle positioniert das
Virtualisierungs-System VM fr das Data Center und dessen Anforderungen. Es umfasst eine
Policy-basierte Verwaltung. Diese richtet sich an
den Regeln der geschftlichen 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 auerdem 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 mchte mit seinem


Angebot vom Desktop bis zum
Datacenter den kompletten
IT-Stack virtualisieren (Bild 2)

87

backend

VirtualBox fr Windows kommt auch


mit Linux-Gsten 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. Dafr allerdings wird VirtualBox von Oracle kostenlos abgegeben und hat daher viele Nutzer im privaten Umfeld oder den kleineren Unternehmen oder Testumgebungen. VirtualBox
untersttzt eine Vielzahl an Host-Betriebssystemen. Dazu gehren Windows, Mac OS X, Oracle Solaris, Oracle Linux und andere wichtige Linux-Systeme.
Der Hypervisor wird von einer bootfhigen 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 Gste 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 fhrt dieses unter dem
Bereich der Desktop-Virtualisierung. VirtualBox
wurde ursprnglich von Sun Microsystems entwickelt. Durch die bernahme von Sun durch
Oracle kam das Produkt in den Oracle-Bestand.
VirtualBox ermglicht es, auf einem X86-Rech-

Neuerungen der Version 4.3 von VirtualBox


VirtualBox 4.3 ist seit Mitte Oktober 2013 verfgbar. Zu den Neuerungen gegenber den bisherigen VirtualBox-Versionen gehren unter anderem die folgenden Aspekte.
Support fr neue Plattformen: Oracle VM VirtualBox 4.3 untersttzt die Input-Gerte-Eigen-

schaften der neuesten Plattformen in einer virtuellen Umgebung, darunter Windows 8.1, Windows Server 2012 R2 und Mac OS X 10.9. Fr Windows 8.1 kann ein 10-Punkt-MultitouchGert simuliert werden. Die verbesserte 3D-Beschleunigung bercksichtigt 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 untersttzt VirtualBox 4.3 weitere virtuelle Endgerte und Dienstprogramme, wie zum Beispiel Webcams und die Mglichkeit, ein Gesprch mitzuschneiden. Untersttzung fr Multitouch-basierte Betriebssystem wie beispielsweise Windows 8.x.
Neue Gerte und Dienstprogramme: Eine virtuelle USB-Webcam erlaubt die Nutzung von Video-Conferencing-Anwendungen wie Skype oder Google Hangouts auf virtuellen Maschinen.
Die teilweise oder vollstndige Aufnahme von Virtual-Machine-Sessions ist jetzt mglich. 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 zhlen vor allem jene im
Bereich der Anwenderfreundlichkeit und Flexibilitt. Virtuelle Maschinen knnen nun besser
kopiert werden. Dabei nutzt VirtualBox auch
speicherplatzsparendes Linking anstelle einer
vollstndigen Kopie. Ferner gibt es diverse Verbesserungen, die VirtualBox nun auch im Kontext groer Umgebungen besser platzieren sollen. Der Speicher der Gste lsst sich auf 1 TByte
RAM ausdehnen.
Ein Host soll mehr als 1000 VMs aufnehmen
knnen. 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 gehren ferner ein grerer Durchsatz, eine verbesserte Bedienbarkeit und die Untersttzung
fr neue virtuelle Hardware wie Chipstze und
PCI Express.
VirtualBox ist darber hinaus in der Lage, das
VMDK-Format von VMware zu nutzen. VirtualBox untersttzt 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 zugehrigen 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 gehren unter anderem die Gre des Arbeitsspeichers, die virtu2/2014

backend
elle Festplatte und die Netzwerkeinstellungen.
Bei der Konfiguration der virtuellen Festplatte knnen Sie auerdem bestimmen, ob diese
eine feste Gre auf ihrem System einnehmen
soll oder ob sie dynamisch anwachsen soll. Ferner mssen Sie noch den Speicherort fr die dynamische Festplatte auf dem Host angeben. Damit ist die Konfiguration der virtuellen Maschine abgeschlossen.
Zu den weiteren Konfigurationseinstellungen gehren jene zur Bestimmung der Gre
des Hauptspeichers, der CPUs, der IO-Adressierung und der Start-Reihenfolge. VirtualBox
untersttzt, je nach der Hardware des Hosts, bis
zu acht CPUs.

Die Gste in VirtualBox

beispielsweise virtuelle Festplatten, CDs, DVDs


und hnliches.
Und schlielich knnen Sie auch Images im
Open Virtualization Format (OVF) mit Ihrer
virtuellen Maschine verknpfen. Im Gast-Fen
ster werden die Ausgaben Ihres virtuellen Gastes eingeblendet. Die Anzeige des Gastsystems
kann dabei in unterschiedlichen Formaten erfolgen. Dazu gehren 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 Gste 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 Konfigurationsmglichkeiten berschaubar sind. Nach dem Anlegen der virtuellen Maschine durch den Virtual
Box-Manager knnen 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 Hlle.
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 Lsung fr virtuNach dem Setup des Betriebssystems mssen
elle Desktops. Es umfasst alle Hilfen und Tools,
sie noch die VirtualBox-Gasterweiterungen inum virtuelle Benutzerarbeitspltze zu erstellen
stallieren. Diese sind vergleichbar mit den VMund zu verwalten. Oracle Virtual Desktop Infra
ware-Tools. Sie optimieren den Betrieb der VM
structure untersttzt unterschiedliche virtuelle
im Kontext von VirtualBox.
Desktops.
Diese Add-ons sorgen fr eine bessere LeisDazu gehren Systeme mit Microsoft Wintung der virtuellen Maschinen und eine einfadows 7, Windows Vista, Windows XP und neuchere Bedienung. Dazu gehrt beispielsweise
ere Windows-Systeme, ferner Oracle Linux,
die automatische Anpassung der BildschirmOracle Solaris, Suse Linux Enterprise Desktop
auflsung des Gast-Systems an die Fenstergrund Ubuntu Linux. Die Benutzerarbeitspltze
e oder die nahtlose bergabe des Mauszeigers
werden von Oracle als Client Tier bezeich-
in den Fenstern.
Verfgbar sind diese Gast
erweiterungen fr alle gngigen
Betriebssysteme von Windows,
aber auch fr Linux und Solaris.
Neben dem Verwaltungsinterface
des VirtualBox-Managers steht
Ihnen die jeweilige Konsolenansicht zur Verfgung.
Zu den weiteren Einstellungen
gehren unter anderem jene fr
virtuelle Netzwerke und diverse
Pfadangaben. Ferner haben Sie
die Mglichkeit, die weiteren Medien mit der virtuellen Maschi- Die Installation von VirtualBox 4.3 wird durch einen
Der gesamte Setup-Prozess fr VirtualBox ist schnell
durchlaufen (Bild 6)
ne zu verknpfen. Dazu zhlen Assistenten einfach gemacht (Bild 5)
2/2014

89

backend
lichen Betriebssystemen wie Windows oder Linux bestckt.
VirtualBox selbst untersttzt unterschiedliche
Hostsysteme wie beispielsweise Windows, Linux und Solaris. Die Installation von VirtualBox
ist schnell vorgenommen (Bild 5).

Konfigurationsdialoge

VirtualBox untersttzt auch


eine breite Palette an LinuxDistributionen (Bild 7)

net. Dabei kann es sich um Sun-Ray-Clients,


Windows-PCs und Macs handeln.
Als Hostplattform fr die Sun-Ray-Clients
setzt Oracle auf das eigene Linux. Daneben erffnet Oracle den Anwendern aber auch weitere Lsungsszenarien. 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 Erluterungen 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. Darber hinaus hlt
die Website www.virtualbox.org auch viele weitere Informationen und Hilfen zum Einsatz des
Virtualisierungs-Tools bereit (Bild 4).
Fr unsere Arbeiten mit VirtualBox und als
Grundlage fr 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 erlutern. Im ersten Konfigurationsdia
log werden Sie nach dem Umfang Ihrer VirtualBox-Installation gefragt. Hier knnen Sie etwa festlegen, ob Sie den USB-Support oder das
VirtualBox Networking mit einrichten wollen.
Wie haben uns im Zuge unseres Berichts fr 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).
Anschlieend knnen Sie damit beginnen,
virtuelle Maschinen in VirtualBox anzulegen.
Falls auf dem Rechner bereits eine frhere 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 bentigten Parameter in einer Dialogfolge abfragt. Dies sind zunchst der
Name der virtuellen Maschine und das Betriebs-

Das Einrichten des Betriebssystems in der virtuellen Maschine wird


durch einen Assistenten untersttzt (Bild 9)

90

2/2014

backend
system. VirtualBox untersttzt 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
auerdem diverse Linux-Distributionen (Bild 7).
Anschlieend mssen Sie der neu zu erzeugen virtuellen Maschine noch den Arbeitsspeicher zuweisen. Dabei knnen Sie sich an den
Vorgaben der Betriebssystemhersteller orientieren. Im Gegensatz zu physischem Arbeitsspeicher knnen Sie den virtuell zugewiesenen Speicher aber leichter anpassen.
Im nchsten Schritt wird die virtuelle Festplatte parametrisiert. Hierbei gilt das analoge
Vorgehen wie beim Einrichten des Arbeitsspeichers: Um die Plattenkapazitt zu erhhen, gengt es, den Wert in dieser Konfigurationsmaske anzupassen. Ferner knnen Sie bestimmen,
ob die virtuelle Platte eine feste Gre auf dem
Host-System einnehmen soll, oder ob sie dynamisch bis zu ihrer maximalen Kapazitt vergrert werden soll.
Ferner mssen sie den Speicherort fr 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 erhlt 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 anschlieend, wie ein physischer Rechner
auch, mit einem Betriebssystem und Anwendungen bestckt werden.
Dies erfolgt im nchsten Schritt. Hierzu gibt
es prinzipiell verschiedene Mglichkeiten. 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 Mglichkeit ein bestehendes PlattenImage in eine virtuelle Festplatte zu bernehmen. Dann entfllt der manuelle Installationsvorgang natrlich. Fr diesen weiteren Test gehen wir davon aus, die Platte neu einzurichten. Hierzu aktivieren Sie das Start-Icon in der
Menzeile des VirtualBox Managers. Anschlieend 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 fr 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 Mens. Unter Datei finden Sie die Optionen zum Verwalten von virtuellen Festplatten, CDs, DVDs und Diskettenabbildern mit VMs oder zum Verknpfen mit virtuellen Maschinen (Bild 10).
Ferner knnen Sie an dieser Stelle auch Appliances im
Open Virtualization Format
(OVF) verwalten. Das OVFFormat wurde von VM
ware
entwickelt, um einen Standard fr 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 fr 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 entfllt 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 ausdrcken, 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
fr virtuelle Netzwerke, Pfadangaben zu virtuellen Maschinen oder etwa der Festlegung der
Host-Taste. Sie steuert den Mauszeiger fr 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 fr das eigene Unternehmen zur Verfgung.
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 gebndelt. Daneben stehen die Applikationsdienste. Wird ein Dienst (eine Anwendung) bentigt, so erhlt dieser seine Ressourcen aus dem Pool zugewiesen. Diese
Bereitstellung der Applikationen und der zum Lauf bentigten Ressourcen erfolgt dynamisch.
Um den Prozess der Aktivierung und Deaktivierung von Anwendungen schnell ausfhren zu
knnen, werden Skripts und Automatisierungs-Tools eingesetzt. Nicht mehr bentigte Anwendungen lassen sich auf diese Art und Weise auch wieder deaktivieren.

92

tuelle Maschine mit den gewhlten Parametern


eingerichtet. Der Groteil diese Konfigurationseinstellungen kann spter aber jederzeit verndert werden. Hierzu klicken Sie auf das Symbol
ndern. Anschlieend ffnet sich ein Fenster mit
mehreren Bereichen (Bild 11).
Wenn Sie eine der Optionen selektieren, blendet der Verwaltungsmanager von VirtualBox
rechts die dazugehrigen Einstellungen ein.
Diese knnen Sie nun ndern. Dabei gilt es zu
beachten, dass manche der Einstellungen nur
dann gendert werden knne, 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 fr die virtuelle Hauptplatine, den virtuellen Prozessor sowie Angaben zur Leistungssteuerung (unter Beschleunigung) (Bild 12).
An diese Stelle haben Sie auch die Mglichkeit, die Gre des Hauptspeichers und die
Boot-Reihenfolge zu ndern. Ferner knnen 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 fr den Grafikspeicher. Hier knnen
Sie Speicherbereiche festlegen sowie die Anzahl
der Bildschirme bestimmen. Ferner lassen sich
an dieser Stelle die 3D- beziehungsweise die 2DVideo-Beschleunigung einstellen.
Und schlielich finden sich an dieser Stelle
die Konfigurationseinstellungen fr den Fernzugriff. Dabei knnen Sie beispielsweise den
Serverport und die Authentifizierungsmethode whlen. Standardmig nutzt VirtualBox fr
den Zugriff den Port 3389. Wenn notwendig,
knnen 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
knnen Sie einige Anpassungen vornehmen. So
lassen sich beispielsweise verschiedene Ansichten wie etwa der Vollbildmodus oder ein skalierter Modus auswhlen.
Beim Seamless Mode wird der Desktop der
virtuellen Maschine nahtlos in den des Hosts
eingefgt. Die Gast-Anwendungen laufen dann
in einem Fenster des Hosts.
[mb]
2/2014

web & mobile

DEVELOPER

n
e
r
T

prsentiert:

ds

u
s

n
e
g
n

ow
n
K

-Ho

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

NCC Ost, Nrnberg

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,
Einstellungsgesprche

Tools und Frameworks:


Eclipse, PhoneGap, Xamarin

Zusammenarbeit im
Team: Vor Ort und remote

Mit Very
Early Bird
200,
sparen!

Unsere Experten (Auswahl):

Benno Bartels,
Grnder,
insertEFFECT

Markus Eilers,
Geschftsfhrer,
Runtime Software
GmbH

Stefan Hoth,
freiberuflicher
Softwareentwickler fr
Java, PHP, Web und
Android

Michael Johann,
Grnder,
rails-experts.com

mobile-developer-conference.de

Markus Junginger,
Geschftsfhrer,
greenrobot

Henrike Rse,
Event & Marketing
Manager, Microsoft
Deutschland GmbH

MDConference

backend
Flickr API nutzen

Leistungsfhiges API
Aus Sicht eines Entwicklers wird Flickr gerade durch sein leistungsfhiges API spannend, mit dem man
auf alle Funktionalitten des Bilderdienstes zugreifen kann. Von Carsten Mhrke

Autor

Carsten Mhrke
ist Autor, Trainer und Berater mit
den Schwerpunkten Webent
wicklung und Webtechnologien.
Inhalt
Einfhrung 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

lickr gehrt 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 wre sicher
auch unfair, diese Dienste miteinander zu vergleichen.
Flickr verfolgt das Ziel, seinen Usern die Mglichkeit zu geben, ihre Bilder zu organisieren
und die Bilder anderen zugnglich zu machen.
Und das macht Flickr auch ganz gut. Neben der
Tatsache, dass User kostenlos 1 Terabyte Speicherplatz zur Verfgung gestellt bekommt, untersttzen auch viele Programme, wie beispielsweise Lightroom oder Aperture, den direkten
Upload von Daten zu Flickr.
Fr den Upload nutzen diese Anwendungen
das API, das Flickr zur Verfgung stellt. Dieses
API knnen 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 luft 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
knnen. 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 knnen, muss
Ihre Applikation natrlich 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 frher ein

Die Flickr-Homepage (Bild 1)


eigenes Authentifizierungsverfahren untersttzt, das inzwischen aber nicht mehr genutzt
werden soll.
In groben Zgen beschrieben funktioniert
OAuth folgendermaen. Die Applikation, die
Zugriff auf das API haben mchte, 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 gegenber Flickr
authentifizieren kann, bentigen Sie zunchst
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 Schlsselpaar, bestehend aus dem
Consumer Key (der obere String) und dem Consumer Secret (der untere String) (Bild 2).
Nachdem Sie die Anwendung angelegt haben, knnen Sie sie jederzeit ber die Menpunkte Entdecken, App Garden und Anwendungen von Ihnen aufrufen. Dort knnen Sie die beiden Keys auch jederzeit nachschlagen. Bitte klicken Sie nicht den Menpunkt 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 unerklrlichen Phnomenen. Dann hilft es meist, die Anwendung
bei Flickr zu lschen und neu anzulegen.
Nun stellt sich die Frage, wie Sie die OAuthAuthentifizierung in Ihrer Anwendung implementieren. Die erste Mglichkeit wre es, den
Zugriff manuell zu implementieren, was aber
sehr aufwendig wre. Die zweite Variante wre es, die PHP-Funktionen zu nutzen, die dafr
vorgesehen sind.
Leider sind diese aber nicht im PHP-Kern enthalten, sondern ein Bestandteil von PECL. Somit stehen sie nicht unbedingt berall zur Verfgung. Daher empfiehlt es sich, auf eine fertige Bibliothek zurckzugreifen. Fr 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 zurckgreifen, die unter https://code.google.com/p/oauthphp heruntergeladen werden kann. Die Bibliothek ist recht leistungsfhig und nimmt einem
einiges an Arbeit ab. Insbesondere die TokenVerwaltung wird automatisiert. Das heit, das
Token, das die Anwendung von Flickr zurckbekommt, wird automatisch von der Bibliothek
verwaltet. Selbiges wird standardmig in einer
Datenbank abgelegt. Die SQL-Skripts zum Anlegen der bentigten Tabellen finden Sie nach dem
Entpacken in store/mysql.
Fhren Sie das Skript aus, damit die bentigten Tabellen angelegt werden. Danach muss der
Client nur noch konfiguriert werden. In einem
ersten Schritt muss der User, fr den der Schlssel 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 fr den Zugriff in der Datenbank
abgelegt. Die URLs, die ich hier genutzt habe,
gelten genauso fr Ihre Anwendung. Die Werte fr consumer_key und consumer_secret mssten Sie natrlich durch Ihre Schlssel ersetzen.
Nachdem Sie das Skript aus Listing 1 ein erstes
Mal ausgefhrt haben, ist das System vorbereitet und Sie knnen 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 temporre Request-Token
durch das endgltige 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 nchsten Schritt durch Flickr angesprochen. Bei dem
Server flickr.local.net handelt es sich um einen
lokalen, virtuellen Server, den ich fr diesen
Artikel eingerichtet habe. Mit dem Parameter
perms knnen Sie festlegen, welche Rechte Ihre Anwendung anfordern soll. Mgliche Werte sind hier read, write oder delete, wobei das
Schreibrecht das Leserecht beinhaltet und das
Lschrecht 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 gewhren mchte. Besttigt 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 endgltige Access-Token bergeben, das fr sptere API-Aufrufe bentigt wird. Den Code dafr
zeigt Listing 3.
Damit ist die Anwendung authorisiert und
Sie knnen alle API-Funktionen solange sie
nicht mit den gewhrten Rechten kollidieren
nutzen.
Wenn Sie testen mchten, ob alles funktioniert
hat, dann fhren 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 zurck und bentigt 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 untersttzt. Neben der Standard-XML-Antwort, die Sie oben sehen, knnen Sie auch andere XML-Formate wie SOAP
nutzen.
Alternativ knnen Sie aber auch JSON oder
serialisiertes PHP anfordern. In den meisten Fllen wird JSON sicher die beste und flexibel
ste Variante sein. Damit die Antwort im JSONFormat erfolgt, geben Sie als zustzlichen 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. Fr die Funktion
test.login sieht der Rckgabewert 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 wren, hier als Eigenschaft _content abgelegt werden.

Bilder auslesen
Wie Sie in der Dokumentation des API auf www.
flickr.com/services/api sehen knnen, sind die
Funktionalitten 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 Funktionalitten, die Flickr anbietet. Alles, was mit Galerien
zu tun hat, finden Sie unter dem Punkt galleries,
alle Funktionalitten zu den Statistiken sind unter stats aufgelistet et cetera.
Um Bilder auszulesen, die in einem Account
vorhanden sind, haben Sie verschiedene Mglichkeiten. Sie knnten die Bilder nach Alben
oder Galerien auslesen, Sie knnen explizit nach
Bildern mit bestimmten Eigenschaften suchen,
oder Sie knnen sich alle Bilder zurckgeben
lassen, die zu keiner Galerie gehren.
Die leistungsfhigste Mglichkeit, Bilder zu
ermitteln, ist dabei die Suche mit Hilfe von flickr.
photos.search. Dieser API-Aufruf bietet eine Vielzahl von Mglichkeiten, nach welchen Kriterien
Sie nach Bildern suchen knnen. Im einfachsten Fall wollen Sie alle Bilder auslesen, die Ihrem Account zugeordnet sind. In diesem Fall
mssten Sie die User-ID, die Sie beispielsweise
mit flickr.test.login ermitteln knnen, als einziges
Suchkriterium angeben.
Das Beispiel in Listing 5 liest alle Bilder aus,
die zu dem User gehren, und gibt sie aus. Der
URL, der zu dem Bild gehrt, ist nicht direkt in
den Daten enthalten, sondern muss konstruiert
werden (Bild 4). Das hat den Vorteil, dass Sie sich
die Gre des Bildes, das dargestellt werden
soll, direkt aussuchen knnen. Flickr berechnet
nmlich eine Vielzahl von Vorschaubildern aus
dem Original. In diesem Fall steht das _m am
Ende des Dateinamens fr die Gre m, mit einer Kantenlnge von maximal 240 Pixeln. Alternativ knnen Sie zum Beispiel auch s fr 75x75
Pixel nutzen, q fr eine Gre von 150x150 Pixeln oder b fr eine maximale Kantenlnge 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, mchte ich


aber noch kurz auf die Suche mit flickr.photos.
search zurckkehren. Im obigen Beispiel habe
ich als Suchkriterium die User-ID angegeben.
Ohne die Angabe der User-ID wrde die Funktion alle ffentlich zugnglichen Bilder durchsuchen. Der API-Aufruf kennt aber noch eine Vielzahl von anderen Mglichkeiten. Mit Hilfe des
Argumentes text knnen Sie die Beschreibungen
und Titel durchsuchen. Die Schlssel min_upload_date, max_upload_date, min_taken_date und
max_taken_date erlauben es Ihnen, die Such
ergebnisse nach Upload- beziehungsweise Aufnahmedatum einzuschrnken, wobei das Datum als Unix-Timestamp oder im MySQL-Format angegeben werden kann. Insgesamt stellt der Aufruf ein sehr
breites Spektrum an Mglichkeiten zur Verfgung, 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 knnen,
stellt sich noch die spannende Frage, wie Sie Bilder zu Flickr hochladen. Leider ist die Vorgehensweise dabei etwas anders. Flickr stellt
dafr keinen API-Call zur Verfgung, sondern sieht einen direkten Upload per
POST vor. Das heit, Sie mssen auf einen Upload via Curl zurckgreifen. Ein direkter Upload per Formular ist leider nicht mglich, da
der Upload mittels OAuth zertifiziert werden
muss. Und da fngt es dann auch leider an, etwas kompliziert zu werden. Da Flickr fr den
Upload auf einen anderen URL zurckgreift,
knnen wir leider nur in Teilen auf die Funktionalitten der Bibliothek zurckgreifen.

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

Glcklicherweise 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, angehngt werden.
PHP sieht keine Funktionen dafr vor, was die
OAuth-Bibliothek aber glcklicherweise kompensiert (Listing 6).
Bei dem Erstellen der Signatur mssen Sie
beachten, dass das Bild selbst nicht mit signiert
werden darf und somit erst spter zu den Feldern hinzugefgt werden darf. Bei dem Wert
fr 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 ausgefhrt werden, was hier aber vernachlssigt
werden kann (Bild 5).
Wurde der Upload erfolgreich durchgefhrt,
dann besttigt Flickr dies mit der ID des neu angelegten Bildes. Im Fehlerfall wird natrlich ei-

Das neu hochgeladene Bild bei Flickr (Bild 5)


ne Fehlermeldung zurckgegeben, die hier allerdings nicht ausgewertet wird. Mgliche Fehlercodes und weitere Argumente fr einen Upload finden Sie unter www.flickr.com/services/
api/upload.api.html.

Fazit
Wie so oft reicht der hier verfgbare Platz leider nicht, um alles zu beschreiben. Das API ist
wirklich leistungsfhig und erffnet eine Menge Mglichkeiten. Stbern Sie einfach mal in der
Dokumentation des API. Die Doku ist mit Ausnahme der Beschreibung der Upload-Funktionalitt 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' => 'Kse 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 begrndet,


dass nur die eigene Fantasie und
Kreativitt begrenzen, was mglich ist.
Golo Roden
Technologischer Visionr, Referent, Autor

Visual Studio

Trainer: David Tielke

Softwarequalitt
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

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

Upgrades fr ihr
Know-How

backend
JavaFX die Zukunft von Java

JavaFX mit IntelliJ IDEA


JetBrains, der Hersteller von IntelliJ IDEA, bietet seit der Markteinfhrung von JavaFX also schon sehr lange
eine direkte Untersttzung fr 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.

ie Anzahl der am Markt erfolgreichen professionellen Entwicklungsumgebungen fr


Java-Programmierer hat sich ber viele Jahre
hinweg auf maximal fnf bedeutende Hersteller oder Produkte reduziert. Von diesen verfgt
lediglich JetBrains mit IntelliJ IDEA ber die
einzige kommerzielle Java-IDE, die noch einen
signifikanten Marktanteil einnimmt. Ein cleverer Schachzug gegenber 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 bermchtigen Eclipse-Gemeinde.
Diese neue Java-IDE fr die Programmierung
von Android-Apps entstammt einem Kooperationsprojekt von Google und JetBrains; beide
erschlossen sich damit in wachsenden Mrkten
wichtige Absatzpotenziale. JetBrains verwendete als Ausgangsbasis fr Android Studio die seit
vielen Jahren verfgbare IntelliJ-Plattform. Diesen Entwicklungsansatz verfolgte JetBrains bereits mehrfach auch fr andere Technologien
wie JavaFX: Auf der Basis bisheriger Erfahrungen und konkreter Anforderungen seitens der
Kunden realisiert man diese auf der bewhrten Plug-in-Architektur der IntelliJ-Plattform.
Gleichzeitig nutzt man die in der IntelliJ-Plattform implementierten IDE-Features, um schnell

Die Strken der IntelliJ-Plattform


Intelligentes Verhalten: Diese Zielsetzung der Entwickler inspirierte den Hersteller, als Produktname IntelliJ IDEA zu whlen.
Refactoring (Restrukturierung): Automatische Strukturverbesserung von Quellcode (unter Bei-

behaltung des Programmverhaltens), um ihn lesbarer, verstndlicher, wartbarer und erweiterbarer zu machen.
Produktivitt: Durch intelligente Codeanalyse, Codevervollstndigung, Code Folding, Live Templates, Prfmechanismen (Inspection), Quickfixes, schnelle Navigation, Arbeiten mit unvollstndigem 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 ausfhren. Erst eine Polyglot-IDE ermglicht 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 jhrlichen Plug-in-Wettbewerb,
um die besten IDE-Erweiterungen zu prmieren.

100

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

die bestmgliche Untersttzung fr Androidoder JavaFX-Entwickler bereitzustellen.

Auswahl zwischen Community Edition


oder Ultimate
JetBrains vermarktet fr Java-Entwickler zwei
Produkte: ein frei zugngliches Open-Source-
Produkt IntelliJ IDEA Community Edition und
eine mit zustzlichen Funktionen ausgestattete kommerzielle Entwicklungsumgebung
IntelliJ
IDEA Ultimate (Bild 1). Seitens der Betriebssysteme
untersttzt der Hersteller
fr beide IDE-Editions sowohl Windows, Mac OS X
als auch Linux. Whrend
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 fr die Polyglot-Programmiebei IntelliJ IDEA Ultimate
rung (Bild 1)
um eine vollwertige Entwicklungsumgebung, die
man bereits in den frhen Phasen der SoftwareEntwicklung fr Analyse, Modellierung und
Design einsetzen kann.
Als Programmierumgebung stellt die Community Edition (CE) quasi eine Untermenge der
Features der Ultimate Edition (UE) zur Verfgung. Jedoch geht bereits die CE ber die bentigten Funktionen einer reinen Programmierumgebung hinaus: Sie besitzt fr die Verwaltung von Projekten und Quellcode Schnittstellen
zu allen wichtigen Change-Konfigurations- und
2/2014

backend
Build-Systemen (Ant, Gradle, Maven), fr das
Testing zu JUnit, TestNG, Spock, Cucumber und
anderen sowie fr die Projektarbeit und Fehlerverfolgung zu YouTrack, JIRA, Lighthouse, GitHub, Redmine et cetera. Die UE ergnzt oder
erweitert die CE zu einer professionellen Entwicklungsumgebung fr unternehmensweite
Anwendungen inklusive Webanwendungen,
Rich-Internet-Applikationen und Mobile Apps.
So verfgt die UE ber Database Tools, UML
Designer und erlaubt zustzlich den Einsatz von
HTML (mit JavaScript und CSS).
Darber hinaus untersttzt 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 zugnglich. Dasselbe gilt fr die Changeund Konfigurationssysteme ClearCase, Team
Foundation Server, Perforce und Visual Source
Safe. Fr die UE bietet JBrains einen Rund-umdie-Uhr-Support, whrend der Support fr die
CE ber die IntelliJ-IDEA-Community-Foren
und Issue Tracker, ein frei zugngliches Problem- und Projektverfolgungs-Tool auf Basis des
JetBrains-Produkts YouTRACK, erfolgen muss.

Bei der JavaFX-Untersttzung 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 vollstndig zurck. Lediglich das Team bei JetBrains vollendete die Entwicklungsaktivitten und kndigte mit IntelliJ IDEA 8.1.1 ein JavaFX-Plug-in fr
die Entwicklung mit JavaFX-Version 1.x an, dem
Vorgnger des heutigen JavaFX 2.x (Bild 2). Aufgrund der geringen Akzeptanz und der fehlenden greren Verbreitung dieser JavaFX-Ver
sion 1.x reduzierte schlielich 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 Realisierung der neuen Version JavaFX 2 vor. Das damit verknpfte Funktions- und Leistungsspektrum fhrte, 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

fr die Zukunft von Java. Daher entschloss sich


JetBrains, die bisherigen Arbeiten fr die Bereitstellung eines JavaFX-Plug-ins fortzusetzen. Die
neuen Entwicklungsaktivitten fhrten 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
JavaFX 2 ausgerichtetes Plug-in einer breiten ffentlichkeit zugnglich. 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 Verfgung. Dazu gehren smtliche Arbeitsschritte wie
intelligentes Editieren, bersetzen und Bereitstellen der Anwendung. Insbesondere untersttzt
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 verfgbaren Sprachen und Tools wie FXML, Scene
Builder oder die JavaFX-Ant-Erweiterungen.

Das JavaFX-Team bei JetBrains


befasste sich frhzeitig auch mit
der aufgrund konzeptioneller
Schwchen wenig erfolgreichen
JavaFX-Version 1.x (Bild 2)

Seit Frhjahr 2013 untersttzt


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 fr die JavaFX-2.xEntwicklung mit IntelliJ IDEA (mglich ab Version 12.1.x) ist die Installation eines JDK (ab

IntelliJ IDEA vom Plug-in zur Polyglot-IDE


Ursprnglich als Renamer-Plug-in fr 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 fr ihre Projekte lngerfristigen Erfolg zu sichern.
Deshalb integrierte JBrains in IntelliJ IDEA die besonders hilfreichen Features Refactoring,
Syntax-Highlighting, Live Templates, Codevervollstndigung, intelligente Fehlerverarbeitung und
andere. Diese Charakteristika fhrten ber viele Jahre hinweg zu zahlreichen Auszeichnungen
und Preise, die der Hersteller fr 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 untersttzt die IDE den kompletten Lifecycle und zahlreiche Sprachen, sodass JetBrains
ber eine Polyglot-IDE verfgt.

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; knnen ber File,
Other Settings, Default Settings bearbeitet werden.
Project Settings: Gelten fr ein
spezielles Projekt und werden
ber das .idea-Verzeichnis direkt beim Projekt abgebildet.
Die zugehrigen 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 fr
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 enthlt vom Benutzer ausgewhlte
Einstellungen. File, Export Settings erzeugt die settings.
jar-Datei im config-Ordner fr
einen spteren 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 dafr eine De-Installation an.
Unter Mac OS X und Linux fhrt man die Installation wie bei diesen Betriebssystemen blich
als Systemadministrator durch. Die Installation
richtet gleichzeitig eine Java Runtime Environment (JRE) fr die eigenen Dienste beziehungsweise Services der IDE ein.

Einstellungen bernehmen
Bereits beim erstmaligen Start einer neu installierten IDE-Version besteht die bei Open-SourceProdukten hufig fehlende Mglichkeit, 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
mglich. Eine bernahme oder einen Import
von IDE-Einstellungen fhrt man spezifiziert
nach bestimmten Vorgaben durch, die vorher in
die Datei settings.jar exportiert wurden. Um Anfngern einen schnellen und fehlerfreien Einstieg zu gewhrleisten, stellt JetBrains die Community Edition integriert mit den am hufigsten
bentigten Plug-ins bereit.
Im Unterschied zur CE legt man beim erstmaligen Start der UE zunchst ein durch das
Projekt vorgegebenes Versionsverwaltungssystem (Version Control System/VCS) fest. Danach
whlt man jeweils ber drei eigenstndige 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) fr JavaFX-2-Untersttzung aktivieren. Fr beide IntelliJ IDEAEditionen erreicht man dieses direkte Plug-inAuswahlfenster ber File, Other Settings, Configure Plugins. Natrlich lsst sich das JavaFXPlug-in wie alle anderen auch nachtrglich 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 verfgbaren und nicht installierten Plugins durch Auswahl von Disabled plugins in der
Dropdown-Liste Show an. Ist bereits ein Projekt definiert, whlt man: File, Settings, IDE
Settings, Plugins. Ein Klick auf das Optionskstchen vor dem Namen des JavaFX-Plug-ins aktiviert es nach erneutem IDE-Start. Fr JavaFXAnt-Builds installiert man abschlieend noch
das Ant Support-Plug-in und macht es der IDE
zugnglich. Die Startdauer der IDE lsst sich
optimieren, indem man einfach nicht bentigte Plug-ins ber den Dialog Welcome to (Settings, Plugins) oder File, Other Settings, Configure Plugins ausschaltet.

Konfiguration der IDE fr die


JavaFX-Entwicklung
Nach Start von IntelliJ IDEA macht man fr
die JavaFX-Entwicklung in der IDE zunchst
das JavaFX SDK zugnglich; 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, grne Plus-Symbol. Es ffnet sich der
Dialog Select Home Directory for JDK, ber den
man das Installationsverzeichnis der gewnschten Java SE (ab Version 7) festlegt. Der Dialog
Project Structure darf nicht durch einfachen OKKlick, sondern muss, um eine tatschliche projektbergreifende Zuordnung eines JDK vorzunehmen, ber die Apply-Schaltflche verlassen
werden.
In der Regel sollte fr Entwicklung und Test
eine Java Runtime Environment (JRE) ausgewhlt werden, die mit der im Anwendungsbetrieb bereinstimmt. Diese Bedingung kontrolliert man kurz auf der Ebene des Betriebssystems. Die Prfung fhrt 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 gewnschten 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 geffnetem Projekt ber File,
New Project In der linken Spalte des Dialogs
New Project (Bild 5) whlt man in der Kategorie
Java als Anwendungstyp JavaFX Application aus.
Im rechten Fensterausschnitt befindet sich eine Dropdown-Auswahlliste Project SDK mit allen der IDE verfgbaren 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 Schaltflche New Es erscheint wieder der Dialog Select Home Directory for JDK, um das gewnschte JDK ber dessen Installationsverzeichnis auszuwhlen. IntelliJ IDEA erlaubt fr 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
zugnglich. 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
geffnet, 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 -Schaltflche ffnet sich
das Dialogfenster SceneBuilder Configuration.
Jetzt ordnet man der IDE ber das Installationsverzeichnis des Scene Builders die gewnschte Version zu.

Einrichten eines JavaFX-Projekts


Den Projekt-Assistenten (Project Wizard) fr
die JavaFX-Entwicklung erreicht man im Dialogfenster Welcome ber Create New Project
oder bei geffnetem 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
fr die Projektdateien ber Project location fest
und whlt das fr die Programmierung zu verwendende JDK mittels der Auswahlliste Project
SDK aus.
Durch Klick auf die OK-Schaltflche und Besttigung der Neuanlage des zugehrigen Ordners generiert der Projekt-Assistent neben der
2/2014

Ablagestruktur verschiedene Dateien mit JavaFX- und FXML-Quellcode; zu diesen gehren (Bild 6): eine Main-Klasse, eine FXML-Datei und eine zugehrige Controller-Datei. Dabei orientiert sich der IntelliJ IDEA-Generator
am Entwurfsmuster MVC (Model-View-Controller). Zustzlich erzeugt der Projekt-Assistent fr den Build-Prozess der zu programmierenden JavaFX-Anwendung den seitens IntelliJ IDEA bentigten Artifact. Dieser erhlt 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 untersttzt die IDE ebenfalls noch nicht.
JetBrains will, abhngig von den Anforderungen in konkreten Projekten, die fehlenden Quellcode-Generatoren fr weitere JavaFX-Rahmenprogramme schnellstmglich implementieren.
Das ist aufgrund der seitens IntelliJ IDEA
untersttzten File and Code Templates auch

leicht umzusetzen. Zudem wre 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 untersttzte JavaFX-Anwendungstypen als Beispiel bereitstellen sollte. Vielleicht ist es fr den Einstieg
in die JavaFX-Programmierung vorteilhaft, alle oder bestimmte ausgewhlte 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 zugehrige Artifact fr Builds und in External Libraries alle externe Bibliotheken; whrend die Konfiguration
der Anwendung die IML-Modul-
Datei beschreibt (Bild 6)

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

103

backend

Quellcode-Editoren bieten
Programmierern whrend der
Codevervollstndigung auch das
Nachschlagen von Definitionen
des Quellcodes an (Bild 7)

Shortcuts
Tastaturbefehle (Shortcuts) fr
die Codierung.
Einfache

Codevervollstndigung: Name der Klasse, Methode, Variable und [Strg Leertaste].


Smart Codevervollstndigung:
Zeigt die Liste der Methoden
und Variablen nach dem erwarteten Datentyp an: [Strg Umschalt Leertaste].
Vervollstndigung des Klassennamens: Zeigt die Namen
der Projektklassen unabhngig
von den aktuellen import-Anweisungen an: [Strg Alt Leertaste].
Vervollstndigung 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 wre ein AnchorPane, da dieses
mehr Anwendungsflle abdeckt als das komplexere, auf Zeilen und Spalten ausgerichtete
GridPane.
Ein AnchorPane im Rahmenprogramm stellt
sicherlich fr viele Anwendungsflle eine gute und bessere Ausgangsbasis als ein doch recht
spezielles GridPane dar. Am meisten Flexibilitt fr den Entwickler wrde jedoch eine Dropdown-Auswahlliste mit den seitens JavaFX verfgbaren Layout-Managern/Containern bieten.
Das vom Projekt-Assistenten generierte JavaFXRahmenprogramm lsst sich auf der Ebene des
Quellcodes mittels der in IntelliJ IDEA implementierten Editoren ndern. Dazu existiert in
der IDE fr jede Datei eines Ergebnistyps ein
spezieller Quellcode-Editor:
J avaFX,
F
 XML,
C
 SS,
J avaFX Ant.
IntelliJ IDEA bietet eine Codevervollstndigung
fr alle drei Typen von Quellcode-Editoren und
fr JavaFX Ant-Builds an. Die IDE kennt den
kompletten Aufbau und Inhalt der JavaFX-Klassenbibliothek, das heit ihre Struktur, smtliche
Packages, alle Parameter und Konstanten sowie
die komplette Java(FX)-Sprachsyntax.
Der in IntelliJ IDEA implementierte FXMLCode-Editor vervollstndigt FXML-Anweisungen, er kennt die in der Oberflche bereits vorhandenen Elemente und untersttzt deren Konfiguration ber FXML.
Hierzu stehen einem Programmierer alle
definierten fx:-Attribute zur Verfgung, also alle ber die JavaFX-Klassenbibliothek deklarierten Klassen mit ihren Attributen und Methoden.
ber diese fx:-Attribute kann man neue Elemente auf der bisherigen Oberflche aufnehmen und
erweitern oder die vorhandenen ndern.

Hilfreich whrend 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 Vorschlge zur Ergnzung der Anweisungen anbieten.
Zudem verfgt 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 ausgewhlten Code-Elements an.
Dieses Feature kann innerhalb der IDE nicht
nur fr bereits im Editor erfasste QuellcodeAnweisungen, sondern auch fr alle seitens
der IDE aktuell im Editor angebotenen Vorschlge der Codevervollstndigung genutzt
werden (Bild 7).

TODOs als Aufgabenlisten


In groen Projekten hat es sich bewhrt, auf das IDEFeature der ToDo-Aufgabenlisten zurckzugreifen.
Hierzu besitzt IntelliJ IDEA als vordefiniertes Kennzeichen fr den Beginn einer ToDo-Aufgabe das Prfix TODO. Bei den IDE-Settings legt man Ergnzungen
zu diesem Prfix in Anlehnung an bereits vorhandene
weitere TODO-Pattern/Muster an.
Jeder Kommentar in smtlichen Projektdateien,
der mit diesem Prfix und einer definierten Ergnzung beginnt, wird als Aufgabe aufgefasst. Alle Aufgaben mit gleichem Prfix und Ergnzungsmuster 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 fr die visuelle Gestaltung der Bedienoberflche.
Dieses GUI-Tool legt die vom Designer spezifizierte Oberflche in eine FXML-Datei ab. Der
Projekt-Assistent fr eine JavaFX-Anwendung
hat bereits eine solche FXML-Datei als Ausgangspunkt fr das eigentliche Design der Bedienoberflche generiert. Markiert man diese
sample.fxml-Datei im Project Explorer der IDE,
so erscheint in dessen Kontextmen der Eintrag
Open in SceneBuilder.
Whlt man diesen Eintrag aus, so startet das
GUI-Tool, um die Oberflche der Anwendung
visuell gestalten zu knnen (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
Whrend man den Quellcode ndert und erweitert, fhrt IntelliJ IDEA selbststndig 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] nhere Erluterungen 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 Glhbirne oder eines
kleinen Bleistifts aus.
Ein Klick auf das Icon oder die Tastenkombination [Alt Eingabe] ffnet eine sogenannte
Intention Action-Beschreibung. Diese stellt Vorschlge bereit, um die Warnung beziehungsweise Fehlermeldung zu beseitigen. Hierzu gehren Quickfixes (rote Glhbirne mit kleinem
Ausrufezeichen); trifft man aus ihnen eine Auswahl, so korrigiert IntelliJ IDEA automatisch
den Quellcode.
Zustzlich kann man fr das gesamte JavaFXProjekt eigene Code-Inspections anstoen. Hierzu hat JetBrains in IntelliJ IDEA bereits einige
der durchzufhrenden Prfungen vorgegeben.
Diese findet man bei den Project Settings im Bereich Inspections (Bild 8); ber dieses Dialogfen
ster kann man eine bestimmte Prfung aktivieren oder ausschalten, vorhandene InspectionProfiles an eigene Bedrfnisse anpassen, diese
als XML-Datei exportieren und anderen Projekten zugnglich 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 Ausfhrung 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 vollstndig in Java(FX) und FXML
codiert; es lsst sich direkt in IntelliJ IDEA fr
Prototyping oder Test ausfhren. Hierzu whlt
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 stt die IDE eine
bersetzung an. Im Fehlerfall unterbricht die
IDE diese und gibt im Messages-Bereich ber
das Register Make unterhalb der fehlerhaften
Dateien die Fehlermeldungen mit der zugehrigen Zeilennummer aus. Klickt man dort gezielt
auf die Zeile einer Fehlermeldung, so ffnet IntelliJ IDEA die zugehrige 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 fhrt 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 zugehrigen Nachrichten als aktuelle Ausgabezeilen aus. Links neben den angezeigten
Ausgaben befindet sich die zum jeweiligen Register gehrende Toolbar mit den individuellen
Menbefehlen (Bild 9). Fr spteres Nacharbeiten hat es sich im Fehlerfall bewhrt, den Quellcode mittels TODO-Kommentaren zu erweitern
und so Arbeitsauftrge direkt Team-Mitgliedern
zugnglich zu machen.

Build und Packaging der Anwendung


durchfhren

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 zurck; Oracle hat fr
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 fr das JavaFX-Rahmenprogramm im Ordner .idea/artifacts das Artifact
JavaFXApp.xml. Die Definition eines Artifacts,
IntelliJ IDEA spricht von Konfiguration, er-

IntelliJ IDEA verfgt ber bereits


vordefinierte Inspections
(Code-Analysen) von JavaFXQuellcode (Bild 8)

Generierung
Erweiterungen der Code-Generierung.
Die direkte Code-Generierung
fr JavaFX und FXML fehlt derzeit auf der Klassen/Datei-Ebene innerhalb der IDE vollstndig.
Bei Auswahl eines Eintrags im
Projekt-Browser findet man ber
File, New oder ber den Eintrag
New im Kontextmen keinerlei
Untersttzung fr JavaFX-Klassen oder FXML-Dateien. Hier wre es sinnvoll, die Code-Generatoren innerhalb der IDE zu erweitern. Damit wrde JetBrains
insbesondere Anfngern 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 Schaltflchen ein Manifest erzeugen
oder ein bestehendes zuordnen.
Pre/Post-Processing: ber diese Registerreiter
legt man zustzliche Artifacts/Ant-Targets fest,
die vor oder nachdem das aktuelle Artifact erzeugt wurde, von der IDE auszufhren 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 whlt ber die Edit Certificates-Schaltflche
ein Zertifikat aus.

Build-Datei fr das Apache-Ant-System


In der IDE erfolgt die Verwaltung
und Erzeugung von Ausgabeergebnissen ber Artifacts (Bild 10)

folgt auf der Ebene eines geffneten 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 zugehrige Toolbar, um neue Artifacts anzulegen, bestehende zu lschen 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, whlt man Build, Build Artifacts, Build | Rebuild. Die Build-Datei fr das
Apache-Ant-System erzeugt man mittels Build,
Generate Ant Build Es erscheint das Dialogfenster Generate Ant Build, um weitere Einstellungen fr 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 whlt durch Klick auf das kleine grne Plus-Symbol die gewnschte 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 grne Pfeil-Symbol. Im Messages-Bereich der IDE nimmt Apache Ant die zugehrigen 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 fr 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 fr alle gngigen Desktop-Plattformen

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

2/2014

web & mobile

DEVELOPER

n
e
r
T

prsentiert:

ds

u
s

n
e
g
n

ow
n
K

-Ho

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

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

NCC Ost, Nrnberg

Responsive Webdesign)

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

S
 oftwareentwicklung im Groprojekt
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,
Einstellungsgesprche

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,
Grnder und
Geschftsfhrer,
typovision GmbH

web-developer-conference.de

Stefan Priebsch,
Mitbegrnder,
thePHP.cc

Golo Roden,
Wissensvermittler
und Technologieberater

WDConference

backend
Portrt des neuen Jano-CMS

CMS mit ASP.NET


Das Jano-CMS ist ein noch recht junges Content-Management-System, das vollstndig 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 ttig. 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
Portrt des neuen Jano-CMS.

Eine mgliche ServerArchitektur (Bild 2)

108

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 ermglicht an vielen
Stellen eine moderne, REST-basierte
Anwendungsarchitektur.
Gespeichert werden alle Inhalte in
einer Microsoft SQL-Datenbank, wobei hier die Azure-Version untersttzt
wird aber dazu spter mehr. Als Die Jano-CMS Struktur (Bild 1)
Datenbank-Mapping-Werkzeug findet
te Version mit vielen Funktionen und Erweidas Entity Framework Verwendung. Um Ladeterungsmglichkeiten aufwarten. Das System
zeiten zu optimieren, kommen an einigen Stelist mehrsprachig ausgelegt und ermglicht die
len Stored Procedures zum Einsatz. Diese sind
einfache Umsetzung eines internationalisierten
dann wichtig, wenn verschachtelte Daten aus
Webauftritts.
der Datenbank geladen werden mssen.
An der Oberflche finden sich die typischen
UI-Bibliotheken einer modernen Weboberflche
Sprache festlegen
wieder. Die gesamte Logik wird wie bei einer
Zu Beginn mssen dazu lediglich die gewnschreinen Webanwendung blich per JavaScript
ten Sprachen festgelegt werden. Spter knnen
abgebildet, wobei hier jQuery und einige Plugdann alle Inhalte mehrsprachig abgelegt werins tatkrftige Untersttzung leisten. Als Layden. Das Jano-CMS untersttzt hierbei auch eine
outsystem wird das von Twitter bekannte Bootautomatische Maschinenbersetzung von neustrap Framework verwendet.
en Inhalten. Die bersetzungsfunktion kann bei
Auch wenn das Jano-CMS noch ein sehr junBedarf fr jede gewnschte Sprache einzeln akges und neues CMS ist, kann bereits die erstiviert werden. Bei aktivierter bersetzung werden neue Inhalte vorbersetzt, die danach zur
Optimierung im System bereitstehen. Bei Bedarf kann die Mehrsprachigkeit auch deaktiviert und der Webauftritt somit nur einsprachig
realisiert werden.
Fr die Verwaltung von Bildern und Medien
steht ein Medienmanager zur Verfgung. Dieser ist in der Lage, Bilder bei Bedarf auf gewnschte Gren serverseitig zu skalieren. Dazu muss beim Aufruf eines Bildes lediglich die
gewnschte Zielgre ber einen sogenannten
QueryString-Parameter mitgegeben werden.
Skalierte Bilder werden intern gespeichert und
stehen beim nchsten Abruf direkt wieder zur
Verfgung.
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 natrlich auch Inhalte ndern darf. Fr die Freischaltung von genderten
Inhalten durch den Autor existiert ein Freigabeprozess (Workflow). Hierbei sendet der Autor eine neue oder genderte 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 knnen gleichzeitig mit der Freischaltung neuer Inhalte Facebook- und TwitterMeldungen automatisiert erstellt werden. Als
letztes Feature seien hier noch Gadgets erwhnt.
Gadgets ermglichen 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 mglich, eigene Gadgets zu
implementieren und einzubinden.

Genereller Aufbau und Architektur


Bevor ein genauerer Blick auf die Administra
tion geworfen wird, soll an dieser Stelle zunchst 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 Administrationsoberflche an der spteren Webseitenstruktur
aus. Somit wird es mglich, 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 fr Bilder, Dokumente, Berechtigungen und natrlich fr weitere Unterebenen. Diese Struktur wchst spter
dynamisch mit der konkreten Webseitenstruktur mit.
Die Struktur verbietet aber nicht die Verwendung von Medien aus anderen Ebenen, dies ist
ohne Beschrnkung mglich. Neben den dynamischen Ebenen und deren Bibliotheken fr Bilder und Medien existieren einige Systembibliotheken. Innerhalb von Systembibliotheken werden Inhalte und Informationen gespeichert, die
keiner Ebene direkt zugeordnet werden knnen. So verwaltet zum Beispiel die Bibliothek
Seiten- und Webvorlagen die verschiedenen Rahmen- und Seitenlayouts. Weiterhin stehen unter
anderem eigenstndige Bibliotheken fr CSS/
JS-Dateien und layoutspezifische Bilder bereit.
2/2014

Diese Daten sowie alle dynamischen Inhalte werden in einer Datenbank gespeichert. Abhngigkeiten zum Dateisystem sind nicht vorhanden. Das erleichtert die Einrichtung des Systems, da keinerlei Zugriffsrechte auf das Dateisystem bentigt werden. Somit beschrnkt sich
das Backup- und Recovery-Szenario auf die Sicherung der Datenbank. Auch Umzge auf eine
andere Serverhardware sind einfach mglich.
Weiterhin erlaubt diese Architektur die Realisierung von Hochverfgbarkeitsszenarien, indem
zum Beispiel der SQL-Server ber Log-Shipping
gespiegelt wird (Bild 2).
Auf der Web-Frontend-Seite kann eine zustzliche 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
mgliche Konfiguration.
Bei der Verwendung von Azure-Servern ist lediglich zu beachten, dass die Server in der gleichen Region angesiedelt sind. Ansonsten entsteht unntiger 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 Verfgung:
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
trationsoberflche (Bild 4) relativ einfach mglich. Dabei ist allerdings zu beachten, dass eine leistungsfhigere Maschine zustzliche 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 abhngig vom
aktuell angemeldeten Benutzer und seinen Berechtigungen. Darber hinaus gibt es auf der
rechten Seite eine kleine Statistik ber Seitenzugriffe und zu den verwendeten Browsern.
ber die linke Navigation knnen 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 unabhngig von einer konkreten
Ebene verwaltet werden knnen. Ebenso werden hier alle globalen Systemeinstellungen verwaltet.
Der zweite Bereich enthlt alle Bibliotheken
und Einstellungen, die jeweils zu einer Ebene
gehren. Unter dem Bereich Konfiguration und
Einstellungen finden sich die allgemeinen Einstellungsmglichkeiten, 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 knnen alle Nachrichten eingesehen werden, die zum Beispiel ber ein Kontaktformular gesendet wurden. Der Bereich Layouts und Ressourcen enthlt
alle wesentlichen Bibliotheken fr die Ablage
von Layout-Informationen fr Rahmen- und
Seitenvorlagen.
Der letzte Punkt Systembibliotheken ermglicht
die Verwaltung von CSS- und JavaScript-Dateien, Gadgets und bersetzungsbeschriftungen.
Wie diese einzelnen Bibliotheken zusammenspielen, wird im weiteren Verlauf deutlich. Die
verfgbaren Punkte innerhalb der linken Navigation sind wiederum von den Berechtigungen
des aktuell angemeldeten Benutzers abhngig.

Einrichten einer Seite


Nachdem die Administration kurz berflogen
wurde, geht es nun darum, eine neue Webseite,
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 heit: 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" />

Anschlieend muss die Datenbank vorbereitet werden. Derzeit steht dafr ein SQL-Skript
bereit, das die notwendigen Datenbankobjekte
und initialen Daten bereitstellt. Am einfachsten
kann das Skript direkt im Microsoft-SQL-Server-Managementstudio geffnet und auf einer
bestehenden Datenbank ausgefhrt werden. Je
nach Umgebung werden allerdings noch weitere Datenbankobjekte fr die Verwaltung von Benutzerdaten und Berechtigungen bentigt. Soll
Jano-CMS die Rollen und Benutzer selbst verwalten, muss das zustzliche Skript jano-cmsmembership.sql ausgefhrt werden. Dieses installiert die notwendigen Objekte fr die interne Benutzerverwaltung. Die Installation kann
in der gleichen oder in einer separaten Datenbank erfolgen.
Alternativ kann auch der eingebaute Provider fr 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 mssen innerhalb der web.
config-Datei diese befindet sich im Wurzelverzeichnis des zuvor eingerichteten Webs im IIS
die Verbindungsinformationen an die Umgebung angepasst werden. Fr jede Verbindungszeichenfolge sind die Werte fr 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 zunchst 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 Administrationsoberflche 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 untersttzt werden sollen. Dazu kann
am einfachsten der Link in der entsprechenden
Meldung im oberen Dashboard-Bereich ange2/2014

whlt werden.
Daraufhin wird
die
Sprachenverwaltung geladen. ber die
Schaltflche Neuer Eintrag muss
nun mindestens
eine Sprache angegeben werden.
Dabei ist zu beachten, dass nur
eine Hauptsprache mglich 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 Sprachuntersttzung deaktiviert werden. Den entsprechenden Punkt dazu
findet man in dem Bereich Konfiguration und Einstellungen. ber die Checkbox Mehrsprachigkeit
aktivieren wird die Sprachenuntersttzung gesteuert. Als Nchstes 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 fr die Anlage einer neuen Ebene. Auf der ersten Registerkarte sind zunchst die Werte fr Name, URL Bezeichnung und
Einbeziehung in die Navigation von Bedeutung.
Auf der Registerkarte Darstellung muss festgelegt werden, welches
Layout fr die bergreifende und welches fr die Detaildarstellung
verwendet
werden soll. Da bisher
keine eigenen Layouts
erstellt worden sind,
kann hier derzeit nur
eines der eingebauten
Layouts ausgewhlt
werden. Sind all diese
Angaben gettigt 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 fr diese Seite noch keine erste Version existiert, zeigt das
CMS die Vorschau der Seite an. ber die entsprechenden Schaltflchen 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 erlutern, wie das
bestehende Layout an eigene Bedrfnisse angepasst werden kann. Als Erstes soll das Rahmenlayout ein wenig verndert werden. Dazu muss
wiederum die CMS-Administration aufgerufen
und der Punkt Vorlagen verwalten in der Kategorie Layouts und Ressourcen angesteuert werden.
ber die Schaltflche Neue Rahmenvorlage wird
zunchst eine vollstndige neue Rahmenvorlage angelegt. Im ersten Register mssen 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
eingefgt (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 Beschrnkungen. Einige Referenzen und Steuerelemente mssen jedoch auf der Vorlage zwingend vorhanden sein,
da ansonsten nicht alle Funktionen auf der Seite bereitstehen. Dazu gehren auch die verlinkten CSS- und JavaScript-Ressourcen, die ber
JSForAuthenticatedUser beziehungsweise CSSForAuthenticatedUser eingebunden wurden. Zu
den wesentlichen Steuerelementen gehren die
beiden folgenden:
@Html.Partial("_PageVersionInfo"),
@Html.Partial("_AdminConsole").
Das erste Element ist fr die Ausgabe der Seiteninformationen zustndig, das zweite fr die
Bereitstellung der Aktionsschaltflchen und
das Aktionsmen. Fehlen diese Elemente, kann
die Seite nicht in den Bearbeitungsmodus geschaltet werden. Neben den CMS- spezifischen
Steuerelementen stehen noch weitere bereit. Dazu zhlen unter anderen der Login-Bereich, die
Haupt-Navigation, die Kontext-Navigation und
das Seiten-Logo.
2/2014

backend
Diese knnen ber die Auswahlliste Steuerelement einfgen einfach eingearbeitet werden. Eigene CSS- und JavaScript-Dateien lassen sich
ber die linken Auswahllisten dem Layout hinzufgen. Zuvor mssen jedoch noch eigene JS/
CSS-Dateien im System hinterlegt werden.
Nachdem das CSS eingefgt wurde, wird das
erste div-Tag nach dem body um ein id-Attribut
mit dem Wert MainContent erweitert. Anschlieend kann der Dialog ber die Schaltflche 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 vollstndige Kontrolle ber
das HTML und kann dieses frei gestalten. Weiterhin sind aber auch einige Standardvorlagen
vorhanden, die ohne HTML-Kenntnisse direkt
verwendet werden knnen.

Seitenvorlagen
Zum Abschluss soll noch eine neue Seitenvorlage erstellt werden. Dazu ist wieder der Bereich
Vorlagen verwalten aufzurufen. Fr die Neuanlage einer Seitenvorlage ist die Schaltflche 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 (Bild12)
anstelle einer reinen Textflche. Eine Vorlage
besteht in der Regel aus einer HTML-Struktur
und Platzhaltern fr dynamische Inhalte. Das
Jano-CMS verwendet Feldsteuerelemente als
Platzhalter fr Inhalte. Diese knnen der Vorlage ber die rechte Toolbar-Schaltflche hinzugefgt werden. Es stehen verschiedene Feldsteuerelemente bereit, die sich in unterschiedlicher
Weise auf der Seite im Bearbeitungsmodus darstellen, wie spter zu erkennen ist. Das Listing 3
zeigt ein einfaches Beispiel einer Seitenvorlage.
Nachdem die neue Vorlage im System gespeichert wurde, kann diese fr neue oder beste-

hende Seiten verwendet werden. Fr einen Test


kann nun die Startseite der neuen Webseite aufgerufen werden.
Zunchst muss die Seite ber die Schaltflche
Seite bearbeiten in den Bearbeitungsmodus geschaltet werden. Auf der rechten Seite ist dann
ber die Auswahlliste Vorlage der Wechsel zu einer anderen Seitenvorlage mglich. Die neue
Vorlage enthlt jetzt alle definierten Platzhalter.
Wie hieran auch gut erkennbar ist, besitzt jeder
Platzhalter unterschiedliche Funktionen. Neben
den hier verwendeten stehen noch weitere fr
zum Beispiel Bilder, Dokumente, Links, TwitterMeldungen et cetera bereit. Auf gleiche Art und
Weise werden auch Online-Formulare mit den
dazugehrigen 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 Erweiterungsmglichkeiten. Die Installation erfordert derzeit noch ein wenig Windows-Server-Know-how, was sich aber in Grenzen hlt. Durch die Ablage aller Inhalte in einer Datenbank sind Datensicherungen schnell
und einfach mglich. Dank der offenen Schnittstellen und Erweiterungsmglichkeiten knnen
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 Ingenieurbro 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
ttig.
Inhalt
Combit List & Label 19 Reportgenerator.

Die Designerfunktionalitt ist in


lokalen und Webanwendungen
nutzbar (Bild 1)

114

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. Zahlenwsten haben in der Regel weniger Aussagekraft als
die Ergebnisse statistischer Berechnungen. Und
statistische Berechnungen lassen sich wiederum
anschaulicher mit Geschfts- und Prsentationsgrafiken visualisieren.
ber Diagramme erfassen Sie Ergebnisse einfach und heben bestimmte Werte hervor, ohne
die zugrunde liegenden Daten im Detail selbst
auszuwerten. Bei der Datenverteilung bentigen Sie nicht nur sinnvolle und gngige 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, leistungsfhige Komponente fr den Berichtsentwurf und die Integration von Berichtsfunktionen in eigenen Anwendungen zu nutzen, die
alle bentigten Anforderungen bereits abdeckt
und eine Komponente fr den Entwurf und die
Bearbeitung von Berichten beinhaltet.
Der leistungsfhigste 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 ausschlielich 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 Funktionalitt
zu. ber den Designer arbeiten Sie und der Programmanwender interaktiv mit dem Berichtsgenerator.
Mit spezifischen Quelltextanweisungen nutzen Sie auch im Hintergrund Berichtsfunktio
nen und fhren bestimmte Aktionen durch.
Webanwendungen werden serverseitig verwaltet. Hier werden die Funktionen fr 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 zugehrige Webdesigner-Komponente, die die Designerfunktionalitt in gngige 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 Vorgngern, mit programmierbaren Datenbanken (zum Beispiel Access),
Skriptsprachen (zum Beispiel VBA, LotusScript) sowie nicht mehr weiterentwickelten Programmiersystemen (zum Beispiel Visual Basic 6.0) verwendet werden.
Fr COM-basierte Entwicklungssysteme stehen ActiveX-Komponenten fr
die Anbindung bereit. .NET-Sprachen
greifen ihrerseits ber .NET-Komponenten sowie Steuerelemente der Windows
Forms auf den Berichtsgenerator zurck,
die ber das WindowsFormsHost-Steuer
element auch in WPF-Anwendungen eingebettet werden knnen. Spezielle Komponenten
fr moderne Anwendungen, die ber den Windows App Store bereitgestellt werden, stehen
derzeit allerdings nicht zur Verfgung.
Fr Delphi gibt es eine angepasste VCL-Komponente. Per JNI (Java Native Interface) wird die
Komponente an Java gebunden. Fr alle Programmiersprachen, fr die keine spezialisierten Komponenten bereitstehen, nutzen Sie die
Funktionalitt ber eine gesonderte DLL und
zugehrige API-Deklarationen. Deklarationsdateien liegen fr eine groe Anzahl von Sprachen
vor. Fr nicht direkt untersttzte Sprachen definieren Sie die bentigten Deklarationsanweisungen sofern diese Sprachen API-Aufrufe untersttzen auch selbst.
Prinzipiell gilt: Insbesondere ltere Entwicklungssysteme mssen Sie unter Windows 8 und
8.1 gezielt im Administratormodus ausfhren
(zum Beispiel Access, VB6), da ansonsten Fehler bei der Ausfhrung 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 zugehrigen Dialog das
Kontrollfeld In Zukunft nicht mehr anzeigen und besttigen mit OK.
Wrden Sie eine eigene Komponente
ausschlielich fr die von Ihnen verwendete Entwicklungsplattform und Programmiersprache umsetzen, untersttzt
List & Label alle gngige Entwicklungssysteme und Programmiersprachen. Sie
haben somit den Vorteil, dass Sie die
Hauptfunktionalitt auch dann weiterhin zur Verfgung haben, wenn Sie spter 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 verfgbar:
Standard: Diese Edition liegt als reine 32-BitKomponente vor. Sie bietet einen integrierten
und frei verteilbaren Berichtsdesigner mit zugehriger und ebenfalls verteilbarer Dokumentation und untersttzt 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 untersttzt alle Entwicklungsumgebungen und Programmiersprachen. Mit einem gesonderten Konverter sind Berichte von Crystal Reports (VS2010)
berfhrbar.
Professional: Diese Edition bietet neben der 32Bit- auch eine 64-Bit-Untersttzung an. Sie beinhaltet alle Funktionen der Standardkomponente. Auerdem stehen erweiterte Barcodes
(Balken- oder Strichcodes) bereit. Ein DOMModell erlaubt es, Projekte nicht nur ohne Designer zu erzeugen, sondern auch zu verndern.
Die Anzahl der untersttzten 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, fllen 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
sttzung

Alle gngigen 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 fr IE, Firefox und Chrome

Dokumentation

Designerhandbuch (373 Seiten) und Programmierreferenz (circa 434 Seiten)

Handbcher 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, Flchen, 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


gngigen 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 (fr 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 fhren 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 gngigen Webbrowsern untersttzt

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

Fr alle Versionen verfgbar

116

2/2014

backend
Enterprise: Die Enterprise-Edition bietet alle

Leistungsmerkmale der Professional-Variante. Die erweiterten Funktionalitten liegen bei


dieser Edition im Web (Windows Azure, Amazon Web Services, Cloud Computing) und in
einem verbesserten Support. Darber erhalten
Sie zudem Subscription-basiert Informationen
zu Nachfolgeversionen, frhen Zugriff auf die
Betas der Nachfolgeversionen sowie vergnstigte Schulungen. Die Enterprise-Edition ist zudem die einzige Edition, die das Definieren
von Diagrammen ber Shapefiles fr die Geovisualisierung erlaubt und auerdem die Einbindung des Formelassistenten in eigenen Anwendungen untersttzt. 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
DataProvider, DataSource, ObjectDataProvider,
OleDbConnectionDataProvider, OracleConnectionDataProvider, SqlConnectionDataProvider,
XmlDataProvider).
ber den Datenprovider DataProviderCollection fhren Sie die Dateninhalte mehrerer getrennter Datenprovider in nur einer Datenquelle
zusammen. Mit einem neu eingefhrten RESTDatenprovider (Representational State Transfer)
binden Sie Daten ein, die protokollbasiert ber
Webanfragen zurckgeliefert werden.
REST findet Anwendung in CMS-Systemen,
Webanwendungen sowie webbasierten Datenbankapplikationen. Der ebenfalls neu eingefhrte OData-Datenprovider macht Internetdaten, die auf dem Open Data Protocol basieren,
fr List & Label verfgbar.
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 zugehrige 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 gngiger 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 spter 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 zustz
liche Anwendung aus (Bild 5)

Designer und Viewer


Ein Kernelement von List & Label ist der mitgelieferte und in Anwendungen ohne zustzliche
Lizenzgebhren 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 fllen 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
Handbcher
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 untersttzen mehrere
Ebenen, greifen auf Designschemas mit vorgegebenen
Farbgruppen zurck, untersttzen 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 fhren 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
(Bild4). 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 Funktionalitt. Sie blenden nicht nur bestimmte Fensterelemente aus, sondern sperren gezielt Menbefehle, 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 Bedrfnisse 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 Blttern und Zoomen sowie das Suchen nach Begriffen in den angezeigten Berichten.
Ferner bietet der das Programm eine Exportfunktion fr ausgewhlte Dokument- und Grafikformate (PDF, TIF, TXT, EMF, JPG, PNG und
XPS) (Bild 5). Der Viewer selbst wurde gegenber 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 erschlieen. Der Anwender
oder Entwickler, der einen Bericht gestaltet,
muss fr 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 Spaltenkpfe umsortieren oder aber innerhalb von
Berichten mit wahlweise ein- und ausklappbaren Bereichen arbeiten (Bild 6).
Sammelvariablen sind neue Variablen, die
wie herkmmliche Benutzervariablen eingefhrt werden. Benutzervariablen erlauben es,
Werte und Ausdrcke fr eine sptere, mehrfache Verwendung zu sichern, wobei jede Benutzervariable einen eindeutigen Namen erhlt und ber Funktionen (zum Beispiel numerische, mathematische oder auch Datums- und
Zeichenkettenfunktionen), Operatoren sowie
Bedingungen aufgebaut wird. Sammelvariablen bieten gegenber den Benutzervariablen eine erweiterte Funktionalitt an.
Darber fassen Sie Daten zustzlich zusammen, ordnen die
Daten in Kategorien ein oder
versehen diese mit zustzlichen 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 beschrnkt. Berichtsparameter werden ber einen Bezeichner eingefhrt und ber
Berichtsparameter bearbeitet. Per Dialog weisen Sie die Datenquelle, das Datenfeld, die Sortierung, einen Filter oder auch eine Formel fr
den anzuzeigenden Wert zu (Bild 7).
Berichtsparameter platzieren Sie wie Felder in
Berichte. In Formeln setzen Sie die Berichtsparameter zudem wie herkmmliche Variablen ein.
Berichtsparameter knnen zudem voneinander
abhngig sein und stehen, da direkt ber den
Designer definiert, auch beim Endanwender der
Anwendung zur Verfgung, 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 Prsentationsgrafiken zum Einsatz. Neu in der Version 19
ist das Trichterdiagramm, mit dessen Hilfe Sie
Daten veranschaulichen, die einen trichterfrmigen 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 Hhe nebeneinander gesetzt, wobei die Breite abhngig vom dargestellten Wert
ist. In den neuen Mischdiagrammen kombinieren Sie schlielich Balken- und Liniendiagramme, um ber die Linien beziehungsweise Ausgleichsgrade bestimmte Werte oder auch Mittelwerte hervorzuheben (Bild 8).
Neu in List & Label 19 ist die Untersttzung
von Shapefiles (standardisiertes Vektorbeschreibungsformat, fr zum Beispiel Landkarten, Sitzplne mit Datenanbindung), ber die Sie Geo
daten visualisieren.
Diese Funktionalitt steht ausschlielich in
der Enterprise-Edition zur Verfgung. Neben
vordefinierten Shapefiles (zum Beispiel Karten
der Welt und von Europa, Nordamerika, Asien,
Sdamerika, 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 Verknpfung der Geometrie- mit den Sachdaten genutzt wird. Hinzu
kommen optionale Dateien. Im Internet stehen
diverse Tools kostenfrei zur Verfgung, 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 fr die Enterprise-Edition bereitgestellte Untersttzung von
Shapefiles, sondern sind auch die in allen Editionen nutzbaren Berichtsparameter und Sammelvariablen, mit deren Hilfe Sie Berichte interaktiv gestalten.
Am Komfort, in der Stabilitt, den Unmengen
an Beispielprogrammen sowie in der Bedienung
bleiben keine Wnsche offen. Bleibt abzuwarten, wie sich List & Label in der nchsten Version zeigen wird. Wird es echte Steuerelemente
fr WPF und die moderne Oberflche oder gar
moderne List & Label-Apps aus dem Windows
App Store geben?
[mb]
Zu den neuen
Diagrammtypen
zhlen 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 Prsentation an und man mchte ein paar Fotos ber den Beamer vorfhren.
Allein die passende Prsentations-Software fehlt. Von Timo Krotzky

Autor

Timo Krotzky
ist Diplom-Bioinformatiker und
am Institut fr Pharmazeutische
Chemie der Uni-Marburg ttig.
Mit Web Development und der
Webserver-Administration beschftigt 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 erfllt nicht die eigenen Anforderungen oder lsst sich nicht genug anpassen. Die
schnelle Suche nach einer geeigneten Software
gestaltet sich schwierig, weil sie sehr einfach zu
bedienen sein soll und darber hinaus den eigenen Vorstellungen entsprechen muss.
Zum Glck kann man als Webentwickler aber
auch ohne groen Aufwand selbst eine schne Diashow fr den Browser implementieren.
Dazu braucht es nicht einmal Frameworks wie
jQuery, da man mit den Bordmitteln von PHP
und JavaScript problemlos auskommt. Natrlich knnte jQuery verwendet werden, um etwa Bilderwechsel durch ein berblenden aufzupeppen. Der vorliegende Artikel soll sich aber
auf ein Minimalbeispiel beschrnken.

Voraussetzungen
Voraussetzung fr eine Diashow, die etwa noch
das Datum zu jedem Foto anzeigt, ist, dass diese
Daten auch einfach fr 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 natrlich 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 groer Bedeutung. Wichtig ist
nur, dass ein Webbrowser dieses Format anzeigen kann.
Die Diashow wird, wie ein normaler Webservice auch, als ein Zusammenspiel von PHP,
JavaScript und HTML realisiert. Sehen wir uns
zunchst das sehr einfache HTML-Grundgerst
der Webseite in Listing 1 an.
In der Style-Definition von body im Body-Tag
selbst wird fr einen schwarzen Seitenhintergrund gesorgt und zudem dafr, dass die Fotos spter direkt an den Seitenrndern anliegen
knnen und keine unntigen Abstnde entstehen. Der Body enthlt lediglich zwei div-Container, wobei der erste spter das Bild und der
zweite das Datum enthalten wird. Das Datum
wird in weier Farbe mit Schriftgre 60px mittig auf dem Foto platziert.
PHP ist nun dafr zustndig, alle Bilder in
den Unterordnern von fotos zu sammeln (Listing2). 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 anschlieend
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-Grundgerst

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 knnen wir uns mit dem


JavaScript-Code befassen, der

fr das eigentliche Anzeigen


und Umschalten der Bilder bentigt wird. Dazu wird
eine
Funktion change_pic implemen
tiert, die das nchste 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 zunchst wird ein zuflliger Array-Index rand erzeugt, der spter dafr verwendet wird, die src-Property des neuen ImageObjekts zu aktualisieren. Sobald dies passiert,
sollen noch diverse weitere Aktionen ausgefhrt
werden, weshalb eine Funktion auf das onloadEvent des Objekts gelegt wird. In dieser Funktion wird zunchst das Datum des Fotos ermittelt und im deutschen Format in den div-Container dateDiv geschrieben. Anschlieend wird die
src-Property von diashowImg auf das neue Bild
gendert. Im dritten Schritt muss nun noch dafr 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 mglich ausfllen. Deshalb wird das Bild
nach Dreisatzregeln in Hhe und Breite entsprechend neu skaliert. Dies passiert im if-Fall fr ein
Bild im Querformat und im else-Fall fr ein Bild
im Hochformat. In der letzten Zeile des Skripts
wird dann noch ein Intervall erzeugt, das alle
fnf Sekunden die Funktion change_pic aufruft
und damit fr 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 lsst sich via PHP und
JavaScript 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 liee 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 fr Entwickler

Bilderwerkstatt
Bildmontagen, bei denen mehrere Objekte auf einer Flche vereint werden, sind ein gngiges Mittel
des Webdesigns. Dabei gibt es unterschiedliche Formen. Von Katharina Sckommodau

Autorin

Katharina Sckommodau
arbeitet nach dreijhriger Ttigkeit als Redakteurin fr das
Fachmagazin MACup nun als
freiberufliche Autorin, Grafikerin
und Dozentin, unter anderem fr
die Akademie der Bayerischen
Presse und fr Macromedia. Sie
verffentlicht regelmig Beitrge in renommierten Fachzeitschriften und verwirklichte mehrere Buchprojekte zu verschiedenen Grafik-Themen.
Inhalt
Grafik fr 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

ebseiten unterscheiden sich von


Print-Produkten in einem wichtigen Punkt: Die Verweildauer des
Betrachters ist auf der einzelnen Seite
wesentlich krzer. Der Leser erwartet hier keine lngeren Texte, sondern
sucht zunchst 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 unabhngig 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 fr
bei der auch die Lichtverhltnisse bercksichwelche App er sich entscheidet, hngt stark vom
tigt werden mssen: Bei nachtrglich ins Bild
ersten Eindruck ab. Bilder dienen also im digieingefgten 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 Flche. 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 ergnzen, dass sie sich realistisch in das Gesamtbild einfgen. So zeigt beispielsweise der Webauftritt des iPhone-Readers von Ecoki vor
dem Hintergrundbild, einer
ansprechenden Landschaft,
einen nachtrglich montierten Balken, auf dem ein
iPhone und eine Tasse Tee
zu sehen sind (Bild 2).
Fotografisch wre diese
Aufgabe kaum zu lsen, da
es physikalisch nicht mg-

Bildmontagen als Hintergrund


Bildmontagen werden hufig 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 ganzflchige Hintergrundbilder
whrend des Ladevorgangs einer Spiele-App,
wie es beispielsweise die Fuballmanager-App
Top Eleven zeigt (Bild 3).
Sieht der Anwender lediglich den Hinweis
Please wait, besteht die Gefahr dass er sich in
der gefhlt zu langen Wartezeit der Konkurrenz
zuwendet. Hier unterhlt eine Collage den Wartenden mit sehr unterschiedlichen Bildelementen, die grafisch ansprechend miteinander kombiniert sind: Im Vordergrund ist das Gesicht des
portugiesischen Fuballtrainers Jos Mourinho
zu sehen. Mit einem Effekt versehen, der von
Bicolor nach unten in Schwarzwei bergeht,
wurde das Portrt an die weiteren Bestandteile der Montage angepasst; einem Bild des Spielfelds im Hintergrund, das zustzlich von der
Signatur und einem weiteren Foto einer Spiel
situation berlagert wird.
2/2014

beyond dev

Die Spiele-App fr Android und iPhone Top Eleven


zeigt eine Collage im Hintergrund, whrend das Spiel
ldt (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 Geschftsseiten. Zeigten verschiedene Webauftritte frher mit groflchigen 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 Flche einer App oder der
Webseite grafisch gestaltet werden, bieten sich
feststehende Flchen fr Textelemente an. Ein
solcher Texthintergrund kann eine Montage aus
einzelnen Bildausschnitten, eigens dafr generierten 3D-Elementen und Verlufen sein. Im
Idealfall nimmt die Flche das Thema der Bilder
auf, die zustzlich auf der Flche erscheinen. So
reserviert beispielsweise die Webseite Baederland.de den unteren Bereich fr alle Text-Informationen. Als feststehenden Hintergrund hat
der Designer eine blaue Flche mit dezentem
Verlauf gewhlt, deren Abschluss nach oben ei-

Baederland.de kombiniert ein feststehendes Bildelement unten fr 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 Farbflche vor einem bunten Hintergrund
(Bild 5)

ne plastische Wasseroberflche bildet. Die da


rber eingeblendeten Bilder fgen sich harmonisch in diese Design-Struktur ein. So entsteht
eine grafisch gelungene Struktur fr alle notwendigen Informationen (Bild 4).

Schnelle Lsung: Scherenschnitt


Sollen verschiedene Objekte realittsgetreu in
einen neuen Hintergrund eingebaut werden, ist
viel Feinarbeit im Bildbearbeitungsprogramm
notwendig. Die einzelnen Elemente mssen
sauber freigestellt werden, Schatten und Lichter mssen stimmen.
Nimmt man jedoch nur den Umriss eines
Objekts und fllt ihn mit Farbe meist wird
Schwarz gewhlt , so besteht diese Form vor
fast jedem Hintergrund mit Bravour. Bei

Formen des Portrts


Viele Startseiten zeigen unterschiedliche Formen
eines Portrts.

hingegen zeigt nur die Anstze der Schulter. Zudem kann ein Portrt aus unterschiedlichen Per
spektiven aufgenommen werden. Bei einer frontalen Aufnahme ist der Oberkrper zwar leicht ge-

dreht, das Gesicht jedoch dem Fotografen direkt


zugewandt. Das Profil zeigt lediglich eine Seite
des Kopfes. Dazwischen liegen das Halbprofil soEin Portrt muss nicht immer nur das Gesicht des
wie das Dreiviertelprofil.
zu Portrtierenden zeigen. Ist der kompletIn der Regel befindet sich bei allen vier
te Krper zu sehen ob stehend oder sitPortrt-Arten die Kamera ungefhr auf Auzend spricht man von einer Ganzfigur. Die
genhhe unsere gewohnte Ansicht, der
Abbildung bist zum Knie wird Kniestck geFotograf ist auf der gleichen Hhe wie das
nannt. Beim Hftbild ist die Figur bis zum
Model. Wird das Portrt hingegen von oben
Schritt zu sehen, die Halbfigur hingegen
aufgenommen, blickt der Fotograf gewisendet auf der Hhe der Taille; meist sind
sermaen auf sein Model herab. Die Bildie Arme und Hnde ebenfalls (abgewinder hingegen, die von unterhalb der Augenkelt) im Bild. Ist im unteren Bereich noch
linie aufgenommen wurden, zeigen die Perdie Hlfte des Oberkrpers zu sehen, han- Portrt-Ausschnitte; von links nach rechts: Bste, Bruststck,
son grer, der Betrachter muss zu seinem
delt es sich um ein Bruststck, die Bste Halbfigur, Hftbild, Kniestck und Ganzfigur
Gegenber aufblicken.

2/2014

123

beyond dev

Die Outline eines freigestellten


Portrts dient als Rahmen fr
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 groe 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
knstliche 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 Berhrung des Screens
ber das Bild (Bild 5).

Montagen dieser Art funktionieren jedoch nur


dann, wenn einige Gestaltungsregeln eingehalten werden. Bewegte Hintergrundbilder sollten
ruhigere Flchen zeigen und eine andere Farbigkeit als die Bildausschnitte, die darber 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
gesttigt. Zudem wurde eine leichte Unschrfe ber den Hintergrund gelegt. Die Montage
tuscht damit eine geringe Schrfentiefe vor.

Tipps zur Umsetzung


Sollen mehrere Bildausschnitte zu einer Collage zusammengefgt werden, mssen 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 fr iPad/


iPhone zum Produkt Hero 3
Black Edition zeigt den korrekten
Krperschatten (Bild 8)

124

Mit den Kanten eines ausgewhlten Objekts


lsst sich jedoch noch mehr anstellen. Werden
diese als Rahmen verwendet, lassen sie sich mit
unterschiedlichen Bildern oder auch Texten fllen. Ein gelungenes Beispiel dafr liefert Bild 6:
Hier bernimmt der Designer Jim Ramsden die
Kontur seines freigestellten Portrts und verwendet diese als Rahmen fr zwei weitere Fotos. Eine spannende Sache; zwei unterschiedliche Informationen verschmelzen zu einem Bild:
Die Form von Ramsdens Portrt, 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 mglich, ein
einzelnes Bild oder eine ganze Bilderserie als Diashow per Ken Burns
zu animieren.
Animierte Bilder knnen 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
rber 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 verhlt 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 mssen 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 Rndern. Abendsonne hingegen generiert lange Schatten, die, je
weiter sie vom schattenspendenden Objekt entfernt sind, eine unschrfere Kante zeigen. Auch
der Krperschatten, also die dunklen Schattenbereiche auf dem Objekt, mssen 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 fr 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 lsst sich sehr
einfach mit verschiedenen Programmen erstellen. Fr
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 Krperschatten auf dem Surfer muss jedoch mit der Lichtstimmung in der
Landschaft bereinstimmen.

Auswhlen und Freistellen: Details, die auf einen neuen Hintergrund gesetzt werden sollen, mssen zunchst freigestellt werden. Annhernd jedes Bildbearbeitungsprogramm bietet dafr die notwendigen Werkzeuge, etwa einen Zauberstab fr 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 Whlen das Schnell
auswahlwerkzeug, das automatisch zusam-

menhngende Bildbereiche und deren Kanten


erkennt (Bild 9).
Verstmmelungen 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 lschen Bereiche eines Elements, die sie fr die Collage als nicht notwendig erachten. So geben sich beispielsweise auf
der Webseite Pfotenhelfer-ev.de Mensch und
Hund die Hand beziehungsweise Pfote. Diese
Krperteile 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 gewhltem Bildbearbeitungsprogramm, unterschiedliche Filter
und Funktionen. Eine weitere und weitaus
schnellere Mglichkeit besteht darin, die fertige Montage in einer Farbe nach Wahl einzufrben (Bild 11).

Fazit

Freistellen mit Adobe Photoshop CC: Das Schnellauswahlwerkzeug erkennt die Flchen und Kanten der zu
whlenden 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 Flche ablenken. Handelt es sich um eine Montage fr eine
App, ist zudem die kleinere Flche des Ausgabegerts zu beachten. Detailreiche Collagen wirken auf einem Smartphone nicht so gut wie etwa
auf der greren Flche eines Tablets.
Hier bietet es sich an, fr die verschiedenen
Ausgabegerte unterschiedliche Versionen zu
planen: Gibt es zum Beispiel eine flchenfl
lende Collage fr den Desktop oder Tablet-Startscreen, knnte die Variante fr das Smartphone
nur einen Ausschnitt daraus zeigen.
[mb]

Die einzelnen Elemente einer


Montage sollten vollstndig
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 nachtrgliche Frbung der gesamten
Montage fgt sich der montierte
Mond recht glaubwrdig in die
Szene ein (Bild 11)

125

beyond dev
Source Control Management (SCM)

Wiederholbarkeit
Die Wiederholbarkeit von erfolgreichen Softwareprojekten ist kein zuflliges 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

ielen Projekten wohnt ein eigener Charakter inne, der auch durch das Team geprgt
wird, das die Herausforderung annimmt, gemeinsam die gestellte Aufgabe zu bewltigen.
Agile Methoden greifen diese Erkenntnis auf
und bieten potenzielle Lsungen, um IT-Projekte erfolgreich durchfhren zu knnen. Ein
wichtiges Konzept, das allen Strategien zugrunde liegt, besteht darin, mglichst 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 marktfhrenden 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 gefhrten Diskussionen ber Vor- und Nachteile von zentralem versus verteiltem Repository sind mittlerweile auf
ein ertrgliches Ma zurckgegangen. Unternehmen haben oft ber die Jahre eine artenreiche SCM-Landschaft aufgebaut. Alte Projekte,
die noch mit CVS versioniert wurden, sind aus
wirtschaftlichen Grnden nicht auf neuere Systeme migiert worden. Ein Update der bestehenden SCM-Systeme hin zu aktuellen Versionen
sollte besonders bei aktiven Projekten regelmig vollzogen werden.
So hat sich beispielsweise bei Subversion ab
der Version 1.5, ein erheblicher Performance
gewinn fr 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 endgltige Entscheidung fr die Verwendung eines speziellen SCM hngt in letzter Konsequenz aber
von der Beschaffenheit des Projekts ab.
So selbstverstndlich die Verwendung von
Versionierungs-Werkzeugen ist, so unklar ist deren optimaler Gebrauch. Denn in der Praxis entstehen dabei vielfltige Fragen:
Was ist die optimale Hufigkeit zur Speicherung der nderungen?
Welche Dateien gehren unter Konfigurationsmanagement gestellt?
Was ist der beste Weg, die Konfiguration kompletter Systeme zu sichern?
Wie knnen verschiedene Versionen einer Datenbank archiviert werden?
Was ist die optimale Ablagestrategie fr binre Daten?
Jeder einzelne Punkt beschreibt einen Teil des
entwickelten Softwaresystems. Eine erfolgreiche Auslieferung des Projekts beinhaltet die
Mglichkeit, 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 mssen sich organisieren.

Ordnung im Repository durch


Branch Models
Branch Models erlauben es, die Implementierung von Funktionalitten in eigene Verzweigungen (Branches) zu kapseln und diese dann nach
Bedarf zu einem Release zusammenzufhren
(merge). Ein geschickt angewendetes
Branch Model gestattet es, zgig relevante Knoten im Revisionsgraphen zu
identifizieren und diese zu einem neuen Knoten zusammenzufhren. Knoten mit Verzweigungen zu einem neuen Release sind fr die Erhebung von
Qualittsanalysen und deren anschlieenden Vergleich von besonderem Interesse. Im Hauptentwicklungsstrang
(Trunk) des SCM werden fest definierte Punkte, die Releases, vorgehalten.
2/2014

beyond dev
Fr jede neue Funktionalitt wird vom trunk
eine neue Verzweigung erzeugt. Alle fertiggestellten Features werden vorerst in einem separaten Feature Branch zusammengefhrt. Fr jedes Release existiert ein eigener Bugfix Branch,
in dem globale Fehler behoben werden. Global
bezieht sich hierbei vor allem auf Lsungen, die
sich aus dem Zusammenschluss mehrere Features ergeben haben. Fehler, die einem konkreten Feature zugeordnet werden knnen, 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 Flexibilitt erlaubt. Es
knnen praktisch alle mglichen Kombinatio
nen von umgesetzten Funktionalitten zu einer
Anwendung zusammengebaut werden. Das gestattet es im Fall einer fehlgeplanten Funktionalitt, diese aus dem Livesystem herauszunehmen oder auf ein spteres Fertigstellungsdatum
zu verschieben (Bild 1).

Konfigurations-Management
Ein weiterer Punkt fr den effizienten Umgang
mit SCM-Systemen ist, im Repository keine Binrdateien wie beispielsweise 3rd-Party Libraries einzuchecken. Dafr gibt es eigene Lsungen
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 Lsung ist unter anderem,
dass die Dimension des Sourcecode-Repositorys in einer angenehm kleinen Gre bleibt, was
wiederum zu kurzen Checkout-Zeiten fhrt. Ein
weiterer Pluspunkt ist, dass auch eigene Artefakte bereits als fertiges Kompilat im Repository
Manager vorgehalten werden knnen.
Das wirkt sich positiv auf die Dauer des
Builds aus und ermglicht das unternehmensweite Verteilen der eigenen Artefakte. Das Bindeglied zwischen Sourcen und binren Artefakten ist die Build-Logik, die den einzelnen Modu-

Hook-Skripts
Hook-Skripts werden meist vor oder nach einem Commit in das SCM ausgefhrt. Sie ermglichen das Ausfhren verschiedenster Aktionen, wie Versenden einer E-Mail, Ersetzen von Tokens oder automatisches
Formatieren des Sourcecodes. Die Skripts knnen in
unterschiedlichen Sprachen geschrieben sein. Bedingung ist, dass ein entsprechender Interpreter auf dem
System vorhanden ist, auf dem das Repository residiert. Um plattformunabhngig zu sein, empfiehlt sich
fr 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, lsst
eine interne Revisionsnummer hochzhlen und
erfordert einen Kommentar. Der Kommentar ist
eine Beschreibung der durchgefhrten Aktion
und sollte stets verstndlich 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 erhlt den entsprechenden Kommentar:

Komponentenbersicht 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 fr abgeschlossene Tickets, deren
Branch wieder in den Trunk berfhrt wird:
[ISSUE-0001] {close} #{MERGE}

Fr 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 Lsung.
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 gehren, 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 fhren 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 berfhren, erlaubt einen Rckschluss auf die bentigte Zeit fr die Umsetzung
der Lsung. Wichtig fr die Akzeptanz und somit auch eine konsequente Nutzung korrekter
Commit-Messages ist eine Untersttzung 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 lsst 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 selbststndig aktualisieren.

Prozessorientierte Workflows

Typische Workflows fr
SCM-Systeme (Bild 4)

128

Hrt 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 mssen, um ihre Arbeit fortsetzen zu knnen. Solche Strungen sind im Arbeitsprozess

nicht nur lstig, sondern bei hufigerem Auftreten auch kostenintensiv. Als eine sehr prakti
kable Lsung fr zerstrte Builds in Teams, die
nicht verteilt arbeiten, dient das Zahlen einer
Strafgebhr in die Kaffeekasse.
Aus Sicht der Open-Source-Community werden andere Lsungen bentigt, da sich schwerlich von weltweit verteilten Entwicklern, die zudem noch in ihrer Freizeit kostenlos arbeiten, ein
Beitrag fr die Kaffeekasse einziehen lsst. Die
Betrachtung der typischen Workflows fr SCM
vermittelt einen besseren berblick in die Thematik und offeriert mgliche Lsungen. Klassische Workflows fr 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 fr dieses Vorgehen konzipiert worden. Durch die starke Verbreitung
von Open-Source-Projekten, in denen sich weltweit verteilte Entwickler zu einem Team zusammenschlieen, haben sich neue Anforderungen
fr Versionierungswerkzeuge ergeben. Dies
war der Auftakt fr die Entwicklung verteilter
SCM-Systeme, deren populrste 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 zunchst 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 mglich 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 Ausprgung 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 knnen. Ein Update des lokalen Repositorys erfolgt ber ein zweites Repository, auf das per read-only zugegriffen werden darf. Die Synchronisation der zentralen Repositories erfolgt ausschlielich zu festgelegten Zeitpunkten durch den Build
Manager. Dadurch wird sichergestellt, dass dem gesamten Team jederzeit eine funktionsfhige Version des
Sourcecodes zur Verfgung steht.
2/2014

beyond dev
Im Jahr 2000 initiierte Brian Chan mit Liferay
(www.liferay.com) eine Open-Source-Java-EEPortallsung, deren Enterprise Edition sich bei
renommierten Unternehmen wie Cisco, Barclays
und TMobile im produktiven Einsatz befindet.
Die Sourcen werden mit Git verwaltet und sind
ber den Anbieter GitHub frei zugnglich. Zudem besteht die Mglichkeit des anonymen lesenden Zugriffs auf die Issue und BugDatenbank sowie eine ausfhrliche Dokumentation.
Die grafische Darstellung offenbart bereits
deutlich, dass der Prozess fr Branch Models
optimierungsfhig 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 fr diesen Fehler fnf 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


gnstigsten Fall handelt es sich um Erweiterungen. Es kommt aber auch vor, dass das bestehende Datenmodell verndert werden muss. In
diesem Fall ist es notwendig, auch die Datenbank unter Konfigurationsmanagement zu halten, damit fr ltere Versionen der Applikation
das zugehrige Datenmodell verfgbar ist.
Der Hersteller Redgate (www.red-gate.de) offeriert mit verschiedenen kommerziellen Tools
eine Mglichkeit, 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 fr viele objektorientierte Programmiersprachen wie
PHP, Java und .NET verfgbar.
Tabellen werden als Entittsobjekte dargestellt, aus denen die Datenbank beim Applikationsstart erzeugt wird. Das Befllen (populate)
der erzeugten Datenbank erfolgt ber ein einfaches SQL-Skript. Der zustzliche Charme dieser Lsung ist, dass das Datenbanksystem je-

Gegenberstellung des Revisionsgraphen mit einem zugeordneten Bugfix (Bild 3)


Diese Annahme wurde durch eine nhere Betrachtung der Commit-Messages des SCM besttigt, wo am 7.11.2012 ein Branch fr den Milestone 1 mit einer Verzweigung vom Knoten
LPS-30792 angelegt wurde, welcher aber keine
weiteren Nachfolger aufweist.
Aus dem Commit-Datum fr LPS-30792, von
dem M1 erzeugt wurde, ergibt sich das ReleaseDatum 1.11.2012 fr M1. Dem steht das offizielle Publishing Date fr M1 gegenber, das in
JIRA mit dem 5.11.2013 gekennzeichnet wurde.
Diese Fakten erschweren nachtrgliche 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 verfgbar 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 Kompatibilitt von Erweiterungen einschrnken kann, weil zugesicherte Eigenschaften nicht vorhanden sind.
Typischerweise kommen moderne Applika
tionen kaum noch ohne eine Datenbank als Persistenzschicht aus. Das bedeute natrlich auch:
Wenn eine Applikation erweitert wird, ist auch
2/2014

derzeit ausgetauscht werden kann. Ein zustzlicher Versionierungsschritt ist nicht notwendig,
da die Datenbank automatisch zu den Entittsobjekten der entsprechenden Revision gehrt.

Kurze Gedanken zur Sicherheit


Neben den bereits aufgefhrten Aspekten ist
auch die Sicherheit nicht zu vernachlssigen.
Das umfasst unter anderem eine ausgefeilte
Nutzerverwaltung, die Schreib- und Lesezugriffe auf das Repository berwacht.
Dieser Aufgabe widmen sich meist kommerzielle Hersteller, die ihren Lsungen einen eigenen Security Layer berstlpen. 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 auerhalb des
hauseigenen Intranets bereitstellen, sollten sich
eventuell auch Gedanken ber die Verschlsselung 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 ttig. Als Deutschlands
erster Trainer fr 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 4KAuflsung (Bild 3)

130

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 Prsident von Samsung Mobile US, hlt die
Konferenzfrhstck neben dem Grand Keynote (Bild 1)
Ballroom fragten sich viele Teilnehmer,
Kein Turtleneck, 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 Erffnung
Days in London im November, der ein Destillat
der Registrierung nie mit so vielen Teilnehmern
dieser Konferenz sein sollte.
gerechnet. Danach erklrte er, was der Samsung
Multi-Konzern ist. Und das hatte es in sich: DieDie Keynote
ser Konzern verkauft nicht nur 250 Millionen GeMit einiger Versptung wurde dann die Konferte aus der Galaxy-Reihe, sondern auch noch jerenz offiziell mit der Keynote erffnet (Bild1).
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 enttuscht. Die
gerte und Beleuchtung im Portfolio. Alles das
Pump-up-Musik vor dem Start blieb auf Zimsoll smart werden. Samsungs System-Kameras
merlautstrke-Niveau. Das Line-up der Fhzum Beispiel laufen bereits mit Android.
rungsriege von Samsung war sehr asiatisch zurckhaltend und ausgesprochen ruhig. Den
Smart TV
Anfang machte G
regory
Tizen, Smart TV, Galaxy Android Roadmap all
Lee. Der Prsident von
das sind Themen. Das Galaxy Gear, die smarSamsung Mobile US gab
te Armbanduhr, wurde nicht explizit erwhnt,
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 heit, soll sich um das
2/2014

beyond dev
Bezahlen und vor allem das Koordinieren von
Tickets oder Eintrittskarten kmmern. Auch
ein eigener Chat-Dienst mit dem Namen Chat
On wurde gezeigt. Der Samsung-eigene Werbemarkt fr 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 Bhne.
Er prsentierte das neue Smart-TV-Top-Modell
mit 4K-Auflsung, 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 luft.
Letzteres wird mit dem 2013/2014-Line-up sogar
per V8-Engine beschleunigt. Fr das Hands-on
wurde Juan Pablo Gnecco (Senior Director of
Samsung Media Solutions Center America) auf
die Bhne geholt. Er zeigte ein Fuballspiel, zu
dem dann weiterfhrende 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 abluft.
Aber neben Multiscreen- und Second-ScreenThemen, die unter dem Namen Convergence
laufen, soll auch der Spielesektor mittels Gamepad-Integration fr Galaxy-Smartphones gangbar gemacht werden. Fr 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 strker im
Enterprise-Markt mitmischen. Ein Angriff auf
BlackBerrys Domne, die gerade einige Erschtterung erhlt. Daher stellte Injong Rhee (Senior
Vice President, B2B R&D Group/Technology)
2/2014

die Sicherheitslsung KNOX vor (Bild 4). Es gebe


fr eine solche Lsung einen groen Markt, sagte er. Nach Samsungs Angaben werden 40 Prozent der Smartphone-Verkufe im EnterpriseBereich gettigt. Auer einem MDM fr Galaxy
Smartphones geht es bei KNOX um eine dem
BlackBerry-Balance hnliche Lsung von Privat- versus Business-Apps. Diese werden in separaten Kontexten ausgefhrt. Mehr dazu sollte in den Sessions gezeigt werden. Denn bereits
die angekndigten 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 knnen.
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 begrt.

Injong Rhee stellt die Sicherheitslsung KNOX vor (Bild 4)

Die Sessions
Ein gut geflltes Programm konnten die Teilnehmer sehen. Bis zu fnf Sessions wurden dabei simultan gezeigt, insgesamt ber 40. Hier
wurde die gesamte Produktpalette abgebildet,
natrlich mit dem Schwerpunkten Smart TV
und Android API. Durch jede Session zu gehen
wrde 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 tatschlich 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 Nchstes macht, daher ist es wichtig hier zu
sein. Auf die Anschlussfrage, ob fr Samsung
entwickelt, wird kam hufig: Ja, die Ger-

David Eun prsentiert 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 fr viele Entwickler schwer, einen
Standard zu finden. Durch die groe Verbreitung von Samsung-Gerten wird hier eine gewisse Sicherheit gegeben. Es wurde auch unter den Teilnehmern diskutiert, ob Samsung das
nchste Nokia ist.
Die Gerte laufen, sind ordentlich verarbeitet
und bezahlbar. Also das, was auch Nokia in den
spten 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 Kstchen
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-Lsung auf
Samsung-Gerten, die mit dem neuen KNOXSicherheitsmodell zusammen lief.
Die blichen Advertisement-Agenturen waren natrlich auch vertreten. Auerdem 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 fr Publikum


bei den Austellern (Bild 7)

132

Wie es sich fr eine Konferenz gehrt, hat


Samsung ein Social Event am ersten Abend organisiert. Dabei wurde das Exploratorium am
San Francisco Pier 15 angemietet. Dies ist eine
Art groe Mitmach-Erlebnis-Ausstellung.
Dabei werden viele physikalische Gesetze spielerisch erklrt. Diese konnten alle entspannt und unter Ausschluss der normalen Besucher ausprobiert werden. Auerdem wurde
ein wirklich groartiges Catering geboten, das
von Vegan bis fleischlicher Kche keine Wnsche offen lie.
Neben dem leiblichen Wohl wurde mit Damon Wayans ein bekannter Schauspieler aus der
amerikanische ABC-Serie My Wife and Kids
fr die intellektuelle Unterhaltung prsentiert.

Er las ein Poem auf die elektronische Weiterentwicklung von Unterhaltung und wie es in Zukunft in den Medien aussehen knnte. Danach
sprach der CEO von Samsung noch einmal kurz,
und der aktuell in SF angesagte DJ Cams sorgte fr die musikalische Unterhaltung am Abend.

Trends
Sicherlich stellt sich nach den zwei Tagen die
Frage, was sich an Trends ablesen lsst. 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 fr Smart TVs auf den Webstandards
HTML5, CSS und JavaScript fut 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 pltzlich das Tablet zum Inventar fr 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 fr die Entwickler. Ob RWE Smart Home oder Philips Hue
oder Samsung Intelligence Fridge, alles ist derzeit proprietr. 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 fr 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 natrlich ein Vendor-Lock-in geben. Aber dieser Konzern knnte in den nchsten Jahren wirklich eine komplette Lsung aller Medien und Dienste entwickeln. Ob die Entwickler dies allerdings
mitmachen, ist die groe Frage.
[mb]
2/2014

DWX

Developer
Week 2014

14.-17. Juli 2014


NCC Ost, Nrnberg

14

13

12

11

20

19
18
22

24

23
26

Werden auch Sie Aussteller:


developer-week.de/Ausstellung

beyond dev
Prognosen fr das Jahr 2014

Mobile Trends
Netbiscuits hat seine Mobile-Web-Prognosen fr das Jahr 2014 verffentlicht: 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. Auerdem programmiert
er in PHP.
Inhalt
Mobile Trends fr das Jahr 2014.

Immer mehr Menschen leiden an


No-Mobile-Phone-Phobia (Bild 1)

134

etbiscuits, ein fhrender Anbieter von Soft


ware-Lsungen fr adaptive, mobile Web
anwendungen, hat seine Prognosen zur Ent
wicklung des mobilen Internets im Jahr 2014
verffentlicht und sagt eine steigende No-Mobi
le-Phone-Phobia (Nomophobie) voraus. Zudem
haben Nutzer schnell wechselnde Erwartungen
und steigende Ansprche an Gerteanwendun
gen, auf die sie von berall aus zugreifen.
Die Prognosen beruhen auf Trends, die aus
der Netbiscuits Cloud Platform ersichtlich wer
den. Diese zeigen auerdem, wie wichtig gerte
bergreifende Anwendungen sind. Denn Nut
zer wollen mit verschiedenen Gerten gleich
zeitig mit Marken interagieren und ihre eigene,
persnliche Online-Erfahrung aufbauen.
Jeder mchte immer und berall auf das Inter
net zugreifen knnen und erwartet die richtige
Anwendung fr seinen spezifischen Nutzungs
kontext. Eine der grten Herausforderungen
fr Unternehmen im Jahr 2014 wird es sein,
genau das bieten zu knnen. Die Interaktion
von Unternehmen mit ihren Kunden wird sich
grundlegend verndern. Unternehmen mssen
sich fr eine der grten Vernderungen jemals
rsten. Marken werden knftig nicht mehr al
lein mit einem Unternehmen in Verbindung ge
bracht werden. Sie rcken mit den Menschen,

die mit ihnen in Verbindung treten, zusammen


und Ende 2014 wird das eine grere Rolle spie
len als je zuvor.
2013 hatten viele Unternehmen einen ganz
klaren Fokus und rckten 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
fr eine mobile Weberfahrung beides wichtig ist
das Gert an sich und der Nutzungskontext,
so Daniel Weisbeck, COO und CMO bei Net
biscuits. 2014 wird die Anzahl der neuen Ge
rte wieder enorm steigen, viele Nutzer werden
mehrere Gerte besitzen und diese auch zeit
gleich verwenden. Sie rechnen damit, dass Un
ternehmen optimierte Webseiten anbieten und
sie die bestmgliche Anwendung fr das Gert
bekommen, das sie nutzen, und auch Aspek
te, wie Bandbreite oder Internetgeschwindigkeit
bercksichtigt 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 Mobilgert verloren geht. Man
che meinen sogar, sie knnten ohne mobiles Te
lefon nicht normal funktionieren. Was ist der
Grund dafr? Haben sie ein so groes Vertrauen
in ihr Gert und glauben, dass es ihnen hilft, ihr
tgliches Leben zu meistern? Die Nutzer rech
nen damit, dass bestimmte Informationen im
mer verfgbar sind, wenn sie sie brauchen, und
dass sie tgliche Dinge wie Lebensmittel oder
Parkplatzgebhren mit ihrem Mobilgert be
zahlen knnen. Die Nutzer verlassen sich auf
ihr Gert und knnen nicht mehr ohne (Bild 1):
Dieser Trend wird von neuen Gerten wie
Smartwatches und Wearables weiter voran
getrieben. Der Einfluss von Innovationen wie
Google Glass ist dagegen gering. Ein betrcht
liches Wachstum wird im Bereich WearableTechnik erwartet.
Exetech entwickelt mit XS-3 eine AndroidSmartwatch mit Touchscreen. Wi-Fi, mobile
Verbindungsfhigkeit und GPS ermglichen es
den Trgern dieser Uhr, direkt ber ihr Hand
gelenk zu telefonieren.
2/2014

beyond dev
Wearable-Technik wird dem Nutzer das Inter

net nher bringen als je zuvor. Sensoren kn


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 tagtg
lichen Dingen mit dem Internet.

Gertelandschaft verndert sich


Immer mehr Menschen werden 2014 ein erstes
mobiles Gert kaufen knnen vor allem in den
Schwellenlndern. Dort sind mobile Gerte fr
viele die erste und einzige Mglichkeit, online
zu gehen. Dadurch wird es immer wahrschein
licher, dass die erste Berhrung eines Kunden
mit einer Marke ber ein mobiles Gert erfolgt:
ber Outlets werden mehr kostengnstige Ge
rte verfgbar sein. Zum Beispiel werden Su
permrkte berall auf der Welt gnstigere Al
ternativen zu den fhrenden Gertemarken auf
Lager haben.
2014 wird das Jahr der uneinheitlichen Bild
schirmgren. Je mehr Gerte im 5- bis 7-ZollBereich auf den Markt kommen, desto mehr
traditionelle Gerteklassifikationen, die kei
ne weiteren Informationen bieten, werden un
brauchbar.
Es gibt viel Raum zum Wachsen. Die Markt
durchdringung der Smartphones in Lndern
wie Brasilien (26 Prozent) und Indien (13 Pro
zent) bleibt gering (Bild 2).
Im Juli 2013 gab es 26 verschiedene Bildschirm
gren unter den 100 meistgenutzten Gerten
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 bestn
dige, gertebergreifende Anwendung erwar
ten. Entscheidende Kriterien in 2014 und da
mit auch Unterscheidungsmerkmal von Unter
nehmen werden die Mglichkeiten sein, schnell
von einem Gert auf ein anderes zu wechseln
und dabei mit einer Aktion fortfahren zu kn
nen sowie das Multitasking mit mehreren Ge
rten. Unternehmen, die diese bildschirmber
greifenden Anwendungen nicht bieten, werden
zunehmenden Wettbewerbsnachteilen gegen
berstehen:
Mehr Unternehmen errtern, wie bildschirm
bergreifende Anwendungen in ihr Design in
tegriert werden knnen.
Eine groe Mehrheit an C-Level Executives in
den USA geben an, dass die Mglichkeit von
Multiscreen entscheidend oder sehr wichtig
fr ihre Strategie ist (80 Prozent).
Das Ziel sollte sein, die Mglichkeit zu haben,
eine Anwendung von einem Gert auf ein an
2/2014

deres zu bertragen, auch wenn die Suchop


tion in 2014 wahrscheinlich die gngigste Art
bleiben wird, um eine Aktivitt auf einem an
deren Gert aufzugreifen.
Die Menschen wollen Gerte und Anwendun
gen, die ihrem Lebensstil und ihrem Nutzungs
kontext entsprechen. Unternehmen, die es ver
stehen Individualisiertes fr alle zu bieten,
werden die Gewinner 2014 sein. Der Knack
punkt dafr wird die Erkennung der richtigen
Zutaten sein, die es ermglichen, dass es fr je
den Einzelnen optimiert ist, und die dem Nutzer
das Gefhl geben, dass es hochgradig persona
lisiert ist und speziell fr sie entwickelt wurde.
Die auf Kundenwnsche anpassbaren Elemen
te knnen 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 Mg
lichkeiten fr Marketers.
86 Prozent der Marketers sind der Meinung,
dass Big Data die Funktion des Marketings ver
ndern wird.
Anbieter versuchen bereits, fr jeden alles zu
sein, von einem Mobilgert, das auf Windows
und Android luft, ber Google Project Ara,
das es Nutzern ermglicht, ihre eigenen Mo
dule auf den Mobilgerten hinzuzufgen 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 fr 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


lndern werden 2014 immer
mehr Menschen ein erstes
mobiles Gert kaufen (Bild 2)

135

Neue Bcher

CSS3 Die neuen Features fr 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 verfgbar

Kein Webdesigner kommt heute mehr an


CSS3 vorbei. Dieses Buch bietet fr diese Ziegruppe profundes Wissen zu den
wichtigsten Features und zu fortgeschrittenen CSS3-Techniken samt einer Flle
von Tricks fr die Praxis.
Die Themen, die in dem Buch schwerpunktmig behandelt werden, sind grafische Effekte wie runde Ecken, Transparenzen und Schatten, Webfonts, Farbverlufe, die Transformation von Elementen im
3D-Raum und die Bewegung von Inhalten mit Transitions und Animations. Weitere Schwerpunkte, die ausfhrlich behandelt werden, sind Responsive Layouts fr
Smartphones, Tablets und Desktops und
die neuen Layoutmodule.
Anhand zahlreicher Beispiele zeigt die
Autorin Florence Maurice, die auch fr die
web&mobile developer schreibt, diese Techniken und gibt dem Leser dabei auch Hinweise fr 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 fr mobile Gerte, Icon-Fonts,
CSS3-Buttons, Bildberblendeffekte, animierte Seitenbergnge, Off-Canvas-Darstellung, die neue Flexbox-Syntax, Ausklappnavigation frs Responsive Webdesign, Einfhrung 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, erfhrt hier
die Zusammenhnge und lernt ntzliche
Tricks und weitergehende Mglichkeiten.
Das Layout des Buches ist aufwendig und
durchgngig in Farbe gehalten.

In diesem Programmierkurs erwirbt der


Leser das JavaScript-Grundwissen fr die
Entwicklung interaktiver Websites. Wichtige Techniken und Frameworks Ajax,
CSS, HTML5, jQuery und jQuery Mobile
werden alle behandelt. Die einzelnen Themen werden jeweils mit einer kurzen Beschreibung der Theorie, einem aussagefhigen Screenshot, einem vollstndigen,
lauffhigen Beispielprogramm und einer
ausfhrlichen praktischen Erluterung
vorgestellt.
Auf diese Weise erhlt der Leser einen
raschen Einstieg in jedes Thema. Er ist
nicht gezwungen, vereinzelte Codezeilen
zunchst in einen passenden Kontext zu
setzen, um ihre Wirkung zu betrachten.
Alle Beispielprogramme finden sich darber hinaus auf dem Datentrger 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 groe Rolle. Zur Interaktion mit dem Benutzer wird mit Ereignissen und ihren Folgen
gearbeitet, auch dies wird in einem Kapitel ausfhrlich erlutert. 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, erfhrt
der Leser ebenfalls.
Abgeschlossen wird das Buch mit einem Kapitel Beispielprojekte, in dem in
einer Reihe von greren und ausfhrlich kommentierten Beispielprojekten das
Zusammenspiel vieler Elemente gezeigt
wird. Die zustzlichen, aber noch nicht
berall vorhandenen Mglichkeiten von
HTML5 und JavaScript werden ebenfalls
erlutert.
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 verfgbar

136

2/2014

Neue Bcher

Android 4 bungsbuch fr 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 mchten. Es ist aber auch
geeignet fr Java-Programmierer, die sich
anhand von bungen in die Android-Programmierung einarbeiten mchten. Entsprechende Java-Kenntnisse und grundlegende Android-Kenntnisse werden vorausgesetzt.
Jedes Kapitel enthlt zunchst eine kompakte Zusammenfassung des Stoffes, der
in den bungsaufgaben verwendet wird.
Anschlieend haben Sie die Mglichkeit,
zwischen Aufgaben in drei verschiedenen
Schwierigkeitsstufen von einfach bis anspruchsvoll zu whlen. Anhand dieser
Aufgaben knnen Sie Ihr Wissen praktisch
testen. Am Ende der Kapitel finden Sie
vollstndige und kommentierte Musterlsungen.
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, gendert, gelscht und abgefragt werden
knnen. Diese Daten gehren der App, in
der die DB erstellt wurde. Sollten sie auch
anderen Applikationen zur Verfgung 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 knnen.
Anhand von Tests wird das Laden von
Bild-, Sound- und Videodateien aus dem
lokalen Verzeichnis, von der SD-Karte und
aus dem Internet geprft.
Es folgen Hinweise fr das Laden und
Testen der Apps auf einem Smartphone,
Remote Debugging, das Erstellen von
Screenshots auf dem Handy, die Verffentlichung von Applikationen und das
Android 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 verfgbar

2/2014

Noch viel zu oft sieht die Realitt in


Deutschland nach Auffassung der Autorin Vivian Pein so aus, dass die Verantwortung fr das Social-Media-Engagement eines Unternehmens entweder zustzlich 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 hhere Reichweite als bisweilen
der Pressesprecher. Ein Social Media Manager ist daher der richtige Mann/Frau fr
einen solchen Job.
Was ist ein Social Media Manager? Welche Aufgaben nimmt er im Unternehmen
wahr? Und welche Ausbildungsmglichkeiten gibt es fr diesen neuen Beruf? Auf
diese Fragen gibt das Buch Antworten. Es
ist ein Handbuch fr jeden, der diesen Job
anstrebt oder die Stelle im Unternehmen
einfhren mchte. Der Leser erfhrt 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 erfhrt der Leser, was ein Social Media Manager knnen muss, welche Ausund Weiterbildungsmglichkeiten 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 Mglichkeiten kennen, die Social Media fr die unterschiedlichen Unternehmensbereiche bietet. Es geht um die richtige Strategie, um Corporate Content und
um Change Management.
Der dritte Teil erlutert, wie man Social Media im Unternehmen richtig einsetzt. Der Praxisguide hilft bei der Standortbestimmung und stellt mgliche 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 fr mobile Endgerte (Mobile Webseiten)

SanData IT-Trainingszentrum

www.it-trainings.de

Berlin

13.01.14 15.01.14

Objektorientierte Geschftsprozessmodellierung mit der UML

Protranet Institut

www.protranet.de

Berlin

13.01.14 15.01.14

Webseiten fr mobile Endgerte (Mobile Webseiten)

SanData IT-Trainingszentrum

www.it-trainings.de

Frankfurt/M.

13.01.14 15.01.14

Webseiten fr mobile Endgerte (Mobile Webseiten)

SanData IT-Trainingszentrum

www.it-trainings.de

Mnchen

21.01.14 23.01.14

Omnicard Ausstellung und Konferenz fr Chipkartentechnologie

InTime Berlin

www.omnicard.de

Berlin

23.01.14 24.01.14

HTML5, CSS3 und JavaScript

Integrata

www.integrata.de/seminare

Mnster

27.01.14 29.01.14

C# Kompakt

Hilf!

www.hilf.de

Mnchen

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

Mnchen

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 Einfhrung

SanData IT-Trainingszentrum

www.it-trainings.de

17.02.14 19.02.14

Objektorientierte Geschftsprozessmodellierung mit der UML

Protranet Institut

www.protranet.de

Berlin

17.02.14 19.02.14

jQuery JavaScript Framework Einfhrung

SanData IT-Trainingszentrum

www.it-trainings.de

Frankfurt/M.

17.02.14 19.02.14

jQuery JavaScript Framework Einfhrung

SanData IT-Trainingszentrum

www.it-trainings.de

Mnchen

18.02.14 19.02.14

Der IT-Lizenzmanager

Management Circle

www.managementcircle.de

Mnchen

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 fr 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

Mnchen

25.02.14 26.02.14

Affiliate TactixX 2014

Neue Mediengesellschaft Ulm

www.affiliate-tactixx.de

Mnchen

26.02.14 28.02.14

jQuery Programmierung mit der JavaScript-Bibliothek

Integrata

www.integrata.de/seminare

Hamburg

Mrz 2014
03.03.14 04.03.14

Illustrator Grundlagen

Macromedia Akademie

www.macromedia-firmenseminare.de

Kln

03.03.14 04.03.14

Photoshop Grundlagen

Macromedia Akademie

www.macromedia-firmenseminare.de

Mnchen

03.03.14 04.03.14

Flash Grundlagen

Macromedia Akademie

www.macromedia-firmenseminare.de

Osnabrck

03.03.14 04.03.14

Flash Grundlagen

Macromedia Akademie

www.macromedia-firmenseminare.de

Stuttgart

03.03.14 05.03.14

Agiles Projektmanagement SCRUM

Snger & Partner


Unternehmensberater

http://saenger-projektmanagement.de

Nrnberg

05.03.14 06.03.14

Illustrator Aufbau

Macromedia Akademie

www.macromedia-firmenseminare.de

Kln

05.03.14 06.03.14

Photoshop Aufbau

Macromedia Akademie

www.macromedia-firmenseminare.de

Mnchen

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 Geschftsprozessmodellierung mit UML

Protranet Institut

www.protranet.de

Berlin

18.03.14 19.03.14

Der IT-Lizenzmanager

Management Circle

www.managementcircle.de

Kln

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

Mnchen

25.03.14 26.03.14

SMX Search Marketing Expo

Rising Media

www.smxmuenchen.de

Mnchen

27.03.14 28.03.14

Flash Grundlagen

Macromedia Akademie

www.macromedia-firmenseminare.de

Kln

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

Kln

31.03.14 01.04.14

Illustrator Aufbau

Macromedia Akademie

www.macromedia-firmenseminare.de

Mnchen

31.03.14 02.04.14

Webgestaltung II

Integrata

www.integrata.de/seminare

Mnchen

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

Nrnberg

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 Einfhrung

SanData IT-Trainingszentrum

www.it-trainings.de

Berlin

14.04.14 16.04.14

jQuery JavaScript Framework Einfhrung

SanData IT-Trainingszentrum

www.it-trainings.de

Frankfurt/M.

14.04.14 16.04.14

jQuery JavaScript Framework Einfhrung

SanData IT-Trainingszentrum

www.it-trainings.de

Mnchen

28.04.14 29.04.14

Informationssysteme im Projektmanagement

Snger & Partner Unternehmensberater

http://saenger-projektmanagement.de

Frankfurt/M.

28.04.14 30.04.14

Objektorientierte Geschftsprozessmodellierung 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

Snger & Partner


Unternehmensberater

http://saenger-projektmanagement.de

Frankfurt/M.

19.05.14 21.05.14

Objektorientierte Geschftsprozessmodellierung 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

Mnchen

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

Snger & Partner


Unternehmensberater

http://saenger-projektmanagement.de

Dsseldorf

23.06.14 25.06.14

Web-Apps mit HTML5 erstellen

SanData IT-Trainingszentrum

www.it-trainings.de

Nrnberg

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

Snger & Partner


Unternehmensberater

http://saenger-projektmanagement.de

Kln

30.06.14 02.07.14

Objektorientierte Geschftsprozessmodellierung mit UML

Protranet Institut

www.protranet.de

Berlin

30.06.14 02.07.14

IT-Projekte erfolgreich managen

Snger & Partner


Unternehmensberater

http://saenger-projektmanagement.de

Nrnberg

Juli 2014
10.07.14 11.07.14

HTML5, CSS3 und JavaScript

Integrata

www.integrata.de/seminare

Kln

14.07.14 16.07.14

Webgestaltung II

Integrata

www.integrata.de/seminare

Mnster

14.07.14 17.07.14

Developer Week 2014

Neue Mediengesellschaft Ulm

www.developer-week.de

Nrnberg

21.07.14 23.07.14

Objektorientierte Geschftsprozessmodellierung 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 Geschftsprozessmodellierung mit UML

Protranet Institut

www.protranet.de

Berlin

25.08.14 27.08.14

XML Cocoon

Protranet Institut

www.protranet.de

Mnchen

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

Mnchen

15.09.14 17.09.14

jQuery Programmierung mit der JavaScript-Bibliothek

Integrata

www.integrata.de/seminare

Mnchen

15.09.14 17.09.14

IT-Projekte erfolgreich managen

Snger & Partner Unternehmensberater

http://saenger-projektmanagement.de

Wrzburg

15.09.14 17.09.14

XML Cocoon

Protranet Institut

www.protranet.de

Mnchen

22.09.14 23.09.14

HTML5, CSS3 und JavaScript

Integrata

www.integrata.de/seminare

Mnchen

25.09.14 26.09.14

Informationssysteme im Projektmanagement

Snger & Partner Unternehmensberater

http://saenger-projektmanagement.de

Nrnberg

29.09.14 01.10.14

Objektorientierte Geschftsprozessmodellierung 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

Mnchen

23.10.14 24.10.14

HTML5, CSS3 und JavaScript

Integrata

www.integrata.de/seminare

Dsseldorf

27.10.14 29.10.14

Objektorientierte Geschftsprozessmodellierung mit UML

Protranet Institut

www.protranet.de

Berlin

10.11.14 12.11.14

Agiles Projektmanagement SCRUM

Snger & 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

Dsseldorf

19.11.14 21.11.14

IT-Projekte erfolgreich managen

Snger & Partner Unternehmensberater

http://saenger-projektmanagement.de

Dsseldorf

24.11.14 26.11.14

Objektorientierte Geschftsprozessmodellierung mit UML

Protranet Institut

www.protranet.de

Berlin

24.11.14 26.11.14

XML Cocoon

Protranet Institut

www.protranet.de

Mnchen

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 Stdte es besonders viele Job
angebote fr Webentwickler gibt.
Am Stichtag fr 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 hchstens eine Woche alt. Die
Nachfrage nach Entwicklern ist weiterhin
beraus gro.
Detaillierter betrachtet werden hier in
jedem Monat die Zahl der Jobs fr Webent
wickler sowie die Zahl der Jobs fr Mobi-

le Developer, wobei bei den Angeboten


fr Webentwickler die Nachfrage in den
15 grten deutschen Stdten betrachtet
wird, fr die Entwickler fr MobilgerteAnwendungen jedoch auf die Bundeslnder geschaut wird.
Tabelle 1 zeigt die Verteilung der Jobangebote auf die 15 grten deutschen Stdte. Die Reihenfolge der vier erstplatzierten Stdte lautet wie im Vormonat: Mnchen, Berlin, Hamburg und Stuttgart. Dahinter gab es jedoch reichlich Bewegung.
Kln, Dsseldorf, Hannover, Dortmund
und Bremen konnten sich um jeweils einen Rang verbessern. Fr alle anderen
Stdte, mit Ausnahme von Duisburg, das
auch im Vormonat schon die wenigsten
Jobangebote aufwies, ging es um je einen
Platz nach unten.

Tabelle 1: Jobs fr Webentwickler


Rang
1
2
3
4
5
6
7
8

Stadt
Mnchen
Berlin
Hamburg
Stuttgart
Kln
Frankfurt am Main
Dsseldorf
Nrnberg

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%

Regelmig werden rund die Hlfte aller Stellenangebote fr die aufgefhrten


drei Grostdte ausgeschrieben. Die andere Hlfte der Entwickler wird fr Jobs in
kleinen und mittelgroen Stdten gesucht.
Fr Mobile Developer wurde auch in diesem Monat wieder untersucht, in welchen
Bundeslndern am meisten Jobs angeboten werden. Hier liegt Bayern unverndert auf dem ersten Platz, wenn auch der
Anteil der Treffer auf 22,9 Prozent zurckgegangen 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-Wrttemberg mit 15,2 Prozent, whrend es fr
Berlin (Platz 4, 14,1 Prozent) um zwei Pltze 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 regelmig Java, das diesmal
sogar in ber 50 Prozent der gefundenen
Stellenangebote nachgefragt wurde. Dabei werden brigens nur Treffer bercksichtigt, 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 zurckgefallen. Am Ende der Tabelle haben
Ruby und Python die Pltze getauscht.
Tabelle 3 zeigt, welche Technologien in
den Stellenangeboten aufgefhrt werden.
Dabei werden auch Nennungen bercksichtigt, 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, whrend Windows Phone zwei Pltze abgeben
musste.
[Bernhard Lauer]
2/2014

Trends am Arbeitsmarkt
Zufriedenheit mit dem Job

Buch

Zufrieden? Geht so!

Jobsuche im
Social Web

Die Gesellschaft fr Konsumforschung


(GfK) und Monster.de haben deutsche Arbeitnehmer nach ihrer Zufriedenheit mit
ihrem Job befragt. Die Umfrage zeigt, dass
mehr als die Hlfte (54 Prozent) ihren Job
mag und als angemessene Option fr ihre jetzige Situation betrachtet. Lediglich
fnf Prozent lieben ihre Arbeit. Die Umfrage wurde zugleich auch in den Niederlanden, Grobritannien, den USA, Indien, Kanada und Frankreich durchgefhrt.
Im diesem Lndervergleich liegt Deutschland an letzter Stelle. Am glcklichsten
mit ihrem Job sind die Kanadier (64 Prozent). Dicht dahinter folgen die Niederlande (57 Prozent), Indien (55 Prozent), die
USA (53 Prozent), das Vereinigte Knigreich (46 Prozent) und Frankreich (43 Prozent). Gerade die jungen Arbeitnehmer in
Deutschland sind berraschend unglck-

Deutschland ist das Land mit der grten JobUnzufriedenheit


lich im Berufsleben: So mag zwar nahezu die Hlfte von ihnen (46 Prozent) ihren
Job, ist davon aber nicht vllig berzeugt.
Vergleicht man Vielverdiener, Durchschnittsverdiener und Geringverdiener,
so offenbart die Umfrage, dass besser bezahlte Arbeitnehmer nicht glcklicher
sind. 41 Prozent der Geringverdiener lieben oder mgen 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

Fnf neue IT-Online-Kurse


Das Hasso-Plattner-Institut (HPI) bietet
im Jahr 2014 fnf kostenlose Online-Kurse
an. Folgende Themen sind geplant: Konzepte parallelen Rechnens, Vernetzung
per Internetprotokoll TCP/IP, semantische
Web-Technologien, In-Memory Data Management und Einfhrung in die Internetsicherheit. Die jeweils sechswchigen
Massive Open Online Courses (MOOC)
startet das Hasso-Plattner-Institut auf seiner interaktiven Bildungsplattform OpenHPI.de am 3. Februar, 31. Mrz, 26. Mai,
1. September und 27. Oktober 2014.

OpenHPI bietet seine kostenlosen, fr


jeden frei zugnglichen 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 fr weiter steigende Nutzerzahlen vorbereitet.
www.openhpi.de

Das Social Web hat nicht nur viele neue


Berufe hervorgebracht, sondern auch die
Bewerbungskultur stark verndert: Immer fter machen Bewerber mit unkonventionellen Online-Bewerbungen auf
sich aufmerksam, um aus der Menge der
Mitbewerber hervorzustechen. Auch, wer
es bodenstndiger mag, findet eine Flle
an Mglichkeiten, die sozialen Netze fr
die Jobsuche zu nutzen. Das Buch zur Jobsuche im Social Web, das jetzt im OReillyVerlag erschienen ist, gibt seinen Lesern
viele Anregungen und zeigt, wie sie Facebook, Twitter, einen Blog und viele andere Social-Media-Kanle fr die Jobsuche
nutzen knnen.
Autorin Larissa Vassilian betreut fr
Firmen und Medienhuser Twitter- und
Facebook-Accounts. In ihrem gemeinsam
mit Christine Dingler verfassten Buch
zeigt sie, wie die Leser ihre Social-Media-Kanle fr die Jobsuche nutzen. Das
Buch beschreibt, wie man sein Auftreten
auf allen genutzten Plattformen in Einklang bringt, eine persnliche Marke ausbildet und sich auch inhaltlich mit Hilfe
von Twitter, Pinterest & Co. als kompetenter Gesprchspartner prsentiert.
Co-Autorin Christine Dingler hat 2013
mit ihrer Bewerbungskampagne im Social
Web (@punktefrau) viel Aufsehen erregt.
In einem Gastkapitel berichtet sie von ihren Erfahrungen. Auerdem steuern ausgewhlte Social-Media-Experten weitere
Tipps fr 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 dmmer


Dass berstunden nicht gerade die effektivste Arbeitszeit sind, kennt jeder Entwickler aus eigener Anschauung. Eine
Studie hat jetzt den Zusammenhang zwischen lngeren Arbeitszeiten und der Entwicklung der kognitiven Fhigkeiten erforscht. Das Resultat: Wer mehr arbeitet
verliert an Intelligenz und leidet vermehrt
unter krperlichen Beschwerden. Die Stu2/2014

die des Finnish Institute of Occupational


Health, die krzlich im American Journal
of Epidemiology (AJE) verffentlicht wurde, untersuchte dafr britische Angestellte. Um das Nachlassen der Leistungen in
den Intelligenztests festzustellen, gengte
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


fr 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 Stck
Code im Heft? Nutzen
Sie die Volltextsuche
in der App auch fr
Listings.

P apierlos & mobil:


Ihr gesamtes Archiv ist
auch unterwegs immer
parat ohne Papierberge.

Fr
Abonnenten
gratis!

web & mobile

DEVELOPER

Stellenmarkt

Online-Stellenmarkt
Das ausfhrliche Stellenangebot finden Sie unter:
http://webundmobile.de/stellenmarkt
.NET Consultant / Softwareentwickler (m/w) 
cellent AG

Bundesweit

Lead Developer (m/w) - beim fhrenden


Company Builder (Online Start-ups)
INTERNETONE AG

Kln

Buchen Sie jetzt Ihre Anzeige unter:


Kerstin Berthmann, kerstin.berthmann@nmg.de

Tel: 089/74117327

Bei uns gibt es


Software-Entwickler!
Stellenmarkt

dotnetpro & web & mobile Developer

31.000 Exemplare
Gesamtauflage
16.000 NewsletterEmpfnger
120.000 PIS

+++ 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
Schifferstrae 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 Dsseldorf
T: 02 11 / 1 71 93 56
F: 02 11 / 1 71 93 58
ihrkontakt@trinidat.de
www.trinidat.de

Ihr IT-Partner fr ein erfolgreicheres Business, bietet seit 30 Jahren PremiumQualitt bei der Realisierung ganzheitlicher, innovativer IT- und Organisationslsungen.
Die cellent AG zhlt zu den TOP 20 IT-Beratungs- und Systemintegrationsunternehmen in
Deutschland und untersttzt Sie mit Know-how von der Konzeption bis
zur Realisierung ihrer individuellen Lsung.

Unsere Mission ist die Entwicklung qualitativ hochwertiger Softwarelsungen fr international agierende Unternehmen und Konzerne.prodot verbindet die Passion fr technisch
anspruchsvolle Software mit intuitivem Design. Qualitt und Nutzerfreundlichkeit stehen
im Fokus der exklusiv auf die Wnsche unserer Kunden zugeschnittenen Lsungen. Wir
beginnen da, wo Standardsoftware aufhrt. 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 fr Unternehmen. Ob
nach Aufwand, zum Festpreis, bei uns oder bei Ihnen vor Ort: Wir garantieren beste Qualitt 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 Hlsken
Bockenheimer Landstrae 2-4
60306 Frankfurt
T: 069 - 667748 - 254
www.alliedwallet.com

Allied Wallet ist ein weltweit fhrender Anbieter von Online Payment Lsungen und
bietet fr seine Services ein attraktives Vertriebspartnermodell an - wir erklren sehr
gern die Vorzge! Wir bieten PCI-DSS Level 1-Konformitt // Auf den Hndler angepasste
Betrugsprvention // 128-Bit SSL Verschlsselungstechnologie // Liveschaltung der
Hndler fr Payment Processing innerhalb von 24 Stunden. Mit Allied Wallet knnen
Hndler Zahlungen in 164 verschiedenen Whrungen akzeptieren und in 25 ohne
Umrechnungsgebhr 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 fhrenden 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 hochverfgbare Cloud-Infrastructure fr 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 Nrnberg
T: 0911 - 4 967 967 - 00
F: 0911 - 4 967 967 - 99
suport@ecs-webhosting.de
www.ecs-webhosting.de

ECS-Webhosting in Nrnberg wurde 1995 gegrndet und bietet professionelle Hosting


Lsungen wie hochverfgbares Webhosting, Managed Server, skalierbare Cloud Server,
weltweite Domainregistration sowie Cloud Lsungen 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
Fuggerstrae 6
D-87463 Dietmannsried
T: +49 8374 586826-3
info@com-vistec.de
www.com-vistec.de

Durch die Spezialisierung fr kamerabasierte Apps wird ComVISTEC Ihr B2B-Partner


fr die mobile Bildverarbeitung. Mit unseren Produkten und Erfahrungen erreichen Sie
das Maximum an Performance und Qualitt, das Sie wnschen und Ihre Kunden erwarten!
Wir bieten Ihnen ein Komplettpaket zur Erstellung Ihrer individuellen iOS-App an.
Vom Konzept, ber die Entwicklung bis hin zur Qualittssicherung durch
Testautomatisierung begleiten wir Ihr Projekt aktiv!
Vereinbaren Sie einen Termin und realisieren Sie schon heute Ihr Projekt mit uns!

digitalmobil GmbH & Co. KG


Bayerstrae 16a, 80335 Mnchen, 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 fr Sie professionelle iOS, Android und
Windows-Mobile-Applikationen welche nicht nur hchsten Sicherheitsstandards Stand
halten, sondern auch Ihr Tagesgeschft nher zu Ihren Kunden und Ihre Mitarbeiter
nher an ihr Unternehmen heran bringen. Ergnzend hierzu bieten wir spezialisierte
Intranet-Lsungen, Homepages und zum guten Schluss noch die Integration bestehender Systeme in die Mglichkeiten von heute. Wir sind Ihr Partner fr vollstndige
IT-Lsungen weltweit, 24 Stunden am Tag, 7 Tage die Woche.
Wir freuen uns, Ihre Lsung zu werden.

CELLULAR Germany
dietzk. Creatives GmbH & Co. KG
ELBventure UG
Exozet Berlin GmbH
Triplesense GmbH

In allen Fragen rund um das Dienstleisterverzeichnis bert Sie Frau Roschke gerne persnlich!

Juliane Roschke 089/74117-283 juliane.roschke@nmg.de

2/2014

145

Vorschau

Ausgabe 3/2014:

Impressum
Verlag
Neue Mediengesellschaft Ulm mbH
Bayerstrae 16a,
80335 Mnchen
Telefon: (089) 74117-0,
Fax: (089) 74117-101
(ist zugleich Anschrift aller Verantwortlichen)
Herausgeber
Dr. Gnter Gtz

Ab 13. Februar am Kiosk

Artikelserie zu AngularJS

Chefredakteur
Max Bold
verantwortlich fr den redaktionellen Teil
E-Mail: redaktion@webundmobile.de

Bei AngularJS handelt es sich um ein


JavaScript-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 Einfhrung, dann geht es mit der
Service-Programmierung weiter. Der dritte Teil bietet eine Einfhrung 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 fr 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 Mhrke, 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 Khnke,
Cornelia Pflanzer, Petra Reichenspurner,
Ilka Rther, Christian Schumacher,
Nicole blacker, Mathias Vietmeier
Anzeigenleitung
Angelika Hochmuth
Telefon: (089) 74117-432
Fax: (089) 74117-269
E-Mail: angelika.hochmuth@nmg.de
Anzeigendisposition
Marita Brotz
Telefon: (089) 74117-281
Fax: (089) 74117-269
E-Mail: marita.brotz@nmg.de
Leitung Herstellung/Vertrieb
Thomas Heydn
Telefon: (089) 74117-111
E-Mail: thomas.heydn@nmg.de
Leserservice
Hotline: (089) 74117-205
Fax: (089) 74117-101
E-Mail: leserservice@nmg.de
Kooperationen
Larissa Owald
Telefon: (089) 74117-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
Sderstrae 77
20097 Hamburg
Telefon (040) 34724857
Bezugspreise
web&mobile developer ist das Profi-Magazin
fr Web- und Mobile-Entwickler und erscheint
zwlfmal im Jahr. Der Bezugszeitraum fr Abonnenten ist jeweils ein Jahr. Der Bezugspreis im
Abonnement betrgt 76,20 Euro inklusive Versand und Mehrwertsteuer im Halbjahr, der
Preis fr ein Einzelheft 14,95 Euro. Der Jahresbezugspreis betrgt damit 152,40 Euro.
In sterreich sowie im brigen Ausland kostet
das Abonnement 83,70 Euro im Halbjahr. Der
Jahresbezugspreis betrgt somit 167,40 Euro.
In der Schweiz kostet das Abonnement 152,00
Franken im Halbjahr. Der Jahresbezugspreis
in der Schweiz betrgt 304,00 Franken. Das
Abonnement verlngert sich automatisch um
ein Jahr, wenn es nicht sechs Wochen vor Ablauf der Bezugszeit schriftlich beim Verlag gekndigt wird. Studenten erhalten bei Vorlage eines Nachweises einen Rabatt von 50 Prozent.
Verffentlichung 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-QueueingSysteme 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 nher angesehen.
Deren Mglichkeiten der Anbindung an verschiedenste Programmiersprachen wie auch der
fr das Setup zu treibende Aufwand sind durchgngig mit gut bis sehr gut zu bewerten. Ebenso stehen fr alle drei Messagebroker eine aktive
Community und ausfhrliche Tutorials bereit.

Die Palette der Operationen, die in PHP mit Arrays und Feldern ausgefhrt werden knnen, ist
lang. In einem ausfhrlichen Tutorial geht es um
Operationen fr numerisch und assoziativ indizierte Felder und vor allem um die Arbeit mit
zweidimensionalen Feldern. Bei mehrdimensio
nalen Feldern knnen 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 -Abhngigkeiten visualisieren
Garbage Collection: Das ist neu unter .NET 4.5
Node.js gegen .NET: Wettkampf ber fnf 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 bert Sie Frau Berthmann gerne persnlich!

Kerstin Berthmann 0 89 / 7 41 17 - 327 kerstin.berthmann@nmg.de

Und wie exibel 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