Tutorial: New Widgets, Part 2

Share on Facebook0Share on Google+5Tweet about this on TwitterShare on LinkedIn0

NOTE: This tutorial is outdated. Please refer to the widget documentation.

Share on Facebook0Share on Google+5Tweet about this on TwitterShare on LinkedIn0

Brent Sorrentino serves as a full-time Developer Evangelist for Corona Labs, assisting developers in the forums, maintaining documentation/guides, and creating samples which highlight core features of Corona SDK.

This entry has 40 replies

  1. IcySpark says:

    For the new button widget is it not possible to now set the defaultColor and overColor of the button itself without resorting to using images?

    You have it for the labels, why not the buttons too?

    • danny says:

      Not at the present time. The new widgets aren’t using vector objects (ie newRect etc).

    • Hankichul says:

      actually, i just want to know how can i get the icon of the widget button, The button icon… and sample code to add the button.

  2. Jorge Tapia says:

    Is there any way to customize the appearance and actually “theme” this widgets as you can do with native controls? I need to develop a game that relys heavily on widgets but they need to be fully customizable and I also need the Physics capabilities. Is Corona recommended for this?

    • danny says:

      You certainly can. A theming guide is going to be released this week.

      • Nate says:

        Will widgets be scalable and retina aware, particularly the picker wheel, with custom themes? It appears the picker only works at 320×480 right now and that’s not very useful.

        • danny says:

          The picker wheel currently supports standard and retina displays. Have you tried it on the iPhone 4 simultor skin?

          • Nate says:

            I set my dimensions to 640×960 in config.lua and then it always comes out 1/4 the size. Is there a way to fix this?

          • danny says:


            I see what you mean. Generally I have been testing on the lowest resolution setting in my config.lua file (480×320).

            I will see what I can do.

      • Jorge Tapia says:

        Yeah, that guide should be very helpful. Thanks and let us know when it’s available.

  3. Hector says:

    I followed this tutorial, and I successfully tried all the widgets with the exception of the one for the tabBar. I get an error related to a newImageRect:

    “ERROR: bad argument #2 to display.newImageRect(): filename or image sheet expected, but got nil.”

    • danny says:

      Hey Hector.

      The tab bar is currently missing a default theme. This will be rectified today.

      • Hector says:

        Excellent, thanks

        Do you know how can I switch between iOS and Android themes?

        • danny says:

          The widget library does this automatically based on device, however you can also override it.

          IOS theme:

          widget.setTheme( “widget_theme_ios” )

          Android theme:

          widget.setTheme( “widget_theme_android” )

          • Hector says:

            Great stuff!, So cool that theme changes automagically depending on the device

      • Hector says:

        Hi Danny,

        Today I did another try to the tabBar widget sample, and now I get a different error (Build 2013.1040)

        “ERROR: widget.newTabBar: tab button default file expected, got nil”

        Do you know of the default theme was included in this build?

        Thanks in advance

        • Simon says:

          I too have experienced both of these errors while setting up a simple tabBar (2.0) and while updating apps using the older version. Would love some more guidance. Does the tab Bar now require a default image?

          Hector, have you found the solution to your error yet? thanks in advance.

          • Don says:


            I am running into the same issue:
            ERROR: widget.newTabBar: tab button default file expected, got nil

            Did you gets find a solution/reason why we are seeing this?

            Greatly appreciate your input.

  4. Jack01 says:

    The new scroll view seems pretty worthless for me.
    It has suddenly a required fixed scrollHeight. ScrollView is meant for simple static content only?

    For example when using the scroll view for a chat. So after a couple of messages, users can no longer scroll back.

    Further the scrollHeight is oriented from top growing to the bottom only, while in for example a chat like iMessage the scroll should be oriented from bottom growing to top.

    I hope this gets fixed soon. Thx

    • danny says:

      The fixed height issue is going to be addressed asap.

  5. Jack01 says:

    Thx Danny,

    I hope growth orientation (up or down) will also be an option then, shouldnt be to hard to implement.

    • danny says:


      Can you specify what you mean by “Growth orientation” ?
      I’m presuming you mean that the scrollHeight will extend with added content?

      • Jack01 says:

        Indeed the direction of the extension of a auto growing scrollHeight.

      • Jack01 says:

        Compare for example the scrollviews on the iPhone of the Messages app with Safari.

  6. WarrenW says:

    Do you still have the checkbox and radio buttons available? Or were those removed? I really need to use those also. I have a problem using them in a scrollView and was told this owuld be fixed with widgets 2.0.


    • Brent Sorrentino says:

      Hi Warren,
      The switch widgets (checkbox, radio button, switch) are definitely still available. Please refer the the “New Widgets: Part 1” tutorial, linked from this tutorial.

  7. Darshit Vora says:

    What about native type textfield that can be used in the scrollview also……? Can anyone tell me solution for the same…?

  8. Ilya says:

    1. earlier widget.newButton () is a property of ‘style’ now it’s gone?
    2. 2012.971 in the assembly was a mistake – if you add widget.newPickerWheel () in widget.newScrollView () to scroll to its maximum value. This is fixed in the new version of widget?


  9. Craig says:

    with the tabBar:setSelected, the second parm (simulatepressevent boolean) appears to not be working. Is this a bug or is this parm no longer available ? Thanks

  10. Claes says:

    The documentation says that label is optional on the tab bar buttons but if you don’t specify a label you get a runtime error on newText. Does not make any sense if it’s optional.
    I want to use an image based tab bar only without spacing at the bottom for labels. Images should be centered vertically.

    I also think that if you can specify an id on each button, why can’t you read that id in the function specified in onPress?

  11. Dave says:

    Why is it that when I add buttons to the tab bar, the buttons are not added flush to the left edge of the screen? The tab bar centers the buttons, then stacks the next button about 2/3 the way on top of the previous button.

  12. Dale says:

    The newSlider widget seems to not work with what I wanted my sliders to look like. With the old sliders, I was able to make them 50 px tall and 150 px wide, so I could update the value indicator text inside the slider area and not have to waste space having it on the outside. I also had special looking handles to follow the theme of my app.

    Now it looks like the slider frame is limited to a certain height, like 16px? And the handle is pegged to a certain width? Probably I’m just not doing my image sheet correctly. Is it possible to have sliders with a height different from some standard height, and handles of different widths from some standard width?

    • Treb Stewart says:

      Hey Dale,

      I’ve spent the last few hours updating to the new slider, and my limited experience would say to check and make sure you’ve specified handleFrameHeight and handleHeightWidth in your widget,newScrollView call, I’m using a 24×34 handle and it’s working fine for me.

      Also if the frames were setup incorrectly then it could also likely cause that problem. If you use SpriteSheetPacker then it outputs a handy text file that you can check the values against.


  13. Steve Taylor says:

    First off, great job in getting the new widgets out. Over a long long weekend I got everything ported (for me: buttons, sliders, check/radio, and tableview). My challenge is I need to the “row.reRender” when tableView widget. My use case is upon touch I change the image I shown (essentially alternate between On/Off images). Any thoughts would be greatly appreciated.

  14. Steve Taylor says:

    I apologize for the hideous grammar. Try 2:
    My challenge is that I need to utilize “row.reRender” which was available in the 1.0 tableView Widget library. My use case is upon touch, I change the image shown (essentially alternate between On/Off images for a given row). I thought about deleting all rows and re-adding them back in but this doesn’t seem so bright. Any thoughts on how to do this would be greatly appreciated.

    Here is the Widget 1.0 documentation: http://docs.coronalabs.com/api/library/widget/newTableView.html

  15. Irina König says:

    Is the segmentedControl really working? I have the latest daily build (1076) and I have used exactly the example you gave, but it looks strange. I am just able to select s1. If I tap s2 or s3, nothing happens, like they would be inactive.

  16. Chris Noeth says:

    For customizing the rotation speed of a spinner the optional “time” setting seems not to work. I’ve used “incrementEvery = 80” instead to control the spinning speed (here it will rotate every 80 milliseconds). I think “time” is used for controlling image sheet animations. More information about this can be found here: http://www.coronalabs.com/blog/2013/07/16/tutorial-stylizing-widgets-part-1/

    Please note: I couldn’t find this information in the api… is it an actual version or did I miss something here?

  17. Jacques says:

    does the id for newSlider widget work? Even if i don’t put a value to the id in the widget options the event.id always returns nil. But the event.value returns the correct value.

    • Brent says:

      Hi Jacques,
      Which build of Corona are you using? I just tested with #2100, and the id property is working as expected.