L'élément iframe (abréviation de internal frame) est conçu pour intégrer du contenu provenant d'autres sources dans une page HTML. Par exemple, grâce à l'utilisation d'un iframe, vous ne devez pas penser à créer votre propre lecteur vidéo et à stocker des fichiers vidéo volumineux. Au lieu de cela, vous pouvez utiliser YouTube et ajouter la vidéo requise à votre application Web à l'aide d'un iframe.
Utilisation d'un iframe pour une vidéo YouTube
Prenons un exemple concret. Créons une page pour regarder une vidéo de la chaîne AppMaster YouTube sur l'utilisation des fichiers dans les processus métier. Pour ce faire, vous devez placer un élément iframe sur le canevas, spécifier les paramètres nécessaires (par exemple, la taille et les retraits) et définir un lien vers la vidéo souhaitée dans le champ Src champ.
Dans un premier temps, YouTube assume la possibilité d'une telle intégration de vidéos et fournit les outils nécessaires pour faciliter au maximum le processus. En cliquant sur le bouton "Share"sous la vidéo, vous pouvez utiliser l'option "Embed.
YouTube fournit tout le code HTML nécessaire pour placer la vidéo sur sa page, mais dans notre cas, tout le code n'est pas intéressant, seulement un lien vers la vidéo requise. Vous devez le copier et le placer dans les paramètres de l'iframe.
Les paramètres de largeur et de hauteur par défaut - 560 et 315 - sont également visibles ici.
Vous pouvez publier l'application et vous assurer qu'elle comporte bien une vidéo intégrée.
De même, vous pouvez intégrer d'autres types de données provenant d'autres sources. Par exemple, ajouter une carte.
Grâce à ces paramètres, vous pouvez afficher la carte sous la forme d'un cercle avec une épaisse bordure en pointillés.
Utilisation d'un HTML personnalisé dans un iframe
Considérons une option plus complexe. Nous allons créer indépendamment des pages html pour l'iframe, et ne pas utiliser de données provenant de sources tierces. Pour ce faire, ajoutez un élément RichtextEditor au canevas. Il vous permet de créer du HTML, à la fois à l'aide d'un éditeur visuel pratique et par l'édition directe du code HTML.
Il est nécessaire de faire en sorte que tout HTML créé dans l'éditeur puisse être enregistré dans un fichier, puis affiché via une iframe. Ajoutons un bouton et créons le processus commercial correspondant qui sera lancé lorsqu'il sera cliqué.
Dans le cadre du processus métier, vous devez :
- Obtenir du HTML de l'éditeur en utilisant le bloc Richtext Get Properties bloc.
- Convertir le HTML en octets (To Bytes).
- Utiliser le bloc Make File pour créer un fichier. Gardez à l'esprit que pour créer un fichier, vous n'avez besoin que de son contenu (Bytesil a été obtenu à l'étape précédente) et de son nom (il peut être n'importe quoi, mais il doit être installé).
- Envoyez le fichier créé au serveur, et enregistrez-le dans la base de données (Server request POST /_files/).
- Obtenez l'ID du fichier créé (Expand File - ID)
- Convertir l'ID en chaîne (To String)
- Récupérer un lien vers un fichier en utilisant Concat String. Le résultat devrait être un lien comme https://vdjyien-app.apms.io/api/_files/dQhJVTYrToCqr9G4KWKRD/download/, où "vdjyien-app.apms.io" est l'adresse de votre serveur, et "dQhJVTYrToCqr9G4KWKRD" est l'ID du fichier obtenu à l'étape précédente. Le lien résultant devrait s'ouvrir dans un navigateur. Assurez-vous que le point de réception du fichier lui-même (GET /_files/:id/download/) ne nécessite pas d'autorisation et est ouvert à l'accès.
- Si le lien est OK, il ne reste plus qu'à le passer à l'iframe et à voir le résultat (iFrame Update Properties).
Maintenant, tout HTML créé dans le Richtext Editor peut être stocké dans la base de données et affiché dans l'application. Ainsi, en utilisant le bloc iframe, vous pouvez même ajouter à votre application des éléments qui ne sont pas initialement fournis par le concepteur, utiliser des polices non standard ou créer des blocs avec du code HTML personnalisé.
