This post was originally published at Tutorial Treasury: Widgets

From the beginning, Corona Labs provided APIs to help build powerful user interfaces, but sometimes it took more effort than developers expected to create basic UI elements. For instance, if you want to create a basic button, one option is to load a couple of graphics for the “pressed” and “un-pressed” states, add a touch or tap handler to the object, and write some code to flip the visual button states while the touch is active. “Viola!”, you’ve created a functional button. However, our mantra is do more with less code, so we introduced the widget library which provides you with convenient methods to create buttons, check boxes, switches, value sliders, and more.

Naturally we wrote the following documentation and tutorials to go along with the widget library:

Widget library documentation

The complete documentation for widgets can be found here. This documentation provides the authoritative details on how to create, use, and visually customize every Corona widget.

Video tutorials

Tutorials

The bundled widgets allow you to create many common UI elements such as buttons, scroll views, and table views, but some apps may require further customization of the “stock” widgets. For this purpose, Corona Labs open sourced the widget library so that you can extend or modify any bundled widget as you see fit.

In addition, it’s possible to create custom widgets with additional features or even add your own widgets under the same name space. For examples of this, please see the following tutorials:

Customizing text input

In this tutorial, learn how to take a native.newTextField() and “skin” it with more visual variety, effectively extending the features of the native object.

Creating a sliding panel

In this tutorial, learn how to create a panel that slides on and off the screen, useful for slide-in menus, inventory displays, and many other UI elements.

Creating a navigation bar

Both iOS and Android use “navigation bars,” and this tutorial shows you how to create your own.

Advanced TableView tactics

In this tutorial, learn how to extend the stock TableView widget with more advanced functionality.

Sample code

Conclusion

Widgets are a great way to quickly create UI elements which mimic similar native widgets in the mobile operating system. And, if you need more functionality, you can change them as needed or even create new widgets of your own.


Jump to original:

This post was originally published at Tutorial Treasury: Widgets