Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

Função

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

Dica

Também é possível exibir um fragmento de uma página, para isso utilize o componente visual Fragmento.


Figura 1 - Componente Frame em execução.

Principais propriedades

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

Nome

Propriedade

Função

Origem originDefine a origem da página ou mídia que será renderizada. 

Tipo

type

Define o tipo que será utilizado no componente, podendo ser inclusão ou frame.

  • Inclusão: Adiciona páginas internas do projeto ao componente Frame.
  • Frame: Adiciona links externos do projeto no componente Frame, como vídeos ou páginas de sites que suportem esse recurso.
IdentificadoridAtributo que especifica um ID exclusivo para o componente. Por padrão, um ID é gerado automaticamente e atribuído ao componente.
EstilostyleAltera o estilo geral do componente da forma inline.
Exibirng-showPropriedade Angular usada para mostrar ou oculta o componente.
Repetircrn-repeatPropriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados.

Segurança

cronapp-security

Propriedade do Cronapp que trata as permissões de segurança da aplicação. Usado para permitir ou não edição e visualização do componente com base nos perfis de selecionados.

Skincrn-skinPermite selecionar um skin que afetará apenas o componente selecionado.
Classes CSSclassAdiciona classes CSS que já foram criadas.

Origem

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

Seleção de 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.


  1. Arraste o componente Frame até a área de edição e selecione-o;
  2. Acesse a propriedade Origem;
  3. Selecione uma das páginas do projeto web ou mobile, dependendo da aplicação que esteja trabalhando.
  4. A propriedade Tipo é utilizada em conjunto com a propriedade Origem, informando o modo de exibição do frame, selecione o tipo inclusão, ele é utilizado quando a propriedade Origem faz referência a uma página interna do projeto.

Seleção de 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 uma mídia de sua escolha.


Image Modified

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


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

  1. No vídeo, 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 na propriedade Origem do componente Frame.
  5. Selecione o Tipo como Frame, ele é  utilizado quando a propriedade Origem recebe um iframe externo ao Cronapp, por exemplo, um vídeo.


Dica

Outra forma de adicionar um vídeo à uma aplicação mobile, é utilizando o componente vídeo, acesse sua documentação oficial para mais detalhes