[Library] creating user interfaces from XML

[lsoaresesilva7]

Hello, as an Android and JavaFX Developer, who’s used to developer user interfaces in XML, coding business apps on Corona can be a hard task. Especially to layout your components (e.g.: to make all align center and vertical).

I have developed a library called View, which tries to solve this issue by letting you code your user interface through XML. Let me show how it works:

-- in your main.lua local viewLoader = require("view") local view = viewLoader:setView("layout.xml") -- create all corona components declared in layout.xml and draw on screen

– Create a file with .xml extension in your project’s folder, example layout.xml:

\<LinearLayout id="layoutLinear" x="10" orientation="vertical" align="center" paddingX="10"\> \<Text id="txtUsername" x="10" y="10" text="Username" /\> \<TextField /\> \<Text id="txtPassword" x="10" y="50" text="Password" /\> \<TextField /\> \<Button label="Login" /\> \</LinearLayout\>

The result is shown on image attached to this post:

At the moment of this post, It’s not fully functional, but works with texts, buttons, textfields, textbox and spinner. You can align elements on left or center and also use vertical or horizontal orientation.

Code can be found at my Github: https://github.com/lsoaresesilva/corona_view

Hope, you enjoy!

PS1: Need to do unit test, but it driving me crazy, as Corona does dot offer support for mocks and such;

PS2: I would appreciate any help to improve the Library

PS3: I’m improving docs and github help, be pattient, please!

[Coder101]

Goodjob!

[lsoaresesilva7]

Thanks!

Just made an update to the library and added cool features:

** Added support for nested/inner layouts;

<LinearLayout>

   <LinearLayout>

** Added support for a css-like style (experimental);

<Text class=“anClassExample” />

** Added support for listeners definition through XML (works for tap, touch and userinput events);

<Text touch=“thisIsMyListener” />

** Added a two new components: Image and BlankSpace (inserts a blank space in yout layout);

** Refactored the function to position components on screen, its much better now 

[lsoaresesilva7]

Hi, some news:

* Now its supports one-way binding, example:

Every change on your textfields automatically reflects on lua variables.

Your main.lua

controller = { login = "", password = "" } function controller.login(event) if event.phase == "ended" then print(controller.login) print(controller.password) end end local viewLoader = require("view") local view = viewLoader:setView("layout.xml", controller)

XML Layout

\<LinearLayout&nbsp;id="layoutLinear"&nbsp;&nbsp;orientation="vertical"&nbsp;align="center"\> &nbsp;&nbsp;&nbsp;&nbsp;\<Text&nbsp;id="txtField"&nbsp;text="Login"&nbsp;class="alterandoCores"/\> &nbsp;&nbsp;&nbsp;&nbsp;\<TextField&nbsp;model="login"&nbsp;/\> &nbsp;&nbsp;&nbsp;&nbsp;\<Text&nbsp;id="txtField"&nbsp;text="Password"&nbsp;class="alterandoCores"/\> &nbsp;&nbsp;&nbsp;&nbsp;\<TextField&nbsp;model="password"&nbsp;/\> &nbsp;&nbsp;&nbsp;&nbsp;\<BlankSpace&nbsp;height="30"&nbsp;width="100"/\> &nbsp;&nbsp;&nbsp;&nbsp;\<Button&nbsp;touch="login"&nbsp;label="Login"/\> \</LinearLayout\>

[lsoaresesilva7]

Update:

* Added a dependency injection like to map components defined in XML into lua variables for easy access.

Every component which have an id will be mapped into a variable and put into the controller. Example:

In XML:

\<LinearLayout&nbsp;id="layoutLinear"&nbsp;&nbsp;orientation="vertical"&nbsp;align="center"\> &nbsp;&nbsp;&nbsp;&nbsp;\<Text&nbsp;id="txtLogin"&nbsp;text="Login"&nbsp;class="alterandoCores"/\> \</LinearLayout\>

-- main.lua controller&nbsp;=&nbsp;{} local&nbsp;viewLoader&nbsp;=&nbsp;require("view") local&nbsp;view&nbsp;=&nbsp;viewLoader:setView("layout.xml",&nbsp;controller) --&nbsp;Use&nbsp;the&nbsp;id&nbsp;defined&nbsp;to&nbsp;have&nbsp;access&nbsp;for&nbsp;the&nbsp;component&nbsp;in&nbsp;your&nbsp;controller print(controller.txtLogin.text)&nbsp;--&nbsp;will&nbsp;print&nbsp;"Login"

[Falcon777]

Amazing work. I will give it a try in my next project.  Thank you so much for sharing this library.

[NeverAgain]

Great job! Thanks for sharing

[Coder101]

Goodjob!

[lsoaresesilva7]

Thanks!

Just made an update to the library and added cool features:

** Added support for nested/inner layouts;

<LinearLayout>

   <LinearLayout>

** Added support for a css-like style (experimental);

<Text class=“anClassExample” />

** Added support for listeners definition through XML (works for tap, touch and userinput events);

<Text touch=“thisIsMyListener” />

** Added a two new components: Image and BlankSpace (inserts a blank space in yout layout);

** Refactored the function to position components on screen, its much better now 

[lsoaresesilva7]

Hi, some news:

* Now its supports one-way binding, example:

Every change on your textfields automatically reflects on lua variables.

Your main.lua

controller = { login = "", password = "" } function controller.login(event) if event.phase == "ended" then print(controller.login) print(controller.password) end end local viewLoader = require("view") local view = viewLoader:setView("layout.xml", controller)

XML Layout

\<LinearLayout&nbsp;id="layoutLinear"&nbsp;&nbsp;orientation="vertical"&nbsp;align="center"\> &nbsp;&nbsp;&nbsp;&nbsp;\<Text&nbsp;id="txtField"&nbsp;text="Login"&nbsp;class="alterandoCores"/\> &nbsp;&nbsp;&nbsp;&nbsp;\<TextField&nbsp;model="login"&nbsp;/\> &nbsp;&nbsp;&nbsp;&nbsp;\<Text&nbsp;id="txtField"&nbsp;text="Password"&nbsp;class="alterandoCores"/\> &nbsp;&nbsp;&nbsp;&nbsp;\<TextField&nbsp;model="password"&nbsp;/\> &nbsp;&nbsp;&nbsp;&nbsp;\<BlankSpace&nbsp;height="30"&nbsp;width="100"/\> &nbsp;&nbsp;&nbsp;&nbsp;\<Button&nbsp;touch="login"&nbsp;label="Login"/\> \</LinearLayout\>

[lsoaresesilva7]

Update:

* Added a dependency injection like to map components defined in XML into lua variables for easy access.

Every component which have an id will be mapped into a variable and put into the controller. Example:

In XML:

\<LinearLayout&nbsp;id="layoutLinear"&nbsp;&nbsp;orientation="vertical"&nbsp;align="center"\> &nbsp;&nbsp;&nbsp;&nbsp;\<Text&nbsp;id="txtLogin"&nbsp;text="Login"&nbsp;class="alterandoCores"/\> \</LinearLayout\>

-- main.lua controller&nbsp;=&nbsp;{} local&nbsp;viewLoader&nbsp;=&nbsp;require("view") local&nbsp;view&nbsp;=&nbsp;viewLoader:setView("layout.xml",&nbsp;controller) --&nbsp;Use&nbsp;the&nbsp;id&nbsp;defined&nbsp;to&nbsp;have&nbsp;access&nbsp;for&nbsp;the&nbsp;component&nbsp;in&nbsp;your&nbsp;controller print(controller.txtLogin.text)&nbsp;--&nbsp;will&nbsp;print&nbsp;"Login"

[Falcon777]

Amazing work. I will give it a try in my next project.  Thank you so much for sharing this library.

[NeverAgain]

Great job! Thanks for sharing