Material UI and the next phase. (feature requests)

Business Apps
#1

Greetings,

It’s been just over a year for Material UI (mui) library.  The project started off as a personal challenge and has turned into a library.  Documentation was created to somewhat mirror Corona’s SDK documentation.  Changes and updates have been continually applied.  Fellow developers have graciously given code and requested features. 

I’d like to hear what controls, features etc people would like to see.  I have my own personal ‘roadmap’ but would like to hear from the community.

There are currently around 33 (thirty three) user-interface controls: Buttons, Cards, Date and Time, Dialog and Notifications, Image support, Input, Menu and Navigation, On Boarding, Progress Indicators, Table support, Text support and helpers.

I really appreciate the community and their willingness to step in and express a concern or idea.

Here is the documentation information on how to get it, video and api reference (also see roaminggamer’s post below):

http://www.anedix.com/docs/mui/

-Paul

#2

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.

#3

@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

#4

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

#5

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.

#6

@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

#7

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

-Paul

#8

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

#9

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

#10

@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

#11

@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

#12

[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

#13

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.
#14

[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.
#15

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.

#16

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!

#17

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

composer.gotoScene(sceneName, options)
#18

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.

#19

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

#20

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!