Como implementar vinculação de dados em Ext.js: um passo a passo prático

Bem-vindo ao nosso guia prático sobre como fazer a vinculação de dados funcionar no Ext.js JavaScript Framework! A vinculação de dados é como uma cola mágica que conecta a aparência do seu site às coisas que mudam nele. Ext.js JavaScript Framework é uma ferramenta interessante que ajuda você a fazer isso facilmente. Neste blog, orientaremos você por todo o processo em etapas simples. Quer você seja um programador profissional ou esteja apenas começando, abordaremos o básico.

Você aprenderá como vincular dados às partes do Ext.js JavaScript Framework para que seu site possa reagir e atualizar sem problemas. Ao final, você terá as habilidades necessárias para tornar seus aplicativos da web mais interativos e dinâmicos. Vamos começar com a vinculação de dados Ext.js!

O que é vinculação de dados?

A vinculação de dados é como um link útil entre a aparência de um site e as coisas que podem mudar nele. Imagine isso como uma conexão mágica que mantém o site e os dados funcionando juntos sem problemas. Assim, quando algo muda nos dados, como um preço ou um nome, o site mostra automaticamente essa mudança sem que você precise fazer nada.

No Ext.js, que é um kit de ferramentas para desenvolvedores web, há um recurso interessante chamado vinculação de dados bidirecional. Isso significa que quando você faz algo no site, como clicar em um botão ou digitar em uma caixa, os dados são atualizados. E quando os dados mudam, o site é atualizado instantaneamente. Isso torna seu site mais interativo e responsivo.

Qual é a importância da vinculação de dados no desenvolvimento Web?

A vinculação de dados é muito importante no desenvolvimento web porque garante que a aparência do seu site corresponda às alterações dos dados, sem que você faça tudo manualmente. Isso torna os aplicativos da web e móveis muito mais dinâmicos e responsivos, economizando tempo e esforço dos desenvolvedores na escrita de códigos complexos.

Vinculação de dados bidirecional em Ext.js.

Todos os tipos de vinculações em Ext JS e Sencha Touch seguem um processo familiar: eles usam setters e atualizadores. Ligação unidirecional significa que quando algo muda no ViewModel, ele atualiza uma configuração usando seu setter. A ligação bidirecional é semelhante, mas usa um atualizador, que é como um manipulador especial. Se um atualizador alterar uma configuração com êxito, ele também alterará o valor vinculado no ViewModel, que atualiza outras ligações.

Para fazer com que uma configuração suporte ligação bidirecional, você pode usar a opção “twoWayBindable”. Geralmente é usado nos bastidores, mas pode ser útil ao criar visualizações ou componentes personalizados. Por exemplo, Ext.field.Text configura seu “valor” para ser vinculável bidirecional assim:

twoWayBindable: {

valor: 1

}

Em um exemplo com campo giratório, quando seu valor muda, ele aciona o atualizador, que o ViewModel intercepta. Isso então atualiza o conteúdo de um contêiner abaixo, tudo porque a configuração “html” está vinculada. Isso funciona perfeitamente porque Ext.field.Spinner está relacionado a Ext.field.Text, que está configurado para funcionar com ligação bidirecional para seu “valor”.

Como instalar e configurar Ext.js em um ambiente de desenvolvimento?

Para obter a versão de teste dos arquivos da biblioteca Ext JS, visite o site do Sencha em https://www.sencha.com. Após o registro, você receberá a versão de teste em seu e-mail como uma pasta compactada chamada “ext-6.0.1-trial”.

Extraia a pasta para encontrar vários arquivos JavaScript e CSS para seu aplicativo. Os principais arquivos JavaScript incluem:

1. ext.js : o arquivo principal que contém todas as funcionalidades do aplicativo.
2. ext-all.js : uma versão reduzida de ext.js sem comentários.
3. ext-all-debug.js : uma versão não minificada de ext-all.js para depuração.
4. ext-all-dev.js : Outra versão não minificada, útil para desenvolvimento com comentários e logs de console.
5. ext-all.js : uma versão menor e pronta para produção.

Você pode adicionar esses arquivos à pasta JS do seu projeto ou especificar um caminho direto no seu sistema. Para CSS, os arquivos baseados em tema estão disponíveis em pastas diferentes, dependendo se você está criando um aplicativo para desktop ou móvel.

Em seu arquivo HTML, crie um link para os arquivos CSS e JavaScript necessários. Alternativamente, você pode usar uma Content Delivery Network (CDN) para evitar o download dos arquivos localmente. Ext JS é compatível com vários navegadores, incluindo IE 6 e superior, Firefox, Chrome, Safari e Opera, tornando-o versátil para desenvolvimento web.

Como criar um aplicativo Ext.js simples?

Aqui estão as etapas simples para criar rapidamente um aplicativo Ext JS:

Etapa 1: instalando pacotes do npm

Ext JS oferece pacotes de teste de 30 dias disponíveis no registro público npm. Você pode adquirir a versão mais recente do Ext JS executando este comando:

$ npm install -g @sencha/ext-gen

Para usuários existentes, Ext JS e seus pacotes associados residem no registro npm privado do Sencha. Para acessá-lo, faça login no registro e instale o npm usando os seguintes comandos:

$ npm login –registry=https://npm.sencha.com/ –scope=@sencha

$ npm install -g @sencha/ext-gen

Esses comandos configuram o npm para recuperar e instalar pacotes do registro do Sencha no escopo ‘@sencha’.

Etapa 2: Gerando o Aplicativo

Nesta etapa, criaremos um aplicativo simples de duas visualizações que inclui uma página inicial e uma grade usando o seguinte comando:

aplicativo ext-gen -a -t moderndesktop -n ModernApp

Etapa 3: explorando o aplicativo

Agora que nosso projeto foi gerado, navegue até esse diretório usando:

cd ./modern-app

Para explorar seu aplicativo, inicie-o com o seguinte comando npm:

npm início

Essas etapas o ajudarão a configurar rapidamente o backup gratuito e de código aberto de seu aplicativo Ext JS.

Sencha: seu parceiro para UI excepcional – entre em contato!

Para que servem os modelos em Ext.js?

Um modelo representa um tipo de dados dentro de um aplicativo. Basicamente, um modelo consiste em um conjunto de campos e seus dados associados. Um modelo compreende quatro elementos principais: Campos, Proxy, Associações e Validações.

Campos

Os campos do modelo são especificados na propriedade 'fields' como uma matriz. Cada campo é descrito como um objeto JavaScript contendo atributos como nome e tipo.

Procurador

Os proxies são empregados por lojas e lidam com tarefas relacionadas ao carregamento e armazenamento de dados do modelo. Existem dois tipos de proxies:

1. Proxies de cliente, que utilizam memória do navegador ou armazenamento local para armazenamento de dados.
2. Os proxies de servidor são responsáveis ​​por enviar dados ao servidor por meio de métodos como Ajax, JSON-P ou REST.

Associações

Os modelos podem estabelecer conexões entre si, mesmo em aplicações de pequena escala com múltiplos modelos. Vários tipos de associações podem ser criados, incluindo relacionamentos um para um, um para muitos e muitos para um.

Validações

Validações são estruturas especializadas usadas para verificar a exatidão dos dados armazenados em campos específicos do modelo. ExtJS fornece um conjunto de validações padrão, com exemplos comuns sendo verificações de comprimentos mínimos ou máximos de campos.

Qual é o papel das visualizações em Ext.js?

As visualizações tratam do aspecto visual e da interface do usuário de um aplicativo. As visualizações são compostas por componentes e layouts. Cada componente pode servir como contêiner para outro componente, permitindo a estruturação da interface da aplicação como uma coleção hierárquica de visualizações.

No ExtJS, vários layouts estão disponíveis:

1. FitLayout: Este layout expande o item interno para caber nos limites do contêiner pai.
2. VBoxLayout: Facilita a disposição vertical dos itens.
3. HBoxLayout: Facilita a disposição horizontal dos itens.
4. BorderLayout: Este layout permite anexar itens em um dos quatro lados de uma janela ou encaixá-los no centro.

Como configurar a vinculação de dados entre o modelo e a visualização?

A classe Ext.app.ViewModel é crucial para fazer conexões de dados. Pense nisso como um organizador de dados. É semelhante ao Ext.data.Model, mas trata os dados de forma estruturada, como uma árvore genealógica, e não apenas uma lista de fatos. Ele também possui um método 'bind()' para observar alterações nesses dados organizados.

Agora, sobre essa árvore genealógica de dados: ela funciona um pouco como a forma como o conhecimento é transmitido em uma família. Uma criança pode aprender com os pais, e os pais com os pais, e assim por diante. No nosso caso, até os componentes “netos” podem aprender com os componentes de nível superior. É tudo uma questão de compartilhar informações de forma eficaz.

Configurar a ligação de dados entre o modelo e a visualização em Ext JS envolve algumas etapas essenciais:

1. Crie um modelo : primeiro, defina um modelo que represente a estrutura de dados com a qual você deseja trabalhar.Este modelo deve incluir campos que correspondam aos dados que você precisa exibir em sua visualização.
2. Crie um ViewModel : O ViewModel atua como um mediador entre seu modelo e sua visualização.Ele gerencia os dados e fornece uma maneira de vinculá-los aos componentes da visualização. Você pode criar um ViewModel em seu controlador ou visualização.
3. Vincular dados aos componentes : use o método 'bind' do ViewModel para conectar os campos do seu modelo aos componentes da sua visualização.Por exemplo, se você tiver um campo de texto que deve exibir o nome de uma pessoa, poderá vinculá-lo ao campo correspondente em seu modelo.

modelo de visualização: {

fórmulas: {

nome completo: function(get) {

var primeiroNome = get('user.primeiroNome');

var últimoNome = get('user.lastName');

return nome + ' ' + sobrenome;

}

}

},

Unid: [{

xtype: 'campo de texto',

fieldLabel: 'Nome',

vincular: '{user.firstName}'

}, {

xtype: 'campo de texto',

fieldLabel: 'Sobrenome',

vincular: '{user.lastName}'

}, {

xtype: 'campo de texto',

fieldLabel: 'Nome completo',

bind: '{fullName}' // Este é um campo calculado

}]

“`

4. Atualizar dados : quando você atualiza os dados em seu modelo (por exemplo, quando um usuário insere um novo valor), o mecanismo de vinculação de dados atualizará automaticamente os componentes da visualização conectada.Da mesma forma, quando um usuário interage com os componentes da visualização (por exemplo, editando um campo), as alterações serão refletidas de volta no modelo.

Conclusão

Ext JS fornece uma maneira inteligente de vincular dados e o que você vê em uma página da web. Ao configurar modelos e conectá-los aos elementos de sua página da web, você pode ter certeza disso quando os dados forem alterados. Além disso, sua página é atualizada automaticamente e, quando os usuários interagem com ela, as alterações são salvas em seus dados.

Isso facilita a criação de aplicativos da web, melhora a experiência dos usuários em seu site e torna mais simples para os desenvolvedores criar aplicativos da web dinâmicos e responsivos. Ext JS simplifica todo o processo de código HTML, tornando o desenvolvimento web mais eficiente e fácil de usar.

Perguntas frequentes

O que é Ext.js e por que usá-lo para vinculação de dados?

Ext JS é uma estrutura JavaScript. Ele simplifica a vinculação de dados, criando aplicativos móveis e da Web responsivos com eficiência.

Quais ferramentas eu preciso para vinculação de dados Ext.js?

Para iniciar a vinculação de dados Ext.js, você precisará da estrutura Ext.js, de um editor de código e de um navegador da web.

O que é Web Design Responsivo?

O web design responsivo adapta os componentes da web a vários tamanhos de tela, garantindo a experiência ideal do usuário em desktops, tablets e celulares.

JQuery é uma estrutura JS?

Não, jQuery não é uma estrutura JavaScript; é uma biblioteca para simplificar a manipulação de DOM e solicitações AJAX.