ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / WEBDEV specific features / Page types
  • Overview
  • Easily integrate a WEBDEV page into a WINDEV application
  • How to?
  • Examples: WD WEBDEVInWINDEV and WW_WEBDEVInWINDEV
  • Enabling interaction between a WEBDEV page and a WINDEV window
  • Executing a WINDEV process from a WEBDEV page
  • Executing a WEBDEV process from a WINDEV window
  • Examples: WD WEBDEVInWINDEV and WW_WEBDEVInWINDEV
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
Integrating a WEBDEV site into a WINDEV application
Overview
By integrating a website into a window in a desktop application, you can share existing elements and boost productivity.
Many new development projects are intended for the Web. However, most existing projects consist of Windows applications. Integrating a website into a WINDEV window is a major step to preserve and webify a company's software assets without sacrificing functionality.
This allows for rapid, agile, risk-free, step-by-step progress.
This documentation page describes a step-by-step implementation, and is based on the "WD IntegrationWEBDEVInWINDEV" and "WW_WEBDEVInWINDEV" examples, which are included in WINDEV and WEBDEV. These two examples allow you to:
  • View a WEBDEV page integrated into a WINDEV window.
  • Enable interaction between the WINDEV window and the WEBDEV page.
Easily integrate a WEBDEV page into a WINDEV application

How to?

These are the steps to integrate a WEBDEV page into a WINDEV application:
  1. Create the WEBDEV project.
  2. Prepare WEBDEV pages to be displayed in the WINDEV application: create a specific layout.
    To create a specific layout for using the page in WINDEV:
    • Open the page in the WEBDEV editor.
    • On the "Page" tab, in the "Layouts" group, expand "Layouts" and select "Add layout to integrate page into WINDEV".
    • In the "For WINDEV" layout, define the interface that will be displayed in the WINDEV application.
    • Save the page.
  3. Create a WEBDEV Page control in the window that displays the page.
    • In the WINDEV editor, open the window that will display the WEBDEV site.
    • Create a WEBDEV Page control.: on the "Creation" tab, in the "Other controls" group, click "WEBDEV page".
    • Position the control in the window.
  4. Initialize the WEBDEV Page control:
    You can initialize the WEBDEV Page control:
    • Directly in the control description window, by specifying the source URL.
    • Via the URL property of the WEBDEV Page control.
  5. Test the WEBDEV site and the WINDEV application.
    The WEBDEV site must be launched before the WINDEV application, to initialize the web data.
Remarks:
  • Check the URL of the WEBDEV page to be run in the WINDEV application.
  • WEBDEV pages can be in Session, SEO-ready Session or AWP mode. If you need to pass parameters to the page to display specific data, you must use the SEO-ready session or AWP mode and the URL property to initialize the control.
  • You can use InPageWithinWindowMode to determine if the code of the WEBDEV page is executed in site mode or in a page displayed in a control of a window.

Examples: WD WEBDEVInWINDEV and WW_WEBDEVInWINDEV

  • In the WW_WEBDEVInWINDEV site, the PAGE_MaintenanceRecords page contains a specific layout for WINDEV.
  • In the WD WEBDEVInWINDEV application, the WIN_VehicleDetails window displays the PAGE_MaintenanceRecords page inside a WEBDEV Page control.
  • The WEBDEV Page control is initialized in the Initialization procedure of WIN_VehicleDetails.
  • At runtime, the WINDEV-specific layout is displayed.
Enabling interaction between a WEBDEV page and a WINDEV window

Executing a WINDEV process from a WEBDEV page

To execute a WINDEV process from a WEBDEV page:
  • Create the process in the WINDEV window. This process must be a procedure local to the WEBDEV Page control.
  • In the page handled by the WINDEV window (or in the process), use the MyHostControl keyword to execute the procedure present in the WEBDEV Page control. You can pass parameters to this procedure.

Executing a WEBDEV process from a WINDEV window

To execute a WEBDEV process from a WINDEV window:
  • In the WEBDEV page, the WEBDEV process to be executed must be a local browser procedure of the page displayed in the WEBDEV Page control.
  • In the WINDEV window, use the Page property of the WEBDEV Page control and specify the name of the procedure to be executed as well as its parameters.

Examples: WD WEBDEVInWINDEV and WW_WEBDEVInWINDEV

The "WD WEBDEVInWINDEV" example shows the interaction between the WEBDEV page and the WINDEV window in WLanguage. To test this interaction:
  • In the billing window, click the "Bill" option in a table row in the WEBDEV page (vehicles in the garage).
  • The WEBDEV page then opens a popup to choose an article. Choose the Hawaiian dancer, for example.
  • The WEBDEV popup then calls the WINDEV RequestBilling procedure. The application opens the billing window. Once the billing is validated, the application calls a procedure of the WEBDEV page to take into account the validation and refresh the WEBDEV table.
Let's see the code used by the WINDEV application and the WEBDEV site:
  • For the communication from WINDEV to WEBDEV:
    • In the WD WEBDEVInWINDEV application, the WIN_CustomerManagement window contains:
      • a WEBDEV Page control that displays the PAGE_OutgoingVehicles page. This page lists the vehicles present in the garage.
      • a local procedure named RequestBilling. This procedure is called from the WEBDEV page.
    • In the WW_WEBDEVInWINDEV site, the PAGE_OutgoingVehicles page allows starting a billing process via the "POPUP_GOODIES" page. In this popup, when the article is validated, the RequestBilling procedure local to the WEBDEV Page control is called via the following code:
      MyHostControl.RequestBilling(ATT_Sender[gnRowNum], ATT_Summary[gnRowNum], ...
      gnRowNum, ATT_Report[gnRowNum], sGoodieName)
  • For the communication from WEBDEV to WINDEV:
    • In the WW_WEBDEVInWINDEV site, the PAGE_OutgoingVehicles page contains a local browser procedure named refresh_row. This procedures refreshes the row corresponding to the invoice that has been validated.
    • In the WD WEBDEVInWINDEV application, the RequestBilling procedure of the WEBDEV Page control calls the refresh_row procedure.
      WEBDEV_VehicleList.Page.refresh_row(nRowNum)
Related Examples:
WD WEBDEVInWINDEV Training (WINDEV): WD WEBDEVInWINDEV
[ + ] This example shows the implementation of "WEBDEV in WINDEV".
It explains how to insert a WEBDEV page, a site or part of a site in a WINDEV window and how to establish two-way communication between them in WLanguage.
There are multiple use cases for the integration of a WEBDEV page directly in a WINDEV window:
- merge existing WINDEV and WEBDEV elements,
- progressively webify an application. In this case, simply develop new features in WEBDEV and integrate them into existing WINDEV applications.
WW_WEBDEVinWINDEV Training (WINDEV): WW_WEBDEVinWINDEV
[ + ] This example shows the implementation of "WEBDEV in WINDEV".
It explains how to insert a WEBDEV page, a site or part of a site in a WINDEV window and how to establish two-way communication between them in WLanguage.

There are multiple use cases for the integration of a WEBDEV page directly in a WINDEV window:
- merge existing WINDEV and WEBDEV elements,
- progressively webify an application. In this case, simply develop new features in WEBDEV and integrate them into existing WINDEV applications.
Minimum version required
  • Version 28
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 06/23/2023

Send a report | Local help