PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • Overview
  • Handling slices
  • Creating a slice
  • Deleting a slice
  • Describing a slice
  • Handling controls in the slices
  • Customizing each slice
  • Additional overrides: Image control and Menu control
  • Hiding controls in each slice
  • List of control parameters stored in each slice
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, different resolutions are represented via slices. A slice represents a browser size for a specific device. WEBDEV includes 3 slices:
  • The Mobile slice, which corresponds to smartphones.
  • The Tablet slice, which corresponds to tablets.
  • The Desktop slice, which corresponds to devices such as PC, MAC, etc.
The default slice (i.e. the reference slice) varies depending on the page creation mode:
  • in "Desktop First" mode, "Desktop" is the default slice.
  • Versions 22 and later
    in "Mobile First" mode, "Mobile" is the default slice.
    New in version 22
    in "Mobile First" mode, "Mobile" is the default slice.
    in "Mobile First" mode, "Mobile" is the default slice.
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 slice-based system 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).
Remarks:
  • The number of slices can be modified. We advise you to create a new slice as soon as the layout of your page changes (need to change the organization of controls in the page for example).
  • The size of slices can be modified.
In each slice, you can customize:
  • the size of controls,
  • the position of controls,
  • the CSS properties of the style,
  • the hiding of controls for a blade.
Remark: additional overrides are available for the Image and Menu controls. This allows you to use smaller images for the mobile devices or to change the menu orientation. See Additional overrides for more details.
Handling slices

Creating a slice

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

Deleting a slice

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

Describing a slice

To display the description of a slice:
  1. Display the slice header popup menu (right click on the colored area).
  2. Select "Description of the slice".
  3. In the window that is displayed, you have the ability to configure:
    • The name of the slice. This name is displayed in the slice header. Remark: This name is specific to WEBDEV: it is not used in the generated HTML code.
    • The number of columns in the slice.
    • 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 slice.
These options are also available in the "Responsive Web Design" pane of WEBDEV.
Handling controls in the slices

Customizing each slice

A modification of the position or the size of a control in one slice is automatically applied to all smaller slices.
If a modification of the position or size of a control is made in a specific slice:
  • An override is created for the modified property. This overload is assigned to the blade where the modification was performed.
  • This override can be viewed:
    • in the list of slice overrides:
      Slice overrides
      Slice overrides
      • via "Responsive Web Design .. List of overrides for all controls" from the control popup menu.
      • Versions 22 and later
        via "List of overrides" from the slice header popup menu.
        New in version 22
        via "List of overrides" from the slice header popup menu.
        via "List of overrides" from the slice header popup menu.
    • Versions 22 and later
      in the list of control overrides for the current slice. To display this list, select "Responsive Web Design .. List of overrides for the selected controls".
      New in version 22
      in the list of control overrides for the current slice. To display this list, select "Responsive Web Design .. List of overrides for the selected controls".
      in the list of control overrides for the current slice. To display this list, select "Responsive Web Design .. List of overrides for the selected controls".
  • This override is taken into account for the current slice and for all the smaller slices (in "Desktop First" mode) or larger slices (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 slice:
  1. Select the slice (click its name).
  2. Perform the requested modification: move, resize, modify the CSS properties, ...
  3. The override is automatically applied to the smaller slices (in "Desktop First" mode) or larger slices (in "Mobile First" mode).
Remark: Some position overrides are not allowed. For example, you cannot swap the position of controls in a slice. In this case, a UI error occurs. See Why overriding the position and size of controls causes an overlap in the browser?.

Additional overrides: Image control and Menu control

  • For Image controls, you can override the image in each slice.
    1. Click the header of the slice in which 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 slice and the smaller slices (in "Desktop First" mode) or larger slices (in "Mobile First" mode).
  • For Menu controls, you can override the type of menu in each slice.
    1. Click the header of the slice in which 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 slice and the smaller slices (in "Desktop First" mode) or larger slices (in "Mobile First" mode).

Hiding controls in each slice

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 "Visibility by slice", select the slice in which the control must be hidden.
Caution: A hidden control can no longer be selected in the editor (in the slice in which it was hidden). It remains present in the page (therefore, it can be handled by programming). However, it cannot be made visible by programming.
Remark: 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 slice

By default, the modification of a control parameter (control name, control caption, ...) is applied to all the slices.
Some parameters are stored in each slice:
  • 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 version required
  • Version 21
Comments
Click [Add] to post a comment