Chili: Difference between revisions

From Spring
Jump to navigationJump to search
← Older editNewer edit →
mNo edit summary
make several sections in sub-pages
Line 1: Line 1:
== Chili UI ==
== Chili UI ==


Chili is Springs very own GUI framework. It's a flexible, class based framework which allows you to create great looking GUIs very quickly.
Chili is Springs very own GUI framework. It's a flexible, class based framework which allows you to create great looking GUIs very quickly.  


In Chili, every element of the GUI has properties that control how it looks, and functions it can call when special events (such as a double click, or mouseover) affect it.
Before working with Chili, it is strongly recommended to be familiar with using [[Lua_Scripting| Lua in Spring]]. See [[Chili/Chili_Adding_To_Game|this page]] for instructions on how to include the Chili library into your game.


== Getting Chili ==
[[Chili/Chili_Tutorial| Chili Tutorial]]


The Chili repository can be found at [https://github.com/jk3064/chiliui https://github.com/jk3064/chiliui]. There are two ways to add Chili to your game:
[[Chili/Chili_Examples| Examples of Chili widgets]]
* Include the Chili repository as a git submodule in your project.
* Checkout the Chili repository, and place the files from its /luaui/chili directory into your games /luaui/widgets directory.
If you are having trouble getting Chili to run, login to the lobby and join the #moddev channel (type /j moddev).  People there will help you figure it out.


== Chili Component Hierachy ==
[[Chili/Chili_Screen| Shots Screenshots (TODO!)]]


The Chili framework is object orientated, and each different component is a class. The hierachy of components, which is documented [http://gajop.github.io/chiliui/index.html here],  is as follows:
== Chili Component Hierarchy ==
 
The Chili framework is object orientated, and each different component is a class. The hierarchy of components, which is documented [http://gajop.github.io/chiliui/index.html here],  is as follows:


  [http://gajop.github.io/chiliui/modules/controls.object.html Object]
  [http://gajop.github.io/chiliui/modules/controls.object.html Object]
Line 46: Line 44:


Viewing the diagram as a tree, each component inherits from its parent in the tree. In practice, this means each component has the properties/functionality of its own type, and also of all components found upwards from it in the tree. For example, a Grid has it's own properties, but also has those of a LayoutPanel, Control and Object.  
Viewing the diagram as a tree, each component inherits from its parent in the tree. In practice, this means each component has the properties/functionality of its own type, and also of all components found upwards from it in the tree. For example, a Grid has it's own properties, but also has those of a LayoutPanel, Control and Object.  
== Making a GUI from components ==
Components can have children, which are components that are placed inside it (and in front of it). The parent of everything is <code> WG.Chili.Screen0 </code>, which has type [http://gajop.github.io/chiliui/modules/controls.screen.html Screen]. The x-y coords, width, height, etc, of a component are relative to the area covered by its parent component.
For example:
<code><pre>
  screen = WG.Chili.Screen0
  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?"}
  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"}
</pre></code>
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
(TODO: picture).
See the example widgets for how to add extra features, such as making stuff happen when the buttons are clicked.
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.
* There is also the functions <code>AddChild, RemoveChild, SetParent, ClearChildren</code> and others.


== Example Chili Widgets ==
== Example Chili Widgets ==

Revision as of 09:25, 31 August 2015

Chili UI

Chili is Springs very own GUI framework. It's a flexible, class based framework which allows you to create great looking GUIs very quickly.

Before working with Chili, it is strongly recommended to be familiar with using Lua in Spring. See this page for instructions on how to include the Chili library into your game.

Chili Tutorial

Examples of Chili widgets

Shots Screenshots (TODO!)

Chili Component Hierarchy

The Chili framework is object orientated, and each different component is a class. The hierarchy of components, which is documented here, is as follows: 

Object
|_ Screen
|_ Control
 |_ Button
 |_ Checkbox
 |_ ColorBars
 |_ ComboBox
 |_ EditBox
 |_ Font
 |_ Label
 |_ LayoutPanel
   |_ ImageListView
   |_ Grid
   |_ StackPanel
   |_ TabPanel
 |_ Line
 |_ Image
 |_ MultiProgressBar
 |_ Panel
 |_ ProgressBar
 |_ Scale
 |_ ScrollPanel
 |_ TextBox
 |_ TrackBar
 |_ TreeView
  |_ TreeViewNode
 |_ Window

Viewing the diagram as a tree, each component inherits from its parent in the tree. In practice, this means each component has the properties/functionality of its own type, and also of all components found upwards from it in the tree. For example, a Grid has it's own properties, but also has those of a LayoutPanel, Control and Object.

Example Chili Widgets

(TODO: improve/update these)

Lesson 1 : Hello World

Lesson 2 : Dynamicly change label content

Lesson 3 : Command and Build commands in a chili window

Retrieved from "https://springrts-wiki.p2004a.com/mediawiki/index.php?title=Chili&oldid=4114"