Anhand eines Beispiels wird die Vorgehensweise zur Einbindung eines jQuery-Widgets in eine IntraWeb-Applikation beschrieben. Dieser Artikel ist der 2. Teil einer Artikelreihe und beschreibt die bereitenden Arbeiten am jQuery-Widget. Das Ergebnis dieser vorbereitenden Arbeiten kann als WebApp betrachtet werden. Die HTML-/Javascript-/CSS-Sourcen sind nicht komprimiert. Die Implementierung dieses Beispiels kann somit von Entwicklern leicht nachvollzogen werden.

IntraWeb besitzt schon von Zuhause aus gute Komponenten. Wem dies nicht reicht, so bietet die Firma TMS noch mehr komfortable Kaufkomponenten. Zusätzlich lassen auch noch jQuery-Widgets in eine IntraWeb-Applikation einbinden. In IntraWeb ist die jQuery-Bibliothek schon integriert. Anhand eines Beispiels wird die Vorgehensweise zur Einbindung eines jQuery-Widgets in eine IntraWeb-Applikation erläutert.

Unter http://cubiq.org/cardview befindet sich eine jQuery-Komponente von Matteo Spinelli für die Darstellung oder Auswahl von Informationen. Diese Informationen lassen sich aufgeteilt in eine Art Kartensystem strukturiert darstellen. Auch kann dieses Widget für die Auswahl von Objekteigenschaften verwendet werden.

jQuery-Widget: Cardview mit Ok-Button

Über vertikales Touchmove bei mobilen Geräten oder durch senkrechtes Streichen bei gedrückter Maustaste lassen sich die Karten mit einem 3D-Effekt umblättern. Das rechte Bild zeigt das Beispiel mit einem Ok-Button.

jQuery-Widget: Cardview mit Auswahl-Button

Das rechte Bild zeigt das Beispiel mit einem Auswahl- und Abbruch-Button.

Die Darstellungsmöglichkeiten von Informationen in diesem Widget sind sehr mannigfaltig. So kann man auf alle HTML5-Techniken zurückgreifen. U.A. wurde im Beispiel ein lokalen Zwischenspeichern der Informationen implementiert, sodass auch Offline gearbeitet werden kann. Notwendig ist nur noch die Erstellung einer entsprechenden Manifest-Datei (- siehe den Artikel vom 01.07.2011.).

Der erste Schritt zur Einbindung eines jQuery-Widgets ist eine Normalisierung der Testumgebung des jQuery-Widgets. Dabei sind alle Javascript- und css-Anweisungen in eigene Dateien zusammen zufassen. Die Javascript-Anweisungen, die der Initialisierung dienen, sollten sich im $(document).ready(function()-Block befinden. Alle HTML-Id’s sollten so verändert werden, dass sie mit späteren neu hinzukommenden Id’s nicht kollidieren. Ist die veränderte jQuery-Testumgebung fehlerfrei und lauffähig, so kann die Integration in eine IntraWeb-Programmumgebung erfolgen.

Über das rechte Icon kann das lauffähige Beispiel in einem Extrafenster gestartet werden.

Das Umblättern geschieht über ein senkrechtes Touchmove. Schauen Sie sich den Quellcode des Beispiels im Browser an.

Copyright © 21.02.2014 hadv.de. All Rights Reserved.