Comment implémenter la liaison de données dans Ext.js : une procédure pas à pas pratique

Bienvenue dans notre guide pratique sur la façon de faire fonctionner la liaison de données dans le framework JavaScript Ext.js ! La liaison de données est comme une colle magique qui relie l'apparence de votre site Web aux éléments qui y changent. Ext.js JavaScript Framework est un outil intéressant qui vous aide à le faire facilement. Dans ce blog, nous vous guiderons tout au long du processus en étapes simples. Que vous soyez un codeur professionnel ou que vous débutiez, nous aborderons les bases.

Vous apprendrez à lier des données à vos parties du framework JavaScript Ext.js afin que votre site Web puisse réagir et se mettre à jour en douceur. À la fin, vous aurez les compétences nécessaires pour rendre vos applications Web plus interactives et dynamiques. Commençons par la liaison de données Ext.js !

Qu'est-ce que la liaison de données ?

La liaison de données est comme un lien utile entre l'apparence d'un site Web et les éléments qui peuvent y changer. Imaginez-le comme une connexion magique qui permet au site Web et aux données de fonctionner ensemble en douceur. Ainsi, lorsque quelque chose change dans les données, comme un prix ou un nom, le site Web affiche automatiquement ce changement sans que vous ayez à faire quoi que ce soit.

Dans Ext.js, qui est une boîte à outils destinée aux développeurs Web, il existe une fonctionnalité intéressante appelée liaison de données bidirectionnelle. Cela signifie que lorsque vous faites quelque chose sur le site Web, comme cliquer sur un bouton ou taper dans une case, les données sont mises à jour. Et lorsque les données changent, le site Web est instantanément mis à jour. Cela rend votre site Web plus interactif et réactif.

Quelle est l’importance de la liaison de données dans le développement Web ?

La liaison de données est extrêmement importante dans le développement Web, car elle garantit que l'apparence de votre site Web correspond aux données changeantes sans que vous ayez à tout faire manuellement. Il rend les applications Web et mobiles beaucoup plus dynamiques et réactives, ce qui permet aux développeurs d'économiser du temps et des efforts dans l'écriture de code complexe.

Liaison de données bidirectionnelle dans Ext.js.

Tous les types de liaisons dans Ext JS et Sencha Touch suivent un processus familier : ils utilisent des setters et des mises à jour. La liaison unidirectionnelle signifie que lorsque quelque chose change dans le ViewModel, il met à jour une configuration à l'aide de son setter. La liaison bidirectionnelle est similaire, mais elle utilise un programme de mise à jour, qui ressemble à un gestionnaire spécial. Si un programme de mise à jour réussit à modifier une configuration, il modifie également la valeur liée dans le ViewModel, qui met à jour les autres liaisons.

Pour qu'une configuration prenne en charge la liaison bidirectionnelle, vous pouvez utiliser l'option « twoWayBindable ». Habituellement, il est utilisé en arrière-plan, mais il peut s'avérer utile lors de la création de vues ou de composants personnalisés. Par exemple, Ext.field.Text configure sa « valeur » pour qu'elle puisse être liée dans les deux sens comme ceci :

twoWayBindable : {

valeur : 1

}

Dans un exemple avec un champ spinner, lorsque sa valeur change, il déclenche le programme de mise à jour, que le ViewModel intercepte. Cela met ensuite à jour le contenu d'un conteneur ci-dessous, tout cela parce que la configuration « html » est liée. Cela fonctionne correctement car Ext.field.Spinner est lié à Ext.field.Text, qui est configuré pour fonctionner avec une liaison bidirectionnelle pour sa « valeur ».

Comment installer et configurer Ext.js dans un environnement de développement ?

Pour obtenir la version d'essai des fichiers de la bibliothèque Ext JS, visitez le site Web de Sencha à l'adresse https://www.sencha.com. Lors de votre inscription, vous recevrez la version d'essai dans votre courrier électronique sous la forme d'un dossier zippé nommé « ext-6.0.1-trial ».

Extrayez le dossier pour trouver divers fichiers JavaScript et CSS pour votre application. Les fichiers JavaScript clés incluent :

1. ext.js : Le fichier core contenant toutes les fonctionnalités de l'application.
2. ext-all.js : Une version minifiée d'ext.js sans commentaires.
3. ext-all-debug.js : Une version non minifiée de ext-all.js pour le débogage.
4. ext-all-dev.js : Une autre version non minifiée, utile pour le développement avec des commentaires et des journaux de console.
5. ext-all.js : Une version plus petite, prête pour la production.

Vous pouvez ajouter ces fichiers au dossier JS de votre projet ou spécifier un chemin direct sur votre système. Pour CSS, les fichiers basés sur des thèmes sont disponibles dans différents dossiers selon que vous créez une application de bureau ou mobile.

Dans votre fichier HTML, créez un lien vers les fichiers CSS et JavaScript nécessaires. Vous pouvez également utiliser un réseau de diffusion de contenu (CDN) pour éviter de télécharger les fichiers localement. Ext JS est compatible avec divers navigateurs, notamment IE 6 et versions ultérieures, Firefox, Chrome, Safari et Opera, ce qui le rend polyvalent pour le développement Web.

Comment créer une application Ext.js simple ?

Voici les étapes simples pour créer rapidement une application Ext JS :

Étape 1 : Installation des packages à partir de npm

Ext JS propose des packages d'essai de 30 jours disponibles sur le registre public npm. Vous pouvez acquérir la dernière version d'Ext JS en exécutant cette commande :

$ npm install -g @sencha/ext-gen

Pour les utilisateurs existants, Ext JS et ses packages associés résident sur le registre npm privé de Sencha. Pour y accéder, connectez-vous au registre et installez npm à l'aide des commandes suivantes :

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

$ npm install -g @sencha/ext-gen

Ces commandes configurent npm pour récupérer et installer les packages à partir du registre de Sencha sous la portée « @sencha ».

Étape 2 : génération de l'application

Dans cette étape, nous allons créer une application simple à deux vues comprenant une page d'accueil et une grille à l'aide de la commande suivante :

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

Étape 3 : Explorer l'application

Maintenant que notre projet est généré, accédez à ce répertoire en utilisant :

cd ./application-moderne

Pour explorer votre application, lancez-la avec la commande npm suivante :

npm démarrer

Ces étapes vous aideront à configurer rapidement une sauvegarde gratuite et open source de votre application Ext JS.

Sencha : Votre partenaire pour une interface utilisateur exceptionnelle – Contactez-nous !

À quoi servent les modèles dans Ext.js ?

Un modèle représente une sorte de données au sein d'une application. À la base, un modèle se compose d’un ensemble de champs et de leurs données associées. Un modèle comprend quatre éléments clés : champs, proxy, associations et validations.

Des champs

Les champs du modèle sont spécifiés dans la propriété « fields » sous forme de tableau. Chaque champ est décrit comme un objet JavaScript contenant des attributs tels que le nom et le type.

Procuration

Les proxys sont employés par les magasins et gèrent les tâches liées au chargement et au stockage des données de modèle. Il existe deux types de proxys :

1. Proxy client, qui utilisent la mémoire du navigateur ou le stockage local pour le stockage des données.
2. Les proxys de serveur sont responsables de l'envoi des données au serveur via des méthodes telles que Ajax, JSON-P ou REST.

Les associations

Les modèles peuvent établir des connexions entre eux, même dans les applications à petite échelle comportant plusieurs modèles. Différents types d'associations peuvent être créés, notamment des relations un-à-un, un-à-plusieurs et plusieurs-à-un.

Validations

Les validations sont des structures spécialisées utilisées pour vérifier l'exactitude des données stockées dans des champs de modèle spécifiques. ExtJS fournit un ensemble de validations standard, les exemples courants étant la vérification des longueurs de champ minimales ou maximales.

Quel est le rôle des vues dans Ext.js ?

Les vues gèrent l'aspect visuel et l'interface utilisateur d'une application. Les vues sont composées de composants et de mises en page. Chaque composant peut servir de conteneur pour un autre composant, permettant de structurer l'interface de l'application comme une collection hiérarchique de vues.

Dans ExtJS, différentes mises en page sont disponibles :

1. FitLayout : cette mise en page étend l'élément interne pour l'adapter aux limites du conteneur parent.
2. VBoxLayout : Il facilite la disposition verticale des éléments.
3. HBoxLayout : Il facilite la disposition horizontale des éléments.
4. BorderLayout : Cette disposition permet d'attacher des éléments à l'un des quatre côtés d'une fenêtre ou de les ancrer au centre.

Comment configurer la liaison de données entre le modèle et la vue ?

La classe Ext.app.ViewModel est cruciale pour établir des connexions de données. Pensez-y comme à un organisateur de données. Il est similaire à Ext.data.Model, mais il gère les données de manière structurée, comme un arbre généalogique, et pas seulement une liste de faits. Il dispose également d'une méthode 'bind()' pour surveiller les changements dans ces données organisées.

Maintenant, à propos de cet arbre généalogique de données : cela fonctionne un peu comme la façon dont les connaissances se transmettent au sein d’une famille. Un enfant peut apprendre de son parent, et le parent de son parent, et ainsi de suite. Dans notre cas, même les composants « petits-enfants » peuvent apprendre des composants de niveau supérieur. Il s’agit avant tout de partager efficacement l’information.

La configuration de la liaison de données entre le modèle et la vue dans Ext JS implique quelques étapes essentielles :

1. Créer un modèle : commencez par définir un modèle qui représente la structure de données avec laquelle vous souhaitez travailler.Ce modèle doit inclure des champs qui correspondent aux données que vous devez afficher dans votre vue.
2. Créer un ViewModel : Le ViewModel agit comme un médiateur entre votre modèle et votre vue.Il gère les données et fournit un moyen de les lier aux composants de votre vue. Vous pouvez créer un ViewModel dans votre contrôleur ou votre vue.
3. Lier les données aux composants : utilisez la méthode « bind » de ViewModel pour connecter les champs de votre modèle aux composants de votre vue.Par exemple, si vous disposez d'un champ de texte qui doit afficher le nom d'une personne, vous pouvez le lier au champ correspondant dans votre modèle.

modèle de vue : {

formules : {

nom complet : fonction (obtenir) {

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

var nom de famille = get('user.lastName');

return firstName + ' ' + lastName;

}

}

},

articles: [{

xtype : 'champ de texte',

fieldLabel : 'Prénom',

liaison : '{user.firstName}'

}, {

xtype : 'champ de texte',

fieldLabel : 'Nom de famille',

liaison : '{user.lastName}'

}, {

xtype : 'champ de texte',

fieldLabel : 'Nom complet',

bind : '{fullName}' // Ceci est un champ calculé

}]

"`

4. Mettre à jour les données : lorsque vous mettez à jour les données de votre modèle (par exemple, lorsqu'un utilisateur saisit une nouvelle valeur), le mécanisme de liaison de données mettra automatiquement à jour les composants de la vue connectés.De même, lorsqu'un utilisateur interagit avec des composants de vue (par exemple, en modifiant un champ), les modifications seront répercutées sur le modèle.

Conclusion

Ext JS offre un moyen intelligent de lier les données et ce que vous voyez sur une page Web. En configurant des modèles et en les connectant aux éléments de votre page Web, vous pouvez vous en assurer lorsque les données changent. De plus, votre page Web est mise à jour automatiquement et lorsque les utilisateurs interagissent avec votre page Web, les modifications sont enregistrées dans vos données.

Cela facilite la création d'applications Web, améliore la façon dont les utilisateurs expérimentent votre site et permet aux développeurs de créer plus facilement des applications Web dynamiques et réactives. Ext JS simplifie l'ensemble du processus de code HTML, rendant le développement Web plus efficace et plus convivial.

FAQ

Qu'est-ce qu'Ext.js et pourquoi l'utiliser pour la liaison de données ?

Ext JS est un framework JavaScript. Il simplifie la liaison des données, créant efficacement des applications Web et mobiles réactives.

De quels outils ai-je besoin pour la liaison de données Ext.js ?

Pour démarrer la liaison de données Ext.js, vous aurez besoin du framework Ext.js, d'un éditeur de code et d'un navigateur Web.

Qu’est-ce que la conception Web réactive ?

La conception Web réactive adapte les composants Web à différentes tailles d'écran, garantissant une expérience utilisateur optimale sur les ordinateurs de bureau, les tablettes et les mobiles.

JQuery est-il un framework JS ?

Non, jQuery n'est pas un framework JavaScript ; c'est une bibliothèque pour simplifier la manipulation DOM et les requêtes AJAX.