Função

O componente Frame é utilizado para renderizar uma página dentro de outra página, podendo também ser utilizado pra inserir mídias, como vídeos, por exemplo.

Figura 1: Componente Frame em execução.

Principais propriedades

Na tabela abaixo estão descritas as principais propriedades do componente.

Origem

É possível renderizar no componente Frame páginas internas do projeto ou mídias externas (iframe). Configura Veja abaixo como configurar esta propriedade.

Inserindo uma página interna

Na figura 1.1 exibimos os passos para adicionar uma página interna do projeto ao componente Frame.

Figura 1.1 - Adicionando uma página interna do projeto.

Inserindo uma mídia externa (iframe)

Para exibir uma mídia externa no componente Frame, precisamos obter o link de incorporação. No exemplo da figura abaixo, estamos obtendo o link do vídeo Construindo uma Aplicação em 6 Passos com o Cronapp, mas sinta-se livre para utilizar o vídeo de sua escolha.

Figura 1.2 - Adicionando uma mídia externa ao componente Frame.

Siga os próximos passos para adicionar o link incorporado ao componente:

1. No vídeo de sua preferência, clique em Compartilhar;
2. Em seguida clique em Incorporar (<>);
3. Copie o link do atributo src, como mostra a figura 1.2;
4. Cole o link copiado no campo Origem, na IDE propriedade Origem do Cronappcomponente Frame.

Tipo

Essa propriedade é utilizada em conjunto com a propriedade Origem para informar o modo de exibição do frame, existem dois: inclusão, utilizado quando a propriedade Origem faz referência a uma página interna do projeto, ou frame, utilizado quando a propriedade Origem recebe um iframe externo ao cronappCronapp, por exemplo, um vídeo.

Exemplo de uso: Inclusão

No exemplo a seguir apresentaremos as duas formas de exibição do frame, inicialmente incluindo uma página interna do projeto e posteriormente adicionando um vídeo da web. Colocamos o componente Frame na página inicial e iremos renderizar uma outra página do projeto, a página de Postos nele, a figura 2 é somente uma referência para o leitor ter noção de como é a página que será mostrada no componente Frame., que possui um título e uma imagem de um posto de gasolina. 

Figura 2 - Página postos.

Seguindo os passos da figura 1, adicione a página de sua escolha no componente frame, para este exemplo estamos utilizando a uma página do projeto chamada Postos. Confira na figura 2.1 o resultado. Obs: Não esqueça que nesse Nesse caso, como é uma inserção de uma página interna do projeto, a propriedade Tipo tem que ser inclusão.

Figura 2.1 - Componente Frame renderizando a página postos na Home.

Exemplo de uso: Inclusão

Agora vamos demonstrar o resultado da inserção de um iframe na propriedade Origem, siga os passos da figura 1.2 pra realizar o procedimento. Obs: Altere a propriedade Tipo para Frame.

Figura 2.2 - Componente Frame renderizando um vídeo na página Home.

Bloco de programação

Outra forma de exibir o componente Frame, é através de blocos de programação, é possível realizar os dois tipos de exibição mostradas anteriormente. Para o exemplo a seguir vamos renderizar a página Postos e Abastecimentos, através de dois botões. Inicialmente precisamos criar as funções, confira na figura 3.

Figura 3 - Bloco responsável por renderizar as páginas

As funções acima serão associadas à dois botões, o primeiro é responsável por exibir a página Postos no Frame e a segunda é responsável por exibir a página Abastecimentos. Para criar essas funções utilizamos o bloco de programação Alterar valor do campo. A figura 3.1 exibe o resultado da função RenderizaPostos.

Figura 3.1 - Função RenderizaPostos exibindo a página Postos no componente Frame.

A segunda função, RenderizaAbastecimentos, exibe a página Abastecimentos no componente Frame,

Figura 3.2 - Função RenderizaAbastecimentos exibindo a página Abastecimentos no componente Frame.