PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
New WEBDEV 24 feature!
  • This lesson will teach you the following concepts
  • Overview
  • Creating a page in AWP mode used to list new products
  • Creating the page
  • Creating the list of new products
  • Viewing the details of a new product
  • Creating the page
  • What should this page do?
  • Creating controls
  • Displaying data in the page
  • Displaying the form from the list of products
  • Managing styles
  • Importing a CSS style sheet
  • Applying the CSS styles
  • Linking the Internet site and the Intranet site
  • Creating a page used to display the general sales conditions
  • Creating the page
  • Creating the control
  • Conclusion
Lesson 4.3. Creating pages in AWP mode
This lesson will teach you the following concepts
  • Creating a page in AWP mode used 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.

Estimated time: 50 mn
Previous LessonTable of contentsNext Lesson
Overview
We are going to create the different pages in AWP mode used to list, add and modify new products. These operations will allow you to discover several topics regarding the management of data files and they will also allow you to use some features of AWP mode­.
  • If the "Full WEBDEV Site" exercise was not opened in the previous lesson:
    1. Display the WEBDEV home page (Ctrl + <).
    2. In the home page, click "Tutorial" and select "Full WEBDEV Site (Exercise)".

      Answer

      A corrected project is available. This project contains the different pages created in this lesson. To open the corrected project, in the home page, click "Tutorial" and select "Full WEBDEV Site (Answer)".
Creating a page in AWP mode used to list new products
We are now going to create a page used to list the new products in the "Full_WEBDEV_Site" project. This page will be a "Showcase" page and it will be accessible via Internet. This page must be referenced on Internet, therefore it must use the AWP generation mode.

Creating the page

  • To create a page used to list new products:
    1. Create a new page:
      • Click among the quick access buttons.
      • The window for creating a new element is displayed: click "Page" then "Page".
      • In the wizard for page creation, click the "Simple" preset page.
      • Make sure that option "Create: a page and its template" is checked.
      • Validate the wizard.
    2. The new page is displayed in the editor. The save window is displayed.
    3. Type the page title: "List of new products". The page name ("PAGE_List_of_new_products") is automatically proposed.
    4. Validate.
  • The page was created with the controls proposed by default. Delete these controls:
    1. Select the controls found in the page (press Ctrl + A).
    2. Delete the controls (Del key).
  • This page must be referenceable. To do so, it must be generated in AWP mode:
    1. Display the description window of the page: display the popup menu and select "Description".
    2. In the "Type of page" area, for the "Mode" option, select "AWP".
    3. Validate.
    4. Save the modifications by clicking among the quick access buttons.

Creating the list of new products

We are going to display the list of new products. To do so, we will be using a Looper control. We have already explained in the previous part how to create this type of control without programming, via the wizard. In this page, the Looper control will be filled by programing.
Creating the Looper control
  • To create the Looper control:
    1. On the "Creation" pane, in the "Data" group, expand "Looper" and select "Looper". The control currently created follows the mouse movement.
    2. Click in the top left corner of the page: the wizard for creating the Looper control starts.
    3. In the assistant, select "I want to fill the Looper control by programming". Go to the next step.
    4. In the next step, we are going to select additional parameters for creating the Looper control:
      • The Looper control is in Classic mode: the entire data will be displayed when loading the page.
        Select the "Classic" operating mode.
      • The Looper control is using an unlimited number of rows. Indeed, all products must be accessible in the page directly. The page will be enlarged in order to display all products.
        Select "No limit" in the "Maximum number of rows per page" area.
    5. Go to the next step. We are going to configure the display parameters.
      • Keep the proposed display direction: fixed number of columns, fill in row.
      • The Looper control will display the new products on 5 columns.
        In the "Number of columns" area, replace 2 by 5.
    6. Go to the next step.
    7. The last step is used to specify the control name (LOOP_NewProducts for example). Validate the wizard. The Looper control is automatically created in the page.
The created Looper control is empty. WEBDEV materializes the main cell (the one that will be edited) with a solid line and the other ones with a dotted line.
  • With the handles, reduce the width of main cell in order for the 5 cells to fit across the page width.
We are now going to create the different controls that will be displayed in the Looper control.
Each row will display:
  • An Image control used to display the product image.
  • A Link control used to display the product name and to open the detailed form.
  • A Static control used to store the product identifier.
We are going to create these different controls and program the fill operation for the Looper control.
Creating the controls found in the looper
  • To create the Image control:
    1. On the "Creation" pane, in the "Usual controls" group, click "Image". The control currently created appears under the mouse.
    2. Hover the first row: a green border appears, allowing you to see the available area.
    3. Click the top left corner of first row in the Looper control. The Image control is created.
    4. Display the description of Image control to modify the control characteristics (double-click the control).
    5. Modify:
      • the control name: IMG_Visual.
      • the display mode of image: select "Homothetic" and check "Without image enlargement" and "Center the image in the control".
      • the transformation mode of image. In our case, the product image is stored in memo format in an item of the Product data file. Choose a display calculated on the server side to optimize the bandwidth and check "High quality".
    6. Validate.
  • To create the Link control:
    1. On the "Creation" pane, in the "Usual controls" group, click "Link".
    2. Click in the Looper control, below the image to create the link.
    3. Display the description of Link control to modify its characteristics (double-click the control).
    4. This control is named "LINK_View_Product".
    5. Validate the description window of control.
    6. Select the Link control and increase its width (with the handles) so that it occupies the row width.
  • To create the Static control containing the product identifier:
    1. On the "Creation" pane, in the "Usual controls" group, expand "Text" and select "Simple static".
    2. Click in the Looper control, on the right of image to create the static control.
    3. Display the description of Static control to modify its characteristics (double-click the control).
    4. This control is named "STC_Product".
    5. Validate the description window of control.
To fill the controls found in the looper and to modify their characteristics on each row, we are going to create attributes.

Remark

A Looper control includes:
  • controls, that are repeated on each row.
  • attributes. An attribute is used to define the control characteristic that will be modified on each row. For example, if the value and the color of PRICE control must change on each row, you will have to define two different attributes for the same control.
  • To create attributes:
    1. Display the description window of Looper control (double-click the control).
    2. In the top section of window, no attribute is created. We are going to define 3 attributes (one for each 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. Indeed, the image value will be modified for each row.
    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. Indeed, the control caption will be modified on each row.
    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. Indeed, the control caption will be modified for each row.
    6. Validate the description window of Looper control.
    7. Save the modifications ( or Ctrl + S).
The Looper control is created now. Let's now program the fill operation for the Looper control.
Filling the looper
The Looper control is filled when initializing the page.
  • To fill the Looper control:
    1. Display the events associated with the page (click inside the page and select "Code" in the popup menu, or press F2).
    2. Type the following code in the initialization code of the page:
      FOR EACH Product WITH NewProduct = True
      LooperAddLine(LOOP_NewProducts,Product.Visual,...
      Product.Caption,Product.ProductID)
      END
    3. Let's study this code:
      • This code browses the Product data file via the FOR EACH statement.
      • Only the records for which the "NewProduct" item is set to True are selected.
      • LooperAddLine is used to add a new row into the Looper control. The different row attributes are updated with the data of current record:
        • the "ATT_Image" attribute value corresponds to the image found in the "Visual" item of the "Product" data file.
        • the value of the "ATT_Link" attribute caption is the content of the "Caption" item found in the "Product" data file.
        • the value of the "ATT_ID" attribute caption is the content of the "ProductID" item found in the "Product" data file.
    4. Save the modifications ( or Ctrl + S).
    5. Close the code window.
  • We are going to run the test of the page that was just created.
    1. Click among the quick access buttons.
    2. The page is automatically displayed in the browser.
  • Close the browser. The WEBDEV editor is redisplayed.
Viewing the details of a new product
Displaying the list of new products is a good thing. We are now going to create a "form" page used to see the product details. This page will be displayed when the Web user clicks the link displaying the product name in the Looper control.

Creating the page

  • To create a page used to display the product details:
    1. Create a new page.
      • Click among the quick access buttons.
      • The window for element creation is displayed: click "Page" then "Page".
      • The wizard for page creation starts.
      • In the "Based on a project template" section, choose "PAGETPL_Simple" and validate the wizard.
    2. The window for saving the page is displayed. Type the title: "Product details". The name ("PAGE_Product_details") is automatically proposed.
    3. Validate.
  • Like the page used to list new products, this page must be generated in AWP mode:
    1. Display the description window of the page (select "Description" from the popup menu).
    2. In the "Type of page" area, select the "AWP" mode.
    3. Validate.
    4. Save the modifications ( or Ctrl + S).

What should this page do?

This page is intended to display the characteristics of the product currently selected in the Looper control.
In our case, this page will be used to display the content of different items found in the "Product" data file.
First of all, we are going to indicate to the page the product that will be displayed. To do so, all we have to do is declare a parameter in the page. This parameter will be passed on the URL.
  • To declare a parameter in the page:
    1. Press the F2 key. The code editor displays the different page events.
    2. Write the following code in the "Global declarations" event:
      PROCEDURE MyPage(gnProductID is 8-byte int)
    3. Let's study this code:
      • The PROCEDURE keyword in the "Global declarations" event is used to associate a procedure to the opening of the page.
      • The procedure is named "MyPage". At run time, this keyword will be automatically replaced by the name of current page.
      • The procedure expects the gnProductID variable (that is an 8-byte integer) in parameter. This variable corresponds to the product identifier that will be displayed in the page. The type of this variable is identical to the type of corresponding ProductID item described in the Product data file. This parameter contains the value that will be found in the URL.
    4. Close the code editor. We are now going to create the different page controls.

Creating controls

We are now going to create the edit controls used to display information about the selected product.
In the previous part, we explained how to create controls by Drag and Drop from the analysis pane. In this part, we are going to create the controls one by one then associate them with the corresponding item in the data file.
We are going to create the following controls:
  • an Image control.
  • simple static controls for the product caption, name and reference.
  • a rich static control for the product description.
  • To create the Image control:
    1. On the "Creation" pane, in the "Usual controls" group, click "Image".
    2. Click in the page (top left corner for example).
    3. Display the description of Image control to modify the control characteristics (double-click the control).
      • This control is named "IMG_Product_Image".
      • Choose a display calculated on the server side to optimize the bandwidth and check "High quality". Indeed, the display mode of image is "Homothetic". Check "Without image enlargement" and "Center the image in the control".

        Remark

        With the options "Homothetic", "Center the image" and "Without image enlargement", the image size will homothetically adapt to the area defined for the image. The proportions will be respected and the image will not be enlarged.
    4. Validate the description window of control.
  • To create the simple Static control used to display the product caption:
    1. On the "Creation" pane, in the "Usual controls" group, expand "Text" and select "Simple static".
    2. Click in the page (on the right of image for example).

      Remark

      To simplify the positioning of controls, press the F7 key. A press on this key is used to see the area occupied by the control, a second press on this key is used to display an outline around the control (in edit only).
      This allows you to see the control border and to easily position the controls in relation to the other ones.
      This feature is very useful for the controls without border.
    3. Rename the Static control: "STC_Title".
    4. Enlarge the control (with the sizing handles).
  • We are going to display the product description in a rich Static control (called Rich Text Area). To create this control:
    1. On the "Creation" pane, in the "Usual controls" group, expand "Text" and select "Rich Text Area". You also have the ability to click the "Text" icon directly.
    2. Click inside the page (to the right of image for example, below the STC_Title control).
    3. Rename the control: "RTA_Description".
We are going to display the product price in a formatted display control. This control is used to display dates, times and currency values while respecting the corresponding display format.
  • To create a formatted display control:
    1. On the "Creation" pane, in the "Usual controls" group, expand "Text" and select "Formatted Display control".
    2. Click in the page, below the product description: the control is automatically created.
  • We are going to modify the characteristics of this control:
    1. Display the description window of the control that was just created: double-click the control for example.
    2. In the "General" tab:
      • Modify the control name: "FSTC_Price".
      • Delete the caption.
      • Modify the control type: select "Currency".
    3. Validate.
  • Create a simple Static control to display the product reference. This control is named "STC_Reference" and its caption is "Reference". This control is positioned below the price.
All necessary controls have been created. We are now going to associate each control with the corresponding item. This association is performed in the "Link" tab of the description window of control.
  • To link the "IMG_Product_Image" control to the corresponding item:
    1. Select the "IMG_Product_Image" control.
    2. Display the popup menu (right mouse click) and select "Description".
    3. Display the "Link" tab of description window. This tab allows you to see that the current control is linked to no item. We are going to link it with the Visual item of Product data file.
    4. In the "Linked item" area, expand "Analysis" then expand "Product". The list of items found in the Product data file is displayed.
    5. Select the "Visual" item of the "Product" data file.
    6. Validate the description window.
  • Perform the same operation to create the following links:
    • STC_Title control linked to the "Caption" item of the "Product" data file.
    • RTA_Description control linked to the "Description" item of the "Product" data file.
    • FSTC_Price linked to the "PriceBT" item of the "Product" data file.
    • STC_Reference control linked to the "Reference" item of the "Product" data file.
  • Save the page.

Displaying data in the page

The "Form" page must display the product that is selected in the Looper control. In the page code, we are going to type the code used to:
  • find the product to display.
  • display data in the page.
  • To display data in the page:
    1. Press the F2 key. The code editor displays the different page events.
    2. In the "Global declarations" event, write the following code below the code previously written:
      HReadSeekFirst(Product,ProductID,gnProductID)
      IF HFound(Product) THEN
      FileToScreen()
      END
    3. Let's study this code:
      • HReadSeekFirst is used to find the first record in the Product data file for which the ProductID item is equal to the value of gnProductID, corresponding to the parameter passed to the page.
      • HFound is used to check whether a record was actually found. This function is mainly required for the multi-user sites. It is used to avoid errors caused by the deletions performed by the other users.
      • FileToScreen is used to display in the controls the data found in the data file, for the current record. In our case, the current record corresponds to the record found by HReadSeekFirst.
    4. Close the code editor.

Displaying the form from the list of products

Now, let's see how to display the form of the product selected in the list of products. The principle is straightforward: the user will select the product in the Looper control and he will display the details via a link. This link already exists in the looper.
  • First of all, we are going to modify the "PAGE_List_of_new_products" page in order for the link to open the description page of product.
    1. Position on the "List of products" page: click the "PAGE_List_of_new_products" button found in the button bar.
    2. Display the description window of Link control: double-click the control.
    3. In the "General" tab of the description window, in the "Link action" area:
      • Select the type "Display a page of the site".
      • Select the "PAGE_Product_details" page.
      • Click the "Parameters" button. We are now going to define the parameter that will be passed to the page in order to display the details of selected product.
    4. In the window that appears, you will find the name of the parameter declared in the event "Global declarations" of the page (gnProductID). All you have to do is select the control containing the parameter value. In our case, the product identifier is found in the "ATT_ID" attribute.
    5. Expand and select "ATT_ID":
    6. Click "OK" and validate the parameters description window.

      Remark

      Caution: In a Looper control, the value is not contained in the control but in the attribute that is associated with it for the value characteristic.
    7. Validate the description window of Link control.
    8. Save the modifications ( or Ctrl + S).
  • We are going to run a test to check whether everything is operating.
    1. Position (if necessary) on the "PAGE_List_of_new_products" page.
    2. Click among the quick access buttons.
    3. The page is automatically displayed in the browser.
    4. Click the link to display the product details.
  • Close the pages to stop the test.
Managing styles
To improve our page, we are going to modify the styles of controls. If you are working with a graphic designer or if a style book was defined for your site (style book of company for example), the styles have been defined in a CSS style sheet beforehand. We are going to import this style sheet into our WEBDEV project in order to use these styles.

Remark

WEBDEV proposes 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 of input area.

Remark

Reminder: When creating the site, you have the ability to choose a skin. The skins are used to standardize the visual aspect of a site and they allow you to easily change style.
The skin provides the images, the fonts, the texture, the shape of buttons and the styles available for the project.
You create sites with a professional style from the styles supplied in standard. Importing CSS styles is used for example to add a new style found on Internet.

Importing a CSS style sheet

  • To import the CSS style sheet into the project:
    1. In the ribbon, on the "Project" pane, in the "Project" group, expand "Import" and select "A CSS style sheet".
    2. The import wizard starts and proposes two options:
      • Import CSS styles into WEBDEV: This option imports the CSS styles into the WEBDEV project. Then, the styles can be modified 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 when it must be shared between several sites (style book of company).
    3. Select "Import the CSS styles into WEBDEV" and click the yellow arrow.
    4. Select the "customstyles.css" file. This file is found in the directory "\Tutorial\WB\Exercises\Full_WEBDEV_Site". The various styles found in the style sheet are displayed.
      • A preview of selected site is displayed on the right.

        Tip

        The rectangles of colors found in the preview are used to change the background color. This allows you to get a preview on another color than white.
      • The "class-" prefix means that it is a CSS class. This attribute means that this style will be applied to the elements with the HTML "class" attribute.
    5. Keep all proposed styles and validate. The styles are imported and they are available in WEBDEV.

Applying the CSS styles

We are now going to apply the different styles to the controls found in the "PAGE_Product_details" page.
  1. Position on the "PAGE_Product_details" page.
  2. Display the description window of "FSTC_Price" control that displays the product price (double-click the control).
  3. In the "Style" tab:
    • Select the "Display area (CSS)" element.
    • Select the "class-styleprice" style in the "CSS style" list:
  4. Validate. The style is automatically applied to the control.
  5. Enlarge the control if necessary (with the sizing handles) to adapt its size to its content.
  6. Save the modifications ( or Ctrl + S).
  • We are going to run a test to check whether everything is operating.
    1. Position (if necessary) on the "PAGE_List_of_new_products" page.
    2. Click among 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 now displayed in red.
  • Close the pages to stop the test.
Linking the Internet site and the Intranet site
Until now, we have created Intranet pages used to manage the products and Internet pages allowing the Web users to see the new products.
We are now going to link these pages by proposing, from the Internet pages, a "Management" link used to access the Intranet pages.
To do so, we are going to modify the template of 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. Position on the "List of new products" page.
    2. Display the popup menu of one of the links found at the top of the page and select "Open the template".
    3. Display the description of Notifications control (double-click the control).
    4. Modify the control caption: Management.

      Tip

      In your programs, we advise you to choose meaningful names for your elements (in this case, the link is named "LINK_Management"). Therefore, your code is more readable.
    5. In the "Link action" area, for the "Type" option, select "Run the browser click code only".
    6. Validate.
  • Now let's type the code associated with this link:
    1. Display the events associated with the Link control (F2 on the control).
    2. Type the following code in the browser click code:
      DynamicSiteDisplay("Full_WEBDEV_Site")
    3. In this code, DynamicSiteDisplay is used to display the first dynamic page of project (in our case, it will be the "PAGE_List_of_Products" page).
    4. Close the code editor.
    5. In the orange bar of template, click to propagate the template modifications to all pages that use this template.
    6. In our case, the two project pages in AWP mode are proposed. Validate the window for updating the template.
    7. Close the page template.
  • We are now going to modify the "PAGE_List_of_products" page so that it can be opened by DynamicSiteDisplay:
    1. Display the "PAGE_List_of_Products" page in the editor.
    2. Display the description window (select "Description" from the popup menu).
    3. In the "General" tab, check "Accessible via the DynamicSiteDisplay function".
    4. Validate.
  • We are now going to run the project test via the AWP pages.
    1. Position on the "List of new products" page.
    2. Click among the quick access buttons.
    3. The page is automatically displayed in the browser.
    4. Click the "Management" link. The page for product management is displayed.
  • Close the pages to stop the test.
Creating a page used to display the general sales conditions
We are now going to create a type of page that is often used in the e-commerce sites: a page displaying the general sales conditions. To do so, we will be using the Rich Text Area control, allowing you to quickly format a text.

Creating the page

  • To create a page used to display the general sales conditions:
    1. Create a new page.
      • Click among the quick access buttons.
      • The window for creating a new element is displayed: click "Page" then "Page".
      • The wizard for page creation starts.
      • In the "Based on a project template" section, choose "PAGETPL_Simple" and validate the wizard.
    2. The window for saving the page is displayed. Type the title: "General sales conditions". The name ("PAGE_General_sales_conditions") is automatically proposed.
    3. Validate.

Creating the control

  • To create a rich Static control:
    1. In the ribbon, on the "Creation" pane, in the "Usual controls" group, expand "Text" and select "Rich Text Area".
    2. Click in the page (top left corner for example). The control is automatically created.
  • This type of control automatically adapts its height to its content. We are going to define a specific width:
    1. Select the control that was just created.
    2. Enlarge the control in width (with the handles) until it occupies the entire page width.
  • Now, we are going to display the general sales conditions in this control. The file containing the text was prepared beforehand.
    1. Copy the text in the GSC.txt file. This file is found in "\Tutorial\WB\Exercises\Full_WEBDEV_Site" in the WEBDEV setup directory.
    2. Select the "Rich Text Area" control in the page.
    3. Press the Space key on the keyboard: the control becomes editable. A yellow border is displayed around the control.
    4. Replace the existing text by the text found in the clipboard (Ctrl + V). The text appears.
    5. Perform some modifications in the text:
      • Add CR characters before and after the titles.
      • Write the titles of different points in bold.
    6. Try the different options: all options available for the text are available in the ribbon.
    7. Click among the quick access buttons.
    8. The page is automatically displayed in the browser.
Conclusion
The last two parts have allowed us to see the specific features of an Intranet site and the ones of an Internet site.
In the next part, we will present several topics that can be included in an Internet site and in an Intranet site:
  • Multicriteria search,
  • Print,
  • Management of multilingual feature, ...
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 24
Comments
Click [Add] to post a comment