Difference between revisions of "LGUI2:Elements"
Line 56: | Line 56: | ||
! hooks | ! hooks | ||
| An Object containing a set of [[LGUI2:Hooks|Hooks]] that may be applied (see '''Base Element events''' below) | | An Object containing a set of [[LGUI2:Hooks|Hooks]] that may be applied (see '''Base Element events''' below) | ||
+ | |- | ||
+ | ! animations | ||
+ | | An Array containing a set of [[LGUI2:Animations|Animations]] to activate immediately | ||
|- | |- | ||
! contextMenu | ! contextMenu | ||
Line 65: | Line 68: | ||
! color | ! color | ||
| A [[LGUI2:Color|Color]] definition used for foreground/text, inheritable by descendants | | A [[LGUI2:Color|Color]] definition used for foreground/text, inheritable by descendants | ||
+ | |- | ||
+ | ! opacity | ||
+ | | The opacity level used for the element, usually a number between 0.0 and 1.0, with 1.0 being 100% opaque and 0.0 being transparent | ||
|- | |- | ||
! visibility | ! visibility |
Revision as of 03:01, 16 November 2018
Contents
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". Each element is an instance of a particular Element Type which controls its appearance and behaviors.
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 | |
---|---|
type | The type of the Element (required!). For example, "window" or "button" |
name | The name of the Element (optional!) |
width | A floating point (decimal) number specifying the initial width of the element |
height | A floating point (decimal) number specifying the initial height of the element |
x | A floating point (decimal) number specifying the initial x coordinate, which is the number of pixels from the left of its parent |
y | A floating point (decimal) number specifying the initial y coordinate, which is the number of pixels from the top of its parent |
margin | A Thickness definition specifying the margins around this element (outside the width and height of the element), used during the layout phase |
padding | A Thickness definition specifying the padding around this element's contents (inside the width and height of the element) |
minSize | A Size definition specifying the minimum size of the element |
maxSize | A Size definition specifying the maximum size of the element |
horizontalAlignment | The horizonal alignment of the element; one of "stretch" "left" "right" "center" |
verticalAlignment | The vertical alignment of the element; one of "stretch" "top" "bottom" "center" |
styles | An Object containing a set of Styles that may be applied (see Base Element styles below) |
eventHandlers | An Object containing a set of Event Handlers that may be applied (see Base Element events below) |
hooks | An Object containing a set of Hooks that may be applied (see Base Element events below) |
animations | An Array containing a set of Animations to activate immediately |
contextMenu | A contextmenu element definition |
font | A Font definition, inheritable by descendants |
color | A Color definition used for foreground/text, inheritable by descendants |
opacity | The opacity level used for the element, usually a number between 0.0 and 1.0, with 1.0 being 100% opaque and 0.0 being transparent |
visibility | One of "visible" "hidden" or "collapsed", specifying the visibility state of the element |
Base Element events
Base Element events | |
---|---|
Define these Event Handlers within an "eventHandlers" 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) |
onVisualAttached | The element has a new visual parent |
onLogicalAttached | The element has a new logical parent |
onVisualDetached | The element has lost its visual parent |
onLogicalDetached | The element has lost its visual parent |
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) |
Metadata
All elements can contain metadata. All properties that begin with an underscore (the "_" character) are placed in the element's metadata table, with a new key excluding the underscore. For example "_dock" becomes "dock" in the element's metadata table. Certain types of elements will make use of metadata, such as dockpanel for determining the docking edges for its children.
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" ] } } }
LavishGUI 2 Topics
LavishGUI 2 Element Types
- Base Element Types: Element - Content Container - Headered Content Container - Item List
- Layout: anchor - border - dockpanel - dragger - expander - hud - map - page - pagecontrol -panel - popup - radialpanel - screen - scrollviewer - stackpanel - tab - tabcontrol - table - treepanel - window - wrappanel
- Display: canvas - imagebox - progressbar - radialgauge - textblock
- Interaction: button - checkbox - combobox - contextmenu - dragin - filepicker - itemview - knob - listbox - mapitemview - objectview - propertyview - scrollbar - sensitivebutton - slider - textbox
LavishGUI 2 LavishScript Object Types
- Core API (see Using LavishGUI 2 from LavishScript)
- lgui2 - lgui2animateargs - lgui2animationtype - lgui2elementref - lgui2eventargs - lgui2eventhandler - lgui2elementtype - lgui2itemviewgeneratorargs - lgui2inputbinding - lgui2layer - lgui2skin - lgui2trigger
- Enums
- elgui2animationframestate - elgui2dpad - elgui2edge - elgui2fontflags - elgui2horizontalalignment - elgui2imageorientation - elgui2progresstext - elgui2scrollbar - elgui2sizetocontent - elgui2verticalignment - elgui2visibility
- Element Components
- lgui2animation - lgui2brush - lgui2fontstyle - lgui2margins - lgui2item - lgui2property - lgui2radialitem - lgui2radialgaugeneedle
- Element Base Types
- lgui2element - lgui2bordered - lgui2contentbase - lgui2headeredcontentbase - lgui2itemlist
- Elements
- Layout: lgui2anchor - lgui2border - lgui2dockpanel - lgui2dragger - lgui2expander - lgui2hud - lgui2map - lgui2page - lgui2pagecontrol - lgui2panel - lgui2popup - lgui2radialpanel - lgui2screen - lgui2scrollviewer - lgui2stackpanel - lgui2tab - lgui2tabcontrol - lgui2table - lgui2treepanel - lgui2window - lgui2wrappanel
- Display: lgui2canvas - lgui2imagebox - lgui2progressbar - lgui2radialgauge - lgui2textblock
- Interaction: lgui2button - lgui2checkbox - lgui2combobox - lgui2contextmenu - lgui2dragin - lgui2filepicker - lgui2itemview - lgui2knob - lgui2listbox - lgui2mapitemview - lgui2objectview - lgui2propertyview - lgui2scrollbar - lgui2sensitivebutton - lgui2slider - lgui2textbox