Creating a layout and adapting a simple page

• To understand how to set the order of the controls, open "PAGE_ControlOrder" in the WW_Layout project.
  
  This page contains:
  • a Static control with a title.
  • 3 Image controls and 3 Rich Text Area controls laid out horizontally. The Rich Text Area controls show the captions of the images.

• Test the page (click in the quick access buttons).
  1. The page is displayed in the browser.
     
  2. Resize the browser: the site is not displayed correctly.
     
  3. Close the browser.

• In mobile mode, we want to display the 3 products and their captions in a vertical layout, and occupy all the vertical space available in the page.

• Let's first create a new mobile layout:
  1. On the "Page" tab, in the "Layouts" group, expand "Layouts" and select "Add a layout from active view".
     
  2. In the window that appears, a layout adapted to phones and tablets is shown.
     
     Confirm.
  3. Two layouts have been created in our example. These layouts are displayed as thumbnails, to the right of the "PAGE_ControlOrder" page. The mobile layout is automatically selected and displayed in the editor.
     
     The areas highlighted with a red dotted line indicate there is a conflict.

• First, let's enlarge the page vertically:
  1. Click inside the rectangle that represents the page. The status bar indicates the page size: 320 x 406.
  2. Change the page height from 406 to 1200.
     

• We will reposition the controls in the page.
  1. Select the "Dissociate positioning of controls" title and adjust it horizontally to match the width of the page.
     
     
     

     	Note	The option (upper-right corner of the main window, in the title bar) allows you to enable or disable the "Automatic dissociation" mode. With this mode (default), when a control is moved or resized in one of the pages in the layout, the changes will not be applied in the other pages.
  2. Select the second image and its caption, and move them below the caption of the first image.
  3. Repeat these steps for the third image.
  4. Select the three images and their captions, then go to the "Alignment" tab, "Centering and distribution" group, and select "Center in the parent".
     

• Now, let's focus on the title: the text is too large and does not fit completely in the control. We will therefore decrease the font size, but only in the mobile layout.
  1. If necessary, open the mobile layout (double-click the corresponding thumbnail).
  2. Select the title and open the control description window (Alt + Enter).
  3. In the "Style" tab, change the size from 24 to 20 pixels.
     
  4. Validate. The text now fits in the Static control.
     

• Since the "Automatic dissociation" mode is enabled, the font size has been modified only in the current layout. This can be easily checked:
  1. Open the Desktop layout: double-click the "Desktop" thumbnail to the right of the page.
  2. Open the Static control description window: in the "Style" tab, the font size is still 24 pixels.

• Save (Ctrl + S) and test the page (click in the quick access buttons).
  1. The page is displayed in the browser.
  2. Resize the browser: the mobile layout is displayed.

• Close the browser.

• Now, we can test the site on a phone or a tablet:
  1. Expand the option in the quick access area and select "Test from a phone (access via a QR Code)".
     
  2. A window appears and shows a QR code that you can scan with your mobile device.
  3. Once you scan the QR code, the site is displayed on the device.
  4. The "Mobile" layout is automatically displayed.
     

Layouts in a page containing different types of controls

• Open the PAGE_Adaptations page.
  

• This page contains different controls:
  • a title at the top,
  • a Map control to indicate the restaurant location,
  • a Rich Text Area control containing the address of the restaurant,
  • an Image control on the right to display an advertising banner,
  • a Looper control at the bottom to display the opinions.

• Test the page (click in the quick access buttons).
  • The page is displayed in the browser as it was in the editor in Desktop mode.
    Remark: This page uses a Map control. In test mode as in production, it is necessary to use a Google key. Otherwise, an error occurs in the Map control. See the online help to get this key.
    If you already have a key, specify it in the "Project" tab of the project description window.
  • Reduce your browser to see how the page would be displayed on mobile devices.
    

• This is not the expected behavior. In the mobile layout:
  • the ad image should not appear,
  • the map should be smaller and appear under the description.
  • the Looper control should display the information on a single column.

• Let's first create a new mobile layout:
  1. On the "Page" tab, in the "Layouts" group, expand "Layouts" and select "Add a layout from active view".
     
  2. In the window that appears, a layout adapted to phones and tablets is shown. Validate the window.
  3. Two layouts have been created in our example. These layouts are displayed as thumbnails, to the right of the "PAGE_Adaptations" page.
     
     The mobile layout is automatically selected and displayed in the page.
     

• First, let's enlarge the page vertically:
  1. Click inside the rectangle that represents the page. The status bar indicates the page size: 320 x 616.
  2. Change the page height from 616 to 1024.
     

• To better understand these changes, move the different controls to the area to the right of the page. For each control (except the title):
  1. Select the desired control.
  2. Move the control to the area to the right of the page.
     

• The Image control should not appear on mobile devices. Therefore, we will make it invisible in the mobile layout:
  1. Select the Image control.
  2. In the context menu of the control, select "Layouts", go to "Visibility by layout" and deselect "Mobile (Smartphone)".
     
  3. The control disappears from the Mobile layout.

• Now, let's move the different controls to position them in the page:
  1. Place the text area below the title, and resize it so that it fits in the page.
  2. Likewise, place the Map control below the text and resize the control.
  3. Then, resize and place the "Reviews" control. You get the following interface:
     
  4. Lastly, place the Looper control.
     
     This control is too large for the Mobile layout. We will see how to adjust the size of this control according to the different layouts.

How to adapt the size of a Looper control?

• To dissociate the number of columns displayed by the Looper control:
  1. Select the control in the Mobile layout.
  2. Open the control description window.
     
  3. In the "Details" tab, click . In the window that appears:
     • Check "Dissociate value per layout".
     • For the Desktop layout, keep "2".
     • For the Mobile layout, replace "2" with "1".
       
  4. Validate.
  5. Validate the control description window.
  6. The Looper control shows only one column in the mobile layout. You can resize it so that it fits entirely in the page.
     

• Save (Ctrl + S) and test the page (click in the quick access buttons).
  1. The page is displayed in the browser.
     
  2. Resize the browser: the mobile layout is displayed.
     

• Close the browser.

• Now, we can test the site on a phone or a tablet:
  1. Expand the option in the quick access area and select "Test from a phone (access via a QR Code)".
     
  2. A window appears and shows a QR code that you can scan with your mobile device.
  3. Once you scan the QR code, the site is displayed on the device.
  4. The "Mobile" layout is automatically displayed.