O componente Fragmento é utilizado para renderizar o arquivo Fragmento em outra página. A ideia da utilização do Fragmento é poupar tempo e esforço, já que os fragmentos são independentes e reutilizáveis, ou seja, basta criar uma vez e utilizar sempre que for necessário no projeto.

Figura 1- Componente Fragmento sendo utilizado para replicar os botões

Principais propriedades

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

Arquivo Fragmento

Para que o componente Fragmento funcione, primeiro temos que criar um arquivo do tipo Fragmento. Esse arquivo possui a extensão *.component.html e devem ficar nos diretórios:

• Localização mobile: Fragmentos/mobile/ 

• Localização web:  Fragmentos/web/ 

Arquivos do tipo tipo Fragmento abrem a janela do Editor de views.

Exemplo

Como exemplo de utilização, criaremos um fragmento que contém um botão de adicionar um produto ao carrinho.

Figura 2 - Criando um Arquivo Fragmento

1. Na estrutura de arquivos clique com o botão direito no diretório Fragmentos.
2. Clique com o botão direito na pasta Web.
3. Clique em Novo.
4. Clique em Fragmento 
5. Por fim, dê um nome ao arquivo, neste exemplo demos o nome de "Botão".

Agora iremos adiciona o botão no arquivo criado. É possível configurar esse botão da forma que quisermos, inclusive adicionando blocos de programação.

Figura 2.1 - Adicionando o botão

Inserindo o componente Fragmento na view

Com o arquivo Fragmento criado, é hora de adicionar o componente Fragmento, confira na figura 3.

Figura 3 - Adicionando o componente Fragmento

Após inserir o componente na view, é hora de selecionar o arquivo Fragmento criado anteriormente. Clique nos '...' da propriedade Fragmento (destaque 1 da figura 3.1), em seguida selecione o Fragmento que deseja utilizar (destaque 2 da figura 3.1)

Figura 3.1 - Adicionando o arquivo Fragmento ao componente Fragmento

Na figura 3.2 é possível ver o que o Fragmento criado foi adicionado à página em edição.

Figura 3.2 - Fragmento adicionado ao projeto

Passagem de parâmetros

Outra forma de criar o card do exemplo anterior é utilizando a propriedade Parâmetros do componente Fragmento. Essa propriedade permite passar parâmetros via query string da página que possui o componente fragmento para os campos dentro do arquivo fragmento. Esse fluxo é de mão única, logo, não é possível passar parâmetros do fragmento para a página que contém o fragmento.

Para este exemplo, vamos utilizar um Componente visual fonte de dados da página que contém o componente visual fragmento e passar os dados de cada registro (URL da imagem, preço e título do livro) via parâmetro, no arquivo fragmento vamos alimentar um componente Imagem e dois Texto Simples com esses dados.

Acesse o menu de contexto do arquivo fragmento e selecione a opção Propriedades da página (destaque 1 da figura 4) e, em seguida, clique no ícone "..." na propriedade Parâmetros da tela (destaque 2 da figura 4). Acesse o tópico "Propriedades e Eventos da página" da documentação Editor de views, para mais detalhes sobre essa propriedade.

Figura 4 - Propriedades da página

Feito isso, uma janela será exibida para inserir os parâmetros query string que serão recebidos pelo fragmento.

Figura 4.1 - Janela Parâmetros de tela

1. Nova propriedade: nome do novo parâmetro query string do fragmento.
2. Adicionar: insere o parâmetro na lista de propriedades.
3. Propriedade: coluna que informa os parâmetros já adicionados.
4. Valor: define o tipo do parâmetro, podendo ser: texto, numérico, data e hora, hora, lógico e expressão. O campo ao lado irá se adaptar com base no tipo selecionado.
5. Excluir: exclui uma propriedade da lista.

Para esse exemplo, incluímos os parâmetros "titulo", preco" e "urlimagem". Não alteramos as colunas Valor (4), caso seja informado aqui, o valor do parâmetro será estático. Ao final da configuração, clique em OK.

Agora precisamos configurar os componentes visuais que serão alimentados pelos parâmetros que configuramos acima. Selecione o componente visual e clique na opção Editar expressão (destaque 1 da figura 4.2) da propriedade Conteúdo para os componentes Texto Simples e Origem para o componente Imagem, selecione a aba Campo da tela e escolha um dos parâmetro (figura 4.2).

Salve o arquivo fragmento.

Figura 4.2 - Seleção de parâmetros

Na página que irá renderizar o Fragmento, arraste e configure o Componente visual fonte de dados, nesse exemplo selecionamos uma classe de Livros, e depois insira o componente visual Fragmento, da mesma forma como fizemos na figura 3.1.

Acesse a propriedade Parâmetros (destaque 1 da figura 4.3) do componente Fragmento e associe os campos da fonte de dados (coluna Valor) com os parâmetros do Fragmento (coluna Propriedade), como mostra a figura 4.3.

Acesse também a propriedade Repetir do componente Fragmento e selecione a Fonte de dados utilizada, dessa forma, o Fragmento será repetido para cada registro de livro contido na fonte de dados.

Figura 4.3 - Associação dos campos da fonte de dados com o fragmento

Após as configurações realizadas nos passos anteriores, podemos conferir o resultado na figura abaixo.

Figura 4.4 - Resultado da exibição do fragmento associado à fonte de dados

Drag and Drop da árvore de recursos

Outra forma de gerar o componente Fragmento é a partir do recurso de Drag and Drop (arrastar e soltar). Selecione um arquivo do tipo Fragmento da árvore de recursos e arraste-o para a área de edição. Para entender um pouco mais sobre o recurso, acesse o tópico "Drag and Drop da árvore de recursos" da documentação Editor de views.

Figura 5 - Arrastando um arquivo Fragmento da árvore de recursos para o Editor de views

Confira o resultado na figura 5.1 da adição do componente na view via Drag and Drop.

Figura 5.1 - Componente Fragmento gerado através do Drag and Drop