A standard Blueprint page has a hierarchy of container elements, with page at the top, followed by content, modules, groups (if needed), and blocks. Each page has exactly one content. Everything that appears in the page―except for the page-header and page-footer―is in the content, which includes one or more module elements; module is the highest-level visual component. The content may also directly contain groups, blocks, and controls, including menu-related controls (options, goto).
Here's a simple page with one module:
Modules contain controls (UI elements) and blocks (of text and inline elements). Each module can have its own header. If extra levels of structure are needed, modules can be nested to create sections and subsections; the appearance of a module's header reflects its nesting depth (up to the first three levels).
The following illustration shows how nested modules might be rendered in an application:
The page element's style attribute determines the overall visual design of the page. Page styles are like "skins"; they are purely cosmetic, and their interpretation varies among client devices. Currently supported styles are "list" (the default) and "collection":
Blocks and placards are the primary display elements. The placard , which offers a choice of predefined layouts, is the best starting point for most applications. Here's a small module with two placards:
You can create simple layouts using blocks directly inside modules. You can even use blocks as section titles . But it is usually preferable to do this with modules and placards, as illustrated below:
To present data in rows and columns, use a table:
A variety of special controls, including goto, option, and navigation-bar, are available to provide menus for a page. The goto control adds items to the options menu or to the list of links at the bottom of the page.
The option control adds an item to the options menu associated with a page. The interpretation of this control varies considerably depending on the element in which it occurs and on the type of device running the application. In a page's content, the control always occurs in an options wrapper. Here, for example, is how option controls could be used to add menu items to a page:
To associate an action with a header (or with the title-bar of a page-header), use ui-command:
The navigation-bar provides simple paging controls:
The page-navigator is like the navigation-bar, but shows the current page number and total page count:
To create a sequence of clickable links, use the link-set control:
The link-set control can also appear as a line of tabs:
Images
The image element imports graphics in a variety of contexts. For example, the image-list control presents a row of (clickable) images:
Advertisements
The display-ad control presents an image with a clickable tag line:
For simpler ads, the text-ad control creates a clickable block of text:
Data Input Controls
Data input controls allow users to send information back to your server. The controls illustrated below are bound to data nodes through their ref attributes, as they would be in a real application. If these controls occur in a Blueprint page, they won't be displayed unless the referenced data nodes are defined in the page's models section. See Forms, Events, and Actions for more information.
Use the input control for single-line text input:
The secret control, used for entering passwords, is like input, but doesn't echo the text:
The search-box control is a specialized input device for search queries:
Use textarea for multiline text input:
Use trigger or submit to create a button:
The select control usually creates checkboxes:
The select1 control creates a pop-up menu or radio buttons:
Map and Location Controls
The map control or show-map action displays a map with points of interest (POIs):
Use the show-driving-directions action to fetch driving directions and an interactive map:
The location-chooser control allows the user to specify a geographical location:
