SPA – Single Page Apps – Parte II

Olá pessoal, tudo bem com vocês?

No último post falei sobre o conceito de Single Page Applications (SPA) e comentei que iria explicar o que o código JavaScript estava fazendo. Bem, então vamos começar.

O código completo está aqui:

1 – Nessa parte do código informamos que quando a parte visual do nosso documento for completamente carregada, queremos executar o código que está na função iniciarAplicacao(). Caso você não vincule a chamada dessa função no evento window.onload, as próximas linhas de comando apresentarão um erro. Isso ocorreria porque os elemento visuais que iríamos tentar manipular ainda não existiriam. Por curiosidade, faça a chamada dessa função fora do bloco window.onload.

2 – Esse é o conteúdo que será executado quando a window for completamente carregada. Nas primeiras linhas criamos os elementos que queremos renderizar e armazenamos suas referências em variáveis, para posterior manipulação. Note aqui, que usando uma programação imperativa estamos adicionando elementos visuais ao nosso documento HTML.
Nas outras linhas simplesmente definimos algumas propriedades para esses elemento HTML de forma imperativa.

3 – Nessa parte do código definimos o que ocorrerá quando o botão confirmar for clicado. Iremos armazenar os valorwa que estão nos campos Inputs e passaremos, através de parâmetros, para a função AdicionarPessoaNaTabela().

4 – Nessa parte do nosso código criamos uma nova linha na tabela existente, para visualizar o Nome e a Data de Nascimento que colocamos nos Inputs. Além de definirmos um botão para excluir a respectiva linha.

Danilo, beleza, entendi. Mas, o que isso vai adicionar na minha vida? Meu caro, para ser bem sincero, quase nada hahahahaha. Mas é interessante você ter uma ideia de como uma SPA funciona por “debaixo dos panos”. Como falei para vocês, uma APP desenvolvida com ExtJS é uma SPA, ou seja, irá funcionar da mesma maneira (manipulação do DOM através de JavaScript).
O ExtJS tem várias funcionalidades que nos ajudam a desenvolver uma SPA com velocidade e qualidade incríveis.

Por exemplo, para criarmos uma tabela com o Nome e Data de Nascimento de uma pessoa, juntamente com um botão para fazer a exclusão da mesma, usaríamos a classe Ext.grid.Panel e suas funcionalidades.

Galera o post de hoje termina aqui.

No próximo, iremos, finalmente (enrolei de mais nesses posts), fazer o famigerado HelloWorld com ExtJS.

Nos vemos lá. Aquele abraço!

Últimos posts por Danilo Terra (exibir todos)

You may also like...