Material UI and the next phase. (feature requests)

Business Apps
#21

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
#22

[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)
#23

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?

#24

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

#25

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

#26

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

#27

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. 

#28

[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().
#29

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

#30

Looks really good, I missed the original blog post so this is a nice surprise.

The only concern for me is that I only use bitmap fonts generally so I’d have to do some playing around to integrate that.

#31

@Paul,

Don’t forget to provide a link in this post for users who haven’t seen your project yet.

https://www.youtube.com/watch?v=c8p3DMA6PzU

https://coronalabs.com/blog/2017/01/18/new-extension-for-corona-apps-material-ui/

https://github.com/arcadefx/material-ui

#32

@roaminggamer, thanks for posting those. :wink:

@nick_sherman, I can look at supporting bitmap fonts.  I think there is an existing library/mod that reads those files in Corona.  I used bitmap fonts in others apps using Marmalade Quick (a while back).

#33

Yeah, I use the fontManager library and bmGlyph to create the fonts.

I don’t over-write display.newText though as I still use it in certain cases, so I’ll have to replace every call your modules make to display.newText.

I wonder if I can copy display.newText to something like display.oldText and then just overwrite display.newText with my bitmap function, as it takes the same arguments.

#34

@paul, there is a bug I found in the code in mui-dialog.lua line 216 :

 if options.buttons["cancelButton"].callBackOkay ~= nil then muiData.widgetDict[options.name]["callBackCancel"] = options.buttons["cancelButton"].callBackCancel

should be replaced by

 if options.buttons["cancelButton"].callBackCancel ~= nil then muiData.widgetDict[options.name]["callBackCancel"] = options.buttons["cancelButton"].callBackCancel

best
Nick

#35

@nick Thanks for reporting it.  I fixed it and updated GitHub.

-Paul

#36

@Paul, your welcome.

I do not know, if this is an interest of you, but I’ve also modify a few things in my local version like blocking all event under the dialog, setting a custom color of the back rectangle as well.

I am also making a few changes to better handle “letterbox” display.

Would you like me to share those changes ?

#37

@nmichaud Sure, I’d like to see your changes and get them into the base.  I always open to suggestions and improvements.  You can submit a PR on GitHub or send them with notes to: services at anedix.com.

#38

@Paul, I will as soon as all my new feature are all added.

Meanwhile, I have found another problem that I would suggest you to fix that I fix in my version.

In mui-button.lua in the event handler M.touchRRectButton (line 301), you do not return anything at the end, which has the unfortunate consequence to propage the event to other active handlers… I would suggest you return TRUE to indicate you have consumed the event and avoid propagation. I would also advise to look at your other event handler methods in the file to fix a similar problem.

regards,
Nick

#39

@Nick, Yes I do need to put the return true in the event handlers.  I didn’t know it was needed until I was reading the forums a little while back and found other developers doing it.  I meant to put it in there, but got side tracked on other things.

I’ve been working on web projects and learning more and more about Corona development on the side.  I appreciate the feedback.

-Paul

#40

[0.1.87] - 2017-03-30

Changes

  • Event handlers updated with “return true” where needed. Prevent event propagation to other controls.
  • Added global debug variable “_mui_debug” and if true will use ‘mui.debug()’ else do not output debugging information.  Define it to true/false in your main.lua at top. It defaults to “false” or debugging off.
  • Added method mui.debug(<string>) to output debug information. See _mui_debug above for more information.

Fixes

  • onboard.lua example arrow button was non-responsive due to missing callback.

-Paul