ClaretPortal wird mobil (Teil 3) - Fokus: Endless/Infinite Scrolling mit jQuery Mobile

von Manuel Breitfeld

Nachdem ich in den ersten beiden Teilen dieser Blog-Serie [1] [2] auf die allgemeine Funktionsweise von Web-Applikationen und ClaretPortal mit Portlets eingegangen bin und dabei vor allem die Möglichkeiten des UI-Designs mit jQuery Mobile über Komponenten wie ListView, Grid und Collapsible Set vorgestellt habe, möchte ich in diesem dritten Teil der Blog-Serie zeigen, wie ClaretPortal das typische "Feeling" von Apps bzw. mobiler Applikationen vermittelt. 
Ein klassisches Beispiel dafür ist "Endless Scroll", auch "Infinite Scroll" bezeichnet - das intuitive Scrollen von Listen auf Touchgeräten.

Endless Scrolling / Infinite Scrolling mit jQuery Mobile ListViews

Das gängige Bedienparadigma von Listen in Web-Applikationen auf dem Desktop-Browser besteht aus einer Blätterung (Pagination), die dem Nutzer eine Navigation à la "Vorherige Seite" und "Nächste Seite" anbietet. Zudem werden die Anzahl der Seiten angezeigt und es besteht die Möglichkeit, einzelne Ergebnisseseiten direkt anzuspringen. Google ist der wohl bekannteste Vertreter mit dieser Navigationsart.
Auf mobilen Geräten ist diese Navigation eher umständlich. Klicks auf einzelne Links sind nicht so praktisch wie das intuitive Scrollen per Touch. So hat sich das "endlose" Scrollen immer mehr durchgesetzt. Der Benutzer scrollt also einfach per Wischgeste die Liste und die Applikation lädt eigenständig die Treffer bzw. Seiten nach - typischerweise per AJAX.
Bei jQuery Mobile eignet sich zur Realisierung dieser Anforderung die ListView, die schon in Teil 1 vorgestellt wurde. Das Konzept funktioniert dabei wie folgt:

  • Die Liste enthält als letztes Element einen Link "Load more", der jeweils eine Seite "weiterblättert"
  • Während des Scrollens lädt jQuery Mobile eigenständig den Inhalt, der über "Load more" aufrufbar ist, hängt ihn an die Liste an und macht den "Load more"-Link unsichtbar
  • Wie im obigen Bild dargestellt ist, merkt der Benutzer von diesen Hintergrundaktivitäten nichts. Das Scrollen geht flüssig, Ergebnisse werden automatisch nachgeladen, der Benutzer muss keinerlei manuelle Aktionen ausführen

Die technische Realisierung

Die Funktionsweise ist tatsächlich sehr einfach und besteht aus zwei grundlegenden Komponenten.

  • Der "Load more"-Link, der auf die nächste Seite wechselt
  • Eine Javascript-Funktion, die das Scrollen überwacht und zur richtigen Zeit die nächsten Elemente nachlädt.

Der "Load more"-Link in Grails

<g:if test="${page.nextExists}">
 <li id="nextPageLi" data-theme="b">
  <g:link class="nextPageLink" action="${params.action}" params="[page:page.pageIndex+1, query:params.query]">Load more</g:link>
 </li>
</g:if>

Der Listeneintrag mit dem Link wird nur angezeigt, wenn auch tatsächlich noch eine nächste Seite existiert. Der Link selbst gibt über den Parameter "page" an, dass die nächste Seite geladen werden soll. Diese Information wird später in Grails von Controller und Service ausgewertet. In ClaretPortal werden die Parameter dabei an ElasticSearch weitergegeben.

Der Javascript-Aufruf

$('#studyListContainer').infiniteScrollHelper({
 loadMore: function(page, done) {
  // Get the next page URL from the link and call it via AJAX
  var url = $('.nextPageLink').attr('href');
  $.get(url, function(data) {
   // Remove the list item with link (was triggered automatically)
   $('#nextPageLi').remove();
   // Append the list of the result to the current list
   $(data).find(".study-list li").appendTo('#studyListContainer .study-list');
   // Update the jQuery Mobile ListView so that the design looks nice
   $('#studyListContainer .study-list').listview('refresh');
   $('#studyListContainer .study-list').trigger("updatelayout");
   done();
  });
 },
 bottomBuffer: 250 //Start when the scroll bar is 250px before the last result
});

Das Herzstück dieses übersichtlichen Javascript-Aufrufs ist der jQuery Infinite Scroll Helper [3]. Wie im obigen Code-Stück zu sehen ist, kommt man damit schon mit nur wenigen Zeilen Code zum Ziel. Der "studyListContainer" ist dabei die ID des DIVs mit data-role="content" (siehe Blog-Serie Teil 1), die "study-list" ist die Klasse der jQuery Mobile ListView. 

Der folgende Screenshot zeigt bei welchem Szenario das hier beschriebene Scrolling dem Benutzer zur Verfügung steht.

Ausblick

Im nächsten Teil möchte ich zeigen, wie einfach sich mit diesem Konzept eine komfortable Volltextsuche auf mobilen Geräten mit ClaretPortal und jQuery Mobile realisieren lässt. In unserem Fall können dadurch mehrere Gigabyte an Daten auch mobil innerhalb von Millisekunden bequem durchsucht werden.

Kategorien: ClaretportalElasticsearchJavaScriptJQueryMobile

Zurück