PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • Overview
  • Handling blades
  • Creating a blade
  • Deleting a blade
  • Describing a blade
  • Handling controls in the blades
  • Customizing each blade
  • Additional overloads: Image control and Menu control
  • Hiding controls in each blade
  • List of control parameters stored in each blade
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
In the WEBDEV editor, the representation of the different resolutions is performed via blades. A blade represents a browser size for a specific device. WEBDEV includes 3 blades:
  • The Mobile blade corresponding to smartphone devices.
  • The Tablet blade corresponding to tablet devices.
  • The Desktop blade corresponding to devices such as PC, MAC, etc.
The default blade (which means the reference blade) depends on the creation mode of the page:
  • in "Desktop First" mode, the default blade is the "Desktop" blade.
  • Versions 22 and later
    in "Mobile First" mode, the reference blade is the "Mobile" blade.
    New in version 22
    in "Mobile First" mode, the reference blade is the "Mobile" blade.
    in "Mobile First" mode, the reference blade is the "Mobile" blade.
The base unit used to define a Desktop, Tablet or Mobile device is the cm (centimeter) or the inch. A mobile device with a resolution set to 1920 pixels by 1080 pixels does not differ from a desktop screen with the same resolution. On the contrary, the size of a mobile screen will be equal to 6 or 8 inches while the size of a desktop screen will be equal to 19, 24 or 30 inches.
The system of blades is used to customize the behavior of controls from a change of resolution (browser width) for all the lower resolutions (in "Desktop First" mode) or higher resolutions (in "Mobile First" mode). Notes:
  • The number of blades can be modified. We advise you to create a new blade as soon as the layout of your page changes (need to change the organization of controls in the page for example).
  • The size of blades can be modified.
In each blade, you have the ability to customize:
  • the size of controls,
  • the position of controls,
  • the CSS properties of the style,
  • the hiding of controls for a blade.
Note: additional overloads are available for the Image control and for the Menu control. This allows you to use smaller images for the mobile devices or to change the menu orientation. See Additional overloads for more details.
Handling blades

Creating a blade

To add a blade:
  1. On the "Responsive Web Design" pane, in the "Resolution blades" group, click "New blade".
  2. Specify the name of the blade and its size then validate.
    Creating a blade

Deleting a blade

To delete a blade:
  1. Select the blade to delete (click its name).
  2. On the "Responsive Web Design" pane, in the "Resolution blades" group, click "Delete".
  3. The blade and all its overloads are deleted.

Describing a blade

To display the description of a blade:
  1. Display the popup menu of the blade header (right mouse click on the colored area).
  2. Select "Description of the blade".
  3. In the window that is displayed, you have the ability to configure:
    • The name of the blade. This name is displayed in the blade header. Note: This name is specific to WEBDEV: it is not used in the generated HTML code.
    • The number of columns in the blade.
    • The width of gutters between columns.
    • The use of gutters on the left and right borders of the page.
    • The zoom on fonts. This option is used to apply a percentage to enlarge the fonts on a platform. This enlargement percentage is applied to all the fonts displayed in the controls of the blade.
These options are also available in the "Responsive Web Design" pane of WEBDEV.
Handling controls in the blades

Customizing each blade

A modification regarding the position or the size of a control found in a blade is automatically applied to all the lower blades.
If a modification regarding the position or the size of a control is performed in a specific blade:
  • An overload is created for the modified property. This overload is assigned to the blade where the modification was performed.
  • This overload can be viewed:
    • in the list of blade overloads:
      Blade overloads
      Blade overloads
      • via "Responsive Web Design .. List of overloads" from the popup menu of control. via "Responsive Web Design .. List of overloads for all controls" from the popup menu of control.
      • Versions 22 and later
        via "List of overloads" from the popup menu of blade header.
        New in version 22
        via "List of overloads" from the popup menu of blade header.
        via "List of overloads" from the popup menu of blade header.
    • Versions 22 and later
      in the list of control overloads for the current blade. To display this list, select "Responsive Web Design .. List of overloads for the selected controls".
      New in version 22
      in the list of control overloads for the current blade. To display this list, select "Responsive Web Design .. List of overloads for the selected controls".
      in the list of control overloads for the current blade. To display this list, select "Responsive Web Design .. List of overloads for the selected controls".
  • This overload is taken into account for the current blade and for all the lower blades (in "Desktop First" mode) or higher blades (in "Mobile First" mode).
This rule also applies to the CSS properties of the style. You have the ability to modify the CSS properties for a single status (change the background color of control according to the platform for example).
To customize a control in a blade:
  1. Select the blade (click its name).
  2. Perform the requested modification: move, resize, modify the CSS properties, ...
  3. The overload is automatically performed and it is applied to the lower blades (in "Desktop First" mode) or higher blades (in "Mobile First" mode).
Note: Some position overloads are not allowed. For example, you cannot swap the position of controls in a blade. In this case, a GUI error occurs. See Why overloading the position and size of controls provokes an overlay in the browser?.

Additional overloads: Image control and Menu control

  • For the Image controls, you have the ability to overload the image in each blade.
    1. Click the header of the blade where the image must be modified.
    2. Change the image file used in the description window of the control ("Details" tab).
    3. Validate. The modification is taken into account for the current blade and for the lower blades (in "Desktop First" mode) or higher blades (in "Mobile First" mode).
  • For the Menu controls, you have the ability to overload the type of menu in each blade.
    1. Click the header of the blade where the menu must be modified.
    2. Change the menu orientation in the description window of control ("Details" tab).
    3. Validate. The modification is taken into account for the current blade and for the lower blades (in "Desktop First" mode) or higher blades (in "Mobile First" mode).

Hiding controls in each blade

In some cases, according to the browser width, you may have to hide a control.
To hide a control:
  1. Select the control and display the popup menu (right mouse click).
  2. Select "Responsive Web Design", then in the "Visibility by blade" section, select the blade where the control must be hidden.
Caution: A hidden control can no longer be selected in the editor for the blade where it was hidden. It remains present in the page (therefore, it can be handled by programming). However, it cannot be made visible by programming.
Note: To make a hidden control visible in the editor, on the "Display" pane, in the "Help for edit" group, check "Hidden controls".

List of control parameters stored in each blade

By default, the modification of a control parameter (control name, control caption, ...) is applied to all the blades.
Some parameters are stored in each blade:
  • Position of control in X and in Y.
  • External size of control (width and height).
  • Hiding the control.
  • Number of columns in a Looper control.
  • Versions 22 and later
    Number of columns in a Dashboard control
    New in version 22
    Number of columns in a Dashboard control
    Number of columns in a Dashboard control
  • Hiding a column in a Table control.
  • Source of Image control (associated file).
  • Orientation of menu.
  • Display mode of Navigation Bar control.
  • Size of page (height and width).
  • CSS style of control.
Minimum required version
  • Version 21
Comments
Click [Add] to post a comment