AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

Ayuda / Desarrollar una aplicación o un sitio web / Controles, ventanas y páginas / Controles: tipos disponibles / Control Componente Web
  • Presentación del control Componente Web
  • Crear un control Componente Web
  • Introducir los diferentes recursos de un componente Web
  • Utilizar recursos adicionales
  • Características del control componente Web
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 del control Componente Web
El control Componente Web permite agregar cualquier recurso Web externo a un sitio WEBDEV. Varios recursos Web reutilizables están disponibles en Internet: snippets de Bootstrap, componentes JQuery.UI, componentes Angular.JS, etc.
Los sitios especializados proponen recursos (gratuitos o pagos).
En la mayoría de los casos, los recursos Web externos (Angular JS, Snippets de Bootstrap, etc.) vienen como tres componentes:
  • un código HTML,
  • un código CSS,
  • un código JavaScript.
Puede que se proporcionen archivos de dependencia (imágenes, etc.). Se debe instalar un framework.
El control Componente Web permite gestionar estos recursos.
Crear un control Componente Web
Para crear un control Componente Web:
  1. En la pestaña "Creación", en el grupo "Integración", haga clic en "Componente Web".
    Crear un control Componente Web
  2. Haga clic en la ubicación en la que desea crear el control. El control aparece en el editor.
    Observación: Las dimensiones del control que se creó se optimizan para ocupar el espacio disponible en la ubicación indicada. Si es necesario, cambie el tamaño del control usando los controladores de tamaño.
Para ver las características del control, seleccione la opción "Descripción en el menú contextual.
Consejo: Si conoce el tipo de recursos utilizados, puede agregar un control Componente Web predefinido: este se asocia directamente a los recursos externos de las bases de datos. Para agregar un control Componente Web predefinido:
  1. En la pestaña "Creación", en el grupo "Integración", despliegue "Componente Web" y seleccione el componente Web que desea crear:
    • JQuery
    • JQuery UI
    • Bootstrap
    • Angular
  2. Haga clic en la ubicación en la que desea crear el control. El control aparece en el editor.

Introducir los diferentes recursos de un componente Web

Los diferentes recursos (código HTML, código CSS y código JS) se pueden asociar al control Componente Web mediante una de las siguientes opciones:
  • en la pestaña "General" de la descripción del control:
    1. En "Códigos fuente HTML - CSS - JS", haga clic en "Editar".
      Editar código HTML - CSS - JS
    2. Enseguida, aparece una ventana que le permite introducir los códigos necesarios.
    3. Pegue los códigos necesarios para el componente.
      Editor de códigos HTML - CSS - JS
  • en las pestañas de código asociadas al control:
    1. Seleccione el control Componente Web.
    2. Tres pestañas específicas se muestran en la parte superior del editor de páginas: "HTML", "CSS" y "JavaScript".
      Pestañas específicas de los códigos HTML - CSS - JS
    3. En cada pestaña, escriba el código necesario para el componente. Por ejemplo:
      Editor de código HTML

Utilizar recursos adicionales

El recurso Web utilizado puede requerir frameworks específicos. La pestaña "General" de la ventana de descripción del control Componente Web permite:
  • Agregar recursos externos introduciendo directamente la URL del recurso JavaScript o CSS.
    Introducir recursos JS o CSS
  • Agregar recursos CSS, si es necesario.
Características del control componente Web
La ventana de descripción del control permite definir las principales características del control Componente Web:
  • La pestaña "General" permite introducir los diferentes códigos asociados al control y los recursos externos utilizados (ver párrafo anterior).
    Observación: En la mayoría de los casos, si un sitio proporciona recursos Web, los especifica.
  • La pestaña "UI" permite especificar si la renderización HTML debe mostrarse en modo de edición. Si la opción "Mostrar renderizado HTML en edición" está seleccionada:
    • se interpreta y muestra el código HTML.
    • el modo de edición podría ralentizarse.
    • la renderización se calcula sin ejecutar el código JavaScript y sin "media queries".
  • La pestaña "Detalles" permite ver los procedimientos locales Navegador y Servidor del control. Puede agregar, eliminar o editar estos procedimientos.
Versión mínima requerida
  • Versión 22
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 27/05/2022

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