Anhand eines Beispiels wird die Vorgehensweise zur Einbindung eines jQuery-Widgets in eine IntraWeb-Applikation beschrieben. Dieser Artikel ist der 3. Teil einer Artikelreihe und beschreibt die Integrationsarbeiten. Die entsprechenden Sourcen können im unten Teil des Artikels heruntergeladen werden.

Cardview - Formular

In das IntraWeb-Formular, welches die jQuery-Komponente enthalten soll, sind über den Delphi-Designer die IntraWeb-Komponenten TIWLayoutMgrHTML und TIWJQueryWidget zu integrieren. Das rechte Bild zeigt den Designer mit den Komponenten.

Cardview - TIWLayoutMgrHTML

Die Komponente vom Typ TIWLayoutMgrHTML besitzt im Beispiel den Namen MgrHTML_Cardview. Diese Komponente dient als HTML-Template des jQuery-Widgets. Entscheidend ist nur der Body-Teil. Zum Erfassen des HTML-Textes ist im Designer dazu das Property HTML (TStringList) zu verwenden.

Cardview - TIWJQueryWidget (1)

Die Komponente vom Typ TIWJQueryWidget mit den Namen JQueryWidget_Cardview besitzt zwei wichtige Properties ContentFiles (TStringList) und onReady (TStringList).
Im Property ContentFiles (TStringList) sind alle notwendigen externe JS-/CSS-Dateien einzutragen. Die Bibliothek jQuery braucht aber nicht mit aufgeführt werden, da sie schon in IntraWeb integriert ist.

Cardview - TIWJQueryWidget (2)

Im Property onReady (TStringList) ist der Javascript-Code einzutragen, welches der Initialisierung der jQuery-Komponente dient.

Da bei dieser Web-Applikation fast alle laufzeitrelevanten Aktionen lokal ablaufen, genügt eine asynchrone Kommunikation mit den Web-Server. Der verwendete Ajax-Aufruf ist so von IntraWeb vorgegeben.

Den Source-Code des IntraWeb-Beispiels können Sie hier herunterladen.

Copyright © 22.02.2014 hadv.de. All Rights Reserved.