PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • This lesson will teach you the following concepts
  • Controls specific to Responsive Web Design
  • The anchors
  • Positioning anchors
  • Size anchors
  • Order of controls in Responsive Web Design mode
Lesson 8.3. Advanced concepts
This lesson will teach you the following concepts
  • Specific control: Navigation Bar control with "Hamburger" menu
  • The anchors
  • Managing the order of controls

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 study the operating mode of Navigation Bar control.
    1. Open the "WW_Responsive" project if necessary. To do so, in the home window, click "Tutorial" and select the project named "Responsive Web Design (Exercise)".
    2. Open the PAGE_NavigationBar page.
  • The Navigation Bar control is the control found at the top that contains the menu.
    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 a button used to start the search.
  • Let's switch to Tablet mode:
    1. Click the header of Tablet blade.
    2. Click the Navigation Bar control to select it: the middle section is hatched.
  • From the Tablet blade, 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 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 study the content of middle section:
    1. Click inside the hatched middle section. The popup is displayed:
    2. In our example, we can see the site menu. The menu is vertical now. Indeed, the Navigation Bar control automatically overloads the Menu control so that it is displayed vertically.
    3. To exit from the edit mode of popup, press the ESC key.
The anchors
The management of anchors was already presented in the previous chapters. However, the anchors operate differently in a Responsive Web Design page.
  • Let's study the operating mode of anchors in Responsive Web Design mode.
    1. Open the "WW_Responsive" project if necessary. To do so, in the home window, click "Tutorial" and select the project named "Responsive Web Design (Exercise)".
    2. Open the PAGE_Anchor page.
    3. Select the search button at the top right:
    4. Display the popup menu (right mouse click) and select "Anchor".
    5. The window for anchor management is displayed:
WEBDEV proposes two types of anchor:
  • the positioning anchors,
  • the size anchors.

Positioning anchors

The positioning anchors correspond to the "Anchor in X" option. This option proposes the following choice:
  • An anchor to left.
  • A centered anchor.
  • An anchor to right.
  • Let's study these different possibilities:
    • The centered anchor must be selected in order for the control to remain centered when resizing the browser.
    • The anchor to left is used to specify that the size between the control and the left page border will always be the same proportionally to the page size. The section found on the right of control can be truncated if the browser reduction is too important.
    • The anchor to right performs the same action as the anchor to left, but on the right.
  • In our example, the search button found in the top right corner of page is anchored to right. Meaning that the spacing between the right border of control and the right page border will always be the same proportionally to the page width.
  • Run the page test ( among 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 search button is reduced while the area on the right remains the same.
  • Close the browser.

Size anchors

  • Let's now study the size anchors.
    1. In the PAGE_Anchor page, select the edit control named "Find" beside the search button.
    2. Display the popup menu (right mouse click) and select "Anchor".
    3. The window for anchor management is displayed. The size anchors are grouped in the "Width management" and "Height management" sections.
  • Let's study the different possibilities:
    • Regarding the width, you can:
      • use the edit size: the control will not be enlarged (and it will not ve reduced): it will keep the width that was defined in the editor.
        Note: If the control content is modified by programming and if it exceeds the edit size, the control will be enlarged.
      • adapt the width to the grid: as the page is reduced, the control will be reduced accordingly. In this case, you have the ability to specify the minimum width and the maximum width. These widths can correspond to:
        • a specific value, expressed in pixels.
        • no minimum or maximum size.
        • the size defined in edit (which means the control size in the page editor).
      • adapt the control to its content: The control width changes according to its content. In this case, you have the ability to specify the minimum width and the maximum width. These widths can correspond to:
        • a specific value, expressed in pixels.
        • no minimum or maximum width.
        • the size defined in edit (which means the control size in the page editor).
    • Two possibilities are available for the height:
      • adapt the control height to its content. In this case, a minimum height must be defined.
      • use the edit size.
  • In our example, the edit control and the search buttons are defined as keeping their edit size.
  • Run the page test ( among 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 overload mechanism by blade is used to modify the interface according to the requested blade, especially by modifying the position of controls.
You must pay great attention to this modification of position. Indeed, in a responsive page, you cannot change the order of controls in the page.
  • To understand the management of order of controls:
    1. Open the "WW_Responsive" project if necessary. To do so, in the home window, click "Tutorial" and select the project named "Responsive Web Design (Exercise)".
    2. Open the PAGE_ControlOrder page.
  • Let's study this page:
    1. In the Desktop blade, 3 products are presented horizontally.
    2. Click the header of Mobile blade.
    3. In the Mobile blade, the images of products are very reduced.
  • On Mobile, the controls should be displayed with the same size as in the Desktop blade and an image should be moved.
  • Go back to the Desktop blade to modify the anchor of controls.
    1. Select the Image control and the associated Static controls.
    2. Display the popup menu and select "Anchor".
    3. In the "Width" option, select "Use the edit size".
    4. Validate the anchoring window.
    5. Save the page (Ctrl + S). Two compilation errors occur.
      These errors indicate that the Img_Product_3 and RTA_The_traditional_French_dishes controls are not displayed inside the page at the end of Tablet blade.
    6. Click the Tablet blade. 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 blade and move them below the two first ones.
    8. Save the page (Ctrl + S).
    9. New GUI errors occur in the pane of compilation errors.
    10. These errors are errors regarding the display order.
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 its previous control.
In our example, each image is positioned in relation to the previous image. It is the same for the Static controls.
The first static 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 have been moved into the Tablet blade (image 3 and static 6 in our example), the static 4 was positioned "above" its "reference" control (the image 3 beside which it should be).
This positioning is not possible in Responsive Web Design. Therefore, new GUI errors have been displayed.
To guide you, the area where the change of display order is performed in bordered by red dots.
  • To fix this problem, all you have to do is specify the logical formatting to WEBDEV. In our case, each Image control must be linked to its static: all you have to do is create cells around each “product” (image + caption). The cell must have an anchor such as "Use the edit size".

    Note

    In most cases, in Responsive Web Design mode, to group controls and to get the same operating mode for each control of the group, we advise you to include them in a cell.
  • To perform these corrections in our page, we are going to delete all the overloads performed in the Tablet blade:
    1. Display the popup menu of Tablet blade (right-click the section header).
    2. Select "List of overloads".
    3. In the window that is displayed, select all the overloads and click the "Delete" button.
    4. Validate the window.
  • To create a cell containing one or more existing controls:
    1. Display the Desktop blade if necessary.
    2. Select the controls (the first image on the left and its static for example).
    3. On the "Modification" pane, in the "Transformations" group, expand "Refactoring and swapping" and select "Create a cell from the selection".
    4. Select the cell. Select "Anchor" from its popup menu.
    5. In the anchoring window, select "Use the edit size" for the anchor in width.
    6. Validate.
    7. Perform these operations again for the other two groups of controls.
  • We are now going to reposition the controls in Tablet blade:
    1. Switch to Tablet blade.
    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 23
Comments
Click [Add] to post a comment