The heart of the Mojo framework is the UI feature set, delivered in a collection of dynamic widgets. Mojo widgets are configured with scene controller methods and custom CSS styles, and are managed through Mojo events, briefly introduced to you in Chapter 1.
Widgets let you build static and dynamic lists or employ various button controls, selectors, and text fields. You can choose from several kinds of menus and dialog boxes, and employ sophisticated pickers and viewers, each of which specialize in handling different types of data. There’s a common model for declaring, instantiating, and managing your widgets, which makes it easy to learn and simple to code for your applications.
A widget is declared within your HTML as an empty div with an
x-mojo-element
attribute
declaring the type of widget to display. Typically, you declare the widget
within a scene’s view file, then configure and set up the widget in the
corresponding scene assistant’s setup method. You listen for events
associated with the widget to take actions dictated by the user through the
widget or to update data associated with the widget. The framework applies
default styles to the widget; you can override those styles in your CSS, but
in many cases the default styles will work perfectly.
In this chapter, we will start with a design overview of Mojo widgets, then walk through some basic widgets: buttons and selectors, lists, and text fields. We’ll use a number of these widgets in the News application; at least one from each category to show you how to apply them in your applications.
52.14.80.90