PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

  • Overview
  • Principle for creating a "Responsive Web Design" page in WEBDEV
  • Implementation
  • Creating a page in "Responsive Web Design" mode
  • Implementation
  • The different elements of the editor
  • Creating controls in a page in Responsive Web Design mode
  • Practical example for managing the anchors in a Responsive Web Design page
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
From now on, the Web sites can be viewed on several platforms: mobiles, tablets, PCs, ... The browser size changes on each device as well as the space used to display data.
The "Responsive Web Design" method consists in creating a single page that automatically adapts according to the platform used.
WEBDEV allows you to create pages by using the "Responsive Web Design" method and it allows you to optimize the display of the page on different platforms via several editor features.
Principle for creating a "Responsive Web Design" page in WEBDEV

Implementation

To create a "Responsive Web Design" page, we advise you to:
Notes:
Creating a page in "Responsive Web Design" mode

Implementation

To create a new page in "Responsive Web Design" mode:
  1. Click among the quick access buttons.
    • The window for creating a new element is displayed: click "Page" then "Page".
    • The wizard for page creation starts.
  2. Select the type of page to create: "Blank page" of "Responsive Web Design" type.
  3. The page will be automatically created in Desktop First mode.Select the edit mode:
    • Desktop First: The page is defined in its largest version (Desktop) that is used as reference, then it is reduced toward the lower blades (Tablet and Mobile).
    • Versions 22 and later
      Mobile First: The page is defined in its smallest version (Mobile) that is used as reference, then it is enlarged toward the higher blades (Tablet and Desktop).
      New in version 22
      Mobile First: The page is defined in its smallest version (Mobile) that is used as reference, then it is enlarged toward the higher blades (Tablet and Desktop).
      Mobile First: The page is defined in its smallest version (Mobile) that is used as reference, then it is enlarged toward the higher blades (Tablet and Desktop).
      In our example, the page is defined in Desktop First mode.
  4. Validate the wizard. The page is automatically created and displayed in the editor.
Notes:
  • The pages that use the "Responsive Web Design" mode are in HTML 5.
  • The edit mode of pages can be viewed and modified from the description window of the page, "General" tab.
    The "Responsive Web Design" mode corresponds to the option""Responsive Web Design" edit, positioning by fluid grid and multiple layouts".

The different elements of the editor

The page created in "Responsive Web Design" mode is displayed in an editor that is using specific options:
  • 1. Ribbon bar containing the options specific to "Responsive Web Design".
  • 2. Pager of blades. This bar contains different blades representing the resolutions of the most common devices. These blades can be modified, deleted or added. A click on a blade allows you to see the page in this blade.
  • 3. Handle of edit browser. This handle is used to resize the browser in the editor in order to dynamically see how the controls adapt to the browser size. To reduce or increase the size of the browser in the editor, all you have to do is click the double arrow, keep the mouse button down and move horizontally.
  • 4. Grid (in columns) used to position the controls in the page. This grid is used to simplify the positioning of controls. It has no real existence in the Web page. The grid simplifies the alignment and it allows you to automatically calculate the positioning of controls. This grid can be disabled when moving controls by pressing the SHIFT key.

Creating controls in a page in Responsive Web Design mode

  • The controls created in a page in "Responsive Web Design" mode are automatically created in the biggest blade or in the smallest one according to the Desktop First or Mobile First mode.
  • Some of them are adapted to the "Responsive Web Design" mode:
    • The Navigation Bar control.
    • The Looper control: the number of columns changes according to the blade.
    • The Table control: the table columns are displayed (or not) according to the blade.
    • Versions 22 and later
      The Dashboard control: the number of columns changes according to the blade.
      New in version 22
      The Dashboard control: the number of columns changes according to the blade.
      The Dashboard control: the number of columns changes according to the blade.
Practical example for managing the anchors in a Responsive Web Design page
We are going to configure the anchors for the following page (our sample page is in Desktop First mode):
The controls have been crated in the page with the default anchoring options.
Let's use the edit browser to check the behavior of controls when the browser is resized.
You will notice that the images found in the 2 controls at the top of the screen are truncated.
If we reduce the browser width even more, the title appears on several lines.
To fix these problems, we are going to improve the anchoring of controls:
  1. Anchoring the Image control at the top left:
    • The anchor in X "Left" is kept: the control keeps its position in relation to the left border of the page.
    • The width is using the edit size. Therefore, the control cannot be truncated.
  2. Anchoring the Image control at the top right:
    • The anchor in X becomes "Right": the control keeps its position in relation to the right border of the page.
    • The width is using the edit size. Therefore, the control cannot be truncated.
  3. Anchoring of title:
    • The anchor in X becomes "Centered": the control remains centered in the page regardless of the page width.
    • The width is using the edit size. Therefore, the control cannot be truncated or displayed on several lines.
  4. Anchoring the Static and Chart controls: This anchor is not modified. The controls are reduced according to the size of the page. The spacing between the Static and Chart controls is proportionally kept (anchor in X to left by default).
The result is as follows:
  • Desktop blade:
  • When resizing (Tablet blade):
Advanced mode: Example of overload: You also have the ability to overload the position of the Chart control and Static control in Mobile mode:
Related Examples:
WW_Overview_Mobile_Application Complete examples (WEBDEV): WW_Overview_Mobile_Application
[ + ] This example is a responsive Web site that presents a Mobile application.
It includes a static page that is entirely responsive.
Minimum required version
  • Version 21
Comments
Click [Add] to post a comment