Cela fait plus de 6 mois que j’ai découvert Rebol et j’aimerais par cet article vous commenter mes impressions et mettre sur papier les découvertes que j’ai déjà pu faire avec l’œil d’un novice.

Tout d’abord, j’ai été charmé par la facilité d’écriture tant au niveau du langage lui-même, qu’au niveau de la construction de l’interface graphique. Je me suis dit que j’allais enfin pouvoir écrire des logiciels aussi facilement que j’écris des pages html, asp, ou php. En effet, lorsque l’on tombe sur une page expliquant le VID, par exemple, on se dit que c’est vraiment facile. Cependant cette euphorie est vite retombée, en tentant d’écrire un programme avec une interface graphique. Si le livre de Olivier Auverlot et ses conseils personnels ne m’avait pas apporté les directions essentielles, je serai encore à tâtonner. En effet, sur internet, la documentation sur rebol est bien rare et plus rare encore est l’explication du " comment-faire " un programme avec interface graphique. Au début, je me suis contenté d’analyser quelques scripts disponibles liant le VID et les mots de Rebol, mais il me restait encore pas mal de chemin à faire avant de bien comprendre les choses.

Si vous avez entre vos mains, quelques documents html provenant du site www.rebol.com ou .org, vous pourrez tout comme moi, vous perdre à distinguer entre le VIEW LAYOUT ET le MAKE FACE, les questions de face, de parent-face, et autres. Au début, il est difficile de bien comprendre ce que cela représente, et quels sont leurs différences.

Toutefois pour des impératifs professionnels, j’ai dû bien vite les comprendre et trouver une solution viable. La façon que j’ai de travailler est désormais la suivante :

Je commence par créer un block, cad un [] rattaché à un " mot ". Cela donne :

rebol[] ; qui est le header de tout programme rebol

fen: []

Mon mot est fen (comme fenêtre). Ensuite pour des questions de convenance et de relations entre rebol et VID, je fais des ajouts (avec la fonction ‘append’) à ce block.

Cela donne :

append fen [les boutons, boites ou textes à ajouter]

Lorsque je désire ajouter des éléments crées par des fonctions, j’écris la ligne

append fen reduce compose/deep [‘at 300x300 ‘box (string i)] . 

Il est important de mettre les mots VID avec un ‘ juste avant, afin d’indiquer à reduce compose/deep qu’il faut reprendre tel quel ces mots dans la composition du block. Ces ‘mots-là sont les mots appartenant au dialecte VID. Ce qu’il y a entre parenthèses représente ce qui va être composé pour l’occasion.

Tout ceci permet de composer du VID, suite à un traitement ou un création de quelque chose en rebol. Ce qui se trouve entre parenthèses sera transformé et ajouté au block fen []

J’ai découvert dernièrement qu’il était    possible d’afficher le block ainsi créé en tapant. Cela est très    utile pour découvrir les erreurs éventuelles de composition.

print mold fen

A cet instant, fen n’est ni un layout, ni une face. Ce n’est qu’un block et en tant que tel il ne peut être affiché dans une fenêtre VID. A mon avis, il est préférable d’attendre la toute fin de votre composition pour effectuer la transformation.

fen: layout fen ; qui est la transformation du block en un objet layout.

Et juste après, écrire :

view fen

L’avantage de cette technique est que fen n’est pas un objet ‘ layout’ avant d’avoir écrit tout ce qui est relation entre vid et rebol. Notre fen [] est tout au long de l’écriture un block et c’est simplement avant son " dessinage " avec le view, que nous le transformons en object layout, avec ses propres contraintes en matière de transformation.

La raison de tout cet effort : l’objet Layout a ses contraintes et mieux vaut les contourner par cette façon et lorsque le block est correctement écrit, la transformation peut avoir lieu. J’ai donc une série de transformations tout à la fin de mon programme. Une série car comme je vais vous l’expliquer dans la partie suivante, ma fenêtre est en fait composée de box qui vont être rempli par des layouts.

Cela donne à la fin de mon programme quelque chose comme :

partie-droite-layout: layout partie-droite

partie-gauche-layout: layout partie-gauche

partie-haute-layout: layout partie-haute

Les fenêtres dans les grandes

Une autre de mes préoccupations fut de faire des updates de ma fenêtre en fonction des événements demandés. Je commençai alors par faire des rafraîchissements de la fenêtre complète. Par exemple :

button "update" [view layout fen]

Cela donne des résultats assez décevants (longs) car il y a un redessinage de toute la fenêtre et le résultat se voit à l’écran par un bref scintillement. La solution pour moi a été de placer dans un premier temps des box dans ma fenêtre principale et de les remplir en fonction des besoins par des objets layout. J’en suis arrivé à trouver un processus fait de fonctions pour rafraîchir les différentes parties de ma fenêtre :

0. (creation-de-la-fenetre-en-block) ex : fen [at 0x0 la-boite-gauche: box 300x500 at 301x0 la-boite-droite: box 300x500 ] 1. creation-du-block ; qui par la suite deviendra le layout.
2. clear-the-block
3. remplir-le-block or append-le-block
4. convertir-le-block-en-layout (par exemple  reload-partie-gauche: func [][ partie-gauche-en-layout: layout/size/offset partie-gauche 260x235 0x0]
5. la-boite-gauche/pane: partie-gauche-en-layout ; la boite est remplie par le layout. En fait l’element pane de la boite peut etre un layout
6. show la-boite-gauche

Remarque : Dans cet exemple, la boîte-droite n’a pas été rafraichi et peut rester la même qu’auparavant, puisque seule la partie gauche est dans le cas présent rafraichie.

Génération d’un layout "dynamique"

Je vais vous donner un exemple de génération d’un exemple tout simple permettant de créer des boutons dynamiquement.

rebol []

fen: [backdrop 212.212.212]

liste: ["Bouton 1" "bouton2" "bouton3" "bouton4"]

foreach element liste [append fen reduce compose/deep    ['button (element) [print (element)]]]

fen: layout fen

view fen

La composition du layout dynamiquement est rendu possible par la fonction reduce compose/deep qui évalue les parenthèses avant la création du block. Le même exemple encore sans la liste de départ :

rebol []

fen: [backdrop 212.212.212]

for e 1 10 1 [append fen reduce compose/deep ['button      (join "Hello " e) [print (join "Salut " e)]]]

fen: layout fen

view fen

Déclaration d’un mot dans VID

Attention le prochain exemple est encore plus intéressant car il y aura création de mot dans le block lui-même, permettant ensuite d’avoir des actions sur le mot lui-même.

rebol []

fen: [backdrop 212.212.212]

for e 1 10 1 [append fen reduce compose/deep [to-set-word join "bouton" (e) 'button (join "Hello " e) [print (join "Salut " (e))]]]

append fen [button 230x24 "changement de taille du bouton 3" [bouton3/size: 200x50 show bouton3]]

append fen [button 230x24 "revenir à l'état initial" [bouton3/size: 100x25 show bouton3]]

print mold fen

fen: layout fen

view fen

Voilà j’espère que cette introduction au VID, vu avec l’œil d’un newbie vous a plu. Pour toutes questions, ou remarques sur cet article, voici mon email oehler@infomaniak.ch

Philippe Oehler

Retour