|
|
- 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
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. 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: - Click
 in the quick access buttons. - The creation window appears: click "Page" then "Page".
- The page creation wizard starts.
- Select the "Blank" page type and validate.
- Give a name to the page and validate.
- Open the page description window (Alt + Enter).
- 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.
- 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: - Click in the quick access buttons.
- The creation window appears: click "Page" then "Page".
- The page creation wizard starts.
- Select the "Blank" page type and validate.
- Give a name to the page and validate.
- Open the page description window (Alt + Enter).
- 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
- 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:
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:
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. Here's a reminder:
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. |
|
|
|
|
|
|