Material UI and the next phase. (feature requests)

Business Apps
#41

Here are changes that have been made lately:

[0.1.92] - 2017-04-13

Changes

  • newSelect() displays correctly now using a scrollView. It resides within the scrollView. The drop down shows below or just above the select input area depending on visible scroll area.
     
  • newSlidePanel() demo updated on menu.lua.  It demos a custom callback to avoid the default animation when scene switching. It demos using the animated switching.

[0.1.90] - 2017-04-12

Changes

  • Copying the font files to your project’s main directory is no longer required. It now uses the “icon-font” directory.
     
  • mui.init(module_list, options) has been changed. You No longer need to pre-append “materialui.” to each module. Just name them like “mui-button” for example.

[0.1.88] - 2017-04-04

Changes

  • Event handler added to method newRadioButton() “label” text.  This allows the user to touch/click on the radio button or the label text.
#42

[0.1.93] - 2017-04-23

Fixes

  • newSlidePanel() - Slide panel would not always slide out fully due to touch over barrier.
  • newSlidePanel() - Sliding in/out with touch has been improved.
#43

material design branded is that it has a set of well-defined guidelines and principles every self-respectful mobile designer has to stick to (however, Google isnt after them to do things right the way they are in the instruction). The reason why Google introduced its[material design](https://material.google.com/? hstc=170294911.482e6c3a5b219146dcd072108234938a.1484057167193.1485505796142.1485596758862.25& hssc=170294911.11.1485596758862&__hsfp=1238057761)seems rather obvious: the need to make things look same on numerous Android devices. But what is the main idea of material design? Lets find out

Being functional to some extent, flat design is still thought to be a less intuitive type of design, though. The truth is, the excessive flatness of the objects on the screen can get users all mixed up (especially, if it comes to those of us who are not used to web or mobile interfaces). As I said earlier, clickable elements could be easily confused with non-clickable icons and texts, which may result in a much poorer user experience. So material design tries to introduce some skeuomorphism back nevertheless, it does it in the most simplified fashion possible. It can look really flat (especially, when it comes to colors), but stays multidimensional thanks to the Z-axis approach which is always taken into consideration.

#44

Hey Paul,
 
Is this assert herecorrect? I’m trying to add a toast and I’m getting an assertion failed error when it tries to fade away.

Also… Drop down lists don’t respond to touches/clicks correctly.

Not sure if this is the best place to report bugs… sorry if not!

#45

What’s the mui-way to pass data to a new scene?  

composer.gotoScene(sceneName, options)
#46

There are several ways, but you can do…

-- put at top of scene files you want to share data local muiData = require( "materialui.mui-data" ) -- to pass stuff to another scene just do muiData.userData = {} muiData.userData["some\_stuff"] = "I want to be passed to any scene"

In the next scene do…

-- put at top of scene files you want to share data local muiData = require( "materialui.mui-data" ) -- to get stuff from another scene just do if muiData.userData ~= nil then print("some\_stuff"..muiData.userData["some\_stuff"]) end

Let me know if you have issues.

#47

@eduven I fixed the bug in the asserts for newToast() method.  Thanks for reporting it.

#48

Thanks for fixing it! Worked like a charm.

Some thoughts about this plugin after a few days using it. Some of these may be my lack of understanding of the plugin itself, lua, corona, or all of them.

  • The widgets need more getters and setters. After a widget is created is hard to change its properties. A couple of use cases:
    • I needed to change the color or a button under certain conditions. I ended up removing it and creating it again.
    • I need to get the current selected button in a toolbar. Still dealing with it (getWidgetProperty, getWidgetByName, etc, don’t seem to work. Getting nil). My situation: I’ve a global event listener for the hard back button and a global FSM for every button in the toolbar. If the toolbar is in the first state of the current tab, I’ll call requestExist(), otherwise, I’ll load the previous scene for the current selected’ toolbar button. Does it make sense?
  • Widgets need a way to get enabled/disabled programatically. My workaround: Removed the shadow and decreased the widget’s opacity. Still trying to figure out how to make them visually unresponsive to touches and other events (programatically bypassing events when widget is “disabled” was easy but not ideal.)
  • Changing a widget’s alpha setting should also change its shadow’s alpha setting.
  • Damn… Can’t remember what wall I hit when trying to use the Radio buttons and sliders… Sorry! I ended up using the Corona’s newSwitch() and newSlider() I think it has something to do with the lack of options to dynamically change them after they were created (or my lack of knowledge about how to do that.)

I think that’s all for now!

#49

FWIW, this is what I’m using to fake an enabled/disable state:

local function changeButton(btn, new\_options) local options = mui.getWidgetProperty(btn, "layer\_1").muiOptions if (new\_options ~= nil) then options = tableMerge(options, new\_options) end -- faking a "disabled" state local fillColor = options.fillColor local textColor = options.textColor -- "enabled" is a custom property I set on newRectButton() if (options.enabled ~= nil and options.enabled == false) then fillColor[4] = 0.2 textColor[4] = 0.2 else fillColor[4] = 1 textColor[4] = 1 end options.useShadow = options.enabled == nil or options.enabled options.fillColor = fillColor options.textColor = textColor mui.removeWidgetByName(btn) mui.newRectButton(options) end local function isButtonEnabled(btn) local btn = mui.getWidgetProperty(btn, "layer\_1") return btn.muiOptions.enabled ~= nil and btn.muiOptions.enabled end local function onHistoryEmpty() changeButton("btnUndo", {enabled = false}) end local function onNewHistoryItem() if isButtonEnabled("btnUndo") then return end changeButton("btnUndo", {enabled = true}) end local function onActionUndo() if not isButtonEnabled("btnUndo") then return end engine.call(engine.ACTIONS.undo) end
#50

[0.1.96] - 2017-05-05

Fixes

  • newTableView() - Tapping repeatedly did not register an event. This is fixed now. Which was an issue on all devices and simulator.  Affected dropdown menus and other places “tables” were utilized.
  • Correctly setting the buttons’ size on newDialog (thanks to @eduven)
  • Adding custom fontSize property to newRectButton (thanks to @eduven)
#51

Paul,

Is there a way for widgets created with newSelect() that, once you click on an option, to show its text property instead of its value?

#52

Yah, I made a change so it defaults to showing “text” instead of value. Pull down latest.

#53

Any tips or pointers on how to implement a “Next” return key on the text input field? Possible feature request.

#54

@john.armstrong …

Yep, I agree.  I will see what can be done.  I thinking of a “tabindex” attribute to the controls. This way developers can control the order of what control is in focus next. A “useindex” option would also be created for overall settings.  The default “tabindex” will be the order in which the controls were created and “tabindex” would be used to change the order.

#55

I’ve tried to edit the mui-textinput file and add another option to the textfield object with

muiData.widgetDict[options.name]["textfield"].nextFocus = options.nextFocus

and added an option to set the return key

   

 if options.returnKey ~= nil then       muiData.widgetDict[options.name]["textfield"]:setReturnKey(options.returnKey)     end

and so the textfield looks like

mui.newTextField({       --  parent = mui.getParent(),         name = "k",         nextFocus = "cl",         labelText = "K",         placeholder = "0",         text = "",         font = "monaco",         width = mui.getScaleVal(500),         height = mui.getScaleVal(46),         x = mui.getScaleVal(290),         y = mui.getScaleVal(170),         activeColor = { 1, 0, 0, 1 },         inactiveColor = { 0.5, 0.5, 0.5, 1 },         returnKey = "next",         callBack = onTextInput,         scrollView = scrollView     })

then on the “submitted” phase I call 

local obj = mui.getTextFieldProperty(event.target.nextFocus, "layer\_2")              timer.performWithDelay(300, function() native.setKeyboardFocus(obj) end, 1)

And it “kind-of” works, but the problem is that the text field does not highlight or show the text being updated. You have to touch it to activate the input. 

#56

[0.1.98] - 2017-07-21

Changes

  • newTableView() - Added internal method attachBackgroundToRow(…). The newTableView() options has an attribute list. In the list you can specify ‘backgroundImage’ for the image to use for the row’s background.  Each row has to be set and if not it will use the normal color scheme.
     
  • Demo found here: http://www.anedix.com/fileshare/checklist.zip and see checklist.lua for implementation.  Important is the newTableView() call with ‘backgroundImage’ added to the ‘list’ options.  Also the renderCallback for handling putting buttons in the row - see rowRenderButtons().
#57

@john.armstrong, I will be working on the solution.  The native.[widgets] are there, but MUI shows ‘fake’ fields for them when not active.