Home

UI

The UI instance is the core of the library. It will be used to create GUIElements/components and to get already created elements/components.

To create an element/component you'll need to pass a squirrel table with its properties as the function argument, and to get an already created element/component, you'll need to pass a string with the its id instead. For example

Creating a new label:

//returns the created GUILabel
UI.Label({
   id = "newLabelID"  
   Text = "labelText"
   FontSize = 20 
})

Getting an existing label:

//searches for an existing label with the id 'newLabelID' and returns it (if not found, returns null) 
UI.Label("newLabelID")

You should always provide an id for each element/component you create and each id must be unique, you can't create more than one element with the same id. If you don't provide an id, DecUI will automatically generate one for you, but it's still recommended to define one yourself.

All the of existing GUIElement properties referred on the VCMP wiki still work for the GUIElements created with DecUI but many other new properties and functions have also been added.

New global properties and functions

These properties and functions are available for all elements and components

.id - string  //required during creation
.ignoreGameResizeAutoAdjust - boolean //makes it so that when the game is resized, all the the automatic adjustments and alignments applied by DecUI are not applied to this element when this is set to "true"
.align - string // ex: center, left, right (check the alignment page to see the available alignment options)
.click() - function // will call whatever function is attached to the .onClick property
.realign() - function //aligns the element according to what's specified on the .align property
.move - table //ex: { up = 10, right = 5 } will move the element 10 pixels up and 5 pixels to the right
.shiftPos() - function // moves the label according to what's specified on the .move property
.destroy() - function //deletes the element (always use this to delete elements instead of nulling them)
.focus() - function // focuses the element
.addBorders(borderTable) - function // adds borders, borderTable example:  { color= Colour(255,0,0), size= 5 }
.removeBorders() - function
.updateBorders() - function //this is used to place the borders again (should be used when you manually change an element's position )
.hide() - function
.show() - function   
.onClick() - function
.onHoverOver() - function
.onHoverOut() - function
.onFocus() - function
.onBlur() - function
.onDrag() - function
.onRelease() - function
.onGameResize() - function
.hidden - boolean // returns true when hidden
.fadeIn() - function
.fadeOut() - function
.postConstruct() - function/event // called after the element is created
.preDestroy() - function/event //called before the element is destroyed
.contextMenu - table // creates a right click context menu for this element. check the context menu page for more information
.tooltip - string or table //check the tooltip page for more information

There's more properties and functions not shown here that are element specific, check each element page for more information. Available elements/components:

Elements

• UI.Label
• UI.Editbox
• UI.Sprite
• UI.Checkbox
• UI.Window
• UI.Canvas
• UI.Scrollbar
• UI.ProgressBar
• UI.Button
• UI.Listbox
• UI.Memobox

Components

• UI.Popup
• UI.DataTable
• UI.ComboBox
• UI.TabView
• UI.Grid
• UI.Notification
• UI.Circle

In addition to these components, tooltip and right click context menu support has been added, which can be attached to any element using the .tooltip and the .contextMenu property, check the tooltip and the contextMenu page for more information on how to use them.