PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
New WEBDEV 24 feature!
  • This lesson will teach you the following concepts
  • Overview
  • My first page in Responsive Web Design mode
  • Creating a page
  • Fluidity and Responsive Web Design
  • Resolution slices
  • How to adapt the controls to the different slices?
Lesson 8.2. Responsive Web Design and WEBDEV
This lesson will teach you the following concepts
  • Available WEBDEV tools.
  • Positioning grid.
  • Resolution slices.
  • Overrides.

Estimated time: 30 mn
Previous LessonTable of contentsNext Lesson
Overview
An example project will allow you to discover the methods that can be used in WEBDEV to create sites in Responsive Web Design mode. This allows you to perform the operations and to better understand the available tools.
  • A simple example was prepared for you:
    1. Start WEBDEV 24 (if not already done).
    2. Display the WEBDEV home page if necessary (Ctrl + <).
    3. Open the "WW_Responsive" project. To do so, in the home page, click "Tutorial" and select the project named "Responsive Web Design (Exercise)".
My first page in Responsive Web Design mode

Creating a page

  • In WEBDEV, the method for creating a page in Responsive mode is identical to the method for creating the other pages:
    1. Create a new blank page.
      • In the window for creating a new element, click "Page" then "Page".
        Note: To display the window for creating a new element, click among the quick access buttons.
      • The wizard for page creation starts.
      • Click "Blank" and check "Responsive Web Design mode".
      • Validate the wizard.

        Note

        All page templates supplied with WEBDEV are available in Responsive mode. Simply check "Responsive Web Design mode".
        We are now going to create a blank page to understand the principle of Responsive Web Design.
    2. WEBDEV displays a window allowing to choose the main width used for Responsive Web Design. In this example, we are going to create a page for the "Desktop" mode.
    3. Select ""Desktop First" edit" and validate.
    4. The save window is displayed. Type the page title: "Responsive". The name ("PAGE_Responsive") is automatically proposed.
    5. Validate.
    6. The page is created in the editor. This page is displayed in "Desktop" mode.

Fluidity and Responsive Web Design

Let's see how the page behaves in the WEBDEV editor by creating a Static control.
  • To create the Static control:
    1. On the "Creation" pane, in the "Usual controls" group, click "ABC".
    2. Then, click inside the page to create the control.
    3. Press the F7 key three times to display the border of controls.
The first principle of responsive is fluidity: when the browser is reduced, the page controls are reduced accordingly.
  • To check this fluidity in the editor:
    1. Use the cursor found at the top of the page to reduce the browser size.
    2. The Static control that was just created is reduced accordingly.

Resolution slices

The cursor that was just used belongs to the resolution slices, second principle of WEBDEV Responsive.
The resolution slices are used to materialize the resolutions of different devices.
  • Let's study the operating mode of these resolution slices.
    1. In the "WW_Responsive" project, open the PAGE_Adaptations page.
    2. Three slices appear above the page:
    • In blue, the Desktop slice, for displaying on a desktop screen,
    • In green, the Tablet slice corresponding to the display on tablets,
    • In yellow, the Mobile slice for the display on Smartphones.
The resolution slices allow you to define the layouts that will be used for each type of device.

Note

You can add custom resolution slices to manage the different devices more efficiently.
To change resolution slice, you can use the cursor or click the resolution slice directly.

Caution

Responsive WEB Design with WEBDEV is using the concept of "Desktop First" by default. In this mode, the controls are always created in the Desktop slice. Then, the interface must be adapted to smaller slices.
The Desktop slice corresponds to the base of the page, without adaptation.
To perform adaptations in the other resolution slices: all you have to do is perform the modifications in the editor directly.
  • Let's study the PAGE_Adaptations page.
  • This page contains different controls:
    • a title at the top,
    • a Map control to indicate the restaurant location,
    • a Static control containing the restaurant address,
    • an Image control on the right to display an advertising banner,
    • a Looper control at the bottom to display the opinions.
  • Run the page test ( among the quick access buttons).
    • The page appears in test as it was in the editor in Desktop mode.
      Note: This page is using a Map control. In GO and in deployment, a Google key must be used. Otherwise, an error occurs in the Map control. See the online help to get this key.
      If you own a key, specify it in the "Project" tab of the description window of project.
    • Reduce the size of your browser to see the change of slice.
  • Some page controls move or disappear according to the resolution slices displayed.
    For example, the advertising image is shown in the Desktop slice but it becomes invisible in the smaller slices.

How to adapt the controls to the different slices?

Performing adaptations regarding the positioning and/or the size is child's play! The modifications are performed in the editor directly (like any other modification). In fact, these adaptations are overrides.

Caution

In order for the sizes to be respected when reducing the browser, we advise you to click the resolution slice to modify before any modification.
The default size of the selected slice will be taken as reference and no error will occur at runtime.
It is possible to override several properties for each resolution slice. They can be identified in the control description window via the picto.
For example, for the Image control, a different image file can be used according to the resolution slice.
  • To override the size and position of controls, you must:
    1. Select the requested slice.
    2. Perform the modification in the editor.
  • To see the list of overrides for a resolution slice:
    1. Select the requested resolution slice (for example, for the tablet slice, click inside the tablet slice).
    2. Display the popup menu of the slice bar (right click) and select "List of slice overrides".
    3. The list of overrides performed is displayed:
      Note: This window allows you to delete the overrides in order to restore the control's default operating mode.
Special case: Control visibility
The visibility of control is defined in the "GUI" tab of the description window of control.
In Responsive mode, this option cannot be overridden by slice.
  • To define the visibility of a control by slice, you must:
    1. Select the control.
    2. Display the popup menu of control (right mouse click).
    3. Select "Responsive Web Design .. Visibility by slice".
    4. Keep checked only the slices where the control must remain visible.
Note: Only the visibility defined in the description window of control can be modified by programming. The visibility overrides performed by resolution slice cannot be modified by programming.

Note

To see the hidden controls (to modify their position if stacked for example), on the "Display" pane, in the "Help for edit" group, check "Hidden controls".
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 24
Comments
Click [Add] to post a comment