Difference between revisions of "UI"

From GiderosMobile
 
(28 intermediate revisions by the same user not shown)
Line 4: Line 4:
  
 
=== Description ===
 
=== Description ===
A UI Library for Gideros.
+
A UI Library for Gideros made of a plethora of widgets.
  
In order to use Gideros UI Library, you have to link or include the two following folders to your project:
+
'''UI.Builder''' allows for building complex UI layouts.
* '''''Library/ui'''''
 
* '''''Library/luashaders'''''
 
  
The folders are available in your Gideros installation folder. The UI Library depends on luashaders.
+
  In order to use Gideros UI Library, you have to link or include the two following folders to your project:
 +
  * '''''Library/ui'''''
 +
  * '''''Library/luashaders'''''
 +
  The folders are available in your '''Gideros installation folder''' (UI Library depends on luashaders)
  
=== Examples ===
+
=== Example ===
 
'''In init.lua'''
 
'''In init.lua'''
 
<syntaxhighlight lang="lua">
 
<syntaxhighlight lang="lua">
 
UI=UI or {}
 
UI=UI or {}
  
 +
local fontfile = "fonts/OpenSans-Regular.ttf"
 
local fontfilebold = "fonts/OpenSans-Bold.ttf"
 
local fontfilebold = "fonts/OpenSans-Bold.ttf"
  
 
UI.Default = {
 
UI.Default = {
TTF=fontfilebold,
+
TTF=fontfile,
 +
Fonts={
 +
["font"]={ ttf=fontfile, size=0.8 },
 +
["font.small"]={ ttf=fontfile, size=0.5 },
 +
["font.bold"]={ ttf=fontfilebold },
 +
}
 
}
 
}
 
</syntaxhighlight>
 
</syntaxhighlight>
Line 41: Line 48:
  
 
stage:addChild(button)
 
stage:addChild(button)
</syntaxhighlight>
 
 
'''Sliders'''
 
<syntaxhighlight lang="lua">
 
--Sliders give value from 0 to 1
 
local sliderA=UI.Slider.new()
 
sliderA:setDimensions(200,50)
 
sliderA:setPosition(250,50)
 
sliderA.name="Slider A"
 
 
local sliderB=UI.Slider.new()
 
sliderB:setDimensions(200,50)
 
sliderB:setPosition(250,150)
 
--This slider center is in the middle of the range
 
sliderB:setCenter(.5)
 
--Initial value is .6
 
sliderB:setKnobPosition(.6)
 
--Discrete steps of .1
 
sliderB:setResolution(.1)
 
sliderB.name="Slider B"
 
 
stage:addChild(sliderA)
 
stage:addChild(sliderB)
 
 
--Here we put the WidgetAction listener on stage.
 
--It will be propagated from each button up to stage through the sprite tree
 
--First parameter of event listeners are always the source widget of the event
 
function stage:onWidgetChange(w,v)
 
print(w.name.." value is "..v)
 
end
 
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 
{|-
 
{|-
 +
=== Widgets ===
 
| style="width: 50%; vertical-align:top;"|
 
| style="width: 50%; vertical-align:top;"|
UI.Accordion '''WIP''' ''creates a UI accordion''<br/>
+
[[UI.Accordion]] ''creates a UI accordion''<br/>
 
[[UI.Animation]] ''creates UI animations''<br/>
 
[[UI.Animation]] ''creates UI animations''<br/>
 +
[[UI.Bar]] ''creates a Bar widget''<br/>
 +
[[UI.Behavior]] ''manages widget behavior''<br/>
 +
[[UI.Border]] ''creates a Border widget''<br/>
 +
[[UI.BreadCrumbs]] ''creates a BreadCrumbs widget''<br/>
 +
'''[[UI.Builder]]''' ''builds layout interfaces''<br/>
 +
[[UI.Button]] ''creates Button widgets''<br/>
 +
[[UI.Calendar]] ''creates Calendar widgets''<br/>
 +
[[UI.Checkbox]] ''creates Checkbox widgets''<br/>
 +
[[UI.Combobox]] ''creates Combobox widgets''<br/>
 +
[[UI.ImageText]] ''creates an ImageText widget''<br/>
 +
[[UI.Keyboard]] ''creates a Keyboard widget''<br/>
 +
[[UI.Label]] ''creates a Label widget''<br/>
 +
[[UI.Panel]] ''creates a Panel widget''<br/>
 +
[[UI.Progress]] ''creates Progress widgets''<br/>
 +
[[UI.Slider]] ''creates Slider widgets''<br/>
 +
[[UI.Spinner]] ''creates a Spinner widget''<br/>
 +
[[UI.Splitpane]] ''creates a Splitpane widget''<br/>
 +
[[UI.TabbedPane]] ''creates a TabbedPane widget''<br/>
 +
[[UI.Table]] ''creates a Table widget''<br/>
 +
[[UI.TextField]] ''creates TextField widgets''<br/>
 +
[[UI.TimePicker]] ''creates a TimePicker widget''<br/>
 +
[[UI.Toolbox]] ''creates a Toolbox widget''<br/>
 +
[[UI.Tree]] ''creates a Tree widget''<br/>
 +
[[UI.Viewport]] ''creates a Viewport widget''<br/>
 +
[[UI.WeekSchedule]] ''creates a WeekSchedule widget''<br/>
 +
 
| style="width: 50%; vertical-align:top;"|
 
| style="width: 50%; vertical-align:top;"|
 
|}
 
|}
  
 
{{GIDEROS IMPORTANT LINKS}}
 
{{GIDEROS IMPORTANT LINKS}}

Latest revision as of 20:39, 17 October 2023

Supported platforms: Platform android.pngPlatform ios.pngPlatform mac.pngPlatform pc.pngPlatform html5.pngPlatform winrt.pngPlatform win32.pngPlatform linux.png
Available since: Gideros 2023.1

Description

A UI Library for Gideros made of a plethora of widgets.

UI.Builder allows for building complex UI layouts.

  In order to use Gideros UI Library, you have to link or include the two following folders to your project:
  * Library/ui
  * Library/luashaders
  The folders are available in your Gideros installation folder (UI Library depends on luashaders)

Example

In init.lua

UI=UI or {}

local fontfile = "fonts/OpenSans-Regular.ttf"
local fontfilebold = "fonts/OpenSans-Bold.ttf"

UI.Default = {
	TTF=fontfile,
	Fonts={
		["font"]={ ttf=fontfile, size=0.8 },
		["font.small"]={ ttf=fontfile, size=0.5 },
		["font.bold"]={ ttf=fontfilebold },
	}
}

In your game

--UI.Style:setDefault(UI.Theme.PointCore_Base)
--UI.Style:setDefault(UI.Theme.PointCore_Red)
UI.Style:setDefault(UI.Theme.PointCore_Pink)

-- a Button
local button=UI.Button.new()
button:setDimensions(64, 48)
button:setPosition(50,50)
button:setText("Button")

function button:onWidgetAction()
	print("Hello Gideros UI")
end

stage:addChild(button)

Widgets

UI.Accordion creates a UI accordion
UI.Animation creates UI animations
UI.Bar creates a Bar widget
UI.Behavior manages widget behavior
UI.Border creates a Border widget
UI.BreadCrumbs creates a BreadCrumbs widget
UI.Builder builds layout interfaces
UI.Button creates Button widgets
UI.Calendar creates Calendar widgets
UI.Checkbox creates Checkbox widgets
UI.Combobox creates Combobox widgets
UI.ImageText creates an ImageText widget
UI.Keyboard creates a Keyboard widget
UI.Label creates a Label widget
UI.Panel creates a Panel widget
UI.Progress creates Progress widgets
UI.Slider creates Slider widgets
UI.Spinner creates a Spinner widget
UI.Splitpane creates a Splitpane widget
UI.TabbedPane creates a TabbedPane widget
UI.Table creates a Table widget
UI.TextField creates TextField widgets
UI.TimePicker creates a TimePicker widget
UI.Toolbox creates a Toolbox widget
UI.Tree creates a Tree widget
UI.Viewport creates a Viewport widget
UI.WeekSchedule creates a WeekSchedule widget