Difference between revisions of "LGUI2:Elements"

From Lavish Software Wiki
Jump to navigation Jump to search
 
(15 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
== Introduction ==
 
== 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".
+
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 [[LGUI2:Element Type|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.  
 
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.  
Line 11: Line 11:
 
{| border="1" style="border-collapse:collapse" cellpadding="5"
 
{| border="1" style="border-collapse:collapse" cellpadding="5"
 
!colspan="2"|Base Element properties
 
!colspan="2"|Base Element properties
 +
|-
 +
! type
 +
| The type of the Element (required!). For example, "window" or "button"
 
|-
 
|-
 
! name
 
! name
Line 26: Line 29:
 
! y
 
! y
 
| A floating point (decimal) number specifying the initial y coordinate, which is the number of pixels from the top of its parent
 
| A floating point (decimal) number specifying the initial y coordinate, which is the number of pixels from the top of its parent
 +
|-
 +
! widthFactor
 +
| A floating point (decimal) number specifying the initial width factor of the element, as a factor of the visual parent's width (i.e. widthFactor 0.5 means half of the parent's width)
 +
|-
 +
! heightFactor
 +
| A floating point (decimal) number specifying the initial height factor of the element, as a factor of the visual parent's height(i.e. heightFactor 0.5 means half of the parent's height)
 +
|-
 +
! xFactor
 +
| A floating point (decimal) number specifying the initial x factor of the element, as a factor of the visual parent's width (i.e. xFactor 0.5 means half of the parent's width)
 +
|-
 +
! yFactor
 +
| A floating point (decimal) number specifying the initial y factor of the element, as a factor of the visual parent's height(i.e. yFactor 0.5 means half of the parent's height)
 
|-
 
|-
 
! margin
 
! margin
−
|  
+
| A [[LGUI2:Thickness|Thickness]] definition specifying the margins around this element (outside the width and height of the element), used during the layout phase
 
|-
 
|-
 
! padding
 
! padding
−
|  
+
| A [[LGUI2:Thickness|Thickness]] definition specifying the padding around this element's contents (inside the width and height of the element)
 
|-
 
|-
 
! minSize
 
! minSize
−
|  
+
| A [[LGUI2:Size|Size]] definition specifying the minimum size of the element
 
|-
 
|-
 
! maxSize
 
! maxSize
−
|  
+
| A [[LGUI2:Size|Size]] definition specifying the maximum size of the element
 
|-
 
|-
 
! horizontalAlignment
 
! horizontalAlignment
−
|  
+
| The horizontal alignment of the element; one of "stretch" "left" "right" "center"
 
|-
 
|-
 
! verticalAlignment
 
! verticalAlignment
−
|  
+
| The vertical alignment of the element; one of "stretch" "top" "bottom" "center"
 
|-
 
|-
 
! styles
 
! styles
 
| An Object containing a set of [[LGUI2:Styles|Styles]] that may be applied (see '''Base Element styles''' below)
 
| An Object containing a set of [[LGUI2:Styles|Styles]] that may be applied (see '''Base Element styles''' below)
 +
|-
 +
! eventHandlers
 +
| An Object containing a set of [[LGUI2:Event Handlers|Event Handlers]] that may be applied (see '''Base Element events''' below)
 +
|-
 +
! hooks
 +
| 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
 
| A [[LGUI2:contextmenu|contextmenu]] element definition
 
| A [[LGUI2:contextmenu|contextmenu]] element definition
 +
|-
 +
! tooltip
 +
| An element definition specifying the tooltip to display when hovering the cursor over this element
 
|-
 
|-
 
! font
 
! font
Line 56: Line 83:
 
! 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
 +
|-
 +
! strata
 +
| The Strata level (kind of a priority level used in layout) used for the element, usually a number between 0.0 and 1.0, with 1.0 being the usual "top" and 0.0 being the usual "bottom". Strata may be interpreted differently by different layout elements, but typically affects an element's Z-order. If not given, '''default is 0.5'''
 +
|-
 +
! visibility
 +
| One of "visible" "hidden" or "collapsed", specifying the visibility state of the element
 +
|-
 +
! acceptsKeyboardFocus
 +
| true or false depending on whether the element should accept keyboard focus
 +
|-
 +
! acceptsMouseFocus
 +
| true or false depending on whether the element should accept mouse focus
 
|}
 
|}
  
Line 62: Line 104:
 
!colspan="2"|Base Element events
 
!colspan="2"|Base Element events
 
|-
 
|-
−
!colspan="2"|Define these [[LGUI2:Event Handlers|Event Handlers]] directly in the JSON Object
+
!colspan="2"|Define these [[LGUI2:Event Handlers|Event Handlers]] within an "eventHandlers" Object
 
|-
 
|-
 
! onLoad
 
! onLoad
Line 85: Line 127:
 
| A directional pad has moved while this element has Focus
 
| A directional pad has moved while this element has Focus
 
|-
 
|-
−
! gotFocus
+
! onDragDrop
−
| The element has gained Focus
+
| A [[LGUI2:Drag and Drop|Drag and Drop]] item is being dropped while this element has mouseover
 +
|-
 +
! gotKeyboardFocus
 +
| The element has gained Keyboard Focus
 +
|-
 +
! lostKeyboardFocus
 +
| The element has lost Keyboard Focus
 +
|-
 +
! gotMouseFocus
 +
| The element has gained Mouse Focus
 
|-
 
|-
−
! lostFocus
+
! lostMouseFocus
−
| The element has lost Focus
+
| The element has lost Mouse Focus
 
|-
 
|-
 
! gotMouseCapture
 
! gotMouseCapture
Line 102: Line 153:
 
! lostMouseOver
 
! lostMouseOver
 
| The element has lost Mouse Over (mouse is somewhere outside this element)
 
| 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
 +
|-
 +
! onRendered
 +
| The element itself has been rendered, but any children have not yet rendered
 +
|-
 +
! onRenderedChildren
 +
| The element's children have been rendered
 +
|-
 +
! onRefresh
 +
| The element is visible and refreshing its visual states to prepare for rendering
 
|}
 
|}
  
Line 128: Line 200:
 
| The element has lost Mouse Over (mouse is somewhere outside this element)
 
| 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 ===
 
=== Example ===
Line 164: Line 239:
 
   }
 
   }
 
  }
 
  }
 +
 +
{{LGUI2:Topic}}
 +
{{LGUI2:ElementTypes}}
 +
{{LGUI2:LS1:ObjectTypes}}
  
 
[[Category:LavishGUI 2|LavishGUI 2]]
 
[[Category:LavishGUI 2|LavishGUI 2]]
 +
[[Category:LavishGUI_2_Elements]]

Latest revision as of 04:36, 13 February 2022

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
widthFactor A floating point (decimal) number specifying the initial width factor of the element, as a factor of the visual parent's width (i.e. widthFactor 0.5 means half of the parent's width)
heightFactor A floating point (decimal) number specifying the initial height factor of the element, as a factor of the visual parent's height(i.e. heightFactor 0.5 means half of the parent's height)
xFactor A floating point (decimal) number specifying the initial x factor of the element, as a factor of the visual parent's width (i.e. xFactor 0.5 means half of the parent's width)
yFactor A floating point (decimal) number specifying the initial y factor of the element, as a factor of the visual parent's height(i.e. yFactor 0.5 means half of the parent's height)
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 horizontal 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
tooltip An element definition specifying the tooltip to display when hovering the cursor over this element
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
strata The Strata level (kind of a priority level used in layout) used for the element, usually a number between 0.0 and 1.0, with 1.0 being the usual "top" and 0.0 being the usual "bottom". Strata may be interpreted differently by different layout elements, but typically affects an element's Z-order. If not given, default is 0.5
visibility One of "visible" "hidden" or "collapsed", specifying the visibility state of the element
acceptsKeyboardFocus true or false depending on whether the element should accept keyboard focus
acceptsMouseFocus true or false depending on whether the element should accept mouse focus

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
onDragDrop A Drag and Drop item is being dropped while this element has mouseover
gotKeyboardFocus The element has gained Keyboard Focus
lostKeyboardFocus The element has lost Keyboard Focus
gotMouseFocus The element has gained Mouse Focus
lostMouseFocus The element has lost Mouse 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
onRendered The element itself has been rendered, but any children have not yet rendered
onRenderedChildren The element's children have been rendered
onRefresh The element is visible and refreshing its visual states to prepare for rendering

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

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
Retrieved from "https://www.lavishsoft.com/wiki/index.php?title=LGUI2:Elements&oldid=8497"