Introduction
A LavishGUI 2 element is an individual portion of the user interface with its own characteristics, intended to be rendered with the user interface when "visible".
All LavishGUI 2 elements are relative to their parent element. This means that its position is always based on its parent position, and if its parent is not visible, the element will also not be visible.
Defining an Element
LavishGUI 2 elements are defined by a JSON Object enclosed by {}, or alternatively by a JSON String which is then automagically turned into a textblock containing the specified text.
Base Element properties
- Each type of element has its own properties that may be specified by the JSON Object, but all elements support these base properties.
Base Element properties
|
name
|
The name of the Element (optional!)
|
styles
|
An Object containing a set of Styles that may be applied (see Base Element styles below)
|
contextMenu
|
A contextmenu element definition
|
font
|
A Font definition, inheritable by descendants
|
color
|
A Color definition used for foreground/text, inheritable by descendants
|
Base Element events
Base Element events
|
Define these Event Handlers directly in the JSON Object
|
onLoad
|
The element has been loaded
|
onMouseMove
|
The mouse has moved while over this element (or while the element has Mouse Capture)
|
onMouseWheel
|
The mouse wheel has moved while over this element (or while the element has Mouse Capture)
|
onMouseButtonMove
|
A mouse button has moved while over this element (or while the element has Mouse Capture)
|
onButtonMove
|
A non-mouse button has moved while this element has Focus
|
onAxisMove
|
A non-mouse axis has moved while this element has Focus
|
onDpadMove
|
A directional pad has moved while this element has Focus
|
gotFocus
|
The element has gained Focus
|
lostFocus
|
The element has lost Focus
|
gotMouseCapture
|
The element has gained Mouse Capture
|
lostMouseCapture
|
The element has lost Mouse Capture
|
gotMouseOver
|
The element has gained Mouse Over (mouse is somewhere within this element's bounds)
|
lostMouseOver
|
The element has lost Mouse Over (mouse is somewhere outside this element)
|
Base Element styles
Base Element styles
|
Define these Styles within a "styles" Object
|
gotFocus
|
The element has gained Focus
|
lostFocus
|
The element has lost Focus
|
gotMouseCapture
|
The element has gained Mouse Capture
|
lostMouseCapture
|
The element has lost Mouse Capture
|
gotMouseOver
|
The element has gained Mouse Over (mouse is somewhere within this element's bounds)
|
lostMouseOver
|
The element has lost Mouse Over (mouse is somewhere outside this element)
|
Example
{
"type": "window",
"title": "The Button",
"borderThickness": 3,
"borderBrush": {
"color": [ 1.0, 1.0, 1.0 ]
},
"content": {
"type": "button",
"name": "myButton",
"width": 48,
"height": 48,
"horizontalAlignment": "stretch",
"verticalAlignment": "stretch",
"backgroundBrush": {
"color": [ 1.0, 1.0, 1.0 ],
"imageFile": "C:\\Users\\joeth\\Pictures\\ISBoxer 2 Logo - Concept 2.2 48x48.png"
},
"contextMenu": {
"borderThickness": 1,
"borderBrush": {
"color": [ 0.75, 0.75, 0.75 ],
},
"backgroundBrush": {
"color": [ 0.2, 0.2, 0.2 ],
},
"items": [
"Menu item 1",
"Menu item 2",
"Menu item 3"
]
}
}
}