PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • Creating a page
  • Creating blank pages
  • Creating preset pages
  • Creating the project pages by automatic site building (RAD)
  • Simple operations performed on a page
  • Main characteristics of a page
  • Internal Page
  • Page templates
  • Popup page
  • Refresh a page in Session mode
  • Overview
  • Implementation
  • The page contexts
  • Overview
  • Automatic operating mode
  • Opening a page in a WEBDEV site
  • Overview
  • Opening a page from a control description
  • Opening a page by programming
  • Events associated with pages
  • Events managed by default
  • Optional events
  • The menus
  • Menu options
  • Overview
  • Managing the menu options in the editor
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
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 proposes several solutions 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 after its creation: you have the ability to add, modify or delete controls and to modify the page characteristics.
For more details on how to manipulate the controls on a page, see the chapter The controls in practice.
This chapter presents the following topics:
Creating a page
WEBDEV proposes several methods for creating a page:

Creating blank pages

To create a blank page:
  1. Click on among the quick access buttons of WEBDEV. The window for creating a new element is displayed: click "Page" then "Page". The wizard for page creation starts.
  2. Choose the "blank" type.
  3. Specify whether the blank page should be created in Responsive Web Design mode.
  4. Validate the creation of the page. A blank page is created.
  5. The save window is automatically displayed.
  6. Specify the page title and its 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.
  7. Validate the save window.
  8. Create the controls in the page.
Notes:

Creating preset pages

To create a preset page:
  1. Click on among the quick access buttons of WEBDEV. The window for creating a new element is displayed: click "Page" then "Page". The wizard for page creation 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 page" tab is used 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, on a query, etc.
    • the "RID" tab is used to create RID pages that allow data input. Only the interface of the page will be generated. The programming must be done by the developer.
  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 window for saving an element appears automatically. Specify the page title and its name, then validate.

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).
See the online help for more details.
To create the dynamic site by R.A.D.:
  1. On the "Project" pane, in the "Generation" group, click "Full Application RAD".
    Caution: To use this option, the project must be associated with an analysis that was generated at least one.
  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 by RAD.
Simple operations performed on a page
The page editor allows you to perform the following operations on the pages:
  • Open a page in the editor: All you have to do is double-click the page name displayed in the "Project explorer" pane.
  • Save and copy a page.
  • Import and export a page.
  • Modify 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 page background and the controls are superimposed on this image.
  • include a menu: this menu allows the Web users to quickly access the main site features. To create a drop-down menu in a page, all you have to do is use a "Menu" control. The first two options are displayed in the page. The options can be handled via the popup menu of options. Then, the menu options can be handled by programming.
  • include a status bar: this status bar will display the help message associated with the different page controls. See the online help for more details.
  • 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 (pages shared between several projects for example). See Multilingual sites for more details.
Note: Web pages intended to be viewed on the Apple iPhone phone may benefit from special enhancements: splash screen at launch, full screen mode, ... These features make them look like real applications. WEBDEV allows you to easily configure these specific features while keeping the compatibility with the other browsers (mobile or not) found on the market.
Internal Page
The internal pages are used to dynamically share a section of interface inside one or more sites.
The interface that must be used several times is created in an "Internal Page" page.
This interface is used in the different pages of your site via the "Internal page" control.
Note: The page to merge can come from a component.
See the online help for more details.
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 modifications performed in a page template are automatically applied to all the pages that use this template.
A page template allows you to comply with the style book defined for a site.
Using page templates in your sites allows you to:
  • simplify the creation of site pages.
  • simplify the layout of site pages.
  • simplify the update of style book defined for the site.
The method for creating a page template is similar to the method for creating a page. To create a page via a template, all you have to do is choose the "based on a template" option.
By default, any modification performed in the template is applied to the pages that is using it. However, special cases can be managed in a specific page by overloading the template elements.
See The page templates for more details.
Popup page
WEBDEV allows you to create popup pages. These popup pages allow you to communicate with the Web user. A Popup page can be used to:
  • request the input of information (SMTP parameters for sending emails, new address, etc.),
  • ask to confirm a deletion,
  • ...
To open a popup page from another page, you can use the browser function PopupDisplay.
See The Popup control for more details.
Refresh a page in Session mode

Overview

Refreshing a page consists in re-displaying a page that is already opened in the browser. This action is identical to the use of the "Refresh" button in the browser.
When refreshing a page, the dynamic data found in the page is updated according to the page context found 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 basket) is refreshed whenever a new item is ordered.

Implementation

To refresh a page, simply use the PageRefresh WLanguage function.
When refreshing a page, the following operations are performed automatically:
  1. Checking the existence of the page context on the server.
  2. Re-displaying the page according to its context found on the server.
    Using PageDisplay to refresh a page is not recommended because it takes longer to load the page.
The page contexts

Overview

In a Windows application, the information relative to a window is stored 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 Web user.
The page context groups the information about 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 typed by the Web user in the browser. This update is performed during the page validation (via a "Submit" button or with PageSubmit).
  • The existing page contexts are closed when PageUse is used. The page context corresponding to the page to display with this function is then opened.
Note: WEBDEV allows you to perform an advanced management of contexts via the ContextXXX functions. See Functions for page management for more details.
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.),
  • by programming in WLanguage.

Opening a page from a control description

When describing a button, a link or a clickable image, you have the ability to define the action performed as well as the destination of this action.
To open a page "xxx" from a button, a link, an image, ...:
  1. Display the element description ("Description" from the popup menu of element).
  2. In the "Action" area, select the type of action: "Display the xxx page".
  3. Select the destination of action: current page, current browser, ... (specific frame for a frameset). The action that was previously selected will be performed in this destination.
  4. Validate.

Opening a page by 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 browser of the Web user.
  • 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.
When opening the page, you have the ability to pass parameters to the page. See the online help for more details.
Note: By default, when opening a page by programming, the selected target is:
  • the target defined in the description of object that triggers the page opening (button, link, etc.).
  • the target defined for the current page.
Events associated with pages

Events managed by default

WEBDEV manages the following events by default (in order of appearance in the code editor):
  • Global declarations (server code):
    Declaring the variables global to the page. This is the first code run when the page is opened.
  • Initialization (server code):
    Run when opening the page. The initialization event of the page controls is run before this code.
  • Load (onload) page (browser code):
    Browser code run when the page is displayed in the browser.
  • Unload the page (browser code):
    Browser code run when a new page is displayed in the browser.
  • Page synchronization (server code):
    Server code used to manage the page synchronization when clicking the browser "Back" button.
  • Closing the page (server code):
    Run when closing the page.
  • Assigning the ..Value property (internal page only)
    Executed when using the ..Value property when assigning values on the Internal Page control.
  • Retrieving the ..Value property (internal page only)
    Executed when using the ..Value property in read mode on the Internal Page control.

Optional events

Several optional events can be managed.
To manage an optional event, you must:
  1. Display the code window of the page.
  2. Click "Add other processes to the page", at the bottom of the list of events. The optional events window appears. 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 control rollover with the mouse,
  • the left mouse button down, up, with double click,
  • the right mouse button down, up, with double click,
  • the mouse wheel, etc.
The menus
WEBDEV allows you to create a menu in your HTML pages. This menu can be oriented vertically or horizontally. From the different options of this menu, you can:
  • display pages,
  • run the code of buttons found in the page,
  • ...
WEBDEV allows you to:
  • Create a main menu,
  • Edit a main menu,
  • Delete a main menu.
See the online help for more details.
Menu options

Overview

A menu includes one or more options and sub-options. Each option is used to run a WLanguage code.
To handle the menu options, all you have to do is 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. Click the menu twice: a yellow border appears.

Managing the 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 sub-menu,
  • Delete a menu option.
The options can also be handled in the window editor and their characteristics can be modified via a description window.
The description window of menu options allows you to:
  • modify the option caption,
  • 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 the menu options without sub-menu can start a WLanguage process.
See Handling the menu options for more details.
Previous pageTable of contentsNext page
Minimum version required
  • Version 23
Comments
Click [Add] to post a comment