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

Changes

[0.1.61] - 2017-01-20

Added

  • ‘iconImage’ parameter to newTileGrid() list options. Allows a tile to use an image (jpg/png) instead of icon font text.
  • ‘fontIsScaled’ parameter to newTileGrid(). Defaults to true.  If true scale the font to fit the width of the tile. If false let the user define the font to any size.
  • ‘fontSize’ parameter to newTileGrid(). Sets the overall font size for icon and text.
  • ‘parent’ parameter to newTileGrid().  If used it will place the newTileGrid widget into the group/parent.

See “iconImage” in use in the pic below (first row, middle tile):

newtilegrid-shot-icon.jpg

Changes

[0.1.63] - 2017-01-24

Added

  • ‘trimFakeTextAt’ parameter to newTextField() and newTextBox() options. Trim the text displayed when not editing to 1…Number and add “…” on end.
  • ‘textFieldFontSize’ parameter to newTextField() options. Sets font size used in text field.
  • ‘textBoxFontSize’ parameter to newTextBox() options. Sets font size used in text box.
  • ‘fontSize’ parameter to both newTextField() and newTextBox() to set the label size.

Fixed

  • Font size of textboxes were really small. Now it sets the font and the size appropriately.

[0.1.66] - 2017-01-27

Added

  • MaterialIcons-Regular.otf font file to support older devices. This is partially implemented but required now for installation.  Be sure to copy it to the same folder where “MaterialIcons-Regular.ttf” resides.
  • ‘isFontIcon’ a boolean for newIconButton, newCircleButton, newToolbarButton, basically where there is an Icon this is needed.  Backwards compatibility included.  Use “isFontIcon” in the options for the methods and if true it will use the codepoint for the Material icon font.

Changes

  • fixed issues with fonts and Material design font.
  • many bug fixes and now supports Android KitKat 4.4.4 - Nougat 7.x. Android Icecream and Jelly Bean should work.  However, anything older than Android 4.x is “not” supported at this time. I need more research for Android versions < 4.

[0.1.68] - 2017-01-28

Added

  • “mui.materialFont” variable. The font is mapped to use “MaterialIcons-Regular.ttf” or “MaterialIcons-Regular.otf” font icons.  The font is automatically assigned to the variable and is  determined by mobile OS compability.  This is optional usage, but can help so there are no ‘hard coded’ fonts to replace.

[0.1.69] - 2017-02-01

Changes

  • removed dependency of utf8 plugin. This may be added back in future versions.  For now it simplifies the installation and not requiring Internet access to build in simulator.  A pure lua utf8 method was put in place to handle the requirements.  Feel free to use the utf8 plugin as the method here will not conflict with it. uft8 plugin is awesome for internationalization.
     
  • “newSlidePanel” now will highlight the last menu item selected. This requires the methods hideSlidePanel() and showSlidePanel(). Use these in your callbacks.
     
  • Fixed some bugs.

[0.1.70] - 2017-02-02

Changes

  • ‘newSlidePanel()’ events fixed. Now the menu stays resident and hides/shows instead of destroying the menu. Menu is destroyed when switching scenes or when removeSlidePanel(“name”) is called.  It will also highlight the current selected item.

[0.1.71] - 2017-02-03

Changes

  • ‘newTableView()’ added support for multiple columns. See menu.lua and options for a row called “columns” which defines the columns (text, value, align).  Each row supports: text, value, font, fontSize, fillColor, isCategory.
  • ‘newTableView()’ see ‘columnOptions’ in options to set the width per column.
  • ‘getTableViewProperty()’ added ‘list’ to be able to access the list table (list = {}) for the rows or rows and columns.
  • ‘onRowTouchDemo()’ added example of pulling column data.
  • ‘onRowTouchDemo()’ added ‘hidden’ example of changing a rows color when clicked.
  • bug fixes

newtableview-multi-column.jpg

[0.1.73] - 2017-02-17

Changes

  • newRoundedRectButton() and newRectButton() can now show an icon from material font or an image (jpg/png) to the left of the button text. See docs, example and list of options includes: iconText, iconFont, iconFontColor, iconImage.
  • Fixed bug in newSlidePanel() not showing when button clicked after click on darkened portion of screen.
  • Fixed “fun.lua” newSlidePanel() example and custom methods to hide/show the menu are optional.
  • Fixed a Lua table no longer used but referenced.
    (Thanks to “The Giant” for reporting the issues)

[0.1.77] - 2017-02-23

Changes

  • newSlidePanel() supports swipe gestures to open and close the menu.
  • newSlidePanel() ‘isVisible’ added to options of slide panel. If present, hide the slide panel and reveal once a button is touched or swipe gestures. See main.lua for demo.

mui-gestures.jpg

Hy!

First of all, THANKS for this great work!

Then, I have made a little modify to your code because I need to work with a newSelect and only on procedure call I can insert the correct list. If I have (like in my case) a DB with the options for the select, how can I insert dynamically? I answer myself making the “list” parameter NOT a list written directly on the call, but I use an array with the same structure (key, text, value, isCategory) created from a procedure that reads a DB table.

local arrayList1 = {} for ii=1, table.maxn(PageArray.MenuChoices) do arrayList1[ii]= {} arrayList1[ii].key = ii arrayList1[ii].text = PageArray.MenuChoices[ii].caption arrayList1[ii].value = PageArray.MenuChoices[ii].caption arrayList1[ii].isCategory = false arrayList1[ii].backgroundColor = {1,1,1,1} end 

On a generic call I use something like:

mui.newSelect({ name = "combo2\_List", labelText = "label1", ... list = -- if 'key' use it for 'id' in the table row arrayList1 , })

After this call, I have to read the correct values that I pass, so I modify mui-select.lua on “function M.newSelect(options)” line 178 :

 muiData.widgetDict[options.name].list = {} muiData.widgetDict[options.name].list = options.list

The last modify is when you open the tableview for the selection on “function M.revealTableViewForSelector(name, options)” line 240

list = muiData.widgetDict[options.name].list

I hope to be useful to otherelse.

Thanks again.

Albert

Hi Albert,  I can make it dynamic and will base it off your requirements.

Hi everyone. I’ve been experimenting with this framework for a new project but the transitions end in blank or malformed scenes in the default project file on iOS 10 (device testin, not SIM). Sometimes it closes the demo app all together. 

Just checking to see if there is an updated version somewhere I can download?

The source github I’ve been using is from: https://github.com/arcadefx/material-ui

@MDB

Just out of curiosity, are you using an iPhone/iPad?  I have access to an iPad Air and will try it out on it.  The testing has mainly been on simulator, Android (Phone, Tablet) but I had others tell me about iOS.  Send me a screen shot or two of what it’s doing: services at anedix.com

Paul, using the iphone 7+ for testing on 10.2. I’d love to send screenshots but the app just dies when I attempt to change scenes. Everything else (other elements) seem to be just fine.

I do have an xcode crash log for you if that helps:

Mar 14 16:53:59 mobiletester locationd[1420] <Info>: WltStep, ScanResultAps, <private>, clients?, <private>, doCalc, <private>, knownAps, <private>

Mar 14 16:53:59 mobiletester ReportCrash(CrashReporterSupport)[2559] <Notice>: cr_update: <private>

Mar 14 16:53:59 mobiletester ReportCrash(CrashReporterSupport)[2559] <Notice>: cr_update: <private>

Mar 14 16:53:59 mobiletester locationd[1420] <Notice>: message ‘kCLConnectionMessageWatchdog’ received from client ‘/System/Library/LocationBundles/MagicalMoments.bundle’

Mar 14 16:53:59 mobiletester ReportCrash[2559] <Notice>: __crash_info: ‘<private>’

Mar 14 16:53:59 mobiletester ReportCrash[2559] <Notice>: __crash_info: ‘(null)’

Mar 14 16:53:59 mobiletester SpringBoard[60] <Notice>: Process exited: <FBApplicationProcess: 0x11700df60; material-ui-mas; pid: -1> -> <FBApplicationProcessExitContext: 0x17645d460; exitReason: (none); terminationReason: (none)>

Mar 14 16:53:59 mobiletester SpringBoard(FrontBoard)[60] <Info>: setting object for key=SBDefaultStatusBarStyleKey bundleID=<private> object=(null)

Mar 14 16:53:59 mobiletester SpringBoard(FrontBoard)[60] <Info>: updating cache key=SBDefaultStatusBarStyleKey bundleID=<private> object=(null)

Mar 14 16:53:59 mobiletester SpringBoard(FrontBoard)[60] <Info>: setting object for key=SBDefaultStatusBarHiddenKey bundleID=<private> object=(null)

Ah, so the issue is when you change the scene it dies.  I think I might know the issue. What happens if you by-pass “mui” scene switch and use a button and a custom method to …

composer.removeScene(<scene name>)

composer.gotoScene(<scene name>)

Does it still immediately fail?

I have an iPhone 6 and upgraded to 10.2.1 (not a 7 series, but  :slight_smile: ).   I went through the Developer set up for a new App which was awesome documentation (thanks Coronalabs!).  It compiled and installed.

Running the App and going to different scenes worked without issue. I did find a bug which I just fixed in the date and time picker controls.  The bug was causing the App to die.   I used https://github.com/arcadefx/material-ui and built the App using it and Corona SDK build 2017.3056.

@MDB, could you confirm you have the latest release?  Also note there have been a number of changes in how things work recently.

-Paul

Paul, yes - Corona build 3056, compiled to device, and changing scenes causes app failure to home screen on iOS 10.2 / iphone 7 plus.

I did find some Corona logs that might help, this shows up about 70 times just before the app dies.

Device] CoreAnimation: failed to allocate 6291488 bytes

What changes in the way things work, are you referring to? I have both the latest Corona build, and copy of the Materials UI framework for Corona.

Thanks,

@MDB, that’s weird. I will go review the scene switching and refactor it.

[0.1.80] - 2017-03-16

Changes

  • getOrientation() gets the current orientation as locked. mui only supports Portrait or Landscape. It cannot be both at this time.

  • setSceneToSwitchToAfterDestroy([name]) to override what scene to go to after mui.destroy() executes.

  • ‘sceneTransitionAnimation’ parameter for scene transitions. Is boolean and if “true” (default) it will animate before going to next scene.  If “false” it will not animate and go to next scene immediately.  See menu.lua for an example.

  • muiData.parent variable is replaced with mui.getParent() method. muiData.parent is still supported but will be deprecated in the future.

Fixes

  • Fixed getScaleVal() and orientation issues. This was causing issues on device and in emulator. Issues like crashing since the device could be rotated, flipped etc messing up the calculations. Again use a locked position for now in “mui” and go with Portrait or Landscape. These in any “portait” or “landscape” orientation, but not both “portrait” and “landscape”

  • Using a new animation for switching between scenes. It’s smoother.

  • Re-did the order of mui.destroy() and now it will cancel all “transitions” before proceeding to destroy.

Hy again!

I hope on a future release with my modify :slight_smile:

Can I suggest you to put on mui.lua an initial comment with the version? It can be useful.

I find two things to fix: First is the multiline textbox. If the lines are too much to display, they are not cutted, but they fullfill the entire space.

listerror.png

The second fix is on the combobox style. On the right of the textfield always appears a “keyboard_arrow_down”?

It happens only to me?

menukeyarrowdown.png

Thanks for all you incredible work!

Albert

P.S. : I’m working on a Win7 64bit & CoronaSDK 2017.3044(2017.2.23)