|
|
|
|
|
|
|
|
|
|
- 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: Online gallery
- Display mode: Column gallery
- Content of a Looper control manipulated programmatically
- Infinite looper
- Different content on each row of the Looper control
- Control style ("Style" tab)
- Element "Frame/Background": Frame thickness
- Left button, Right button and Close button
Characteristics of Looper controls in a page
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.
Note: This type of RepeatString zone means that the page is not completely refreshed for 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.
Note: This type of RepeatString zone can be fully manipulated 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 WebApp sites. It can also be used in static sites.
WEBDEV also includes different display modes: - Grid view: This view displays the various fields of the RepeatString as a grid.
- Online gallery: This presentation mode allows you to create an online image gallery.
- Column gallery: This presentation mode allows you to create a column gallery of images.
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: - 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 mode of operation is compatible with any display mode: grid view, online gallery or column gallery. - 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 manipulated 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 "Show AAF menu button in the first cell". You can also choose the image that will be used for the context menu. We recommend using an image with the following dimensions: 15 X 15 pixels. The context menu is available only for standard and AJAX Looper controls.  New in version 2025You can customize this context menu, for example by adding specific options, using the ContextMenu property. 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 Text control in a Looper control: LOOP_MyLooper[nRow].STC_MyStatic.ColorBackground = MyColor Display mode and its settings ("Details" tab) Display mode: Online gallery If the Looper control shows the data as a gallery in rows, you can define several options: - Reference control for the height Set the RepeatString field to be used as a reference for the width of the images displayed in the line. 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 Dequeue: Automatically displays a popup allowing you to dequeue the various gallery items. 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: Enables an effect to be obtained when reorganizing rows in the event of browser resizing. The duration of this animation can be specified. This value can be modified using the AnimationDuration property.
Display mode: Column gallery 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: - Height reference field Set the RepeatString field to be used as a reference for the height of images displayed in the line. 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.
- When clicked, opens an automation scroll popup Dequeue: automatically displays a popup allowing you to dequeue the various elements of 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 cell reorganization on resizing Animate cell rearrangement on resizing: This animates the rearrangement of rows when the browser is resized. The duration of this animation can be specified.
Content of a Looper control manipulated programmatically Infinite looper One way of filling a RepeatString Looper control is "if necessary": only data visible to the user is loaded into memory. The additional data is loaded on demand (when using the scrollbar for example).
Advantages Low memory footprint, faster display speeds and reduced bandwidth consumption.
Disadvantage No sorting or searching until all data is available. Different content on each row of the Looper control The RepeatString Looper control fields let you fully customize the appearance of repeats: layout, content, etc.. This makes it possible to place Looper controls within other Looper controls. To create a Looper control with variable content: - Create a Looper control populated programmatically. This control must be a vertical Looper control containing a single column.
- Open the Looper control description window.
- In the "Content" tab of the control description, check "Use an internal page per row (LooperAddIP function)".
- Validate the control description window.
- Create the different internal pages for the rows of the Looper control.
- Add the internal pages to the Looper control using the following functions:
| | | LooperAddIP | Adds a row as an internal page at the end of a Looper control populated programmatically. | | LooperInsertIP | Inserts a row as an internal page into a Looper control populated programmatically. | | LooperModifyIP | Modifies 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 using an internal page corresponds exactly to the height of the internal page defined in editing. 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.
Note: If the internal page has fields adapted to the content, the row height will be increased or decreased according to the content.
Related Examples:
|
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) Element "Frame/Background": Frame 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:
|
Unit examples (WEBDEV): The Looper control (display the bounds)
[ + ] This example explains how to display the bounds of a looper with custom pager.
|
|
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.
|
|
Unit examples (WEBDEV): The Looper control (selection bar)
[ + ] This example explains how to simulate a selection bar in a looper
|
|
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.
|
|
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
|
|
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
|
|
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.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|