- Specific control
- Controls specific to Responsive Web Design
- To exit from the edit mode of popup
- WEBDEV proposes several types of anchors:
- Run the page test ( among the quick access buttons).
- In our example
Lesson 8.3. Advanced concepts
- Navigation Bar control with "Hamburger" menu.: The anchors.
- Managing the order of controls.
- Lesson duration
Estimated time: 30 mn
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.
- Open the "WW_Responsive" project if necessary. To do so, in WEBDEV's home page, click "Tutorial" and select "Responsive Web Design (Exercise)".
- 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:
- Navigation Bar control
- 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:
- Click the header of the Tablet slice.: 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:: Click inside the hatched middle section
- The popup is displayed. . Central area of the Navigation Bar control
- You can see the site menu
To exit from the edit mode of popup
- 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.
- Open the "WW_Responsive" project if necessary: To do so, in WEBDEV's home page, click "Tutorial" and select "Responsive Web Design (Exercise)".
- Open the PAGE_Anchor page.
- Select the Image control used to start the search at the top right:
Selecting the Button control used to start the search
- Display the popup menu (right mouse click) and select "Anchor".
- The window for anchor management is displayed
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
Run the page test ( among the quick access buttons).
- Test a page.
- 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.: NOTE3_3
- Size anchors, in height and in width:
- Let's now study the size anchors: In the PAGE_Anchor page, select the edit control named "Search" beside the search button..
- Display the popup menu (right mouse click) and select "Anchor".: 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
Run the page test ( among the quick access buttons).. Test a page
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.. NOTE4
- 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 mechanism by slice is used to modify the interface according to the requested slice, especially by modifying the position of the 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:
- Open the "WW_Responsive" project if necessary
- To do so, in WEBDEV's home page, click "Tutorial" and select "Responsive Web Design (Exercise)".
- Open the PAGE_ControlOrder page.
- Let's study this page:
- In the Desktop slice, 3 products are presented horizontally.
- Click the header of the Mobile slice
- . 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.. Select the Image controls and the associated Static controls.. Display the popup menu and select "Anchor".
- In the window that is displayed, select "Fixed width"
- Validate the anchoring window.
- 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.
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..
Select these two controls in the Tablet slice and move them below the first two..
Save the page (Ctrl + S)..
New UI errors occur in the pane of compilation errors.. 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)
|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
- 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:. Display the Tablet slice popup menu (right-click the section header).
- Select "List of slice overrides".
- In the window that appears, select all the overrides and click "Delete".
- Validate the window.
- To create a cell containing one or more existing controls::
- Display the Desktop slice if necessary.
- Select the controls (the first image on the left and its static for example)..
- On the "Modification" pane, in the "Transformations" group, expand "Refactoring and swapping" and select "Create a Cell control from the selection".. Select the cell.
Click [Add] to post a comment