AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

Ayuda / Desarrollar una aplicación o un sitio web / Controles, ventanas y páginas / Página / Páginas y sitios AWP
  • Presentación
  • ¿Cómo proceder?
  • Principio
  • Crear una página AWP sin UI
  • Ejemplo práctico con React
  • Condición previa
  • Página AWP sin UI
  • Código de la página AWP sin UI
  • Aplicación React
  • Archivo App.js
  • Crear la aplicación React a implementar
  • Volver al editor de WEBDEV
  • Posibles mejoras
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReportes y ConsultasCódigo de Usuario (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Código Navegador
WINDEV Mobile
AndroidWidget Android iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Otros
Procedimientos almacenados
Presentación
Bootstrap, Angular, React y Vue.JS son algunos de los frameworks más utilizados para crear páginas Web.
A partir de la versión 26, podrá utilizar fácilmente las páginas creadas con estos frameworks en un sitio WEBDEV. Puede aprovechar tanto la potencia de WEBDEV Application Server como su experiencia con estos frameworks.
WLanguage se comunica con el código que utiliza los frameworks mediante llamadas a procedimientos:
  • En la página AWP, puede utilizar procedimientos en código Navegador y Servidor.
  • Puede llamar a estos procedimientos WLanguage desde el código JS de la página HTML que utiliza los frameworks de terceros.
Esto significa que puede aprovechar toda la potencia de WLanguage en el servidor de aplicaciones. Además, puede utilizar los elementos existentes.
Para utilizar páginas creadas con Bootstrap, Angular, React y Vue.JS en un sitio WEBDEV, cree una página AWP sin UI.
¿Cómo proceder?

Principio

Para establecer una página AWP sin UI:
  • Cree una página AWP sin UI con los procedimientos WLanguage a utilizar. Si es necesario, especifique una URL para la prueba (mediante "GO").
  • En la página externa, incluya la URL especificada en el editor:
    <script src="/<Project name>_WEB/UK/<Page name>.awp"></script>
  • Llame a los procedimientos WLanguage desde la página externa.
Para realizar una prueba desde WEBDEV:
  • Implemente el sitio HTML en localhost (como el sitio WEBDEV).
  • Inicie la prueba ("GO") desde el editor.
Para la implementación, publique el sitio HTML y el sitio WEBDEV en el mismo servidor IIS.

Crear una página AWP sin UI

Para crear una página AWP sin UI:
  1. Haga clic en en los botones de acceso rápido.
  2. La ventana de creación de nuevos elementos se abre: haga clic en "Página", y luego en "Página".
  3. El asistente de creación de páginas se abre automáticamente.
  4. Seleccione el tipo de página "En blanco" y valide.
  5. Defina el nombre de la página y valide.
  6. Abra la ventana de descripción de la página (Alt + Entrar).
  7. En la pestaña "General":
    • En "Tipo de página", seleccione "AWP sin UI".
    • Si es necesario, en la sección "URL de la prueba (GO)", especifique la URL de la página externa que se abrirá en el navegador durante la prueba.
  8. Valide. La página aparece en el editor:
Esta página contendrá los diferentes procedimientos WLanguage a utilizar.
Ejemplo práctico con React

Condición previa

Para esta documentación, utilizaremos un entorno estándar para un desarrollador de React, basado en NPM y el paquete create-react-app.

Página AWP sin UI

En un proyecto WEBDEV en blanco, cree una página AWP sin UI:
  1. Haga clic en en los botones de acceso rápido.
  2. La ventana de creación de nuevos elementos se abre: haga clic en "Página", y luego en "Página".
  3. El asistente de creación de páginas se abre automáticamente.
  4. Seleccione el tipo de página "En blanco" y valide.
  5. Defina el nombre de la página y valide.
  6. Abra la ventana de descripción de la página (Alt + Entrar).
  7. En la pestaña "General":
    • En "Tipo de página", seleccione el modo "AWP sin UI".
    • En la sección "URL de la prueba (GO)", especifique la ubicación del archivo "index.html" que será generado por React (después de la compilación). Por ejemplo: http://localhost:8026/woui/index.html
  8. Valide.
Observación: React genera los archivos a implementar en una carpeta "/build". Todo el contenido de esta carpeta debe copiarse en el directorio de implementación de WEBDEV para la prueba.

Código de la página AWP sin UI

React solo puede acceder a los procedimientos Navegador de la página AWP. Por lo tanto, se debe llamar a los códigos Servidor desde un código Navegador. Para el ejemplo, la página AWP contiene un procedimiento Navegador local a la página:
PROCEDURE GetDate()
sCitizenDate is string
sCitizenDate = AJAXExecute(ajaxStraightCall, GetCitizenDate)
RESULT sCitizenDate
Este procedimiento devuelve una cadena que contiene el nombre del día en el calendario republicano francés, por ejemplo:
3 Frimaire of the year CCXXIX
Day of the Chicory
GetCitizenDate() es un procedimiento global (servidor) de tipo Ajax. Debe ser un procedimiento Ajax.

Aplicación React

La aplicación React se crea en una carpeta diferente a la del proyecto WEBDEV, a través de Node.js y el paquete create-react-app:
npx create-react-app my-app
cd my-app
npm start
donde my-app es el nombre de la aplicación React.
React utiliza un "live server" para la prueba. En este punto, la aplicación React se puede ver en la siguiente URL:
http://localhost:3000
Es importante tener en cuenta que este servidor debe ser diferente al que utiliza WEBDEV.
La aplicación React utiliza un archivo "index.html" ubicado en la carpeta "/public/" como punto de partida. El script que integra la página AWP del proyecto debe estar ubicado en este archivo:
<script src="/AWPTEST1_WEB/FR/PageSUI.awp"></script>
Esta línea debe incluirse en el HEAD de la página "index.html". Por ejemplo, justo debajo de TITLE:
<title>React App</title>
<script src="/AWPTEST1_WEB/FR/PageSUI.awp"></script>
</head>
El código WEBDEV se llama desde el código JavaScript de los diferentes componentes de la aplicación React.

Archivo App.js

App.js es el archivo principal de la aplicación React, y el único componente (en términos de React) de la aplicación en este ejemplo. Se encuentra en la carpeta "/src".
Para llamar a los procedimientos WLanguage desde un componente de React, preceda el nombre de la función con "window.MyPage" (conserve las mayúsculas y minúsculas).
En nuestro ejemplo, este es el código de la función a incluir en el archivo App.js para llamar al procedimiento GetDate() de la página AWP sin UI.
const displayCitizenDate = () => {
alert(window.MyPage.GetDate())
}
Para llamar a esta función, agregaremos un botón en el componente React.
<button onClick={displayCitizenDate}>Call AWP without UI</button>
El código completo del archivo App.js es el siguiente:
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;

Crear la aplicación React a implementar

Para obtener una carpeta a implementar, utilice el siguiente comando NPM:
npm run build
Debe modificar el archivo package.json previamente para especificar la URL de implementación. Package.json es el archivo JSON utilizado para configurar la aplicación. Antes de la implementación, debe indicar la URL de implementación en este archivo.
Para ello, agregue la información "homepage" justo debajo de la línea "private":
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"homepage": "http://localhost:8026/woui",
El comando npm run build genera la versión que se va a implementar de la aplicación React.
Esta etapa creará una carpeta /build/ que se implementará en la URL especificada en la página AWP:
http://localhost:8026/woui/

Volver al editor de WEBDEV

Ahora puede probar la página AWP sin UI desde WEBDEV a través del botón .

Posibles mejoras

Para facilitar las pruebas, el desarrollador de React puede definir un script específico de React a utilizar en lugar de npm run build. Por ejemplo, un script que copie automáticamente la carpeta /build generada en la carpeta de implementación utilizada por WEBDEV.
Versión mínima requerida
  • Versión 26
Comentarios
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 08 2021

Última modificación: 27/06/2022

Señalar un error o enviar una sugerencia | Ayuda local