PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • Overview
  • Transforming a page template
  • Transforming the template page
  • Managing a navigation bar
  • Layout of Tablet and Mobile blades
  • Transforming a page template inheriting from a page template
  • Transforming a page with a Looper control
  • Transforming the page
  • Checking the page layout for each blade
  • Test in the browser
  • Transforming a page with edit controls
  • Transforming a page with a Rich Text Area
  • Transforming a page with a programmed HTML control
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Overview
This help page explains how to apply the Responsive Web Design mode to an existing WEBDEV page.
The operations are based on the "WW_Precilia_sport" example that is supplied with WEBDEV.
This page explains how to:
Notes:
  • These operations are performed on the WW_Precilia_sport example. The general method presented here can be directly applied to your own pages (with an interpretation depending on the page content).
  • To optimize the management of Responsive Web Design mode, don't forget to check:
  • Caution: The operations performed in this page operate from version 210051.
Transforming a page template
The steps for transforming the "PAGETPL_Main" page template found in the WW_Precilia_sport example are as follows:

Transforming the template page

To use the "Responsive Web Design" mode on the page template:
  1. Open the project if necessary.
  2. Display the "PAGETPL_Main" template in the editor.
  3. Display the description window of page: display the popup menu (right mouse click) and select "Description".
  4. In the "General" tab, select "Responsive Web Design edit...".
  5. Validate.
Versions 22 and later
Note: The template or the page is in Desktop First mode by default.
New in version 22
Note: The template or the page is in Desktop First mode by default.
Note: The template or the page is in Desktop First mode by default.
The editor changes: a new bar specific to the "Responsive Web Design" edit mode appears.
Three blades are defined by default:
  • Desktop (in blue).
  • Table (in green).
  • Mobile (in yellow).
Reminder: a blade represents a browser size for a specific device.
The "Desktop" blade (blue blade) is selected by default. The presentation is correct.
This page contains a popup menu: we are going to transform it in order to include it in a Navigation Bar control.

Managing a navigation bar

To manage a Navigation Bar control:
  1. Don't change blade: the "desktop" blade must be selected (click the blade header if necessary).
  2. Insert a Navigation Bar control: on the "Creation" pane, in the "Navigation" group, click "Navigation bar". Then, click in the middle of the page. The control appears in creation mode. This control includes 3 sections:
    • on the left, a section representing the "Hamburger" menu.
      Note: The "Hamburger" button is not visible in the "Desktop" blade. It appears in the lower blades only.
    • in the middle, the section containing the standard drop-down menu.
      A popup menu is already found in this area by default. In our example, delete this menu. It will be replaced by the existing menu.
    • on the right, an additional section that can contain additional links or controls.
  3. Reduce the width of the left section that contains the hamburger:
    • Hover the red square found on the right of the section. The mouse cursor turns into a double arrow.
    • Click the red square.
    • Keep the left mouse button down and press the SHIFT key.
    • Reduce the section.
  4. Move the page menu into the middle section of the Navigation Bar control.
  5. Reduce (if necessary) the middle section of the Navigation Bar control.
  6. Move the controls regarding the basket into the right section of the navigation bar.
  7. Re-position the Navigation Bar control onto the black bar. You get the following interface:
In our example, the menu is horizontal by default. Its orientation can be modified. The orientation of the menu can differ in each blade. For example:
  • an horizontal menu in the "Desktop" blade.
  • a vertical menu (accessible from the hamburger) in the "Tablet" and "Mobile" blades.
In our example, we will keep an horizontal menu in the "Desktop" blade. But we are going to modify its orientation in the "Tablet" and "Mobile" blades: the menu will be oriented vertically in these blades.
To modify the orientation of the menu in the "Tablet" blade:
  1. Go to the "Tablet" blade: click the "Tablet" header.
  2. Click in the middle section of the navigation bar. This section is hatched.
  3. Click the hatched section again: the drop-down menu is displayed.
  4. Select the menu. In the popup menu (right mouse click), select "Description".
    The description window of menu is displayed.
  5. In the "General" tab, choose the "Drop-down vertical" orientation. Validate the description window.
  6. Press the "Esc" key to exit from the edit of the middle section (if necessary, click the menu beforehand to select it).
  7. Then, go to the "Mobile" blade: you will notice that the menu is identical to the one of the "Tablet" blade. Indeed, the operations performed in the higher blades are automatically applied to the lower blades.
To modify the orientation of the menu in the "Tablet" blade:
  1. Go to the "Tablet" blade: click the "Tablet" header.
  2. Click in the middle section of the navigation bar. This section is hatched.
  3. Click the hatched section again: the drop-down menu is displayed. It is automatically displayed in vertical mode.
  4. Press the "Esc" key to exit from the edit of the middle section (if necessary, click the menu beforehand to select it).
  5. Then, go to the "Mobile" blade: you will notice that the menu is identical to the one of the "Tablet" blade. Indeed, the operations performed in the higher blades are automatically applied to the lower blades.

Layout of Tablet and Mobile blades

We are now going to analyze the following blades (Tablet and Mobile). To do so, you can:
  • click the color headers representing each blade.
  • use the "double arrow" symbol in the tooltip and move to the left (handle of edit browser).
Your page and the controls found inside it will move and evolve while the browser is resized.
  • If a control is not aligned properly or if it overflows in a blade, you have the ability to modify its width, its height as well as its X and Y positions in this blade.
  • Press the SHIFT key while moving the control with the mouse in order to disable the snap-on grid.
When moving the Desktop blade to the Mobile blade, you will notice that the representation of the page in the Tablet or Mobile blade is altered.
  • The menu at the top is not visible anymore. This is quite normal: indeed, the menu is accessible by using the hamburger (button that appears in the right section of the navigation bar).
  • The bottom of the page requires some adjustments. We must move and re-align the controls in each blade. Indeed, when going from the Tablet blade to the Mobile blade, some controls are truncated and the images are less visible.
Therefore, we are going to make corrections in the Desktop, Tablet and Mobile blades.
For example, if you select the Mobile blade:
The following operations can be performed to fix these problems:
  • For the text: if the text overflows, change the size of the character font in the control style. If this operation is not sufficient, increase the size of the Static control. If necessary, move the captions one below another.
  • For the images: change their anchoring parameters so that they are not distorted.
    To do so, display the popup menu of the image (right mouse click) and select "Anchoring". In the window that is displayed, select "Use the edit size" for the width and height of the image. Therefore, the image will keep its initial proportions regardless of the active blade.
After modification, the Mobile blade becomes:
Repeat this operation for the basket image at the top right and for the logo image at the top left.
The template page is ended.

Transforming a page template inheriting from a page template

We are now going to create the second page template of the project, the "PAGETPL_Content" template. This template inherits from the "PAGETPL_Main" template. Therefore, all you have to do is update this template in relation to the previous template.
  1. Display the "PAGETPL_Content" template in the editor.
  2. On the "Page" pane, in the "Description" group, expand "Templates" and select "List of templates used".
  3. Then, click the update button on the right (double blue arrow).
The same operation can be performed for the "PAGETPL_BASKET" template.
Transforming a page with a Looper control
We are going to work on the "store" page found in the WW_Precilia_sport example.

Transforming the page

To use the "Responsive Web Design" mode on the page:
  1. Display the "store" page in the editor.
  2. On the "Page" pane, in the "Description" group, expand "Templates" and select "List of templates used".
  3. Refresh the page from the template.
The page is automatically switched to Responsive Web Design mode as it inherits from a page template in Responsive Web Design mode. This can be checked in the page description: in the popup menu (right mouse click), select "Description".
The option ""Responsive Web Design" edit" cannot be modified. To change this option, you must:
  • modify the associated page template.
  • dissociate the template or delete the page template.

Checking the page layout for each blade

The next step consists in checking the representation of the page in each blade.
In this example, the display is correct for the "Desktop" blade and for the "Tablet" blade. On the contrary, the controls are a little bit reduced for the "Mobile" blade.
This page contains a Looper control defined on 2 columns. The width on 2 columns is correct in the "Desktop" blade and in the "Tablet" blade. On the contrary, less columns must be displayed in the "Mobile" blade.
WEBDEV allows you to configure the number of columns in a Looper control for each blade.
Note: In this example, we are working on a Looper control. For a Table control, you also have the ability to hide or display different columns for each blade.
To modify the number of columns found in the Looper control for a blade:
  1. Select the blade: in our case, select the "Desktop" blade.
  2. Display the popup menu of the control (right mouse click) and select "Description".
  3. In the "General" tab, in the "Display mode" area, select "Number of columns per blade".
  4. Enter the number of columns: 2 (2 columns for the desktop blade) and validate.
Repeat these operations for the "Tablet" blade: choose 2 columns for the "Tablet" blade.
Repeat these operations for the "Mobile" blade: choose 1 column for the "Mobile" blade.
Versions 22 and later
Tip: to avoid repeating these operations, you have the ability to configure the number of columns for all the blades in a single operation:
  • Click the icon symbolizing the Responsive Web Design:
  • In the window that is displayed, specify the different values for each blade.
New in version 22
Tip: to avoid repeating these operations, you have the ability to configure the number of columns for all the blades in a single operation:
  • Click the icon symbolizing the Responsive Web Design:
  • In the window that is displayed, specify the different values for each blade.
Tip: to avoid repeating these operations, you have the ability to configure the number of columns for all the blades in a single operation:
  • Click the icon symbolizing the Responsive Web Design:
  • In the window that is displayed, specify the different values for each blade.
Tips
  • In each blade, do not hesitate to resize the width of the looper column in order to occupy the horizontal space of the page as best as possible.
  • Don't forget to move or re-align the controls inside the Looper control if the column was resized.
In the "Desktop" (or "Tablet") blade, you get:
In the "Mobile" blade, you get:

Test in the browser

The test of the final result can be run in a browser:
  • Execution in Desktop mode:
  • Execution in Tablet mode:
  • Execution in Mobile mode:
The Looper control changes according to the blade but a display problem still occurs at the bottom of the page:
  • In the former site, the page footer was always displayed at the same position because the page height was fixed.
  • In Responsive Web Design mode, the height of the page can change (in our case, it changes in the "Mobile" blade). The page footer is anchored to the top border of the page and it covers the looper.
To fix this problem, the anchor of the page footer must be modified in the page template:
  1. Open the "PAGETPL_Main" template in the editor.
  2. Select the "Desktop" blade.
  3. Switch to Zoning mode: click the "Zoning" tab at the top left of the page.
  4. Select the "Footer" area. In the popup menu (right mouse click), select "Anchor".
  5. In the "Y position" section, select "Follow the bottom border of browser".
  6. Save the page template.
  7. Update:
    • the 2 linked templates ("PAGETPL_Content" and "PAGETPL_BASKET"): on the "Page" pane, in the "Description" group, expand "Templates" and select "List of templates used".
    • the "store" page: open the "store" page if necessary and, on the "Page" pane, in the "Description" group, expand "Templates" and select "List of templates used".
  8. Save the modifications.
The Looper control adapts according to the blade.
Transforming a page with edit controls
We are now going to handle the "Precilia_identification" page. This page is:
  • based on the "pagetpl_basket" template.
  • made of 2 vertical sections (2 control templates side by side).
First step: Update the page from the template (in order for the page to switch to Responsive Web Design mode): on the "Page" pane, in the "Description" group, expand "Templates" and select "List of templates used".
Second step: Check how the page behaves according to the selected blade.
  • In the "Desktop" and "Tablet" blades, the page is displayed properly.
  • In the "Mobile" blade, the controls are not large enough: it would be interesting to reorganize the page in height.
Let's go to the "Mobile" blade and move the controls in order to get the following result:
To obtain this result: the page includes 2 control templates. They are already overloaded. All you have to do is:
  • move these control templates.
  • change the height and width of the control templates.
  • reorganize the controls inside the control templates.
Tip: The caption of each control is not included in the edit control: this allows you to easily position these two elements separately.
Transforming a page with a Rich Text Area
We are now going to transform the "spa" page. This page contains a Rich Text Area control.
First step: Update the page from the template (in order for the page to switch to Responsive Web Design mode): on the "Page" pane, in the "Description" group, expand "Templates" and select "List of templates used". Click the update button on the right (double blue arrow) and validate.
Second step: Align and modify the width of the Rich Text Area control as best as possible in each blade. The page will stretch in height during the execution in the browser: a vertical scrollbar will be used to list the content of the Rich Text Area.
Tip: Don't forget to modify the inside margin of the Rich Text Area control in order not to truncate or cover the controls below.
Transforming a page with a programmed HTML control
The "contact" page displays the coordinates of the contact as well as a Google map displayed in an HTML control filled by programming.
First step: Update the page from the template (in order for the page to switch to Responsive Web Design mode): on the "Page" pane, in the "Description" group, expand "Templates" and select "List of templates used". Click the update button on the right (double blue arrow) and validate.
Second step: Page test:
  • Execution in "Desktop" mode:
  • Execution in "Tablet" mode:
  • Execution in "Mobile" mode:
The map is truncated in the Mobile and Tablet blades. Therefore, the width of the HTML control must be checked in each blade.
Indeed, the HTML control overflows the page in the "Tablet" and "Mobile" blades. You must:
  • resize it.
  • modify the HTML code of control because the map drawn has a fixed size (width set to 604, height set to 300):
    The values 604 and 300 (respectively width and height) must be replaced by 100% and 100% in order to keep the same proportion for the content of HTML control.
Tip: In most cases,
  • don't work with fixed sizes in pixels otherwise the display may be truncated in the lower blades.
  • use the WEBDEV controls rather than using the HTML control.
Minimum required version
  • Version 21
Comments
Click [Add] to post a comment