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.