Saltar a contenido

Componente

Los componentes son los bloques de construcción clave en la plataforma, proporcionando la base para construir aplicaciones. Son unidades encapsuladas de funcionalidad que pueden incluir datos, interfaz de usuario, lógica de negocio y automatización de procesos.

Tipos de Componente

  1. Componente Único:

  2. Contiene el modelo de objeto básico para almacenar datos.

  3. Incluye un modelo de UI con formularios y controles.
  4. Tiene un modelo de automatización con flujos de datos y flujos de trabajo.
  5. Soporta scripts de Python para personalización adicional del comportamiento.
  6. Tiene opciones de seguridad únicas.

  7. Componente Múltiple:

  8. Combina múltiples Componentes para crear aplicaciones complejas.
  9. Se utiliza para construir una única interfaz de usuario, por ejemplo, en aplicaciones móviles.

Creando un Nuevo Componente

  1. Abre Studio ('https:///studio').
  2. Ve al menú Aplicaciones/Componentes.
  3. Haz clic en el botón Agregar para crear un nuevo componente o componente múltiple.

Configuraciones Básicas del Componente

Parámetro Descripción
Title El nombre del componente que se muestra a los usuarios.
Proxy Mode Determina si el componente actuará como un proxy.
Restrict Access Restringe el acceso al componente.
Maker Identifica al creador o propietario del componente.
Cron Configuración del tiempo de inicio de un componente usando Cron.
Run as User Especifica el usuario en nombre del cual se ejecutará.
Access Mode Define el modo de acceso al componente.
Description Una descripción detallada del componente, su propósito y funciones.
Domains Los dominios o categorías a los que pertenece el componente.

Modelo de Objeto del Componente en la Plataforma

Cada componente en la plataforma incluye automáticamente los siguientes campos:

  • 'Id': Un identificador único del componente.
  • 'creatorSubject': El sujeto que ha creado el objeto.
  • 'updateSubject': El sujeto que ha actualizado el objeto.
  • 'createdDate': Fecha en que se creó el objeto.
  • 'updateDate': Fecha en que se actualizó por última vez el objeto.

Los componentes pueden incluir elementos adicionales, que pueden pertenecer a uno de once tipos: 'string', 'datetime', 'catalog', 'number', 'integer', 'array', 'file', 'boolean', 'time', 'date', 'uri'. Cada uno de estos elementos tiene sus propias configuraciones.

Configuraciones globales para todos los tipos:

  • 'Name': Nombre del sistema de la propiedad.
  • 'Title': Nombre de la propiedad que se mostrará en la interfaz.
  • 'Required': Especifica si el campo es obligatorio.
  • 'Primary Key': Determina si un campo es un identificador único.
  • 'Query': Determina si el campo puede ser utilizado en consultas.
  • 'Virtual property': Excluye un campo de los procesos de sincronización.

Constructor de Interfaz

La plataforma ofrece una herramienta poderosa para personalizar la interfaz de usuario para cada componente: el Constructor de Interfaz. Es un editor visual que te permite crear y personalizar interfaces de usuario de múltiples componentes utilizando características de arrastrar y soltar. El Constructor de Interfaz es un espacio de trabajo en la sección de Definición de la Interfaz de Creación de Componentes.

En esta sección, puedes:

  • Crear una interfaz de aplicación de múltiples pantallas utilizando un editor intuitivo de arrastrar y soltar.
  • Agregar elementos de UI de las categorías Básica, Avanzada y Diseño.
  • Configurar el modelo de objeto para el Flujo de Trabajo y el Flujo de Datos de la aplicación.
  • Personalizar estilos CSS para todos los elementos de UI.

Después de agregar elementos de UI al diseño de la página de tu aplicación, puedes realizar las siguientes operaciones:

  • Copiar: Copia el elemento actual al portapapeles.
  • Pegar: Pega el elemento copiado en una nueva ubicación.
  • Mover: Cambia la posición del elemento.
  • Propiedades: Abre el panel de propiedades para configurar el elemento.
  • Vista previa: Muestra el diseño en un formato que se asemeja a la aplicación del usuario.
  • Vista previa de marcado: Muestra el marcado web textual de la página.
  • Eliminar: Elimina el elemento seleccionado.
  • Campo de datos: Permite vincular un elemento a un campo de datos (enlace a la base de datos).

Módulo de partes web: “Estilos” y “JavaScript”

El bloque “Estilos” está diseñado para describir los estilos CSS que se aplican al componente, mientras que el bloque “JavaScript” permite establecer interacción con la interfaz de usuario y proporcionar funcionalidad adicional utilizando el lenguaje JavaScript.

De esta manera, el módulo de Partes Web permite a los desarrolladores crear componentes más complejos e interactivos utilizando diferentes lenguajes de programación para describir estilos y funcionalidad.

Usando "JavaScript"

Ejemplo de uso de JavaScript para implementar funcionalidad para crear botones, al presionar los cuales se toma una captura de pantalla:

  1. Para llamar a funciones de JavaScript desde el bloque 'Partes web', es necesario usar el método context.InvokeInterop(methodName, objects) dentro del script del Componente:

````python def capturePage1(): context.InvokeInterop("callScreenshot")

  1. Next, we move to the 'JavaScript' section of the 'Web parts' block and prepare function: ```javascript // Creando un elemento