PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | English EN
New WEBDEV 28 feature!
  • In this lesson you will learn the following concepts
  • Controls specific to Responsive Web Design
  • Anchors
  • Position anchors
  • Size anchors: vertical and horizontal anchors
  • Order of controls in Responsive Web Design mode
Lesson 8.3. Advanced concepts
In this lesson you will learn the following concepts
  • Specific control: Navigation Bar control with "Hamburger" menu.
  • Anchors.
  • Managing the order of controls.
Lesson duration

Estimated time: 30 mn
Previous LessonTable of contentsNext Lesson
Controls specific to Responsive Web Design
WEBDEV includes a specific control for Responsive Web Design: the Navigation Bar control.
The Navigation Bar control is used to create a menu area that can easily adapt to the browser size. This area can contain all types of controls.
  • Let's see the operating mode of the Navigation Bar control.
    1. Start WEBDEV 28.
    2. Go to the WEBDEV home page if necessary (Ctrl + <).
    3. On the home page, click "Tutorial", then in "Part 8 - Responsive Web Design", double-click "Responsive Web Design (Exercise)".
    4. Open the PAGE_NavigationBar page.
  • The Navigation Bar control is the control at the top that contains the menu.
    Navigation Bar control
    This Navigation Bar control is divided into 3 sections:
    • On the left, the site logo.
    • In the middle, the site menu.
    • On the right, a search control with an Image control to start the search.
  • Let's switch to Tablet mode:
    1. Click the header of the Tablet slice.
    2. Click the Navigation Bar control to select it: the middle section is hatched.
      Navigation Bar control in edit mode
  • From the Tablet slice, the Navigation Bar control makes the middle section invisible and adds a Hamburger menu in the left section.
    The "hamburger" menu expands a popup containing the controls of the middle section. This popup can be customized, all you have to do is click the central pane. Then, this popup can be modified according to your own needs.
  • Let's analyze the content of the middle section:
    1. Click inside the hatched middle section. The popup is displayed:
      Central area of the Navigation Bar control
    2. You can see the site menu. The menu is vertical now. Indeed, the Navigation Bar control automatically overrides the Menu control so that it is displayed vertically.
    3. To exit the popup edit mode, press "Esc".
Anchors
We have already seen how to set anchors in the previous sections. However, anchors work differently in a Responsive Web Design page.

  • Let's see the anchors in Responsive Web Design mode.
    1. Open the project you worked on in the previous lesson.
      • Go to the WEBDEV home page (Ctrl + <).
      • On the home page, click "Tutorial", then in "Part 8 - Responsive Web Design", double-click "Responsive Web Design (Exercise)".
    2. WEBDEV opens a dialog box to inform you that the project has already been opened and prompts you to open the local version or overwrite the project with the original version. To retrieve your changes, click "Open the local copy".
    3. Open the PAGE_Anchor page.
    4. Select the Image control used to start the search at the top right:
      Selecting the Button control used to start the search
    5. Right-click to open the context menu and select "Anchor".
    6. The anchor management window is displayed:
      Anchor management window
WEBDEV proposes several types of anchors:
  • position anchors,
  • horizontal anchors.
  • vertical anchors.

Position anchors

The position anchors offer the following options:
  • Left.
  • Centered.
  • Right.
  • Let's analyze these different options:
    • The centered anchor must be selected in order for the control to remain centered when resizing the browser.
    • The anchor to the left is used to specify that the size between the control and the left page margin will always be the same with respect to the page size. The section on the right of the control can be truncated if the size of the browser becomes too small.
      Left anchor
    • The anchor to the right performs the same action as the anchor to the left, but on the right side of the page.
  • In our example, the search button in upper-right section of the page is anchored to the right. This means that the spacing between the right edge of the control and the right edge of the page will always be the same with respect to the page width.
  • Test the page (click Test page in the quick access buttons).
    • The page appears in test as it was in the editor in Desktop mode.
    • Reduce the size of your browser.
    • The area on the left of the search button is reduced while the area on the right doest not change.
  • Close the browser.

Size anchors: vertical and horizontal anchors

  • Let's see size anchors.
    1. In the PAGE_Anchor page, select the "Search" edit control next to the search button.
    2. Right-click to open the context menu and select "Anchor".
    3. The anchor management window is displayed.
  • Let's analyze the different options:
    Anchor management window
    • The following options are available for horizontal anchors:
      • Fixed width: the control keeps its dimensions defined in the editor.
      • Fit to content and pull other controls: the control width adapts to content. In this case, you can specify the minimum and maximum width.
      • Enlarge or reduce like the browser: the control width is modified with respect to the browser width. In this case, you can specify the minimum and maximum width.
    • The following options are available for vertical anchors:
      • Fixed height: the control keeps its dimensions.
      • Fit to content and pull other controls: the control height is adapted to content. In this case, you can specify the minimum height.
    • It is also possible to define the behavior of the control when its content overflows. You can:
      • Enlarge the control and push the other controls.
      • Truncate the content.
      • Enable a scrollbar that will always be visible.
      • Display a scrollbar.
  • In our example, the edit control and the search buttons are defined as keeping their edit size ("Fixed width" and Fixed height" options).
  • Test the page (click Test page in the quick access buttons).
    • The page appears in test as it was in the editor in Desktop mode.
    • Reduce the size of your browser.
    • The edit control and the search button are not resized.
  • Close the browser and go back to the editor.
Order of controls in Responsive Web Design mode
We have seen that the pages in Responsive Web Design mode adapt according to the browser size. The override by slice mechanism allows modifying the interface according to the desired slice, especially the position of the controls.
You must pay great attention when you change the position of a control. In a responsive page, you cannot change the order of the controls in the page.

  • To understand how to set the order of the controls, open "PAGE_ControlOrder" in the WW_Responsive project.
  • Let's analyze this page:
    1. In the Desktop slice, 3 products are presented horizontally.
    2. Click the header of the Mobile slice.
    3. In the Mobile slice, the product images are very small.
  • On Mobile, the controls should be the same size as in the Desktop slice and an image should be moved.
  • Go back to the Desktop slice to modify the control anchors.
    1. Select the Image controls and the associated Static controls.
    2. Open the context menu and select "Anchor".
    3. In the window that appears, select "Fixed width".
    4. Validate the anchoring window.
    5. Save the page (Ctrl + S). Two compilation errors occur.
      These errors indicate that the controls IMG_Product_3 and RTA_The_traditional_French_dishes overflow the page at the end of the Tablet slice.
    6. Click the Tablet slice. Move the "Browser width" cursor to the left. Indeed, from a particular browser dimension, the image and caption of 3rd product do not fit in the page anymore.
    7. Select these two controls in the Tablet slice and move them below the first two controls.
    8. Save the page (Ctrl + S).
    9. New UI errors occur in the pane of compilation errors.
    10. These are display order errors.
Why do these errors occur?
This use case is quite common and it is important to understand the principle used.
Each control is positioned in relation to the previous control.
In our example, each image is positioned in relation to the previous image. The same principle applies to the Static controls.
The first Static control on the left (number 4 in the example) is positioned in relation to the last image (number 3 in our example).
When the image and its associated Static control were moved to the Tablet slice (image 3 and Static control 6 in our example), the Static control 4 was positioned "above" its "reference" control (image 3, beside which it should be).
This layout is not available in Responsive Web Design. Therefore, new UI errors have been displayed.
To guide you, the area where the display order was changed is bordered by red dots.
  • To fix this problem, simply specify the logical formatting. In our case, each Image control must be linked to its text: simply create cells around each "product" (image + static). The cell must have a "Fixed width" anchor.

    Note

    Usually, in Responsive Web Design mode, grouping controls together in a cell makes it possible to get the same behavior for every control in the group.
  • To apply these corrections in our page, we are going to delete all the overrides performed in the Tablet slice:
    1. Open the context menu of the Tablet slice (right-click the section header).
    2. Select "List of slice overrides".
    3. In the window that appears, select all the overrides and click "Delete".
    4. Validate the window.
  • To create a cell containing one or more existing controls:
    1. Display the Desktop slice if necessary.
    2. Select the controls (the first image on the left and its Static control, for example).
    3. On the "Modification" tab, in the "Transformations" group, expand "Refactoring and swapping" and select "Create a Cell control from the selection".
    4. Select cell. Select "Anchor" in its context menu.
    5. In the anchoring window, select "Fixed width" to anchor horizontally.
    6. Validate.
    7. Perform these operations again for the other two groups of controls.
  • We will change the position of the controls in the Tablet slice:
    1. Change to Tablet slice.
    2. Select the cell containing the last two controls and move this cell below the first two controls.
    3. Save the page (Ctrl + S). No compilation error is displayed.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 28
Comments
Click [Add] to post a comment