ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Page / Active WEBDEV Pages and sites
  • Overview
  • How to?
  • Principle
  • Creating an Active WEBDEV Page without UI
  • Practical example with React
  • Prerequisite
  • AWP without UI
  • Code of the Active WEBDEV Page without UI
  • The React application
  • The App.js file
  • Building the React application to be deployed
  • Back to the WEBDEV editor
  • Possible improvements
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
Bootstrap, Angular, React, and Vue.JS are some of the most widely used frameworks used to create web pages.
From version 26, you can easily use pages created with these frameworks in a WEBDEV site. You can benefit from both the power of the WEBDEV Application Server and from your experience with these frameworks.
WLanguage communicates with the code that uses these frameworks via procedure calls:
  • In the Active WEBDEV Page, you can use procedures in browser and server code.
  • You can call these WLanguage procedures from the JS code of the HTML page that uses the third-party framework.
This means you can always take advantage of the power of WLanguage on the Application Server. You can use your existing elements.
To use pages created with Bootstrap, Angular, React, and Vue.JS in a WEBDEV site, simply create an Active WEBDEV Page without UI.
How to?

Principle

To set up an Active WEBDEV Page without UI:
  • Create an Active WEBDEV Page without UI, which will contain the WLanguage procedures to use. If necessary, specify a URL for testing (via "GO").
  • In the external page, include the URL specified in the editor:
    <script src="/<Project name>_WEB/UK/<Page name>.awp"></script>
  • Call the WLanguage procedures from the external page.
To perform a test from WEBDEV:
  • Deploy the HTML site on localhost (like the WEBDEV site).
  • Start the test ("GO") from the editor.
To deploy, simply deploy the HTML site and the WEBDEV site on the same IIS server.

Creating an Active WEBDEV Page without UI

To create an Active WEBDEV Page without UI:
  1. Click in the quick access buttons.
  2. The creation window appears: click "Page" then "Page".
  3. The page creation wizard starts.
  4. Select the "Blank" page type and validate.
  5. Give a name to the page and validate.
  6. Open the page description window (Alt + Enter).
  7. In the "General" tab:
    • In "Type of page", select "AWP without UI".
    • If necessary, in "URL for test (GO)", specify the URL of the external page, which will be opened in the browser during the test.
  8. Validate. The page is displayed in the editor:
This page will contain the different WLanguage procedures to use.
Practical example with React

Prerequisite

For this documentation, we will use a standard environment for a React developer, based on NPM and the create-react-app package.

AWP without UI

In a blank WEBDEV project, create an Active WEBDEV Page without UI:
  1. Click in the quick access buttons.
  2. The creation window appears: click "Page" then "Page".
  3. The page creation wizard starts.
  4. Select the "Blank" page type and validate.
  5. Give a name to the page and validate.
  6. Open the page description window (Alt + Enter).
  7. In the "General" tab:
    • In "Type of page", select the "AWP without UI" mode.
    • In "URL for test (GO)", specify the location of the "index.html" file that will be generated by React (after build). For example: http://localhost:8026/woui/index.html
  8. Validate.
Remark: React generates the files to be deployed in a "/build" folder. All the contents of this folder must be copied to the WEBDEV deployment directory for the test.

Code of the Active WEBDEV Page without UI

React can only access the browser procedures of the Active WEBDEV page. Therefore, all server code must be called from a browser code. For the example, the Active WEBDEV Page contains a Browser procedure local to the page:
PROCEDURE GetDate()
sCitizenDate is string
sCitizenDate = AJAXExecute(ajaxStraightCall, GetCitizenDate)
RESULT sCitizenDate
This procedure returns a string containing the name of the day in the French Revolutionary Calendar, for example:
3 Frimaire of the year CCXXIX
Day of the Chicory
GetCitizenDate() is a global Ajax server procedure. It must be an Ajax procedure.

The React application

The React application is created in a different folder than the WEBDEV project, via Node.js and the create-react-app package:
npx create-react-app my-app
cd my-app
npm start
where my-app is the name of the React application.
React uses a "live server" for the test. At this point, the React application can be seen at the following URL:
http://localhost:3000
It is important to note that this server must not be the same as the server used by WEBDEV.
The React application uses an "index.html" file in the "/public/" folder as a starting point. The script that integrates the Active WEBDEV page of our project must be located in this file:
<script src="/AWPTEST1_WEB/FR/PageSUI.awp"></script>
This line should be included in the HEAD of "index.html". For example, just under TITLE:
<title>React App</title>
<script src="/AWPTEST1_WEB/FR/PageSUI.awp"></script>
</head>
The WEBDEV code is called from the JavaScript code of the different component(s) of the React application.

The App.js file

App.js is the main file of the React application, and the only component (in React terms) of the application in this example. It is located in the "/src" folder.
To call WLanguage procedures from a React component, precede the function name with "window.MyPage" (keep uppercase and lowercase characters).
In our example, here is the code of the function to include in the App.js file to call the GetDate() procedure of the AWP without UI.
const displayCitizenDate = () => {
alert(window.MyPage.GetDate())
}
To call this function, we will add a button in the React component.
<button onClick={displayCitizenDate}>Call AWP without UI</button>
The complete code of the App.js file is as follows:
import logo from './logo.svg';
import './App.css';
const displayCitizenDate = () => {
alert(window.MyPage.GetDate())
}
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>Edit src/App.js and save to reload...</p>
<a className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer">
Learn React. </a>
<button onClick={displayCitizenDate}>Call AWP without UI</button>
</header>
</div>
);
}
export default App;

Building the React application to be deployed

To get a folder to deploy, use the following NPM command:
npm run build
Modify the package.json file to specify the deployment URL. Package.json is the JSON file used to configure the application. Before deploying, you must indicate the deployment URL in this file.
To do so, add the "homepage" information just after "private":
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"homepage": "http://localhost:8026/woui",
The npm run build command generates the deployable version of the React application.
This step will create a /build/ folder to be deployed on the URL specified in the Active WEBDEV Page:
http://localhost:8026/woui/

Back to the WEBDEV editor

You can now test the Active WEBDEV Page without UI from WEBDEV via the button.

Possible improvements

To make testing easier, the React developer can define a specific React script to be used instead of npm run build. For example, a script that automatically copies the generated /build folder to the deployment folder used by WEBDEV.
Minimum version required
  • Version 26
Comments
CORS
To work with sites developed on another platform it is necessary to configure CORS, include this file in the generated application folder

web.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
pvsousa
29 Aug. 2021

Last update: 06/27/2022

Send a report | Local help