Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Implementing UI based on iOS 7+ / Google Material (?)
Started by paul.cardwell Mar 14 2016 06:53 AM

104 replies to this topic
ios android material flat
[TOPIC CONTROLS]
Page 2 of 5 1 2 3 4 »
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#26

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

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.


[TOPIC: post.html]
#27

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

  • 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


[TOPIC: post.html]
#28

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

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



[TOPIC: post.html]
#29

bramvbilsen

[GLOBAL: userInfoPane.html]
bramvbilsen
  • Contributor

  • 243 posts
  • Corona SDK

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



[TOPIC: post.html]
#30

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

@bramvbilsen : Thank you! :)
 
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.


[TOPIC: post.html]
#31

vadim3

[GLOBAL: userInfoPane.html]
vadim3
  • Observer

  • 1 posts
  • Corona SDK

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.
 


[TOPIC: post.html]
#32

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

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



[TOPIC: post.html]
#33

bramvbilsen

[GLOBAL: userInfoPane.html]
bramvbilsen
  • Contributor

  • 243 posts
  • Corona SDK

Hi Paul,

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

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! :D

Kind regards

Bram



[TOPIC: post.html]
#34

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

@Bram
Yep, working on a layout engine. I wish I had more time to go faster, but I am getting there. ;)
 
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


[TOPIC: post.html]
#35

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

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



[TOPIC: post.html]
#36

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

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.


[TOPIC: post.html]
#37

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

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



[TOPIC: post.html]
#38

bramvbilsen

[GLOBAL: userInfoPane.html]
bramvbilsen
  • Contributor

  • 243 posts
  • Corona SDK

Can't wait to try the slide out menu when I get back home!

[TOPIC: post.html]
#39

Kevin H

[GLOBAL: userInfoPane.html]
Kevin H
  • Contributor

  • 131 posts
  • Corona SDK

I love the way these buttons look, with the animations etc. But I'm not clear how to work with them. How do I reference a button in a scene to, for instance, change it's alpha?



[TOPIC: post.html]
#40

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

Is this before or after the new method for the button?  If after, I am working on a "set/get" property methods which should reach the GitHub repo fairly soon.  Let me know and I will help.

 

I've been working on an "active tiles" widget. The tiles are active in which you can run timer based content or just use icons/text to tap on.  Think like those found on Windows Mobile 8+.



[TOPIC: post.html]
#41

Kevin H

[GLOBAL: userInfoPane.html]
Kevin H
  • Contributor

  • 131 posts
  • Corona SDK

Will be needed after declaring newButton for transitions etc.. Tiles sounds cool!



[TOPIC: post.html]
#42

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

I released just the mui.getWidgetProperty("widget_name", "property") for buttons.  This way you can move forward while I test the rest of the widgets.

 

How it works by example:

    -- I want to change the color of the text
    local widgetData = mui.getWidgetProperty( "switchSceneButton", "text" )
    if widgetData ~= nil then
        widgetData:setFillColor( 1, 1 ,1 ,1 )
    end
    -- I want to change the color of the layer that sits beneath the text
    widgetData = mui.getWidgetProperty( "switchSceneButton", "layer_1" )
    if widgetData ~= nil then
        widgetData:setFillColor( 0.25, 0.75, 1, 1 )
    end

Rectangle buttons support: text, layer_1, object

Rounded Rectangle buttons support: text, layer_1, layer_2 (think z-order, layer_1 is the shadow, layer_2 is the color of the button face), object

Icon buttons support: text (which is the icon from the material-font), object

Circle buttons support: text, layer_1, object

Radio buttons support: text, label (the text next to the icon from the material-font), object
 


[TOPIC: post.html]
#43

Kevin H

[GLOBAL: userInfoPane.html]
Kevin H
  • Contributor

  • 131 posts
  • Corona SDK

Awesome. Support for co ordinate params (transition x) coming eventually?



[TOPIC: post.html]
#44

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

Ok, I added the "object" property so you can move, animate the container, group etc the widget elements reside within.

    -- get widget and change the position of the object
    widgetData = mui.getWidgetProperty( "switchSceneButton", "object" )
    if widgetData ~= nil then
        widgetData.x = 300
    end


[TOPIC: post.html]
#45

Kevin H

[GLOBAL: userInfoPane.html]
Kevin H
  • Contributor

  • 131 posts
  • Corona SDK

Works great! Now I need to read param data in the callback, but event.target is not going me anything...



[TOPIC: post.html]
#46

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

I updated the release to include mui.getWidgetProperty() and mui.getChildWidgetProperty() (for toolbar and slidepanel widgets).  See wiki for project https://github.com/arcadefx/material-ui/wiki on the right side will be pages.  The pages contain sample code and property information.



[TOPIC: post.html]
#47

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

(Kevin H) What param data are you passing?

 

During the create button stage you can specify "callBackData" and it's passed onto the callBack.  To retrieve it, put in the callBack method:

    local muiTargetValue = mui.getEventParameter(event, "muiTargetValue")
    local muiTargetCallBackData = mui.getEventParameter(event, "muiTargetCallBackData")

I included both target value and callback data in the above. Let me know if that's what you were referring to.  Glad you are making progress :) and using the library.



[TOPIC: post.html]
#48

Kevin H

[GLOBAL: userInfoPane.html]
Kevin H
  • Contributor

  • 131 posts
  • Corona SDK

(Kevin H) What param data are you passing?

 

 In the callback I wanted to get, let's say, the name of the target button. Still not sure of format you are suggesting. 

 

   name = "buyThingButton",

   fillColor = { 55/255, 165/255, 239/255 },
   textColor = { 1, 1, 1 },
   callBack = buyIt,
 
When buyIt it called, I'm trying to pass and read the name param "buyThingButton" in buyIt...


[TOPIC: post.html]
#49

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

Ah, ok..

 

callBack - buyIt,

callBackData = {food="cookie"}

 

in method buyIt..

        local muiTargetValue = mui.getEventParameter(event, "muiTargetValue")
        local muiTargetCallBackData = mui.getEventParameter(event, "muiTargetCallBackData")
        print(muiTargetCallBackData.food) -- prints "cookie"

To get the name, if I recall the target widget will have something like event.target.muiOptions and that has ".name" attribute. ..

event.target.muiOptions.name

 

Let me know if that works as I am not near my Mac.



[TOPIC: post.html]
#50

Kevin H

[GLOBAL: userInfoPane.html]
Kevin H
  • Contributor

  • 131 posts
  • Corona SDK

Well, in buyIt(event), print (muiTargetCallBackData.food) errors because muiTargetCallBackData.food is nil, and print (event.target.muiOptions.name) error because muiOptions is nil.  :) 




[topic_controls]
Page 2 of 5 1 2 3 4 »
 
[/topic_controls]