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

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

You could always vote up this Feature Request too:

http://feedback.coronalabs.com/forums/188732-corona-sdk-feature-requests-feedback/suggestions/9898833-theme

Rob

Well, I didn’t even know that was there.  I voted!! :slight_smile:

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?

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+.

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

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

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

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

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

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.

(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 :slight_smile: and using the library.

 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…

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.

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

Well it’s not suppose to do that :slight_smile: ok can you send me a sample code. I will also write up a sample app and share it here. Send to: services at anedix dot com (email)

I’ll get that over to you this eve. Should also mention that I have this line comments out in mui-base.lua because I’m not using Composer:

 muiData.scene.name = composer.getSceneName(“current”)

Could that have anything to do with it?

No it would be fine without it.

Here is an example using the latest release and I took out composer (it will remain in the official release).  Here is the archive.

----------------------------------------------------------------------------------------- -- -- main.lua -- ----------------------------------------------------------------------------------------- -- Your code here local mui = require( "materialui.mui" ) local background = nil --Hide status bar from the beginning display.setStatusBar( display.HiddenStatusBar ) display.setDefault("background", 1, 1, 1) background = display.newRect( 0, 0, display.contentWidth, display.contentHeight) background.anchorX = 0 background.anchorY = 0 background.x, background.y = 0, 0 background:setFillColor( 1 ) mui.init() -- pass name, value and callback data example local passFood = function( event ) local muiTargetName = mui.getEventParameter(event, "name") local muiTargetValue = mui.getEventParameter(event, "muiTargetValue") local muiTargetCallBackData = mui.getEventParameter(event, "muiTargetCallBackData") if muiTargetName ~= nil then print("name: " .. muiTargetName) end if muiTargetValue ~= nil then print("value: " .. muiTargetValue) end if muiTargetCallBackData ~= nil then print("passed: "..muiTargetCallBackData.food) end end mui.newRoundedRectButton({ name = "PassData", -- name of the mui widget text = "Pass Food", width = mui.getScaleVal(200), height = mui.getScaleVal(60), x = mui.getScaleVal(160), y = mui.getScaleVal(220), font = native.systemFont, gradientShadowColor1 = { 0.9, 0.9, 0.9, 255 }, gradientShadowColor2 = { 0.9, 0.9, 0.9, 0 }, gradientDirection = "up", textColor = { 1, 1, 1 }, radius = 10, value = 100, -- the value to set and pass to event callBack = passFood, -- the callBack to pass the data to callBackData = {food="cookie"} -- data to pass to the event })

Changes in release and a screen shot of the new widget. It resides in a scrollView:

  • Create a tile menu board with method ‘newTileGrid’ and tiles can be up to 2x in size by width only (be careful). See demo tile.lua and it’s the last icon on bottom of first scene.  materialui/mui-tile.lua is the widget addition.
  • Touch Points added to newTileGrid() as an option.
  • Bug fixes and optimizations

tile-menu-1.png