Das gewisse App-was

HTML5 Custom Controls und Sencha Touch
Kommentare

HTML5 erobert die unterschiedlichsten Plattformen, und es besteht zunehmend Bedarf an Custom Controls, also Komponenten, die sich entweder im Design oder ihren Eigenschaften von den Standard-Controls unterscheiden. Nach der Erstellung eines solchen Controls steht der Entwickler immer vor dem Problem, diese neue Komponente in ein bestehendes Framework einbinden zu müssen. Wir erklären kurz den Aufbau und die Entwicklung eines HTML5-basierten Custom Controls und zeigen, wie man dieses in Sencha Touch einbindet.

Mobile Technology

Der Artikel „Das gewisse App-was“ von Andreas Hölzl und Gerrit Grunwald ist erstmalig erschienen in Mobile Technology 3.2012

Apple hat bereits bei der Einführung des ersten iPhones versucht, die Anwendungsentwicklung weg von nativen und hin zu webbasierten Anwendungen zu forcieren, was allerdings nicht richtig gelang. Zu dieser Zeit war der Großteil der Entwicklergemeinde der Meinung, Anwendungen, die in JavaScript und HTML geschrieben sind, könnten nativen Anwendungen nicht das Wasser reichen. Das hat sich dank des Siegeszugs von HTML5 gewaltig verändert: Heute sind HTML-basierte Anwendungen aus dem mobilen Sektor nicht mehr wegzudenken. Sie bieten dem Entwickler die Möglichkeit, relativ plattformunabhängig eine mobile Anwendung zu erstellen, die auf einer Vielzahl mobiler Endgeräte lauffähig ist. Mit ihrem Framework Sencha Touch hat die Firma Sencha ein Produkt geschaffen, das sich in diesem Bereich einen Namen gemacht hat. In Sencha Touch wird im Prinzip die komplette Anwendung inklusive User Interface in JavaScript programmiert. Dadurch war und ist es sehr weit verbreitet.

HTML5 Custom Control

Als Entwickler steht man oft vor dem Problem, dass die Anforderungen im Projekt die Entwicklung eigener Komponenten nötig machen. In webbasierten Anwendungen bestehen diese so genannten Custom Controls in der Regel aus einer Mischung aus HTML, JavaScript und CSS. Das HTML5--Tag ist dabei für den grafischen Teil, JavaScript für die Logik und CSS für Styling und Animation zuständig. Als Beispiel wollen wir in diesem Artikel eine einfache LED als Komponente erstellen. Für eine reale Anwendung würde man wahrscheinlich einen anderen Ansatz wählen, da eine LED durch ihre beiden Zustände (AN und AUS) auch einfach durch zwei Bilder zu realisieren ist. Aber gerade wegen ihrer Einfachheit ist sie als Beispiel hervorragend geeignet. Zunächst haben wir als Vorlage eine Zeichnung der Komponente erstellt (Abb. 1).

Abb. 1: Grafische Vorlage der Led (Adobe Fireworks)

Um diese Zeichnung nun in Code zu überführen, müssen wir die einzelnen Bestandteile der Zeichnung mithilfe der zur Verfügung stehenden grafischen Elemente des HTML5 Canvas API umsetzen. Damit man eine skalierbare Komponente erhält, muss man im Prinzip die XY-Koordinaten aller grafischen Elemente in Relation zu der Größe der Zeichnung angeben. Nehmen wir zum Beispiel den Kreis, der die rote LED selbst darstellt (Abb. 2). Wie man erkennen kann, hat der Kreis folgende Abmessungen:

Abb. 2: Kreis mit Gradient, der die LED darstellt (Adobe Fireworks)
  • X = 100
  • Y = 100
  • W = 200
  • H = 200

Es ist natürlich möglich, einen Kreis mit exakt diesen Werten zu zeichnen, doch das würde nur bei einer Größe der Komponente von W=400 und H=400 funktionieren. Wollte man die gleiche Komponente in der halben Größe erstellen, so müsste man alle Werte anpassen. Damit die Komponente automatisch skaliert, beziehen wir die einzelnen Koordinaten einfach auf die Ausgangsgröße:

  • X / ORIGINAL_BREITE * AKTUELLE_BREITE
  • Y / ORIGINAL_HÖHE * AKTUELLE_HÖHE

Die Werte für ORIGINAL_BREITE und ORIGINAL_HÖHE sind dabei die Größen der Originalzeichnung. Die Werte für AKTUELLE_BREITE und AKTUELLE_HÖHE entsprechen der gewünschten Größe der Komponente. Das führt zu folgenden Werten:

  • X = 0.25 * AKTUELLE_BREITE
  • Y = 0.25 * AKTUELLE_HÖHE
  • W = 0.5 * AKTUELLE_BREITE
  • H = 0.5 * AKTUELLE_HÖHE

Da die LED quadratisch ist, muss man nur dafür sorgen, dass die Breite immer der Höhe entspricht, damit man eine runde LED erhält. Es gibt inzwischen auch Zeichenprogramme, die direkt HTML5 exportieren können, sodass man keine umständliche manuelle Konvertierung vornehmen muss. Damit aus dem reinen Zeichencode eine funktionsfähige Komponente wird, muss ein wenig Logik dazuprogrammiert werden. Man benötigt dabei Methoden zur Erzeugung des Canvas-Elements im HTML DOM zum Initialisieren der so genannte Buffer, Methoden zur Visualisierung der Grafik und letztendlich noch Methoden zur Änderung des Zustandes (AN oder AUS, Abb. 3).

Abb. 3: Zustand AUS und AN der LED

Themen der folgenden Seiten

  • Listings zu
  • Einbindung in Sencha Touch
  • Fazit
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -