ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

New WEBDEV 2024 feature!
Help / WEBDEV Tutorial / Tutorial - Creating a website with back office processes
  • Lesson 2 - Listing products
  • Overview
  • First page to list products
  • Creating a page based on a template
  • Creating controls in the page
  • Creating the Looper control
  • Editing a Looper control
  • Editing controls in the Looper
  • Page test
  • Adding data to the Looper control
  • Creating the "ARRIVAL" control
  • Looper control configuration
  • Page test
  • Managing the menu
  • Page test
  • To sum up

Tutorial - Creating a website with back office processes

Lesson 2 - Listing products
We will cover the following topics:
  • Creating a page in Session mode based on a template.
  • Creating page controls: Looper, etc.
  • Page optimization.
  • Page test.
Durée de la leçon 50 mn
Overview
We will create the different pages of the WEBDEV website in Session mode to list, edit and add products. This will allow you to understand:
  • how to use WEBDEV to create pages in Session mode,
  • how to access the database.
You will also be able to use some practical features of WEBDEV.

In this lesson, we will learn how to list products from a data file. In the next lessons, we will look at how to create and edit a product.
Opening the example project:
In WEBDEV, open the "Full_WEBDEV_Site" project:
  1. Go to the WEBDEV home page (Ctrl + <).
  2. Click "Tutorial", then in "Tutorial - Create a WEBDEV website (Back Office and Front Office)", double-click "Full WEBDEV Site - Exercise".
Warning
This project will be used in the different lessons of this tutorial.
First page to list products
First, let's create a page to list the available products. We will display the image, description and price of each product in a table-like layout. To do so, we will use a Looper control. We will also create a menu to open this page.

Creating a page based on a template

First, let's create a blank page to display the products. This page will be based on a page template.
A page template allows you to group different processes and part of the UI in a single element.
It is recommended to use page templates to obtain a consistent, easily reusable interface.
WEBDEV offers a number of preset page templates.

To create a page using a template, follow these steps:
  1. Click Create an element in the quick access buttons (or press Ctrl + N). The new element window appears.
  2. Click "Page" then "Page". The page creation wizard appears.
    Page creation wizard
  3. Select "PAGETPL_Menu".
  4. Finish the wizard ("OK"). The page is created and the save window appears.
  5. Type the page title: "List of products". The page name "PAGE_List_of_products" is automatically filled in.
    Save page
  6. Validate.
Let's take a closer look at the elements that have been created. We can see:
  • a page in the main area of the page editor.
  • a few controls with yellow squares at the upper-left corner.
Page in the editor
The controls in the page and the yellow square at the top left each control indicate that the page is based on a template.
Creating controls in the page

Creating the Looper control

We will use a Looper control to create the list of products. This control will be related to the "Product" data file.
What is a Looper control?
A Looper control displays a list of elements in a web page. A Looper control includes a series of rows that can contain multiple controls and be repeated a given number of times.
Each row can hold different data.

A Looper control creation wizard will guide us through the creation process:
  1. On the "Creation" tab, in the "Data" group, expand "Looper" and select "Looper".
  2. Click in the upper-left corner of the page, just below the menu: the Looper control creation wizard opens. The wizard asks how the Looper control will be populated. There are several options:
    • from a data file or query,
    • from a WLanguage variable,
    • programmatically (we will see this option in another tutorial).
    In this example, the Looper control should display all the products. Select "Display the data coming from a file or from a query".
    New Looper control - Population mode
    Go to the next step.
  3. The next step of the wizard lists the different data files and queries present in the current project. In "Analysis", select the "Product" data file.
    New Looper control - Associated data file
    Go to the next step.
  4. The wizard then shows the list of items in the data file. By default, all items are checked so that they appear in the Looper control. In our case:
    • we will keep all items, except "Description" and "Arrival". Uncheck these two items.
    • we will change the order of the items before creating the Looper control. Thus, the controls will be correctly positioned once the Looper control is created. Use the arrow buttons to rearrange the items as follows: Visual, Reference, Caption, PriceBT, ProductID.
      New Looper control - Items to display
      Go to the next step.
  5. Then, the wizard prompts you to select the search key, which defines the default order of data in the Looper control. The items displayed in the wizard are the ones defined as key items in the analysis.
    We covered the concept of keys in the analysis in Creating a project and its analysis.

    We will set the order of the items based on their caption.
    New Looper control - Search key
    Select "Caption" and go to the next step.
  6. We will define additional settings for the new Looper control:
    • The Looper control will be in Server mode: all data will be displayed when the page loads.
      In "Operating mode", select "Server".
    • The Looper control will have an unlimited number of rows. All products must be accessible directly in the page. The page will be enlarged to display all the products.
      In "Maximum number of rows per page", select "No limit".
      New Looper control - Operating mode
  7. Go to the next step. The Looper control will display the products on 4 columns.
    • Keep the default option: "Fixed number of columns, Fill by rows".
    • In the "Number of columns" field, replace 1 with 4.
      New Looper control - Operating mode
  8. Finish the wizard. The Looper control is automatically created in the page.
Let's look for a moment at the Looper control we have just created: the data is already displayed in the control, even in the editor.
New Looper control - Operating mode
This concept is referred to as "Live data": the content of the data files located on the development computer is used in the pages or reports handled in the editor. This feature is useful to define the size of the controls in a page, for example.

Editing a Looper control

We are going to reposition the Looper control in the page:
  1. Select the Looper control.
    To select a control, simply click on it and the selection handles will appear.
    In the case of a Looper control, it's a little more complicated because it contains other controls. A simple way to select a Looper control is to click its gray area.
  2. If necessary, move the control to the upper-left area of the page. When the control reaches the edge of the display area in the page template, green lines appear: these lines help you position the control inside the display area.
The 4 cells of the Looper control do not fit in the page. Therefore, we need to reduce the size of the cells.
  1. Select the Looper control if necessary.
  2. Select the middle handle.
  3. Hold down the left mouse button and reduce the size of the cell. Since the controls in each cell are "anchored" by default, they will shrink as you reduce the Looper control. The Image control is the only one that keeps its size.
    Anchoring is a technique used to define how controls react when the browser is resized. For more details, see Anchors, zoning and layouts.
Red dotted lines appear around the Image control to indicate that it does not fit in the cell.
Reduce the Image control so that it does not overflow the cell. The red dotted lines no longer appear.

Editing controls in the Looper

After resizing the Looper control, the area that hosts the controls was significantly reduced. To improve readability, we will reduce the height of the controls, remove their captions and resize the display area.
We will perform these operations on the "Reference" control, and then apply them automatically to all the other controls.
To delete the control caption:
  1. Select the Reference control.
  2. Open the description window (Alt + Enter).
  3. Delete the caption and confirm.
  4. Select the other controls 1 by 1 and press F4 each time: the same changes are applied to each control.
Let's resize the control to hide the empty area:
  1. Select the Reference control again.
  2. Select the inner handle and drag it to hide the area where the text was.
  3. Select the other controls 1 by 1 and press F4 each time: the same changes are applied to each control.
Now we need to adjust the height of the control:
  1. Select the Reference control.
  2. In the status bar, change the height of the control from 71 to 23.
  3. Select the other controls 1 by 1 and press F4 each time: the same changes are applied to each control.
We will hide the control containing the product identifier. Why hide it instead of deleting it? Because this identifier will be useful in the rest of our development project.
  1. Select the "STC_ProductID" control. This control corresponds to the identifier (control with a number at the bottom of the looper).
  2. Open the control description window (select "Description" in the context menu).
  3. In the "UI" tab, uncheck "Visible".
  4. Validate the control description window.
We will now rearrange the controls in the Looper control. To view the area occupied by each control, press F7.
  1. Select each control and move it up in the cell.
  2. Move the controls closer together.
  3. Position the control containing the identifier to the right of the "Price BT" control.
  4. Select the cell and reduce it vertically using the selection handles.
  5. Select the footer area and move it up to reduce the space between the end of the cell and the footer.
You will get the following interface:

Page test

Let's test the page to see the result of all these changes in the browser:
  1. Click Test page in the quick access buttons.
  2. The page appears in the browser.
  3. Close the browser.
In the test page, a "margin" appears between the different products. However, this margin is not visible in the editor. This is due to the anchors, and more specifically to the anchors defined for the Image control. We saw that the Image control didn't have any anchors. We resized it so that it fit into the cell. Now, to remove the "margins" and allow the image to be resized with the browser, we will define specific anchors for the Image control:
  1. Select the Image control.
  2. In the context menu, select "Anchor".
  3. In the window that appears, specify the new anchoring options of the control:
    • Horizontal anchors: Enlarge or reduce like the browser (or its container)
    • Vertical anchors: Fit to content and pull other controls.
  4. Validate.
Test the page again.
Adding data to the Looper control
This page lists the different products available on our website. When we created Looper control, we didn't include the "Arrival" item. We are now going to add this information by creating a Rich Text Area control, visible only if the product is a new arrival.

Creating the "ARRIVAL" control

First, we will create a Rich Text Area control.
  1. On the "Creation" tab, in the "Usual controls" group, expand "Text" and select "Rich Text Area".
  2. Click in the Looper control, below the Price control. The control is created and selected.
  3. Press the Space key: the text becomes editable.
  4. Enter "ARRIVAL" and confirm.
Don't forget to align the "Arrival" control with the other controls in the cell. You will get the following:

Looper control configuration

Now, we want the ARRIVAL text to appear only if the product is new. To do so, we will change the Looper control settings via the description window.
First, let's open the control description window:
  1. Select the Looper control.
    Tip: To make sure you select the Looper control, click the control while holding the Shift key: a window appears, allowing you to select the desired control.
  2. Press Alt + Enter to open the description window.
Several controls appear in the description window:
  • the different attributes appear in the upper section. These attributes indicate which parameters will change in each cell.
  • in the lower section, the characteristics of each attribute are displayed in different tabs.
Let's add an attribute for the Arrival control we have just created:
  1. Click the "New" button. A new attribute is automatically created.
  2. Change the characteristics of the attribute as follows:
    • Name the attribute "ATT_Arrival".
    • Bind the attribute to the Arrival control we have just created. Select "RTA_ARRIVAL".
    • The property to be used can change in each cell. In our case, let's change the visibility of the control. If the product is new, the "ARRIVAL" control must be displayed. Select "Visible".
  3. In the "Binding" tab, we will select the item bound to the attribute. In our case, it is the Arrival item from the Product data file.
    • Expand "Analysis", then "Product".
    • Select the "Arrival" item.

      The Arrival item is of type Boolean. If the value from this item corresponds to 1, the product is a new arrival.
  4. Validate.

Page test

Let's test the page to see the result of all these changes in the browser:
  1. Click Test page in the quick access buttons.
  2. The page appears in the browser.
  3. Close the browser.
Managing the menu
We will modify the page menu to show an option to list the products. The menu is in the page template. Therefore, we will modify the page template.
To open the page template:
  1. Right-click the "List of products" option in PAGE_List_of_products and select "Open template".
    View of the page template
  2. The page template appears in the editor. Select the menu of the page template.
  3. Right-click to open the context menu and select "Edit menu". A yellow outline appears around the menu. This outline indicates that the menu is in "Edit" mode: it can be modified.
    Template menu in Edit mode
  4. Right-click the "List of products" option and select "Option description" in the context menu.
  5. In the "General" tab, in "Option action":
    • Select "Display a site page".
    • Select "PAGE_List_of_products".
  6. Validate the option description window.
  7. Press Esc to exit from the edit mode.
    We have modified the menu of the template. You can also modify other elements such as the logo or the "Company" label.
Now, we can simply update all the pages that use the modified template.
To update the pages that use the template:
  1. In the template bar, click Apply changes of the page template: this button applies the changes made to the template to all the pages that use it.
    If you don't apply the changes to the pages, you will be asked to synchronize the templates before testing or deploying a page.
  2. In our case, only one page is proposed.
    Pages for which the template must be updated
  3. Click OK to confirm the template update.
  4. Close the page template.
Now, we want the "List of products" option to be selected when the corresponding page is displayed. To do so, we will override the menu displayed in "PAGE_List_of_products", and then the "List of products" option.
Perform the following actions:
  1. Open the context menu of the menu (right-click "List of products", for example) and select "Override control".
  2. Open the context menu of the menu again and select "Edit menu". The menu switches to edit mode: a yellow outline appears around the menu.
  3. Open the context menu of "List of products" and select "Override control".
  4. Open the context menu of "List of products" again and select "Set this menu option as selected".
  5. Press Esc to exit edit mode.
  6. Save the page (Ctrl + S).
The page is ready to be tested.

Page test

We will test the page that we have just created.
  1. Click Test page in the quick access buttons.
  2. The page is automatically displayed in the browser.
    Web page with the list of products
  3. You can scroll through the products with the scrollbar of the page.
Close the browser. The WEBDEV editor appears again.
To sum up
In this lesson, we discovered how to manipulate web-specific controls (Looper control) to display data coming from a database. We also manipulated the page template and overrode the menu.
In the next lesson, we will see how to edit a record and improve the website design.
Completed project
If you want to check the end result of the steps described here, you can open a completed version of the project. This project contains the different pages created in the lessons of this part. This project illustrates the expected end result. To open the completed project, go to the WEBDEV home page and click "Tutorial", then in "Tutorial - Create a WEBDEV website (Back Office and Front Office)", double-click "Full WEBDEV Site - Answers". "PAGE_List_of_products" is located in the "Administration pages" folder.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 2024
Comments
Click [Add] to post a comment

Last update: 12/13/2023

Send a report | Local help