Pas à pas Le formulaire
Accueil Remonter Liste de codes erreurs Les dates Pas à pas - A propos.wfm Pas à pas Le formulaire dUflp Newsgroups

 

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

 

pap_url_ico2.gif (12964 octets)

 

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.

palette_composants.gif (7831 octets)

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.

palette_composants_bouton.gif (7861 octets)

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 »

inspecteur_form_pushbt1.gif (11423 octets)

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.

pleurs.gif (1772 octets)

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)bt_eclair.gif (198 octets) et dans la boite de dialogue qui s'ouvre saisissez un nom, « ouvre_url_1 » par exemple.

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 bt_concepteur.gif (372 octets) .

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.

inspecteur_form.gif (6881 octets)

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 bt_eclair.gif (198 octets) pour voir le changement.

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

 

pleurs.gif (1772 octets)

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 bt_concepteur.gif (372 octets).

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 bt_eclair.gif (198 octets).

Puis sur le bouton « ouvre une page stockée sur le web ».

Tout va bien.

 

pleurs.gif (1772 octets)

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.

ouvre_url.gif (17368 octets)

Le formulaire prêt à fonctionner

Et vous avez constaté, que dBase reste un outil très simple à utiliser.

 

 

Agrémenter les boutons

 

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 bt_concepteur.gif (372 octets) et se positionner par exemple sur le bouton « ouvre une page stockée sur le poste ». Allez dans l'inspecteur

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 : ico_shell320005.gif (1538 octets)    nommée ico_shell320005.gif

celle d'Internet Explorer  ico_iexplore0013.gif (1688 octets)    nommée ico_iexplorer0013.gif:

 

 

pap_url_ico1_1.gif (29781 octets)

Chercher une image pour agrémenter un bouton

Nous allons commencer par la page stockée en local.

Cliquez sur la clé anglaise bt_cle_anglaise.gif (124 octets)

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

pap_url_ico1_2.gif (10931 octets)

Sélection de l'image à afficher sur le bouton

Validez.

pap_url_ico1_3.gif (35404 octets)

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.

pap_url_ico2.gif (12964 octets)

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


Je suis pressé et connais un peu dBase

 

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
Copier, le code à partir de Function Ouvre_Url(cURL)jusqu'à return nHandle

 

Fermer, sauvegarder et lancer bt_eclair.gif (198 octets)

 

Si vous le souhaitez, vous pouvez ajouter deux icônes sur les boutons.

 

 

barre_verte_5px.gif (88 octets)

 

 

 

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