Versión: 20 R7 BETA

Área Web

Las áreas web pueden mostrar varios tipos de contenido web dentro de sus formularios: páginas HTML con contenidos estáticos o dinámicos, archivos, imágenes, JavaScript, etc. The rendering engine of the web area depends on the execution platform of the application and the selected rendering engine option.

Es posible crear varias áreas web en el mismo formulario. Note, however, that the use of web areas must follow several rules.

Several dedicated standard actions, numerous language commands as well as generic and specific form events allow the developer to control the functioning of web areas. Se pueden utilizar variables específicas para intercambiar información entre el área y el entorno 4D.

Propiedades específicas

Variables asociadas

Se pueden asociar dos variables específicas a cada área web:

URL --to control the URL displayed by the web area
Progression -- to control the loading percentage of the page displayed in the web area.

As of 4D v19 R5, the Progression variable is no longer updated in Web Areas using the Windows system rendering engine.

Motor de renderización web

You can choose between two rendering engines for the web area, depending on the specifics of your application.

Seleccionar el motor de renderizado web anidado permite llamar a los métodos de 4D desde el área web y asegurarse de que las funcionalidades en macOS y Windows sean similares. Se recomienda seleccionar el motor de renderizado del sistema cuando el área web está conectada a Internet porque siempre se beneficia de las últimas actualizaciones de seguridad.

Acceder a los métodos 4D

When the Access 4D methods property is selected, you can call 4D methods from a web area.

Notas

This property is only available if the web area uses the embedded web rendering engine.
Por razones de seguridad, ya que permite ejecutar código 4D, esta opción solo debe habilitarse para páginas de confianza, como las páginas generadas por la aplicación.

Objeto $4d

The 4D embedded web rendering engine supplies the area with a JavaScript object named $4d that you can associate with any 4D project method using the "." object notation.

For example, to call the HelloWorld 4D method, you just execute the following statement:

$4d.HelloWorld();

JavaScript is case sensitive so it is important to note that the object is named $4d (with a lowercase "d").

La sintaxis de las llamadas a los métodos 4D es la siguiente:

$4d.4DMethodName(param1,paramN,function(result){})

param1...paramN: You can pass as many parameters as you need to the 4D method. Estos parámetros pueden ser de cualquier tipo soportado por JavaScript (cadena, número, array, objeto).
function(result): Function to pass as last argument. Esta función "callback" se llama de forma sincrónica una vez que el método 4D termina de ejecutarse. It receives the result parameter.
result: Execution result of the 4D method. Este resultado puede ser de cualquier tipo soportado por JavaScript (cadena, número, array, objeto).

Por defecto, 4D trabaja en UTF-8. Cuando devuelva un texto que contenga caracteres extendidos, por ejemplo, caracteres con acentos, asegúrese de que la codificación de la página mostrada en el área web esté declarada como UTF-8, ya que de lo contrario los caracteres podrían representarse incorrectamente. In this case, add the following line in the HTML page to declare the encoding: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Ejemplo 1

Given a 4D project method named today that does not receive parameters and returns the current date as a string.

4D code of today method:

 #DECLARE : Text
 return String(Current date;System date long)

En el área web, el método 4D puede ser llamado con la siguiente sintaxis:

$4d.today()

The 4D method does not receive any parameters but it does return the result to the callback function called by 4D after the execution of the method. Queremos mostrar la fecha en la página HTML que es cargada por el área web.

Aquí está el código de la página HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <script type="text/javascript">
$4d.today(function(result)
{
    var curDate = result;
    document.getElementById("mydiv").innerHTML=curDate;
});
</script>
</head>
<body>Today is: <div id="mydiv"></div>
</body>
</html>

Ejemplo 2

The 4D project method calcSum receives parameters and returns their sum:

4D code of calcSum method:

 #DECLARE (... : Real) -> $sum : Real 
  // receives n Real type parameters
  // and returns a Real
 var $i; $n : Integer
 $n:=Count parameters
 For($i;1;$n)
    $0:=$0+${$i}
 End for

El código JavaScript que se ejecuta en el área web es el siguiente:

$4d.calcSum(33, 45, 75, 102.5, 7, function(theSum)
    {
        var result = theSum // result is 262.5
    });

Acciones estándar

Four specific standard actions are available for managing web areas automatically: Open Back URL, Open Forward URL, Refresh Current URL and Stop Loading URL. Estas acciones pueden asociarse a botones o comandos de menú y permiten una rápida implementación de interfaces web básicas. Estas acciones pueden asociarse a botones o comandos de menú y permiten una rápida implementación de interfaces web básicas.

Eventos formulario

Los eventos formulario específicos están destinados a la gestión programada de las áreas de la web, más concretamente a la activación de los enlaces:

Además, las áreas web soportan los siguientes eventos de formulario genéricos:

Reglas de las áreas web

Interfaz de usuario

Cuando se ejecuta el formulario, las funciones estándar de la interfaz del navegador están disponibles para el usuario en el área web, lo que permite la interacción con otras áreas del formulario:

Edit menu commands: When the web area has the focus, the Edit menu commands can be used to carry out actions such as copy, paste, select all, etc., according to the selection.
Context menu: It is possible to use the standard context menu of the system with the web area. Display of the context menu can be controlled using the WA SET PREFERENCE command.
Drag and drop: The user can drag and drop text, pictures and documents within the web area or between a web area and the 4D form objects, according to the 4D object properties. Por razones de seguridad, no se permite por defecto cambiar el contenido de un área web mediante la acción de arrastrar y soltar un archivo o una URL. In this case, the cursor displays a "forbidden" icon . You have to use the WA SET PREFERENCE(*;"warea";WA enable URL drop;True) statement to display a "drop" icon and generate the On Window Opening Denied event. In this event, you can call the WA OPEN URL command or set the URL variable in response to a user drop.

Drag and drop features described above are not supported in web areas using the macOS system rendering engine.

Subformularios

Por razones relacionadas con los mecanismos de redibujado de ventanas, la inserción de un área web en un subformulario está sujeta a las siguientes restricciones:

El subformulario no debe poder desplazarse
Los límites del área web no deben superar el tamaño del subformulario

No se soporta la superposición de un área web sobre o debajo de otros objetos formulario.

Conflicto entre el área web y el servidor web (Windows)

En Windows, no se recomienda acceder, a través de un área web, al servidor web de la aplicación 4D que contiene el área, ya que esta configuración podría provocar un conflicto que paralice la aplicación. Por supuesto, un 4D remoto puede acceder al servidor web de 4D Server, pero no a su propio servidor web.

Inserción del protocolo (macOS)

Las URLs manejadas por programación en áreas web bajo macOS deben comenzar con el protocolo. Por ejemplo, debe pasar la cadena "http://www.mysite.com" y no sólo "www.mysite.com".

Acceso al inspector web

Puede visualizar y utilizar un inspector web dentro de las áreas web de sus formularios o en las áreas web fuera de la pantalla. El inspector web es un depurador que permite analizar el código y el flujo de información de las páginas web.

To display the Web inspector, you can either execute the WA OPEN WEB INSPECTOR command, or use the context menu of the web area.

Execute the WA OPEN WEB INSPECTOR command
This command can be used directly with onscreen (form object) and offscreen web areas.
Use the web area context menu
This feature can only be used with onscreen web areas and requires that the following conditions are met:
- el menú contextual del área web está activado
- el uso del inspector está expresamente autorizado en el área mediante la siguiente declaración:
```
	WA SET PREFERENCE(*;"WA";WA enable Web inspector;True)  
```

With Windows system rendering engine, a change in this preference requires a navigation action in the area (for example, a page refresh) to be taken into account.

For more information, refer to the description of the WA SET PREFERENCE command.

When you have done the settings as described above, you then have new options such as Inspect Element in the context menu of the area. Al seleccionar esta opción, se muestra la ventana del inspector web.

Para una descripción detallada de las funcionalidades de este depurador, consulte la documentación que ofrece el motor de renderizado web.

Propiedades soportadas

Border Line Style - Bottom - Class - Context Menu - Height - Horizontal Sizing - Left - Method - Object Name - Progression - Right - Top - Type - URL - Use embedded Web rendering engine - Variable or Expression - Vertical Sizing - Visibilty - Width

4DCEFParameters.json

The 4DCEFParameters.json is a configuration file that allows customization of CEF parameters to manage the behavior of web areas within 4D applications.

Default switches are provided, but you can override them by using a custom 4DCEFParameters.json file.

In the development phase (using 4D application), create a 4DCEFParameters.json file at the following location:

Windows: Users\[userName]\AppData\Roaming\4D\4DCEFParameters.json
macOS: $HOME/Library/Application Support/4D/4DCEFParameters.json

Before building a final application, add the custom 4DCEFParameters.json file to the Resources folder of the project.

atención

Adding a custom 4DCEFParameters.json file can fundamentally impact all 4D embedded web areas, including 4D View Pro areas. It is the developer's responsibility to ensure that the custom switches do not destabilize the 4D application.

The 4DCEFParameters.json file format is as the following:

{
  "switches":{
     "key":value
  },
  "macOS":{
    "switches": {
     "key":value
    }
  },
  "windows": {
    "switches": {
     "key":value
    }
  }
}

The 4DCEFParameters.json file structure contains:

switches: a list of CEF switches and their corresponding values applied for both macOS and Windows.
macOS.switches: macOS-specific CEF switches.
windows.switches: Windows-specific CEF switches.

The switches in the custom file take precedence. In case of duplication of switches within the same file, the switches defined in the platform-specific subsection ("macOS.switches" or "windows.switches") are given priority and used for configuration.

nota

The list of supported switches is constantly evolving and is managed by the CEF development team. For information about available switches, you need to refer to the CEF developer community.

Ejemplos

Archivo por defecto

The default 4DCEFParameters.json file contains the following switches:

{
  "switches":{
     "enable-media-stream":true,
     "enable-print-preview":true
  },
  "macOS":{
    "switches": {
      "use-mock-keychain": true
    }
  },
  "windows": {
    "switches": {
      "disable-features": "WinUseBrowserSpellChecker"
    }
  }
}

Example of disabling default Switch

{
  "switches": {
    "disable-javascript": true,
    "disable-web-security": true
  }
}

Example for Autoplay

{
  "switches":{
     "autoplay-policy": "no-user-gesture-required"
  }
}

Ver también

Specify your own parameters to initialize the embedded web area (blog post)

Propiedades específicas​

Variables asociadas​

Motor de renderización web​

Acceder a los métodos 4D​

Objeto $4d​

Ejemplo 1​

Ejemplo 2​

Acciones estándar​

Eventos formulario​

Reglas de las áreas web​

Interfaz de usuario​

Subformularios​

Conflicto entre el área web y el servidor web (Windows)​

Inserción del protocolo (macOS)​

Acceso al inspector web​

Propiedades soportadas​

4DCEFParameters.json​

Ejemplos​

Archivo por defecto​

Example of disabling default Switch​

Example for Autoplay​

Ver también​