ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / WEBDEV Tutorial / Tutorial - Creating a website with data
  • In this lesson you will learn the following concepts
  • Overview
  • Creating an Active WEBDEV Page to list new products
  • Creating the page
  • Creating the list of new products
  • Viewing the details of a new product
  • Creating the page
  • What is this page for?
  • Creating controls
  • Displaying data in the page
  • Opening the form from the list of products
  • Managing styles
  • Importing a CSS style sheet
  • Applying CSS styles
  • Linking the Internet and Intranet sites
  • Creating a page for the general sales conditions
  • Creating the page
  • Creating the control
  • Conclusion
Lesson 4.2. Creating Active WEBDEV Pages
In this lesson you will learn the following concepts
  • Creating an Active WEBDEV Page to list new products.
  • Creating a product form in AWP mode.
  • Importing CSS styles.
  • Link between the Internet section and the Intranet section of the site.
  • Creating a page for general sales conditions.
Lesson duration

Estimated duration: 50 mn
Previous LessonTable of contentsNext Lesson
Overview
We will create different Active WEBDEV Pages to list, add and modify products. These operations will allow you to discover several aspects of the data files and use some features of the AWP mode­.
We will perform these operations in the "Full_WEBDEV_Site" project. We worked on this project in the previous part.

  • To open this project:
    1. Start WEBDEV if necessary.
    2. Go to the WEBDEV home page (Ctrl + <).
    3. On the home page, click "Tutorial", then in "Parts 3 to 6", double-click "Full WEBDEV Site - Exercise".
    4. WEBDEV opens a dialog box to inform you that the project has already been opened and prompts you to open the local version or overwrite the project with the original version. To retrieve your changes, click "Open the local copy".

Answers

A completed project is available. This project contains the different pages created in this lesson. To open the completed project, go to the home page and click "Tutorial", then in "Parts 3 to 6", double-click "Full WEBDEV Site - Answers".
Creating an Active WEBDEV Page to list new products
We will create a page to list the new products in the "Full_WEBDEV_Site" project. It will be a "Showcase" page and will be accessible via the Internet. This page will be listed in search engines, therefore it must use the AWP generation mode.

Creating the page

  • To create the page that will list the new products:
    1. Create a new page:
      • Click Create an element in the quick access buttons.
      • The new element window appears: click "Page" then "Page".
      • In the page creation wizard, click the "Simple" preset page.
        New page
      • Make sure the option "Create: a page and its template" is checked.
      • Validate the wizard.
    2. The new page is appears in the editor. The save window is displayed.
    3. Enter the page title: "List of new products". The page name "PAGE_List_of_new_products" is automatically filled in.
    4. Validate.
  • The page is created with controls in a preset layout. Delete these controls:
    1. Select the controls in the page (press Ctrl + A).
    2. Delete the controls (Del key).
  • This page will be listed in search engines. To do so, it must be generated in AWP mode:
    1. Open the page description window: open the context menu and select "Description".
    2. Go to "General", "Type of page", "Mode", and select "AWP".
      AWP mode
    3. Validate.
    4. Save changes by clicking Save an element in the quick access buttons.

Creating the list of new products

We will display the list of new products. To do so, we will use a Looper control. In the previous part, we already explained how to create this type of control via the wizard, without programming. For this page, we will see how to programmatically populate the Looper control.
Creating the Looper control
  • To create the Looper control:
    1. On the "Creation" tab, in the "Data" group, expand "Looper" and select "Looper". The control will follow the mouse cursor.
    2. Click in the upper-left corner of the page: the Looper control creation wizard opens.
    3. In the wizard, select "Populate the Looper control programmatically".
      Looper control creation wizard
      Go to the next step.
    4. In the next step, 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".
        Looper control creation wizard
    5. Go to the next step. We will configure the display parameters.
      • Keep the default display direction: fixed number of columns, fill by rows.
      • The Looper control will display the new products on 5 columns.
        In the "Number of columns" field, replace 1 with 5.
    6. Go to the next step.
    7. In the last step, specify the control name (LOOP_NewProducts, for example).
    8. Validate the wizard. The Looper control is automatically created in the page.
The new Looper control is empty. WEBDEV represents the main cell (the one that will be edited) with a solid line and the other ones with a dotted line.

  • Use the control handles to reduce the width of the main cell and make the 5 cells fit in the page horizontally.
    Looper control in edit mode in the page
We will create the different controls to be displayed in the Looper control.
Each row will contain:
  • An Image control that will display the product image.
  • A Link control that will display the product name and open the detailed form.
  • A Static control that will contain the product identifier.
We will create these controls and populate the Looper control programmatically.
Creating controls inside the Looper control
  • To create the Image control:
    1. On the "Creation" tab, in the "Usual controls" group, click "Image". The control appears under the mouse cursor.
    2. Hover over the first row: a green border appears, allowing you to see the available area.
    3. Click in the upper-left corner of the first row in the Looper control. The Image control is created. Enlarge the control using the sizing handles. You get the following page:
      Creating an Image control in the Looper control
    4. Double-click the Image control to open the description window and change the characteristics of the control.
    5. Change:
      • the control name: IMG_Visual.
      • the image display mode: select "Homothetic" and check "Without image enlargement" and "Center image in the control".
      • the image transformation mode. In our case, the product image is stored as a memo item in the Product data file. Choose a transformation calculated on the server to optimize bandwidth and check "High quality".
    6. Validate.
  • To create the Link control:
    1. On the "Creation" tab, in the "Usual controls" group, click "Link".
    2. Click the Looper control below the Image control to create the Link control.
      Creating a Link control in the Looper control
    3. Double-click the Link control to open the description window and change the characteristics of the control.
    4. Name the control "LINK_View_Product".
    5. Validate the control description window.
    6. Use the sizing handles to enlarge the Link control horizontally so that it fits the row.
  • To create the Static control containing the product identifier:
    1. On the "Creation" tab, in the "Usual controls" group, expand "Text" and select "Simple static".
    2. Click the Looper control, to the right of the Image control to create the Static control.
      Creating a Static control in the Looper control
    3. Double-click the Static control to open the description window and change the characteristics of the control.
    4. Name the control "STC_Product".
    5. Validate the control description window.
We will add attributes to populate the controls inside the Looper control and change their characteristics on each row.

Note

A Looper control includes:
  • controls, that are repeated on each row.
  • attributes. An attribute defines the control characteristic that will change on each row. For example, if the value and color of the PRICE control must change on each row, you need to define two different attributes for the same control.

  • To create attributes:
    1. Double-click the Looper control to open the description window.
    2. In the upper section of the window, no attribute has been created. We will define 3 attributes (one for each control in the Looper control).
    3. Create a new attribute by clicking the "New" button:
      • Rename the attribute to "ATT_Image".
      • Select the "IMG_Visual" control.
      • Select the "Value" property. The image value will change at each cell.
        Description of the ATT_Image attribute
    4. Create a new attribute by clicking the "New" button:
      • Rename the attribute to "ATT_Link".
      • Select the "LINK_View_Product" control.
      • Select the "Caption" property. The control caption will change at each cell.
    5. Create a new attribute by clicking the "New" button:
      • Rename the attribute to "ATT_ID".
      • Select the "STC_Product" control.
      • Select the "Caption" property. The control caption will change at each cell.
        Looper control description
    6. Validate the Looper control description window.
    7. Save changes (Save an element or Ctrl + S).
We have created the Looper control. We will now program how it will be populated.
Populating the Looper control
The Looper control is populated when the page is initialized.

  • To populate the Looper control:
    1. Open the WLanguage events associated with the page:
      • Click outside the page (e.g. on the work area, to the left or right of the page in the editor).
      • Right-click to open the context menu and select "Code", or press F2.
    2. Write the following code in the initialization event of the page:
      FOR EACH Product WITH Arrival = True
      LOOP_NewProducts.AddLine(Product.Visual,Product.Caption,Product.ProductID)
      END
    3. Let's take a look at this WLanguage code:
      • This code loops through the Product data file using the FOR EACH statement.
      • Only the records for which the "Arrival" item is set to True are selected.
      • <Looper>.AddLine adds a new row to the Looper control. The different attributes are updated with the data of the current record:
        • the value of the "ATT_Image" attribute corresponds to the image of the "Visual" item in the "Product" data file.
        • the caption of the "ATT_Link" attribute corresponds to the value of the "Caption" item in the "Product" data file.
        • the caption of the "ATT_ID" attribute corresponds to the value of the "ProductID" item in the "Product" data file.
    4. Save changes (Save an element or Ctrl + S).
    5. Close the code window.
  • 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.
      Page at runtime
  • Close the browser. The WEBDEV editor appears again.
Viewing the details of a new product
We already defined how the list of new products is displayed. Now, we will create a "form" page to see the product details. This page will be displayed when the user clicks the link with the product name in the Looper control.

Creating the page

  • To create the page that shows the product details:
    1. Create a new page.
      • Click Create an element in the quick access buttons.
      • The window for creating a new element appears: click "Page" then "Page".
      • The page creation wizard starts.
      • In "Based on a project template", select "PAGETPL_Simple" and validate the wizard.
    2. The page save window appears. Type the title: "Product details". The name "PAGE_Product_details" is automatically filled in.
    3. Validate.
  • As with the page that shows the list of new products, this page must be generated in AWP mode:
    1. Open the page description window (select "Description" in the context menu).
    2. In the "Type of page" section, select the "AWP" mode.
      Changing the type of page
    3. Validate.
    4. Save changes (Save an element or Ctrl + S).

What is this page for?

This page will display the characteristics of the product selected in the Looper control.
In our case, this page will display the contents of the different items from the "Product" data file.
First of all, we need to indicate which product will be displayed. To do so, simply declare a parameter in the page. This parameter will be passed in the URL.

  • To declare a parameter in the page:
    1. Press F2. The code editor displays the different page events.
    2. Write the following code in the "Global declarations" event:
      PROCEDURE MyPage(NumProductToDisplay is 8-byte int)
    3. Let's take a look at this WLanguage code:
      • The PROCEDURE keyword in the "Global declarations" event is used to associate a procedure to the opening of the page.
      • The name of the procedure is "MyPage". At runtime, this keyword will be automatically replaced with the name of the current page.
      • The procedure expects the NumProductToDisplay variable (8-byte integer) as parameter. This variable corresponds to the product identifier that will be displayed in the page. This variable is of the same type as the corresponding ProductID item described in the Product data file. This parameter contains the value that will be passed in the URL.
    4. Close the code editor. We will create the different controls of the page.

Creating controls

We will create the controls that will display the information about the selected product.
In the previous part, we explained how to create the controls by dragging and dropping them from the analysis pane. In this part, we will create the controls one by one and bind them to the corresponding items in the data file.
We will create the following controls:
  • an Image control.
  • simple Static controls for the product caption, price and reference.
  • a Rich Text Area control for the product description.
  • To create the Image control:
    1. On the "Creation" tab, in the "Usual controls" group, click "Image".
    2. Click inside the page (in the upper-left corner, for example).
      Creating the Image control
    3. Double-click the Image control to open the description window and change the characteristics of the control.
      • Name the control "IMG_Product_Image".
      • Choose a display calculated on the server to optimize bandwidth and check "High quality". The image display mode is "Homothetic". Check "Without image enlargement" and "Center image in the control".

        Note

        With the options "Homothetic", "Center image in the control" and "Without image enlargement", the image size will adapt homothetically to the area defined for the image. The aspect ratio is kept and the image is not enlarged.
    4. Validate the control description window.
  • To create a simple Static control to display the product name:
    1. On the "Creation" tab, in the "Usual controls" group, expand "Text" and select "Simple static".
    2. Click inside the page (to the right of the image, for example).
      Creating the Static control

      Note

      To simplify the position of the controls, press F7. This key allows you to see the area occupied by the controls. When you press this key again, an outline appears around the controls (in edit mode only).
      This allows you to see the control borders to easily position the controls relative to each other.
      This feature is useful for controls without borders.
    3. Rename the Static control: "STC_Title".
    4. Enlarge the control horizontally (using the sizing handles).
  • We will display the product description in a Rich Text Area control. To create this control:
    1. On the "Creation" tab, in the "Usual controls" group, expand "Text" and select "Rich Text Area". You can also click the "Text" icon directly.
    2. Click the page (to the right of the image, below the STC_Title control, for example).
      Creating the Rich Text Area control
    3. Rename the control: "RTA_Description".
The product price will be displayed in a formatted display control. This control shows dates, times and currency values with the corresponding display format.
  • To create a formatted display control:
    1. On the "Creation" tab, in the "Usual controls" group, expand "Text" and select "Formatted display control".
    2. Click the page, below the product description: the control is automatically created.
    3. Reduce the control width using the sizing handles.
  • We will change the control characteristics:
    1. Open the control description window: double-click the control, for example.
    2. In the "General" tab:
      • Change the control name: "FSTC_Price".
      • Delete the caption.
      • Change the control type: select "Currency".
        Formatted display control description
    3. Validate.
  • Create a simple Static control to show the product reference. Name the control "STC_Reference" and enter "Reference" in the caption field. Place the control below the price.
All necessary controls have been created. Now, we will bind each control to the corresponding item. This binding can be defined in the "Binding" tab of the control description window.

  • To bind the "IMG_Product_Image" control to the corresponding item:
    1. Select the "IMG_Product_Image" control.
    2. Right-click to open the context menu and select "Description".
    3. Go to the "Binding" tab in the description window. This tab indicates that the current control has no bindings. We will bind it to the Visual item of the Product data file.
    4. In "Bound item", expand "Analysis" then "Product". The list of items from the Product data file is displayed.
    5. Select the "Visual" item of the "Product" data file.
      Binding between a control and an item
    6. Validate the description window.
  • Follow the same steps to set the following bindings:
    • Bind STC_Title to the "Caption" item of the "Product" data file.
    • Bind RTA_Description to the "Description" item of the "Product" data file.
    • Bind FSTC_Price to the "PriceBT" item of the "Product" data file.
    • Bind STC_Reference to the "Reference" item of the "Product" data file.
  • Save the page (Ctrl + S).

Displaying data in the page

The "Form" page will display the product selected in the Looper control. In the code of the page, we will enter the code used to:
  • find the product to display.
  • display data in the page.
  • To display data in the page:
    1. Click outside the page (e.g. on the work area, to the left or right of the page in the editor).
    2. Press F2. The code editor displays the different page WLanguage events.
    3. In the "Global declarations" event, write the following code below the code previously written:
      Product.ReadSeekFirst(ProductID, NumProductToDisplay)
      IF Product.Found() THEN
      Product.ToPage()
      END
    4. Let's take a look at this WLanguage code:
      • <Data file>.ReadSeekFirst searches for the first record in the Product data file for which the ProductID item is equal to the value of NumProductToDisplay (parameter passed to the page).
      • <Data file>.Found checks if a record has been found. This function is mainly used in sites accessed by multiple users. It allows you to avoid errors caused by other users (deleted records, etc.).
      • <Data file>.ToPage gets the data from the current record in the data file and displays it in the page controls. In our case, the current record is the record found by <Data file>.ReadSeekFirst.
    5. Close the code editor.

Opening the form from the list of products

Now, let's see how to open the form of the product selected in the list of products. The principle is very simple: the user will select a product in the Looper control and open the details via a link. This link has already been inserted into the Looper control.

  • First, we will modify the "PAGE_List_of_new_products" page so that the Link control opens the product description window.
    1. Go to the "List of new products" page: click "PAGE_List_of_products" in the open document tabs.
    2. Open the Link control description window: double-click the control.
    3. In the "General" tab of the description window, in "Link action":
      • Select "Display a site page".
      • Select the "PAGE_Product_details" page.
        Link control description
      • Click the "Parameters" button. We will define the parameter that will be passed to the page in order to display the details of the selected product.
    4. In the window that appears, you will find the name of the parameter declared in the "Global declarations" event of the page (NumProductToDisplay). Simply select the control containing the value of the parameter. In our case, the product ID is in the "ATT_ID" attribute.
    5. Expand the value that corresponds to the "NumProductToDisplay" parameter and select "ATT_ID":
      Selecting the page parameter
    6. Click "OK" and validate the parameters description window.

      Note

      Caution: In a Looper control, the value is not contained in the control but in the attribute that is associated with it for the characteristic of the value.
    7. Validate the Link control description window.
    8. Save changes (Save an element or Ctrl + S).
  • We will run a test to make sure everything works properly.
    1. If necessary, open "PAGE_List_of_new_products" in the page editor (click on it in the open document tabs).
    2. Click Test page in the quick access buttons.
    3. The page is automatically displayed in the browser.
    4. Click the link to display the product details.
      Product details (at runtime)
  • Close the pages to stop the test.
Managing styles
To improve the page, we will change the style of the controls. When you work with a graphic designer or if you defined style guidelines for your website (company style guide, for example), styles are generally defined in a CSS style sheet. We will import a style sheet into our WEBDEV project to change the styles.

Note

WEBDEV includes two types of styles:
  • the WEBDEV styles.
  • the CSS styles.
A WEBDEV style is a set of CSS styles used to define a global style on high-level objects.
For example, a WEBDEV style for an Edit control will contain two CSS styles:
  • a style for the caption.
  • a style for the text in the input area.

Note

Reminder: You can choose a skin when creating the site. Skins are used to standardize the visual aspect of a site and easily change styles.
Skin also include images, fonts, textures, button shapes and styles for the project.
You can create professional styles using the styles included as standard. Importing CSS styles allows you to add a new style from the Internet, for example.

Importing a CSS style sheet

  • To import the CSS style sheet into the project:
    1. In the ribbon, on the "Project" tab, in the "Project" group, expand "Import" and select "A CSS style sheet".
      Remark: In a WEBDEV version integrated in WINDEV, this option is slightly different: on the "Project" tab, in the "Project" group, expand "Import", select "From WEBDEV", and then select "A CSS style sheet".
    2. The import wizard starts and shows two options:
      Style import wizard
      • Import CSS styles into WEBDEV: This option imports the CSS styles into the WEBDEV project. The styles can be modified later in WEBDEV.
      • Use an external CSS style sheet: This option allows you to use an existing style sheet. This option must be chosen when a style sheet is defined for a company and must be shared between several sites (company style book).
    3. Select "Import the CSS styles into WEBDEV" and click "Next".
    4. Select the "customstyles.css" file. This file is available in the "\Tutorial\WB\Exercises\Full_WEBDEV_Site" directory. The different styles in the style sheet are displayed.
      Selecting styles to import
      • A preview of the selected site is displayed on the right.

        Tip

        The color squares on the right of the preview allow you to change the background color. This allows you to generate a preview using any background color.
      • The "class-" prefix indicates that it is a CSS class. It means that the style will be applied to the elements with the HTML "class" attribute.
    5. Keep all the styles and validate. The styles are imported and available in WEBDEV.

Applying CSS styles

We will apply the different styles to the controls in the "PAGE_Product_details" page.
  1. Go to the "PAGE_Product_details" page.
  2. Double-click the "FSTC_Price" control to open the description window.
  3. In the "Style" tab:
    • Select the "Display area (CSS)" element.
    • Select the "class-styleprice" style in the "CSS style" list:
      Style tab of a formatted display control
  4. Validate. The style is automatically applied to the control.
  5. If necessary, enlarge the control using the sizing handles so that it fits its content.
  6. Save changes (Save an element or Ctrl + S).
  • We will run a test to make sure everything works properly.
    1. If necessary, open "PAGE_List_of_new_products" in the page editor (click on it in the open document tabs).
    2. Click Test page in the quick access buttons.
    3. The page is automatically displayed in the browser.
    4. Click the link to display the product details. The price is displayed in red.
      Using an imported style at runtime
  • Close the pages to stop the test.
Linking the Internet and Intranet sites
So far, we have created Intranet pages to manage products and Internet pages to allow users to see new products.
We will add a "Management" link in the Internet pages to access the Intranet pages.
To do so, we will modify the template of the Internet pages.

Caution!

The following operations can be performed only if you have followed part 3 of this tutorial, regarding the creation of Intranet pages.
  • To create a "Management" link:
    1. Select "PAGE_List_of_new_products".
    2. Open the context menu of one of the links at the top of the page and select "Open template".
    3. Open the Notifications control description (double-click the control).
    4. Change the control text: Management.

      Tip

      In your programs, it is recommended to choose meaningful names for your elements (in this case, give the "LINK_Management" name to the Link control). Thus, your code will be easier to read.
    5. In "Link action", for the "Type" option, select "Run browser click code only".
    6. Validate.
  • We will now write the WLanguage code of the Link control:
    1. Open the events associated with the Link control (select the control and press F2).
    2. Enter the following code in the "Click xxx (browser)" event:
      DynamicSiteDisplay("Full_WEBDEV_Site")
    3. In this code, DynamicSiteDisplay displays the first dynamic page of the project (in our case, it will be "PAGE_List_of_products").
    4. Close the code editor.
    5. In the template bar, click Apply changes of the page template to apply the changes made to the template to all the pages that use it.
    6. In our case, the two project Active WEBDEV Pages are proposed. Validate the template update window.
    7. Close the page template.
  • We will modify "PAGE_List_of_products" so that it can be opened with DynamicSiteDisplay:
    1. Open the "PAGE_List_of_products" page in the editor.
    2. Open the description window (select "Description" in the context menu).
    3. In the "General" tab, check "Accessible via the DynamicSiteDisplay function".
      Page description
    4. Validate.
  • We will run the project test via the Active WEBDEV Pages.
    1. If necessary, open "PAGE_List_of_new_products" in the page editor (click on it in the open document tabs).
    2. Click Test page in the quick access buttons.
    3. The page is automatically displayed in the browser.
      Page with the list of new products at runtime
    4. Click the "Management" link. The product management page appears.
      Administrator mode at runtime
  • Close the pages to stop the test.
Creating a page for the general sales conditions
We will create a type of page that is generally used in e-commerce sites: a page of general sales conditions. To do so, we will use the Rich Text Area control, which allows you to quickly format text.

Creating the page

  • To create the page that will contain the general sales conditions:
    1. Create a new page.
      • Click Create an element in the quick access buttons.
      • The new element window appears: click "Page" then "Page".
      • The page creation wizard starts.
      • In "Based on a project template", select "PAGETPL_Simple" and validate the wizard.
    2. The page save window appears. Type the title: "General sales conditions". The name "PAGE_General_sales_conditions" is automatically filled in.
    3. Validate.

Creating the control

  • To create a Rich Text Area control:
    1. In the ribbon, on the "Creation" tab, in the "Usual controls" group, expand "Text" and select "Rich Text Area".
    2. Click inside the page (in the upper-left corner, for example). The control is automatically created.
  • This type of control automatically adapts its height to its content. We will define a specific width:
    1. Select the control you have just created.
    2. Use the sizing handles to enlarge the control horizontally so that it fits the page width.
  • Now, we will display the general sales conditions in this control. The file containing the text has already been created.
    1. Copy the text from the GSC.txt file. This file is available in "\Tutorial\WB\Exercises\Full_WEBDEV_Site" in the WEBDEV installation directory.
    2. Select the Rich Text Area control in the page.
    3. Press the Space key: the control becomes editable. A yellow border is displayed around the control.
    4. Replace the existing text with the text from the clipboard (Ctrl + V). The text appears.
    5. Make the following changes in the text:
      • Add spaces before and after the titles (Enter key).
      • Make the numbered headings bold.
        In the page editor
    6. Use the different options: all the options available for the text are in the ribbon.
    7. Click Test page in the quick access buttons.
    8. The page is automatically displayed in the browser.
      At runtime
Conclusion
The last two parts have allowed us to see specific features of an Intranet and Internet site.
In the next part, we will present some features that can be included in an Internet or Intranet site:
  • Multicriteria search,
  • Print,
  • Management of multiple languages, etc.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 28
Comments
Click [Add] to post a comment

Last update: 06/30/2023

Send a report | Local help