Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Material UI and the next phase. (feature requests)
Started by paul.cardwell Mar 20 2017 02:42 AM

28 replies to this topic
[TOPIC CONTROLS]
Page 1 of 2 1 2
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

paul.cardwell

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

  • 153 posts
  • Corona SDK

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


Edited by paul.cardwell, 20 March 2017 - 09:36 AM.


[TOPIC: post.html]
#2

nick_sherman

[GLOBAL: userInfoPane.html]
nick_sherman
  • Corona Geek

  • 1,780 posts
  • Corona SDK

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.



[TOPIC: post.html]
#3

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,562 posts
  • Corona SDK

@Paul,

 

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

 

 

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

 

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



[TOPIC: post.html]
#4

paul.cardwell

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

  • 153 posts
  • Corona SDK

@roaminggamer, thanks for posting those. ;)

 

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



[TOPIC: post.html]
#5

nick_sherman

[GLOBAL: userInfoPane.html]
nick_sherman
  • Corona Geek

  • 1,780 posts
  • Corona SDK

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.



[TOPIC: post.html]
#6

nmichaud

[GLOBAL: userInfoPane.html]
nmichaud
  • Contributor

  • 492 posts
  • Corona SDK

@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



[TOPIC: post.html]
#7

paul.cardwell

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

  • 153 posts
  • Corona SDK

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

 

-Paul



[TOPIC: post.html]
#8

nmichaud

[GLOBAL: userInfoPane.html]
nmichaud
  • Contributor

  • 492 posts
  • Corona SDK

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



[TOPIC: post.html]
#9

paul.cardwell

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

  • 153 posts
  • Corona SDK

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



[TOPIC: post.html]
#10

nmichaud

[GLOBAL: userInfoPane.html]
nmichaud
  • Contributor

  • 492 posts
  • Corona SDK

@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



[TOPIC: post.html]
#11

paul.cardwell

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

  • 153 posts
  • Corona SDK

@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



[TOPIC: post.html]
#12

paul.cardwell

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

  • 153 posts
  • Corona SDK

[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


[TOPIC: post.html]
#13

paul.cardwell

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

  • 153 posts
  • Corona SDK

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.


[TOPIC: post.html]
#14

paul.cardwell

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

  • 153 posts
  • Corona SDK

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


[TOPIC: post.html]
#15

david.lark

[GLOBAL: userInfoPane.html]
david.lark
  • Observer

  • 1 posts
  • Corona SDK

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


[TOPIC: post.html]
#16

eduven

[GLOBAL: userInfoPane.html]
eduven
  • Observer

  • 14 posts
  • Corona SDK

Hey Paul,
 
Is this assert here correct? 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!



[TOPIC: post.html]
#17

eduven

[GLOBAL: userInfoPane.html]
eduven
  • Observer

  • 14 posts
  • Corona SDK

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

composer.gotoScene(sceneName, options)


[TOPIC: post.html]
#18

paul.cardwell

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

  • 153 posts
  • Corona SDK

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.



[TOPIC: post.html]
#19

paul.cardwell

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

  • 153 posts
  • Corona SDK

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



[TOPIC: post.html]
#20

eduven

[GLOBAL: userInfoPane.html]
eduven
  • Observer

  • 14 posts
  • Corona SDK

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!



[TOPIC: post.html]
#21

eduven

[GLOBAL: userInfoPane.html]
eduven
  • Observer

  • 14 posts
  • Corona SDK

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


[TOPIC: post.html]
#22

paul.cardwell

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

  • 153 posts
  • Corona SDK

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

Edited by paul.cardwell, 05 June 2017 - 12:15 PM.


[TOPIC: post.html]
#23

eduven

[GLOBAL: userInfoPane.html]
eduven
  • Observer

  • 14 posts
  • Corona SDK

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?



[TOPIC: post.html]
#24

paul.cardwell

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

  • 153 posts
  • Corona SDK

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

[TOPIC: post.html]
#25

john.armstrong

[GLOBAL: userInfoPane.html]
john.armstrong
  • Contributor

  • 132 posts
  • Corona SDK

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




[topic_controls]
Page 1 of 2 1 2
 
[/topic_controls]