ClaretPortal wird mobil (Teil 1) - Fokus: jQuery Mobile ListViews
In dieser mehrteiligen Blog-Serie möchte ich zeigen, wie Web-Applikationen mit jQuery Mobile [1] für mobile Endgeräte optimiert werden können. Ich werde dies am Beispiel unserer ClaretPortal-Lösung zur Verwaltung von Marktstudien [2] erötern und mit Listings und Screenshots anschaulich darlegen.
Klingt einfach - los geht's?
Während die technische Umsetzung mit jQuery Mobile tatsächlich nicht besonders anspruchsvoll ist, müssen einige Fragen im Vorfeld geklärt sein. Die Kernfrage lautet: Was soll mobil dargestellt werden?
In der Regel bietet ein Portal viele Funktionalitäten, die ein Benutzer unterwegs nicht benötigt. Man spart sich mit dem Entfernen dieser Funktionalitäten für mobile Geräte nicht nur selbst Arbeit - auch dem Benutzer werden komplexe Menüs und überladene Screens erspart. Insbesondere bei mobil gilt: Weniger ist mehr!
Ist man sich fachlich darüber im Klaren, was dem Nutzer mobil zur Verfügung stehen soll, können ein entsprechendes Layout für die mobile Darstellung entwickelt und die anzuzeigenden Portlets für eine mobile Anzeige optimiert werden.
Die Startseite und jQuery Mobile Listen
Im ersten Teil dieser Serie gehe ich auf die Startseite und einfache Listen mit jQuery Mobile ein. Das folgende Bild zeigt die ClaretPortal-Startseite dieser Applikation auf dem Desktop:
Die für den Benutzer am wichtigsten Funktionalitäten sind der Zugriff auf alle Studien über die Suche, die neuesten und am meisten gelesenen Studien, sowie die eigenen Studien und Favoriten.
Erscheint es auf den ersten Blick noch unmöglich, diese Funktionalitäten auf der Startseite eines Smartphones darzustellen, ist es mit Hilfe der jQuery Mobile Listviews [3] tatsächlich gar nicht so schwer.
Die folgenden Bilder zeigen die Darstellung auf einem iPhone und einem Nexus 7.
Wählt ein Benutzer nun beispielsweise den Punkt der meistgelesenen Studien aus, werden alle diese Studien per Slide-Effekt [4] eingeblendet. Näheres zur Gestaltung dieser Liste im nächsten Blog-Post - hier schon mal ein Screenshot:
Wie funktioniert das?
jQuery Mobile übernimmt das "Styling" anhand von CSS-Klassen. Für die oben dargestellte Startseite arbeitet man also mit gewöhnlichen HTML-Listen, die jQuery Mobile dann "automatisch" in ein mobiles Design umwandelt. Der Body der Startseite sieht ungefähr so aus:
<div data-role="content" data-theme="c">
<ul data-role="listview" id="mylistview" data-filter="true" data-filter-placeholder="Search all studies">
<li>
<a href="${request.contextPath}/mobile/newStudies" data-transition="slide">New Studies</a>
<span class="ui-li-count">${newStudiesTotalCount}</span>
</li>
<li>
<a href="${request.contextPath}/mobile/mostReadStudies" data-transition="slide">Most Read</a>
<span class="ui-li-count">${mostReadStudiesTotalCount}</span>
</li>
<li>
<a href="${request.contextPath}/mobile/myFavouriteStudies" data-transition="slide">My Favorites</a>
<span class="ui-li-count">${myFavouriteStudiesTotalCount}</span>
</li>
<li>
<a href="${request.contextPath}/mobile/myStudies" data-transition="slide">My Studies</a>
<span class="ui-li-count">${myStudiesTotalCount}</span>
</li>
</ul>
</div>Wichtige Elemente sind dabei:
- data-theme: Gibt an, welches Design jQuery Mobile verwenden soll
- data-role: Gibt an, dass eine jQuery Mobile Listview verwendet werden soll
- Ist der Inhalt jedes List-Items ein Link, erzeugt jQuery Mobile automatisch den Navigations-Pfeil an der rechten Seite
- Bei einem Link steuert das Attribut data-transition den Übergang zum nächsten Screen, dabei stellt "slide" die typische Animation bei einem "Wischen" auf einem Touchscreen dar
- Fügt man innerhalb eines List-Items ein span-Element mit der Klasse ul-li-count ein, wird dessen Inhalt als "Notification" angezeigt. In diesem Beispiel als Anzahl eigener Favoriten oder Studien genutzt
Ausblick
m nächsten Teil werde ich auf die anderen Bereiche von ClaretPortal in diesem Anwendungsgebiet eingehen und zeigen, wie übersichtlich beispielsweise die Zusammenfassung einer Studie dargestellt werden kann.