< GUI | UserGuide | GUI Callbacks >


Components

Component

A component is a rectangular area that receives mouseevents if the mouse is moving across the component's area. All GUI classes are derivided from the component class.

Container

A container is a component that may contain subcomponents. The elements inserted first are on top of other components. The container takes care about ordering and clipping of components.

The screen is covered by a so called rootcontainer when Luxinia is launched. Any component that should become visible must be inserted in the rootcontainer.

Containers can help to organize your components - if removed from the rootcontainer or a container that is placed on the rootcontainer, all subcomponents will become invisible and cannot be used any longer. Once added, all subcomponents will be visible and usable again.

Labels

A label component is a single textline and supports textalignments like left, right and centered.
---% Code tested with Luxinia 0.95 build Nov 15 2006
---% at 11/16/06 22:30:55

  -- create label with 10,10,100,20
label = Label:new(10,10,100,20,"\v999Textlabel") 
  -- the \v999 will make the text whitecolored

  -- add it to the rootcontainer (displays the label)
Container.getRootContainer():add(label)

A button in Luxinia

Buttons

Buttons react on userinput by calling a function once they are clicked.
---% Code tested with Luxinia 0.95 build Nov 15 2006
---% at 11/17/06 12:49:59

  -- create a Button at 10,10 width width=100 and height=20
btn = Button:new(10,10,100,20,"Hello World")
  -- add Button to rootcontainer to make it visible
Container.getRootContainer():add(btn) 

  -- overload the onClicked function from the button
  -- which is called every time when the button is clicked
function btn:onClicked()
  print("Hello World")
end

A selected and deselected combobox

Checkboxes

A checkbox is a modified button and supports different states (enabled/disabled).
---% Code tested with Luxinia 0.95 build Nov 15 2006
---% at 11/16/06 22:38:19

cb = Checkbox:new(10,10,100,20,"\v999check me")

function cb:onClicked(state)
  if (state) then print "I am checked"
  else print "I am unchecked" end
end

Container.getRootContainer():add(cb)

A textfield

TextFields?

A textfield is a line of text that can be edited. It supports copy and paste and selection. Only monospaced fonts are currently working with it.
---% Code tested with Luxinia 0.95 build Nov 15 2006
---% at 11/16/06 22:35:27

  -- create a textfield at 10,10
tx = TextField:new(10,10,100,20)
tx:setText("OK")

  -- overload the onKeyTyped event
function tx:onKeyTyped (keyevent)
    -- call the parent function first
  TextField.onKeyTyped(self,keyevent)

    -- if enter was pressed, let's print out the text
    -- and reset the textfield
  if keyevent.key == "\n" then
    print(tx:getText())
    tx:setText("")
  end
end

  -- add it to the rootcontainer
Container.getRootContainer():add(tx)

A horizontal slider element

Sliders

Sliders are a button that can be dragged from one side to another side, changing the current value. Certain functions are called automaticly.
---% Code tested with Luxinia 0.95 build Nov 15 2006
---% at 11/16/06 22:46:52

  -- create slider at 10,10
slider = Slider:new(10,10,100,16)

  -- add label to display values
tx = Label:new(10,40,100,16)

  -- react on changes of the slidervalues
function slider:onValueChanged(newvalue,oldvalue)
  tx:setText("\v999"..newvalue)
end

  -- add components to rootcontainer
Container.getRootContainer():add(tx)
Container.getRootContainer():add(slider)

A multilinelabel

Multilinelabels

If a longer text should be displayed, the multilinelabel can be used. It also supports a technique to highlight words and make them clickable, however this is currently error prone. It is planned to provide a Textlabelfield that allows HTML like strings to highlight certain words in texts.

A combobox with items that have icons

Combobox

Comboboxes are dropdown buttons that allow to select a previously added item.
---% Code tested with Luxinia 0.95 build Nov 15 2006
---% at 11/16/06 22:39:25

cb = ComboBox:new(10,10,100,20)
for i=1,10 do 
  cb:addItem("Item "..i)
end

Container.getRootContainer():add(cb)

A listbox using 3D icons

Listbox

Listboxes are similiar like comboboxes, but are displayed as an single component with a scrollbar and selectable items.
---% Code tested with Luxinia 0.95 build Nov 15 2006
---% at 11/16/06 22:44:56

list = ListBox:new(10,10,100,200)
for i=1,10 do 
  list:addItem("Item "..i)
end

Container.getRootContainer():add(list)