2.5. Additional layouts

The main.mlyt layout defines general structure of the page in our web application. Among some other elements, it sets the region named 'content'. Several widgets use additional layouts which specify a nested structures in that region.

The main.mlyt layout defines general structure of the page in our web application. Among some other elements, it sets the region named 'content'. Several widgets use additional layouts which specify a nested structures in that region.

This section provides you with the details of three such structures and their attributes.

Working with layouts

  1. Create a new layout policy called '2x2.mlyt', with the variant selection criteria set to 'Default'

  2. Add a 2 rows by 2 columns grid

  3. Create required panes. Final layout structure should look like the one following example.

    Layout

  4. Create a new layout policy called 'validator.mlyt'. Set the variant selection criteria to 'Default'.

  5. Add a 7 rows by 2 columns grid

  6. Add required panes to recreate the layout structure following example

    Layout

  7. Create a new layout policy called 'date-picker.mlyt'. Set its variant selection criteria to 'Default'.

  8. Create a 3 rows by 1 columns grid

  9. In the second row add 2 columns

  10. Add required panes to recreate the layout structure following example

    Layout

Layout attributes

  1. These are the format attribute values that you need to set for the panes in 2x2.mlyt
    Name Width Border Width Cell Padding Cell Spacing Markup Optimization Filter Usability Below
    top-left 100% 0 0 0 Never 0
    top-right
    bottom-left
    bottom-right
  2. The following table lists the format attribute values that you need to set for the panes in validator.mlyt
    Name Width Border Width Cell Padding Cell Spacing Markup Optimization Filter Usability Below
    msgSuccess 100% 0 0 1 Never 0
    message
    text1
    input1
    message1
    input2
    message2
    text2 2
    button 2
  3. Below are the format attribute values that you need to set for the panes in date-picker.mlyt
    Name Width Border Width Cell Padding Cell Spacing Markup Optimization Filter Usability Below
    title 100% 0 0 0 Never 0
    input-label
    input
    calendar