Connaître les éléments de base de l'éditeur WebDev

Création d'un convertisseur Francs / Euro.

Article lu   fois.

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Présentation

Nous allons créer un convertisseur Franc / Euro.


Lancer WebDev 9 en double cliquant sur son icône :Image Tp1\im1.jpg.


La fenêtre d'accueil apparaît (si ce n'est pas le cas, fermez le projet, quittez puis relancez WebDev) :

Image Tp1\im2.jpg


Cliquez sur Créer un projet.


La fenêtre Assistant vous indique qu'elle va vous aider en fonction de vos choix. On n'en attend pas moins d'elle.


Cliquez sur Suivant.

Image Tp1\im2.jpg


Cet écran permet de choisir le type de site que nous pouvons réaliser avec WebDev, pour ce premier tp laissez le choix par défaut et cliquez sur le bouton Suivant.

Image Tp1\im3.jpg


Ici vous allez laisser le choix par défaut. Votre site n'est pas fait pour être hébergé par un serveur Linux. Cliquez sur Suivant.

Image Tp1\im4.jpg


Nous allons partir d'un projet vierge. Cliquez sur Suivant.

Image Tp1\im5.jpg


Nous allons donner un nom à ce site par exemple Tp1 et une description : Ce site gère un convertisseur Francs / Euros. Cliquez ensuite sur Suivant.

Image Tp1\im6.jpg


Pour la charte graphique, dans la combo-box Modèle prédéfini sélectionnez Aucun, puis cliquez sur Suivant.

Image Tp1\im7.jpg


Pour le moment le projet ne sera qu'en français, cliquez simplement sur Suivant.

Image Tp1\im8.jpg


Ce tp n'ayant pas pour vocation à être en ligne sélectionnez le choix Non - Ne pas intégrer une page d'accueil dans le projet.

Image Tp1\im9.jpg


Laissez le choix par défaut et cliquez sur le bouton Suivant.

Image Tp1\im10.jpg


Pour ce Tp, nous n'allons pas utiliser de bases de données, sélectionnez le choix : Ne pas utiliser d'Analyse.Ensuite, cliquez sur le bouton Suivant.

Image Tp1\im11.jpg


Voilà, la description du projet est terminée. Cliquez sur le bouton Terminer.


Cette fenêtre va apparaître :

Image Tp1\im12.jpg

Sélectionnez le choix Aller directement dans l'éditeur WebDev.


Nous allons maintenant créer notre première page du site. Pour cela allez dans le menu général de l'éditeur et cliquez sur Fichier, ensuite sur Nouveau. Cette fenêtre de choix apparaît :

Image Tp1\im13.jpg


Cliquez sur l'icône Page. L'écran suivant apparaît :

Image Tp1\im14.jpg

Cliquez sur le bouton Ok. Vous voilà arrivé sous l'éditeur de pages WebDev.

Image Tp1\im15.jpg

Voici une vue partielle des icônes disponibles. En dessous vous avez une page blanche c'est elle qui nous servira de support.


Il est temps de sauvegarder, Cliquez sur Fichier puis Enregistrer.

Image Tp1\im16.jpg


La première page se nommera départ.wwh, renommez en conséquence et ensuite cliquez sur le bouton Suivant.


A l'intérieur de cette fenêtre, placez 4 objets : 3 "champs de saisie" et un bouton (faites un glisser/déposer ou drag & drop des champs dans la page.

Image Tp1\im17.jpg


Voilà a quoi devrait ressembler votre page :

Image Tp1\im18.jpg


Faites un clic avec le bouton droit sur le premier champ de saisie. Le menu contextuel suivant apparaît :

Image Tp1\im19.jpg


Validez le choix Description. L'écran suivant apparaît et modifiez le comme ci-dessous :

Image Tp1\im20.jpg


Ce champ se nommera Francs (c'est ainsi que nous le repérerons en programmation), affichera Zone Francs : et comme masque de saisie comportera des chiffres avec 2 chiffres derrière la virgule. Une fois les modification réalisées cliquez sur Appliquer puis Ok.


Voilà le résultat :

Image Tp1\im21.jpg


Le second champs de saisie se nommera taux et aura comme libellé Taux de change :. Il sera aussi de type numérique avec le même masque de saisie que le précédent.


Le troisième se nommera convertir et aura comme libellé Résultat de la conversion :. Il sera aussi de type numérique avec le même masque de saisie que le premier.


Enfin, le bouton se nommera calcule et aura comme libellé Calcule.


Voici à quoi doit ressembler votre page :

Image Tp1\im22.jpg


Il nous reste à mettre le code correspondant dans le bouton "calcule". Pour cela, faites un clic droit dessus et choisissez "Code".


Voici un aperçu de ce que vous devriez voir à l'écran :

Image Tp1\im23.jpg


Comme vous le voyez il y a 3 zones de saisie de code :

  • Une zone Initialisation de calcule (serveur). Le code saisi dans cette zone s'exécutera coté serveur dès que le bouton sera créé.
  • Une zone Clic (onclick) de calcule (navigateur). Le code saisi dans cette zone s'éxécutera coté navigateur, c'est à dire chez le visiteur de notre site dans le cas où celui-ci est hébergé.
  • Une zone Clic de calcule (serveur). Le code saisi dans cette zone s'exécutera coté serveur si la personne clique dessus. La page sera donc réaffichée.


Il nous reste à mettre le code correspondant dans le bouton calcule :

Image Tp1\im24.jpg


Il est temps d'enregistrer notre projet par le menu Fichier / Enregistrer tout.

Une fois l'enregistrement achevé, nous allons tester le projet, pour cela cliquez sur Tester la page.

Image Tp1\im25.jpg


Votre navigateur web par défaut se lance et voici ce qu'il vous affiche :

Image Tp1\im27.jpg


Essayez de saisir des valeurs telles que celles présentées ci-dessous et cliquez sur le bouton Calcule:

Image Tp1\im27.jpg


Comme vous le voyez, vous avez une erreur à l'exécution, en fait le problème provient du masque de saisie du taux de change qui n'offrait pas assez de chiffres après la virgule. Nous allons donc corriger cela.


Revenez sur l'éditeur et cliquez avec le bouton droit de la souris sur le champ de saisie du taux de change, choisissez le menu Description et changez manuellement de masque de saisie comme ci-dessous :

Image Tp1\im28.jpg


Cliquez ensuite sur le bouton OK.


Relancez le test de la page, remplissez la zone Francs et Taux comme ceci :

Image Tp1\im29.jpg


Cliquez maintenant sur le bouton Calcule. Voici le résultat :

Image Tp1\im30.jpg

Nous voyons que le calcul c'est effectué sans problème, mais nous pourrions faire un aménagement. En effet plutôt que de retaper le taux de change qui est constant, nous pourrions le graver une bonne fois pour toutes. Pour cela faites un clic droit sur le champ de saisie Taux de change et inscrivez ceci :

Image Tp1\im31.jpg


Relancez le test de la page, comme vous le voyez le taux est remplit automatiquement.


Remarque :

MoiMême désigne l'objet dans lequel on se trouve.


Voilà, notre Tp WebDev est fini, pour vous entraîner en attendant le suivant voici un petit exercice que vous devriez faire sans trop de peine.

II. Exercice applicatif


Créez une application « EXO1 » contenant :

  • une fenêtre
  • 2 champs textes
  • 1 champ numérique
  • 1 bouton


Lorsque l'utilisateur clique sur le bouton, les champs textes se remplissent avec votre nom dans le premier champ, votre prénom dans le deuxième champ texte et votre année de naissance dans le champ numérique que vous aurez pré-programmés.


Vous avez toute liberté au niveau de l'ergonomie, du nommage des champs, de la fenêtre, du bouton. Je vous rappelle que tout le code doit être contenu dans le bouton.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2008 Jean Luc Baptiste. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.