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
  • 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.
Lesson duration

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 25 if necessary.
    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 "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 new element window, click "Page" then "Page".
        Remark: To display the window for creating a new element, click Create an element among the quick access buttons.
      • The page creation wizard starts.
      • Click "Blank" and check "Responsive Web Design mode".
        Page creation wizard
      • Validate the wizard.

        Remark

        All page templates included 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.
      Select RWD edit mode
    3. Select "Desktop First - edit in max. size" and validate.
    4. The page save window appears. 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.
      RWD page in the page editor

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.
      Creating a Static control
    3. Press F7 three times to display the border of controls.
      Displaying the borders 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.
      Cursor
    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:
      Default slices
    • 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.

Remark

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 uses 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.
    Page in the editor
  • 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 ( 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.
      Remark: This page uses a Map control. In test as in deployment, it is necessary to use a Google key. 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 project description window.
    • 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.
    Test in tablet mode

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 Override by slice 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 desired slice.
    2. Perform the modification in the editor.
  • To see the list of overrides for a resolution slice:
    1. Select the desired resolution slice (for example, for the tablet slice, click inside the tablet slice).
    2. Open the popup menu of the slice bar (right click) and select "List of slice overrides".
    3. The list of overrides performed is displayed:
      Overrides of a slice
      Remark: 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 a control is defined in the "UI" tab of the control description window.
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. Open the popup menu of the control (right click).
    3. Select "Responsive Web Design .. Visibility by slice".
      Visibility by slice
    4. Keep checked only the slices where the control must remain visible.
Remark: Only the visibility defined in the control description window can be modified by programming. The visibility overrides performed by resolution slice cannot be modified by programming.

Remark

To see the hidden controls (for example, to move them if they overlap), go to the "Display" pane, "Help for edit" group and check "Hidden controls".
"
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 25
Comments
Click [Add] to post a comment