When you create a section, you can use a design template to bring greater consistency
to your application. The section preview on the Design tab of the Section
form lets you see how the section changes as you add or move fields, controls, and embedded
sections. If you modify the application skin, those changes are also reflected in real time.
With section preview, you can see the impact of each design change that you make reflected
immediately on the screen, thus reducing rework and development time.
Each design template contains one or more regions, which are marked with names or with
capital letters (A, B, C, and so on, depending on the number of regions). For example,
2-column templates have regions A and B. In the section preview, each region is displayed
with this name or letter at the top. While working in the section preview, you can move
elements within or across regions. You can edit the properties of any element from the
section preview. You can also resize the section preview to help you visualize how elements
will be rearranged to accommodate the change in screen dimensions.
-
In the Dev Studio header, click .
-
On the Create Section form, select the Create Section using a Design
Template check box, specify the label, applies-to class, and ruleset for the
section, and then click Create and open.
-
On the Design tab of the Section form, click the
Change button beside the Template icon,
and then click a design template on the modal dialog box (overlay) to select it.
-
Build each region (A, B, and so on) by completing the following tasks in the template
element list at the right of the screen:
-
To specify a title for a region, click the Edit region icon
(pencil) for that region and use the Region properties dialog
box to specify text, a property, or a field value for the region title.
-
To add a control or field to a region, click the Add new
icon (plus sign) and select the element from the Basic or
Advanced list that is displayed.
-
To add an embedded section to a region, click the Add new
icon (plus sign), select Embedded section on the
Advanced list, and use the Section Include
Modal dialog box to specify the page context, class, and section.
Embedded sections are displayed with shading in the section preview.
-
Modify regions and elements in the section preview on the left by completing the
following tasks:
-
To move any element—within its own region or to a different region—hover over the
element until a dashed line is displayed and drag the element to the new
location.
-
To specify the properties for an element, hover over the element, click the
Edit icon, and use the Properties
panel.
If you set a visibility condition for an element, the element is not displayed in
the section preview. In the template element list at the right, an
Eye icon is displayed with that element to indicate that
visibility options have been set.
If you are using UI Kit 10 or later, you can use advanced presentation options on
the Presentation tab of the Properties
panel to modify styling of cells or layouts by applying one or more helper classes.
For example, you can use a CSS helper class to center an element, rather than using a
skin format to do so.
-
To edit an embedded section, double-click the section to
display its contents on the Section form, make your changes, and then click
Submit to return to the current section.
-
To preview how the layout of the section changes when the screen
size changes, hover over the right border of the preview area until a bidirectional arrow
and blue bar are displayed, and then drag the bar left or right.
In the bar at the top of the section preview, the number of pixels changes as the
screen width changes.
-
To make the section editable at run time in App Studio, click the Settings tab of the Section
form and select the Allow Section to be edited at runtime check
box.
-
Click Save.