Saltar al contenido principal
Versión: v20 R4 BETA

Qodly Studio

Vista previa para desarrolladores

Qodly Studio in 4D is currently in the Developer Preview phase. No debe utilizarse en producción.

Qodly Studio is part of the Qodly platform, dedicated to the development of web business applications designed, tested and published entirely in the Qodly Cloud.

As of 4D v20 R2, you can use Qodly Studio directly from 4D to build modern and sophisticated web interfaces that you can easily integrate to your existing 4D projects and deploy on premise.

Con Qodly Studio, descubrirá una interfaz de usuario web totalmente nueva, se familiarizará con el concepto de fuentes de datos y aprenderá a:

  • crear formularios web colocando componentes en una página
  • mapear componentes a datos
  • activar código 4D configurando eventos
  • y mucho más.
info

El uso de Qodly Studio en 4D requiere una licencia específica. Las opciones y elementos de menú de Qodly Studio no aparecerán si la licencia no está activada.

Configuración

Requisitos

Qodly Studio soporta los siguientes navegadores web:

  • Chrome
  • Edge
  • FireFox

La resolución recomendada es 1920x1080.

Aplicación 4D

  • Desarrollo: 4D v20 R2 o superior
  • Despliegue: 4D Server v20 R2 o superior
  • Qodly Studio solo funciona con proyectos 4D (no soporta bases de datos binarias).

Acceso a Qodly Studio

Por defecto, no se permite el acceso a Qodly Studio.

Qodly Studio is served by the WebAdmin web server and displays data from 4D projects handled by the 4D web server.

Para permitir el acceso a Qodly Studio, debe permitirlo explícitamente en dos niveles:

  • a nivel 4D (4D o 4D Server)
  • a nivel del proyecto

Si uno de los dos niveles (o ambos) no están habilitados, se niega el acceso a Qodly Studio (se devuelve una página 403).

En nivel 4D

As a first security level, you need to allow access to Qodly Studio on the WebAdmin web server.

Esta configuración se aplica a la aplicación 4D (4D o 4D Server) en la máquina local. Todos los proyectos abiertos con esa aplicación 4D tienen en cuenta esta configuración.

Mantenga esta opción desmarcada si desea asegurarse de que no se permite el acceso a Qodly Studio en la aplicación.

Marque esta opción para poder acceder a Qodly Studio. Sin embargo, sigue siendo necesario activarla en cada nivel del proyecto.

Additionally, you can configure the WebAdmin web server's HTTP/HTTPS port used.

nota

After any change to these settings, you must restart the WebAdmin web server for the new configuration to be effective.

A nivel del proyecto

Después de haber habilitado el acceso a Qodly Studio en el nivel 4D, es necesario designar explícitamente cada proyecto al que se puede acceder. The Enable access to Qodly Studio option must be enabled on the Web Features page of the 4D application's Settings.

Keep in mind that user settings can be defined at several levels, and that priorities apply.

Activando la autenticación

La autenticación en el servidor web WebAdmin se realiza utilizando una llave de acceso. For more details, see Access key.

Activación del renderizado

Para habilitar el renderizado de los webforms que se crean en Qodly Studio, se deben configurar las siguientes opciones.

When rendering webforms in the Web Studio, the renderer will connect to the 4D web server through HTTP or HTTPS, depending on the settings, following the same HTTP/HTTPS connection pattern as for the WebAdmin web server.

info

See this page for information on how to render webforms in Qodly.

Note that when you click on the "Preview in a new tab" button, a tab will open at IP:port/$lib/renderer/?w=WebFormName on your machine.

Tenga en cuenta que Qodly Web Studio se ejecuta a través del servidor web 4D WebAdmin. Cuando utiliza Qodly Web Studio como desarrollador, incluso cuando previsualiza un formulario web en el estudio, está utilizando el servidor web 4D WebAdmin. Esto le permite ver, por ejemplo, clases de datos, funciones y atributos que no están expuestos como recursos REST (aparecen en gris).

Sin embargo, el renderizado del formulario web ocurre fuera de 4D Web Studio, y es servido por el servidor web estándar de 4D. En esta situación, su aplicación web no puede acceder a activos que no estén expuestos como recursos REST. See Exposed vs non-exposed functions and Exposing tables for more information on how to expose assets.

nota

Renderer buttons are hidden if the configuration options are not activated.

Servidor WebAdmin y despliegue

Para el despliegue, el servidor WebAdmin no es necesario. El acceso del usuario final a su aplicación web realizada con Qodly Studio se basa en el protocolo 4D REST, y como tal, funciona como a través de una aplicación remota 4D convencional.

Uso métodos proyecto

Recomendamos utilizar funciones clase en lugar de métodos proyecto. Sólo las funciones de clase pueden ser llamadas desde los componentes. Sin embargo, puede seguir utilizando sus métodos de proyecto en Qodly Studio de dos maneras:

  • Puede llamar a sus métodos desde funciones clase.
  • You can directly execute your methods from the Qodly Explorer.

Abrir Qodly Studio

The Qodly Studio page is available when the WebAdmin web server is running and authentication is activated (see above).

Hay dos formas de acceder a Qodly Studio:

  • from your 4D single-user application, go to Design > Qodly Studio.... If the WebAdmin web server is already running, depending on its configuration, your default browser opens at IPaddress:HTTPPort/studio or IPaddress:HTTPSPort/studio. De lo contrario, se le preguntará si desea iniciar primero el servidor web WebAdmin.

  • en un navegador, con el servidor web WebAdmin en ejecución (lanzado desde 4D o 4D Server), introduzca la siguiente dirección:

IPaddress:HTTPPort/studio

o:

IPaddress:HTTPSPort/studio

Por ejemplo, después de iniciar un servidor web local en el puerto 7080, escriba esta dirección en su navegador:

localhost:7080/studio

You will then be prompted to enter the access key to access Qodly Studio.

Utilizar Qodly Studio

The official Qodly Studio documentation is available on the Qodly documentation website.

Puede confiar en esta documentación y sus recursos asociados para desarrollar aplicaciones web basadas en formularios web. Sin embargo, dependiendo de la fase de implementación, los desarrolladores 4D utilizarán Qodly Studio o 4D IDE.

info

No existe compatibilidad directa entre las aplicaciones implementadas con 4D y las implementadas con Qodly.

Comparación de funcionalidades

Qodly Studio para desarrolladores 4D que utilizan 4D IDEQodly Studio para desarrolladores Qodly
Ver y editar tablas (clases de datos), atributos y relacionesEditor de estructura 4D(1)Qodly Studio Model Editor
WebformsQodly Studio Webform EditorQodly Studio Webform Editor
Formularios de escritorio4D IDEnot supported
Lenguaje de programaciónLenguaje 4D con ORDAQodlyScript con ORDA
IDE de código4D IDE code editor/VS Code with 4D extension(2)Editor de código Qodly Studio
DebuggerDepurador 4D IDEQodly Studio debugger
Roles y privilegios REST/Webroles.json direct edit/Qodly Studio roles and privileges editorEditor de roles y privilegios de Qodly Studio

(1) If you click on the Model button in Qodly Studio, nothing happens. (2) Cuando abre algún código 4D en Qodly Studio, el coloreado de sintaxis no está disponible y se muestra una advertencia "Lsp not loaded".

Gestión de proyectos

De acuerdo con la gestión de proyectos 4D, sólo se admiten los siguientes usos:

  • development with Qodly Studio must be done using 4D (single-user).
  • deployment of 4D applications powered with Qodly webforms must be done using 4D Server.

De QodlyScript al lenguaje 4D

4D developers can use the Qodly Studio documentation to learn how to design their webforms in Qodly Studio. Se ofrecen ejemplos de código en QodlyScript, pero como QodlyScript hereda del Lenguaje 4D, no se sentirá perdido. Convertir código QodlyScript a lenguaje 4D es fácil, sólo requiere algunas adaptaciones:

Nombres de variables

QodlyScript only support local variables, so variables in QodlyScript examples are not prefixed with $. In the 4D code, make sure to prefix variable names with $ so that they are identifed as local variables by 4D.

Símbolos y palabras clave

Algunos símbolos básicos, operadores y palabras clave difieren en QodlyScript y deben adaptarse al Lenguaje 4D. Estas se listan a continuación:

QodlyScriptLenguaje 4DComentario
,;separador de argumentos
=:=operador de asignación
===operador de comparación
declare#Declare
switchCase of
constructorClass constructor
extendsClass extends
endEnd for, End For each, End if, End case, End use, End while
forEachFor each
stringTexttipo de variable
numberRealtipo de variable

Some other items have a different case (ex: this vs This) but can be pasted directly in 4D code.

Nombres de comandos

Los nombres de los comandos QodlyScript se escriben en mayúsculas y sin espacios. Puede que necesite adaptar estos comandos al lenguaje 4D.

  • Normalmente, sólo tendrá que convertir los nombres. For example, newCollection in QodlyScript is New collection in 4D Language.
  • Sin embargo, algunos comandos han sido renombrados para una mejor compatibilidad. Estas se listan a continuación:
QodlyScriptLenguaje 4D
atanArctan
highestProcessNumberCount tasks
callChainGet call chain
objectClassOB Class
objectCopyOB Copy
objectEntriesOB Entries
instanceOfOB Instance of
objectIsDefinedOB Is defined
objectIsEmptyOB Is empty
objectIsSharedOB Is shared
objectKeysOB Keys
objectRemoveOB REMOVE
objectValuesOB Values
sqrtSquare root

Ejemplo

  • Código QodlyScript:
 declare(entitySelection : 4D.EntitySelection)  
var dataClass : 4D.DataClass
var entity, duplicate : 4D.Entity
var status : object
dataClass=entitySelection.getDataClass()
forEach(entity,entitySelection)
duplicate=dataClass.new()
duplicate.fromObject(entity.toObject())
duplicate[dataClass.getInfo().primaryKey]=null
status=duplicate.save()
end
  • Código 4D equivalente:
 #DECLARE ( $entitySelection : 4D.EntitySelection )  
var $dataClass : 4D.DataClass
var $entity; $duplicate : 4D.Entity
var $status : Object
$dataClass:=$entitySelection.getDataClass()
For each($entity;$entitySelection)
$duplicate:=$dataClass.new()
$duplicate.fromObject($entity.toObject())
$duplicate[$dataClass.getInfo().primaryKey]:=Null
$status:=$duplicate.save()
End for each

Uso sin conexión

Puede desarrollar con Qodly Studio mientras su ordenador no esté conectado a Internet. En este caso, sin embargo, las siguientes funciones no están disponibles:

  • Templates: the Template library is empty
  • UI tips: they are not displayed when you click on alt-text icons.

Sobre la licencia de uso

Para renderizar formularios web, debe tener una licencia disponible, ya que renderizar un formulario web abre una sesión en el servidor web principal de la base de datos del proyecto.

Esquemas URL

La configuración del esquema URL de Qodly Studio (HTTP y HTTPS) determina cuántas licencias se retienen al renderizar los formularios web. Con la configuración adecuada, puede evitar retener licencias innecesarias.

As explained in the configuration section, the WebAdmin web server provides a secured web access to Qodly Studio. On the other hand, the renderer communicates with the 4D web server of the database using REST requests. Como tal, se comporta como un Cliente 4D convencional.

Si ejecuta el renderizador desde Qodly Studio y no se accede a estos dos servidores web a través del mismo esquema de URL (HTTP o HTTPS), es posible que el conteo de licencias sea incorrecto.

Ejemplo

  1. You run the Qodly Studio on an HTTPS URL scheme (e.g. https://127.0.0.1:7443/studio/)

  2. El servidor web de su base de datos se inicia sólo en un puerto HTTP.

alt-text

  1. En Qodly Studio, haga clic en el icono renderización. You are warned that the two web servers are started on different schemes, but despite this you click on the Confirm button.

alt-text

Como resultado, se conservan dos licencias.

nota

Puede activar/desactivar la visualización de la ventana emergente del renderizador utilizando los parámetros de usuario de Qodly Studio.

Atributo SameSite

El comportamiento descrito anteriormente se debe a la cookie de sesión del servidor web 4D. This session cookie has a SameSite attribute that determines if the session cookie is sent to the web server.

If the SameSite attribute's value is Strict (default), the session cookie is not sent to the web server, so a new session is opened each time a page is rendered or refreshed.

For more information on the SameSite attribute, check out this blog post.

Recomendaciones

Para evitar utilizar más licencias de las necesarias, recomendamos hacer una de las siguientes cosas:

  • Run the renderer on another browser tab (by entering the rendered URL of your Web form: IP:port/$lib/renderer/?w=WebFormName).
  • Asegúrese de que Qodly Studio y su base de datos se alcanzan en el mismo esquema URL.
  • Use the Lax value for the session cookie of your project database's web server.

Hello, World

Este vídeo de 5 minutos ofrece un ejemplo "Hello World" y cubre cómo activar el acceso al estudio, crear una interfaz básica y configurar un evento que salude al usuario por su nombre: