Tutorial VID

VID : Visual Interface Dialect Rebol permet de créer des Interfaces Homme Machine élaborées grace au VID. Ces interfaces peuvent comporter différents Widgets : bouton, slider, image ... Vous pouvez développer votre interface sur une plateforme Windows et la déployer sur Linux ou sur un autre OS sans problème.

Pour utiliser les éléments du VID, il faut bien entendu avoir Rebol/View ou supérieur.

Création d'une fenêtre

  rebol[]
  win: layout [text "Ceci est une fenêtre"] ; Création de la fenêtre
  view win		; Affichage de la fenêtre
  

Résulat :


Ajoutons un titre à notre fenêtre et une possibilité de redimentionnement

   ; Création de la fenêtre et affichage en une seule ligne
wiew/title/option layout [text "Ceci est une fenêtre"] "RebolZone" [resize] 

  

Les styles

Comme en Html, Rebol comporte des styles d'entête h1, h2, h3, h4 ainsi que styles vidéo d'entête vh1, vh2 ...
On peut également préciser les attributs pour le texte : gras, souligné, italique, taille de la police, style de la police, la couleur ... Toutes ces options peuvent bien entendu se combiner.
Voici un exemple de création de fenêtre avec divers styles :

  rebol
     [
     ; Ce titre est pris comme titre de la fenêtre
     title: "Test fenêtre RebolZone"
     ]
  view layout [
    ; Couleur de fond de la fenêtre (un violet clair), on peut utiliser      un mot red, blue ...
    backcolor 159.96.130

    h1 "Voici un Titre 1"
    h2 "Voici un Titre 2"
    vh1 "Voici un Titre vidéo 1"
    vh2 "Voici un Titre vidéo 2 en bleu" blue
    text "Texte gras" bold
    text "Texte italic" italic
    text "Texte sousligné" underline
    text "Texte gras et italique" bold underline
    text "Texte taille 24 gras blanc" font-size 24 bold white
    text {Ceci est un long texte, Ceci est un long texte, 
    Ceci est un long texte, } font-size 10 white
    vtext "texte style vidéo" font-size 18 bold 122.55.200
     
    ; création d'un bouton Quitter
    button "Quit" [quit]
	]
  

Voici le résultat :



Lors de la conception d'une application, il est interressant d'utiliser des styles généraux, à la manière des CSS. Le changement de charte graphique se fait beaucoup plus facilement.
Exemple :

  rebol [
  ; Ce titre est pris comme titre de la fenêtre
   title: "Les styles [RebolZone]"
   ]
 view layout [

  ;Définition des styles 

  style textestandard text white font-size 12
  style textealert text font-size 16 red bold
  style bouton1 button yellow
  style bouton2 button blue
  
  backcolor 159.96.130
  
  textestandard "Un texte de style standard"
  textealert "Un texte de style alerte !!!"
  
  ; création d'un bouton Quitter avec le style
  bouton1 "Quit" [quit]
  ]