Démarrez avec Convertigo Studio - WordPress.com...Démarrez avec Convertigo Studio [Draft] RESUME Vous souhaitez créer en une fois une application mobile pour iOS, Android et Windows

Démarrez avec Convertigo

Studio [Draft]

RESUME Vous souhaitez créer en une fois une application

mobile pour iOS, Android et Windows Phone, mais

vous ne connaissez pas ces langages et vous n'avez

pas le temps ou les moyens de créer une application

par mobile ? Apprenez Convertigo Studio !

Convertigo Studio : démarrage [Draft] 1

Sommaire

Partie 1 : Pour commencer

Chapitre 1. 1. Installer Convertigo Studio

Chapitre 1.2. Démarrez votre premier projet

Chapitre 1.3. Personnaliser son projet avec app.html

Partie 2 : L'interface de programmation (API)

Chapitre 2.1. Par exemple, connectons-nous à un flux RSS

Chapitre 2.2. Utilisons l'objet Sequence et le Call

Chapitre 2.3. Retourner des données XML vers le mobile avec les steps

XML

Chapitre 2.4. Gérer les itérations pour traiter plusieurs éléments

Chapitre 2.5. Filtrer des données XML avec les steps Javascripts

Chapitre 2.6. Gérer les conditions avec le step jIf

Chapitre 2.7. La Single-valued Variable et le Test Case

Chapitre 2.8. La Multi-valued Variable et la boucle jIterator

Partie 3 : L'interaction homme-machine (IHM)

Chapitre 3.1. Afficher des données XML dans l'application

Chapitre 3.2. L'outil de développement

Chapitre 3.3. Utiliser les widgets jQuery Mobile

Chapitre 3.4. Utiliser des widgets personnalisés

Chapitre 3.5. Modifier la mise en page avec custom.css

Chapitre 3.6. Gérer des événements graphiques avec custom.js

Chapitre 3.7. Corriger les warnings et les erreurs

Chapitre 3.8. Installer son application sur son téléphone

Partie 4 : Annexe

Annexe et liens utiles

2

2

5

11

15

15

20

23

26

30

34

36

41

46

46

50

54

59

63

66

73

78

84

84

Bonjour à toutes et à tous !

Bienvenue dans ce tutoriel où vous allez découvrir comment développer votre propre application pour

mobile.

Vous êtes programmeur et vous avez toujours rêvé de créer une application sur votre téléphone mais vous n’avez

aucune connaissance dans ce domaine, alors ce tutoriel est fait pour vous !

Comment crée-t-on une application mobile ?

Une application mobile est tout d’abord un logiciel installé sur son téléphone portable, que l’on a téléchargé par le

biais d’une boutique en ligne (App Store, Google Play, Windows Phone Store…) ou bien qui peut être préinstallé

par le constructeur.

Chaque marque de téléphone possède son propre environnement de développement et son propre langage pour

pouvoir faire fonctionner ses applications : par exemple le Java pour Android et BlackBerry, l’Objective-C et le

Pascal pour iOS, le C++/C# et Visual Basic pour Windows Phone.

Mais alors, doit-on connaître tous ces langages pour créer son application ?

Non, heureusement il existe un langage universel qui est compréhensible par tous les téléphones : le langage

HTML.

C’est avec ce langage que sont créés les sites internet et c’est grâce à ce langage que nous allons pouvoir créer

notre propre application mobile.

Ne vous inquiétez pas, il ne vous sera pas nécessaire d’apprendre entièrement le langage HTML pour suivre ce

tutoriel car nous allons utiliser un logiciel qui permet de créer simplement et rapidement une application mobile sur

Android, iOS, et Windows Phone.

Avant de commencer, sachez que l’installation d’une application sur iPhone et Windows Phone requiert un compte développeur

payant chez Apple et Microsoft (voir partie 3 chapitre 8).


Partie 1 : Pour commencer

Chapitre 1. 1. Installer Convertigo Studio

Convertigo Studio est une plateforme de développement d’application mobile qui est utilisée à la fois par

des entreprises et par des particuliers.

C’est un outil simple et gratuit qui permet de connecter, construire, et déployer des applications mobiles

sur Android, iOS, ou encore Windows Phone 8, et que l’on va utiliser tout au long de ce tutoriel.

Bien sûr, Convertigo n'est pas le seul outil pour créer des applications mobiles on peut trouver par exemple :

Xcode

Android SDK

VisualStudio 2013.

Par contre, cet outil permet de créer en une seule fois une application qui fonctionne sur toutes les plateformes

d'une part, et qui permet de connecter les applications mobile à des services de données que l'on trouve sur

internet ou dans les entreprises d'autre part.

En plus Convertigo est Open Source, ce qui ne gâte rien.

Convertigo Studio est disponible pour Windows, Linux et MacOS X mais ce cours à été réalisé avec un Studio sous

Windows.

Si vous avez déjà programmé avec Eclipse, vous ne serez pas dépaysés car Convertigo Studio est un plug-in

d’Eclipse.

Attention ! Désolé pour ceux qui ont du mal avec la langue de Shakespeare mais Convertigo Studio est en Anglais

comme Eclipse.

Ne vous en faites pas, ce tutoriel est là pour vous aider !

Je vous invite donc à télécharger Convertigo Studio en cliquant sur le lien ci-dessous :

http://www.convertigo.com/download/

La procédure d'installation du Convertigo Studio

Suivez la procédure d’installation :

http://www.convertigo.com/download/


Attention ! Vous devez impérativement installer Convertigo Studio dans un dossier où vous avez les droits de

lecture et d’écriture pour qu’il puisse fonctionner correctement, c’est pourquoi nous vous conseillons de l’installer à

la racine du disque local C:\

Une fois installé, lancez Convertigo Studio et définissez le dossier dans lequel vous voulez sauvegarder vos projets,

en oubliant pas de cocher la case « Use this as the default and do not ask again » pour ne plus faire réapparaître ce

message à chaque démarrage.

Il vous est ensuite demandé de configurer le proxy mais nous ne l’utiliserons pas donc vous pouvez cliquer

sur Next.


Comment obtenir son PSC ? L'indispensable pour déployer vos projets

Pour continuer, vous avez besoin d’un Personal Studio Configuration (PSC) afin que Convertigo Studio puisse

déployer vos futurs projets sur son serveur Cloud et créer vos applications mobiles.

Ce PSC vous permettra également d’accéder au forum de Convertigo.

Cochez « I do not have a PSC and I want to register now » puis remplissez le formulaire : prénom, nom, adresse

mail (inutile de remplir les champs concernant l’entreprise), puis le pseudo et le mot de passe que vous voulez

utiliser sur le forum Convertigo.


Après avoir cliqué sur Next, un message d'erreur vous sera affiché avec un lien en dessous. C'est normal : notre

système de registration ayant changé, il vous suffit de cliquer sur ce lien pour arriver sur notre site web.


Ensuite, vous vous registrez (enregistrez) sur le site web, puis vous obtiendrez votre PSC que vous devrez copier-

coller dans la fenêtre ci-dessous.

Enfin, cliquez sur Next puis Finish et Convertigo Studio démarre avec une page de bienvenue.

Maintenant que votre environnement est installé, démarrez votre premier projet dans le prochain chapitre !

Chapitre 1.2. Démarrez votre premier projet

Bienvenue dans Convertigo Studio !


Nous allons maintenant pouvoir créer notre première application, un simple Hello World !, et prendre en main

Convertigo Studio.

Ressources de Convertigo Studio

Tout d’abord, sur la page de démarrage sont présentés plusieurs tutoriels en vidéo. Attention, notre système ayant

changé, retrouvez l’ensemble de ces vidéos en cliquant juste ici.

Par ailleurs, à noter que ces vidéos traitent d’une ancienne version de Convertigo Studio donc il peut y avoir

quelques différences.

Vous avez également un autre site à connaître très important, c’est toute la documentation de Convertigo Studio

disponible en anglais ici : http://www.convertigo.com/technical-documentation/

Vous en aurez grand besoin pour réaliser vos propres projets après ce tutoriel, notamment le Reference Manual où

sont répertoriés tous les objets que nous allons utiliser.

Prendre en main Convertigo Studio

Pour commencer, fermez la page de bienvenue. Vous arrivez alors dans l’interface de Convertigo Studio.

Vous pourrez toujours rouvrir cette page de bienvenue dans Help > Welcome.

http://www.convertigo.com/quick-start-videos/

http://www.convertigo.com/technical-documentation/


Tout d’abord, les fervents adeptes d’Eclipse remarqueront que Convertigo Studio est organisé exactement de la

même façon :

- La vue Projects en haut à gauche dans laquelle est présentée l’arborescence de vos projets.

- La console en bas dans laquelle sont affichés les sorties et les erreurs.

- Et la fenêtre en haut à droite dans laquelle sont affichés les projets ouverts.

Deux nouvelles fenêtres sont présentes dans Convertigo Studio :

- La fenêtre Properties en bas à gauche qui montre les propriétés des objets sélectionnés dans la vue Projects.

- Et la fenêtre Source Picker au centre qui va nous permettre d’affecter des variables à nos objets mais nous

verrons cela un peu plus tard.

Vous pouvez fermer ces fenêtres en cliquant sur la petite croix à droite de chaque onglet, vous pourrez toujours les

rouvrir en allant dans Window > Reset Perspective.

Pour le moment, à part la console, toutes ces fenêtres sont vides, il est peut-être temps de créer un nouveau projet

n’est-ce pas ?


Créer votre première application !

Pour créer un nouveau projet, allez dans l’onglet File > New > Project ou bien en cliquant sur le petit bouton juste en

dessous.

Sélectionnez ensuite Convertigo Projects >Mobile > Mobile application project puis nommez votre projet de cette

façon : VotrePseudo_NomDuProjet.

Votre projet sera déployé plus tard dans le serveur Cloud commun de Convertigo donc vous devez choisir un nom

unique de sorte que vous puissiez ensuite l’utiliser sur votre téléphone et ne pas avoir le malheur que le projet de

quelqu’un d’autre, portant le même nom, écrase votre projet.


Cliquez sur Finish et ça y est votre projet est créé !

Vous pouvez dès à présent voir l’arborescence de votre projet, celui-ci contient pour le moment deux sous-dossiers

:

- MobileApplication qui contient les différentes plateformes par défaut sur lesquelles vous pourrez produire votre

application.

- Connectors qui contient pour le moment une transaction par défaut car nous n’avons aucun connecteurs mais

nous verrons cela un peu plus tard.

Pour exécuter votre projet c’est très simple, faites clic droit sur MobileApplication puis Launch in test platform, une

page internet s’ouvre alors et vous arrivez sur le Convertigo Enterprise Mobility Server.

Là, vous pouvez voir ce que donne votre application sur un téléphone :


Vous avez également la possibilité de faire clic droit puis Launch Fullscreen et votre application apparaît alors sur

toute la page :

C'était plutôt simple de démarrez votre projet, vous ne trouvez pas ? Mais qu'est-ce qu'il s'est passé au

juste au niveau de l'affichage ? Comment pouvons nous modifier cette application ?


C'est ce que vous allez découvrir dans le prochain chapitre.

Chapitre 1.3. Personnaliser son projet avec app.html

Après avoir lu le précédent chapitre, vous vous demandez surement comment un Hello world ! peut s’afficher alors

que je n’ai rien fait ?

En fait, par défaut lorsque vous créez un projet, des fichiers HTML sont créés avec un contenu par défaut.

Vous n’avez donc aucune procédure à faire car Convertigo Studio crée automatiquement toute la structure de votre

application en HTML avec notre Hello World ! écrit quelque part.

Maintenant la question qu’il faut se poser c’est : Comment fait-on pour afficher autre chose que Hello World ! ?

Modifions et personnalisons notre projet d'application mobile

Et bien c’est ce que nous allons voir dans ce chapitre, nous allons apprendre comment personnaliser notre

application mobile.

Pour cela, vous vous en doutez bien, nous allons voir quelques bases du langage HTML.

Ne partez pas en courant vous verrez c’est simple, même si vous n’avez jamais programmé en HTML de votre vie.

Tout d’abord retournons sur Convertigo Studio.

Dans la vue Projects en haut à gauche, vous avez peut-être remarqué qu’il y a un deuxième onglet nommé Project

Explorer, cliquez dessus.

Vous voyez maintenant une nouvelle arborescence, toujours de votre même projet.


Il s’agit en fait de l’arborescence de votre projet tel qu’il est enregistré sur votre ordinateur, tandis que l’autre onglet

est utilisé pour créer des fonctions et des variables de manière simplifiée, sans que vous ayez besoin d’écrire une

once de code HTML.

Maintenant, allez dans NomDuProjet > DisplayObjects > mobile et cliquez sur app.html.

Le fichier s’ouvre alors à droite et on peut voir son contenu.

Vous pouvez double-cliquer sur l’onglet app.html que vous avez ouvert pour mettre en plein écran et observons

maintenant ce qu’il contient.

app.html contient les instructions que le navigateur internet va exécuter, toutes ces instructions sont écrites par

défaut par Convertigo Studio et commentées pour vous aider.

Descendez tout en bas de la page et vous allez voir notre Hello World !


C’est à cette partie que nous allons plus particulièrement nous intéresser car tout ce qui est au-dessus concerne les

liens à d’autres fichiers comme les fichiers .css qui permettent la mise en forme de la page web (ici notre

application).

Et oui ! Nous avons produit pour l’instant ce qui s’appelle une application web !

Ce n’est en fait pas tout à fait une application mobile car on ne peut pas encore l’installer sur son téléphone, mais

cela est une étape intermédiaire qui va nous être utile pour tester notre application.

En effet, on ne va pas à chaque fois créer l’application, la télécharger, l’installer sur son téléphone, puis l’exécuter à

chaque fois qu’on a modifié notre code.

De plus, avec l’application web on peut ouvrir l’outil de développement du navigateur et ainsi débugger notre

application.

Notion d'HTML : comment l'affichage fonctionne ?

Maintenant passons aux choses sérieuses. Comment tout cela fonctionne réellement ?

Tout d’abord, vous remarquerez que la partie du fichier app.html qui nous intéresse commence par<body>.

Pour ceux qui n’ont jamais vu le langage HTML, cela s’appelle une balise.

Le langage HTML est organisé avec des balises, par exemple toutes les instructions du fichier app.html sont situées

entre les balises <html> … </html>.

La partie qui nous intéresse se situe entre les balises <body> … </body>, c’est le corps de notre application c’est-à-

dire ce qui contient la page qui va être affiché sur le navigateur.


On distingue trois parties dans le body : la top bar, le content, et le footer.

Vous avez donc sans doute deviné que pour modifier l’apparence de notre application, il suffit de modifier les

instructions situées entre les balises <div> … </div> de la top bar, du content, ou du footer.

Allez-y, remplacez « Hello World ! » par « Salut les gens ! » par exemple, sauvegardez en cliquant sur le

bouton Save en haut à gauche ou en appuyant sur la touche CTRL+S, puis actualisez la page internet, le texte a

changé !

Si rien ne change, vous devez désactiver le cache de votre navigateur (voir partie 3 chapitre 2).

C’est bien beau tout ça, mais comment faire un long texte organisé et stylisé ?


Et bien pour ça, il faut utiliser ces fameuses balises, en voici quelques-unes :

- <b> … </b> met le texte en gras (bold)

- <br> permet un saut de ligne (une seule balise)

- <h1> … </h1> met le texte en style titre 1

- <i> … </i> met le texte en italique

- <p> … </p> forme un paragraphe

A noter que les balises de fin sont caractérisé par un slash « / », il ne faut pas l’oublier.

Il existe encore pleins d’autres balises que vous pouvez découvrir en appuyant seulement sur la touche « < » dans

app.html, une petite fenêtre apparaît alors avec la liste de toutes les balises et leur description respective.

Vous avez également la possibilité de modifier le titre de l’onglet de la page affichée par notre application dans la

première balise du body :

Vous savez dès à présent créer une application avec votre texte dedans, par exemple une histoire, des poèmes, ou

encore des blagues…

Oui d’accord, mais elle ne fait rien d’autre pour le moment et elle n’est pas très utile !

Et bien maintenant nous allons voir comment améliorer notre application : récupérer des informations sur

un site, trier ces informations, créer notre propre base de données, interagir avec notre application… bref

on va commencer à programmer sur Convertigo Studio.

Partie 2 : L'interface de programmation (API)

Chapitre 2.1. Par exemple, connectons-nous à un flux RSS

Dans cette deuxième partie, nous allons voir comment on peut gérer l'interface de programmation (API)

entre le mobile et le serveur Convertigo.

Pour cela nous allons créer un projet qui va récupérer les news de la semaine sur le site de CNN puis les

afficher.


Créer un projet pour consommer des flux RSS

Les flux RSS sont en format XML et sont souvent utilisés par les sites d'actualité et les blogs pour présenter les

titres des dernières informations consultables.

Nous allons donc nous connecter sur le flux RSS de CNN pour récupérer les news, pour cela, on va utiliser des

objets.

Tout d’abord allez sur le site de CNN : http://rss.cnn.com/rss/edition.rss

Vous apercevez en dessous de Current Feed Content toutes les news avec le titre, la date, et la description.

Ensuite, créons un nouveau projet : File > News > Project puis sélectionnez Convertigo Projects > Web services

consumption > REST Web service.

Nommez votre projet avec un nom unique comme le précédent projet : VotrePseudo_NomDuProjet

http://rss.cnn.com/rss/edition.rss


A la page suivante, on vous demande de nommer un connecteur, c’est le premier objet que l’on va utiliser et il va

nous permettre de se connecter sur le flux RSS de CNN.

En cliquant sur Next, on va vous demander de saisir l’adresse du serveur auquel le connecteur doit se connecter.

Dans HTTP Server, saisissez « rss.cnn.com » et dans HTTP Port saisissez « 80 » qui est le port utilisé par défaut.

Le port est en quelque sorte la porte d’entrée que vous voulez utiliser pour vous accéder au serveur.

Ensuite cliquez sur Finish et ça y est, vous avez créé votre projet avec votre premier connecteur.


Si vous souhaitez plus tard modifier l’adresse serveur de votre connecteur, il suffit de sélectionner votre connecteur

et de modifier Base properties > Server dans la fenêtre Properties en bas à gauche.

Sauvegardez votre connecteur en cliquant sur l’icône Save all en haut à droite de la vue Projects.

Attention ! Il ne s’agit pas du même bouton que celui situé à côté de New Project car celui-là sauvegarde les fichiers

ouverts dans la fenêtre de droite tandis celui-ci sauvegarde l’arborescence de notre projet, pensez donc bien à

sauvegarder les deux si vous modifiez les deux.

Récupérer un Flux RSS

Maintenant que nous pouvons nous connecter au serveur, il va falloir récupérer les Feeds c’est-à-dire les news qui

se situent, rappelons-le, à l’adresse http://rss.cnn.com/rss/edition.rss.

Pour cela, on va créer un nouvel objet appelé Transaction : faites clic droit sur le connecteur puis New >

Transaction.

Comme je l’ai dit au début du chapitre, les flux RSS renvoient des fichiers XML donc sélectionnez XML HTTP

Transaction.

Cliquez sur Next, nommez-la « getFeeds », puis Finish et votre transaction est créée, il faut alors modifier ses

paramètres dans la fenêtre Properties.

Dans Base properties > subpath, ajoutez le sous-chemin auquel le connecteur doit se diriger soit « rss/edition.rss ».

http://rss.cnn.com/rss/edition.rss


Vous pouvez désormais récupérer les news de CNN, pour cela faites clic droit sur la transaction puis Execute, en

oubliant pas de sauvegarder auparavant.

Le résultat s’affiche sous forme de fichier XML dans la fenêtre à droite.

Si vous regardez dans l’onglet XML, vous remarquerez que lui aussi est organisé avec des balises.

Ces grâce à ces balises que nous allons pouvoir filtrer ces informations et récupérer uniquement ce qui nous

intéresse puis l’afficher dans notre application.


Chapitre 2.2. Utilisons l'objet Sequence et le Call

Nous avons vu précédemment comment se connecter au flux RSS de CNN et afficher la page internet sous

forme d’un fichier XML, nous allons maintenant voir comment récupérer et filtrer les informations qui nous

intéressent, à savoir le titre, la description, et la date de chaque news.

Pour cela nous allons utiliser une séquence, c’est en quelque sorte une fonction.

Implémenter le traitement du flux RSS

Comme en programmation, cette séquence aura des paramètres, appelées Variables dans Convertigo Studio, et

des steps (étapes) qui sont en fait les instructions de la fonction.

Sélectionnez donc le projet que nous avons créé dans le chapitre précédent et faites clic droit New > Sequence.


Cliquez sur Next, nommez votre séquence « getandfilterFeeds », puis cliquez sur Finish.

Sauvegardez et vous avez dès à présent votre première séquence !

Pour le moment elle est vide donc elle ne fait rien, on va donc créer maintenant des steps c’est-à-dire des

instructions.

Le premier step que nous allons créer sera un step qui va appeler la transaction getFeeds, que nous avons créé

dans le chapitre précédent, car ce qu’on cherche à faire c’est récupérer les news dans le fichier XML affiché par

cette transaction.

On fait donc, comme en programmation, un call c’est-à-dire un appel de fonction.

Faites un clic droit sur la séquence puis New > Step, une fenêtre s’ouvre alors avec tous les steps.

Dans Convertigo request steps, sélectionnez Call Transaction puis cliquez sur Next puis Finish (inutile de le

nommer).

A noter qu’il est également possible d’appeler une séquence avec le Call Sequence.

Vous remarquerez qu’une fois créé, le call s’est automatiquement renommé et appelle la transaction par défaut.

Il faut alors modifier les paramètres du call dans la fenêtre Properties dans Base properties > Transactionen

cliquant sur le petit bouton avec « … » à droite.

Une petite fenêtre s’ouvre, sélectionnez ensuite votre transaction getFeeds .


Raccourcis pour appeler une transaction

Il y a également deux autres manières plus simples et plus rapides de procéder :

- Sélectionnez votre transaction getFeeds et faites copier (clic droit ou CTRL+C) et coller dans votre séquence

(sélectionnez-là puis clic droit ou CTRL+V).

- Ou bien vous pouvez également faire un « drag and drop » c’est-à-dire que vous restez enfoncé sur la touche

CTRL, vous restez cliqué sur votre transaction getFeeds et vous la glissez jusqu’à la séquence.

Cela est également possible avec une séquence, cela crée alors un Call Sequence.

Ca y est ! Votre séquence fait quelque chose, vous pouvez le voir en faisant clic droit puis Execute et vous voyez

bien que la séquence appelle la transaction getFeeds et affiche le fichier XML dans la console.


Maintenant nous allons définir ce que cette séquence doit retourner comme données au mobile.

Chapitre 2.3. Retourner des données XML vers le mobile avec les steps XML

Maintenant, créons un step qui va nous récupérer uniquement les informations qui nous intéressent, à

savoir le titre, la description, et la date de publication de chaque news.

Choisir les éléments à retourner au mobile

En fait, il ne s’agira pas d’un seul step mais de trois steps puisque nous aurons trois éléments : Title,Description,

et Date.

Comme tout à l’heure, faite clic droit sur la séquence, New > Step, et choisissez cette fois le step Elementdans XML

steps (inutile de le nommer).

Dans Convertigo Studio, les variables d'une fonction (séquence) sont appelés Element (élément).

Pourquoi ? Parce-que ce step peut être utilisé seulement pour une sortie XML par exemple, et pour ne pas le

confondre avec le step Variable qui est utilisé à la fois comme paramètre et comme variable dans une séquence.

Faites deux copier-coller pour obtenir nos trois éléments et renommez-les dans la fenêtre Properties dansBase

properties > Node name.

Nous avons maintenant nos trois éléments mais ils prennent la valeur vide "", comment faire pour affecter le titre à

l’élément Title ?


Jetez à nouveau un petit coup d’œil dans la console : comme vous le voyez, le titre, la description, et la date de

chaque news se situent entre les balises <title> … </title>, <description> … </description>, et <pubDate> …

</pubDate>, elles-mêmes situées entre les balises <item> … </item>.

Il faut donc récupérer ce schéma pour obtenir chaque item et ainsi récupérer son contenu.

Mise à jour du Schéma (structure des données)

Pour cela, sélectionnez la transaction getFeeds et faites clic droit Update schema from current generated XML puis

sauvegardez.

Attention, il faut que la transaction soit exécutée auparavant en faisant clic droit Execute.

Maintenant, nous avons en fait récupéré le schéma, c’est-à-dire la structure du fichier XML qu’on obtient avec la

transaction, dans le call.

Pour le voir, sélectionnez le call et faites clic droit Show in Picker, vous avez alors le schéma qui apparaît dans la

fenêtre Source Picker au centre.


En agrandissant (double cliquez sur l’onglet Source Picker), vous pouvez voir dans document > transaction >

document > rss > channel > item toutes les balises que l’on va pouvoir affecter à nos éléments.

Les balises qui nous intéressent sont title, description, et pubDate, il vous suffit de faire glisser les balises vers

l’élément qui correspond.

Vous remarquerez que le signe « = » a disparu et il apparaît un « @ » avec le chemin de la balise (source) entre

parenthèses.


Cela signifie que l’élément fait le lien avec la balise et qu’il prend en valeur le texte situé entre les deux balises, c’est

donc comme une variable de type String.

Par ailleurs, la source peut être modifiée en refaisant glisser une autre balise sur l’élément.

Maintenant que nous avons nos éléments, on ne va pas les balancer comme ça dans le fichier XML, il serait peut-

être plus judicieux de mieux organiser ça, non ?

Création d'une structure de sortie

Pour cela, il y a un step appelé Complex qui est en fait un dossier pour ranger des steps et qui affichera

cessteps entre deux balises, donc au lieu de sortir un gros pavé de 150 lignes, on aura un paragraphe pour

chaque news, ce n’est pas mieux comme ça ?

Créez un nouveau step (clic droit sur la séquence New > Step) et choisissez Complex dans XML steps.

Ensuite dans la fenêtre Properties, mettez « News » dans Base properties > Node name, cela créera des

balises <News> … </News>.

Enfin, déplacez les trois éléments dans le Complex, sauvegardez, et voilà !

Nous avons pu voir comment retourner des données XML vers le mobile avec les steps XML. Nous allons

maintenant traiter en boucle les différentes news.

Chapitre 2.4. Gérer les itérations pour traiter plusieurs éléments

Le Step Iterator


A la fin du chapitre précédent, vous avez peut-être eu la curiosité d’exécuter notre séquence, si ce n’est pas le cas

faites-le maintenant.

Observons le résultat dans la console :

La sortie XML de la séquence est également visible dans la fenêtre en haut à droite.

Vous remarquez que notre séquence n’affiche qu’une seule news, tout simplement parce que nos trois éléments

n’effectuent qu’une seule sortie, nous avons donc besoin d’effectuer une boucle qui va itérer toutes les news.

Comment faire ? C’est très simple, il existe un step appelé Iterator et on va l’utiliser pour itérer les balises<item> …

</items> qui contiennent le titre, la description, et la date de chaque news.

Voilà pourquoi il faut organiser les éléments dans un Complex !


Faites clic droit sur le Complex <News> puis New > Step et choisissez Iterator dans Flow control steps.

Indiquer sur quel élément il faut itérer

Le step Iterator fonctionne de la même manière qu’un élément : remontrez le schéma du call (clic droit Show in

Picker) et faites glisser la balise item vers Iterator.

Placer les éléments pour chaque itération

Créez maintenant un autre step Complex dans Iterator (clic droit New > Step et choissisez Complex dansXML

steps), mettez « Item » dans la fenêtre Properties dans Base properties > Node name, puis déplacez les trois

éléments dans le Complex.


Attention, rappelons-le, on a affecté à nos trois éléments les balises title, description, et pubDateprovenant du

schéma du call, or celui-ci n’est pas itéré dans notre boucle. Il faut donc modifier la source de nos trois éléments en

prenant cette fois-ci les balises du schéma de Iterator.

Sur Iterator, faites clic droit Show in Picker et dans item faites glisser les balises vers l’élément qui correspond.

Cette fois, la source n’est plus document/rss/channel/item/title mais directement title soit la balise du item qui est

itéré.

Enfin, exécutez (sans oublier de sauvegarder) votre séquence et ça y est, on obtient la liste de toutes lesnews avec

leur titre, leur description, et leur date de publication.


Tout cela c'est fort bien ! Mais, si je veux que seule une partie des données soient retounées vers le mobile

pour économiser de la bande passante réseau ? C'est ce que nous allons voir ensemble dans le chapitre

suivant.

Chapitre 2.5. Filtrer des données XML avec les steps Javascripts

Nous sommes désormais capables de récupérer et d’afficher le titre, description, et la date de publication

de toutes les news de CNN.

Comment faire pour afficher seulement les news d’aujourd’hui par exemple, ou pour afficher les news publiées à

20h00, ou encore afficher les news concernant Barack Obama ?

En programmation, on crée une fonction dans laquelle on va calculer la date et l’heure de la news et faire une

condition if n’est-ce pas ?

Et bien dans Convertigo Studio c’est la même chose : on va créer un step Javascript pour calculer la date et l’heure

et faire une condition.

Ça veut dire qu’on va devoir apprendre le cours Javascript ?

Non ne vous inquiétez pas, le Javascript est inspiré du langage Java et donc très similaire au Java, et nous allons

faire des calculs simples donc il suffit juste de connaître les bases de la programmation.

Traiter les données par un alogrithme spécifique

Tout d’abord, créez un nouveau step dans Iterator et choisissez Sequence JS dans Javascript steps.

Double cliquez sur la Sequence JS et elle s’ouvre dans la fenêtre de droite avec marqué « //todo », c’est là que

nous allons commencer à coder !


Attention, nous ne pouvons pas utiliser les éléments Title, Description, et Date car ils sont en format XML !

Nous devons donc récupérer ces éléments en format Javascript et pour cela, il y a le stepjSimpleSource.

Créez un nouveau step dans Iterator et choisissez jSimpleSource dans Javascript steps.

Faites deux copier-coller pour obtenir nos trois éléments Javascript et renommez-les dans la

fenêtreProperties dans Base properties > Variable name.

Vous pouvez donner le même nom que les éléments XML.

Déplacez ensuite le Complex <Item> et la Sequence JS après les éléments Javascript car les variables doivent être

initialisées au début, avant le calcul.

Pour terminer, il faut affecter la source de nos trois éléments Javascript.

Procédez de la même façon que dans le chapitre précédent : montrez le schéma de Iterator (clic droitShow in

Picker) et faites-glisser les balises title, description, et pubDate situées dans item.


Voilà, on peut à présent utiliser Title, Description, et Date comme des variables dans la Sequence JS.

C’est maintenant l’heure de l’exercice ! A vos claviers !

Un peu de code Javascript

Avant cela, il faut savoir qu’en Javascript les variables sont déclarées de cette façon :

1var nomdevariable = valeur;

« var » désigne n’importe quel type, ça peut être un entier, un réel, un caractère, une chaine… donc vous pouvez

affecter n’importe quelle valeur à la variable.

Maintenant que vous savez cela, commençons : dans la Sequence JS, nous allons récupérer l’année, le mois, et le

jour dans une variable que l’on va appeler « CurrentDate » puis les heures, les minutes, et les secondes dans une

variable que l’on va appeler « CurrentTime ».

Pour vous aider, rappelez-vous que l’élément Date est une variable de type String et que la date se présente sous

cette forme :

Nous avons donc 6 variables : day, month, year, hour, min, et sec.

Nous allons utiliser trois fonctions du Javascript qui sont également présentes dans le langage Java :

1String substring(int beginIndex, int endIndex)

La fonction substring() permet d’obtenir une sous-chaine de caractères à partir d’une chaine de caractères. La

sous-chaine commence avec le caractère de la chaine à l’indice beginIndex et se termine avec le caractère de la

chaine à l’indice endIndex-1.

1int parseInt(String str, int b)


La fonction parseInt() permet de convertir un nombre sous forme de chaine de caractères vers le type entier en

base b (ici la base b = 10).

1int indexOf(String str)

La fonction indexOf()renvoi l’index de la chaine str présente dans une chaine de caractères ou renvoi -1 si elle

n’est pas présente.

Voici un exemple de code :

1/*Pour calculer le mois, on peut utiliser un tableau ou une chaine de caractères 2qui contient tous les mois de l’année.*/ 3var tab = "JanFebMarAprMayJunJulAugSepOctNovDec" 4var day = Date.substring(5,7); 5//(indice du tableau)+1 ou (indice de la chaine)/3+1 donne le numéro du mois 6var month = tab.indexOf(Date.substring(8,11))/3+1; 7//Par convention d’écriture, le mois s’affiche avec deux chiffres comme le jour 8if(month<10) month = "0"+month; 9var year = Date.substring(12,16); 10//On obtient la date sous le format 1999-12-31 11var CurrentDate = year+"-"+month+"-"+day 12 13var hour = parseInt(Date.substring(17,19),10); 14var min = parseInt(Date.substring(20,22),10); 15var sec = parseInt(Date.substring(23,25),10); 16//On obtient l’heure sous le format 23h59min59s 17var CurrentTime1 = hour+"h"+min+"min"+sec+"s"; 18//On peut également obtenir l’heure en secondes 19var CurrentTime2 = hour*3600+min*60+sec+"s";

Nous voilà avec 3 variables CurrentDate, CurrentTime1, et CurrentTime2, il faut maintenant les afficher et pour cela

on va utiliser le step jElement.

Le step jElement convertit les variables Javascript en éléments XML donc il peut ensuite être utilisé comme le step

Element.

Utiliser le résultat calculé par du code Javascript

Créez un nouveau step dans le Complex <Item> et choisissez jElement.


Faites deux copier-coller et mettez le nom de nos 3 variables dans la fenêtre Properties dans Base properties >

Node name et dans Base properties > Expression.

Sauvegardez et exécutez la séquence, le résultat apparaît dans la console.

Attention, lorsque vous modifiez une Sequence JS il faut sauvegarder 2 fois : le fichier puis l’arborescence du projet.

Filtrer des données XML avec les steps Javascripts, c'est bien ce que nous voulions, non ? Dans le

prochain chapitre, nous allons gérer les conditions.

Chapitre 2.6. Gérer les conditions avec le step jIf

Maintenant que nous avons récupéré la date et l’heure des news, nous allons devoir faire une condition

dans le but de filtrer ces news grâce au step jIf.

Le traitement conditionnel à patir du step jIf

Créez un nouveau step dans Iterator et choisissez jIf dans Flow control steps.


Le step jIf est un step conditionnel qui est basé sur une condition Javascript définie dans la

fenêtreProperties dans Base properties > Condition.

Les instructions situées dans le jIf ne s’effectuent seulement que si la condition est vraie.

Il existe aussi le step jIfThenElse qui fonctionne de la même façon que le step jIf.

On veut afficher les news selon la condition donc il faut déplacer le Complex <Item> dans le jIf.

Nous allons ensuite définir la condition du jIf à l’aide de trois variables booléennes : datetest, searchtest, et timetest.

Ecrire la condition du jIf

Comme la condition du jIf est en Javascript, nous pouvons utiliser la Sequence JS pour définir nos trois variables de

test.

Vous pouvez déjà mettre dans la condition de jIf : « datetest && searchtest && timetest ».

La condition sera vraie si et seulement si les trois variables de test ont pour valeur true.

Il faut maintenant définir nos trois variables de test :


- datetest prendra la valeur true si la date de la news est égale à une date spécifiée ou si aucune date n’est

spécifiée par l’utilisateur.

- searchtest prendra la valeur true si le titre ou la description de la news contient le texte qu’on recherche ou si le

texte n’est pas spécifié.

- timetest prendra la valeur true si l’heure de la news est égale à l’heure spécifiée ou si aucune heure n’est

spécifiée.

La date, le texte, et l’heure que l'on va choisir seront mis dans trois variables : datechoice, search, ettimechoice.

Voici un exemple de code que vous pouvez mettre à la suite dans la Sequence JS :

1//Le code qu’on a écrit dans le chapitre précédent : 2var tab = "JanFebMarAprMayJunJulAugSepOctNovDec" 3var day = Date.substring(5,7); 4var month = tab.indexOf(Date.substring(8,11))/3+1; 5if(month<10) month = "0"+month; 6var year = Date.substring(12,16); 7var CurrentDate = year+"-"+month+"-"+day 8 9var hour = parseInt(Date.substring(17,19),10); 10var min = parseInt(Date.substring(20,22),10); 11var sec = parseInt(Date.substring(23,25),10); 12var CurrentTime1 = hour+"h"+min+"min"+sec+"s"; 13var CurrentTime2 = hour*3600+min*60+sec+"s"; 14 15//Les variables de test : 16 17//datetest vaut true si datechoice est vide ou s’il est égal à CurrentDate 18var datetest = datechoice=="" || datechoice==CurrentDate; 19 20/*Ici, on utilise indexOf pour savoir si search est dans le titre ou dans la 21description (indexOf est alors positif ou nul) ou s’il ne l’est pas (indexOf 22vaut alors -1)*/ 23var searchtest = search=="" || Title.indexOf(search)>=0 || Description.indexOf(search)>=0; 24 25/*timetest vaut true si timechoice est vide ou s’il est égal à l’heure de la 26news (on ne prend en compte que les heures pour simplifier le filtre)*/ 27var timetest = timechoice=="" || timechoice==hour;

Nous allons tester cela mais nous devons tester avec des valeurs différentes ! La suite avec les variables et

le Test Case...

Chapitre 2.7. La Single-valued Variable et le Test Case

Définir des variables

Pour le moment on ne peut pas tester la séquence car les trois variables datechoice, search, et timechoicene sont

pas définies.

Ces variables seront spécifiées par l’utilisateur donc nous allons les mettre en paramètres de notre séquence en

utilisant l’objet Variable.


Sur la séquence getandfilterFeeds, faites clic droit New > Variable, choisissez Request single-valued variable, et

nommez-la « datechoice ».

Faites de même pour les variables search et timechoice.

Utiliser les variables

Il faut ensuite pouvoir accéder à ces variables : créez un nouveau step dans la séquence et choisissez Input

variables dans Others.

Mettez-le devant tous les autres steps puis faites clic droit Output true, cela signifie qu’on active la sortie du Input

variables c’est-à-dire qu’on affiche les variables dans la console (elles seront entre les balises<inputVars> …

</inputVars> ).

Ça y est, nous avons mis nos trois variables en tant que paramètres de notre séquence et nous pouvons les utiliser

dans la Sequence JS.


Cependant il y a un petit problème; comment faire pour saisir la valeur de ces variables ?

Définir des cas de test

Pour l’instant, on ne peut pas saisir directement leur valeur puisqu’il faut passer par le biais de l’application, or les

variables doivent être initialisés pour que la séquence puisse fonctionner.

Heureusement, il existe un objet appelé Test Case qui permet de tester la séquence avec des valeurs prédéfinies

pour les variables.

Sur la séquence, faites clic droit New > Test case, il apparaît alors l’objet Test Case qui contient nos trois variables.

Il suffit alors de mettre les valeurs dans la fenêtre Properties dans Base properties > Default value.

La valeur par défaut est null, enlevez-la en cliquant sur la petite croix à droite et ne mettez rien pour le moment car

on va d’abord tester la séquence sans filtre.


Pour exécuter la séquence avec le Test Case, sélectionnez le Test Case et faites clic droit Run (sans oublier de

sauvegarder avant).

On voit bien que dans le résultat, les trois variables sont vides et que toutes les news s’affichent.

Maintenant, essayez en mettant des valeurs dans le Test Case, par exemple la date d’aujourd’hui dansdatechoice,

ou l’heure de maintenant dans timechoice, ou encore une news en particulier que vous voulez rechercher

dans search.

N’oubliez pas que vous avez la possibilité de mettre plusieurs filtres en même temps.

Dans cet exemple, on recherche une news de CNN publiée le 16 juillet 2014 à 7 heures du matin concernant les

Etats-Unis.


Voici le résultat de la recherche :

On a donc obtenu au total 2 news.

Vous pouvez aussi créer plusieurs Test Case avec des valeurs différentes pour observer les différents résultats de

la recherche.

Voilà, vous savez dès à présent manipuler une séquence basique de A à Z avec des call, des éléments, des

conditions, des boucles, des calculs en Javascript, des variables, et des Test Case.

C’était simple non ? Néanmoins, nous n’avons vu que 15 % des objets que l’on peut utiliser sur Convertigo

Studio !

Vous allez donc voir dans une dernière partie comment manipuler un tableau et, de là, vous connaîtrez les

bases nécessaires pour réaliser une petite application mobile plutôt sympa.


Chapitre 2.8. La Multi-valued Variable et la boucle jIterator

Les variables multi valuées (tableau de variables)

Vous vous rappelez peut-être que lorsque vous avez créé les trois variables dans le chapitre précédent, vous aviez

la possibilité entre Request single-valued variable et Request mutli-valued variable.

Et bien nous allons utiliser cette fois le deuxième pour pouvoir affecter plusieurs valeurs à une variable, on va en

quelque sorte créer un tableau.

Pour cela, nous allons réutiliser la variable timechoice ce qui permettra d’afficher des news publiées à plusieurs

heures dans la journée.

Vous avez deux possibilités :

- Supprimez la variable timechoice (clic droit Delete) et créez une nouvelle variable (clic droit New > Variable sur la

séquence) en choisissant Request multi-valued variable.

- Sélectionnez la variable timechoice et faites clic droit Change to > MultiValued Variable.

Faites de même pour la variable timechoice dans le Test Case.

Si vous avez laissé une valeur dans la variable timechoice du Test Case, la valeur se transforme automatiquement

en tableau (entre crochet […]).

Désormais, on peut rajouter des valeurs dans la variable timechoice.


Retournez dans la fenêtre Properties dans Base properties > Default value et cliquez sur le petit bouton avec « …

» à droite, une fenêtre s’ouvre alors.

Ajoutez des valeurs en cliquant sur le petit clavier bleu ou supprimez-en en cliquant sur la croix rouge, modifiez

l’ordre avec les flèches jaunes.

On va ajouter par exemple « 3 » (3 heures du matin) et « 13 » (13 heures).

Sauf que si vous vous souvenez bien, dans la Sequence JS, la variable timechoice est traitée comme une simple

variable et non comme un tableau.

1var timetest = timechoice=="" || timechoice==hour;

Du coup, vous avez deux possibilités : soit vous créez une boucle for dans la Sequence JS pour parcourir les

éléments du tableau timechoice, soit vous utilisez le step jIterator.

Comme vous êtes là pour apprendre, on va utiliser la deuxième solution.

Itérer avec jIterator

Voici comment ça se présente : créez un nouveau step dans Iterator et choisissez jIterator dans Flow control steps.


Dans la fenêtre Properties, mettez « timechoice » dans Base properties > Expression, la boucle va ainsi itérer les

éléments du tableau timechoice.

Ensuite, déplacez le jIf dans le jIterator et créez une nouvelle Sequence JS dans le jIterator juste avant le jIfen la

nommant « timetest ».

C’est dans cette Sequence JS que nous allons faire le test de l’heure donc déplacez (couper-coller) la ligne de

code timetest de Sequence_JS vers timetest.

Pour finir, apportez juste deux modifications à cette ligne de code :

1var timetest = timechoice[0]=="" || timechoice[index]==hour;

Il faut bien entendu rajouter, comme en programmation, les crochets […] avec l’indice du tableau à l’intérieur des

crochets.

Le step jIterator fonctionne de la même manière qu’une boucle for sauf que vous n’avez pas besoin de l’écrire en

tant que ligne de code.

Pourquoi a-t-on mis « index » entre crochets alors que cette variable n’est pas définie ?

En fait, on a bien définie la variable index mais de façon implicite, lorsque qu’on a créé le jIterator, et indexest

incrémenté automatiquement dans le jIterator comme si c’était dans une boucle for.

Sauvegardez et exécutez le Test Case avec les nouvelles valeurs ajoutées au tableau timechoice.


Toutes les valeurs de timechoice apparaissent bien à la sortie de la séquence et on obtient les newspubliées à 3

heures, 7 heures, et 13 heures.

Attention, pour enlever le filtre de l’heure, il faut supprimer les variables et en laisser une qui prend la valeur vide "".

Si vous supprimez les variables en cliquant sur la croix à droite de Default value puis que vous enlevez le null de la

même façon, le tableau est créé mais avec la valeur null dedans car aucune variable n’a encore été créée,

aucune news ne sera alors affichée.

Il faut donc créer une variable vide : cliquez sur le petit clavier bleu et effacez « val ».


Vous remarquerez qu’après avoir cliqué sur OK, la Default value n’a pas changé c’est pourquoi il faut bien faire

attention à l’initialisation des Mutli-valued Variables.

La différence n’est visible que dans la sortie de la séquence lorsque vous l'exécutez :

• Sans créer de variable vide dans timechoice

• En créant la variable vide dans timechoice


Ça y est, vous êtes enfin arrivé à la fin de cette épuisante deuxième partie, ouf ! Mais notre application

n’a pas avancé. Il faut maintenant faire le lien entre les deux projets que l’on a créé.

Dans notre prochaine dernière partie, nous allons donc voir comment afficher les news dans notre

application et comment interagir avec elle pour filtrer les news, de quoi rendre ce tuto encore plus

intéressant.

Partie 3 : L'interaction homme-machine (IHM)

Chapitre 3.1. Afficher des données XML dans l'application

Dans cette troisième partie, nous allons donner vie au travail réalisé jusqu’à maintenant et nous allons

pouvoir le toucher du bout des doigts, sur notre téléphone !

Afficher les données sur le mobile

Tout d’abord nous allons retourner sur notre premier projet, j’espère que vous n’aviez pas écrit un roman à la place

du Hello World ! car vous allez l’effacer tout de suite.

Dans l’onglet Project Explorer, ouvrez app.html situé dans VotrePseudo_MobileApp > DisplayObjects > mobile.

Allez tout en bas de la page là où se situe le corps de notre application, souvenez-vous que vous pouvez

personnaliser votre application.

Pour ma part j’affiche dans la top bar « My News MobileApp » et dans le content « No news. » car pour le moment

je n’affiche aucune news.


Il faut ensuite afficher les news dans le content et pour cela notre application doit écouter la réponse de la

séquence getandfilterFeeds.

Rajoutez dans la balise de début du content, l'attribut suivant :

1<div data-role="content" data-c8o-listen="Demo_ReedFeeds.getandfilterFeeds">

data est un mot clé du langage HTML, c8o signifie Convertigo, et listen signifie qu’on va écouter une ou plusieurs

séquences.

On indique après le « = » le chemin de la séquence comme ceci : "NomduProjet.NomdelaSéquence ".

Si la séquence se situe dans le même projet que app.html, vous pouvez juste mettre".NomdelaSéquence".

Si on souhaite écouter plusieurs séquences, il suffit de les séparer par une virgule comme ceci

:"NomduProjet.NomdelaSéquence1, NomduProjet.NomdelaSéquence2 ".

Maintenant il faut créer une liste qui va contenir les éléments de chaque news.

Création d'une liste d'éléments pour les news

On va utiliser les balises <ul> … </ul> (qui signifie unordered list soit une liste non ordonnée) pour contenir toutes

les news, à l’intérieur desquelles on va mettre les balises <li> … </li>, qui seront en fait les éléments de la liste

c’est-à-dire chaque news, et enfin trois balises <p> … </p> (qui signifie paragraphe) pour afficher le titre, la

description, et la date de publication des news.

Voici le code :

1 2<div data-role="content" data-c8o-listen="Demo_ReedFeeds.getandfilterFeeds"> 3 No news. 4  5 <ul data-role="listview" data-c8o-each="Item"> 6  7 <li> 8  9 <p>__=Title__</p> 10 <p>__=Description__</p> 11 <p>__=Date__</p> 12 </li> 13 </ul> 14</div>

Dans la balise de début de liste, data-role est un mot clé de jQuery Mobile et une extension du langage HTML qui

signifie qu’on attribue un rôle à cette balise, ici le rôle de listview soit une vue de liste.

Dans la même balise, on met également l’attribut data-c8o-each="Item" ce qui signifie que pour

chaqueItem (rappelez-vous que chaque news est affiché dans notre séquence entre les balises <Item> …

</Item>) on va afficher les éléments entre les balises <li> … </li>.

En fait, cela va se comporter comme une boucle qui va afficher chaque news dans une liste.


Mise en place des données pour l'affichage

Enfin, pour afficher un élément de notre séquence, il faut l’écrire comme ceci : __=NomdelElement__.

Cela fonctionne également pour les jElement mais nous n’avons pas besoin d’afficherCurrentDate, CurrentTime1,

et CurrentTime2.

Il reste encore une dernière chose à faire pour que l’application puisse fonctionner, il faut appeler la

séquence getandfilterFeeds.

Pour cela, nous allons utiliser un form qui va contenir un bouton et qui va faire un call.

Un form est en quelque sorte un groupe qui va contenir les widgets entre les balises <form> … </form> pour

afficher et filtrer les news.

Appel de la séquence par le mobile

Voici le code :

1 2<div data-role="content" data-c8o-listen="Demo_ReadFeeds.getandfilterFeeds"> 3  4 <form data-c8o-call="Demo_ReadFeeds.getandfilterFeeds" data-c8o-variables='{"datechoice":"","search":"","timechoice":""}'> 5  6 <button>Show CNN news</button> 7 </form> 8  9 <br> 10 No news. 11 <ul data-role="listview" data-c8o-each="Item"> 12 <li> 13 <p>__=Title__</p> 14 <p>__=Description__</p> 15 <p>__=Date__</p> 16 </li> 17 </ul> 18</div>

data-c8o-call fonctionne de la même manière que data-c8o-listen, il permet d’exécuter une séquence, cependant il

ne peut pas appeler plusieurs séquences.

Le call se produit lorsque l’utilisateur clique sur le bouton Show CNN news, (entre les balises <button> …

</button> ).

Cependant, rappelez-vous que la séquence getandfilterFeeds a trois variables (datechoice, search, ettimechoice) et

qu’elle ne fonctionnait qu’avec le Test Case car il fallait initialiser ces variables.

Il faut donc utiliser data-c8o-variables qui va tout simplement affecter des valeurs à nos trois variables comme ceci

: ’{"Variable1" : "valeur","Variable2" : "valeur"}’.


Attention, il faut mettre des cotes simples ‘…’ autour des accolades {…} car on met des cotes doubles "…" autour

du nom de la variable et de la valeur.

Sauvegardez app.html et exécutez le projet : dans l’onglet Projects, faites clic droit

sur MobileApplicationpuis Launch Fullscreen.

Vous arrivez alors sur la page internet de notre application avec la top bar, le content, qui contient notre

bouton Show CNN news et en dessous le texte « No news. », et enfin le footer.

Il vous suffit alors de cliquer sur le bouton et d’attendre le chargement pour afficher la liste des news de CNN.

Voici le résultat :

Ainsi, nous avons vu comment afficher des données XML dans l'application qui est à présent plus

dynamique ! Au prochain chapitre : nous pouvons dorénavant nous intéresser à aspect utile pour votre

application qui est l'outil de développement.


Chapitre 3.2. L'outil de développement

Ça y est, vous venez de donner vie à votre application ! Mais avant de continuer, vous allez découvrir un

outil indispensable du développeur web et mobile : c’est l’outil de développement.

Débugger votre application mobile

En restant sur la page de votre application, ouvrez l’outil de développement de votre navigateur en appuyant sur la

touche F12.

L’outil de développement apparaît par défaut en bas de la fenêtre :

L’outil de développement va s’avérer très utile pour savoir comment l’application fonctionne et trouver les

éventuelles erreurs.

Pour avoir un visuel réaliste de votre future application mobile, déplacez l’outil de développement sur le côté droit de

votre navigateur :

• Sur Google Chrome, dans le coin supérieur droit de l’outil de développement, restez cliqué sur le bouton ci-

dessous et choisissez le deuxième icône en dessous.


• Sur Firefox, dans le coin supérieur droit de l’outil de développement, cliquez sur le bouton ci-dessous.

Désolé pour les utilisateurs d’Internet Explorer mais on ne peut pas déplacer l’outil de développement sur le côté.

Vous n’êtes pas obligé de télécharger Google Chrome, néanmoins le moteur de Chrome est semblable au moteur

qui fait tourner les applications sur les téléphone iOS ou Android, et donc l’affichage de l’application sur Chrome et

celui qui se rapproche le plus d’une application mobile.

Il est donc conseillé d’utiliser Google Chrome notamment pour afficher certaines fonctionnalités de jQuery Mobile.

Ensuite, ajustez la largeur de l’outil de sorte que ça se rapproche le plus d’un écran de téléphone.


Dans l’outil de développement, vous pouvez voir le code source de votre application dans l’ongletElements pour

Chrome et l’onglet Inspecteur pour Firefox.

C’est en fait le code présent dans le document app.html interprété par le navigateur c’est pourquoi il y a quelques

différences.

Par exemple, là on peut voir le content de notre application :

Affichage des données échangées entre le mobile et le serveur

Ce qui va également nous intéresser c’est de voir les données reçues par notre application.

Pour Chrome, allez dans l’onglet Network, pour Firefox, allez dans l’onglet Réseau et cliquez sur le bouton pour

lancer l’analyse des performances puis le bouton retour qui apparaît sur la gauche.

Vous obtenez alors une liste de tous les éléments que votre application appelle lorsqu’elle est lancée.

Puis, cliquez sur le bouton Show CNN news de notre application et toutes les news apparaissent !

Il y a également un élément nommé « .pxml » qui est apparu en bas dans l’outil de développement, cliquez dessus

puis cliquez sur l’onglet Réponse dans la fenêtre de détail qui apparaît et vous voyez le document XML que la

séquence appelée a produit.


A chaque fois qu’une séquence est appelée, le navigateur reçoit une réponse « .pxml », on pourra ainsi voir les

actions de chaque widget grâce à l’outil de développement.

Désactivation du cache du navigateur

Pour finir, vous allez désactiver le cache de votre navigateur.

Le cache du navigateur est en fait ce qui va garder en mémoire les fichiers de mise en page comme les fichiers css

afin d’accélérer la navigation, sauf que ça ne met pas à jour les modifications que l’on a apporté !

Pour désactiver le cache :

• Sur Google Chrome, cliquez sur le bouton Settings en haut à droite de l’outil de développement.

• Sur Firefox, cliquez sur le bouton Option des outils en haut à gauche de l’outil de développement.


Il vous suffira ensuite d’actualiser la page pour voir les modifications apportées à votre application.

Vous avez donc pu voir l'utilité de l'outil développement nous allons poursuivre sur l'utilisation des widgets

jQuery Mobile !

Chapitre 3.3. Utiliser les widgets jQuery Mobile

Qu’est-ce qu’un widget ?

Un widget est un composant d’interface graphique tel que le bouton, la liste déroulante, ou la barre de recherche.

Dans Convertigo Studio, on utilise jQuery Mobile pour créer simplement et rapidement des widgets qui peuvent

fonctionner sur tous les téléphones et les tablettes.

La liste des widgets jQuery Mobile est disponible sur leur site http://demos.jquerymobile.com et vous avez la

possibilité de copier-coller le code HTML de chaque widget dans app.html.

Pour le moment, nous n’avons qu’un seul widget dans notre application, le bouton qui permet d’afficher les news.

Vous allez maintenant découvrir, au cours de ce chapitre, différents widgets jQuery Mobile que nous allons rajouter

dans notre application et qui vont nous permettre de filtrer les news.

Mise en place des éléments graphiques

Nous allons commencer par ajouter un collapsible widget, ce qui veut dire bouton pliant, à l’intérieur des

balises <form> … </form> avant le bouton Show CNN news.

Voici comment ça fonctionne :

1<div data-role="collapsible"> 2  3 <h1>News filter</h1> 4 5  6 7</div>

Les balises <div> … </div> sont des conteneurs c’est-à-dire qu’ils contiennent d’autres composants, pour le

moment le contenu est vide.

C’est dans ce conteneur que nous allons mettre les widgets qui vont filtrer les news.

http://demos.jquerymobile.com/


On attribue le rôle collapsible au conteneur grâce à l’attribut data-role="collapsible".

Nous allons utiliser trois widgets différents : un search input (barre de recherche), un date input (saisie de date), et

un select (menu de sélection) pour le filtre des heures.

Ces trois widgets ainsi que la collapsible widget sont tirés du site de jQuery Mobilehttp://demos.jquerymobile.com, je

vous invite à y jeter un coup d’œil dans la section Forms.

Tout d’abord, le search input et le date input fonctionnent de la même manière car ce sont des champs de saisie de

texte, ils s’écrivent entre les balises <input> … </input>.

Ensuite, le menu de sélection s’écrit entre les balises <select> … </select> avec les différentes options situées

entre les balises <option> … </option>.

Enfin, pour structurer l’affichage de l’application, chaque filtre sera contenu dans un champ, qui se déclare entre les

balises <div> … </div> avec l’attribut class="ui-field-contain" (c’est équivalent à data-role="fieldcontain").

Voici le code :

1<div data-role="collapsible"> 2  3 <h1>News filter</h1> 4 5  6 <div class="ui-field-contain"> 7 <label for="search">Text :</label> 8 <input type="search" name="search" id="search" placeholder="Any news"> 9 </div> 10 11  12 <div class="ui-field-contain"> 13 <label for="datechoice">Date :</label> 14 <input type="date" name="datechoice" id="datechoice"> 15 </div> 16 17  18 <div class="ui-field-contain"> 19 <label for="timechoice">Time :</label> 20 <select name="timechoice" id="timechoice" multiple="multiple" data-native-menu="false"> 21 <option>Any time</option> 22 <option value="0">00:00</option> 23 <option value="1">01:00</option> 24 <option value="2">02:00</option> 25 <option value="3">03:00</option> 26 <option value="4">04:00</option> 27 <option value="5">05:00</option> 28 <option value="6">06:00</option> 29 <option value="7">07:00</option> 30 <option value="8">08:00</option> 31 <option value="9">09:00</option> 32 <option value="10">10:00</option> 33 <option value="11">11:00</option> 34 <option value="12">12:00</option> 35 <option value="13">13:00</option> 36 <option value="14">14:00</option> 37 <option value="15">15:00</option>



38 <option value="16">16:00</option> 39 <option value="17">17:00</option> 40 <option value="18">18:00</option> 41 <option value="19">19:00</option> 42 <option value="20">20:00</option> 43 <option value="21">21:00</option> 44 <option value="22">22:00</option> 45 <option value="23">23:00</option> 46 </select> 47 </div> 48</div>

Bon, ça fait un peu beaucoup d’information d’un coup hein ? Je vous explique.

Dans chaque champ, on a mis un label, qui est le titre du champ, suivi du widget.

Concernant les champs de saisie du filtre de texte et de date, <input> contient :

- un type, search pour le search input et date pour le date input.

- un id, c’est un nom unique qui permet de cibler un widget.

- un name, qui peut être le même que l’id.

Le search input contient en plus un placeholder, c’est un texte qui est visible dans le champ de saisie de texte

lorsqu’il est vide.

Ensuite, concernant le filtre de l’heure, <select> contient aussi un name et un id, ainsi que les attributs

multiple="multiple" et data-native-menu="false" car la variable timechoice prend plusieurs valeurs donc nous avons

besoin d’un menu de sélection multiple.

Enfin, chaque option du menu de sélection possède une value dans laquelle on a mis chaque heure, sauf la

première option qui est l’option par défaut, c’est-à-dire l’option affichée lorsque l’utilisateur n’a pas sélectionné

d’heures.

A noter que nous avons mis dans le name de chaque filtre le nom de la variable de la

séquencegetandfilterFeeds auquel il correspondait.

Connecter les données du formulaire aux variables de la séquence

En effet, comme les trois widgets se situent dans le form qui appelle la séquence, la valeur des trois widgets est

envoyée à la variable qui porte le même nom que le name.

Autrement dit, on peut maintenant enlever l’attribut data-c8o-variables de la balise <form>.

1<form data-c8o-call="Demo_ReadFeeds.getandfilterFeeds"> 2 <div data-role="collapsible"> 3 <h1>News filter</h1> 4 5 


6 7 </div> 8 <button>Show CNN news</button> 9</form>

Attention, le search input, le date input et le select n’envoient pas de valeur par défaut aux

variables datechoice, search, et timechoice, il faut donc modifier la propriété Default value des trois variables dans

la séquence getandfilterFeeds.

Retournez dans la vue Projects, dans le projet VotrePseudo_ReadFeeds, sélectionnez la variable et, dans la

fenêtre Properties, enlevez la valeur null de la Default value ; pour timechoice ajoutez une variable vide en cliquant

sur le bouton avec « … » (voir partie 2 chapitre 8).

Lancer l'application mobile en mode web

Maintenant, observons le résultat : si la page web de votre application est encore ouverte, actualisez la page en

appuyant sur la touche F5, sinon dans votre VotrePseudo_MobileApp, faites clic droit

surMobileApplication puis Launch Fullscreen.

Le collapsible widget se déplie et se replie en cliquant dessus.


Vous pouvez tester chacun des filtres :

• Le filtre de texte

• Le filtre de date

Sur un téléphone disposant d’un iOS ou d’un Android récent, un calendrier s’ouvrira lorsque vous toucherez le

champ de saisie.

Sur Google Chrome uniquement, un calendrier s’ouvre également en cliquant sur le petit triangle à droite du champ

de saisie.

• Le filtre de l’heure

En cliquant sur ce widget, une fenêtre s’ouvre avec la liste des heures que vous pouvez cocher.


Cliquez sur le bouton Show CNN news et voilà, notre application mobile fonctionne !

Ainsi, grâce à ces widgets jQuery Mobile et les étapes de ce chapitre, notre application mobile réalisée peut

récupérer les news de CNN, les afficher et les filtrer. Mais comment personnaliser ces widgets ? Découvrez-

le au prochain chapitre !

Chapitre 3.4. Utiliser des widgets personnalisés

Ça y est, nous avons atteint notre objectif, à savoir réaliser une application mobile qui récupère lesnews de

CNN puis les affiche et qui permet de filtrer ces news.

Mais ce n’est pas fini pour autant ! Nous allons maintenant améliorer notre application en personnalisant

des widgets.

Amélioration de l'application

Retournez dans app.html, dans le form où nous avons mis tous nos widgets :

1<form data-c8o-call="Demo_ReadFeeds.getandfilterFeeds"> 2 <div data-role="collapsible"> 3 <h1>News filter</h1> 4 5  6 7 </div> 8 <button>Show CNN news</button> 9</form>

Nous allons commencer par personnaliser le bouton Show CNN news.

Vous avez vu dans le chapitre précédent que les widgets que nous avons utilisés avaient des attributs. Et bien, pour

personnaliser un bouton, il suffit tout simplement d’ajouter un attribut !

Nous allons par exemple ajouter une icône sur le bouton avec l’attribut data-icon :


1<button data-icon="search">Show CNN news</button>

On peut également modifier le thème du bouton avec l’attribut data-theme :

1<button data-theme="b" data-icon="search">Show CNN news</button>

Cependant, ces attributs ne peuvent être utilisés que pour ajouter une personnalisation au widget car il y a des

caractéristiques attribuées par défaut.

Si vous regardez dans l’outil de développement, voilà comment le navigateur interprète le bouton :

1<button class="ui-btn ui-btn-b ui-icon-search ui-btn-icon-left ui-shadow ui-corner-all">Show CNN news</button>

En effet, tous les boutons ont l’attribut class et c’est avec cet attribut que toutes les caractéristiques du bouton sont

définies.

Dans l’attribut class :

- ui-btn signifie qu’il s’agit d’un bouton (équivalent à data-role="button").

- ui-btn-b signifie qu’on attribue le thème b (équivalent à data-theme="b"), par défaut le thème a est attribué et vous

n’avez pas besoin de l’indiquer.

- ui-icon-search signifie qu’on affiche l’icône search (équivalent à data-icon="search").

- ui-btn-icon-left signifie que l’icône va s’afficher à gauche (équivalent à data-iconpos="left").

- ui-shadow signifie qu’on affiche l’ombre du bouton (équivalent à data-shadow="true").

- ui-corner-all signifie qu’on arrondit les coins du bouton (équivalent à data-corners="true").

En fait, le bouton à l’état brut c’est ça :

1<button class="ui-btn">Show CNN news</button>

Il vous suffit donc de rajouter des caractéristiques pour personnaliser votre bouton, tout ça est indiqué sur le site de

jQuery Mobile http://demos.jquerymobile.com dans la section Buttons et il y a également la liste de tous les icônes

disponibles dans la section Icons.



En résumé, vous avez deux façons de personnaliser un widget, soit en ajoutant un attribut data soit en utilisant

l’attribut class mais vous devez mettre toutes les caractéristiques du bouton.

Vous pouvez également combiner les deux attributs mais informez-vous sur le site de jQuery Mobile.

Dans notre application, nous allons juste garder l’icône search sur le bouton Show CNN news avec le thème a par

défaut, et vous allez maintenant ajouter l’icône clock sur le bouton de filtre de l’heure.

1 2<div class="ui-field-contain"> 3 <label for="timechoice">Time :</label> 4 <select name="timechoice" id="timechoice" multiple="multiple" data-native-menu="false" data-icon="clock" data-iconpos="left"> 5 6  7 8 </select> 9</div>

Voici ce que ça donne :

Maintenant, nous allons ajouter une amélioration très intéressante dans notre application, un bouton pour chaque

news qui va nous rediriger vers la page à laquelle elle correspond.

Souvenez-vous que lorsqu’on récupère le document XML du flux RSS de CNN, chaque news possède une

balise <title>, une balise <description>, une balise <pubDate>… ainsi qu’une balise <link>.

C’est cette dernière que nous allons maintenant récupérer !

Allez-y, retournez dans la vue Project dans la séquence getandfilterFeeds et ajoutez un élément Linkderrière nos

trois éléments Title, Description, et Date.

Ensuite, affectez la source de l’élément qui est, je vous le rappelle, la balise link situé dans item dans le schéma

du Iterator (voir partie 2 chapitre 4).


Pour tester si votre élément fonctionne bien, exécutez le Test Case et observez la console, le lien apparaît bien

avec chaque news :

Enfin, il faut ajouter un bouton pour chaque news donc il faut l’ajouter dans la liste et on va lui indiquer le lien

internet grâce l’attribut href.

Cependant, l’attribut href n’existe pas pour les balises <button> … </button> donc il faut utiliser les balises <a> …

</a> qui donnent exactement le même résultat.

1<ul data-role="listview" data-c8o-each="Item"> 2 <li> 3 <p>__=Title__</p> 4 <p>__=Description__</p> 5 <p>__=Date__</p> 6 <div> 7 <a href="__=Link__" data-role="button" data-mini="true" data-inline="true" data-icon="info">See more</a> 8 </div> 9 </li> 10</ul>

On a mis le bouton dans un conteneur <div> … </div> pour structurer l’affichage et on a ajouté les attributs data-

mini="true" et data-inline="true" pour obtenir un bouton de petite taille, ainsi que data-icon="info" pour afficher une

icône info.

A noter que les balises <a> … </a> sont utilisées pour les liens internet c’est pourquoi vous devez mettre

l’attribut data-role="button" pour spécifier que c’est un bouton et non un lien.

La syntaxe équivalente du bouton avec l’attribut class est celle-ci :

1<a href="__=Link__" class="ui-btn ui-mini ui-btn-inline ui-icon-info ui-btn-icon-left ui-shadow ui-corner-all">See more</a>


Enfin, pour récupérer l’élément Link de notre séquence il faut utiliser la syntaxe __=Link__ (voir partie 3 chapitre 1).

Sauvegardez et actualisez la page, voici le résultat lorsque vous affichez les news :

Si vous cliquez sur le bouton See more, vous êtes redirigé vers le lien de CNN.

Vous venez de découvrir la personnalisation des widgets pour notre application. Laissons place à l'étape suivante

sur les modifications nécessaires pour une mise en page optimale, à partir de la gestion du fichier css.

Chapitre 3.5. Modifier la mise en page avec custom.css

Et bien, on commence vraiment à avoir une application plutôt sympa vous ne trouvez pas ?

Cependant, il y a un petit défaut, pourquoi la description ne s’affiche pas en entière ?

En effet, vous avez surement remarqué que la description ou même le titre sont coupés avec trois petits points

lorsqu’ils dépassent le bord de la page.

Ceci est une question de mise en page qui est gérée par un fichier css, mais il est tout à fait possible de modifier sa

propre mise en page.


Ajouter des instructions au fichier custom.css

Dans la vue Project Explorer, allez dans VotrePseudo_MobileApp > DisplayObjects > mobile > css et ouvrez le

fichier custom.css.

C’est dans ce fichier que nous allons rajouter les instructions pour permettre le retour à la ligne du titre et de la

description.

Voici le code :

Ne vous inquiétez pas ce n’est pas très compliqué, c’est du langage CSS.

Dans la première ligne, on indique l’endroit où l’on veut appliquer la propriété de mise en page.

.ui-listview désigne la liste dans laquelle on affiche les news, ensuite li désigne chaque élément de la liste qui,

souvenez-vous, se situe entre les balises <li> … </li>, et p désigne le texte situé entre les balises <p> … </p> à

savoir le titre, la description, et la date.

Enfin, on indique entre les accolades {…} la propriété que l’on veut faire appliquer qui est white-space : normal.

Cette instruction va enlever le wrap qui est mis par défaut et qui provoque justement la coupure du texte au bord de

la page.


Exemple du résultat attendu

Sauvegardez puis actualisez la page et affichez les news, on a bien un retour à la ligne :

Bien entendu, ceci est un exemple que vous pouvez faire dans le fichier custom.css.

Ainsi, vous pouvez rajouter d’autres instructions, en regardant sur internet, pour modifier comme vous le

soutaitez la mise en page de votre application.


Chapitre 3.6. Gérer des événements graphiques avec custom.js

Ce qu’on a vu précédemment c’est comment modifier la mise en page grâce au fichier custom.css,

maintenant vous allez voir comment gérer des évènements graphiques grâce au fichier custom.js.

Nous allons créer une popup c’est-à-dire une petite fenêtre qui apparaît lorsqu’on clique sur un bouton.

Créer une fenêtre popup à partir du flitre

Cette popup sera une option avancée de notre filtre de news.

Et oui ! On va rajouter deux trois petites choses dans notre séquence getandfilterFeeds !

Dans cette popup, nous allons utiliser des checkboxradio widgets pour vous montrer comment les utiliser dans

l’application et comment envoyer leurs données à la séquence.

La première option sera de demander à l’utilisateur si le filtre de recherche de texte doit s’appliquer au titre, ou à la

description, ou les deux.

On va donc choisir deux checkboxradio à choix multiple, ce sont les radio buttons sur le site de jQuery Mobile.

La seconde option sera de demander à l’utilisateur si le filtre de date doit afficher les news publiées seulement à la

date saisie, depuis cette date, ou avant cette date.

On va donc choisir trois checkboxradio à choix unique, ce sont les checkboxes sur le site de jQuery Mobile.

Vous avez des exemples de checkboxes et de radio buttons surhttp://demos.jquerymobile.com dans la

section Checkboxradio widget.

Pour commencer, vous allez créer un bouton Advanced settings dans le collapsible widget, après les trois filtres,

que vous mettrez comme les autres dans un champ (voir partie 3 chapitre 3).

1 2 3<div class="ui-field-contain"> 4  5 <a id="btnSettingsPopup" data-role="button" data-mini="true" data-inline="true" data-icon="gear">Advanced settings</a> 6 7  8 9</div>

On utilise ici les balises <a> … </a> car on se situe à l’intérieur d’un form qui appelle une séquence ce qui signifie

que le call se produit lorsqu’on clique sur n’importe quel bouton avec les balises <button> … </button>.

Vous avez donc deux possibilités, soit vous déplacez le call à l’intérieur du bouton Show CNN news, soit vous

utilisez les balises <a> … </a> comme on vient de le faire.



Ensuite, on crée la fenêtre popup, juste en dessous du bouton, qui va contenir un bouton pour fermer lapopup, un

groupe de deux checkboxes, et un groupe de trois radio buttons.

Pour créer la fenêtre popup, on va utiliser le conteneur <div> … </div> avec l’attribut class="ui-content ui-popup ui-

overlay-shadow ui-corner-all".

On peut également utiliser l’attribut style="max-width :280px" pour définir une largeur à notre fenêtre.

Pour mettre les checkboxradio dans un groupe, il faut utiliser les balises <fieldset> … </fieldset> avec l’attribut data-

role="controlgroup", on peut aussi ajouter l’attribut data-mini="true" pour obtenir de petites checkboxradio.

Enfin, les checkboxes sont des inputs avec l’attribut type="checkbox" et les radio buttons sont des inputsavec

l’attribut type="radio" ; ils auront chacun un name, un id, et une value, et certains seront cochés par défaut grâce à

l’attribut checked="checked".

Voici le code :

1<div id="SettingsPopup" class="ui-content ui-popup ui-overlay-shadow ui-corner-all" style="max-width:280px"> 2 3  4 <fieldset data-role="controlgroup" data-mini="true"> 5  6 <legend>Text filter :</legend> 7  8 <label for="textoption1">Title</label> 9 <input type="checkbox" name="textoption" id="textoption1" value="title" checked="checked"> 10  11 <label for="textoption2">Description</label> 12 <input type="checkbox" name="textoption" id="textoption2" value="descr" checked="checked"> 13 </fieldset> 14 15  16 <fieldset data-role="controlgroup" data-mini="true"> 17  18 <legend>Date filter :</legend> 19  20 <label for="dateoption1">Current</label> 21 <input type="radio" name="dateoption" id="dateoption1" value="0" checked="checked"> 22  23 <label for="dateoption2">Before</label> 24 <input type="radio" name="dateoption" id="dateoption2" value="-1"> 25  26 <label for="dateoption3">Since</label> 27 <input type="radio" name="dateoption" id="dateoption3" value="1"> 28 </fieldset> 29</div>

Voilà une chose de faite ! Maintenant il faut créer les deux nouvelles variables textoption et dateoptionpour

récupérer les données de la popup, puis il faut modifier la condition du filtre.

Récupérer les données de la popup à partir de variables


Nous avons besoin d’une Multi-valued Variable pour les checkboxes car elles peuvent envoyer deux valeurs et nous

avons besoin d’une Single-valued Variable pour les radio buttons car elles n’envoient qu’une seule valeur.

Créez ces deux variables dans la séquence getandfilterFeeds et mettez une valeur vide "" dans la propriétéDefault

value (voir partie 2 chapitres 7 & 8).

N’oubliez pas que textoption est une Multi-valued Variable et qu’il faut donc créer une variable vide.

Les checkboxradio envoient leur valeur à la variable lorsqu’elles sont cochées.

Il n’est pas obligatoire de mettre une valeur par défaut à la variable dateoption car il y aura toujours un radio

button qui sera coché et donc une valeur qui sera envoyé à la variable.

Ensuite, ouvrez le step Sequence_JS, nous allons modifier la condition des deux variables de

test datetestet searchtest.

Il faut comparer la date que l’on a choisi (datechoice) avec la date de la news (CurrentDate).

Pour cela, on crée une variable datediff qui prend la valeur 0 lorsque les deux dates sont égales, 1

siCurrentDate est après datechoice, ou -1 si CurrentDate est avant datechoice.


1var datediff; 2if(datechoice!=""){ 3 /*On récupère le jour, le mois, et l’année de datechoice et on les compare à 4 ceux de CurrentDate*/ 5 var year2 = datechoice.substring(0,4); 6 var month2 = datechoice.substring(5,7); 7 var day2 = datechoice.substring(8,10); 8 if(year==year2){ 9 if(month==month2){ 10 if(day==day2) datediff = "0"; 11 else if(day>day2) datediff = "1"; 12 else datediff = "-1"; 13 } 14 else if(month>month2) datediff = "1"; 15 else datediff = "-1"; 16} 17 else if(year>year2) datediff = "1"; 18 else datediff = "-1"; 19} 20var datetest = datechoice=="" || datediff==0 || datediff==dateoption;


datetest vaut true lorsque :

- datechoice est vide (aucune date n’est saisie).

- Si dateoption = 0, datediff = 0 (CurrentDate est égal à datechoice).

- Si dateoption = 1, datediff >= 0 (CurrentDate est après ou égal à datechoice).

- Si dateoption = -1, datediff <= 0 (CurrentDate est avant ou égal à datechoice).

Pour la variable searchtest, on crée deux autres variables de test : titletest et descriptiontest.


1/*titletest vaut true si la checkbox Title est cochée et que le titre contient 2le texte qu’on recherche*/ 3var titletest = (textoption[0]=="title" || textoption[1]=="title") && Title.indexOf(search)>=0; 4 5/*descriptiontest vaut true si la checkbox Description est cochée et que la 6description contient le texte qu’on recherche*/ 7var descriptiontest = (textoption[0]=="descr" || textoption[1]=="descr") && Description.indexOf(search)>=0; 8 9var searchtest = search=="" || titletest || descriptiontest;

J’espère que vous n’êtes pas trop perdus ! Pour vous rassurer nous allons maintenant tester la séquence pour

voir si le code fonctionne bien.

Tester la Séquence pour vérifier le code

Vous pouvez utiliser le Test Case, mais vous devez récupérer les variables dateoption et testoption pour saisir leur

valeur en faisant clic droit Import variables from target requestable.

Sinon vous pouvez directement tester l’application sur le navigateur.

Nous allons par exemple affichées seulement les news publiées depuis le 27 juillet 2014 qui contiennent « U.S.

» dans leur titre :


• Avec le Test Case :

Voici le résultat dans la console :


• Avec le navigateur :

Vous avez peut-être remarqué que, lorsque vous étiez sur le navigateur, la fenêtre popup que nous avons ajouté

reste toujours ouverte, et bien c’est là que notre fichier custom.js entre en jeu.

En effet, pour le moment, tout ce que nous avons fait c’est créer un bouton et une fenêtre juste en dessous dans

le collapsible widget.

Ce qu’on va faire dans le fichier custom.js c’est écrire les instructions qui vont cacher la fenêtre à l’initialisation de

l’application et qui vont la faire apparaître lorsqu’on va cliquer sur le bouton Advanced settings.

Cacher la fenêtre avec le fichier custom.js

Allez-y, dans la vue Project Explorer, et ouvrez custom.js situé dans VotrePseudo_MobileApp > DisplayObjects >

mobile > js.


Cherchez le document_ready hook :

Qu’est-ce qu’un hook ?

Un hook, qui signifie crochet, permet d’accrocher des morceaux de programme pour réaliser des actions

supplémentaires à des moments déterminés dans notre application mobile.

En fait, le fichier custom.js sert à réaliser automatiquement n’importe quelle action dans l’application comme par

exemple afficher/cacher une fenêtre, cliquer sur un bouton, ou appeler une séquence.

Pour obtenir plus d’informations, consultez la documentation de jQuery http://api.jquery.com.

Ici, on choisit le document_ready hook ce qui signifie un hook qui « s’accroche » lorsque le document est prêt c’est-

à-dire lorsque la page de notre application est prête.

Dans le custom.js, toutes les fonctions sont déjà écrites donc vous avez justes à les décommenter.

Voici ce que vous allez mettre à l’intérieur du hook :

1C8O.addHook("document_ready", function () { 2 //On cache la popup au chargement de la page 3 $("#SettingsPopup").hide(); 4 //Lorsqu’on clique sur le bouton on exécute les instructions suivantes 5 $(document).on("click","#btnSettingsPopup",function(){ 6 //Si la fenêtre est déjà visible, on la cache sinon on la montre

http://api.jquery.com/


7 if($("#SettingsPopup").is(":visible")) $("#SettingsPopup").hide("slow"); 8 else $("#SettingsPopup").show("slow"); 9 }); 10 return true; 11});

C’est du langage Javascript avec la librairie jQuery, on utilise la notation $("#SettingsPopup") pour cibler un widget,

où SettingsPopup représente l’id de notre fenêtre popup.

On utilise les fonctions show() et hide() pour montrer et cacher la popup, on peut aussi rajouter un effet d’ouverture

et de fermeture entre les parenthèses comme par exemple l’effet "slow" qu’on a mis ou l’effet"fast".

Ensuite, $(document) signifie qu’on cible n’importe quel évènement de la page, on précise après le type

d’évènement, ici c’est "click", puis l’id du widget sur lequel l’évènement doit avoir lieu, et enfin les instructions à

exécuter lorsque l’évènement se produit.

Sauvegardez et regardez le résultat dans l’application :

La fenêtre popup est belle et bien cachée lorsqu’on lance l’application puis, quand on clique sur le boutonAdvanced

settings, la fenêtre apparaît, et quand on reclique dessus, la fenêtre disparaît.

Voilà, vous savez dès à présent comment gérer des évènements graphiques !

Chapitre 3.7. Corriger les warnings et les erreurs

Dis donc, notre application est vraiment complète à présent, il est peut-être temps de l’installer sur son

téléphone.

Et oui, vous arrivez enfin à l’ultime étape de ce tutoriel, mais avant il faut s’assurer que notre application ne

produit aucune erreur !

Vous allez donc voir rapidement comment voir un warning ou une erreur dans l’application et comment

mettre la console de Convertigo Studio en mode debug.


Identifier les warnings et erreurs du "front"

Tout d’abord, relancez votre application et ouvrez la console de l’outil de développement de votre navigateur

(onglet Console).

Voici ce qu’on observe sur Google Chrome :

Voici ce qu’on observe sur Firefox :

L’outil de développement est un bon moyen de trouver les warnings et les erreurs concernant l’IHM c’est-à-dire

le front de notre application.

Cependant, comme vous le voyez, il y a des différences d’un navigateur à l’autre.

Les erreurs sont signalées en rouge et désignent des problèmes qui empêchent l’application de fonctionner.

Les warnings sont signalés en jaune et désignent des problèmes moins importants et qui n’empêchent pas

l’application de fonctionner.

Ici, Google Chrome à trouver une erreur mais rassurez-vous, elle n’empêche pas notre application de fonctionner

car elle indique seulement que le fichier cordova.js est manquant.

En fait, dans app.html, on fait un lien avec le fichier cordova.js mais ce fichier n’est implémenté que lorsqu’on

construit l’application mobile, il ne faut donc pas s’inquiéter.

En revanche, pour trouver les warnings et les erreurs concernant l’API c’est-à-dire le back de notre application, il

faut regarder plutôt la console de Convertigo Studio.

Trouver les erreurs et warnings au niveau du "Back"

Retournez dans Convertigo Studio et effacez le contenu de la console en cliquant sur le bouton Clear log viewer à

droite.


Ensuite, cliquez sur le bouton Show CNN news de votre application sur le navigateur puis revenez tout de suite

dans Convertigo Studio, vous remarquez alors que l’application s’exécute dans Convertigo Studio.

En fait, ce que nous avons fait dans la 2ème partie du tutoriel c’est créer des services dans Convertigo Studio : un

connecteur de flux RSS et une séquence qui traite les données.

L’application tourne dans le navigateur mais, lorsqu’on clique sur le bouton Show CNN news, l’application appelle

ce qui s’appelle un service.

Ce service s’exécute dans Convertigo Studio et renvoie une réponse à l’application qui va ensuite afficher ces

données.

Lorsqu’on va construire l’application mobile, ces services seront mis sur le serveur Cloud de Convertigo et

l’application installée sur le téléphone procèdera de la même façon.

Il se produit donc des transferts de données entre l’application et les services Convertigo, c’est ce qui s’appelle

la Web Oriented Architecture (WOA).


Corriger-les au niveau de la console

Maintenant, observons le résultat de l’appel de notre application dans la console, les warnings et les erreurs

apparaissent en rouge.

On a obtenu quatre messages en rouge juste avant la génération du document XML, double cliquez sur l’un d’entre

eux et vous avez alors les détails du problème :

Level : WARN signifie qu’il s’agit d’un warning, les erreurs apparaissent avec Level : ERROR.

En dessous apparaît le message du warning, il y est indiqué l’endroit où il s’est produit, ici c’est le step

<Description> @(description), et la cause, ici la description a été retournée avec la valeur null.

L’explication est simple, il peut arriver que certaines news de CNN n’aient pas de description c’est pourquoi

l’élément Description vaut null.


La correction du warning est aussi très simple, il vous suffit juste de rajouter une condition jIf (voir partie 2 chapitre

6) et d’afficher l’élément Description lorsque le jElementDescription n’est pas vide.

A noter que, lorsque la description de la news n’existe pas, le jElement prend la valeur vide "" par défaut tandis que

l’élément prend la valeur null et renvoi un warning.

Sauvegardez et testez la séquence, vous voyez que plus aucuns warning n’apparaît.

Quand vous réaliserez vos propres applications tout seul et que vous allez rencontrer une erreur qui va sans doute

vous cassez les pieds pendant une heure , il serait peut-être utile d’utiliser la console en mode debug.

Utiliser le mode debug de la console

Allez dans Window > Preferences puis, dans la fenêtre qui s’ouvre, dans Convertigo > Engine et ouvrez

l’onglet Logs.

Il vous suffit alors de remplacer dans la ligne Log4J root logger le mot « INFO » par « DEBUG ».


Cliquez sur Apply puis retestez la séquence, les messages de la console apparaissent alors en jaune et toutes les

étapes d’exécution sont détaillées.

Pour remettre en mode normal, il vous suffit de remplacer le mot « DEBUG » par « INFO » au même endroit.

Voilà, nous venons de voir ensemble les corrections concernant les warnings et les erreurs. Vous allez

arriver au dernier chapitre de ce tutoriel qui n'est autre que : comment installer son application mobile sur

son téléphone.

Chapitre 3.8. Installer son application sur son téléphone

Ça y est, enfin ! Vous l’avez fait !

Vous êtes enfin arrivé au dernier chapitre de cette partie et maintenant voilà le moment que vous attendiez

tous : la génération de votre toute première application mobile !

Déployer vos projets sur le serveur Cloud

Si vous avez bien compris l’explication dans le chapitre précédent, les services que nous avons créés doivent être

mis sur un serveur accessible depuis n’importe quel téléphone, nous allons donc déployer nos projets sur le serveur

Cloud de Convertigo pour générer l’application mobile.

Allez dans la vue Project et faites clic droit sur votre projet puis Deploy.


Une fenêtre s’ouvre, cliquez sur Skip puis ne modifiez rien et cliquez sur Deploy.

Faites de même avec votre deuxième projet, cela va déployer vos projets sur le serveur de Convertigo

http://trial.convertigo.net/cems.

Générer votre application mobile

Maintenant allez sur ce site, vous avez la liste de tous les projets déployés sur le serveur Cloud (d’où l’importance

d’avoir donné un nom unique à vos projets).

http://trial.convertigo.net/cems


Cherchez votre projet VotrePseudo_MobileApp qui contient l’application mobile et ouvrez-le.


Vous pouvez voir les informations concernant votre application à gauche : le nom de l’application, l’adresse du

serveur où elle est stockée, son id, et sa version.

Juste en dessous, il y a le QR code de l’application web puis, encore en dessous, il y a les onglets des trois

plateformes mobiles Android, iOS, et Windows Phone.

Vous allez cliquer sur l’onglet de la plateforme de votre téléphone puis vous allez générer l’application mobile en

cliquant sur Build mobile platform.

Vous avez besoin de générer qu’une seule fois l’application mobile.

Vous pourrez toujours, par la suite, apporter des modifications à notre application mobile, il suffira seulement de

redéployer le projet modifié.

En effet, grâce à la technologie FlashUpdate de Convertigo, l’application sera automatiquement mise à jour sur le

téléphone au prochain démarrage de celle-ci.

A la fin du chargement, un QR code apparaît :


Pour les détenteurs d’un téléphone Android, il vous suffit de flasher le QR code avec votre téléphone si vous

possédez un lecteur de QR code.

Pour les détenteurs d’un iPhone ou d’un Windows Phone, vous avez obligatoirement besoin d’un compte

développeur Apple/Windows Phone qui est payant et suivre une procédure complexe pour pouvoir déposer votre

application mobile sur Apple Store/Windows Phone Store et l’installer sur votre téléphone.

Néanmoins, vous pouvez toujours tester l’application sur votre téléphone en flashant le QR code de l’application

web.

Installer votre application

Ce tutoriel décrit ainsi uniquement la phase d’installation pour Android :

- Etape 1 : Vous devez autoriser l’installation des applications issues de sources inconnues dans les paramètres de

votre téléphone (l’emplacement varie d’un téléphone à l’autre).

- Etape 2 : Flashez le QR code et téléchargez l’application en cliquant sur OK.


- Etape 3 : Installez puis ouvrez l’application.

Pour installer l’application sur un autre téléphone, il vous suffira de retourner sur le serveur et de flasher ce même

QR code.

Cette troisième partie touche à sa fin, j’espère que cela vous a plu ! Voilà, vous connaissez dorénavant tout

ce dont vous avez besoin pour réaliser votre propre application mobile et l’installer sur votre téléphone.


Partie 4 : Annexe

Annexe et liens utiles

Notre tutoriel touche à sa fin et l'objectif est atteint... Bravo ! Vous avez réalisé votre application mobile qui

fonctionne à la fois sur iOS, Android et Windows !

Sachez qu'il y a encore beaucoup de choses à découvrir dans Convertido Studio et je vous laisse le plaisir de

prolonger l'expérience et continuer seul. Vous avez toutes les clés en main .

Pour avoir plus d’informations sur toutes les possibilités de Convertigo Studio, n’hésitez pas à consulter la

documentation sur http://www.convertigo.com/technical-documentation/ et à regarder les vidéos de démonstration

accessibles depuis Convertigo Studio dans Help > Welcome ou sur le site www.convertigo.com dans

l'onglet Developer puis cliquez sur Quick start videos.

Vous pouvez notamment créer un projet SQL qui va connecter votre application à une base de données MySQL en

utilisant un connecteur et y enregistrer les news de CNN par exemple

: http://www.convertigo.com/en/demos/videos/390-connect-to-sql-data-sources.html

Voici également pour vous d’autres liens qui vont vous aider tout au long de la réalisation de vos prochains

projets :

- Pour utiliser les widgets jQuery Mobile http://demos.jquerymobile.com

- La documentation jQuery pour le fichier custom.js http://api.jquery.com

- Le serveur Cloud de Convertigo pour installer l’application mobile sur un téléphone http://trial.convertigo.net/cems

A bientôt pour encore plus d'applications mobiles !

------------------------------------------------------------------------------------------------------------------------

Date : le 20/03/2015

Logiciel : Convertigo Studio version 7.2.3

http://www.convertigo.com/technical-documentation/

http://www.convertigo.com/

http://www.convertigo.com/en/demos/videos/390-connect-to-sql-data-sources.html


http://api.jquery.com/

http://trial.convertigo.net/cems

Documents

Démarrez avec Convertigo Studio - WordPress.com...Démarrez avec Convertigo Studio [Draft] RESUME Vous souhaitez créer en une fois une application mobile pour iOS, Android et Windows