-
Notifications
You must be signed in to change notification settings - Fork 95
02 GUI definition
(work in progress)
A GUI is defined with a JSON object.
The definition describes GUI object properties and visual aspect. It also defines the children components.
GUI properties are of three types:
- Common GUI properties : those properties are shared by all EZGUI components, for example : id, position, width, height ...etc
- Specific component properties : some EZGUI components need special properties, they are only used by the given component, if used with other component they'll be ignored.
- Theme properties : all properties defined in the theme skin can be overridden, for example if you have a set of buttons and want to use a custom image for one of them (instead of default theme visuals) you can override the image property.
-
id (string) : The identifier of the component, should be unique. If defined, it'll give you access to your component through EZGUI.components namespace. For example, if you use 'myButton' as id you can access it through EZGUI.components.myButton.
-
component (string) : The name of GUI component, available components are: Window, Layout, List, Button, Label, Slider, Checkbox, Radio, Header ...etc Note the component names are case sensitive.
-
draggable (boolean) : If true the component will be draggable, note that each component can define its own drag behaviour, this will only tell the component that drag feature is enabled.
-
skin (string) : This property allow you to override the default skin of a component, for example, by default, if you define a component as 'Button' in component property, it'll use 'Button' skin by default, if you explicitly specify a skin, it'll be used instead. The skin can be defined in the used theme, or as an override to the theme (see Theme skin override).
-
position (coords) : This can be a json object defining x and y coords, or a string defining relative positions, examples of valid values : {x:10, y:-20}, {x:0, y:20}, 'center', 'top left', 'bottom right', 'bottom center', 'center right'.
-
z (number) : this is the equivalent of z-index in CSS, it's mainly used to correctly detect the GUI events in some situations. for example if you have a transparent (or partially masked) GUI component on top of a visible GUI component, the transparent component will still catch the event. To prevent this you can force the event priority by giving a higher z index.
-
width (number) : the GUI element width.
-
height (number) : the GUI element height.
-
padding (number) : spacing.
- layout (array of two values) : this property define the grid layout of the component, a layout of [2, 3] tell the component to place children in a grid of 2 horizontal elements by 3 vertical elements.
- children (array of components) : each child is a json component definition, they are placed according to the specified layout.
- header (json component definition) : if specified, the window will have a header with the properties defined here, if the Window is draggable, it'll become draggable only from the header.
Nothing
Nothing
- dragX (boolean) : if false, the list children will scroll vertically.
- dragY (boolean) : if false, the list children will scroll horizontally.
- layout (array of two values) : same as Window layout property.
- children (array of components) :same as Window children property.
- checked (boolean) : set checked status of the checkbox.
- group (string or number) : define the group name of the radio button, within a given group, only one radio can be checked.
- checked (boolean) : same as Checkbox checked property but with the group constraint.
- slide (json component definition) : define the slide element.
- text (string) : set the default text to be populated in the input field.