Getting Started - UI Widgets

Get up-and-running quickly with Widgets.

Overview

Widgets are cool.

Widget styles

A Style can be created and assigned to a Widget in several ways:

Inline styles

This essentially creates an anonymous Style and assigns it to the Widget. This is good for quick app testing, but the drawback is that it doesn't help with reusability.

dUI = require 'lib.dmc_ui'

widget = dUI.newText{
    style = {
        align='right',
        fontSize=14,
    }
}

Separate Style object

Here we create a separate Style object and can assign that to 1 or many widgets. This works, but the drawback here is that you must have a reference to the Style object in order to assign it to the Widget.

dUI = require 'lib.dmc_ui'

-- create style object

style1 = dUI.newTextStyle()

-- assign inside of widget constructor

widget2 = dUI.newText{
    style=style1
}

-- assign anywhere by using property 'style'

widget1 = dUI.newText()
widget1.style = style1

Named Styles

A named style can be created anywhere in the app and referenced anywhere. This is very good approach as it provides great re-usability, and an entire app can easily be styled in this manner.

one_file.lua

dUI = require 'lib.dmc_ui'

-- this named style 'home-page' can be created anywhere in the app

style = dUI.newTextStyle{
    name='home-page'
}

another_file.lua

dUI = require 'lib.dmc_ui'

-- and assigned somewhere else

widget = dUI.newText{
    text="Big Title"
}
widget.style = 'home-page'

Themes

Themes take named styles one step further. A theme is essentially a collection of named styles. This is very good approach if you intend on switching styles in your app.