Programando com o
Velo: repetidores

Nesta aula, vamos aprender sobre repetidores, o que são e como você pode usá-los.

Você deseja mostrar uma lista de itens na página de uma forma agradável, organizada e ordenada.

Um repetidor pode ajudá-lo a fazer isso.

Os repetidores podem ter dados que funcionam de forma dinâmica ou estática.

Ao longo deste curso, vou mostrar como fazer os dois.

U um repetidor é uma lista de itens visualmente dispostos que você pode exibir e que também possuem itens que se repetem.

Vamos supor que eu queira exibir uma lista dos funcionários que estão trabalhando em uma tarefa.

Nesta tela, tenho uma lista de pessoas com o mesmo layout, seus nomes estão na mesma fonte, e mesmo quando eu trago mais alguns elementos para a página, ou para o repetidor, os elementos serão repetidos para todas as outras listas de itens, mantendo o layout igual.

Se eu adicionar esse botão ao primeiro repetidor aqui e anexar esse item, o mesmo vai acontecer com todos os outros itens do repetidor.

Isso nos leva a aprender sobre a estrutura do repetidor.

Como eu disse, o repetidor é uma lista de itens visuais que podemos dispor de forma agradável e organizada dentro da ordem.

Se eu arrastar e soltar aqui, todos os outros itens vão seguir.

Também podemos vir aqui e expandir um pouco o nosso repetidor, acima do espaço dessas caixas também.

Vamos abrir este contêiner.

Ao movê-lo para baixo, você verá que cada item vai acompanhar o layout imediatamente após esse primeiro item.

Agora o repetidor pode armazenar dados dinâmicos e dados estáticos.

Ao longo deste curso, vamos aprender sobre o uso de serviços de terceiros para preencher um repetidor, inclusive os dados estáticos que você armazenou direto do seu código de front-end.

Para aprender sobre esses repetidores ao longo deste curso, será necessário que você tenha experiência com desenvolvimento back-end e front-end.

Recomendo assistir aos dois outros cursos de front-end e back-end.

Vamos apagar esse botão e voltar a ver o repetidor, de novo.

Um repetidor pode ser preenchido de algumas maneiras diferentes.

Você pode fazer isso com programação ou até mesmo trabalhar com o conjunto de dados e o Gerenciador de dados também.

Neste curso, não vamos falar sobre a configuração de dados nem sobre o Gerenciador de dados.

Vamos focar principalmente no código.

Posso simplesmente arrastar e soltar um repetidor na página e também posso identificar esse repetidor.

Se eu for aqui e abrir meu painel de código, após ativar o modo avançado, posso simplesmente selecionar esse repetidor e de fato alterar o nome.

Meu repetidor de planeta é um elemento de página em si, mas contém muitos outros elementos de página que se repetem.

Posso listar meus itens de uma forma agradável e organizada.

Existem alguns manipuladores de eventos que posso adicionar para serem repetidos.

Tenho “item onReady”, “item onRemoved”, “mouseIn”, “mouseOut”.

E ao longo deste curso, vamos mostrar como usar “item onReady” e “item removed”, porque essas serão as principais funcionalidades que você vai usar para exibir dados em seu repetidor.

Na próxima aula, vamos aprender a adicionar dados estáticos ao seu repetidor, como, de certa forma, pode ver aqui em nosso ID neste instante.

E vamos mostrar exatamente como importar todos esses dados diretamente para um repetidor.

Até a próxima aula.