pour la version 4.0, Extjs a bénéficié d'un grand travail de refactoring de toutes ses bibliothèques et d'être conforme aux nouvelles normes web, à savoir HTML 5 et CSS 3, et se base sur un nouveau système de classe. Cette nouvelle architecture est derrière presque toutes les classes écrite pour Extjs 4.X, et par conséquent, il est important de bien comporendre tout ce système avant de commencer à coder.
Ce tutoriel permet aux developpeurs de créer ou d'étendre les classes existantes de Extjs 4.x. Il est divisé en 4 sections:
- Section I: "Aperçu" explique les besoins pour un système de classe robuste
- Section II: "Convention de nommage" traite les bonnes pratiques de nommage des classes methods propriétés, variables et fichiers.
- Section III: "Maitrise" Fournit des exemples détaillés de code étape par étape
- Section IV: "Gestion des erreurs et deboggage" donne des conseil utiles sur comment les supprimer avec les exceptions
I. Apperçu
Extjs 4.0 est composé de plus de 300 classes et il est utilisé par une communauté de plus de 200 000 developpeurs à travers le monde avec chacun sa manière de coder. Le gros challenge est de fournir un socle commun d'une architecture du framework:
- simple à appréhender et à le maitriser
- rapide à développer, facile à debogguer, et rapide à déployer
- bien organiser, extensible et maintenable
Javascript est un langage "orienté protopype", et non orienté objet comme c'est le cas pour PHP. Par sa nature, l'une de ses plus puissantes fonctionnalités est la FLEXIBILITE. Il peut en effet effectuer le même travail, mais de différentes manières, sur différents style de codage et de techniques. Sans une structure unifiée, un code javascript devient rapidement difficile à comprendre, maintenable et réutilisable.
La programmation basées sur les classes restent aujourd'hui le modèle le plus populaire auprès des développeurs. Les langages orientés objets exigent habituellement un très fort typage, doit fournir une encapsulation, et emploie des conventions standard de codage. La plupart des développeurs adhèrent à la plupart de ces principes, écrivent un code le plus prévisible possible, et le rends extensible et scalable le plus possible au fil du temps. Cependant, Ils(les langages Orienté Objets) ne possède pas les capacités dynamiques d'execution comme c'est le cas du Javascript.
Chaque approche à ses avantages et ses inconvénients, mais nous pouvons en tirer du meilleurs de ses 2 approche tout en masquant les inconvénients ? La réponse est oui et nous allons implémenter la solution sur Extjs 4.
II. Conventions de nommage
En utilisant les conventions de nommage au travers de votre code pour les classes, namespaces, et fichiers, vous aideront à garder votre code organisé, structuré, et lisible.
1) Les classes
Les nom des classes peuvent contenir uniquement des caractères alphanumériques. Les nombres sont autorisés mais déconseillés dans la plupart des cas, à moins qu'ils appartiennent à des termes techniques.ne pas utiliser les caractères underscore, tirets ou tout autre caractères non alphanumérique, par exemple:
- MyCompany.useful_util.Debug_Toolbar est déconseillé
- MyCompany.util.Base64 est acceptable
Les noms des classes doivent être regroupé dans des paquets proprement nommés en utilisant la notation "objet" du javascript, le point '.'. Au minimum, il devrait y avoir un unique espace de nom suivi par le nom de la classe. Par exemple:
MyCompany.data.CoolProxy
MyCompany.Application
Les nom des espace de haut niveau ainsi que les noms des classes doivent employer la notation Camel. Par exemple:
MyCompany.form.action.AutoLoad
Attention : Les classes qui ne sont pas distribué par Sencha, ne doivent jamais utiliser le nom d'espace de haut niveau "Ext".
Les acronymes doivent ainsi être suivi de la convention Camellisté comme ci dessous. Par exemple:
- Ext.data.JsonProxy instead of Ext.data.JSONProxy
- MyCompany.util.HtmlParser instead of MyCompary.parser.HTMLParser
- MyCompany.server.Http instead of MyCompany.server.HTTP
2) Les fichier sources
Le nom des classes correspondent directement aux chemins du fichier dans lequel il y est enregistré. la conséquence est qu'il doit y avoir une seule classe par fichier. Par exemple:
- Ext.util.Observable est placé dans chemin/de/la/source/Ext/util/Observable.js
- Ext.form.action.Submit est enregistré dans chemin/de/la/source/Ext/form/action/Submit.js
- MyCompany.chart.axis.Numeric est enregistré dans chemin/de/la/source/de/ma/societe/chart/axis/Numeric.js
chemin/de/la/source/ est le répertoire contenant les classes de votre application. Toutes les classes doivent rester à l'intérieure de ce répertoire commun et doit être proprement nommé pour la maintenabilité de votre application.
3) Methodes et Variables
De même que pour les noms de classes, les nom des méthodes et variables ne peuvent contenir uniquement des caractères alphanumériques. Les nombres sont aussi permis mais déconsillé dans la plupart des cas. Ne pas utiliser les underscores, les tirets, ainsi que les autres caractères non alphanumériques.
Le nom des méthodes et variables doivent toujours être sous le format Camel.
Par exemple:
Nom des méthodes accepté:
encodeUsingMd5(),
getHtml() contrairement à getHTML()
getJsonResponse() contrairement à getJSONResponse()
parseXmlContent() contrairement à ofparseXMLContent()
nom des variables accepté:
var isGoodName
var base64Encoder
var xmlReader
var httpServer
4) Propriétés
Les nom des propriétés d'une classe suivent exactement les même conventions que ceux des variables et des méthodes mentionné ci dessus, excepté des cas des constantes statiques. En effet, ces derniers doivent être toutes en majuscule, par exemple:
Ext.MessageBox.YES = "Yes"
Ext.MessageBox.NO = "No"
MyCompany.alien.Math.PI = "4.13"
III. La maîtrise
1. Declaration
1.1) A l'ancienne
Si auparavant vous avez utilisé les versions précédents de Extjs, vous êtes certainement familié avec la fonction Ext.extend pour créer une classe:
var MyWindow = Ext.extend(Object, { ... });
Cette approche est facilement facile à suivre pour créer une nouvelle classe qui hérite d'un autre. Autre que l'héritage direct, nous avions pas eu une API suffisament adaptée pour d'autres aspects de la création de classe tels que la configuration, les satiques les mixins. Nous reverrons tout cela en détail ultérieurement.
Laissez moi vous montrer un autre exemple:
My.cool.Window = Ext.extend(Ext.Window, { ... });
Dans cette exemple, nous voulons un espace nom(My.cool) pour notre nouvelle classe, et qui soit une extension de Ext.window.
In this example we want to namespace our new class, and make it extend from Ext.Window. Il y a là deux problématiques que nous devons traiter:
My.cool a besoin d'exister sous forme d'objet avant de lui assigner l'objet Window. Ext.Window a besoin d'exister/ chargé sur la page avant qu'il soit référencé. La première rpoclématique est résolu avec Ext.namespace, dont l'alias est Ext.ns. Cette méthode transverse récursivement à travers l'arbre de propriété/objet et le créée s'il n'existe pas encore. La partie ennuyeuse est que vous devez retenir les ajouts au dessus de Ext.extend tout le temps.
Ext.ns('My.cool');
My.cool.Window = Ext.extend(Ext.Window, { ... });
La deuxième problématique n'est pas facile à aborder parce Ext.Window peut être dépendant de plusieurs autres classes qui lui est directement/indirectement hérité, qui à son tour ses dépendances peuvent dépendre d'autres classes pour exister. Par cette raison, les application écrites sous les versions précédentes à Ext JS 4.0 devait usuellement inclure toute la librairie sous la forme de ext-all.js même si ils avaient besoin d'une toute petite portion du framework.
1.2) La nouvelle manière
Ext JS 4 a éliminé toutes ces inconvénients avec juste une méthode que vous avez besoin de retenir pour créer votre class: Ext.define. Sa syntaxe basique est défini de la manière suivante:
Ext.define(className, members , onClassCreated );
className: nom de la classe
members est un objet qui représente une collection de la classe membre dans ses paires clé/valeurs.
onClassCreated est une fonction optionnelle de rappel pour être invoquer lorsque toutes les dépendances de cette classe sont prêtes, et que la classe lui-même est pleinement créée. Du fait de sa nouvelle nature asynchrone de la classe de création, cette focntion de rappel peut être utilisé de plusieurs manières. Nous en discuteront dans la section IV.
Example:
Ext.define('My.sample.Person', {
name: 'Unknown',
constructor: function(name) {
if (name) {
this.name = name;
}
return this;
},
eat: function(foodType) {
alert(this.name + " is eating: " + foodType);
return this;
}
});
var aaron = Ext.create('My.sample.Person', 'Aaron');
aaron.eat("Salad"); // alert("Aaron is eating: Salad");
Notons que nous avons créé une nouvelle instance de My.sample.Person utilisant la méthode Ext.create(). Nous devrions utiliser le mot clé new (new My.sample.Person()). Cependant, il est recommandé de toujours prendre l'habitude d'utiliser Ext.create deouis qu'il vous permet d'avoir l'avantage d'avoir un chargement dynamique de classe.
2. La configuration
Sur Ext JS 4.0, nous introduisons une propriété de configuration qui est traité par le préprocesseur puissante Ext.Class avant que la classe ne soit créée. Les caractéristiques comprennent:
Les configuration sont complètements encapsulées depuis les autres classes membres.
Les méthodes getter et setter pour toutes les propriété de configuration sont automatiquement générées à l'intérieur de la classe prototype durant la création de la classe si la classe n'a pas ces méthodes déjà définies.
une méthode apply est ainsi générée pour toute propriété de configuration. Cette méthode setter auto générée appelle la méthode apply en interne avant de modifier une valeur d'une variable. Réécrire la méthode apply pour la propriété de configuration si vous avez besoin de personnaliser un process avant de modifier une variable. Si la méthode apply ne renvoie rien, alors la méthode setter ne modifie pas la valeur. pour exemple, voir, applayTitle en dessous.
Ext.define('My.own.Window', {
/** @readonly */
isWindow: true,
config: {
title: 'Title Here',
bottomBar: {
enabled: true,
height: 50,
resizable: false
}
},
constructor: function(config) {
this.initConfig(config);
return this;
},
applyTitle: function(title) {
if (!Ext.isString(title) || title.length === 0) {
alert('Error: Title must be a valid non-empty string');
}
else {
return title;
}
},
applyBottomBar: function(bottomBar) {
if (bottomBar && bottomBar.enabled) {
if (!this.bottomBar) {
return Ext.create('My.own.WindowBottomBar', bottomBar);
}
else {
this.bottomBar.setConfig(bottomBar);
}
}
}
});
Et ici, un exemplede comment il peut être utiliser
var myWindow = Ext.create('My.own.Window', {
title: 'Hello World',
bottomBar: {
height: 60
}
});
alert(myWindow.getTitle()); // alerts "Hello World"
myWindow.setTitle('Something New');
alert(myWindow.getTitle()); // alerts "Something New"
myWindow.setTitle(null); // alerts "Error: Title must be a valid non-empty string"
myWindow.setBottomBar({ height: 100 }); // Bottom bar's height is changed to 100
3. Les membres statiques
Les memebres statiques peuvent être défini en utilisant la configuration statique.
Ext.define('Computer', {
statics: {
instanceCount: 0,
factory: function(brand) {
// 'this' in static methods refer to the class itself
return new this({brand: brand});
}
},
config: {
brand: null
},
constructor: function(config) {
this.initConfig(config);
// the 'self' property of an instance refers to its class
this.self.instanceCount ++;
return this;
}
});
var dellComputer = Computer.factory('Dell');
var appleComputer = Computer.factory('Mac');
alert(appleComputer.getBrand()); // using the auto-generated getter to get the value of a config property. Alerts "Mac"
alert(Computer.instanceCount); // Alerts "2"
IV. Gestion d'erreur et débogage
Dans Ext JS 4, certains éléments pratiques peuvent vous aider à déboguer et gérer les erreurs.
Vous pouvez utiliser Ext.getDisplayName() pour afficher le nom d'une méthode. Cela est particulièrement pratique pour gérer les erreurs qui ont une description dans le nommage de classe et de méthode:
throw new Error('['+ Ext.getDisplayName(arguments.callee) +'] un message ici');
Lorsque une erreur est relevée dans une méthode d'une classe définie en utilisant Ext.define(), vous pourrez voir le nom de la méthode et de la classe dans la pile d'appel si vous utilisez les navigateurs qui utilisent le moteur WebKit (Chrome et Safari). Par exemple, voici ce qu'il pourrait être affiché dans Chrome:
