Tutorial - Creating a website with back office processes

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.

Creating the page

1. Click in the quick access buttons.
2. In the "New" window, click "Page" then "Page.
3. In the page creation wizard, under "Based on a project template", select "PAGETPL_Menu".
4. Finish the wizard.
5. In the save window, enter the page title: "Product form". The page name "PAGE_Product_form" is automatically filled in.
6. Validate.

What is this page for?

1. Press F2. The code editor displays the different page events.
2. In the "Global declarations" event, replace the existing WLanguage code with the following:
   
   Global declarations of PAGE_Product_form (server)
   PROCÉDURE 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.
4. Close the code editor.

Creating Edit controls

1. Open the "Analysis" pane if necessary: in the ribbon, on the "Home" tab, in the "Environment" group, expand "Panes", click "Panes", and then select "Analysis". The different data files defined in the "Full_WEBDEV_Site" analysis are displayed in the pane.
2. Click the arrow on the left of the "Product" data file: the items in the data file appear.
   
3. Use the mouse to select all the items displayed in the pane (except "ProductID"). You can select multiple elements by holding the Ctrl key down.
4. Drag the items and drop them onto the previously created page.
   
5. Different controls are automatically created in the page. These controls are bound to the corresponding item in the data file. To check this:
   • Select the "Reference" control for example.
   • Right-click to open the context menu and select "Description".
   • Go to the "Binding" tab in the description window:
     
     This tab shows that the current Edit control is bound to the "Reference" item in the "Product" data file.
6. Close the description window ("OK" or "Cancel").
7. Save the page (Ctrl + S).

Move the controls in the page to get the following UI:

• Place the image to the right of the Edit controls.
• Move the "Arrival" control below the Edit controls

Displaying data in the page

• find the product to display.
• display data in the page.

1. Click the page in the editor.
2. Press F2. The code editor displays the different page events.
3. In the "Global declarations" event, write the following code below the code previously written:
   
   Global declarations of PAGE_Product_form (server)
   Product.ReadSeekFirst(ProductID, NumProductToDisplay)
   IF Product.Found() = False THEN
   // Display the list of products
   PAGE_List_of_products.Display()
   END
   Product.ToPage()
   
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. NumProductToDisplay corresponds to the 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.). In this case, if the record is not found (<Data file>.Found returns False), the list of products is displayed again.
   • <Source>.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.

Confirming changes in the page

1. On the "Creation" tab, in the "Usual controls" group, click "Button".
2. Then, click in the center of the page, under the "Arrival" control, to create the new control.
3. Change the control text: type "OK".
   
   The "OK" button will be used to:
   • check the data typed: this consists in checking whether the user has filled in the various fields of the page. This check doesn't require any server access and can be done in Browser code.
   • save the data entered in the Product data file. This operation is performed in Server code. The data is sent to the server, and then saved in the data file.

1. Select the "OK" button and press F2. The events associated with the Button control are displayed.
2. In the "Click xxx (browser)" event of the Button control, write the following code for checking the data entered:
   
   Click on BTN_OK (onclick browser event)
   IF EDT_Reference ~= "" THEN
   Error("Enter a reference.") 
   SetFocusAndReturnToUserInput(EDT_Reference)
   END
   IF EDT_Caption ~= "" THEN
   Error("Type a caption.")
   SetFocusAndReturnToUserInput(EDT_Caption)
   END
   IF EDT_Description ~= "" THEN
   Error("Enter a description.")
   SetFocusAndReturnToUserInput(EDT_Description)
   END
   IF EDT_PriceBT = 0 THEN
   Error("Type a price.")
   SetFocusAndReturnToUserInput(EDT_PriceBT)
   END
   
3. Let's take a look at this WLanguage code:
   • For each Edit control in the page, we check if a value has been entered.
   • The '~=' operator checks whether the values are equal ignoring the case and punctuation.
   • If no value is entered, an error message prompts the user to enter a value (Error). The code execution is stopped and the input focus is set on the relevant Edit control with SetFocusAndReturnToUserInput.
4. In the "Click xxx (server)" event of the Button control, write the following WLanguage code for saving the data:
   
   Click on BTN_OK (server)
   Product.FromPage()
   Product.Modify()
   PAGE_List_of_products.Display()
   
5. Let's take a look at this WLanguage code:
   • <Data file>.FromPage updates the items of the current record with the data from the bound controls. This function is equivalent to the following lines of code:
     
     Product.Reference = EDT_Reference
     Product.Caption = EDT_Caption
     Product.Description = EDT_Description
     ...
     
     
     Our page uses less than 10 controls and the advantages are clear. Think of the pages that contain many more controls: a single line of code assigns all the values!
   • <Data file>.Modify updates the current record in the data file.
   • <Page>.Display displays another page. In our case, "PAGE_List_of_products" is redisplayed.
6. Save changes ( or Ctrl + S).
7. Close the code window.

An icon appears at the upper-right corner of the "OK" button. This icon indicates that there is a UI error or a potential improvement. Hover over the icon for more details. In our case, WEBDEV suggests associating the button with the Enter key. Let's accept this suggestion:

• Click the icon.
• In the window that appears, click "Fix".

Opening the form from the list of products

1. Select the "List of products" page: click "PAGE_List_of_products" in the open document tabs:
   
2. Reduce the Reference control horizontally: We will create the Link control next to it.
3. On the "Creation" tab, in the "Usual controls" group, click "Link".
4. Then, click next to the reference in the Looper control to create the Link control.
   
5. Change the text of the Link control (press Space to edit the text): enter "Edit".

1. Select the "Edit" Link control and open the associated WLanguage events (F2).
2. In the code window that appears, write the following code in the "Click xxx (server)" event:
   
   Click on LINK_Edit (server)
   PAGE_Product_form.Display(ATT_ProductID[LOOP_Product])
   
3. Let's take a look at this WLanguage code:
   • <Page>.Display opens "PAGE_Product_form".
   • The opened page expects as a parameter the identifier of the product to be displayed. This identifier corresponds to the identifier of the product selected in the Looper control. To get the identifier, the attribute that contains the identifier (ATT_ProductID) for the current row is specified. The square brackets are used to specify the row and LOOP_Product gets the current row in the Looper control.
     
     

     By default, ATT_ProductID returns the value of the attribute for the clicked row. The code can be written as follows:
     

     PAGE_Product_form.Display(ATT_ProductID)
     
4. Save changes ( or Ctrl + S).
5. Close the code window.

Test the project (click in the quick access buttons).

1. The editor prompts you to select the first page of the Session mode.
   
   In our case, select "PAGE_List_of_products" and confirm.
   
   

   The first page of Session mode is the first page displayed when the site is opened in Session mode.

   The first project page in Session mode can be defined:

   • when testing the project.
   • in the "Project explorer" pane: simply select the desired page, open the context menu and select "First page of the project in session mode".

   When you define the first page of the Session mode, a small red "1" appears to the left of the page name in the "Project explorer" pane.
2. The website opens.
3. In the list of products:
   • Click the "Edit" link.
   • The page with the product details opens.
     
   • Change the price of the product and click OK to confirm changes.
   • The new price of the product appears in the list of products.