Version actuelle 0.36

(RebGUI est constamment mis à jour cet article a donc vocation de présentation mais il n’est aucunement une documentation complète sur le librairie RebGUI.)

RebGUI est un tout nouveau projet à l’initiative de Ashley G. Trüter et auxquels participent de nombreux programmeurs de la communauté REBOL.

Le but de RebGUI est de proposer, non seulement de nouveaux widgets (éléments de décor et d’intéraction utilisateur pour les interfaces graphiques), mais aussi d’améliorer le dialecte VID en proposant un système qui consomme moins de mémoire, un temps de chargement réduit et un développement ouvert à tous et indépendant de REBOL TECHNOLOGIES.

RebGUI propose aussi un nouveau système de gestion de redimensionnement des widgets au moyen d’un nouveau champ nommé “span” qui permet de spécifier la coordonnée d’extension pour les widgets. La redimension des widgets dans RebGUI est réccursive ainsi quand on redimensionne une fenêtre la redimension est induite à toutes les widgets et leur contenu quand cela est nécéssaire.

Du fait que le RebGUI est un projet tout jeune de nombreuses versions suivront, apportant à chaque fois plus d’interactivité et un look-and-feel plus proche de l’état de l’art en la matière. Permettant enfin aux logiciels basés sur REBOL/VIEW RebGUI de présenter une interface homme-machine qui corresponde aux habitudes des utilisateurs.

RebGUI est aussi prévu pour être integré dans les script rebol encapés au moyen du logiciel encap de REBOL/SDK. Dans ce cas on allègera la VM en substituant les fichiers qui composent VID par ceux qui composent RebGUI.

Rebgui a énormément évolué depuis la version 0.1.6. Voici un état des lieux des changements les plus importants concernant la façon de configurer les widgets. La taille et la position sont configurables pour toutes les widgets d’un block passé a la focntion display avec un marqueur spécial #XYHW (X= position sur l’axe des X, Y= position sur l’axe des Y, H= Taille en Y, W= taille en X). Il est à noter aussi que le chiffre donné avant ce marqueur est multiplié par 5.

Ce marqueur spécial admet des combinaisons par example 100 #XW positionnera une widget en X= 500 sur la fenêtre et lui attribuera la taille 500 en W. Ceci change complètement la méthode habituelle que view a pour gérer la position et la taille des widgets en la simplifiant et en l’affinant aussi.

Le paramètre des widgets SPAN qui permettait de fixer l’axe suivant lequel une widget était étirée a disparu. Ainsi aujourd’hui il existe 2 types de widgets, celles qui sont étirables et celles qui ne le sont pas. Ainsi le programmeur n’a plus besoin de se préoccuper de savoir s’il a bien programmé les axes d’étirement.

Widgets:

• Edit-list (liste déroulante supportant un grand nombre de données dans la liste. offrant un scroller dans la liste et un champs de saisie auto complété)

• Menu (Vraie Menu avec icones+texte +raccourcis clavier et popup-menu)

• Popup-menu

• table (liste ne supportant que des données numériques et texte idéal pour afficher les données d’un base SQL)

• ListView (list support des data de types différents (image, text, url checkbox etc…)

• Grid (grille de saisie avec posibilité de placer des formules mathémathiques exploitant les capacités de rebol (un genre de feuille Excel mais en mieux ;) ))

Le code ci-dessous est un petit example de ce qu’il est possible de faire avec RebGUI. Dans ce programme on y trouve comment utiliser l’ensemble des widgets de RebGUI ainsi que les modalités d’utilisation.

Vous pourrez retrouver la version mise à jour de ce code d’exemple dans l’archive RebGUI-???.zip dans le fichier nommé “tour.r”

REBOL [
	Encap: [title ""]
]
; chargemebt de la liraurue REBGUI 0.2.2
if not value? 'widgets [do %gui.r]
 
; splash screen
splash 1 make face [
	color:	widgets/window-color
	size:	370x120
	image:	load %images/logo.png
]
 
; Déclaration de la fenêtre principale et de tout les widgets quelle contient
display "Widget Tour" [
	image %images/logo.png
	return 
	tab-panel 104x66 #WH data [
		"Intro" [tight title-group 104x62 #WH data "RebGUI Widget Tour" "This script demonstrates groups of RebGUI widgets, each in a separate tab preceded by a brief explanation. The explanatory text is followed by a tab-panel showing each widget in alphabetical order. The drop-list and spinner widgets are not fully implemented at present.^/^/The locale system loads some sample French words that can be seen with the tab-panel and toolbar Grouping widgets.^/^/To run this script with a different unit and font size you will need to uncomment one of the set-sizes lines.^/^/To have all arrow-based widgets use a chevron instead of the default arrow you will need to uncomment the widgets/arrow assignment line."]
		"Static" [
			text "These widgets don't directly react to mouse events."
			return
			tab-panel 96x48 #WH data [
				"Bar" [
					text "Some text above a bar."
					return
					bar
					return
					text "Some text below a bar."
				]
				"Box" [
					box 88x32 sky #WH
					return
					text 88 "Note: resize the window to see recursive resizing in action." #Y
				]
				"Progress" [
					p: progress
					return
					slider [show-data p face/data]
				]
				"Text" [
					text "This is some text."
				]
				"Title-Group" [
					tight
					title-group 96 %images/setup.png snow data "Welcome to the App 1.0.0 Setup Wizard" "This wizard will guide you through the installation of App 1.0.0.^/^/It is recommended that you close all other applications before starting Setup. This will make it possible to update relevant system files without having to reboot your computer.^/^/Click Next to continue."
				]
			]
		]
		"Button" [
			text "These widgets react to a mouse click."
			return
			tab-panel 96x48 #WH data [
				"Arrow" [
					arrow data 'up
					arrow data 'down
					arrow data 'left
					arrow data 'right
					return
					arrow 20 data 'up
					arrow 20 data 'down
					arrow 20 data 'left
					arrow 20 data 'right
				]
				"Button" [
					button "Button" [show-text s "Button"]
					button 40x20 "Big Button"
				]
				"Chevron" [
					chevron data 'up
					chevron data 'down
					chevron data 'left
					chevron data 'right
					return
					chevron 20 data 'up
					chevron 20 data 'down
					chevron 20 data 'left
					chevron 20 data 'right
				]
				"Scroller" [
					tight
					scroll-box: box	1x1 red
					at 40x0
					scroller 4x40 [scroll-box/size/y: max widgets/unit-size to integer! face/data * face/size/y show scroll-box]
					return
					scroller 40x4 [scroll-box/size/x: max widgets/unit-size to integer! face/data * face/size/x show scroll-box]
				]
 
				"Slider"	[
					tight
					slide-box: box 1x1 red
					at 40x0
					slider 4x40 [slide-box/size/y: max widgets/unit-size to integer! face/data * face/size/y show slide-box]
					return
					slider 40x4 [slide-box/size/x: max widgets/unit-size to integer! face/data * face/size/x show slide-box]
				]
				"Spinner" [
					spinner "10%" [face/parent-face/pane/1/text: face/type show face/parent-face]
				]
			]
		]
		"Field" [
			text "These widgets use the edit-feel to process keystrokes."
			return
			tab-panel 96x48 #WH data [
				"Area" [
					area "This is an area with text wrap. Multiple paras are supported."
					return
					text "The following basic editing functions are available:^/* BackSpace & Ctrl+BackSpace (delete back / home)^/* Del & Ctrl+Del (delete next / end)^/* Home & End^/* Left & Right arrows (character left / right)^/* Ctrl+Left & Ctrl+Right arrows (word left / right)^/* Up & Down arrows^/* Ins toggle"
				]
				"Auto-Fill" [
					auto-fill data ["Bob" "Bobbert" "Canary"]
				]
				"Field" [
					field "Some text."
					return
					text 40x-1 "Note: Supports the same editing keys as area (less Up & Down arrows). Default max length of 24 chars."
				]
				"Pwd-Field" [
					field "Some text." font [name: font-fixed]
					return
					pwd-field "Some text."
				]
			]
		]
		"State" [
			text "These widgets have two (on and off) or three (true, false and none) states."
			return
			tab-panel 96x48 #WH data [
				"Check" [
					check "A check option"
					return
					text 40x-1 "Note: A tristate widget toggled by left and right mouse clicks. Looks better when run from an Alpha with AGG."
				]
				"Check-Group" [
					text "Vertical alignment"
					return
					check-group 20x12 data ["One" true "Two" false "Three" none]
					return
					text "Horizontal alignment"
					return
					check-group 60x4 data ["Red" true "Green" false "Blue" none]
				]
				"LED" [
					l: led "A simple LED"
					return
					button "True" [show-data l true]
					button "False" [show-data l false]
					button "None" [show-data l none]
				]
				"LED-Group" [
					text "Vertical alignment"
					return
					led-y: led-group 20x12 data ["One" true "Two" false "Three" none]
					return
					text "Horizontal alignment"
					return
					led-x: led-group 60x4 data ["Red" true "Green" false "Blue" none]
					return
					button 20 "Random 1" [
						show-data led-x/pane/1 random/only reduce [true false none]
					]
					button 20 "Random All" [
						var: copy []
						loop 3 [
							insert tail var random/only reduce [1 0 -1]
						]
						show-data led-x var
					]
				]
				"Radio-Group" [
					text "Vertical alignment"
					return
					radio-group 20x12 data ["One" "Two" "Three"]
					return
					text "Horizontal alignment"
					return
					radio-group 60x4 data [1 "Red" "Green" "Blue"]
				]
			]
		]
		"List" [
			text "These widgets present one or more columns of values from which row(s) can be selected."
			return
			tab-panel 96x48 #WH data [
				"Drop-List" [
					drop-list "Color" data ["Red" "Green" "Blue"]
				]
				"Edit-List" [
					edit-list "Color" data ["Red" "Green" "Blue"]
				]
			]
		]
		"Picture" [
			text "These widgets display one or more images."
			return
			tab-panel 96x48 #WH data [
				"Anim" [
					anim data [%images/back.png %images/forward.png]
				]
				"Image" [
					image %images/install.gif
					image 22x22 %images/back.png effect fit
				]
			]
		]
		"Grouping" [
			text "These widgets are used to group other widgets."
			return
			tab-panel 96x48 #WH data [
				"Group-Box" [
					group-box "A group of widgets" 40x20 data [
						text 10 "Name"
						field 20
						return
						text 10 "Note"
						field 20
					]
				]
				"Splitter"	[
					space 0x0
					area 41x15 "Some text above a splitter."
					return
					splitter 41x1
					return
					area 41x15 "Some text below a splitter."
					at 43x0
					area 20x31 "Some text before a splitter."
					splitter 1x31
					area 20x31 "Some text after a splitter."
				]
				"Tab-Panel"	[
					tab-panel 88x36 #WH data ["File" [text "One"] "Edit" [text "Two"] "View" [text "Three"]]
				]
				"ToolBar" [
					space 0x0
					toolbar data [
						"Open"		%images/folder_open.png		[
							if var: request-file/only [show-text t to-local-file var]
						]
						"Save"		%images/save.png			[show-text t "Save"]
						"Print"		%images/print.png			[show-text t "Print"]
						pad 5 none
						"Home"		%images/rewind.png			[show-text t "Home"]
						"Back"		%images/back.png			[show-text t "Back"]
						"Forward"	%images/forward.png			[show-text t "Forward"]
						"End"		%images/fast_forward.png	[show-text t "End"]
					]
					return
					box 40 snow
					return
					t: text	40 silver
				]
			]
		]
		"Requestors" [
			text "These functions provide common requestor dialogs."
			return
			button 30 "request-file"	[if var: request-file [show-text req-file var]]
			req-file: field
			return
			button 30 "request-color" [
				face/feel/over face false 0x0
				face/feel/engage face 'up none
				if var: request-color [req-color/color: var show req-color]
			]
			req-color: field
			return
			button 30 "request-date" [
				face/feel/over face false 0x0
				face/feel/engage face 'up none
				if var: request-date [show-text req-date var]
			]
			req-date: field
		]
	]
	return
	s: text 100 #YW data ["|" "/" "--" ] rate 1 feel [
		engage: func [face act event] [
			if event/type = 'time [face/action face]
		]
	][
		show-text face reform [either widgets/insert-mode ["INS"]["OVR"] to integer! system/stats / 1024 "KB's used ..." first face/data]
		face/data: next face/data
		if tail? face/data [face/data: head face/data]
	]
]
 
; Très important cela initialise la gestion des évènements
do-events
 
; Quitte le programme
quit

Documentation RebGUI :

http://www.dobeash.com/it/rebgui/

Obtenir REBGUI dans sa dernière version:

1) Lancer rebol/view desktop (si vous avez la console rebol/view taper desktop) 2) dans le desktop aller dans REBOL puis dans le dossier DEMOS puis cliquer sur l’icone REBGUI

il n’y rien d’autre à faire REBGUI s’intallera tout seul sur votre ordinateur.

Article réalisé par

Liste des Widgets en cours de développements pour RebGUI(mise à jour périodique en fonction des avancées de développements).

http://www.rebolfrance.info/articles/regui-cooking-widgs