|
|
|
|
|
|
|
|
|
|
- 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
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. 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 : - Cliquez sur
 parmi les boutons d'accès rapide. - La fenêtre de création d'un nouvel élément s'affiche : cliquez sur "Page" puis sur "Page".
- L'assistant de création d'une page se lance.
- Sélectionnez le type de page "vierge" et validez.
- Donnez un nom à la page et validez.
- Affichez la fenêtre de description de la page (Alt + Entrée).
- 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.
- 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 : - Cliquez sur parmi les boutons d'accès rapide.
- La fenêtre de création d'un nouvel élément s'affiche : cliquez sur "Page" puis sur "Page".
- L'assistant de création d'une page se lance.
- Sélectionnez le type de page "vierge" et validez.
- Donnez un nom à la page et validez.
- Affichez la fenêtre de description de la page (Alt + Entrée).
- 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
- 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 : 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 : 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. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|