Chili:Tutorial - Revision history

Gajop at 00:19, 11 June 2016

2016-06-11T00:19:35Z

← Older revision		Revision as of 01:19, 11 June 2016
Line 7:		Line 7:

	To use Chili inside a Lua widget, your <code>widget:Initialize</code> function should include the following code:		To use Chili inside a Lua widget, your <code>widget:Initialize</code> function should include the following code:
	<~~code><pre~~>		<syntaxhighlight lang="lua">
	function widget:Initialize()		function widget:Initialize()
	Chili = WG.Chili		Chili = WG.Chili
	Screen0 = Chili.Screen0		Screen0 = Chili.Screen0
	end		end
	</~~pre></code~~>		</syntaxhighlight>
	Now, <code>Chili</code> is your route to creating new GUI elements, and <code>Screen0</code> is the screen in which you add them.		Now, <code>Chili</code> is your route to creating new GUI elements, and <code>Screen0</code> is the screen in which you add them.

Line 19:		Line 19:

	To create a Chili component, you use its <code>New</code> function, for example:		To create a Chili component, you use its <code>New</code> function, for example:
	<~~code><pre~~>		<syntaxhighlight lang="lua">
	Chili.Window:New{parent=Screen0, width='20%', height='20%'}		Chili.Window:New{parent=Screen0, width='20%', height='20%'}
	</~~pre></code~~>		</syntaxhighlight>
	This creates a square window, taking up 1/5th of the screen. See the [[Chili:Example_Hello_World\|Hello World]] example for how to fit this code into a Chili widget.		This creates a square window, taking up 1/5th of the screen. See the [[Chili:Example_Hello_World\|Hello World]] example for how to fit this code into a Chili widget.

Line 34:		Line 34:

	Once a component exists you can modify its properties, whenever you like. When you do so, Chili will react and automatically change how the component is drawn. For example,		Once a component exists you can modify its properties, whenever you like. When you do so, Chili will react and automatically change how the component is drawn. For example,
	<~~code><pre~~>		<syntaxhighlight lang="lua">
	local myWindow = Chili.Window:New{parent=Screen0, width='20%', height='20%'}		local myWindow = Chili.Window:New{parent=Screen0, width='20%', height='20%'}
	myWindow.x = 100		myWindow.x = 100
	myWindow.y = 100		myWindow.y = 100
	</~~pre></code~~>		</syntaxhighlight>
	results in the window above being placed on the screen at (100,100).		results in the window above being placed on the screen at (100,100).

Line 49:		Line 49:

	For example:		For example:
	<~~code><pre~~>		<syntaxhighlight lang="lua">
	window = Chili.Window:New{parent = Screen0, x='25%', y='25%', width='50%', height='50%'}		window = Chili.Window:New{parent = Screen0, x='25%', y='25%', width='50%', height='50%'}
	textBox = Chili.TextBox:New{parent = window, x='10%', y='10%', width='80%', height='30%', text="Is the sky blue?"}		textBox = Chili.TextBox:New{parent = window, x='10%', y='10%', width='80%', height='30%', text="Is the sky blue?"}
	yesButton = Chili.Button:New{parent = window, x='10%', y='60%', width='30%', height='30%', caption="Yes"}		yesButton = Chili.Button:New{parent = window, x='10%', y='60%', width='30%', height='30%', caption="Yes"}
	noButton = Chili.Button:New{parent = window, x='60%', y='60%', width='30%', height='30%', caption="No"}		noButton = Chili.Button:New{parent = window, x='60%', y='60%', width='30%', height='30%', caption="No"}
	</~~pre></code~~>		</syntaxhighlight>
	draws a Window in the center of the screen, containing a TextBox with the words "Is the sky blue?", and two clickable Buttons, for yes and no. It looks like		draws a Window in the center of the screen, containing a TextBox with the words "Is the sky blue?", and two clickable Buttons, for yes and no. It looks like

Flozi: categorise

2016-04-26T20:58:41Z

categorise

← Older revision		Revision as of 21:58, 26 April 2016
Line 75:		Line 75:
	* There are the functions <code>AddChild, RemoveChild, SetParent, ClearChildren</code> and others.		* There are the functions <code>AddChild, RemoveChild, SetParent, ClearChildren</code> and others.
	A child component can have at most one parent, and a parent cannot have the same child more than once. However, a child can be removed from its original parent and then added to a new parent.		A child component can have at most one parent, and a parent cannot have the same child more than once. However, a child can be removed from its original parent and then added to a new parent.

			[[Category:Libraries]][[Category:Tutorial]]

Silentwings at 07:08, 3 September 2015

2015-09-03T07:08:47Z

← Older revision		Revision as of 08:08, 3 September 2015
Line 28:		Line 28:
	If you look at the properties of a [http://gajop.github.io/chiliui/modules/controls.window.html Window], you won't find any. But, Window inherits from [http://gajop.github.io/chiliui/modules/controls.control.html Control] - this means that a Window also has all the properties that a Control has. By looking at the properties of Control you can see that a Window actually has many options. Any properties that you don't specify are set to their default values.		If you look at the properties of a [http://gajop.github.io/chiliui/modules/controls.window.html Window], you won't find any. But, Window inherits from [http://gajop.github.io/chiliui/modules/controls.control.html Control] - this means that a Window also has all the properties that a Control has. By looking at the properties of Control you can see that a Window actually has many options. Any properties that you don't specify are set to their default values.

	The hierarchy of inheritance for all Chili objects can be found [[Chili\|here]].		The hierarchy of inheritance for all Chili objects can be found [[Chili#Documentation:_Chili_Component_Hierarchy\|here]].

Silentwings at 05:49, 2 September 2015

2015-09-02T05:49:55Z

← Older revision		Revision as of 06:49, 2 September 2015
Line 41:		Line 41:
	results in the window above being placed on the screen at (100,100).		results in the window above being placed on the screen at (100,100).

	Many properties, such as x and y can be modified directly as though the component was a Lua table. Sometimes there are also functions to help you, for example in the properties of a [http://gajop.github.io/chiliui/modules/controls.checkbox.html CheckBox] you can find a <code>Toggle()</code> function.		Many properties, such as x and y can be modified directly as though the component was a Lua table. Sometimes there are also functions to help you, for example in the properties of a [http://gajop.github.io/chiliui/modules/controls.checkbox.html CheckBox] you can find a <code>Toggle()</code> function, which you would call as <code>myCheckBox:Toggle()</code>


Line 73:		Line 73:
	There are many ways to specify (and change!) which components are children of which other components.		There are many ways to specify (and change!) which components are children of which other components.
	* To match the <code>parent=</code> used above, each component has a <code>children={[1]=firstChild, [2]=secondChild, ...}</code> table.		* To match the <code>parent=</code> used above, each component has a <code>children={[1]=firstChild, [2]=secondChild, ...}</code> table.
	* There ~~is also~~ the functions <code>AddChild, RemoveChild, SetParent, ClearChildren</code> and others.		* There are the functions <code>AddChild, RemoveChild, SetParent, ClearChildren</code> and others.
	A child component can have at most one parent, and a parent cannot have the same child more than once. However, a child can be removed from its original parent and then added to a new parent.		A child component can have at most one parent, and a parent cannot have the same child more than once. However, a child can be removed from its original parent and then added to a new parent.

Silentwings: fix links

2015-09-01T13:58:17Z

fix links

← Older revision		Revision as of 14:58, 1 September 2015
Line 22:		Line 22:
	Chili.Window:New{parent=Screen0, width='20%', height='20%'}		Chili.Window:New{parent=Screen0, width='20%', height='20%'}
	</pre></code>		</pre></code>
	This creates a square window, taking up 1/5th of the screen. See the [[Chili~~/Chili_Example_Hello_World~~\|Hello World]] example for how to fit this code into a Chili widget.		This creates a square window, taking up 1/5th of the screen. See the [[Chili:Example_Hello_World\|Hello World]] example for how to fit this code into a Chili widget.

	If you forget to include <code>parent=Screen0</code>, your window will exist, but it won't be drawn anywhere. This is the instruction that tells Chili that you want your component to appear inside Screen0 - your screen.		If you forget to include <code>parent=Screen0</code>, your window will exist, but it won't be drawn anywhere. This is the instruction that tells Chili that you want your component to appear inside Screen0 - your screen.
Line 59:		Line 59:
	(TODO: picture).		(TODO: picture).

	See the [[Chili~~/Chili_Examples~~\|example widgets]] page for how to make stuff happen when the buttons are clicked.		See the [[Chili:Examples\|example widgets]] page for how to make stuff happen when the buttons are clicked.

Silentwings: Silentwings moved page Chili:Chili Tutorial to Chili:Tutorial

2015-09-01T13:52:46Z

Silentwings moved page Chili:Chili Tutorial to Chili:Tutorial

← Older revision	Revision as of 14:52, 1 September 2015
(No difference)

Silentwings: Silentwings moved page Chili/Chili Tutorial to Chili:Chili Tutorial

2015-09-01T13:52:28Z

Silentwings moved page Chili/Chili Tutorial to Chili:Chili Tutorial

← Older revision	Revision as of 14:52, 1 September 2015
(No difference)

Silentwings at 12:04, 31 August 2015

2015-08-31T12:04:56Z

← Older revision		Revision as of 13:04, 31 August 2015
Line 22:		Line 22:
	Chili.Window:New{parent=Screen0, width='20%', height='20%'}		Chili.Window:New{parent=Screen0, width='20%', height='20%'}
	</pre></code>		</pre></code>
	This creates a square window, taking up 1/5th of the screen. See the [[Chili/Chili_Example_Hello_World\|Hello World]] ~~and other~~ for how to fit this code into a Chili widget.		This creates a square window, taking up 1/5th of the screen. See the [[Chili/Chili_Example_Hello_World\|Hello World]] example for how to fit this code into a Chili widget.

	If you forget to include <code>parent=Screen0</code>, your window will exist, but it won't be drawn anywhere. This is the instruction that tells Chili that you want your component to appear inside Screen0 - your screen.		If you forget to include <code>parent=Screen0</code>, your window will exist, but it won't be drawn anywhere. This is the instruction that tells Chili that you want your component to appear inside Screen0 - your screen.

Silentwings: /* Children and Showing/Hiding */

2015-08-31T11:23:43Z

Children and Showing/Hiding

← Older revision		Revision as of 12:23, 31 August 2015
Line 64:		Line 64:
	== Children and Showing/Hiding ==		== Children and Showing/Hiding ==

	A component is drawn ~~when and~~ only when it is a child of another component that is drawn. Screen0 is a component of type [http://gajop.github.io/chiliui/modules/controls.screen.html Screen], and is always drawn, by default. A component that has ~~not~~ be drawn; it is said to be orphaned.		A component is drawn only when it is a child of another component that is drawn. Screen0 is a component of type [http://gajop.github.io/chiliui/modules/controls.screen.html Screen], and is always drawn, by default. A component that has no parent will never be drawn; it is said to be orphaned.

	In a GUI, it's common to want components to sometimes be visible and sometimes be hidden. You can control this in two ways.		In a GUI, it's common to want components to sometimes be visible and sometimes be hidden. You can control this in two ways.

Silentwings: /* Children and Showing/Hiding */

2015-08-31T11:22:45Z

Children and Showing/Hiding

← Older revision		Revision as of 12:22, 31 August 2015
Line 64:		Line 64:
	== Children and Showing/Hiding ==		== Children and Showing/Hiding ==

	A component is drawn when and only when it is a child of another component that is drawn. Screen0 is a component of type [http://gajop.github.io/chiliui/modules/controls.screen.html Screen], and is always drawn, by default. A component that has ~~no parent will never~~ be drawn; it is said to be orphaned.		A component is drawn when and only when it is a child of another component that is drawn. Screen0 is a component of type [http://gajop.github.io/chiliui/modules/controls.screen.html Screen], and is always drawn, by default. A component that has not be drawn; it is said to be orphaned.

	In a GUI, it's common to want components to sometimes be visible and sometimes be hidden. You can control this in two ways.		In a GUI, it's common to want components to sometimes be visible and sometimes be hidden. You can control this in two ways.