PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • Overview
  • Using planes
  • 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/iPadApple WatchUniversal Windows 10 AppWindows Mobile
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 the planes, popups, cookies, ...
Using planes
From version 22, WEBDEV allows you to use planes in a Web page. Using planes allows you to avoid going back and forth with the server whenever changing page: 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, "GUI" 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 by programming. The association between a control and one or more planes is performed in edit only.
To modify the displayed plane, all you have to do is use ..Plane on the container element.
// Go to Dashboard planeCELL_Plane..Plane = 2
Effects when loading
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. The 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 of plane, go to previous plane, ...). 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 the 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 plane via ..Plane.
To enable the delayed load of planes, all you have to do is check "Delayed loading of plane content" from the "GUI" tab of the description of container element. This option enables two new "Delayed plane load" processes, available from the code editor:
  • an AJAX server process called when a plane is about to be displayed,
  • a browser process called once the plane is loaded.
The effective plane load must be programmed in these processes.
// -- "Delayed plane load (server)" process
// According to plane
SWITCH MySelf..Plane
// Dashboard
CASE 2
LoadWidget()
LoadChart()
// Products
CASE 3
...
END
In these two processes, the number of the plane that was just displayed is available via ..Plane.
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.
See The planes in WEBDEV for more details.
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 perform this type of GUI with WEBDEV, all you have to do is use Popup pages.
To create a Popup page, on the "Creation" pane, in the "Containers" group, click "Popup".
A Popup page is displayed from a browser code, via PopupDisplay. This function expects in parameter the name of popup to display as well as its position (specific position or position relative to a control).
// Displays the connection popupPopupDisplay(POPUP_Connection, popupTopLeft, 0, 0)
See The Popup control for more details.
Authentication
The authentication is a major element in a Web application.
The authentication must not be performed in a browser process: 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 authenticationlet sConnectionIdentifier = AJAXExecute(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 user name directly but a random value generated during his connection and that was stored in database.
    -- Server Procedure run via AJAXExecutePROCEDURE CheckConnectionInformation(...sLogin is string, sPassword is string)// Finds the user in databaseHReadSeekFirst(User,  Login, sLogin)...// Stores a connection identifierUser.ConnectionGUID = GetGUID()HModify(User)(to be stored)// The identifier is returned RESULT User.ConnectionGUID
    -- Browser code of connection button// Generates a cookie if necessaryIF CBOX_RememberMe THEN CookieWrite("Connection", sConnectionIdentifier)END
    2. In the process for page load (OnLoad), if the cookie is found, the authentication popup is not displayed and
the user is directly connected.
-- Browser code FOR page loadlet sConnectionGUID = CookieRead("Connection")// Finds the userlet bKnownUser = AJAXExecute(CheckConnectionInformation, sConnectionGUID)-- Server ProcedurePROCEDURE CheckConnectionIdentifier(LOCAL sConnectionIdentifier)// Finds the userHReadSeekFirst(User, ConnectionGUID, sConnectionIdentifier)RESULT 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.
Versions 23 and later
Managing the Back key
When the Web user is pressing the browser "Back" key, the browser goes back to the previous page. A Single Page App application includes a single page! Therefore, the Back key returns to the page displayed before starting the application!
From version 23, WEBDEV allows you to define the operating mode of Back key.
  • The navigation history is automatically filled and it intercepts the "Previous" (or "Next") event to check the display.
  • The page of Single Page App application is displayed in its previous status.
This management is performed by programming:
New in version 23
Managing the Back key
When the Web user is pressing the browser "Back" key, the browser goes back to the previous page. A Single Page App application includes a single page! Therefore, the Back key returns to the page displayed before starting the application!
From version 23, WEBDEV allows you to define the operating mode of Back key.
  • The navigation history is automatically filled and it intercepts the "Previous" (or "Next") event to check the display.
  • The page of Single Page App application is displayed in its previous status.
This management is performed by programming:
Managing the Back key
When the Web user is pressing the browser "Back" key, the browser goes back to the previous page. A Single Page App application includes a single page! Therefore, the Back key returns to the page displayed before starting the application!
From version 23, WEBDEV allows you to define the operating mode of Back key.
  • The navigation history is automatically filled and it intercepts the "Previous" (or "Next") event to check the display.
  • The page of Single Page App application is displayed in its previous status.
This management is performed by programming:
Minimum required version
  • Version 22
Comments
Click [Add] to post a comment