IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Créer un lecteur de pensée

Gestion de tableau à une dimension. Création de procédure. Gestion de table mémoire. Gestion des nombres aléatoires. ♪

Article lu   fois.

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Présentation

Avec WebDev 12, nous allons créer un nouveau projet nommé tp2.

Cliquez sur Fichier puis Nouveau.

im1.jpg

Ensuite, dans le carrousel choisissez Projet (L'immense P jaune) :

im2.jpg

L'assistant ouvre la première fenêtre de dialogue :

im3.jpg

Saisissez les informations « Tp2 » dans le champ Nom du projet : et un résumé si vous le désirez ensuite cliquez sur le bouton symbolisant Suivant.


Voici le nouvel écran :

im4.jpg

Comme nous n'avons aucun document à ajouter, nous pouvons cliquer sur Suivant.

im5.jpg

Ici, l'assistant nous demande ce que nous voulons réaliser, le choix par défaut « Site Internet » nous convient, cliquons sur le bouton Suivant.

im6.jpg

Le choix par défaut « Site dynamique WebDev » nous convient, cliquons sur Suivant.

im7.jpg


Ici, nous n'allons rien modifier à cet écran et passer directement au suivant.

im8.jpg

Ici, nous n'allons rien modifier à cet écran et passer directement au suivant.

im9.jpg

Là non plus, nous n'avons rien à indiquer, hop suivant !

im10.jpg

Ici, indiquez que vous travaillez seul et cliquez sur Suivant.

im11.jpg

Nous n'allons pas utiliser le gestionnaire de sources, un clic sur Suivant.

im12.jpg

Nous n'allons pas demander à WinDev de préfixer nos variables et autres objets, choisissez le choix « Non, ne pas utiliser de charte de programmation » et Suivant.

im13.jpg

Ici, pour le moment nous n'utiliserons pas de charte graphique, cliquez donc sur Aucune puis sur Suivant.

im14.jpg

Nous n'intégrerons pas de page d'accueil, cliquez sur Non, ne pas intégrer une page d'accueil puis sur Suivant.

im15.jpg

Notre projet ne gérera aucune autre langue que le français, vous pouvez cliquer directement sur le bouton Suivant.

im16.jpg

Nous n'utiliserons pas de base de données, sélectionnez ce choix-là et cliquez sur le bouton Suivant.

im17.jpg


Nous voici arrivés à la fin de l'assistant vous pouvez cliquer sur le Jet vert.

im18.jpg

WebDev nous demande ce que l'on veut réaliser, cliquez sur « Aller directement dans l'éditeur de WebDev »


Si vous êtes sous le tableau de bord :

im19.jpg

Cliquez sur l'icône « Afficher le graphe du projet »:

im19.bmp


Nous allons créer maintenant la seule et unique fenêtre du projet. Cliquez sur Fichier puis Nouveau puis dans le carrousel choisissez Page.

im20.jpg

Choisissez ensuite Vierge dans le choix proposé dans la fenêtre.

im21.jpg


Cliquez sur le Jet vert le fond d'écran devient blanc il symbolise notre page web. Faites un clic droit à l'intérieur de la fenêtre pour faire surgir le menu contextuel.

im22.jpg


Choisissez Description. Remplissez les champs comme illustrés ci-dessous :

im23.jpg

Ensuite, cliquez sur le Jet vert. Nous allons maintenant enregistrer cette nouvelle fenêtre. Pour cela cliquez sur Fichier puis Enregistrer sous

im24.jpg

Validez en cliquant sur le bouton Enregistrer.


Nous allons nous consacrer aux objets nécessaires et ensuite au code.

Nous allons commencer par insérer un champ libelléim24.jpg

Positionnez-le comme ceci :

im25.jpg

Faites un clic droit dessus pour faire apparaître le menu contextuel et choisissez le menu Description.

Modifiez comme indiqué ci-dessous :

im10.jpg

Validez votre saisie en cliquant sur le jet vert.


Nous allons mettre en forme ce libellé. Pour cela, cliquez dessus :

im25.jpg

Regardez en bas et à droite de votre éditeur de fenêtre vous devriez voir ceci :

im26.jpg


Nous pouvons lire le nom de notre objet libellé, son positionnement à l'intérieur de la page et sa taille. Nous allons modifier les deux dernières zones de la façon suivante :

im27.jpg


Voici le nouveau libellé :

im28.jpg

Maintenant nous allons insérer une table mémoire. Cliquez sur cette icône :

im29.jpg

Glissez l'objet sous le libellé, un assistant de création de tables se déclenche :

im30.jpg

À ce stade, cliquez sur suivant.

im31.jpg

Décochez « avec titre de colonne », « avec gestion d'un séparateur », placez un mode de sélection « Sans sélection » et pas d'ascenseur horizontal. Cliquez ensuite sur suivant.

im32.jpg

Comme ci-dessus, choisissez 10 colonnes et 10 lignes puis pour chaque colonne modifiez la largeur en la mettant sur 50. Cliquez sur suivant.

im33.jpg

Vérifiez que vous avez les mêmes informations que ci-dessus (enlevez le titre de la table) et cliquez ensuite sur le jet vert.


Maintenant, nous allons réduire la largeur de chaque colonne. Pour cela, cliquez sur la première des dix colonnes.

im23.jpg


Voici ce que vous devriez voir en bas à droite. Remplacez 100x186 par 50x186. Cela aura pour effet de diviser la largeur de la colonne par 2. Répéter cette manipulation pour les neuf autres colonnes.


Voici ce que vous devriez obtenir.

im34.jpg


Le dernier objet à placer et un bouton.


Créez-en un et placez-le comme ceci :

im35.jpg

Nous allons lui donner un nom et un libellé plus explicite. Faites un clic droit dessus et choisissez Description.

im36.jpg

Modifiez le nom et le libellé comme ci-dessus. Ensuite, validez.


Nous allons maintenant commencer la phase de codage par la création d'une variable locale à la fenêtre.


Faites un clic droit sur une zone vierge de la page, c'est-à-dire sur aucun objet, ensuite choisissez code. Saisissez ceci dans la zone déclaration globale de la fenêtre Départ :

im37.jpg


Maintenant nous allons créer une procédure locale que nous nommerons « RemplirTable »

im38.jpg

Dans la zone inférieure de l'éditeur, cliquez sur l'onglet du code, puis sur « Procédures locales». Enfin, faites un clic avec le bouton droit de la souris, dans la zone de droite pour faire apparaître le menu contextuel suivant.

im29.jpg


Saisissez « RemplirTable » en validant la saisie en appuyant sur la touche entrée.


Vous devriez vous retrouver ensuite sous l'éditeur de code.

im39.jpg

Voici le code que je vous laisse saisir. Je donnerai quelques explications ensuite.

im40.jpg


Nous déclarons plusieurs variables, des indices (i,j) un compteur (t), une chaine (sMesValeurs) qui contiendra le contenu du tableau (MonTableau).


Le code commence à affecter à la variable globale SymboleMagique un caractère choisi au hasard parmi les codes ASCII compris entre 224 et 250.


Ensuite, la table mémoire est vidée.


Maintenant le processus de remplissage de la table commence : pour chaque ligne (de i=1 à 10) nous allons remplir chaque colonne (de j=1 à 10) de la valeur du compteur plus le SymboleMagique si le compteur est un multiple de neuf sinon un symbole ASCII pris au hasard si compteur n'est pas un multiple de 9


À la fin du traitement de j, SmesValeurs récupère tous les éléments du tableau séparés par le caractère TAB.


Enfin, sMesValeurs est ajouté à la table.


Notez que nous aurions pu changer les deux dernières lignes par ceci :


Tableajoute(Table1,MonTableau[1]+tab+Montableau[2]+tab+…jusqu'a .+MonTableau[10])


Voilà pour la procédure. Il nous faut programmer l'affichage de la table. Pour cela, faites un clic droit dessus et choisissez Code.


Saisissez le code suivant dans la zone Initialisation de Table1 :

im41.jpg

La table lancera la procédure de remplissage dès qu'elle sera créée.


Intéressons-nous au code du bouton :

im42.jpg

Le code affichera une fenêtre d'information indiquant quel code a été choisi. Ensuite dès que l'utilisateur aura fermé la fenêtre d'information la table se régénérera.


Voilà vous pouvez lancer ce projet en cliquant sur :

im43.jpg


et voir par vous-même si le programme devine vos pensées !!!!


Je pense que les plus rusés auront trouvé l'astuce, pour les autres, comme indice, je vous dirais juste de regarder la diagonale.


Pour améliorer la présentation, vous pouvez faire en sorte que les éléments de la page soient centrés. Pour cela faites clic droit sur une zone vierge de la page et choisissez Description dans le menu contextuel. Vous devriez avoir ceci :

im44.jpg

Décochez « Fixer les champs dans la page » et cochez « Centrer la page dans le navigateur ou la frame ».

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 ni 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.