ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / WEBDEV concepts / Part 2 - Developing a website
  • Creating a page
  • Creating blank pages
  • Creating preset pages
  • Creating the project pages by automatic site building (RAD)
  • Simple operations on a page
  • Main characteristics of a page
  • Internal page
  • Page templates
  • Popup page
  • Refreshing a page in Session mode
  • Overview
  • Implementation
  • Page contexts
  • Overview
  • Automatic operating mode
  • Opening a page in a WEBDEV site
  • Overview
  • Opening a page from a control description
  • Opening a page through programming
  • Events associated with pages
  • Default events
  • Optional events
  • Menus (main or context)
  • Menu options
  • Overview
  • Handling menu options in the editor
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
12. Pages in practice
Previous pageTable of contentsNext page
The purpose of a page is to display, consult and enter information. This information can come from the data files found in an analysis, external files, queries, etc.
WEBDEV offers several options for creating the project pages:
  • Create a blank page with the wizard.
  • Build all the site pages from the analysis description.
  • Create a page from the analysis description (with or without its code).
  • Create pages based on a template, etc.
Regardless of the method used, the page can be modified once it has been created: you can add, modify or delete controls and modify the page characteristics.
For more details on how to manipulate the controls on a page, see Controls in practice.
This chapter presents the following topics:
Creating a page
WEBDEV offers several methods for creating a page:

Creating blank pages

To create a blank page:
  1. Click in the quick access buttons of WEBDEV. The new element window appears: click "Page" then "Page". The page creation wizard starts.
  2. Choose the "blank" type.
  3. Validate the creation of the page. A blank page is created.
  4. The save window is automatically displayed.
  5. Specify the page title and name. The page corresponds to a ".WWH" file. By default, this file will be created in the main project directory. This name will be used to handle the page.
  6. Validate the save window.
  7. Create the controls in the page.
Remarks:
  • By default, the new page is of the same type as the current site (static, Session, AWP or PHP). The type of page can be changed in the page description window. For more details, see Main characteristics of a page.
  • By default, the new page uses the "Responsive (zoning and layouts)" edit mode. This edit mode allows you to use layouts to obtain a mobile-friendly site. The edit mode of the page can be changed in the page description window.
  • The different types of controls are presented in Types of standard controls.

Creating preset pages

To create a preset page:
  1. Click in the quick access buttons of WEBDEV. The new element window appears: click "Page" then "Page". The page creation wizard starts.
  2. In the tabs, choose the type of page to create:
    • the "Standard" tab allows you to create:
      • a blank page without any controls.
      • a blank page based on a page template, if the project contains a page template.
      • a page based on a predefined template.
    • the "Internal pages" tab allows you to create internal pages.
    • the "Error pages" tab allows you to create pages to customize the errors displayed on the site.
    • the "RAD" tab is used to create RAD pages that allow data display and input. This type of page can be based on a data file, query, etc.
  3. Depending on the selected type of page, enter the requested information in the different steps of the wizard.
  4. Validate the page creation.
  5. The save window appears automatically. Specify the page title and name, then validate.
  6. The new page is displayed in the editor. If necessary, the page template associated with the page is also generated and saved in the project.

Creating the project pages by automatic site building (RAD)

For dynamic sites (Session, AWP, or PHP), the project pages can be automatically created in a single operation from the analysis description, by automatic site building (RAD).
For more details, see the online help.
To create the dynamic site using the RAD methodology:
  1. On the "Project" tab, in the "Generation" group, click "Full Application RAD".
    Caution: To use this option, the project must be associated with an analysis that has been generated at least once.
  2. Select the RAD pattern to use.
  3. Select the data files used for the generation.
  4. Select the main data files that will be the entry points in the application (these data files will be mainly used to implement the menu options).
  5. Validate the creation of your site via RAD.
Simple operations on a page
The page editor allows you to perform the following operations on the pages:
  • Open a page in the editor: Simply double-click the page name displayed in the "Project explorer" pane.
  • Save and copy a page.
  • Import and export a page.
  • Change the tab order.
Main characteristics of a page
A page can accept all types of controls. A page can:
  • include a background image: this image is displayed in the background and the controls are overlaid on the image.
  • include a menu: this menu allows Internet users to quickly access the main features of the site. To create a drop-down menu in a page, use a "Menu" control. The first two options are displayed in the page. The options can be manipulated via the context menu. Then, the menu options can be handled in the programming code.
  • include a status bar: this status bar will display the help messages associated with the different page controls. For more details, see the online help.
  • be multilingual: all the languages defined for the page will be available for all page controls. A page can be associated with more languages than the project (e.g., pages shared between multiple projects). For more details, see Multilingual sites.
Remark: Web pages intended to be viewed on iPhones may benefit from special enhancements: splash screen, full screen mode, etc. These features make them look like real applications. WEBDEV allows you to easily configure these specific features while keeping the compatibility with other browsers (mobile or not) on the market.
Internal page
Internal pages are used to dynamically share a section of interface in one or more sites.
The interface to be used multiple times is created in an "Internal Page".
This interface is used in the different pages of your site via the "Internal Page" control.
Remark: The internal page to be shared can come from a component.
For more details, see The Internal Page control.
Page templates
WEBDEV allows you to create page templates. These templates contain the graphic elements and the code common to all the pages of your site.
The changes made to the page template are automatically applied to all the pages that use this template.
A page template allows you to use the style book defined for a site.
Using page templates in your sites allows you to:
  • easily create the site pages.
  • define the layout of the site pages.
  • easily update the site style book.
A page template can be created as easily as a page. To create a page using a template, simply choose the "based on a template" option.
By default, any change made to the template is applied to the pages in which it is used. However, you can manage special cases in a specific page by overriding the template elements.
For more details, see Page templates.
Popup page
WEBDEV allows you to create popup pages. These popup pages allow you to interact with the users in a simple way. A Popup page can be used to:
  • prompt users to enter information (SMTP parameters for sending emails, new address, etc.),
  • ask to confirm a deletion,
  • etc.
To open a popup page from another page, you can use the PopupDisplay browser function.
Remark: It is also possible to display a page as a popup. In this case, the popup will be displayed using PopupDisplayPage.
For more details, see The Popup control.
Refreshing a page in Session mode

Overview

Refreshing a page consists in re-displaying a page that is already open in the browser. This action is the same as the "Refresh" button in the browser.
When a page is refreshed, the dynamic data in the page is updated according to the page context on the server. Only the modified data is re-displayed.
For example, when entering an order in a sales application, the page that displays the summary of the order (the cart) is refreshed each time a new item is ordered.

Implementation

To refresh a page, simply use the PageRefresh WLanguage function.
The following operations are automatically performed when a page is refreshed:
  1. The existence of the page context on the server is checked.
  2. The page is displayed again according to its context on the server.
    Using PageDisplay to refresh a page is not recommended because it takes longer to load the page.
Page contexts

Overview

In a Windows application, the information relative to a window is kept with the window.
In a WEBDEV site in Session mode, a page context exists on the server for each page displayed on the browser of the Internet user.
The page context contains all the information related to the page:
  • content of controls,
  • local variables,
  • global variables,
  • WLanguage "server" code, etc.

Automatic operating mode

By default, WEBDEV automatically manages the contexts of pages in Session mode:
  • A page context is opened when the Session page is displayed in the browser.
  • The context of a page is updated according to the information the user enters in the browser. The context is updated when the user validates the page (via a "Submit" button or with PageSubmit).
  • The existing page contexts are closed when PageUse is used. Then, the page context that corresponds to the page to be displayed with this function is opened.
Remark: WEBDEV allows you to perform an advanced management of contexts via the ContextXXX functions. For more details, see Page management functions.
Opening a page in a WEBDEV site

Overview

Several methods can be used to open a new page in a WEBDEV site:
  • from the description of the control that must open the page (button, link, menu, etc.),
  • through programming in WLanguage.

Opening a page from a control description

You can set an action and the destination of this action in the description of Button, Link and Image (with clickable area) controls.
To open an "xxx" page directly from a Button, Link or Image control:
  1. Open the element description ("Description" in the context menu of the element).
  2. In the "Action" area, select the type of action: "Display a site page".
  3. Select the page to display.
  4. Select the destination of the action: current page, current browser, etc. The previously selected action will be performed in this destination.
  5. Finally, indicate if the content of the controls should be sent to the server during the action.
  6. Validate.

Opening a page through programming

Several WLanguage functions can be used to open a page.
  • PageRefresh: Refreshes the page displayed according to its context.
  • PageDisplay: Opens and displays a new page in the user's browser.
  • PageDisplayDialog: Opens and displays a new page modally in the user's browser.
  • PageUse: Closes all current pages (and their contexts) and opens a new page.
  • PopupDisplay: Displays a popup in the page.
  • PopupDisplayPage: Displays a page as a popup in the page.
When the page is opened, you can pass parameters to it. For more details, see the online help.
Remark: By default, when a page is opened through programming, the selected destination is:
  • the destination set in the description of the object that opens the page (Button, Link control, etc.).
  • the destination set for the current page.
Events associated with pages

Default events

The following events appear by default in the WEBDEV code editor:
  • Global declarations (server code):
    Declaration of variables global to the page. This is the first code run when the page is opened.
  • Initialization (server code):
    Executed when the page is opened. The initialization event of the page controls is run before this code.
  • Global declarations (browser code):
    Declaration of browser variables global to the page.
  • Load (onload) page (browser code):
    Browser code run when the page is displayed in the browser.
  • Unload (onunload) page (browser code):
    Browser code run when a new page is displayed in the browser.
  • Whenever changing layout (sever code):
    Run when the page layout is changed.
  • Request for refreshing the display (server code):
    Contains all the code for refreshing the page controls: content of controls, state (visible, grayed, etc.), caption to refresh, etc.
    This event is started upon request by the following functions:
  • Closing the page (server code):
    Run when the page is closed.
  • Page synchronization (server code):
    Server code used to manage the page synchronization when clicking the browser "Back" button.
  • Set the Value property (internal page only):
    Executed when a value is assigned to the Value property in the Internal Page control.
  • Get the Value property (internal pages only):
    Executed when the Value property is used in read mode in the Internal Page control.

Optional events

Several optional events can be managed.
To use an optional event, you must:
  1. Open the page code window.
  2. Click "Add other events to the page", at the bottom of the list of events. The optional events window appears.
  3. Select the optional event to add and validate.
  4. The selected event is automatically added after the default events.
You can manage, for example:
  • the mouse hover over the control,
  • left mouse button down, up, double click,
  • right mouse button down, up, double click,
  • the mouse wheel, etc.
Menus (main or context)
WEBDEV allows you to create a menu and/or a context menu in HTML pages. These menus correspond to specific controls.
Main or context menus can be vertical or horizontal. From the different options of this menu, you can:
  • display pages,
  • execute the code of the Button controls in the page,
  • etc.
WEBDEV allows you to:
  • Create main or context menus,
  • Edit main or context menus,
  • Delete main or context menus.
For more details, see the online help.
Menu options

Overview

Main menus and context menus consist of one or more options and sub-options. Each option runs a WLanguage code.
To handle the menu options, simply edit the relevant menu.
To edit (or display in the editor) the main menu of a page:
  1. Open the relevant page in WEBDEV.
  2. Double-click the menu: a yellow border appears.

Handling menu options in the editor

The page editor allows you to easily perform the following operations:
  • Add a menu option,
  • Add a separator,
  • Add a submenu,
  • Delete a menu option.
The menu options can also be defined in the page editor, and their characteristics can be modified via a description window.
The description window of the menu options allows you to:
  • modify the option text,
  • check or uncheck a menu option,
  • associate an image with a menu option,
  • associate a keyboard shortcut with a menu option.
You also have the ability to associate a WLanguage code with a menu option. Only menu options without submenus can start a WLanguage process.
For more details, see Handling menu options.
Previous pageTable of contentsNext page
Comments
Click [Add] to post a comment

Last update: 08/25/2023

Send a report | Local help