|
|
|
|
|
|
|
|
- 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
Characteristics of the Looper control 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.
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: - 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: 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.
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.
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.  New in version 28Different 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: - 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:
| | | Adds a row as an internal page at the end of a Looper control populated programmatically. | | Inserts a row as an internal page into a Looper control populated programmatically. | | 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 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:
|
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:
|
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.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|