PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

Nouveauté WINDEV Mobile 24 !
  • Ce que vous allez apprendre dans cette leçon
  • Présentation
  • Mon premier projet
  • Création du projet
  • Ma première fenêtre
  • Présentation
  • Création de la fenêtre
  • Affichage d'un message
  • Premier test
  • Premier déploiement sur l'appareil
  • Principe
  • Mise en place
Leçon 7.1. Mon premier projet Windows Mobile
Ce que vous allez apprendre dans cette leçon
  • Créer un projet Windows Mobile.
  • Ma première fenêtre.
  • Mon premier test.
  • Premier déploiement.

Durée estimée : 1 h
Leçon précédenteSommaireLeçon suivante
Présentation
Pour commencer à développer avec WINDEV Mobile pour une plateforme Windows Mobile, nous allons simplement créer un premier projet. Ce projet contiendra une fenêtre permettant d'afficher un message.
Ce premier exemple permettra de présenter rapidement les bases du développement pour Windows Mobile avec WINDEV Mobile.

Attention

L'installation d'une application Windows Mobile peut être créée uniquement avec un éditeur WINDEV Mobile 32 bits.
Mon premier projet

Création du projet

Nous allons créer notre premier projet pour Windows Mobile. Si vous possédez l'appareil mobile (Smartphone ou Pocket PC) sur lequel l'application doit être exécutée, il est conseillé de connecter cet appareil au poste de développement. Ainsi, les caractéristiques de l'appareil seront automatiquement détectées et proposées lors de la création du projet Windows Mobile.

Corrigé

Un projet corrigé est disponible. Pour ouvrir ce projet, dans la page d'accueil de WINDEV Mobile (Ctrl + <), cliquez sur "Cours d'auto-formation" puis sélectionnez "Mon projet Pocket (Corrigé)".
  • Pour créer un projet :
    1. Lancez WINDEV Mobile 24 (si ce n'est déjà fait).
    2. Si nécessaire, affichez la page d'accueil de WINDEV Mobile (Ctrl + <).
    3. Dans la page d'accueil, cliquez sur "Créer un projet" puis sur "Windows CE".

      L'assistant de création de projet se lance. Les différentes étapes de l'assistant vont vous aider à créer votre projet. Tous les renseignements indiqués dans cet assistant pourront être modifiés par la suite.

      Note

      Autre méthode pour créer un projet :
      1. Cliquez sur parmi les boutons d'accès rapide du menu de WINDEV Mobile.
      2. La fenêtre de création d'un nouvel élément s'affiche : cliquez sur "Projet".
    4. La première étape de l'assistant permet de saisir le nom du projet, son emplacement et sa description. Dans notre cas, ce projet va simplement s'appeler "Mon_Projet_Pocket". Par défaut, WINDEV Mobile propose de créer ce projet dans le répertoire "\Mes Projets Mobile\Mon_Projet_Pocket". Vous pouvez conserver cet emplacement ou le modifier grâce au bouton [...].
    5. Passez à l'étape suivante à l'aide des flèches situées en bas.
    6. L'assistant propose d'ajouter des documents. Passez à l'étape suivante.
    7. L'étape suivante permet de détecter les paramètres de l'appareil connecté au PC.
      • Si vous avez connecté votre appareil, cliquez sur "Cliquez ici pour détecter automatiquement l'appareil".
      • Si vous ne possédez pas d'appareil, passez à l'étape suivante de l'assistant pour définir manuellement les caractéristiques de l'appareil utilisé.
    8. L'écran de description de votre appareil apparaît.
      Passez à l'étape suivante.
    9. Dans la partie gauche de l'assistant, cliquez sur "Chartes". Cette étape permet de définir la charte de programmation utilisée. Ne modifiez pas les options proposées. Passez à l'étape suivante de l'assistant à l'aide des flèches situées en bas.
    10. Cette étape permet de définir la charte graphique. Sélectionnez "Elegant".
    11. Les autres étapes de l'assistant n'étant pas importantes pour notre premier projet, dans la partie gauche de l'assistant, cliquez directement sur "Fin".
    12. Cliquez sur le bouton de validation en bas de l'assistant. Le projet est automatiquement créé.
    13. La fenêtre de création d'un nouvel élément s'affiche. Cette fenêtre permet de créer tous les éléments pouvant être associés à un projet.
Ma première fenêtre

Présentation

La première fenêtre que nous allons créer permet à l'utilisateur d'afficher un message de bienvenue grâce au bouton "Afficher".
Vous pouvez être tenté de dire que c'est trop simple, trop basique, mais nous vous conseillons de réaliser cette fenêtre. Vous risquez d'être surpris par la facilité et l'intuitivité de l'éditeur de WINDEV Mobile. De plus, cette fenêtre vous permettra de découvrir des concepts fondamentaux pour la suite de ce cours et de voir tout le processus de développement d'une application Windows Mobile avec WINDEV Mobile.

Création de la fenêtre

  • Pour créer la fenêtre :
    1. Dans la fenêtre de création d'un nouvel élément, cliquez sur "Fenêtre" puis sur "Fenêtre".

      Note

      Ici, comme nous venons de créer un nouveau projet, la fenêtre de création d'un nouvel élément s'affiche automatiquement.
      Pour afficher la fenêtre de création d'un nouvel élément, il suffit de cliquer sur parmi les boutons d'accès rapide de WINDEV Mobile :
    2. L'assistant de création d'une fenêtre s'affiche.
    3. Dans la liste des fenêtres proposées, sélectionnez "Vierge". Le gabarit utilisé est affiché affiché en bas à droite de l'assistant. Le gabarit "Elegant" que nous avons sélectionné lors de la création du projet est sélectionné par défaut.

      Note

      Les gabarits permettent de créer rapidement des interfaces professionnelles. Un gabarit définit le look de la fenêtre mais également le look de tous les champs qui seront utilisés dans cette fenêtre. Ainsi, aucune faute de goût n'est possible.
    4. Validez. La fenêtre est automatiquement créée sous l'éditeur. La fenêtre de sauvegarde de l'élément créé apparaît. Cette fenêtre affiche :
      • le titre de l'élément. Pour une fenêtre, ce titre sera affiché dans la barre de titre de la fenêtre.
      • le nom de l'élément qui correspond au nom de la fenêtre. Ce nom sera utilisé en programmation.
      • l'emplacement de l'élément. Cet emplacement correspond au répertoire de sauvegarde du fichier physique correspondant à l'élément. La fenêtre est un fichier d'extension "WDW", enregistré dans le répertoire du projet.
    5. Indiquez le titre de l'élément "Bienvenue" (ici, l'élément correspond à la fenêtre WINDEV Mobile).
    6. Le nom de l'élément "FEN_Bienvenue" est automatiquement proposé.

      Note

      Observez bien le nom de la fenêtre que WINDEV Mobile propose par défaut : ce nom commence par les lettres "FEN_". Ce préfixe est automatiquement ajouté car le projet utilise une charte de programmation.
      La charte de programmation permet de définir un préfixe pour chaque type d'objet et ainsi d'identifier rapidement l'élément manipulé :
      • une fenêtre commence par "FEN_",
      • un bouton commence par "BTN_",
      • etc.
      Si vous ne voulez pas utiliser cette charte, il suffit de la débrancher : sous le volet "Projet", dans le groupe "Autres actions", déroulez l'option "Charte" et décochez l'option "Utiliser la charte".
    7. Validez en cliquant sur le bouton vert.

Affichage d'un message

Vous allez maintenant créer un bouton permettant d'afficher un message.
  • Pour créer le bouton "Afficher" :
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur . Le bouton apparaît en création sous la souris.
    2. Déplacez la souris dans la fenêtre vers la position où le champ doit être créé (par exemple en haut de la fenêtre). Pour poser le champ dans la fenêtre, il suffit de faire un nouveau clic gauche de souris.
    3. Faites un clic droit de la souris sur le champ que vous venez de créer. Le menu contextuel du champ apparaît. Dans ce menu contextuel, sélectionnez l'option "Description". La fenêtre de description du bouton s'affiche.
  • Modifiez les caractéristiques du champ en saisissant les informations suivantes :
    1. Ce champ a pour nom : "BTN_Afficher".
    2. Ce champ a pour libellé : "Afficher"
  • Validez la fenêtre de description du champ (bouton vert). Le champ apparaît sous l'éditeur de fenêtres.
  • Nous allons afficher un message dans une boîte de dialogue (une mini-fenêtre proposée par le système). Pour cela, nous allons utiliser notre première fonction WLangage : la fonction Info.

    Note

    Le WLangage est le langage de programmation fourni avec WINDEV Mobile. C'est un langage de 5ème génération (L5G), possédant des ordres évolués.
    1. Sélectionnez le champ si nécessaire.
      Remarques :
      • Lorsque le champ est sélectionné, des poignées apparaissent autour du champ.
      • Pour sélectionner un champ, il suffit de cliquer dessus avec la souris.
    2. Affichez le menu contextuel du champ (clic droit de la souris).
    3. Sélectionnez l'option "Code". Cette option ouvre l'éditeur de code de WINDEV Mobile, dans lequel toutes les instructions WLangage peuvent être saisies.
    4. Dans le traitement "Clic" du champ "BTN_Afficher", saisissez le code suivant :
      Info("Bonjour")
Remarque sur l'aide à la saisie : Dès la saisie des deux premiers caractères, WINDEV Mobile propose tous les mots du vocabulaire WLangage contenant ces caractères. L'assistance au développement est poussée très loin. Vous ne pouvez plus vous tromper en saisissant le nom d'un élément : les erreurs de syntaxes sont minimisées. Il suffit de sélectionner le mot désiré et de valider par la touche Entrée. Vous pourrez ainsi vous concentrer sur l'algorithme.

Note

En saisissant ce code sous l'éditeur de code, vous constatez que les différents éléments saisis utilisent des couleurs différentes. C'est la coloration syntaxique. L'éditeur de code permet ainsi d'identifier rapidement les différents éléments manipulés par le code :
  • les fonctions du WLangage apparaissent en bleu,
  • les chaînes de caractères (entre guillemets) apparaissent en violet,
  • les noms de champs apparaissent en cyan.
Ces couleurs peuvent être modifiées élément par élément dans les options de l'éditeur de code (sous le volet "Accueil", dans le groupe "Environnement", déroulez "Options" et sélectionnez "Options de l'éditeur de code").
La fonction Info affiche le message passé en paramètre.
  • Enregistrez les modifications en cliquant sur l'icône parmi les boutons d'accès rapide (à gauche du ruban) ou en utilisant la combinaison de touches Ctrl + S.
  • Fermez la fenêtre de code (croix en haut à droite de l'éditeur de code). La fenêtre réapparaît.
Premier test
Pour une application Windows Mobile, WINDEV Mobile permet de tester directement l'application sur le poste de développement grâce au mode simulation. Ce test réalise une simulation d'un périphérique Windows Mobile sur le poste de développement. Ce test est utile quand le développeur ne dispose pas de périphérique Windows Mobile. Cependant, ce test ne permet pas d'utiliser les composants matériels de l'appareil (SMS, ...).
  • Nous allons tester la fenêtre en mode simulation.
    1. Cliquez sur parmi les boutons d'accès rapide (ou utilisez la touche F9).
    2. Validez si nécessaire le message d'information concernant le mode simulateur.
    3. La fenêtre que vous avez créée se lance en exécution. La coque du simulateur correspond :
      • soit à l'appareil connecté au poste de développement,
      • soit à l'appareil choisi dans l'assistant de création de projet.
    4. Cliquez sur le bouton "Afficher".
    5. Validez la fenêtre système qui s'affiche.
  • Tout développeur sait que tester un programme est souvent long, voire fastidieux. Avec WINDEV Mobile, en UN CLIC, vous testez la fenêtre, l'état ou la procédure que vous êtes en train de réaliser. C'est à la fois simple et rapide !
  • Cliquez sur le bouton "x" situé dans la coque du simulateur pour fermer la fenêtre.
  • L'éditeur de WINDEV Mobile réapparaît.
Premier déploiement sur l'appareil

Principe

Pour exécuter l'application de manière autonome sur l'appareil mobile, il suffit de :
  • Connecter l'appareil via un port USB.
  • Générer l'application.
  • Choisir de copier et de lancer l'exécutable sur le mobile connecté. La copie de l'application peut prendre quelques secondes.

Mise en place

  • Pour générer l'application Windows Mobile :
    1. Sous le volet "Projet", dans le groupe "Génération", cliquez sur "Générer" (vous pouvez également cliquer sur parmi les boutons d'accès rapide).
    2. WINDEV Mobile propose de sélectionner la première fenêtre du projet. Pour notre exemple, sélectionnez "FEN_Bienvenue" et validez (bouton vert).
    3. L'assistant de création d'un exécutable mobile se lance.
    4. La première étape de l'assistant permet de définir le nom et l'icône de l'application.
      L'icône de l'exécutable peut être choisie dans le catalogue d'images de WINDEV Mobile :
      • Cliquez sur le bouton à droite du champ "Nom de l'icône".
      • Dans le menu contextuel qui s'affiche, sélectionnez l'option "Catalogue".
      • La fenêtre du catalogue d'images apparaît.

        Note

        Dès qu'une image peut être utilisée (dans un champ, une fenêtre, un état, ...), l'option "Catalogue" est disponible (via le menu affiché par le bouton ). Il est ainsi possible de sélectionner une image parmi les milliers d'images fournies dans le catalogue d'images de WINDEV, WEBDEV et WINDEV Mobile.
        Pour faire une recherche dans le catalogue d'images :
        • indiquez le mot-clé correspondant à la recherche,
        • validez. Les images trouvées sont automatiquement affichées.
        En double-cliquant sur l'image voulue, celle-ci est générée et intégrée à votre projet.
    5. Les autres étapes ne sont pas nécessaires pour notre application. Cliquez directement sur le lien "2- Copie sur le mobile", à gauche de l'assistant.
    6. Cette étape permet de définir les options de copie des fichiers sur le mobile :

      Attention

      L'installation d'une application Windows Mobile peut être créée uniquement avec un éditeur WINDEV Mobile 32 bits.
    7. Les options à choisir dépendent de votre configuration :
      • Si vous avez un mobile connecté, vous pouvez sélectionner l'option "Oui Copier l'exécutable sur le Pocket PC" ainsi que "Lancer l'application sur le Pocket PC à la fin de la copie". Dans ce cas, à la fin de la génération de l'exécutable, l'application sera automatiquement copiée et lancée sur le mobile.
      • Si vous ne possédez pas de mobile connecté, sélectionnez l'option "Non Ne pas copier l'exécutable sur le Pocket PC". Dans ce cas, l'application pourra ensuite être déployée sur les mobiles grâce à une procédure d'installation.
    8. Validez et terminez l'assistant.
Voilà, notre première application est générée et exécutée sur le périphérique Windows Mobile.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 24
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire