Mise en œuvre des concepts

Création de l’application sous WINDEV Mobile

Voici l’écran d’accueil de l’atelier de génie logiciel. Comme vous allez le découvrir WINDEV Mobile vous guide tout au long du processus de mise en place de la nouvelle application. Cliquez sur le bouton Créer un projet.

Grâce à WINDEV Mobile vous pouvez développer des applications vers plusieurs plateformes. L’avantage est indéniable, vous n’avez à apprendre qu’un seul langage, créer votre application et choisir le terminal spécifique. Vous n’avez pas besoin d’apprendre à coder spécifiquement pour Android, iPhone ou Windows... car à partir du même code, vous pouvez créer votre application multiplateforme.

Ici, nous allons développer une application pour Android. Cliquez sur l’option Application Android.

Cet écran vous permet de stocker des documents en lien avec l’analyse de votre projet. Ceci est très pratique si vous travaillez en équipe. Dans notre cas, nous nous contenterons de cliquer sur le bouton Suivant.

Comme vous le voyez, vous pouvez cibler une plateforme plus particulièrement. Dans notre cas, nous allons choisir de générer une application pour téléphone et tablettes.

Le gestionnaire de sources permet de partager le projet entre plusieurs développeurs. Cette option ne nous est pas utile, nous n’allons donc pas l’utiliser. Cliquez sur le bouton Suivant.

La charte de programmation est utile pour se rendre compte d’un seul coup d’œil du type d’une variable. Il est donc conseillé de l’utiliser.

Les chartes graphiques permettent de donner une identité visuelle à vos applications. Elles sont modifiables à tout moment. Nous choisissons ici Material Design Red mais vous pouvez sélectionner la charte qui vous plaît le plus.

Comme l’application sera utilisée...

Création de l’interface de l’application

Nous allons maintenant nous concentrer sur l’interface de l’application mobile. Dans l’onglet Accueil, cliquez sur le bouton Nouveau.

Sur l’écran qui s’ouvre, cliquez sur Fenêtre puis de nouveau sur l’item Fenêtre :

L’assistant propose un large choix de types de fenêtres pour l’application. Dans notre cas, nous n’allons pas utiliser de fenêtres prédéfinies. Choisissez le type Vierge pour Téléphones Android Générique.

WINDEV Mobile vous propose d’enregistrer la fenêtre nouvellement créée. Remplissez les champs comme ci-dessous :

Voici l’aperçu de la première fenêtre du projet :

Comme vous pouvez le constater, la fenêtre est petite et ne correspond pas à celle d’un modèle standard de téléphone mobile.

Les pointillés représentent l’espace occupé en mode paysage ou portrait. Nous allons agrandir cet espace.

Cliquez sur l’onglet Projet, puis sur le bouton Description.

Dans l’onglet Projet, cliquez sur le bouton Description de la plateforme courante.

Ajoutez une nouvelle plateforme en cliquant sur le bouton Ajouter une plateforme.

Dans cette liste, choisissez le modèle de smartphone Nexus 5. Il a l’avantage d’être d’un format commun.

Il est désormais possible dans la liste des plateformes possibles de votre projet. Pour que cette plateforme soit la plateforme par défaut, supprimez la plateforme Téléphone Android Générique puis validez.

Nous allons ensuite appliquer cette plateforme à notre première fenêtre.

Faites un clic droit dans un espace libre de l’éditeur et cliquez sur Description. Dans la combo Plateforme d’édition, sélectionnez Nexus 5.

Les pointillés indiquent les nouvelles marges. À vous d’étirer la zone de contenu pour qu’elle se colle aux marges. Vous devriez obtenir un écran de visualisation plus grand.

Le fait d’avoir choisi la plateforme Nexus 5 ne signifie pas que les champs ne pourront pas s’afficher de façon convenable sur un téléphone plus grand ou plus petit. L’applicatif va dessiner les interfaces en fonction...