Seit der Version 1.1.2 des TD Mobile können Comboboxen nicht mehr nur mit Zeichenketten (Strings), sondern auch mit Werten einer UDV (user defined variable) gefüllt werden. Dies alles hat Gupta recht einfach und intuitiv gelöst, so dass man es auch ohne Studium der Dokumentationen leicht umsetzen kann.

Oft möchte man die Combobox(en) nicht nur mit Wertlisten befüllen, sondern auch einen Eintrag vorauswählen. Dies wird über die Wertbindung (Richtung Set) gesteuert. Man muss also nur eine Bindung vom richtigen UDV-Typ anlegen und diese entsprechend füllen. Das ist jedoch einfacher gesagt als getan, wenn man sich dafür entscheidet diese Vorauswahl auf Clientseite zu treffen. Man kann die Bindung mittels des SET-Befehls mit den gewünschten Werten zwar leicht füllen (siehe Ausschnitt 1).


Ausschnitt 1:
Set: CB_CLIENT_VALUE.nId 3
Set: CB_CLIENT_VALUE.sText "DREI"


Anschließend wird man aber feststellen, dass die Combobox dennoch weiter nur den ersten Listeneintrag anzeigt. Hierfür ist ein kleiner Trick mit Hilfe einer JavaScript-Funktion nötig. Es muss zusätzlich „von Hand“ der gewünschte Wert gesetzt und anschließend die Auswahl aktualisiert werden (siehe Ausschnitt 2).


Ausschnitt 2:
$("#cmbClient").val(value);
$("#cmbClient").selectmenu("refresh");


Dann ist der gewünschte Eintrag auch ganz ohne Serveraufruf vorausgewählt.

PS: Selbstverständlich sollte die Vorauswahl auch ohne den beschriebenen Workaround funktionieren, dieser Fehler wird bei Gupta unter der Nummer TDM-901 geführt und in einer der nächsten Versionen behoben.

Wer das alles einmal im Detail nachvollziehen möchte findet hier ein TD Mobile Beispiel, das sowohl die Vorgehensweise am Server als auch am Client demonstriert. Sollten Sie Fragen hierzu haben kontaktieren sie uns bitte, wir helfen Ihnen gern weiter.

Einleitung
In einer TD-Mobile-Anwendung soll ein Listen-Control — eine Liste — mit relativ vielen Einträgen angezeigt werden. Da die angezeigte Liste in den meisten Fällen den gesamten Bildschirm – vermutlich muss der Anwender sogar scrollen – in Anspruch nehmen würde, soll die Liste zunächst hinter einem Expander verborgen werden. Auf diese Art und Weise könnte die Liste zunächst verborgen bleiben und würde erst sichtbar, wenn der Anwender den Expander antippt. Ein Problem bleibt allerdings: standardmäßig wird beim Expander nur das Event Create unterstützt. Es würde bedeuten, dass die Liste beim Seitenaufbau mit umfangreichen Daten erzeugt würde. Das hätte zur Folge, dass der gesamte Seitenaufbau verzögert wird, obwohl der Anwender möglicherweise die Liste gar nicht anschauen will. Es sollte möglich sein, die Liste erst aufzubauen und anzuzeigen, wenn der Anwender den Expander antippt.

Lösungsansatz
Da es sich beim Expander-Control in TD Mobile um das reguläre JQuery Mobile Control handelt, bietet auch das TD-Mobile-Control die Möglichkeit, auf die (JQuery mobile) Ereignisse expand und collapse zu reagieren. Allerdings stellt sich die Frage, ob eine derartige Erweiterung in TD Mobile möglich ist. Die kurze Antwort lautet: es ist möglich. Die genaue Vorgehensweise wird im nächsten Abschnitt erläutert.

Lösung

Das Listen-Control wird über einen (komplexen) Bindungsarray und eine (ebenfalls komplexe) Bindung gefüllt, wobei die Bindungen über den Rückgabewert der entsprechenden Operation mit Werten versorgt werden. Diese Funktionalität bleibt erhalten. Entfernt wird lediglich der Aufruf dieser Operation Invoke beim Create-Ereignis.

Im nächsten Schritt muss der zusätzliche Event-Händler für das expand-Ereignis des Expanders implementiert und die Funktionalität, die beim Eintreten dieses Ereignisses ausgeführt werden soll, hinterlegt werden. Da beim Antippen des Expanders das Listen-Control mit den Daten aus der Datenbank gefüllt werden soll, muss als Aktion die im Quellcode hinterlegte Operation aufgerufen werden. Dieser Job wird durch Verwendung der TD Mobile-API im entsprechenden JavaScript erledigt.


Td.Data.Operation.get('name_der_operation').invoke();


Die Bezeichnung name_der_operation muss beim Nachvollziehen dieses Beispiels noch an die tatsächliche Operation auf der entsprechenden Seite angepasst werden.

Die Hinzufügung des Event-Handlers geschieht zum Zeitpunkt des Seitenaufbaus. Beim Create-Ereignis der Seite wird das JavaScript aufgerufen. Die Ausführung dieses Scripts bewirkt, dass der zusätzliche Event-Handler für das expand-Ereignis und die dann auszuführende Funktionalität zur Seite hinzugefügt wird. Wenn der Anwender jetzt die Seite aufruft, wird die JavaScript-Funktionalität mit dem expand-Ereignis erweitert: die Bindings, die die im Listen-Control zu visualisierenden Daten enthalten, werden durch den Aufruf der Operation mit Daten versorgt und das Listen-Control wird im Expander angezeigt. Die gesamte JavaScript-Funktion hat folgenden Inhalt:


$("#name_des_expander_controls").collapsible ({
expand: function(event, ui) {
Td.Data.Operation.get('name_der_operation').invoke();
}
});


In diesem Beispiel wird der Name des Expander-Controls im Quellcode referenziert. Standardmäßig legt TD Mobile die Controls mit dem Namen exp und einer laufenden Nummerierung an, z.B. exp1.

Der Aufruf dieser Funktion erfolgt beim Seitenaufbau, also beim Create-Ereignis auf der entsprechenden Seite. Hierdurch wird die zusätzliche Expander-Funktionalität der Seite
hinzugefügt.


On Create
…
Javascript name_der_JavaScript-Funktion


Das Hinzufügen der zusätzlichen Funktionalität für den Expander erfolgt beim Create-Ereignis der Seite.

Fazit
Es ist mit TD Mobile relativ einfach möglich, zusätzliche Funktionalität, die bereits in JQuery Mobile hinterlegt ist, aber nicht an TD Mobile durchgereicht wurde, hinzuzufügen. In diesem Beispiel wurde die Expander-Funktionalität so erweitert, dass auch auf das Ereignis des Antippens des Controls von Programmierer definierte Aktionen ausgeführt werden. In diesem Beispiel wurde der Event-Handler für das Ereignis „expandieren“ des Expanders und die dann auszuführende Operation hinzugefügt.