Tabellen – Daten übersichtlich darstellen, aufbereiten, zusammenfassen und im besten Fall noch bearbeiten. Die Wünsche, mit denen Entwickler hier konfrontiert werden, sind vielfältig, meist nachvollziehbar und völlig klar. Und doch sind sie nicht immer einfach umzusetzen, unabhängig von der eingesetzten Technologie.

Der erste Ansatz ist dabei stets mit den Bordmitteln der Umgebung auszukommen und so Komplexität, Aufwand und Wartbarkeit im Rahmen zu halten. Leider gibt es hier Grenzen, die mit Bordmitteln nicht sinnvoll überwindbar sind. Fällt die Abwägung dann zugunsten der Anforderung aus, so muss eine alternative Lösung gefunden werden.

Auch der TD Mobile ist hier ein Paradebeispiel. In Kindertagen mit einer „einfachen“ Liste im Kontext des Master-Detail-Konzeptes gestartet, kam später – auch auf Wunsch vieler Entwickler – eine „echte“ Tabelle als neues GUI-Element hinzu. Diese adressierte viele der Wünsche vom Filtern, über das Sortieren bis hin zum echten Bearbeiten innerhalb der Tabelle reichen nun die Möglichkeiten. Auch auf das Aussehen hat man größeren Einfluss. Aber natürlich gibt es auch hier Grenzen, bei denen der Aufwand die Machbarkeit schlägt. Also muss man Anforderungen aufgrund der Machbarkeit verwerfen? Oder aus dem Rahmen des TD Mobile ausbrechen, die Vorteile der IDE opfern und damit den Aufwand und Komplexität sprengen? So schwarz und weiß sind die Möglichkeiten zum Glück nicht. Wir zeigen Ihnen im Folgenden eine Möglichkeit einfach und auf den Konzepten des TD Mobile basierend eine der „Großen“ der HTML-Tabellen, die jQuery DataTables, einzubinden.
Ausgangspunkt ist ein HTML-Control, was letztlich als div-Element gerendert wird, und die Einbindung der jQuery DataTables-Bibliotheken und -Stylesheets. Im HTML-Control wird eine Tabelle dann einfach zum Beispiel als <table id=“example“ class=“display></table> definiert. Wichtig dabei ist die Id, da diese im Verlauf als Referenz für Zugriffe dient. Im simplen statischen Fall kann man die Daten gleich bei der Tabellendefinition übergeben und muss die Tabelle dann lediglich noch initialisieren (siehe pageStaticTable im verlinkten Beispiel). Dieser Fall dürfte aber deutlich weniger praktische Relevanz haben als die dynamische Variante, welche erst zur Laufzeit mit Daten zum Beispiel aus einer Datenbank befüllt werden soll. Diese Variante ist im verlinkten Beispiel in der Seite pageDynamicTable exemplarisch umgesetzt. Man sieht, dass trotz des Einsatzes einer Fremdkomponente zur Visualisierung und ggf. Bearbeitung der Daten, die TD Mobile-Konzepte weiter greifen und mit wenigen Codezeilen die Tabelle mit den TD Mobile-Bindings verknüpft werden kann. Vergleiche dazu folgenden Code-Auszug aus dem Beispiel:

var dataSet = Td.Data.Binding.get("data").getValue();

$('#example').DataTable( {
    data: dataSet,
    columns: [
        { "data": "Name", title: "Name" },
        { "data": "Position", title: "Position" },
        { "data": "Office", title: "Office" },
        { "data": "Extn", title: "Extn." },
        { "data": "StartDate", title: "Start date" },
        { "data": "Salary", title: "Salary" }
    ]
} );

Wenige Zeilen JavaScript-Quellcode reichen dafür aus. Man hat somit also die Einfachheit der TD Mobile-Umgebung mit den Möglichkeiten der jQuery DataTables verknüpft und ganz neue Umsetzungsvarianten geschaffen.
Sicher ist dies nur ein oberflächliches Beispiel, um die Machbarkeit zu demonstrieren, aber das Vorgehen hat sich in unseren Projekten auch in komplexen Situationen bewährt – und das nicht nur bei Tabellen.

Das Code-Beispiel finden Sie hier.

Preisaktion
Vom 03.01. – 31.01.2022 gewähren wir 25% Rabatt auf die TD Mobile Lizenz. Der Rabatt ist auch gültig für Upgrades.

Wartung in Höhe von 1.006,95 EUR ist verpflichtend. Der Wartungsvertrag ist nicht rabattfähig. Die Wartung beinhaltet neben Produktwartung für ein Jahr auch die techn. Hotline durch den Hersteller.

Unsere Dienstleistungen zum TD Mobile
Online – TD Mobile: Entwickeln von Anwendungen für mobile Endgeräte mit TD Mobile
TD Mobile – Entwickeln von Anwendungen für mobile Endgeräte mit TD Mobile
Workshop: Entwickeln von Anwendungen für mobile Endgeräte mit TD Mobile

Gern freuen wir uns in diesem Zusammenhang auf Feedback, Anmerkungen, aufgezeigte andere Wege oder auch Fragen, Kontakt info@md-consulting.de.
Sie haben Fragen oder benötigen Unterstützung bei der Umsetzung dieses oder anderer Themen, sprechen Sie uns gern an: E-Mail oder rufen Sie uns an unter +49 (0)8122-9740-0.

Hin und wieder treffen wir in unseren Projekten mit dem TD Mobile oder auch in Gesprächen und Anfragen von und mit unseren Kunden auf interessante, knifflige oder „nervige“ Herausforderungen. Daraus ist die Idee entstanden in unregelmäßigen Abständen einige dieser „Herausforderungen“ zu schildern und unsere Lösungsansätze aufzuzeigen – der TD Mobile TechTalk.
Wir erheben dabei keinen Anspruch, die perfekte Lösung zu präsentieren; in der Regel ist diese auch durch jeweils andere Rahmenbedingungen des Projekts nicht möglich. Wir möchten aber Wege mit ihren Vor- und Nachteile aufzeigen, um die Möglichkeiten und das Leistungsspektrum eines solchen Entwicklungsansatzes zu demonstrieren.
Gern freuen wir uns in diesem Zusammenhang auf Feedback, Anmerkungen, aufgezeigte andere Wege oder auch Fragen, Kontakt info@md-consulting.de.

Beginnen wollen wir mit dem Thema Drag&Drop – genauer Drag&Drop in HTML-5-basierten Anwendungen auf mobilen Endgeräten. Dies ist also ein Thema, das auch, aber nicht ausschließlich, den TD Mobile betrifft. Drag&Drop bedeutet das „Ziehen“ (drag) eines grafischen Elementes in einen definierten Zielbereich (drop). Nicht zu verwechseln mit den auf mobilen Endgeräten häufig genutzten Swipe-Gesten, die HTML 5 und damit auch der TD Mobile auf mobilen Endgeräten standardmäßig unterstützt.

Wer HTML ein wenig näher kennt fragt sich jetzt vielleicht, wo hier eigentlich das Problem sei. Seit HTML 5 gehört dieses Feature doch zum Standard (siehe http://www.w3.org/TR/2010/WD-html5-20101019/dnd.html). Das ist richtig, jedes HTML-Element kann die Eigenschaft draggable annehmen. In Verbindung mit den zur Verfügung stehenden Ereignissen ondragstart, ondragover, ondrop usw. lässt sich also relativ simpel und mit wenig Aufwand eine Drag&Drop-Funktionalität implementieren. Die Ernüchterung erfolgt allerdings schnell, sobald man dies auf gängigen mobilen Endgeräten mit Touchscreen testet; die Elemente zeigen sich immun und reagieren nicht auf Drag&Drop. Dies ist allerdings kein Fehler, sondern durchaus gewollt. So sind die Bildschirmflächen oft klein und Drag&Drop-ähnliche Bewegungen zum Scrollen, Zoomen usw. anderweitig belegt. Es ist aber auch klar, dass es Anwendungsfälle gibt in denen Drag&Drop bei mobilen Anwendungen sinnvoll ist. Was also tun?

Es gibt zwei grundsätzliche Lösungsansätze:

1. Manuelle Implementierung der gewünschten Drag&Drop-Funktionalität auf Basis von Touch-Ereignissen:

HTML bietet eine Reihe von Touch-Ereignissen (touchstart, touchend, touchmove, touchenter, touchleave, touchcancel), welche es ermöglichen die gewünschte Funktionalität selbst zu implementieren (siehe hierzu http://www.w3.org/TR/touch-events/).
Wir haben zum Test einige kleinere Beispiele erstellt, um ein Gefühl für die Umsetzbarkeit zu bekommen. Zusammenfassend kann man resümieren, dass eine Lösung auf dieser Basis machbar, allerdings auch aufwendig ist. Wie heißt es so schön „Der Teufel steckt im Detail“. Je nach Umfang der Anforderungen an Drag&Drop ist dies aber eine mögliche Option.
Für die, die es mal selbst ausprobieren möchten, hier ein kleiner Ausgangspunkt:

Auch im weiter unten beschrieben TD Mobile-Beispiel finden Sie einen Java Script-„Schnipsel“, der den Einstieg zu diesem Ansatz aufzeigt.
Im Allgemeinen ist es aber stets eine gute Idee, auf Bestehendes, Bewehrtes zurückzugreifen und damit Aufwand zu sparen und Qualität zu sichern. Natürlich standen auch andere Entwickler bereits vor diesen Herausforderungen und so sind eine Reihe von Skripten und Frameworks entstanden, die einem Hilfestellung geben und Arbeit abnehmen.

2. Nutzung bestehender Frameworks

Es gibt eine Vielzahl von Frameworks die Drag&Drop in HTML-Anwendungen auf mobilen Geräten ermöglichen.
In unserem Fall können wir es uns noch etwas einfacher machen. Wir befinden uns im Umfeld von jQuery, welches ein Kernelement des Technologiestacks des TD Mobile ist. Auch jQuery (das wohl meistgenutzte JavaScript-Framework) hatte eine Drag&Drop-Unterstützung. Diese Vereinfacht allerdings auch „nur“ die Drag&Drop-Implementierung auf Basis von HTML 5. Welchen Vorteil bietet das also. Nun, es gibt eine Reihe von Frameworks, die genau dies auf mobilen Endgeräten verfügbar machen.

Eine kleine, aber gute, Übersicht findet man z.B. hier: http://www.omegaweb.com/10-jquery-drag-and-drop-plugins-for-mobile/.

Wir haben uns im Rahmen unserer Projektanforderungen eine Reihe von Frameworks angesehen und uns letztlich für Touch Punch (http://touchpunch.furf.com) entschieden. Touch Punch ist ein kleiner „Workaround“, welcher die für Drag&Drop nötigen Mausereignisse auf Basis von Touch-Ereignissen simuliert und so die gewohnte Funktionalität bereitstellt. Der große Vorteil dieses Ansatzes ist, dass nichts an der bestehenden Implementierung geändert werden muss. Es reicht die jQueryUI- und die Touch Punch-Bibliothek einzubinden, z.B. so
<script src=“jquery-ui.min.js“></script>
<script src=“jquery-ui.touch-punch.min.js“></script >

jQuery selbst ist nicht erforderlich, da diese vom TD Mobile standardmäßig verwendet wird. Um Seiteneffekte zu vermeiden, empfehlen wir nicht das Standardpaket von jQuery UI zu verwenden, sondern mittels dem Download Builder (http://jqueryui.com/download/) ein Paket nur mit der „Draggable“-Option und davon abhängigen Komponenten zu erzeugen und einzubinden.

Wie das Ganze dann aussehen kann, können Sie in einem kleinen Beispiel selbst erfühlen: http://meinmd.md-consulting.de/DragDrop
Das obere Logo zeigt einen Ansatz für manuelle Implementierung auf Basis von Touch Events, die drei unteren Logos können Sie via Drag&Drop in den Rahmen ziehen. Sobald alle drei Logos in den Rahmen gezogen wurden, sehen Sie Ihren bevorzugten Partner 🙂
Haben Sie Interesse, gern senden wir Ihnen das TD-Mobile-Projekt zu. Im Wesentlichen relevant dabei sind die beiden eingebundenen JS-Bibliotheken, wie oben beschrieben, und die Java Script-Funktion initDragAndDropWithTouchPunch.

Bei Fragen und Anmerkungen wenden Sie sich bitte an maik.vogt@md-consulting.de. Interesse an Beratung und/oder Entwicklungsleistungen? Ihre Ansprechpartnerin evelyn.ertel@md-consulting.de oder auch telefonisch unter +49 (0)8122-9740-0