Using Pencil as UI Designer for Corona

Hi!

I started using the Corona Sdk a few weeks ago. I found that it is great for developers, but a bit hard to make the deisng at the development phase.

So i made a little project to process of  output files of the free and open-source Pencil UI Designer.

Sourcecode is here.

Regards, Janos

p03.png

That is fantastic! I love creating mock ups but havent found the ideal tool yet. Looking forward to trying this. Thanks :slight_smile:

Thanks. I hope it is more than just one mockup maker. :slight_smile:

Looks good. 

Native objects will be represented as generic objects (TextField, TextBox, WebView, MapView etc.).
I tried to run the generated scene with some native objects on my phone.
The result was much better what i previously imagined…

 
And here is the design-time screenshot.

Do the UI elements on the menu actually work or are they just static images?

 
UI elements aka ‘info’ and the ‘menu’ elements on the top rectangle?
They are Material Icons (derived from display.newText). This object is not a standard sdk object.

Any design element can be used easily from generated lua code:

[lua]

function scene:create(event)
  local sceneGroup = self.view

  – render design elements
  local objects = pimp.getSceneObjects(event,sceneGroup)

 

  – event to InfoButton
  objects[“InfoButton”]:addEventListener( “touch”, myEventHandler )

end

[/lua]

Implemented elements:

  • Rect (RoundedRect)
  • Circle
  • Text
  • Button
  • Spinner
  • Image
  • Switch (CheckBox,Radio)
  • Slider
  • ProgressBar
  • Tabbar

non standard element

  • MaterialIcon (newText with Material Icon font set)
  • MaterialTab (newTabbar with Material Icon font set)

Some native objects now under development:

  • TextField
  • TextBox
  • WebView
  • MapView

Development of the native object handling just finished.
Now the generated scene handles the native object hiding and showing on scene change.
 
Source code and example files can be found on Github
Feedbacks are welcome…

That is fantastic! I love creating mock ups but havent found the ideal tool yet. Looking forward to trying this. Thanks :slight_smile:

Thanks. I hope it is more than just one mockup maker. :slight_smile:

Looks good. 

Native objects will be represented as generic objects (TextField, TextBox, WebView, MapView etc.).
I tried to run the generated scene with some native objects on my phone.
The result was much better what i previously imagined…

 
And here is the design-time screenshot.

Do the UI elements on the menu actually work or are they just static images?

 
UI elements aka ‘info’ and the ‘menu’ elements on the top rectangle?
They are Material Icons (derived from display.newText). This object is not a standard sdk object.

Any design element can be used easily from generated lua code:

[lua]

function scene:create(event)
  local sceneGroup = self.view

  – render design elements
  local objects = pimp.getSceneObjects(event,sceneGroup)

 

  – event to InfoButton
  objects[“InfoButton”]:addEventListener( “touch”, myEventHandler )

end

[/lua]

Implemented elements:

  • Rect (RoundedRect)
  • Circle
  • Text
  • Button
  • Spinner
  • Image
  • Switch (CheckBox,Radio)
  • Slider
  • ProgressBar
  • Tabbar

non standard element

  • MaterialIcon (newText with Material Icon font set)
  • MaterialTab (newTabbar with Material Icon font set)

Some native objects now under development:

  • TextField
  • TextBox
  • WebView
  • MapView

Development of the native object handling just finished.
Now the generated scene handles the native object hiding and showing on scene change.
 
Source code and example files can be found on Github
Feedbacks are welcome…