Le catalogue OXiane sous jQuery Mobile

[swfobject]1311[/swfobject]

Et voilà encore un moyen de parcourir le catalogue de formation OXiane avec son mobile !

Toujours dédié à Android, voici une application développée avec jQuery Mobile. Cette API est très proche de jQTouch, mais elle est encore plus simple à utiliser et plus intuitive. Encore une fois, nous n’avons pas besoin de javascript pour les interactions basiques de l’interface, et c’est tant mieux.

Les boutons de retour à l’écran précédent sont par exemple générés dans le bandeau prévu à cet effet :

<div data-role="header" role="banner">
	<h1 role="heading" >OXiane</h1>
</div>

Une particularité intéressante : le filtre de liste ! Un simple paramètre et vous avez un filtre automatique.

<ul data-role="listview" data-inset="true" data-filter="true">
	<li>Mon texte</li>
</ul>

L’API expose tous les événements utiles pour une application « riche », la gestion des particularités de l’interface tactile et de la navigation est facile à mettre en oeuvre.
Il est possible de surcharger la plupart des comportements et configurations par défaut.
L’habillage est réalisé à l’aide d’une seule feuille CSS qu’il est très facile de customiser.

La gestion de la navigation et des appels Ajax sont très liés, via les formulaires, ce qui rend par exemple les transitions entre écrans très fluides. Encore une fois, nous avons là un outil formidable de développement rapide pour des besoins très courants.
J’ai réalisé cette application à l’aide de simplement deux fichiers php, mais je présenterai bientôt la suite de cet article avec de simples appels ajax aux webservices REST que nous utilisions déjà dans notre application Android native.

Pour tester l’application, cette adresse peut être utilisée dans Safari par exemple.
http://www.www.oxiane.com/mobile_jquery/index.php