ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / WEBDEV specific features
  • Overview
  • Using planes
  • Loading effects
  • Delayed display
  • Using popups
  • Authentication
  • Managing the Back key
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
Overview
A "Single Page App" is a Web application (Internet or Intranet) whose all pages are grouped in a single page.
With WEBDEV, this type of application can be easily re-used via planes, popups, cookies, etc.
Using planes
From version 22, WEBDEV allows you to use planes in a Web page. The use of planes avoids the need to go back and forth with the server each time the page is changed: the applications are more fluid, more "native".
The operating mode of planes in WEBDEV is similar to the operating mode of planes in WINDEV/WINDEV Mobile.
However, some differences can be noticed:
  1. The planes are available independently for each container element: the page, a layout area, a rich text area, a cell. This feature allows you to perform several display combinations.
  2. The management of planes must be explicitly enabled in the element. From the description of container element, "UI" tab, all you have to do is enable the option "Enable the management of planes".
  3. There is no plane "0".
    • In WINDEV, a control that must be displayed on all planes is linked to plane "0". It is the default plane, that is always visible.
    • In WEBDEV, a control that must always be visible must be explicitly placed on all planes with content.
  4. The plane of a control cannot be modified through programming. The association between a control and one or more planes is performed in edit only.
To change the displayed plane, use the Plane property on the container element.
// Go to Dashboard plane
CELL_Plane.Plane = 2

Loading effects

One or more effects can occur when going from a plane to another one. The effects can be defined from the description window of element, "Style" tab. Effects can be defined:
  • on the container element that manages the plane. All you have to do is add an effect with an adapted release (change plane, go to previous plane, etc.). 6 effects are available to manage the change of plane: plane swipe, blur plane sequence, plane fade-in (%), plane overlap, plan fold, plane flip.
  • on the control found in the plane. All you have to do is add an effect with trigger of appearance (display the plane where the control is found) or disappearance (display another plane).

Delayed display

By default, the page is entirely loaded by the browser, with the full content of each plane. In an application where all elements are found in a single page, this operating mode can significantly slow down the page display.
To avoid this slowness, the planes can be loaded in delayed mode: the plane content will be effectively loaded when a request for loading the plane is performed:
  • when loading the page if the plane is displayed by default,
  • when changing the plane via the Plane property.
To delay the loading of planes, simply check "Delayed loading of plane content" in the "UI" tab of the container element description. This option enables two new events "Delayed plane load", available in the code editor:
  • an AJAX server event called when a plane is displayed,
  • a browser event called once the plane is loaded.
The plane must be programmed in these events to be actually loaded.
// -- Event "Defer loading of a plan (server)"
// According to plane
SWITCH MySelf.Plane
// Dashboard
CASE 2
LoadWidget()
LoadChart()
// Products
CASE 3
...
END

In these two events, the number of the plane that has just been displayed is available via the Plane property.
If you want to find out the number of the plane that was displayed before, all you have to do is store it in a variable.
For more details on planes, see The planes in WEBDEV.
Using popups
In order for the Web user to have the sensation to use a native application, you have the ability to use dialog boxes, to propose an authentication for example.
To obtain this type of UI with WEBDEV, simply use Popup pages.
To create a Popup page, go to the "Creation" tab, "Containers" group and click "Popup".
A Popup page is displayed from a browser code, via PopupDisplay. This function expects the name of the popup to display and its position (specific position or position relative to a control) as parameter.
// Displays the connection popup
PopupDisplay(POPUP_Connection, popupTopLeft, 0, 0)
For more details, see The Popup control.
Authentication
The authentication is a major element in a Web application.
The authentication must not be performed in a browser event: a malicious person could easily bypass the authentication.
However, you should avoid using server returns in a Single Page App application. Therefore, an Ajax process must be used:
  • by calling the WLanguage AjaxExecute function.
    // Checks the information
    // for user authentication
    let sConnectionIdentifier = AJAXExécute(CheckConnectionInformation, EDT_Login, EDT_Password)
  • by enabling the Ajax mode of connection button (if the connection code is directly found in the button).
In order for the user to avoid typing his identifiers at each connection, his authentication can be stored via a cookie.
During the next application start, if the cookie is found and correct, the user will be automatically authenticated and he will access the application content directly.
To perform this behavior, you must:
  1. Store a cookie during the authentication via CookieWrite. The cookie does not store the username directly but a random value generated during his connection and that was stored in database.
    //-- Server procedure run via AjaxExecute
    PROCEDURE CheckConnectionInformation(...
    sLogin is string, sPassword is string)
    // Finds the user in database
    HReadSeekFirst(User,  Login, sLogin)
    ...
    // Stores a connection identifier
    User.ConnectionGUID = GetGUID()
    HModify(User)
    // The identifier is returned (to be stored)
    RETURN User.ConnectionGUID
    //-- Browser code of connection button
    // Generates a cookie if necessary
    IF CBOX_RememberMe THEN
    CookieWrite("Connection", sConnectionIdentifier)
    END
  2. In the page load event (OnLoad), if the cookie is found, the authentication popup is not displayed and the user is connected directly.
    //-- Browser code to load a page
    let sConnectionGUID = CookieRead("Connection")
    // Finds the user
    let bKnownUser = AJAXExecute(CheckConnectionInformation, sConnectionGUID)
    //-- Server procedure
    PROCEDURE CheckConnectionIdentifier(LOCAL sConnectionIdentifier)
    // Finds the user
    HReadSeekFirst(User, ConnectionGUID, sConnectionIdentifier)
    RETURN HFound(User)
Tip: For a Web application with authentication, don't forget to use an HTTPS connection in order for the login and password not to be intercepted.
Managing the Back key
When the Web user clicks the browser "Back" button, the browser goes back to the previous page. A Single Page App includes a single page! Therefore, the Back button goes back to the page displayed before starting the application!
WEBDEV allows you to assign a standard behavior to the Back button.
  • The navigation history is automatically filled and it intercepts the "Back" (or "Next") event to control the display.
  • The page of Single Page App application is displayed in its previous status.
This management is performed through programming:
  • via the functions:
    BrowserHistoryAddAdds an entry into the history of navigation by associating data. This data will be transmitted when going back to this entry.
    BrowserHistoryModifyModifies the data of current entry in the navigation history. This data will be transmitted when going back to the current entry.
  • via the optional event "Move into the navigation history" called when the user clicks "Back" or "Next". For more details, see Optional events associated with pages
Minimum version required
  • Version 22
Comments
Obs


Os planes normalmente se usa uma quantidade limitada no máximo 3 onde pode por na plane 1 o table grid, na plane 2 os campos do formulário e na plane 3 o select view.

Lembro que a janela só vai abrir se todo o oconteudo for carregado na memória, deve ser usado com extrema prudência.


A limited number of planes are normally used, at most 3, where you can put the table grid on plane 1, the form fields on plane 2 and the select view on plane 3.

Remember that the window will only open if all the content is loaded into memory, it must be used with extreme caution.
Boller
15 Mar. 2024

Last update: 06/14/2023

Send a report | Local help