Implementing UI based on iOS 7+ / Google Material (?)

Business Apps
#21

Changes in latest release:

  • Added createDialog() and it will create a modal with up to two buttons (Cancel, Okay types).  Callbacks can be set for both. Colors can be set for buttons, dialog background, fonts and easing animation when dialog shows/hides.  If no buttons use method dialogClose() to terminate the dialog.
  • Improvements and bug fixes.
#22

Paul,

This is fabulous work you are doing! Thank you so much for pouring so much time and effort into this and making it free and available for everyone. This is quite the gift to the Corona community!

Like most Corona developers, I find Corona to be much more useful for games than for traditional apps. However, this library is going a long way to make business apps using Corona a lot more feasible. Thank you!

(I now follow you on both Twitter and Youtube.)

#23

@jerejigga - Thanks for the nice comment! :slight_smile:

Changes in latest release:

  • createSlider() - Create a slider for doing percentages 0…100. Calculate amount in call backs: callBackMove (called during movement) and callBack = at the end phase.  Values are in percent (0.20, 0.90 and 1 for 100%). Limitations: horizontal only and no labels (both to be addressed).  See fun.lua or 2nd scene for an example.   See mui.lua and method sliderCallBackMove() to get current value of slider.
  • renamed method dialogClose() to closeDialog()
  • improvements and bug fixes.
#24

Changes in latest release:

  • Added “labelFont” option to createToolbar
  • Added “labelText” option to createToolbar “list” attribute. Allows the mix of Material icon font and text/word font. Label a button as “View” the button contains the text “View”
  • Mixing icon font and text/word font on same toolbar is allowed.
  • Added “labelFont” option to createToolbar
  • Added “labelText” option to createToolbar “list” of buttons. Allows a button to contain: Icon only, Text only or Icon with Text beneath.
  • “x” option to createToolbar now works as expected. Set to 0 if wanting to use a toolbar that is 100% width of display.
  • “width” option to createToolbar now works as expected. If width is omitted the toolbar width defaults to 100% or display.contentWidth
  • “touchpoint” option to createToolbar now works as expected.
  • “callBack” for createToolbar works as expected. It will do the animation and then call the user-defined callBack.
#25

Changes:

  •  getEventParameter - returns the event MUI widget parameters for the current widget.  Get the event target, widget name, widget value ( ex: getEventParameter(event, “muiTargetValue”) ).  The value can be set when creating a widget.  See menu.lua for setting the values and mui.lua callBacks for getting values (example would be actionForSwitch() method).
  • All widgets support a “value” and can be accessed in the callBacks by getEventParameter() method. See mui.lua for examples.
  • Event handling refactored.  The old way will be deprecated in future releases.  See callBacks in the mui.lua for changes.
#26

Changes:

  • Added createToast() method - Create simple “toast” notifications on screen. Colors, dimensions and fonts can be specified.  See fun.lua for an example run the demo and tap “Switch Scene” button. Tap “Show Toast”
  • Fixed slider bug.
#27
  • Added createSelect() method - Create a select drop down list (dropdown list). Colors, dimensions and fonts can be specified. See fun.lua for an example. Run the demo and tap “Switch Scene” button.  It will auto resize the height to fit the select drop down list on the display.

Method createTextBox() supports “inputType” from Corona SDK. Example password fields.

Method createTableView() supports row colors or each row can be a different color, line separator and bug fixes. Eliminated variables not used etc.

materialui-sample-view-4.png

materialui-sample-view-4b.png

#28

Changes:

  • Added method createNavbar(). See fun.lua for an example of how to attach widgets.
  • Fixed password field bug and createTextField background color can be specified (fillColor).
  • See change log for more.

materialui-sample-view-4c.png

#29

Looks great, keep it up! The navbar looks promising :smiley:

#30

@bramvbilsen : Thank you! :slight_smile:

Changes in release:

Changes

  • Re-factored the layout of the modules. Widgets are now in separate .lua files to help with maintainability.  New files (.lua assumed): mui-button, mui-dialog, mui-navbar, mui-progressbar, mui-select, mui-slider, mui-switch, mui-tableview, mui-textinput, mui-toast, mui-toolbar
  • Added mui-data.lua to be the internal global space.
  • Ability to create additional modules using a simple template. mui-example.lua is the template.
  • Ability to specify which modules are needed by a scene. Include a table ({}) in the mui.init() for the modules needed. If “none” are specified then all modules are loaded. See mui.lua for sample list.
  • createDialog - fixed fadeOut when dialog is closed.
#31

Paul, it’s amazing job! Please do not stop!

I do not understand why CoronaLabs team still didn’t make any powerful library for UI to build the apps. Only primitive version as is.

If compare hybrid ionic framework and coronalabs, the corona works few times faster. But the problem is that developers choose ionic not only because it’s javascript but also they have easy way to build nice UI even if the performance is too slow.

#32

Thanks, I won’t stop.  It has become a mission now ;).  I want an SDK which can target multiple platforms for either Apps or games.

A newer version using more Material animations is coming.  I put in a few, but wanted to get the basics working.  Plus, a few pre-made business UI Apps will be made to showcase different ideas.

It will support images for buttons and sprite sheets for animations in a release coming.  Thanks for pointing out the “hybrid ionic framework” and will review the UI elements.

-Paul

#33

Hi Paul,

I’ve been thinking and thinking of a new non-game idea just because I’d love to fully use your library! :slight_smile:

Also, I’ve read that you are working on a layout engine, did you start on it already? Not trying to push you tho, you are doing an amazing job! :smiley:

Kind regards

Bram

#34

@Bram

Yep, working on a layout engine. I wish I had more time to go faster, but I am getting there. :wink:

Changes in this release:

  • Onboarding - The onboarding/walkthrough screens for first-time users. Introduce the app and demonstrate what it does.  Go to the Demo and on the first scene tap the “?” to see it in action.  Look at onboard.lua for a complete example.
  • Added methods ‘createParentOnBoard’, ‘addChildOnBoard’ and other supported onboarding methods.
  • Added method ‘createCircleButton’ - Create a circle button with a single character or even a word
  • The scene colors have been updated to be clean and not a wild west of colors.
  • YouTube Video updated https://youtu.be/c8p3DMA6PzU

material-ui-main.png

material-ui-second.png

material-ui-onboarding.png

#35

Here is a first example of a Google Material like button (video).  I am working on more than just a button as I need it for a project.  I could release it all free.  Basically the controls will ‘auto-size’ themselves for whatever screen size and button dimensions. See video https://youtu.be/h4aWDBtYSwY

Of course I am refining it, but it’s my first Corona experiment since a while back.

#36

The current widget library has an iOS 7 theme. We offer two Android themes holo light and holo dark. These should mimic Android UI features. But they definitely don’t do the animations of the lighter circle expanding from the touch point. You would have to download the open source code for the widget library from our github repo and tinker with the code yourself

https://github.com/coronalabs/framework-widget

Rob

#37

Thanks Rob, I will check it out.  It’s fun putting this UI together.

#38

Changes in release

  • Added date and time pickers. This took a while to develop and will be improved.  There will be a another date and time picker following material lite design.  In the end there will be two sets to choose from.  See main scene with circle button icons for date and time.  Use method ‘pickerGetCurrentValue(<control name>)’ to get current date / time.
  • Reduced number of event methods for all widgets, etc.  One internal event method to handle Rectangle buttons for example.
  • Bug fixes and stability improvements.

date-time-picker2.png

#39

Changes in release:

  • Put back the toggle switch in the demo.
  • Renamed all methods with prefix ‘create’ to ‘new’. Example newDialog() instead of createDialog(). Backwards compatibility will remain for a while. Any new methods will use ‘new’ prefix.
  • Renamed all methods with prefix ‘removeWidget’ to ‘remove’.  Example removeDialog() instead of removeWidgetDialog(). Backwards compatibility will remain for a while. Any new methods will use ‘remove’ prefix.
  • Renamed removeWidgets() to destroy() and includes backwards compatibility.
  • Added newCheckBox() and removeCheckBox() methods.
#40

Changes in release:

  • Added slide out “menu” panel (see hamburger icon). Use method newSlidePanel().  This will be extended. The menu resides in a scroll view.  It can contain many navigation entries and scroll to pick one.  Icon and Text, Text only supported.  A line separator can be added to separate group of entries.
  • Will be making “smaller” demo files to separate the features and show how to include only what you need to get the scene up and going.

slide-menu-panel3.png