A1. Layouts

Adding a layout

1. Choose File | New and pick the Layout wizard from the Mobile Portal Toolkit menu.

2. The layout policy should be located in the policies/layouts directory. Choose that folder in the policy tree view, or enter its full path in the first text box.

3. Name the new layout 'main_cf2t' and then click the Next button. The MCS wizard automatically adds .mlyt layout file extension to the file name.

Variant selection criteria

Most variants are device specific, targeted at a particular device or device family. However, we will not create a device specific layout. We will set selection criteria to 'Default', instead. Please refer to the Getting started with MCS tutorial to learn about device specific variants.

1. Choose Default in the Selection Criteria box.

2. Click the Finish button to complete the process.

Layout editor

The Layout Editor has two pages, an Overview page listing the device layouts and their general attributes, and a Design page where you can develop your layout.

Using grids

When designing a layout you start by creating a grid that defines the main structure of the page. Next, you add elements such as panes and regions, which hold targeted XDIME page content.

Grids give a page layout the basic structure for your content. You can nest grids inside one another, and also wrap one grid element in another.

1. Make sure the main_cf2t.mlyt layout is opened in the Layout Editor.

2. Pick the 'Default' variant from the list of variants and click on the Design tab.

3. Right-click on the Design Layout area and pick Add | Grid | N by M....

4. Create a 3 rows by 1 column grid.

Canvas layouts and panes

MCS displays page content in the individual panes, each of which must have a unique name within the layout. In the XDIME, you use the pane names to specify where the content of the file should appear.

1. Right-click on the row of the grid and pick Add | Pane | Pane. Name the new pane 'title'.

2. Leave the second row of the grid untouched for now.

3. The third pane should be named 'footer'.

Regions

Each web page is a template with some common content. Those common elements are represented by panes. In addition, a web page may include a set of areas that can be occupied by variable content. Those areas are called regions.

1. Right-click on the second row of the grid and pick Add | Region.

2. Name the new region 'content'. The layout should have the following form.

   

Adding a format

When you select a layout format in the layout Design view or Outline view, you can set different combinations of attributes, depending on the format.

1. Click on the pane or region you want to set the format attributes for.

2. In the Format Attributes window set its attributes, starting with the name.

3. Set the format attributes for the remaining panes and regions. The table in the following section lists all the attributes and their values.

Layout attributes

These are the format attribute values that you need to set for the panes and regions in the main layout.

Additional layouts

Follow the steps outlined previously and create two additional layouts.

1. The ui_cf2t.mlyt policy should look like the one following example:

   

2. These are the format attribute values that you need to set for the panes and regions in the ui_cf2t.mlyt layout.

   Name	Width	Border Width	Cell Padding	Cell Spacing	Markup Optimization	Filter Usability Below	Column Width
   ui-header	n/a	n/a	n/a	n/a	n/a	n/a	100%
   ui-content	n/a	n/a	n/a	n/a	n/a	n/a	100%
   ui-footer	100%	0	0	0	Never	0	100%

3. The biscuit-tmpl_cf2t.mlyt policy should look like the following example:

   

4. These are the format attribute values that you need to set for the panes in the biscuit-tmpl_cf2t.mlyt layout.

   Name	Width	Border Width	Cell Padding	Cell Spacing	Horizontal Alignment	Markup Optimization	Filter Usability Below	Column Width
   icon	100%	0	0	0		Never	0
   details	100%	0	0	0	Left	Never	0	100%
   indicator	100%	0	0	0		Never	0