O elemento iframe (abreviatura para frame interno) é concebido para incorporar conteúdo de outras fontes numa página HTML. Por exemplo, graças à utilização de um iframe, não se pode pensar em criar o seu próprio leitor de vídeo e armazenar grandes ficheiros de vídeo. Em vez disso, pode usar o YouTube e adicionar o vídeo necessário à sua aplicação web usando um iframe.
Utilizar o iframe para vídeo do YouTube
Vejamos um exemplo específico. Vamos criar uma página para ver um vídeo do canal AppMaster YouTube sobre a utilização de ficheiros em processos empresariais. Para o fazer, é necessário colocar um elemento iframe na tela, especificar as definições necessárias (por exemplo, em tamanho e travessões), e estabelecer uma ligação para o vídeo desejado no canal Src campo.
Ao mesmo tempo, o YouTube assume inicialmente a possibilidade de tal incorporação de vídeo e fornece as ferramentas necessárias para a máxima conveniência do processo. Ao clicar no campo "Share" por baixo do vídeo, pode usar o botão "Embed" opção.
O YouTube fornecerá todo o código HTML necessário para colocar o vídeo na sua página, mas no nosso caso, nem todo o código é de interesse, apenas um link para o vídeo requerido. É necessário copiá-lo e colocá-lo nas definições do iframe.
As configurações padrão de largura e altura - 560 e 315 - são também visíveis aqui.
Pode publicar a aplicação e certificar-se de que agora tem realmente um vídeo incorporado.
Da mesma forma, é possível incorporar outros tipos de dados de outras fontes. Por exemplo, adicionar um mapa.
Como resultado destas configurações, pode exibir o mapa como um círculo com uma borda com pontos grossos.
Usando HTML personalizado num iframe
Vamos considerar uma opção mais complexa. Iremos criar independentemente páginas html para o iframe, e não utilizar dados de fontes de terceiros. Para o fazer, adicione uma opção RichtextEditor elemento para a tela. Permite criar HTML, tanto com a ajuda de um conveniente editor visual como através da edição directa do código HTML.
É necessário fazê-lo para que qualquer HTML criado no editor possa ser guardado como um ficheiro, e depois exibido através de um iframe. Vamos adicionar um botão e criar o processo de negócio correspondente que será lançado quando for clicado.
Como parte do processo de negócio, deverá:
- Obter HTML do editor utilizando a função Richtext Get Properties bloco.
- Converter HTML em Bytes (To Bytes).
- Utilizar o Make File bloco para criar um ficheiro. Tenha em mente que, para criar um ficheiro, só precisa do seu conteúdo (Bytesfoi obtido no passo anterior) e o nome (pode ser qualquer coisa, mas deve ser instalado).
- Envie o ficheiro criado para o servidor, e guarde-o na base de dados (Server request POST /_files/).
- Obter a identificação do ficheiro criado (Expand File - ID)
- Converter ID para String (To String)
- Recolher um link para um ficheiro utilizando Concat String. O resultado deve ser um link como https://vdjyien-app.apms.io/api/_files/dQhJVTYrToCqr9G4KWKRD/download/, onde "vdjyien-app.apms.io" é o endereço do seu servidor, e "dQhJVTYrToCqr9G4KWKRD" é o ID do ficheiro obtido no passo anterior. A ligação resultante deve abrir-se num browser. Certifique-se de que o ficheiro que recebe o ponto final em si (GET /_files/:id/download/) não necessita de autorização e está aberto para acesso.
- Se a ligação estiver OK, tudo o que resta é passá-la para o iframe e ver o resultado (iFrame Update Properties).
Agora qualquer HTML criado no Richtext Editor pode ser armazenada na base de dados e exibida na aplicação. Assim, utilizando o bloco iframe, pode mesmo adicionar elementos à sua aplicação que não são inicialmente fornecidos pelo designer, utilizar fontes não normalizadas, ou criar blocos com código HTML personalizado.
