El elemento iframe (abreviatura de marco interno) está diseñado para incrustar contenidos de otras fuentes en una página HTML. Por ejemplo, gracias al uso de un iframe, no tienes que pensar en crear tu propio reproductor de vídeo y almacenar grandes archivos de vídeo. En su lugar, puede utilizar YouTube y añadir el vídeo necesario a su aplicación web utilizando un iframe.
Uso de iframe para vídeos de YouTube
Veamos un ejemplo concreto. Vamos a crear una página para ver un vídeo del canal AppMaster YouTube sobre el uso de archivos en los procesos empresariales. Para ello, hay que colocar un elemento iframe en el lienzo, especificar la configuración necesaria (por ejemplo, en tamaño y sangrías) y establecer un enlace al vídeo deseado en el campo Src campo.
Al mismo tiempo, YouTube asume inicialmente la posibilidad de tal incrustación de vídeo y proporciona las herramientas necesarias para la máxima comodidad del proceso. Haciendo clic en el botón "Share" debajo del vídeo, puede utilizar la opción "Embed".
YouTube proporcionará todo el código HTML necesario para colocar el vídeo en su página, pero en nuestro caso, no todo el código es de interés, sólo un enlace al vídeo requerido. Es necesario copiarlo y colocarlo en la configuración del iframe.
Los ajustes predeterminados de anchura y altura - 560 y 315 - también son visibles aquí.
Puedes publicar la aplicación y asegurarte de que ahora sí tiene un vídeo incrustado.
Del mismo modo, puedes incrustar otros tipos de datos de otras fuentes. Por ejemplo, añadir un mapa.
Como resultado de estos ajustes, puede mostrar el mapa como un círculo con un borde punteado grueso.
Utilizar HTML personalizado en un iframe
Consideremos una opción más compleja. Vamos a crear de forma independiente páginas html para el iframe, y no utilizar datos de fuentes de terceros. Para ello, añada un elemento RichtextEditor al canvas. Te permite crear HTML, tanto con la ayuda de un cómodo editor visual como a través de la edición directa del código HTML.
Es necesario hacer que cualquier HTML creado en el editor pueda ser guardado como un archivo, y luego mostrado a través de un iframe. Vamos a añadir un botón y crear el correspondiente proceso de negocio que se lanzará cuando se haga clic en él.
Como parte del proceso de negocio, deberías:
- Obtener HTML del editor utilizando el bloque Richtext Get Properties bloque.
- Convertir HTML a Bytes (To Bytes).
- Utilizar el bloque Make File para crear un archivo. Tenga en cuenta que para crear un archivo sólo necesita su contenido (Bytesobtenido en el paso anterior) y el nombre (puede ser cualquier cosa, pero debe estar instalado).
- Envíe el fichero creado al servidor, y guárdelo en la base de datos (Server request POST /_files/).
- Obtenga el ID del archivo creado (Expand File - ID)
- Convertir el ID en cadena (To String)
- Recoger un enlace a un archivo usando Concat String. El resultado debería ser un enlace como https://vdjyien-app.apms.io/api/_files/dQhJVTYrToCqr9G4KWKRD/download/, donde "vdjyien-app.apms.io" es la dirección de su servidor, y "dQhJVTYrToCqr9G4KWKRD" es el ID del archivo obtenido en el paso anterior. El enlace resultante debería abrirse en un navegador. Asegúrese de que el propio punto final de recepción de archivos (GET /_files/:id/download/) no requiere autorización y está abierto al acceso.
- Si el enlace es correcto, sólo queda pasarlo al iframe y ver el resultado (iFrame Update Properties).
Ahora cualquier HTML creado en el Richtext Editor puede almacenarse en la base de datos y mostrarse en la aplicación. Así, utilizando el bloque iframe, puedes incluso añadir a tu aplicación elementos no proporcionados inicialmente por el diseñador, utilizar fuentes no estándar o crear bloques con código HTML personalizado.
