# StageUI

**URL:** <https://forum.defold.com/t/stageui/5103>\
**Category:** The Defoldmine\
**Created:** [February 11, 2017, 11:28am UTC](https://forum.defold.com/t/stageui/5103 "2017-02-11T11:28:37Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![d954mas](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/d954mas/32/5401_2.png) [@d954mas](https://forum.defold.com/u/d954mas)\
**Post date:** [February 11, 2017, 11:28am UTC](https://forum.defold.com/t/stageui/5103/1 "2017-02-11T11:28:37Z")

</div>

I am working on gui library. The main idea that i have 2 types of object: **actors and stage**. Actor is a gui element(label/button and etc).  
Stage is handle all input and change actor status(pressed/unpressed/over).  
One of the main features is **skin**.You can describe how you elements shoould look. And also you can change skin in runtime.  
Skin example

```lua
local skin= {}
skin.default_button_style={normal="button_normal",pressed="button_pressed",over="radio_normal"}
skin.default_label_style={font="system_font",font_scale=1}

```

The library is still in development.It contains only label and button.But i will add more gui elements in future.Source can be found on [github](https://github.com/d954mas/stageUI)  
The code look like:

```lua
local stage_ui=require("stageUI.stage_ui")
local styles=require("stageUI.styles")
function init(self)
	msg.post(".", "acquire_input_focus")
	self.stage=stage_ui.Stage:new(styles)
	local label=stage_ui.Label:new("label","default")
	label:set_text("test text")
        --add actor to stage
	self.stage:add(label)
	self.stage:add(stage_ui.Button:new("button","default",function() print("callback") end))
	self.stage:add(stage_ui.Button:new("button1","default"))
end

function final(self)
    msg.post(".", "release_input_focus")
end

function on_input(self, action_id, action)
    --stage handle all input
    self.stage:on_input(action_id,action)
end

```

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [February 12, 2017, 1:02pm UTC](https://forum.defold.com/t/stageui/5103/2 "2017-02-12T13:02:48Z")

</div>

This could at some point be a valid contender with Dirty Larry! Please keep us updated of your progress.

Personally I’m not very fond of the type of skinning that is done in code. I prefer if as much skinning as possible is done using Gui templates and any changes to the style can be seen immediately without running any code. This also makes it more approachable to non-coders.

---

<div class="post-metadata">

**Author:** ![d954mas](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/d954mas/32/5401_2.png) [@d954mas](https://forum.defold.com/u/d954mas)\
**Post date:** [February 12, 2017, 1:49pm UTC](https://forum.defold.com/t/stageui/5103/3 "2017-02-12T13:49:09Z")

</div>

I love skins. It is very cool when you can change one line, for example title font, and then it will be changed for all your titles. Skinning throw gui is very poor. It is hard to set different state for button(pressed/over/unpressed). In my library you can use skining from gui, if send to constructor no\_style

```lua
stage_ui.Button:new("button1","no_style")

```

But you will not have pressed/over/unpressed states.

---

<div class="post-metadata">

**Author:** ![d954mas](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/d954mas/32/5401_2.png) [@d954mas](https://forum.defold.com/u/d954mas)\
**Post date:** [March 8, 2017, 5:20pm UTC](https://forum.defold.com/t/stageui/5103/4 "2017-03-08T17:20:01Z")

</div>

I make little refactoring. Add posibility to use table from gui.clone\_tree(). Add some more elements. Now library contains:label,button,text\_button,checkbox,radio.

 ![](https://forum-defold-uploads.b-cdn.net/original/2X/8/821d830c28ef1560dee09f377dca7aa299d197a5.png)

---

<div class="post-metadata">

**Author:** ![d954mas](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/d954mas/32/5401_2.png) [@d954mas](https://forum.defold.com/u/d954mas)\
**Post date:** [March 10, 2017, 6:38pm UTC](https://forum.defold.com/t/stageui/5103/5 "2017-03-10T18:38:14Z")

</div>

@britzl I am trying to make this project library.I add include dirs in game.project [https://github.com/d954mas/stageUI/blob/master/game.project](https://github.com/d954mas/stageUI/blob/master/game.project). But when i add link [https://github.com/d954mas/stageUI/archive/master.zip](https://github.com/d954mas/stageUI/archive/master.zip) in dependecies i got nothing. What i am doing wrong?

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [March 10, 2017, 6:59pm UTC](https://forum.defold.com/t/stageui/5103/6 "2017-03-10T18:59:57Z")

</div>

That’s enough. You do not need to do anything else. I added the project and a dependency and selected Fetch Libraries and everything seems to be working:

 ![](https://forum-defold-uploads.b-cdn.net/original/2X/e/ece53e4815ab8da2310a787109a076a4a3e63583.png)

---

<div class="post-metadata">

**Author:** ![d954mas](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/d954mas/32/5401_2.png) [@d954mas](https://forum.defold.com/u/d954mas)\
**Post date:** [March 10, 2017, 7:11pm UTC](https://forum.defold.com/t/stageui/5103/7 "2017-03-10T19:11:15Z")

</div>

Thanks,I understand, this was name confilct. I alredy have folder stageUI in project.I delete it and everything ok 🙂