Les listes sont une composante essentielle de l'organisation d'une application mobile. Nous avons vu plus haut comment créer en ligne une liste et la mettre à jour en temps réel depuis le portail AppMobile. Cette méthode vous permet de tenir facilement à jour une liste simple.
Mais si vous avez des informations issues d'une base de données, vous préférerez exporter ponctuellement ces informations de votre base vers un fichier, mettre ce fichier en ligne et donner à AppMobile l'URL de ce fichier. Vous pouvez vous appuyer sur notre format XML pour créer ponctuellement un fichier statique.
Mieux, si vos données sont issue d'une base de donnée qui est elle-même en ligne (ce qui est le cas si vous avez un site web), écrivez un simple script sur votre serveur, qui crée le XML en temps réel à partir des données à jour dans votre base.
Dans les deux cas, commençons par une description du format XML AppMobile.
Format général
Un premier exemple de fichier XML: il s'agit d'une liste de trois items.
<?xml version="1.0" encoding="UTF-8"?> <items version="1.0" type="1" reload="1" locate="1"> <!-- items type : 1 = standard list reload : 1 = Reload each show, 0 = No reloading locate : 1 = User can locate the list, 0 = User can't locate the list --> <item type="1"> <!-- item type : 1 = item with image, 2 = item without image --> <img>http://image1.notulus.com/photos/article_news/Concorde2014_100x75.jpg</img> <!-- Image should be 80x60px for correct display --> <txt1>Concorde</txt1> <txt2>Nouvel EP</txt2> <txt3>Musique</txt3> <link type="1" url="http://www.notulus.com/iphoneV2/iphone_affiche_news.php?id=3917" title="News - Musique"/> <!-- link type : 1 = url to html content, 4 = url to xml sub-list --> </item> <item type="1"> <img>http://image1.notulus.com/photos/article_news/FestivalGerardmer2014_100x75.jpg</img> <txt1>Festival de Gérardmer</txt1> <txt2>Palmarès</txt2> <txt3>Cinéma</txt3> <link type="1" url="http://www.notulus.com/iphoneV2/iphone_affiche_news.php?id=3914" title="News - Cinéma"/> </item> <item type="2"> <img/><!-- no image for item type = 2 --> <txt1>Nos coups de coeur à l'affiche</txt1> <txt2>Cinéma</txt2> <txt3>(sous-liste)</txt3> <link type="4" url="http://fpierrat.fr/xml/exemple/sous-liste-exemple.xml" title="A l'affiche"/> </item> </items>
La structure du fichier est simple: la liste est représentée par un élément <items>, qui contient un noeud <item> pour chaque entrée de la liste.
Chaque item contient une vignette (<img>), une à trois lignes de texte (<txt1>, <txt2> et <txt3>), et un lien (<link>) qui définit l'action à mener quand l'utilisateur clique sur l'item dans la liste.
Le lien peut pointer vers une page html ou vers une sous-liste xml (cf. attribut "type" de <link>).
L'image est facultative (cf. attribut "type" de <item>).
L'attribut "type" de <item> permet également de mettre en oeuvre des items avec des fontions spécifiques, comme par exemple l'ajout d'éléments dans un panier:
L'élément <items>
Contenu
Une liste d'éléments <item> (version 1.0) ou d'éléments <section> (version 1.1).
l'attribut "version" :
- "1.0" = liste d'items.
La liste <items> contient des éléments <item>. - "1.1" = liste d'items regroupés par sections.
La liste <items> contient des éléments <section> qui regroupent les éléments <item>.
l'attribut "type" :
- "1" = liste standard.
C'est la seule valeur disponible pour le moment, d'autres types de listes pourront apparaître en fonction des besoins remontés par les utilisateurs.
l'attribut "reload" :
- "1" = Recharger automatiquement la liste.
A chaque fois que cette liste est affichée, elle est d'abord rechargée depuis le serveur. - "0" = Ne pas recharger [valeur par défaut].
La liste est chargée et mémorisée en local sur le smartphone lors du premier affichage. Lorsque l'utilisateur revient ensuite sur la même liste, les données mémorisées sont réafichées sans nouveau chergement depuis le serveur.
Pour éviter des temps de chargement inutiles, laissez la valeur de "reload" à zéro pour les listes statiques, ou les listes dynamiques portant sur des données dont les mises à jour sont peu fréquentes.
Fixez la valeur de "reload" à 1 uniquement pour les listes dynamiques fréquemment mises à jour, ou pour les listes dont le contenu peut être modifié par les intéractions de l'utilisateur (un panier doit toujours être réactualisé par exemple).
l'attribut "locate" :
- "1" = Bouton de géolocalisation disponible
Le bouton de géolocalisation apparaît dans la barre supérieure de l'application. L'utilisateur peut l'activer (il devient vert) ou le désactiver (il passe au rouge).
Lorsque la géolocalisation est activée, l'application passe les coordonnées géographiques du smartphone à chaque appel de l'URL de la liste XML. Dans le cas d'une liste dynamique (générée à la volée par un script côté serveur), cela vous permet de déterminer le contenu à afficher en fonction de la géolocalisation de l'utilisateur (points de vente les plus proches, événements à proximité, etc.). - "0" = Pas de bouton de géolocalisation
L'utilisateur ne peut pas activer la géolocalisation de la liste.
Aucune coordonnée géographique n'est transmise par l'application.
L'élément <section>
L'élément <section> n'est défini que dans la version 1.1 (attribut version="1.1" de <items>).
Il est obligatoire dans cette version: un <item> ne peut être défini directement dans <items>, il doit être inclus dans une <section>.
Il permet de regrouper les éléments <item>: regroupement d'articles par catégories, de news par rubriques, etc....
Contenu
Une liste d'éléments <item>.
l'attribut "title" :
Il définit le titre de la rubrique qui sera affiché par l'application.
L'élément <item>
Contenu
L'éléments <item> contient les éléments suivants :
- <img> : contient l'url de la vignette.
Ce doit être une image au format .jpg ou .png, de 80 pixels de largeur et de 60 pixels de hauteur.
Le respect des dimensions est important: une vignette de dimensions sera redimensionnée, ce qui peut causer des déformations, pixellisations, etc. Par ailleurs, le temps de téléchargement de fichiers trop gros sera préjudiciable à la fluidité de l'affichage. - <txt1>, <txt2> et <txt3> : Vous disposez de trois lignes de texte par item de liste.
Les trois sont facultatives, vous pouvez ne fournir que les 2 premières, ou la première et la dernière, etc, selon vos choix de présentation. - <link> : l'url qui sera activée lorsque l'utilisateur choisit cet item.
L'élément <link> est détaillé plus bas.
l'attribut "type" :
- "1" = avec vignette.
- "2" = sans vignette.
L'élément <link>
Contenu
L'éléments <link> est un élément vide.
l'attribut "type" :
- "1" = page HTML : le choix de cet item par l'utilisateur ouvre la page html pointée par l'attribut "url".
- "4" = sous-liste XML : lorsque l'utilisateur choisit cet item, c'est une nouvelle liste qui est ouverte.
Le contenu de cette sous-liste est décrit par le fichier XML (statique ou dynamique) pointé par l'attribut "url".
l'attribut "url" :
L'attribut "url" contient l'url appelée lorsque l'utilisateur sélectionne cet item dans la liste.
l'attribut "title" :
L'attribut "title" contient le libellé qui apparaîtra dans la barre de titre de la page appelée (page HTML ou liste XML).