PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
New WEBDEV 25 feature!
  • This lesson will teach you the following concepts
  • Controls specific to Responsive Web Design
  • The anchors
  • Position anchors
  • Size anchors, in height and in width
  • 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.
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 study the operating mode of Navigation Bar control.
    1. Open the "WW_Responsive" project if necessary. To do so, in WEBDEV's home page, click "Tutorial" and select "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.
    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 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:
      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 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 WEBDEV's home page, click "Tutorial" and select "Responsive Web Design (Exercise)".
    2. Open the PAGE_Anchor page.
    3. Select the Image control used to start the search at the top right:
      Selecting the Button control used to start the search
    4. Open the popup menu (right click) and select "Anchor".
    5. The window for anchor management is displayed:
      Anchor management window
WEBDEV proposes several types of anchors:
  • the position anchors,
  • the anchors in width.
  • the anchors in height.

Position anchors

The position anchor proposes the following choices:
  • 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.
      Managing left anchor
    • 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 ( Run the test of a page 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, in height and in width

  • Let's now study the size anchors.
    1. In the PAGE_Anchor page, select the edit control named "Search" beside the search button.
    2. Open the popup menu (right click) and select "Anchor".
    3. The window for anchor management is displayed.
  • Let's study the different possibilities:
    Anchor management window
    • For the anchors in width, the options are as follows:
      • 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 have the ability to specify the minimum width and the maximum width.
      • Enlarge or reduce like the browser: the control width is modified proportionally to the browser width. In this case, you have the ability to specify the minimum width and the maximum width.
    • For the anchors in height, the options are as follows:
      • 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 have the ability to specify the minimum height.
    • It is also possible to define the behavior of the control when its content is larger than it is. 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).
  • Run the page test ( Run the test of a page 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 override by slice mechanism allows modifying the interface according to the desired slice, especially 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 WEBDEV's home page, click "Tutorial" and select "Responsive Web Design (Exercise)".
    2. Open the PAGE_ControlOrder page.
  • Let's study 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. Display the popup menu and select "Anchor".
    3. In the window that is displayed, 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.
    8. Save the page (Ctrl + S).
    9. New UI 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 were moved into the Tablet slice (image 3 and static 6 in our example), the static 4 was positioned "above" its "reference" control (image 3, beside which it should be).
This positioning is not possible 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 text-level semantics. In our case, each Image control must be linked to its static: simply create cells around each "product" (image + static). The cell must have a "Fixed width" anchor.

    Remark

    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 apply these corrections in our page, we are going to delete all the overrides performed in the Tablet slice:
    1. Display the Tablet slice popup menu (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 for example).
    3. On the "Modification" pane, in the "Transformations" group, expand "Refactoring and swapping" and select "Create a Cell control from the selection".
    4. Select the cell. Select "Anchor" from its popup menu.
    5. In the anchoring window, select "Fixed width" to 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 slice:
    1. Switch 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 25
Comments
Click [Add] to post a comment