ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Looper control
  • 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 settings ("Details" tab)
  • Display mode: Grid view
  • Display mode: Gallery in rows
  • Display mode: Gallery in columns
  • Content of a Looper control handled programmatically
  • Infinite looper
  • Different content on each row of the Looper control
  • Control style ("Style" tab)
  • "Border/Background" element: Border thickness
  • Left button, Right button and Close 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. There are two types of information:
  • information about the entire Looper control (select the name of the Looper control).
  • information about each attribute of the looper (select the name of the 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.
  • Browser looper.
    Remark: This type of looper can be handled programmatically 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 WebApp sites. It can also be used in static sites.
WEBDEV also includes different display modes:
  • Grid view: This mode displays the different controls of the Looper in a grid view.
  • Gallery in rows: This display mode creates an image gallery in rows.
  • Gallery in columns: This display mode creates an image gallery in columns.
The different tabs in the Looper control description window allow you to define:
  • the operating mode ("General" tab).
  • the initial state of the control and the selection mode ("UI" tab).
  • the display mode and its settings ("Details" tab).
  • the population mode and the breaks ("Content" tab).
  • the style of the 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 entire page is refreshed each time an action is performed on the server.
    This operating mode includes an optional pager (to move between the different pages of data displayed by the control).
    This operating mode is compatible with any display mode: grid view, gallery in rows or gallery in columns.
  • 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 grid view.
  • Browser looper.
    This type of looper can be handled programmatically 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 WebApp sites. It can also be used in static sites.
    This operating mode is compatible with a grid view.

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 changed 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 export context 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 change the properties of the controls in the looper without declaring attributes.
For example, the following syntax can be used to change the background color of a Static control in a Looper control:
LOOP_MyLooper[nRow].STC_MyStatic.ColorBackground = MyColor
Display mode and its settings ("Details" tab)

Display mode: Grid view

There are multiple modes available if the Looper control displays the data in a grid view:
  • In Zoning mode:
    • Fixed number of columns/Fill by rows.
      All you have to do is specify the number of columns to display. The looper will be populated horizontally until it reaches the specified number of columns and then starts in a new row. The number of columns does not change when the user changes the page width.
      This display mode is available for standard, Ajax and Browser loopers.
    • Variable number of columns/Fill by rows.
      The number of columns depends on the page width. The number of columns increases or decreases when the user changes the page width.
      You can define the minimum number of columns.
      This display mode is available for standard and Browser loopers.
    • Fixed number of columns/Fill by columns.
      Specify the number of columns to display (greater than 1). The looper will be populated vertically until it reaches the specified number of rows and then starts a new column. The number of columns does not change when the user changes the page width.
      This display mode is available for 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 populated horizontally until it reaches the specified number of columns and then starts in a new row. The number of columns does not change when the user changes the page width.
      This display mode is available for standard, Ajax and Browser loopers.
    • Fixed width of columns.
      The number of columns depends on the page width. The number of columns increases or decreases when the user changes the page width.
      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.
      Click the icon to directly define the values for each slice in the following window:

      This display mode is available for standard loopers.
    • Number of columns per slice. In a page in Responsive Web Design mode, the number of columns can change according to the slice. Each slice has a different width.
      This display mode is only available for standard loopers.
      This allows you to adapt the number of columns according to the slice width (i.e. according to the browser size).
      When this option is selected, an icon appears to the right of the specified 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.
      Click the icon to directly define the values for each slice in the following window:

      This display mode is available for standard and Browser loopers.

Display mode: Gallery in rows

If the Looper control shows the data as a gallery in rows, you can define several options:
  • Reference control for the height: Allows you to define the control in the Looper control that will be used as reference for the width of the 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: Automatically opens a popup to scroll through the different elements in the gallery. This popup contains:
    • the elements in the row.
    • a "Close" button and the Next and Previous arrows. These elements can be set via the "Style" tab of the Looper control description window ("Left button", "Right button" and "Close button" elements).
  • Animate during reorganization of cells when resizing: Applies an effect when the browser is resized and the rows are reorganized. 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 shows the data as a gallery in columns, you can define several options:
  • Fixed number of columns/Variable width.
    The looper will be populated horizontally until it reaches the specified number of columns and then starts in a new row. The number of columns does not change when the user changes the page width.
    This display mode is available for standard loopers.
    The number of columns to display must be specified.
  • Variable number of columns/Variable width.
    The number of columns depends on the page width. The number of columns increases or decreases when the user changes the page width.
    This display mode is available for standard loopers.
  • Variable number of columns/Fixed width.
    The looper will be populated horizontally, and then vertically. The number of columns and the width of each row changes when the user changes the page width.
    This display mode is available for 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. Click the icon to directly define the values for each slice in the following window:
Options specific to the gallery in columns are also available:
  • Reference control for the height: Allows you to define the control in the Looper control that will be used as reference for the height of the 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.
  • Open an automatic scroll popup on click: Automatically opens a popup to scroll through the different elements in the gallery. This popup contains:
    • the elements in the row.
    • a "Close" button and the Next and Previous arrows. These elements can be set via the "Style" tab of the Looper control description window ("Left button", "Right button" and "Close button" elements).
  • Animate cells when resized and reorganized: Applies an effect when the browser is resized and the rows are reorganized. The duration of this animation can be specified.
For more details on loopers in gallery mode, see Gallery Looper.
Content of a Looper control handled programmatically

Infinite looper

Looper controls can be populated "if necessary": only the data visible to the user is loaded in memory. The additional data is loaded on demand (when using the scrollbar for example).
Benefit: Low memory usage, less loading time and lower bandwidth consumption.
Drawback: No sorting or searching until all data is available.
For more details, see Infinite Table and Looper controls.

Different content on each row of the Looper control

The Looper controls allow you to customize the appearance of rows: layout, content, etc. This makes it possible to place Looper controls within other Looper controls.
To create a Looper control with variable content:
  1. Create a Looper control populated programmatically. This control must be a vertical Looper control containing a single column.
  2. Open the Looper control description window.
  3. In the "Content" tab of the control description, check "Use an internal page per row (LooperAddIP function)".
  4. Validate the control description window.
  5. Create the different internal pages for the rows of the Looper control.
  6. Add the internal pages to the Looper control using the following functions:
    LooperAddIPAdds a row as an internal page at the end of a Looper control populated programmatically.
    LooperInsertIPInserts a row as an internal page into a Looper control populated programmatically.
    LooperModifyIPModifies a row corresponding to an internal page in a Looper control populated programmatically.
Characteristics of internal pages
The following rules apply to the width and height of internal pages:
  • Height: The height of the row that contains an internal page corresponds exactly to the height of the internal page defined in edit mode. The internal page cannot be higher than the Looper control.
  • Width:
    • If the width of the internal page is less than the width of the Looper control, the internal page is automatically increased and anchors are applied.
    • If the width of the internal page exceeds the width of the Looper control, the internal page is automatically truncated.
    As a general rule, it is recommended to create the internal page with the smallest possible width and to use anchors.
Remark: If the internal page includes controls adapted to content, the row height will be increased or reduced according to the content.
Related Examples:
WW_Looper_InternalPage Training (WEBDEV): WW_Looper_InternalPage
[ + ] This example shows how to use internal pages in a Looper control. This makes it possible to integrate Table, Chart or even Looper controls into another Looper control.
Control style ("Style" tab)

"Border/Background" element: Border thickness

The thickness of the borders of the different rows in the looper may vary depending on the browser.
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.

Left button, Right button and Close button

The "Left button", "Right button" and "Close button" elements are used to customize the elements in the popup window displaying the image when scrolling through the images automatically (image gallery in rows or in columns).
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

Last update: 06/28/2023

Send a report | Local help