ControlBar
Description
A ControlBar is similar to the toolbars that you see in your desktop applications. For example, all of the builders (e.g. UX Builder, Grid Builder) display a bar with multiple buttons across the top of the screen. The primary use case for a ControlBar is to define the contents that appears in a UX component's Panel headers and footers. However, ControlBars are not limited to Panel headers and footers. Like other control types in the UX, they can be added anywhere in the UX. For example in a Panel body. Or even in UX components that do not use Panels at all.
- Name
- Description
- The ControlBar Control
An overview of the ControlBar Control, its methods, and the concepts behind it. ControlBar controls are an easy way to organize buttons in panel headers when building Mobile applications.
- ControlBar Builder
The ControlBar Builder is used to define a ControlBar control.
- Dynamic Text
You can update the data in a ControlBar dynamically and animated the ControlBar when it is refreshed.
- Adding a Button to a ControlBar
You can add a button to a ControlBar and then associate an action (i.e. some Javascript code) to run when the button is tapped.
- Adding a Button-List to a ControlBar
A common pattern in mobile apps is to have a button bar at the bottom of the screen with a series of buttons that allow you to select the active Panel that is shown on the device. Typically, these buttons are spread out so that they fill the width of the screen. The button-list control is ideal for implementing this pattern.
- Adding a Button-Toggle to a ControlBar
You can add a Button-Toggle to a ControlBar. Toggle buttons can either be two-state (switching between a true and a false state), or multi-state (each click advances to the next button state). The video shows how the state of a Button-Toggle is used to control what action a button performs when clicked.
- Using Watch Events to Update ControlBar Data
The ControlBar data can be updated automatically in response to certain events in the UX (such as the UX going dirty, a List going dirty, etc.) or by a change in the value of one or more controls. Watch Events can be defined in the ControlBar Builder inside the Data pane by first clicking the 'Add Data Item' button and then checking the 'Update value automatically based on a 'watch' events' checkbox. If a html item is placed in the ControlBar then the Watch Event can be added as a placeholder in the HTML text property.
- Dynamically Set and Change Buttons in a ControlBar Button-list
You can dynamically set and alter the buttons that appear in a button-list control in a toolbar.
- Hooking Data Controls to ControlBar Disclosures
You can display standard UX controls (such as Lists, Buttons, Input controls, etc.) in a disclosure. This means you can use controls to create menus, maps, ink surfaces, etc... that pop up at the click ok a button in a ControlBar.
- Predefined ControlBar Templates
The Load Sample ControlBar link can be used to create a ControlBar using a pre-defined ControlBar template. You can use existing sample templates or create your own user-defined ControlBar templates.
- Creating User-defined ControlBar Templates
Templates can be used to create ControlBars in applications. The Save ControlBar as a Template link on the Home tab of the ControlBar is used to create user-defined templates.
- Using Disclosures
Disclosures are popup windows that come with their own ControlBar layout. They can be used to create ControlBars that cascade, where pressing one button will bring up an new layout with additional buttons. All of this can be easily accomplished within one ControlBar control.
This sections contains general guides, see also the ControlBar API, the ControlBar Properties section, and the properties pages for the ControlBar Builder. The ControlBar properties section references the properties that appear in the ControlBar Builder.