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:
- 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
