Red-GUI-tour.red

Red [
	Title: 		"Red GUI tour"
	Purpose:	{To showcase the current capabilities of Red GUI}
	Author:		"Rudolf W. MEIJER"
	Version:	0.9.0
	Date:		"12-Dec-2015"
	Needs:		'view
	Rights:		"Copyright (c) 2015 Rudolf W. MEIJER"
]

;---|----1----|----2----|----3----|----4----|----5----|----6----|----7----|-

; need to make the window in two steps since VID does not allow
; to specify menu contents

w: layout
[
	title "Red GUI tour"
	origin 0x0 space 0x0
		tab-panel bold 500x600 [
		"Static    " [
			text 400 bold "These faces don't directly react to mouse events."
			return
			tab-panel bold [
				"base        " [
					text 350 "A basic canvas on which to render text and images"
					return
					base 460x400 red draw [
						text 50x24 "This is a text"
						pen white circle 100x200 40
						fill-pen green triangle 150x150 200x250 300x180
					]
				]
				"progress    " [
					text 150 "This is a progress bar."
					at 200x10
					progress 100x20 data 50% react [face/data: slid/data]
					return
					text 350 "It runs from 0 to 100%"
					return
					text 150 "This slider lets you set it."
					at 200x80
					slid: slider 100x20 data 50%
					at 300x80
					text 50 right "" react [
						face/text: append to string! to integer! 100 * slid/data #"%"
					]
				]
				"text        " [
					text 100 "text"
					text 250 "This is some text."
					return
					text 100 "text font-size 14"
					text 250 "This is some bigger text." font-size 14
					return
					text 100 "text font-color blue"
					text 250 "This is some blue text." font [color: blue]
					return
					text 100 "text bold"
					text 250 "This is some bold text." bold
					return
					text 100 "text italic"
					text 250 "This is some italic text." italic
					return
					text 100 "text underline"
					text 250 "This is some underlined text." underline
					return
					text 100 "text bold italic"
					text 250 "This is some bold italic text." bold italic
					return
				]
			]
		]
		"Text input  " [
			text 400 bold "These faces process keystrokes."
			return
			tab-panel bold 460x300 [
				"field" [
					field 80x24 "Some text."
					return
					field 100x24 "Some more text."
					return
					text 400 "Edit the above text then use Ctrl-Z to restore it."
					return
					text 400 "Several other CTRL combinations work as well (CTRL-A, -C, -X, -V)."
					return
				]
				"area" [
					text 400 "Click in the area below and correct the typing mistakes."
					return
					text 400 "The same CTRL conbinations work as in the field face."
					return
					area "Tge big bad wolf.^M^/Heere is a secownd line of text."
					return
				]
			]
		] 
		"Click     " [
			text 400 bold "These faces react to a mouse click (and drag)."
			return
			tab-panel bold 460x400 [
				"button" [
					text 400 "Press each button and see the result below."
					return
					button "Red" font [color: red] bold [
						res/text: "Red button clicked"
					]
					button "Green" font [color: green] bold [
						res/text: "Green button clicked"
					]
					button "Blue" font [color: blue] bold
						on-down [
							res/text: "Blue button down"
					]
						on-up [
							res/text: "Blue button down -- and up"
					]
					return
					button 80x80 "Big Button" [
						res/text: "Hello, world!"
					]
					return
					res: text 200 "See the results here."
					
				]
				"slider" [
					text 400 "Move the sliders and see the square change"
					return
					base 300x300 red react [
						face/size/y: to integer! 300 * (1 - s1/data)
						face/size/x: to integer! 300 * s2/data
					]
;					pad 25x0
					s1: slider 20x300 data 0%
					return
					s2: slider 300x20 data 100%
				]
			]
		]
		"List      " [
			text 400 bold "These faces show column(s) of values from which row(s) can be selected."
			return
			tab-panel bold 460x300 [
				"drop-list" [
					text 400 "Select color and see the box change"
					return
					drop-list data ["Red" 1 "Green" 2 "Blue" 3] [
						d1/color: attempt [get to word! face/text]
					]
					d1: base 20x20 black
				]
				"drop-down" [
					text 400 "Select color or type a new value and see the box change"
					return
					drop-down "Black" data ["Red" "Green" "Blue"] [
						set/any 'c get to word! face/text
						if all [value? 'c tuple? :c] [
							d2/color: c
							d3/text: mold c
						]
					]
					d2: base 20x20 black d3: text 80x20
				]
				"text-list" [
					text 400 "Select one of the rows"
					return
					text bold 60 "Month"
					tt: text 50
					return
					text bold 60 "Months"
					tl: text-list 90x160 data [
						"January" "February" "March"
						"April" "May" "June"
						"July" "August" "September"
						"October" "November" "December"
					][
						tt/text: pick face/data face/selected
					]
				]
			]
		]
		"State     " [
			text 400 bold "These faces have two states (on & off)."
			return
			tab-panel bold 460x300 [
				"check" [
					text 400 "A single check mark"
					return
					cc: check 160x24 data false [
						ct/text: either face/data ["on"]["off"]
					]
					ct: text ""
				]
				"radio" [
					text 400 "Radio faces should occur in a group"
					return
					text 150 "Vertical alignment, in panel"
					text 200 "Horizontal alignment, in group-box" return
					panel 100x110 [
						radio "A" return
						radio "B" return
						radio "C"
					]
					pad 50x0
					group-box "group-box" 200x50 [
						return
						radio 50x20 "A"
						radio 50x20 "B"
						radio 50x20 "C"
					]
				]
			]
		]
		"Graphic   " [
			text 400 bold "These faces display one or more images."
			return
			tab-panel bold 460x480 [
				"image" [
					text 400 "A .jpg image, original 760x760, displayed in 400x400"
					return
					image 400x400 http://users.telenet.be/rwmeijer/landscape.jpg
				]
				"draw" [
					text 400 "Vector graphics on a 400x400 panel"
					return
					panel 400x400 white draw [
						line-cap round
						line-width 10
						pen red
						line 10x10 130x190 80x40 150x100
					]
				]
			]
		]
		"Grouping    " [
			text 400 bold "These faces are used to group other faces."
			return
			tab-panel bold 460x200[
				"panel" [
					panel white 400x100 [
						origin 20x20
						text 200 "This is a panel for grouping"
						return
						text 80 "Gender"
						drop-list 80x24 "Male" data ["Male" "Female"]
						text 60 "Name"
						field 120x24
					]
				]
				"group-box" [
					group-box "title of group-box" white 400x100  [
						origin 20x20
						text 200 "This is a panel with a title and a frame"
						return
						text 80 "Gender"
						drop-list 80x24 "Male" data ["Male" "Female"]
						text 60 "Name"
						field 120x24
					]
				]
				"tab-panel" [
					tab-panel white 400x100 [
						"first tab" [
							text 200 "Each tab is a panel"
						]
						"second tab" [
							text 200 "Only one panel is active"
						]
						"third tab" [
							text 400 "Each panel has the tab-panel face as parent"
						]
					]
				]
			]
		]
	]
	return
	button "Close" [quit]
]

w/menu: [
	"Simple" [
		"Example only"	 	exampl
		---
		"Exit (works)"		exit
	]
	"Nested" [
		"Show sub-menus" [
			"Sub-menu1"		sub-m1
			"Sub-menu2"		sub-m2
			"Sub-sub" [
				"Sub-menu3" sub-m3
			]
		]
	]
]

w/actors: make object! [
	on-menu: func [face [object!] event [event!]][
		if 'exit = event/picked [
			unview/all
		]
	]
]

view w