PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | English EN
  • Overview
  • Operating mode and general parameters ("General" tab)
  • Operating mode
  • Maximum number of rows per page
  • Context menu
  • Direct access to the properties of the controls (without using attributes)
  • Display mode and its parameters ("Details" tab)
  • Display mode: Presentation in grid
  • Display mode: Gallery in rows
  • Display mode: Gallery in columns
  • Control style ("Style" tab)
  • "Border/Background" element: Border thickness
  • Button to left, Button to right, Closing button
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Overview
To view the characteristics of the control, select "Description" in the context menu. Two types of information can be viewed:
  • the information regarding the entire Looper control (all you have to do is select the name of Looper control).
  • the information regarding each looper attribute (all you have to do is select the name of looper attribute). In this case, only the "Binding" tab is available.
In WEBDEV, different operating modes are available:
  • Standard looper.
  • Ajax looper.
    Remark: This type of looper is used to avoid refreshing the page at each server action. It is also used to get an interface closer to the one of a Windows application, by proposing scrollbars instead pagers.
  • Versions 17 and later
    Browser looper.
    Remark: This type of looper can be handled through programming in browser code. It can operate in stand-alone mode, without accessing the server. This type of looper is recommended in off-line mode or in the WebApp sites. It can also be used in the static sites.
    New in version 17
    Browser looper.
    Remark: This type of looper can be handled through programming in browser code. It can operate in stand-alone mode, without accessing the server. This type of looper is recommended in off-line mode or in the WebApp sites. It can also be used in the static sites.
    Browser looper.
    Remark: This type of looper can be handled through programming in browser code. It can operate in stand-alone mode, without accessing the server. This type of looper is recommended in off-line mode or in the WebApp sites. It can also be used in the static sites.
WEBDEV also proposes different display modes:
  • Presentation in grid: This presentation mode is used to display the different looper controls in grid format.
  • Versions 23 and later
    Gallery in rows: This presentation mode is used to create an image gallery in row.
    New in version 23
    Gallery in rows: This presentation mode is used to create an image gallery in row.
    Gallery in rows: This presentation mode is used to create an image gallery in row.
  • Versions 23 and later
    Gallery in columns: This presentation mode is used to create an image gallery in column.
    New in version 23
    Gallery in columns: This presentation mode is used to create an image gallery in column.
    Gallery in columns: This presentation mode is used to create an image gallery in column.
The different tabs found in the description window of the Looper control are used to define:
  • the operating mode ("General" tab)
  • Versions 23 and later
    the display mode and its setting ("Details" tab).
    New in version 23
    the display mode and its setting ("Details" tab).
    the display mode and its setting ("Details" tab).
  • the fill mode and the breaks ("Content" tab).
  • the style of different looper elements ("Style" tab).
Operating mode and general parameters ("General" tab)

Operating mode

The different operating modes are:
Operating mode
  • Standard looper.
    In standard mode, the page is entirely refreshed whenever a server action is performed.
    This operating mode proposes an optional pager (to move between the different data pages displayed by the control).
    This operating mode is compatible with any display mode: presentation in grid, gallery in row or gallery in column.
  • Ajax looper.
    This type of looper is used to avoid refreshing the page at each server action. It is also used to get an interface closer to the one of a Windows application, by proposing scrollbars instead pagers.
    This operating mode is compatible with a presentation in grid.
  • Browser looper.
    This type of looper can be handled through programming in browser code. It can operate in stand-alone mode, without accessing the server.
    This type of looper is recommended in off-line mode or in the WebApp sites. It can also be used in the static sites.
    This operating mode is compatible with a presentation in grid.

Maximum number of rows per page

This option is used to specify the maximum number of rows allowed on the page.
If the number of rows in the Looper control is greater than this value:
  • for a standard Looper control, an associated Pager control can be used to view additional rows.
  • for an Ajax Looper control, a scrollbar appears and allows users to view the additional rows.
If the number of rows in the Looper control is less than this value:
  • for a standard Looper control in a page that doesn't use zoning mode, space is kept for the rows.
  • for a standard Looper control in a page that uses zoning mode and with anchors set to fit to the content, space is not kept for the rows. The controls below the Looper control automatically snap to it.
  • for an Ajax Looper control, space is kept for the rows.
This option is available for standard and Ajax Looper controls.
Remarks:
  • The maximum number of rows per page can be dynamically modified using the NbLinesPerPage property.
  • If the number of rows in a new Looper control based on a data file is greater than the maximum number specified, a pager is automatically associated with the control. The pager makes it possible to view all the records in the Looper control.

Context menu

A context menu can be displayed for a Looper control. This context menu will allow the user to export the content of the Looper control to Word, Excel, OpenOffice, XML, etc.
To enable this context menu, check "With popup menu". You can also choose the image that will be used for the context menu. We recommend that you use an image with the following dimensions: 15 x 15 pixels.
The context menu is available only for standard and Ajax Looper controls.

Direct access to the properties of the controls (without using attributes)

This option is used to dynamically modify the properties of controls found in the looper without declaring an attribute.
For example, the following syntax can be used to modify the background color of a Static control in a Looper control:
LOOP_MyLooper[nRow].STC_MyStatic.ColorBackground = MyColor
Display mode and its parameters ("Details" tab)

Display mode: Presentation in grid

If the Looper control presents the data in grid format, several modes are available:
  • In Zoning mode:
    • Fixed number of columns/Fill in row.
      All you have to do is specify the number of columns to display. The looper will be repeated horizontally until the specified number before it is repeated vertically. The number of columns will not change when the page width is modified by the Web user.
      This display mode is available for the standard, Ajax and Browser loopers.
    • Variable number of columns/Fill in row.
      The number of columns will evolve according to the page width. The number of columns will change when the page width is modified by the Web user.
      You have the ability to define the minimum number of columns.
      This display mode is available for the standard and Browser loopers.
    • Fixed number of columns/Fill in column.
      All you have to do is specify the number of columns to display (greater than 1). The looper will be repeated vertically before it is repeated horizontally. The number of columns will not change when the page width is modified by the Web user.
      This display mode is available for the standard loopers.
  • In Responsive Web Design mode:
    • Variable width of columns.
      All you have to do is specify the number of columns to display. The looper will be repeated horizontally until the specified number before it is repeated vertically. The number of columns will not change when the page width is modified by the Web user.
      This display mode is available for the standard, Ajax and Browser loopers.
    • Fixed width of columns.
      The number of columns will evolve according to the page width. The number of columns will change when the page width is modified by the Web user.
      The minimum number of columns must be specified. The icon indicates that this value is specific to each slice. Therefore, this value must be modified for each slice in the page.
      A click on this icon is used to directly define the values for each slice via the following window:

      This display mode is available for the standard loopers.
    • Number of columns per slice. In a page in Responsive Web Design mode, the number of columns can evolve according to the slice. Each slice has a different width.
      This display mode is available for the standard loopers only.
      This allows you to adapt the number of columns according to the slice width (i.e. according to the browser size).
      When selecting this option, a symbol appears on the right of edit control for specifying the number of columns: . This icon indicates that this value is specific to each slice. Therefore, this value must be modified for each slice in the page.
      Versions 22 and later
      A click on this icon is used to directly define the values for each slice via the following window:
      New in version 22
      A click on this icon is used to directly define the values for each slice via the following window:
      A click on this icon is used to directly define the values for each slice via the following window:

      This display mode is available for the standard and browser loopers.

Display mode: Gallery in rows

If the Looper control presents the data in gallery in row, several options are available:
  • Reference control for the width: Used to define the looper control that will be used as reference for the width of images displayed in the row. This control can be an Image or Thumbnail control. If the source image is smaller than the dimensions defined in the editor, the dimensions of the reference control will be applied to the image at runtime.
  • During click, open a popup for automatic scroll: Used to automatically display a popup for scrolling the different gallery elements. This popup contains:
    • the elements found in the row.
    • a "Close" button as well as the Next and Previous arrows. These elements can be configured via the "Style" tab in the description window of the Looper control ("Button to left", "Button to right" and "Closing button" elements).
  • Animate the reorganization of cells when resizing: If the browser is resized, used to get an effect when reorganizing rows. The duration of this animation can be specified. This value can be modified using the AnimationDuration property.
For more details on loopers in gallery mode, see Gallery Looper.

Display mode: Gallery in columns

If the Looper control presents the data in gallery in column, several modes are available:
  • Fixed number of columns/Variable width.
    The looper will be repeated horizontally until the specified number before it is repeated vertically. The number of columns will not change when the page width is modified by the Web user.
    This display mode is available for the standard loopers.
    The number of columns to display must be specified.
  • Variable number of columns/Variable width.
    The number of columns will evolve according to the page width. The number of columns will change when the page width is modified by the Web user.
    This display mode is available for the standard loopers.
  • Variable number of columns/Fixed width.
    The looper will be repeated horizontally then vertically. The number of columns as well as the width of each row will change when the page width is modified by the Web user.
    This display mode is available for the standard loopers. In Responsive Web Design mode, the icon indicates that this value is specific to each slice. Therefore, this value must be modified for each slice in the page. A click on this icon is used to directly define the values for each slice via the following window:
Options specific to the gallery in column are also available:
  • Reference control for the height: Used to define the looper control that will be used as reference for the height of images displayed in the row. This control can be an Image or Thumbnail control. If the source image is smaller than the dimensions defined in the editor, the dimensions of the reference control will be applied to the image at runtime.
  • During click, open a popup for automatic scroll: Used to automatically display a popup for scrolling the different gallery elements. This popup contains:
    • the elements found in the row.
    • a "Close" button as well as the Next and Previous arrows. These elements can be configured via the "Style" tab in the description window of the Looper control ("Button to left", "Button to right" and "Closing button" elements).
  • Animate the reorganization of cells when resizing: If the browser is resized, used to get an effect when reorganizing rows. The duration of this animation can be specified.
For more details on loopers in gallery mode, see Gallery Looper.
Control style ("Style" tab)

"Border/Background" element: Border thickness

Depending on the browser used, the border thickness may differ for the different looper rows.
For example, if the border thickness is less than 3 pixels, this characteristic:
  • will not be applied properly in Internet Explorer.
  • will be applied properly in Firefox.

Button to left, Button to right, Closing button

The "Button to left", "Button to right" and "Closing button" elements are used to customize the elements found in the popup window displaying the image during an automatic scroll of images (image gallery in row or in column).
Related Examples:
The Looper control (display the bounds) Unit examples (WEBDEV): The Looper control (display the bounds)
[ + ] This example explains how to display the bounds of a looper with custom pager.
Displaying/Hiding an input area Unit examples (WEBDEV): Displaying/Hiding an input area
[ + ] This example explains how to display/hide an input area via a looper.
Adding an input area is performed by adding a row in the looper.
The Looper control (selection bar) Unit examples (WEBDEV): The Looper control (selection bar)
[ + ] This example explains how to simulate a selection bar in a looper
The Looper control (modify the number of rows displayed) Unit examples (WEBDEV): The Looper control (modify the number of rows displayed)
[ + ] This example explains how to modify the number of rows displayed in a looper.
The Ajax Looper control Unit examples (WEBDEV): The Ajax Looper control
[ + ] This example explains how to use the Ajax looper. This example allows you to:
- Clear the looper
- Fill the looper
- Sort the looper
The Ajax Looper control in PHP Unit examples (WEBDEV): The Ajax Looper control in PHP
[ + ] This example presents the use of Ajax loopers in PHP.
This example allows you to:
- Clear the looper
- Fill the looper
- Sort the looper
webmillion Complete examples (WEBDEV): webmillion
[ + ] The following topics are presented in this example:
1/ Using queries
2/ Using "browsing" loopers in automatic browse
3/ Using "browsing" loopers in manual browse

Summary of the example supplied with WEBDEV:
This Web application, powered by WEBDEV, is used to display, find and order tee-shirts.
Once the order is placed, you have the ability to use the PayBox module for secure payment.

This example contains a page used to generate a data file containing an important number of records.
Minimum version required
  • Version 9
Comments
Click [Add] to post a comment