PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

  • Overview
  • Characteristics of looper ("General" tab)
  • Maximum number of rows per page
  • Popup menu
  • Direct acess to the properties of controls
  • Display mode
  • Display direction
  • Border thickness
  • Operating mode and general parameters ("General" tab)
  • Operating mode
  • Maximum number of rows per page
  • Popup menu
  • Direct access to the properties of controls (without using attributes)
  • Display mode and its parameters ("Details" tab)
  • Display mode: Presentation in grid
  • Display mode: Gallery in row
  • Display mode: Gallery in column
  • Control style ("Style" tab)
  • "Border/Background" element: Thickness of border
  • 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/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Overview
To display the control characteristics, select "Description" from the popup menu of control. 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 "Link" tab is available.
In WEBDEV, different operating modes are available:
  • Standard looper.
  • Ajax looper.
    Note: 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.
    Note: This type of looper can be handled by 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.
    Note: This type of looper can be handled by 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.
    Note: This type of looper can be handled by 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.
The different tabs found in the description window of Looper control are used to define:
  • the operating mode and the display mode ("General" tab).
  • the fill mode and the breaks ("Content" tab).
  • the style of different looper elements ("Style" tab).
Note: From version 23, new display modes are available and they allow you to propose image galleries in row or in column.
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 row: This presentation mode is used to create an image gallery in row.
    New in version 23
    Gallery in row: This presentation mode is used to create an image gallery in row.
    Gallery in row: This presentation mode is used to create an image gallery in row.
  • Versions 23 and later
    Gallery in column: This presentation mode is used to create an image gallery in column.
    New in version 23
    Gallery in column: This presentation mode is used to create an image gallery in column.
    Gallery in column: This presentation mode is used to create an image gallery in column.
The different tabs found in the description window of Looper control are used to define:
  • the operating mode and the display mode ("General" tab)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).
Characteristics of looper ("General" tab)

Maximum number of rows per page

This option is used to specify the maximum number of rows allowed on the page.
If the looper contains a number of rows greater than this value:
  • for a standard looper, a Pager control linked to the Looper control can be used to view the additional rows.
  • for an Ajax looper, a scrollbar is used to view the additional rows.
If the looper contains a number of rows less than this value:
  • for a classic looper that is not using the zoning mode, the space is kept for the rows.
  • Versions 17 and later
    for a classic looper that is using the zoning mode and an anchoring adapted to the content, the space is not kept for the rows. The controls positioned below the looper are automatically "stuck" to the looper.
    New in version 17
    for a classic looper that is using the zoning mode and an anchoring adapted to the content, the space is not kept for the rows. The controls positioned below the looper are automatically "stuck" to the looper.
    for a classic looper that is using the zoning mode and an anchoring adapted to the content, the space is not kept for the rows. The controls positioned below the looper are automatically "stuck" to the looper.
  • for an Ajax looper, the space is kept for the rows.
This option is available for the standard and Ajax loopers.
Notes:
  • The maximum number of rows per page can be modified by programming via ..NbLinesPerPage.
  • When creating a browsing looper, a pager is automatically associated with the looper if the number of rows found in the looper is greater than the maximum number of rows. The pager is used to display all looper records.

Popup menu

A popup menu can be displayed for a looper. This popup menu will allow the user to export the looper content to Excel, Word, OpenOffice, XML, ...
To display this popup menu, check "Popup menu" ("General" tab in the description window of control). You also also have the ability choose the image that will be used for the popup menu. We recommend that you use an image with the following dimensions: 15 x 15 pixels.
The popup menu is available for the classic and Ajax loopers.
Versions 20 and later

Direct acess to the properties of controls

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 found in a Looper control:
LOOP_MyLooper[nRow].STC_MyStatic..BrushColor = MyColor
New in version 20

Direct acess to the properties of controls

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 found in a Looper control:
LOOP_MyLooper[nRow].STC_MyStatic..BrushColor = MyColor

Direct acess to the properties of controls

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 found in a Looper control:
LOOP_MyLooper[nRow].STC_MyStatic..BrushColor = MyColor

Display mode

Several display modes are available:
  • Fixed number 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.
  • Variable number 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.
    This display mode is available for the standard and Browser loopers.
This information can be configured in the "General" tab of the description of Looper control:
Several display modes are available:
  • 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.
  • 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.
    This display mode is available for the standard and Browser loopers.
    You have the ability to define the minimum number of columns.
    In Responsive Web Design mode, a pictogram appears on the right of edit control for the minimum number of columns: . This pictogram indicates that this value is specific to each blade. Therefore, this value must be modified for each blade found in the page.
    Versions 22 and later
    A click on this picto is used to directly define the values for each blade via the following window:
    New in version 22
    A click on this picto is used to directly define the values for each blade via the following window:
    A click on this picto is used to directly define the values for each blade via the following window:
This display mode is available for the standard, Ajax and Browser loopers.
  • Versions 21 and later
    Number of columns per blade. In a page in Responsive Web Design mode, the number of columns can evolve according to the blade. Each blade 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 blade width (which means 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 pictogram indicates that this value is specific to each blade. Therefore, this value must be modified for each blade found in the page.
    Versions 22 and later
    A click on this picto is used to directly define the values for each blade via the following window:
    New in version 22
    A click on this picto is used to directly define the values for each blade via the following window:
    A click on this picto is used to directly define the values for each blade via the following window:

    This display mode is available for the standard loopers only.
    New in version 21
    Number of columns per blade. In a page in Responsive Web Design mode, the number of columns can evolve according to the blade. Each blade 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 blade width (which means 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 pictogram indicates that this value is specific to each blade. Therefore, this value must be modified for each blade found in the page.
    Versions 22 and later
    A click on this picto is used to directly define the values for each blade via the following window:
    New in version 22
    A click on this picto is used to directly define the values for each blade via the following window:
    A click on this picto is used to directly define the values for each blade via the following window:

    This display mode is available for the standard loopers only.
    Number of columns per blade. In a page in Responsive Web Design mode, the number of columns can evolve according to the blade. Each blade 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 blade width (which means 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 pictogram indicates that this value is specific to each blade. Therefore, this value must be modified for each blade found in the page.
    Versions 22 and later
    A click on this picto is used to directly define the values for each blade via the following window:
    New in version 22
    A click on this picto is used to directly define the values for each blade via the following window:
    A click on this picto is used to directly define the values for each blade via the following window:

    This display mode is available for the standard loopers only.
This information can be configured in the "General" tab of the description of Looper control:
In order for the looper to be extensible (with a variable number of columns), the following conditions must be fulfilled:
  • no pager.
  • If the page is using the generation mode compatible with version 16, the home area of looper must be extensible in width. To do so:
    • Display the extensible areas if necessary ([CTRL] + [I] or "Display .. View the extensible areas").Display the extensible areas if necessary ([CTRL] + [I] or "Display .. Extensible areas").
    • Click the number that appears at the bottom of screen, below the looper. In the window that is displayed, click "Extensible" and specify "100%".
  • Versions 17 and later
    If the page is using the zoning mode, the looper must be anchored in height and in width.
    New in version 17
    If the page is using the zoning mode, the looper must be anchored in height and in width.
    If the page is using the zoning mode, the looper must be anchored in height and in width.
Versions 15 and later

Display direction

You have the ability to choose the row direction in the looper:
  • vertical row (by default)
  • horizontal and vertical row.
This option is available for the loopers with a fixed number of columns greater than 1.
This option is not available:
  • for the Ajax loopers
  • Versions 17 and later
    for the Browser loopers.
    New in version 17
    for the Browser loopers.
    for the Browser loopers.
New in version 15

Display direction

You have the ability to choose the row direction in the looper:
  • vertical row (by default)
  • horizontal and vertical row.
This option is available for the loopers with a fixed number of columns greater than 1.
This option is not available:
  • for the Ajax loopers
  • Versions 17 and later
    for the Browser loopers.
    New in version 17
    for the Browser loopers.
    for the Browser loopers.

Display direction

You have the ability to choose the row direction in the looper:
  • vertical row (by default)
  • horizontal and vertical row.
This option is available for the loopers with a fixed number of columns greater than 1.
This option is not available:
  • for the Ajax loopers
  • Versions 17 and later
    for the Browser loopers.
    New in version 17
    for the Browser loopers.
    for the Browser loopers.

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.
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 by 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 looper contains a number of rows exceeding this value:
  • for a standard looper, a Pager control linked to the Looper control can be used to view the additional rows.
  • for an Ajax looper, a scrollbar is used to view the additional rows.
If the looper contains a number of rows less than this value:
  • for a classic looper that is not using the zoning mode, the space is kept for the rows.
  • for a classic looper that is using the zoning mode and an anchoring adapted to the content, the space is not kept for the rows. The controls positioned below the looper are automatically "stuck" to the looper.
  • for an Ajax looper, the space is kept for the rows.
This option is available for the standard and Ajax loopers.
Notes:
  • The maximum number of rows per page can be modified by programming via ..NbLinesPerPage.
  • When creating a browsing looper, a pager is automatically associated with the looper if the number of rows found in the looper is greater than the maximum number of rows. The pager is used to display all looper records.

Popup menu

A popup menu can be displayed for a looper. This popup menu will allow the user to export the looper content to Excel, Word, OpenOffice, XML, ...
To display this popup menu, check "With popup menu". You also also have the ability choose the image that will be used for the popup menu. We recommend that you use an image with the following dimensions: 15 x 15 pixels.
The popup menu is available for the classic and Ajax loopers.

Direct access to the properties of 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 found in a Looper control:
LOOP_MyLooper[nRow].STC_MyStatic..BrushColor = 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. A pictogram ( ) indicates that this value is specific to each blade. Therefore, this value must be modified for each blade found in the page.
      A click on this picto is used to directly define the values for each blade via the following window:

      This display mode is available for the standard loopers.
    • Number of columns per blade. In a page in Responsive Web Design mode, the number of columns can evolve according to the blade. Each blade 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 blade width (which means 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 pictogram indicates that this value is specific to each blade. Therefore, this value must be modified for each blade found in the page.
      Versions 22 and later
      A click on this picto is used to directly define the values for each blade via the following window:
      New in version 22
      A click on this picto is used to directly define the values for each blade via the following window:
      A click on this picto is used to directly define the values for each blade via the following window:

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

Display mode: Gallery in row

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 control, a clickable Image control or a Thumbnail control. If the source image is smaller than the dimensions defined in the editor , the dimensions of reference control will be applied to the image at run time.
  • 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 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 by programming with ..AnimationDuration.
See Gallery Looper for more details.

Display mode: Gallery in column

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 pictogram indicates that this value is specific to each blade. Therefore, this value must be modified for each blade found in the page. A click on this picto is used to directly define the values for each blade 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 control, a clickable Image control or a Thumbnail control. If the source image is smaller than the dimensions defined in the editor , the dimensions of reference control will be applied to the image at run time.
  • 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 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.
See Gallery Looper for more details.
Control style ("Style" tab)

"Border/Background" element: Thickness of border

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 required version
  • Version 9
Comments
Click [Add] to post a comment