Has any third party created a set of predefined widgets for Corona that reproduce the UI controls available in Xcode for iOS apps?
Corona SDK is based around OpenGL and most native type widgets cannot exist mixed in with OpenGL. They sit on top of the OpenGL canvas (and on Window’s they can’t be mixed at all). We implemented our widgets to act like native widgets, but within the OpenGL world so they can interact with the rest of your app.
Rob
“most native type widgets cannot exist mixed in with OpenGL”
That’s not really what I meant!
Following the two links below, you can find a list of iOS UI controls:
My understanding was that each one of these iOS UI controls could be mapped to a Corona UI widget (not sure this is correct!) provided that the appropriate parameters were passed.
If I’m not mistaken, each widget has a series of parameters (or properties).
Again, my understanding was that a specific set of parameters for, say, a button would produce the same button that you would find when building a UI with Xcode.
I’m asking this question because I’m concerned about having some UI consistency across iOS (/Android) apps.
I think widget themes holds the answer to what I had in mind!
Just read about the existence of a widget_theme_iOS7, but I haven’t found a link showing what the widgets for this theme look like!
Okay, let me start by going through the “Transition Guide” you posted:
iOS Control – Corona Equiv
Date Picker – widget.newPickerWheel
Contact Add Button – You would need to build yourself
Detail disclosure button – You would need to build yourself
Info Button – You would need to build yourself. (all are just a graphic with a touch handler)
Label – display.newText using a font “HelveticaNeue-Light” for normal text, “HelveticaNeue” for bold for iOS 7, “Helvetica” and “Helvetica-Bold” for iOS6 and earlier, Droid Sans and Droid Sans Bold for Android.
Page Control – you would need to build yourself
Picker – widget.newPickerWheel
Progress View – widget.newProgressView
Refresh Control – have to build your own
Rounded Rectangle Button – widget.newButton
Segmented Control – widget.newSegementedControl
Slider – widget.newSlider
Stepper – widget.newStepper
Switch – widget.newSwitch
Text Field – native.newTextField, but it’s pretty much just a rectangle. You would have to do some work to get it close. This is a native object and sits above all other OpenGL code.
Status Bar – handled by Corona’s display.setStatusBar()
Navigation Bar – Have to build your own.
Search Bar – Have to build your own using native.newTextField.
Scope Bar – probably could be done with a widget.newSegementedControl
Tab Bar – widget.newTabBar – but you basically have to provide all the graphics for it.
Tool Bar – You would need to build your own.
Bar Buttons – for iOS 7 you can use widget.newButton for the text ones, or touch graphics for everything else.
With our widgets, you get the iOS 7 theme by default on iOS. You would need to explicitly set the older theme using:
widget.setTheme( “widget_theme_ios” )
if you want that. The theme will default to a more Android look on Android. Our widgets are open source and you can get the code (including the theme files) from our Github repository:
https://github.com/coronalabs/framework-widget (Graphics 2.0)
https://github.com/coronalabs/framework-widgets-legacy (Graphics 1.0)
If you want the app to look the same across all platforms then you can pick one of the themes and just use it everywhere, or you can create your own theme file using TexturePacker (look at the code to see how the theme file is constructed)
Rob
Thank you for your detailed answer, Rob.
- Are there any plans to create Corona equivalents for the following iOS controls:
Contact Add Button – Have to build yourself
Detail disclosure button – Have to build yourself
Info Button – Have to build yourself (all are just a graphic with a touch handler)
Page Control – Have to build yourself (dynamic control depends on number of pages)
Refresh Control – have to build your own
Navigation Bar – Have to build your own
Tool Bar – Have to build your own
I’m guessing that by “touch graphics” you mean using display.newImageRect() for an Image Sheet containing the images for the 4 states of the mouse cursor: off, over, click and clicked, with each state corresponding to a different frame index.
How do you set up an event handler for the above?
- Are there any code examples showing how to use each widget, i.e. Corona equivalent?
- Is there a Corona IDE where one can drag and drop widgets to build the UI and easily add the code for the event handlers?
Olivier, first 3 (contact add, detail & info buttons) can be done simply by using the existing widget.newButton with the graphics for the buttons grabbed from your favorite IOS device.
See widgetdemo under corona samples/interface for code example for each widget.
Hope this helps.
Kerem is right about the three buttons. You can build those using widget.newButton, but you have to use graphics to do so.
As far as the others, we would need to know how important they are, so the best thing is to request them at http://feedback.coronalabs.com. Now that said:
Refresh Control: There is probably already a feedback item for that, it’s a pretty popular request and I know I would love to have it myself. I ended up building one for a client, though the code wasn’t very portable (too many UI bits in the way to fit into the design), but all the features are there to support it event wise. So def. spend some of your votes on it.
Navigation Bar: This is a rectangle (image or vector), a display.newText, and a couple of button. That’s pretty easy to do on your own and I think we have more important things to work on. I doubt this will get a high priority.
Tool Bar: LIke the nav bar, this is just a rectangle and some buttons. With an library of icon graphics, you can code this up on your own pretty quickly.
Touch displays don’t have over and off states. Our widget.newButton() depending on how you choose to build it, supports the idea of a pressed and unpressed state and lets you define a function to execute when the button is pressed, released, or just triggered.
As far as building these, they are all documented here, with samples:
http://docs.coronalabs.com/api/library/widget/index.html
There is also several sample projects in your SampleCode/Interface/ folder like “WidgetDemo” that has working code for all of the widgets. We also put together a “Business Sample App” that implements many of these controls on our github site:
https://github.com/coronalabs/business-app-sample
Github seems to be having issues at the moment, but when you can get to it, you can look at it. We do not have an IDE available for this.
Rob
Also take a look at Widget Candy from X-Pressive. http://www.x-pressive.com/WidgetCandy_Corona/
This is an excellent 3rd party library written to run on Corona SDK. You might be able to use their tab bar to support your Nav Bar / Tool Bar needs in addition to the great ideas provided by Rob.
Thank you both. Am going to be busy now!
Corona SDK is based around OpenGL and most native type widgets cannot exist mixed in with OpenGL. They sit on top of the OpenGL canvas (and on Window’s they can’t be mixed at all). We implemented our widgets to act like native widgets, but within the OpenGL world so they can interact with the rest of your app.
Rob
“most native type widgets cannot exist mixed in with OpenGL”
That’s not really what I meant!
Following the two links below, you can find a list of iOS UI controls:
My understanding was that each one of these iOS UI controls could be mapped to a Corona UI widget (not sure this is correct!) provided that the appropriate parameters were passed.
If I’m not mistaken, each widget has a series of parameters (or properties).
Again, my understanding was that a specific set of parameters for, say, a button would produce the same button that you would find when building a UI with Xcode.
I’m asking this question because I’m concerned about having some UI consistency across iOS (/Android) apps.
I think widget themes holds the answer to what I had in mind!
Just read about the existence of a widget_theme_iOS7, but I haven’t found a link showing what the widgets for this theme look like!
Okay, let me start by going through the “Transition Guide” you posted:
iOS Control – Corona Equiv
Date Picker – widget.newPickerWheel
Contact Add Button – You would need to build yourself
Detail disclosure button – You would need to build yourself
Info Button – You would need to build yourself. (all are just a graphic with a touch handler)
Label – display.newText using a font “HelveticaNeue-Light” for normal text, “HelveticaNeue” for bold for iOS 7, “Helvetica” and “Helvetica-Bold” for iOS6 and earlier, Droid Sans and Droid Sans Bold for Android.
Page Control – you would need to build yourself
Picker – widget.newPickerWheel
Progress View – widget.newProgressView
Refresh Control – have to build your own
Rounded Rectangle Button – widget.newButton
Segmented Control – widget.newSegementedControl
Slider – widget.newSlider
Stepper – widget.newStepper
Switch – widget.newSwitch
Text Field – native.newTextField, but it’s pretty much just a rectangle. You would have to do some work to get it close. This is a native object and sits above all other OpenGL code.
Status Bar – handled by Corona’s display.setStatusBar()
Navigation Bar – Have to build your own.
Search Bar – Have to build your own using native.newTextField.
Scope Bar – probably could be done with a widget.newSegementedControl
Tab Bar – widget.newTabBar – but you basically have to provide all the graphics for it.
Tool Bar – You would need to build your own.
Bar Buttons – for iOS 7 you can use widget.newButton for the text ones, or touch graphics for everything else.
With our widgets, you get the iOS 7 theme by default on iOS. You would need to explicitly set the older theme using:
widget.setTheme( “widget_theme_ios” )
if you want that. The theme will default to a more Android look on Android. Our widgets are open source and you can get the code (including the theme files) from our Github repository:
https://github.com/coronalabs/framework-widget (Graphics 2.0)
https://github.com/coronalabs/framework-widgets-legacy (Graphics 1.0)
If you want the app to look the same across all platforms then you can pick one of the themes and just use it everywhere, or you can create your own theme file using TexturePacker (look at the code to see how the theme file is constructed)
Rob
Thank you for your detailed answer, Rob.
- Are there any plans to create Corona equivalents for the following iOS controls:
Contact Add Button – Have to build yourself
Detail disclosure button – Have to build yourself
Info Button – Have to build yourself (all are just a graphic with a touch handler)
Page Control – Have to build yourself (dynamic control depends on number of pages)
Refresh Control – have to build your own
Navigation Bar – Have to build your own
Tool Bar – Have to build your own
I’m guessing that by “touch graphics” you mean using display.newImageRect() for an Image Sheet containing the images for the 4 states of the mouse cursor: off, over, click and clicked, with each state corresponding to a different frame index.
How do you set up an event handler for the above?
- Are there any code examples showing how to use each widget, i.e. Corona equivalent?
- Is there a Corona IDE where one can drag and drop widgets to build the UI and easily add the code for the event handlers?
Olivier, first 3 (contact add, detail & info buttons) can be done simply by using the existing widget.newButton with the graphics for the buttons grabbed from your favorite IOS device.
See widgetdemo under corona samples/interface for code example for each widget.
Hope this helps.
Kerem is right about the three buttons. You can build those using widget.newButton, but you have to use graphics to do so.
As far as the others, we would need to know how important they are, so the best thing is to request them at http://feedback.coronalabs.com. Now that said:
Refresh Control: There is probably already a feedback item for that, it’s a pretty popular request and I know I would love to have it myself. I ended up building one for a client, though the code wasn’t very portable (too many UI bits in the way to fit into the design), but all the features are there to support it event wise. So def. spend some of your votes on it.
Navigation Bar: This is a rectangle (image or vector), a display.newText, and a couple of button. That’s pretty easy to do on your own and I think we have more important things to work on. I doubt this will get a high priority.
Tool Bar: LIke the nav bar, this is just a rectangle and some buttons. With an library of icon graphics, you can code this up on your own pretty quickly.
Touch displays don’t have over and off states. Our widget.newButton() depending on how you choose to build it, supports the idea of a pressed and unpressed state and lets you define a function to execute when the button is pressed, released, or just triggered.
As far as building these, they are all documented here, with samples:
http://docs.coronalabs.com/api/library/widget/index.html
There is also several sample projects in your SampleCode/Interface/ folder like “WidgetDemo” that has working code for all of the widgets. We also put together a “Business Sample App” that implements many of these controls on our github site:
https://github.com/coronalabs/business-app-sample
Github seems to be having issues at the moment, but when you can get to it, you can look at it. We do not have an IDE available for this.
Rob
Also take a look at Widget Candy from X-Pressive. http://www.x-pressive.com/WidgetCandy_Corona/
This is an excellent 3rd party library written to run on Corona SDK. You might be able to use their tab bar to support your Nav Bar / Tool Bar needs in addition to the great ideas provided by Rob.
Thank you both. Am going to be busy now!