souad07
2010-12-21, 19:54
Cours N 1
Objectifs :Connaître les éléments de base de l'éditeur WinDev. Création d'un convertisseur Francs / Euro.
Pour ce premier cours, nous allons créer un convertisseur Franc / Euro.
Lancer WinDev 10 en double cliquant sur son icône: http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img1.JPG.
La fenêtre d'accueil apparaît (si ce n'est pas le cas, fermez le projet, quittez puis relancez WinDev) :
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img2.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. Cette fenêtre va vous permettre de saisir le nom de ce nouveau projet et le lieu de stockage physique des éléments constitutifs.
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img3.JPG
Inscrivez « convertisseur » dans la zone nom, il sera repris automatiquement dans le champ du bas. Continuez en cliquant sur Suivant.
Créez un Type de projet Exécutable puis Suivant.
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img4.JPG
Comme vous travaillez seul pour cet écran, faites un clic sur suivant.
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img5.JPG
Cliquez sur ne pas utiliser de charte de programmation et ensuite sur suivant.
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img6.JPG
Prenez le Thème de Gabarit par défaut ou choisissez en un autre. Cliquez sur Suivant.
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img7.JPG
Le choix des langues ne nous intéresse pas pour l'instant. Cliquez sur Suivant.
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img8.JPG
Choisissez Ne pas utiliser d'Analyse puisque pour notre projet nous n'utiliserons pas de fichiers de données.
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img9.JPG
Continuez en cliquant sur Suivant et Terminer.
L'assistant va vous poser la dernière question ? Voulez vous créer une fenêtre ? Cliquez Créer une fenêtre puis choisissez Vierge dans l'onglet Standard. Validez par OK.
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img10.JPG
A ce stade nous avons une fenêtre vide dans l'éditeur. Il nous reste à lui donner un nom, une taille et définir quelques comportements.
Placez la souris dans la fenêtre vierge et faites un clic droit. Dans ce menu contextuel, validez Description. Vous obtenez la fenêtre à remplir comme ci-dessous :
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img11.JPG
Remplissez les divers champs de façons identiques et sélectionnez l'onglet IHM (Interface Homme-Machine).
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img12.JPG
Changez la taille, le fait qu'elle ne sera pas redimensionnable puis validez par OK.
Remarquez les différences, vous avez maintenant une fenêtre avec un nom, un titre et une taille définie.
Il est temps de sauvegarder, Cliquez sur Fichier puis Enregistrer.
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img13.JPG
Cliquez sur le bouton Enregistrer.
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 fenêtre « Bienvenue dans le méga convertisseur »).
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img14.JPG
Le premier champ se nommera franc et aura comme libellé "Zone francs :". Cliquez 2 fois dessus pour en modifier les caractéristiques :
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img15.JPG
Le second se nommera taux et aura comme libellé "Taux de change :".
Le troisième se nommera convertir et aura comme libellé "Résultat de la conversion :". Le bouton (sans cliquer sur la petite flèche vers le bas placée juste en dessous) enfin se nommera calcule et aura comme libellé "calcule".
Voici à quoi doit ressembler votre fenêtre (avec en surimpression le nom des champs) :
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img16.JPG
Il nous reste à mettre le code correspondant dans le bouton "calcule". Pour cela, faites un clic droit dessus et choisissez "Code".
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img17.JPG
Entrez la séquence comme indiqué ci-dessus puis fermez la fenêtre de l'éditeur de code : cliquez sur l'icône de fermeture en haut à droite de l'écran (croix du bas).
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img18.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 Lancer le test du projet.
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img19.JPG
WinDev vous demande de définir la première fenêtre de notre méga projet, choisissez "depart" dans la combo et validez.
Vous avez maintenant devant vous notre super convertisseur. Mais avouez qu'il est franchement moche :
- trop grand ;
- couleurs tristes ;
- et même des comportements par défaut peu pratiques.
Lesquels ?
C'est simple : Essayez de saisir le taux de conversion de l'euro 6,55957 !
Comme vous le voyez, le champ ne prend que 2 chiffres après la virgule ! De plus vous allez être obligé de le saisir à chaque fois !!! Ah, c'est beau l'informatique !!!
الموضوع الأصلى من هنا: منتديات الأستاذ التعليمية التربوية المغربية : فريق واحد لتعليم رائد http://www.profvb.com/vb/showthread.php?p=14795 (http://www.profvb.com/vb/t4523-post14795.html)
Nous allons remédier à tous ces petits détails :
Pour la taille de la fenêtre, placez votre souris sur l'angle inférieur droit de la fenêtre "depart" :
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img20.JPG
Une fois que le curseur change d'aspect, tenez appuyé le bouton gauche de la souris et remontez vers l'angle supérieur gauche. Relâchez la souris quand la taille souhaitée sera atteinte.
La couleur de fond n'est pas très gaie. Clic droit n'importe où dans la fenêtre : Description, puis onglet Style etCombo "Gabarit en cours". Prenez Orange. Validez 2 fois par Ok.
Ce n'est pas plus beau ainsi ? Quoi, bof ?! De toute façon maintenant vous savez faire, alors prenez la couleur qui vous plait le plus !
Changeons le comportement du bouton "taux", faites un clic droit dessus, Description. Vérifiez que le type soit Numérique. Maintenant dans la zone Masque de saisiehttp://wind.developpez.com/tutoriels/windev/editeur-windev/images/img21.JPG, frappez 9,99999. Appliquez les modifications puis cliquez sur le bouton Editer le codehttp://wind.developpez.com/tutoriels/windev/editeur-windev/images/img22.JPG (en bas à gauche).
Insérer le code : MoiMême=6.55957 dans la zone "Initialisation de taux". Ainsi à chaque démarrage du convertisseur la zone de saisie sera remplie. Notez que nous aurions pu écrire : taux=6.55957. MoiMême désigne l'objet dans lequel on se trouve.
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img23.JPG
Refermez la fenêtre en cliquant sur la croix du bas (en haut à droite).
Relancer le test de l'application en cliquant sur http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img24.JPG
et utilisez votre super convertisseur.
Objectifs :Connaître les éléments de base de l'éditeur WinDev. Création d'un convertisseur Francs / Euro.
Pour ce premier cours, nous allons créer un convertisseur Franc / Euro.
Lancer WinDev 10 en double cliquant sur son icône: http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img1.JPG.
La fenêtre d'accueil apparaît (si ce n'est pas le cas, fermez le projet, quittez puis relancez WinDev) :
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img2.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. Cette fenêtre va vous permettre de saisir le nom de ce nouveau projet et le lieu de stockage physique des éléments constitutifs.
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img3.JPG
Inscrivez « convertisseur » dans la zone nom, il sera repris automatiquement dans le champ du bas. Continuez en cliquant sur Suivant.
Créez un Type de projet Exécutable puis Suivant.
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img4.JPG
Comme vous travaillez seul pour cet écran, faites un clic sur suivant.
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img5.JPG
Cliquez sur ne pas utiliser de charte de programmation et ensuite sur suivant.
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img6.JPG
Prenez le Thème de Gabarit par défaut ou choisissez en un autre. Cliquez sur Suivant.
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img7.JPG
Le choix des langues ne nous intéresse pas pour l'instant. Cliquez sur Suivant.
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img8.JPG
Choisissez Ne pas utiliser d'Analyse puisque pour notre projet nous n'utiliserons pas de fichiers de données.
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img9.JPG
Continuez en cliquant sur Suivant et Terminer.
L'assistant va vous poser la dernière question ? Voulez vous créer une fenêtre ? Cliquez Créer une fenêtre puis choisissez Vierge dans l'onglet Standard. Validez par OK.
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img10.JPG
A ce stade nous avons une fenêtre vide dans l'éditeur. Il nous reste à lui donner un nom, une taille et définir quelques comportements.
Placez la souris dans la fenêtre vierge et faites un clic droit. Dans ce menu contextuel, validez Description. Vous obtenez la fenêtre à remplir comme ci-dessous :
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img11.JPG
Remplissez les divers champs de façons identiques et sélectionnez l'onglet IHM (Interface Homme-Machine).
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img12.JPG
Changez la taille, le fait qu'elle ne sera pas redimensionnable puis validez par OK.
Remarquez les différences, vous avez maintenant une fenêtre avec un nom, un titre et une taille définie.
Il est temps de sauvegarder, Cliquez sur Fichier puis Enregistrer.
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img13.JPG
Cliquez sur le bouton Enregistrer.
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 fenêtre « Bienvenue dans le méga convertisseur »).
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img14.JPG
Le premier champ se nommera franc et aura comme libellé "Zone francs :". Cliquez 2 fois dessus pour en modifier les caractéristiques :
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img15.JPG
Le second se nommera taux et aura comme libellé "Taux de change :".
Le troisième se nommera convertir et aura comme libellé "Résultat de la conversion :". Le bouton (sans cliquer sur la petite flèche vers le bas placée juste en dessous) enfin se nommera calcule et aura comme libellé "calcule".
Voici à quoi doit ressembler votre fenêtre (avec en surimpression le nom des champs) :
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img16.JPG
Il nous reste à mettre le code correspondant dans le bouton "calcule". Pour cela, faites un clic droit dessus et choisissez "Code".
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img17.JPG
Entrez la séquence comme indiqué ci-dessus puis fermez la fenêtre de l'éditeur de code : cliquez sur l'icône de fermeture en haut à droite de l'écran (croix du bas).
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img18.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 Lancer le test du projet.
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img19.JPG
WinDev vous demande de définir la première fenêtre de notre méga projet, choisissez "depart" dans la combo et validez.
Vous avez maintenant devant vous notre super convertisseur. Mais avouez qu'il est franchement moche :
- trop grand ;
- couleurs tristes ;
- et même des comportements par défaut peu pratiques.
Lesquels ?
C'est simple : Essayez de saisir le taux de conversion de l'euro 6,55957 !
Comme vous le voyez, le champ ne prend que 2 chiffres après la virgule ! De plus vous allez être obligé de le saisir à chaque fois !!! Ah, c'est beau l'informatique !!!
الموضوع الأصلى من هنا: منتديات الأستاذ التعليمية التربوية المغربية : فريق واحد لتعليم رائد http://www.profvb.com/vb/showthread.php?p=14795 (http://www.profvb.com/vb/t4523-post14795.html)
Nous allons remédier à tous ces petits détails :
Pour la taille de la fenêtre, placez votre souris sur l'angle inférieur droit de la fenêtre "depart" :
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img20.JPG
Une fois que le curseur change d'aspect, tenez appuyé le bouton gauche de la souris et remontez vers l'angle supérieur gauche. Relâchez la souris quand la taille souhaitée sera atteinte.
La couleur de fond n'est pas très gaie. Clic droit n'importe où dans la fenêtre : Description, puis onglet Style etCombo "Gabarit en cours". Prenez Orange. Validez 2 fois par Ok.
Ce n'est pas plus beau ainsi ? Quoi, bof ?! De toute façon maintenant vous savez faire, alors prenez la couleur qui vous plait le plus !
Changeons le comportement du bouton "taux", faites un clic droit dessus, Description. Vérifiez que le type soit Numérique. Maintenant dans la zone Masque de saisiehttp://wind.developpez.com/tutoriels/windev/editeur-windev/images/img21.JPG, frappez 9,99999. Appliquez les modifications puis cliquez sur le bouton Editer le codehttp://wind.developpez.com/tutoriels/windev/editeur-windev/images/img22.JPG (en bas à gauche).
Insérer le code : MoiMême=6.55957 dans la zone "Initialisation de taux". Ainsi à chaque démarrage du convertisseur la zone de saisie sera remplie. Notez que nous aurions pu écrire : taux=6.55957. MoiMême désigne l'objet dans lequel on se trouve.
http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img23.JPG
Refermez la fenêtre en cliquant sur la croix du bas (en haut à droite).
Relancer le test de l'application en cliquant sur http://wind.developpez.com/tutoriels/windev/editeur-windev/images/img24.JPG
et utilisez votre super convertisseur.