# All About Widgets

Supporting the HP webOS user interface are UI Widgets and a set of standard styles for use with the widgets and within your scenes. Mojo defines default styles for scenes and for each of the widgets. You get the styles simply by declaring and using the widgets, or you can override the styles either collectively or individually with custom CSS.

A widget is declared within your HTML as an empty div with an `x-mojo-element` attribute. Typically, you would declare the widget within a scene's view file, then direct Mojo to instantiate the widget during the corresponding scene assistant setup method using the scene controller's `setupWidget` method. You listen for events associated with the widget to take actions dictated by the user through 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.

## How to Use this Section

All Mojo widgets are included here, along with some UI API functions that act like widgets. The widgets have been grouped into categories for easier review and because many of the widgets within a category share common behavior. You need to read the first page, "Anatomy of a Widget", before reading the pages describing the widgets but otherwise you can read the articles in this section in any order you like, or read them as you want to learn about specific widgets.

Each page is a collection of widget descriptions that include a light definition of the widget's declaration and setup, event handling and styling, along with some helpful tips in using the widget. There is a table that summarizes the widget's properties, relevant events and style names. You will be directly with links to the specific API documentation, sample code and style guide for that widget—it is in that detail documentation that you will get code-level information. This document will be more than high level information but not as detailed as you might need to write code to use the widget.

Topic | Description
--- | ---
Anatomy of a Widget | Defines the basic organization of an application and the function of the configuration file and each of its properties.
Buttons and Selectors | Overview of the Button, CheckBox, ToggleButton, RadioButton, ListSelector, and Slider widgets.
Dialogs and Containers | Covers showDialog, showAlertDialog, and showErrorDialog functions, and Drawer and Scroller widgets.
Indicators | Overview of indicators; describes the Spinner and the ProgressPill, ProgressBar, Progress, and ProgressSlider widgets.
Lists | Overview of the List widget and FilterList.
Media Objects | HTML 5 compliant objects for embedding video and audio.
Menus | Describes Menu functions and handlers, including AppMenu, Command Menu, View Menu, and Submenu.
Pickers | Describes Pickers, including Date, Time, Integer, and the FilePicker application.
Text Fields | TextField, PasswordField, FilterField, and RichTextEdit widgets are described here.
Viewers | Describes Web and Image viewers.