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 desejada pelo usuário, podendo também ser utilizado pra inserir mídias na página, como vídeos, por exemplo.
Image Added
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 | origin | Define a origem da página ou mídia que será renderizada. |
Valor | ng-model | Propriedade Angular que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação. |
type | Define o tipo que será utilizado no componente, podendo ser inclusão ou frame | |
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão, um ID é gerado automaticamente e atribuído ao componente. |
Estilo | style | Altera o estilo geral do componente da forma inline. |
Exibir | ng-show | Propriedade Angular usada para mostrar ou oculta o componente. |
Repetir | crn-repeat | Propriedade 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. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
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.
Âncora | ||||
---|---|---|---|---|
|
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.1 2 - Adicionando uma mídia externa ao componente Frame.
Siga os próximos passos para adicionar o link incorporado ao componente:
- No vídeo de sua preferência, clique em Compartilhar;
- Em seguida clique em Incorporar (<>);
- Copie o link, como mostra a figura 1.12;
- Cole o link copiado no campo Origem, na IDE do Cronapp.
Âncora | ||||
---|---|---|---|---|
|
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
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.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.
Nome em inglês
frame
Nesta página
Índice |
---|
Compatibilidade
Formulário web
Equivalente mobile
não possui
Botão do Componente
Imagem no Editor Visual