t3n News Entwicklung

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

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

Mit PhoneGap eine native Applikation für , 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.

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

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 oder 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.

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?

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Windows Phone
Weltweite Marktanteile: Android frisst iOS und Windows Phone auf
Weltweite Marktanteile: Android frisst iOS und Windows Phone auf

Nach Angaben von Tim Cook wechseln immer mehr Smartphone-Nutzer von Android zu iOS. Den Zahlen von Kantar Worldpanel zufolge, legte Android allerdings weltweit zu und schnappte sich Marktanteile von … » weiterlesen

Pokémon Go ab sofort in Deutschland für iOS und Android verfügbar
Pokémon Go ab sofort in Deutschland für iOS und Android verfügbar

Es ist so weit: Pokémon Go ist jetzt auch in Deutschland für Android und iOS verfügbar. Damit erreicht der Hype jetzt auch offiziell Europa. » weiterlesen

13 schicke HTML- und WordPress-Templates für deine Webvisitenkarte
13 schicke HTML- und WordPress-Templates für deine Webvisitenkarte

Nicht jeder braucht gleich eine eigene umfangreiche Homepage. Den meisten fehlen dafür auch schlicht die Inhalte. Aber für viele Webworker empfiehlt es sich, zumindest eine Webvisitenkarte … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?