|
Comment réaliser un formulaire un exemple : « Ouvre_Url » pas à pas
Comment le faire ?
(Cliquer ici si vous connaissez déjà un peu
dBase)
1ère partie
La création du formulaire
Objectif
Utiliser dBase pour créer un formulaire simple
Le formulaire à créer
Préparatifs
Créer/choisir un répertoire où vous installerez l'exemple. Y déposer la page html que vous souhaitez pouvoir ouvrir en local, celle utilisée ici se nomme ouvreU.htm (charger le pack, nécessite de posséder dBase pour fonctionner)
Utiliser dBase Pour créer un formulaire Lancer dBase Dans la fenêtre du navigateur, sélectionnez le répertoire prévu. Cliquez sur l'onglet Form Sélectionnez en haut, à gauche l'icône des formulaires notée « untitled » Le système vous demande si vous voulez un assistant « Wizard » ou le faire vous-même « Designer » Choisissez « Designer » en cliquant dessus. Un nouveau cadre apparaît avec pour titre « Untitled - Form Designer » et deux autres objets « flottants » identifiés, Component palette et Inspector
Pour mettre des "choses" dans un formulaire
Mettre un titre.
Pour cela, dans la palette des composants qui est apparue (Component palette), dans l'onglet « Standard » sélectionnez le A avec la souris, déplacez la souris sur la zone grisée du formulaire et lâchez. La Palette de composants Vous voyez des carrés noirs qui dessinent un rectangle et un texte s'est automatiquement inscrit : text1 Double-cliquez sur dans ce rectangle et mettez le nom que vous voulez. Si le nom est trop long tirez sur les différentes poignées du rectangle jusqu'à ce que cela vous convienne.
Mettre des « boutons »
Maintenant on va disposer deux boutons. Pour cela choisissez à l'aide de la souris le bouton gris noté « OK ». Faites un glisser_lâcher comme précédemment. Sélection d'un composant de type bouton Un bouton noté « Pushbutton1 » apparaît.
Améliorer l'utilisation d'un bouton
Ce nom n'est pas expressif, on va le renommer. Pour cela on va dans le cadre ayant pour titre « Untitled _ Inspector » L'inspecteur de composants Vous voyez bien en haut le nom : form.pushbutton1 Vérifiez qu'est bien présent à l'écran l'onglet Properties (propriétés) Déplacez l'ascenseur vertical jusqu'à trouver la ligne où se trouve « PUSHBUTTON1 ». Vous devez voir à gauche le nom de la propriété : name. Cliquez sur PUSHBUTTON1 et saisissez à la place « pbOUVRELOCAL ». Tant que vous n'avez pas validé, le texte apparaît sur fond jaune. Validez. A ce moment en haut « form.pushbutton1 » est remplacé par « form.pbouvrelocal ». Mais sur le formulaire en cours de construction rien n'a changé. C'est normal, on a juste changé le nom sous lequel dBase va identifier ce bouton poussoir, mais rien pour l'utilisateur. Pour changer le nom visible par l'utilisateur sélectionnez en face la propriété « text » le nom en gras « Pushbutton1 » et remplacez-le par « Ouvre une page stockée sur le poste ». Le nom change sur le bouton présent dans le formulaire.
Si tout le texte ne rentre pas, agrandissez le bouton. Pour cela, cliquez dessus et servez-vous des "poignées" pour le mettre à la bonne dimension.
Cliquez dessus. Ce bouton va nous aider pour le second. Faites un clic droit avec la souris. Un menu 'surgissant" apparaît. Choisissez « Copy ». Sélectionnez un endroit vide du formulaire, faites un clic droit de souris et choisissez « paste ». Le second bouton apparaît, de la même taille que le premier, légèrement décalé. Avec la souris déplacez-le où vous voulez.
Dbase a nommé ce nouveau bouton « Pushbutton1 ». Comme précédemment nous allons changer le nom pour le système dBase et celui visible par l'utilisateur. Allez dans l'inspecteur, onglet Propriety Pour la propriété name, saisissez « pbOUVREWEB ». Pour la propriété text, saisissez « Ouvre une page stockée sur le web ».
Sauvegarder Il est temps de sauvegarder. Le plus simple, mais pas le meilleur mode : appuyez sur le
bouton avec un éclair en jaune (run form) Le formulaire s'affiche. On a un texte et deux boutons. Si l'on appuie dessus... il ne passe rien.
Modifier un formulaire
Avez-vous remarqué, le nom affiché en haut n'est pas celui
utilisé pour la sauvegarde, mais simplement Form.. Pour le changer, il faut revenir en
mode de création du formulaire. Appuyez à droite de l'icône « éclair » sur
l'icône construction représentés par une équerre sur une règle Notre formulaire réapparait ainsi que la palette des composants et l'inspecteur. Cliquez sur le fond du formulaire, afin que dans l'inspecteur, seul le nom form apparaisse. Sélectionner "Form" Dans l'inspecteur, déplacez l'ascenseur vers le milieu, jusqu'à voir dans la rubrique « Miscellelaneous » la propriété Text. En face, rien. C'est là que l'on va mettre le nom visible pour l'utilisateur : Ouvre Url. Saisissez le nom. Cliquez sur l'éclair On a fait un changement, mineur, on va en profiter pour sauvegarder la modification. Mais on va en profiter pour créer un second fichier : ouvre_url_1_1. Pour cela sélectionner dans la barre de menu l'option File, puis Save As... dans la boite de dialogue s'ouvre, entrez le nouveau nom : ouvre_url_1_1. On dispose ainsi de deux versions : une avant et une après la modification. Cela est plus rassurant.
La mise en place de la fonction
Comme ça se complique, on va de suite créer une nouvelle sauvegarde, identique à ouvre_url_1_1. On va la nommer ouvre_url_2. Ainsi si l'on se plante, il restera le code de départ dans ouvre_url_1_1.wfm.
Copier, sans se poser de question, le code présent sur le site à partir de Function Ouvre_Url(cURL)jusqu'à return nHandle . Pour l'insérer dans le formulaire, il va falloir se mettre dans une nouvelle situation, on ne travaille plus seulement visuellement, mais il faut donner des instructions à Dbase. On l'ouvre en mode de conception, et sois on appuie sur F12, sois on fais un clic droit et on choisi l'option du haut : Source Editor /designer
Oh, ca devient compliqué !
On ne s'occupe pas de la partie gauche pour l'instant. Dans la large fenêtre de droite, vous voyez : class ouvre_Url_1Form of FORM Descendez tout en dessous jusqu'à ENDCLASS Positionnez le curseur de la souris en dessous, et coller le texte sélectionné en précédemment.
Assurez-vous que ce changement ne gêne pas le bon fonctionnement du programme. Pour cela lancer le formulaire : bouton éclair (run Form).
Vous pouvez avoir une fenêtre d'alerte. Appuyez sur Fix. Entre deux lignes, un point attend quelque chose. En fait, à la fin de la ligne précédente, il y a un point-virgule, ce qui en langage dBase signifie que la ligne d'instruction n'est pas terminée et qu'il faut continuer sur la suivante. Or la suivante est vide. Il suffit de supprimer la ligne inutile afin que l'instruction soit complète et recommencer le lancement du formulaire. Si la même erreur survient, vous connaissez le remède !
Çà fonctionne ? On a assez souffert, il faut sauvegarder. Repasser en mode création, et sauvegardez sous le nom de ouvre_Url_2_1.
Ordonner aux boutons de
travailler Pour cela sélectionner le bouton noté « ouvre une page stockée sur le poste ». On voit dans la fenêtre de l'inspecteur que l'objet sélectionné est bien form.pbouvrelocal. Sélectionner au lieu de l'onglet Properties, celui noté Events (évènements). Plein de mots commençant par onXXX s'affichent. Le premier est clair même aux réfractaires à l'anglais « onClick » Remplacer Null, par ouvre_url("ouvreU.htm") avec des guillemets anglais (bouton 3 du clavier » et non des guillemets français. Bien respecter les majuscules et minuscules pour le nom de la page web à ouvrir. Et là, le miracle devrait s'accomplir ! Lancez l'exécution du formulaire (bouton éclair). C'est le moment d'appuyer sur le bouton « ouvre une page stockée sur le poste ». Normalement, la page doit s'ouvrir dans votre navigateur. Vous êtes content ? Vous pouvez !
Allez, si votre connexion Internet fonctionne, on va pouvoir s'occuper du second bouton.
Supposons que vous vouliez aller sur le site de dBase. L'adresse Url est : " http://www.dbase.com"
Repassez en mode création Sélectionnez le second bouton, allez dans l'inspecteur, onglet Events et sur la ligne onClick, remplacer null par ouvre_url("http://www.dbase.com/"), avec des guillemets anglais. Validez votre saisie. Vous avez peut-être remarqué que dBase enserre l'expression notée par des {}. Ne vous inquiétez pas, il fait ça tout seul. A nouveau le moment de tester. On appuie de nouveau sur l'éclair Puis sur le bouton « ouvre une page stockée sur le web ». Tout va bien.
Il ne se passe rien ? Vérifiez : que la connexion Internet fonctionne que vous n'avez pas commis d'erreur sur le nom des pages à ouvrir, en particulier entre majuscules et minuscules que les guillemets qui entourent le nom de la page sont bien des guillemets anglais " et non des français.
Faites une sauvegarde sous un nom qui vous convient et effacez les étapes intermédiaires. Le formulaire prêt
à fonctionner Et vous avez constaté, que dBase reste un outil très simple à utiliser.
Une interface un peu plus sexy ?
En effet on peut déjà améliorer les boutons en leur ajoutant une image.
Pour cela repasser en mode conception Cherchez dans la partie des propriétés, la propriété upBitmap. Cette propriété permet d'inclure une image sur un bouton. On va utiliser des icônes windows, elles offrent l'avantage d'être famillières aux utilisateurs. Vous avez dans le pack ci-joint deux icônes : le dossier : celle d'Internet Explorer
Chercher une image pour agrémenter un bouton Nous allons commencer par la page stockée en local. Cliquez sur la clé anglaise Une nouvelle boîte de dialogue s'ouvre. Dans la zone bitmap, cliquez de nouveau sur la clé anglaise pour chercher le fichier ico_shell320005.gif sur votre poste de travail Sélection de l'image à afficher sur le bouton Validez. Validation de l'image sélectionnée dans l'inspecteur L'image apparaît immédiatement sur le bouton.
Faîtes de même avec le bouton « ouvre une page stockée sur le web ». Et voilà, l'interface est plus conviviale. Le formulaire terminé
Vous aurez peut-être besoin d'ajuster la taille des deux boutons et celle du formulaire, cela se fait directement à la souris en mode conception ou en modifiant la propriété width des trois composants.
2ème Partie
Comment le faire ?
Préparatifs Créer/choisir un répertoire où vous installerez l'exemple. Y déposer la page html que vous souhaitez pouvoir ouvrir en local, celle utilisée ici se nomme ouvreU.htm
Utiliser dBase
Lancer dBase Se mettre en position de création d'un nouveau formulaire Déposer deux boutons. Se positionner sur le premier bouton et faire les modifications suivantes Pour la propriété name, saisissez « pbOUVRELOCAL ». Pour la propriété text, saisissez « Ouvre une page stockée sur le poste ». Onglet Events et sur la ligne onClick, remplacer Null, par ouvre_url("ouvreU.htm")
Pour le second bouton Pour la propriété name, saisissez « pbOUVREWEB ». Pour la propriété text, saisissez « Ouvre une page stockée sur le web ». Onglet Events et sur la ligne onClick, remplacer null par ouvre_url("http://www.dbase.com/"), Quitter l'outil visuel pour passer en mode conception : F12 Positionner le curseur à la fin, sous
Endclass
Fermer, sauvegarder et lancer
Si vous le souhaitez, vous pouvez ajouter deux icônes sur les boutons.
Réalisé avec dbase Plus 2.6.01. Images avec PhotoFiltre 6.4.0
Maurice Abraham - 7 février 2009 - version 1.0.0 2010 : ajout des icônes sur les
boutons Dernière correction : samedi 05 novembre 2011 02:24
|