Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung

ChocolateChip-UI: HTML-Theme für iOS, Android und Windows Phone

    ChocolateChip-UI: HTML-Theme für iOS, Android und Windows Phone
Das ChocolateChip-UI Framework (Screenshot: Sourcebits)

Mit PhoneGap eine native Applikation für iOS, Android oder Windows-Phone erstellen zu müssen, ist keine Seltenheit. Doch was passiert, wenn die Cross-Device-Applikation nicht nur auf drei unterschiedlichen Geräten funktionieren soll, sondern auch die native UI übernehmen muss? Wir zeigen euch das Framework ChocolateChip-UI und nehmen es unter die Lupe.

Seit Generation-PhoneGap haben Web-Entwickler die Möglichkeit, mit ihrem Know-How, native Applikationen für mobile Endgeräte zu erstellen. Dabei ist PhoneGap aber nur ein Wrapper, der die hinterlegten HTML-, CSS- und JavaScript-Files darstellt. Problematisch wird es, wenn das native Erscheinungsbild zusätzlich eingehalten werden muss. Was echte native Applikationen, die mit Java, Objective-C oder C# schon integriert haben, müssen wir bei PhoneGap umständlich nachbauen. Damit nicht jeder Programmierer sein eigenes Theme oder Framework basteln muss, haben die Entwickler von Sourcebits ein Framework namens ChocolateChip-UI erstellt.

ChocolateChip-UI: Das Framework im Detail

ChocolateChip-UI liefert uns die fehlenden CSS-Dateien, die unserem HTML-Markup einen nativen Look verleihen. Dabei werden iOS-, Android- und Windows-Phone-Komponenten unterstützt. Somit gibt es drei unterschiedliche CSS-Dateien, die jeweils für eine Plattform bestimmt sind. Das HTML-Markup besteht aus normalen HTML-Elementen, die wir täglich im Web einsetzen. Ergänzend zu den HTML-Elementen müssen wir noch vordefinierten Klassen vergeben. Ein Beispiel für eine Liste:

<h2>Fruits</h2>
<ul class="list">
<li>Apples</li>
<li>Orange</li>
<li>Bananas</li>
</ul>

Somit wäre eine normale Liste erstellt, die automatisch den nativen Look erhält – abhängig von der integrierten CSS-Datei. Alle verfügbaren HTML-Elemente könnt ihr in der Dokumentation nachschlagen.

Da es sich bei ChocolateChip-UI nicht nur um ein HTML-Theme handelt, sondern um ein vollständiges Framework gibt es natürlich auch eine mitgelieferte JavaScript-Library. Die ChUI.js ist sozusagen das Herz, das für das Event-Handling, der Device-Detection oder für das Paging benötigt wird. Mit der vorliegenden Library können wir zu bestimmten Abschnitten springen, überprüfen ob es sich um ein iOS-Device handelt oder eine Swipe-Gesture abfangen. Hiermit können wir die Logik unsere Applikation bestimmen.

Die erstellte Liste mit der iOS-CSS (Screenshot: <a href="http://chocolatechip-ui.com/">ChocolateChip-UI</a>)
Die erstellte Liste mit der iOS-CSS (Screenshot: ChocolateChip-UI)

1 von 4

Übersicht der UI-Elemente von iOS (Screenshot: <a href="http://chocolatechip-ui.com/">ChocolateChip-UI</a>)
Übersicht der UI-Elemente von iOS (Screenshot: ChocolateChip-UI)

2 von 4

Übersicht der UI-Elemente von Android (Screenshot: <a href="http://chocolatechip-ui.com/">ChocolateChip-UI</a>)
Übersicht der UI-Elemente von Android (Screenshot: ChocolateChip-UI)

3 von 4

Damit ChocolateChip-UI einwandfrei funktioniert wird jQuery 2.0.3 oder höher benötigt. Alle Ressourcen könnt ihr als Paket, inklusive Demo, auf der offiziellen Seite laden. Natürlich könnt ihr es auch über GitHub beziehen oder es direkt mit NPM installieren. Um eine schnelle Übersicht der UI-Elemente zu erhalten, könnt ihr euch unter den Features einen Überblick verschaffen.

Zu dem vorhanden Material gibt es noch umfangreiche Tutorials, die das Erstellen von Events, der Navigation oder dem publizieren einer Hybrid-Applikation vorführen. Wem das noch nicht reicht, kann mit dem eigenen Theme-Roller die fertige UI farblich nochmals anpassen.

ChocolateChip-UI: Das Fazit

ChocolateChip-UI macht es einfach, ein Natives-Applikation-Feeling zu erzeugen und bleibt dabei dem Standard treu. Es kann mit normalen HTML-Markup gearbeitet werden und wir können die bereitgestellten CSS-Files integrieren, modifizieren oder ausschließen. Dabei bekommen wir eine hilfreiche JavaScript-Library bereitgestellt, die wichtige Aufgaben übernimmt und der ganzen Applikation – nicht nur äußerlich sondern auch unter der Fassade – den nötigen Funktionsumfang verleiht.

Habt ihr auch schonmal mit ChocolateChip-UI gearbeitet?

Finde einen Job, den du liebst zum Thema Android

Schreib den ersten Kommentar!

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen