Introduction au VID
Article paru dans le magazine Login numéro 87
Reproduction interdite. Tous droits réservés à Posse Press et Olivier Auverlot
Depuis les premiers articles parus dans Login, vous avez uniquement utilisé Rebol/Core pour les différents exemples. Etant limité à l'affichage de textes, ce produit ne vous permettait rien de bien spectaculaire en terme de présentation. Depuis le début du mois d'avril, vous pouvez télécharger Rebol/View sur le site officiel de la société (http://www.rebol.com).
Rebol/View est une extension de Rebol/Core. Il fait exactement les mêmes choses mais autorise également la conception d'interfaces graphiques qui sont totalement indépendantes de la plate-forme d'exécution. Votre application ne nécessite aucune adaptation pour fonctionner sur un système différent de celui qui a été utilisé pour le développement.
C'est gratuit ou c'est payant ?
Il existe en fait deux versions de Rebol/View. La première, nommée sobrement Rebol/View, est totalement gratuite. Vous pouvez la considérer comme étant une version de Rebol/Core agrémentée de fonctionnalités graphiques. La seconde, qui se nomme Rebol/View/Pro, est la version commerciale du langage. Si vous l'achetez, vous disposez alors de Rebol/View enrichi de nombreuses extensions qui sont :
Dans les deux cas, ces produits sont totalement compatibles avec Rebol/Core. Vos anciens scripts fonctionneront donc sans aucun problème avec ces deux évaluateurs. A partir de maintenant, l'intégralité des exemples utiliseront Rebol/View.
GCS ou VID ?
Pour afficher des composants graphiques à l'écran, Rebol/View dispose du Graphical Compositing System. Ce moteur très puissant vous permet d'afficher des cadres, des textes, des images mais aussi d'appliquer des effets spéciaux tels que des dégradés de couleurs, des effets de miroir ou des modifications des palettes de couleurs. On peut faire beaucoup de choses en travaillant uniquement avec lui mais dans ce cas, vous êtes obligé de tout faire à la main. Le GCS représente les fonctions de bas niveau de Rebol. Leur usage est donc à réserver à des applications très spécifiques telles que la conception de composants graphiques personnalisés ou la réalisation de produits multimédia complexes.
Heureusement pour vous, les concepteurs de Rebol/View ont tout prévu afin de vous éviter de réinventer la roue à chaque application. La solution réside dans l'utilisation d'un dialecte nommé VID (Visual Interface Dialect). Celui-ci permet en quelques instructions d'afficher et de manipuler les principaux éléments présents dans une interface graphique. Il est important de retenir que VID n'est qu'un dialecte parmi d'autres. La grande idée de Rebol/View est que chacun peut développer son propre dialecte graphique adapté à ses besoins (produits de gestion, jeux vidéo, bornes interactives, etc.). VID est un dialecte très générique qui permet de réaliser tous les types d'applications avec une grande facilité.
Comment définir une mise en page ?
La définition du contenu d'une fenêtre correspond à une mise en page : un LAYOUT.. Il s'agit d'un bloc contenant des instructions du dialecte VID. Vous pouvez également mélanger du code Rebol avec la déclaration des différents éléments graphiques. Commençons par un exemple simple, le code qui suit affiche une fenêtre avec le texte "Login" à l'intérieur de celle-ci :
view layout [ vh1 "Login" ]
Une première fenêtre avec VID.
Une seule ligne de code suffit pour créer une fenêtre contenant une zone texte ! Supposons maintenant que vous vouliez ajouter un bouton "Quitter" permettant de fermer l'application, le code devient alors :
view layout [
vh1 "Login"
button "Quitter" [ quit ]
]
Ajout d'un bouton.
Les instructions VH1 et BUTTON sont nommées des styles dans les documentations officielles de Rebol. Vous pouvez traduire ce terme à l'aide des mots "composant" ou "élément" graphique. Rebol parle de style car l'aspect et le comportement des composants est entièrement modifiable par l'utilisateur. Pour la gestion des événements, le code exécuté est placé dans un bloc contenant les instructions en langage Rebol. Ce bloc de code peut contenir plusieurs lignes et appeler des fonctions.
Quels sont les composants standards ?
VID dispose de nombreux éléments graphiques prédéfinis. Rien que pour l'affichage de texte, il en existe dix-sept. Les plus pratiques sont TEXT pour une simple étiquette, TITLE et VH1 pour un titre. L'instructions KEY permet de détecter la pression d'une touche par l'utilisateur. BUTTON permet d'afficher un bouton. TOGGLE, ROTARY et CHOICE sont respectivement un bouton à deux positions, un bouton rotatif et une liste déroulante. CHECK et RADIO définissent une case à cocher et un bouton radio. FIELD et AREA sont des champs de saisie. LIST et TEXT-LIST permettent à l'utilisateur de sélectionner une ou plusieurs informations dans une liste. SLIDER permet d'afficher des ascenseurs. Vous pouvez également utiliser des boîtes de dialogue standards telles qu'un sélecteur de fichiers ou des boîtes de saisie ou de demande de confirmation à l'utilisateur.
Dans le domaine graphique, le style IMAGE permet d'afficher les formats BMP, GIF, JPEG et PNG et d'appliquer des effets spéciaux sur ceux-ci. Le dialecte DRAW autorise le dessin de formes géométriques telles que des lignes, des cercles, etc. La transparence étant également gérée, cela laisse entrevoir d'excellentes perspectives dans le domaine du jeu vidéo, particulièrement dans le domaine des jeux en réseau.
Ces styles disposent tous de propriétés permettant de modifier dynamiquement leur apparence. Pour qu'il y ait changement à l'écran, le composant doit être réaffiché avec le mot SHOW.
Quels sont les attributs disponibles ?
En fait, tous les éléments graphiques du VID utilisent les mêmes paramètres et ceux-ci peuvent être placés dans un ordre quelconque. VID, selon le type de données, est capable de savoir à quel attribut la valeur présente est destinée :
Comment placer les éléments ?
Là encore, vous disposez de deux moyens :
Un exemple à méditer
Dans l'exemple qui suit, vous réalisez un convertisseur entre les francs et les euros. Le code complet pèse... 641 octets. La légèreté des applications développées avec Rebol/View leur permet d'être téléchargées sur les réseaux avec beaucoup de facilité.
REBOL [
title: "Convertisseur Franc/Euro"
]
convertir: function [ valeur /franc /euro ] [ somme ] [
somme: to-decimal valeur
either franc [
somme: somme * 6.55957
] [ somme: somme / 6.55957 ]
prix/text: copy (to-string somme)
show prix
]
view layout [
prix: field 200x20 ""
across
franc: radio of 'monnaie true [ convertir/franc prix/text ]
text "Francs"
euro: radio of 'monnaie [ convertir/euro prix/text ]
text "Euro"
return
button "Quitter" 255.0.0 [ quit ]
button "Calculer" [
either franc/data = true [
convertir/franc prix/text
] [ convertir/euro prix/text ]
]
]
Votre convertisseur Francs/Euro.
Et la prochaine fois ?
En septembre, nous poursuivrons notre exploration du VID et détaillerons plus en détail les principaux composants graphiques.
Olivier Auverlot