DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Développer une application ou un site / Champs, fenêtres et pages / Page / Pages et sites AWP
  • Présentation
  • Comment le faire ?
  • Principe
  • Créer une page AWP sans UI
  • Exemple pratique avec React
  • Pré-requis
  • Page AWP sans UI
  • Code de la page AWP sans UI
  • L'application React
  • Le fichier App.js
  • Construction de l'application React à déployer
  • Retour dans l'éditeur de WEBDEV
  • Améliorations possibles
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
Autres
Procédures stockées
Présentation
Les frameworks Bootstrap, Angular, React, Vue.JS, sont largement utilisés pour créer des pages Web.
A partir de la version 26, WEBDEV permet d'utiliser simplement des pages créées avec un de ces frameworks dans un site WEBDEV. Il est ainsi possible de bénéficier à la fois de la puissance du serveur d'application WEBDEV et d'une expérience existante avec ces frameworks.
Le dialogue entre le code WLangage et le code utilisant ces frameworks s'effectue par appel de procédure :
  • Dans la page AWP, il est possible d'utiliser des procédures en code navigateur et serveur.
  • Depuis le code JS de la page HTML utilisant le framework tiers, il est possible d'appeler ces procédures WLangage.
La puissance du WLangage sur le Serveur d'Application est ainsi disponible de manière universelle. Votre existant est réutilisable.
Pour utiliser des pages créées avec les frameworks Bootstrap, Angular, React, Vue.JS dans un site WEBDEV, il suffit de créer une page AWP sans UI.
Comment le faire ?

Principe

Pour mettre en place une page de type AWP sans UI :
  • Créer une page de type AWP sans UI, qui va contenir les procédures WLangage à utiliser. Spécifier si nécessaire une URL pour le GO.
  • Mettre dans la page externe l'URL indiquée dans la page sous l'éditeur :
    <script src="/<Nom du projet>_WEB/FR/<Nom de la page>.awp"></script>
  • Appeler les procédures WLangage depuis la page externe.
Pour effectuer un test depuis WEBDEV :
  • Déployer le site HTML sur localhost (comme le site WEBDEV).
  • Faire GO depuis l'éditeur.
Pour déployer, il suffit de déployer le site HTML et le site WEBDEV sur le même serveur IIS.

Créer une page AWP sans UI

Pour créer une page de type AWP sans UI :
  1. Cliquez sur parmi les boutons d'accès rapide.
  2. La fenêtre de création d'un nouvel élément s'affiche : cliquez sur "Page" puis sur "Page".
  3. L'assistant de création d'une page se lance.
  4. Sélectionnez le type de page "vierge" et validez.
  5. Donnez un nom à la page et validez.
  6. Affichez la fenêtre de description de la page (Alt + Entrée).
  7. Dans l'onglet "Général" :
    • Dans la zone "Type de page", sélectionnez le mode "AWP sans UI".
    • Dans la zone "URL pour le GO", spécifiez si nécessaire l'URL de la page externe, qui sera lancée dans le navigateur lors du GO.
  8. Validez. La page apparaît sous l'éditeur :
Cette page va contenir les différentes procédures WLangage à utiliser.
Exemple pratique avec React

Pré-requis

Pour cette documentation, on utilisera un environnement classique pour un développeur React, basé sur NPM et le package create-react-app.

Page AWP sans UI

Dans un projet WEBDEV vierge, créez une page AWP sans UI :
  1. Cliquez sur parmi les boutons d'accès rapide.
  2. La fenêtre de création d'un nouvel élément s'affiche : cliquez sur "Page" puis sur "Page".
  3. L'assistant de création d'une page se lance.
  4. Sélectionnez le type de page "vierge" et validez.
  5. Donnez un nom à la page et validez.
  6. Affichez la fenêtre de description de la page (Alt + Entrée).
  7. Dans l'onglet "Général" :
    • Dans la zone "Type de page", sélectionnez le mode "AWP sans UI".
    • Dans la zone "URL pour le GO", saisissez l'emplacement du fichier "index.html" qui sera produit par React (après build). Par exemple : http://localhost:8026/sui/index.html
  8. Validez.
Remarque : React génère les fichiers à déployer dans un dossier "/build". Tout le contenu de ce dossier "/build" devra être copié dans le répertoire de déploiement de WEBDEV pour le test.

Code de la page AWP sans UI

La page AWP peut exposer à React uniquement ses procédures navigateur. L'appel d'un code serveur devra donc toujours être effectué à partir d'un code navigateur. Pour l'exemple, la page AWP contient une procédure Navigateur locale à la page :
PROCÉDURE DonneDate()
sDateCitoyenne est une chaîne
sDateCitoyenne = AJAXExécute(ajaxAppelSimple, DonneDateCitoyenne)
RENVOYER sDateCitoyenne
Cette procédure retourne une chaîne de caractères contenant le nom du jour dans le calendrier révolutionnaire français, par exemple :
3 Frimaire de l'an CCXXIX
jour de la Chicorée
La procédure DonneDateCitoyenne() est une procédure globale serveur du type Ajax. Elle doit être impérativement de type Ajax.

L'application React

L'application React est créée dans un dossier différent de celui du projet WEBDEV en utilisant Node.js et le package create-react-app :
npx create-react-app my-app
cd my-app
npm start
où my-app est le nom de l'application React.
React utilise un "live server" pour le test. L'application React, à ce stade, est visible sur l'URL suivante :
http://localhost:3000
Il est important de noter que ce serveur ne peut pas coincider avec le serveur utilisé par WEBDEV.
L'application React utilise pour point de départ un fichier "index.html" placé dans le dossier "/public/". C'est dans ce fichier "index.html" que doit être placé le script intégrant la page AWP de notre projet WEBDEV :
<script src="/AWPTEST1_WEB/FR/PageSUI.awp"></script>
Cette ligne est à placer dans la partie HEAD de la page "index.html", par exemple juste sous la ligne TITLE :
<title>React App</title>
<script src="/AWPTEST1_WEB/FR/PageSUI.awp"></script>
</head>
Les appels aux codes WEBDEV de la page sont réalisés dans les codes javascript du ou des différent(s) composant(s) de l'application React.

Le fichier App.js

Le fichier App.js est le fichier principal de l'application React, et l'unique composant (au sens React) de l'application dans cet exemple. Il est placé dans le dossier "/src".
Pour appeler les procédures WLangage depuis un composant React, il faudra faire précéder le nom de la fonction avec "window.MaPage" (attention à la casse).
Dans notre exemple, voici le code de la fonction à inclure dans le fichier App.js pour appeler la procédure DonneDate() de la page AWP sans UI.
const afficheDateCitoyenne = () => {
alert(window.MaPage.DonneDate())
}
Pour appeler cette fonction, nous allons ajouter un bouton dans le composant React.
<button onClick={afficheDateCitoyenne}>Appel de la page AWP sans UI</button>
Le code complet du fichier App.js est le suivant :
import logo from './logo.svg';
import './App.css';
const afficheDateCitoyenne = () => {
alert(window.MaPage.DonneDate())
}
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={afficheDateCitoyenne}>Appel de la page AWP sans UI</button>
</header>
</div>
);
}
export default App;

Construction de l'application React à déployer

Pour obtenir un dossier à déployer, il faut utiliser la commande NPM suivante :
npm run build
Il faudra, au préalable, modifier le fichier package.json afin de préciser l'URL de déploiement. Le fichier package.json est le fichier au format JSON de paramétrage de l'application. Avant de déployer, il faut indiquer dans ce fichier, quelle sera l'URL de déploiement.
Il faut pour cela ajouter l'information "homepage", juste après la ligne "private" :
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"homepage": "http://localhost:8026/sui",
La commande npm run build permet de produire la version déployable de l'application React.
Cette étape va créer un dossier /build/ à déployer sur l'URL décrite dans la page AWP, pour rappel :
http://localhost:8026/sui/

Retour dans l'éditeur de WEBDEV

Il est maintenant possible de tester la page AWP sans UI depuis WEBDEV via le bouton .

Améliorations possibles

Pour faciliter le test, le développeur React pourra définir un script React spécifique, à utiliser en remplacement de npm run build et qui se chargera par exemple de copier automatiquement le dossier /build généré vers le dossier de déploiement utilisé par WEBDEV.
Version minimum requise
  • Version 26
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 10/06/2022

Signaler une erreur ou faire une suggestion | Aide en ligne locale