Função

O componente Frame é utilizado para renderizar uma página dentro de outra página desejada pelo usuário, podendo também ser utilizado pra inserir mídias na página, 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), para entender como configurar esta propriedade, confira nas figuras a seguir.

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 Aprenda 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, como mostra a figura 1.2;
4. Cole o link copiado no campo Origem, na IDE do Cronapp.

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 cronapp, por exemplo, um vídeo.

Exemplo de uso

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 a página 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.

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 página Postos. Confira na figura 2.1 o resultado. Obs: Não esqueça que 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.

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.