LGUI2:Elements

From Lavish Software Wiki
Revision as of 14:43, 26 June 2018 by Lax (talk | contribs)
Jump to navigation Jump to search

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!)
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)
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 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)

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"
      ]
    }
  }
}