== UI definitions ==

UI elements can be both loaded from Lua definitions or created on the fly.

{{{#!lua
-- some_name.ui.lua

register_ui "mywindow"
{
  element "window" { -- id will be mywindow.window
    position  = { 10, 10 },
    dimension = { 400, 100 },
    class     = "mywindow", -- style class
    element { -- unnamed element (mywindow.window.1)
      position = { 10, 10 }, -- relative, dimension auto
      text = "Hello world! Fine day?",
    },
    button "yes" { -- subelement, will be mywindow.window.yes
      rposition  = { 0.1, 0.8 }, -- relative positioning
      rdimension = { 0.3, nil }, -- just one value, other is nil
      dimension  = { nil, 20 }, -- other value not relative
      text       = "Yes!",
    },
    button "no" { -- 
      rposition  = { 0.1, 0.8 }, -- relative positioning
      rdimension = { 0.3 }, -- just one value, other is nil hence can be ommited
      dimension  = { nil, 20 }, -- other value not relative
      text       = "No :(",
    },
  },
}

}}}

{{{
-- some_script.lua

ui_element = ui.create( "mywindow" );
local result
ui_element:find("yes").on_click = function(self) result = true;  self:destroy() end
ui_element:find("no").on_click  = function(self) result = false; self:destroy() end
ui:run_modal( ui_element )

}}}


== UI styles ==

Modeled after CSS but using pure lua.

Each UI element has:
* id value, might not be set
* type value, set by type database
* class value, might be set by user
* special modifier (selected, hover, etc)

{{{#!lua
-- some_name.style.lua
default = {
  text_color         = { 0.3, 0.3, 0.3, 1.0 },
  background_color   = { 0.0, 0.0, 0.0, 1.0 },
  background_image   = "source:path/name/file.png",
  background_stretch = false,

  -- class definition
  redclass = {
    text_color   = { 1.0, 0.3, 0.3, 1.0 },
    border_color = SILVER, -- constant colors
    -- modifier definition, within type
    [":hover"] = {
      border_color = RED, -- constant colors
    }
  },

  -- id definition (no need for additional because unique!
  mybutton = {
    border_width = 3,
  }
}

}}}