1. Recommandations
1.1 Navigateur Web
Extjs 4.0 supporte la plupart des navigateurs web connus, de IE 6 à la dernière version de Google Chrome. Nous recommandons cependant durant la période de développement d'application d'utiliser l'un des navigateurs suivant, pour leur outils de debbugging intégré:
- Google Chrome 10+
- Apple Safari 5+
- Mozilla Firefox 4+, avec le plugin Firebug
Ce tutoriel suppose que vous employez la dernière version de Google Chrome. Si vous n'avez pas choisi Chrome, alors prenez un moment pour l'installer et familiarisez vous avec les outils de developpement de Chrome.
1.2 Le serveur Web
Même si il n'est pas obligatoire d'avoir un serveur Web pour faire fonctionner Extjs 4.0, il est hautement recommandé de développez avec un serveur, surtout depuis les restriction des navigateurs du protocole XHR en local. Si vous en avez pas, il est recommandez de télécharger un serveur HTTP Apache et de l'installer
Une fois que vous avez installé ou activé Apache, vous pouvez vérifier qu'il fonctionne avec l'adresse "localhost" dans votre navigateur. Vous devriez voir une page de démarrage indiquant que Apache HTTP Server a été installé avec succès et est en marche.
1.3. Ext JS 4 SDK
Téléchargez la Software Devloppment Kit ExtJs 4.0.Dézippez le fichier dans un nouveau répoertoire 'extjs' à l'intérieure du répertoire root du serveur. Si vous n'etes pas sur de la position de ce répertoire, veuillez consulter la documentation de votre serveur web.
Lorsque vous avez finit d'installer le serveur Apache, naviguez sur "http://localhost/extjs/index.html" de votre navigateur. Si la page de bienvenu de Extjs Js 4.0 apparait, alors vous avez réussit à tout configurer
2. Structure d'une application
2.1 Structure de base
Bien que cela ne soit pas obligatoire, il est préférable de prendre en compte toutes les suggestions listées ci dessous et de les considérées comme des conduites de bonnes pratiques pour la gestion, la maintenance, l'extensibilité et l'organisation de votre application. Il vous est recommandé de reprendre l'organisation structurelle de ExtJs des répertoires dans l'encadré suivant:
- appname
- app
- namespace
- Class1.js
- Class2.js
- ...
- extjs
- resources
- css
- images
- ...
- app.js
- index.html
- appname est un répertoire qui contient tous les fichiers sources de votre application
- app contient toutes vos classes, le style de nommage des classes devrait suivre les conventions listées dans le guide des classes system
- extjs contient les fichiers SDK de Ext JS 4
- resources contient autant les CSS et images additionnels, responsables de l'apparence de l'application, que les autres ressources statiques(XML, JSON, etc...)
- index.html est le point d'entrée du document HTML
- app.js contient toute la logique de votre application
Ne vous focalisez pas sur la création de tous ces répertoires pour le moment, mais focalisons nous sur la production d'un minimum de code pour faire fonctionner une application ExtJs puis de l'executer. Pour cela, nous allons créer une simple application "Hello World" que l'on nommera "Hello Ext". Tout dabors, créons le repertoire suivant et les fichiers dans le repertoire root:
- helloext
- app.js
- index.html
Alors dézipper la SDK de ExtJs 4.0 dans le repertoire nommé extjs dans le repertoire helloext
Typiquement, une application ExtJs est contenu dans un unique document HTML, index.html. Ouvrez le fichier index.html et insérez le code html suivant:
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></ script>
</head>
<body></body>
</html>
- extjs/resources/css/ext-all.css contient toutes les feuilles de style pour faire fonctionner le framework
- extjs/ext-debug.js contient le coeur du framework Extjs avec les libraires et les classes
- app.js contiendra le code de votre application
Maintenant, vous etes prêt à écrire votre application. Ouvrez le fichier app.js et insérer le code javascript suivant:
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'}
]
});
}});
Maintenant, ouvrez votre navigateur, et allez à "http://localhost/helloext/index.html". Vous devriez voir un Panel avec une barre de titre contenant le text "Hello Ext" et un message "Welcome" dans le corps du panel.
2.2 Chargement dynamique
Ouvrez l'outil de dev de Chrome et clickez sur la consile. Maintenant rafraichissez l'application Hello Ext. Vous devriez voir une alerte dans la console qui ressemble à cela:
Ext Js 4.0 est livré avec un système de chargement dynamique(que l'on nommera "Loader") permettant de récupérer les ressources javascript uniquement nécessaire pour le lancement de l'application. Dans notre exemple, Ext.create va créer une instance de Ext.container.Viewport. Lorsque Ext.create est appelé, le Loader va tout d'abord checker pour voir si Ext.container.Viewport a été défini. Si il n'est pas défini, alors le Loader va essayer de charger le fichier javascript qui contient le code de la classe Ext.container.Viewport avant d'instancier cet ledit objet. Dans notre exemple, le fichier Viewport.js va être charger avec succès mais le Loader détectera que les fichiers ont été chargées de manière moins optimale. Depuis que l'on a chargé uniquement le fichier viewport.js lorsque une instance de Ext.container.Viewport fut nécessaire, l'éxecution du code a été stoppé jusqu'à que le fichier a été chargé avec succès, provoquant un court retard. Ce retard serait aggravé si nous avions effectué plusieurs appels de Ext.create, parce que l'application attendrait pour chaque fichier à charger, avant de faire la demande de la prochaine requête.
Pour corriger cela, nous pouvons ajouter cette ligne de code avant l'appel de Ext.application
Ext.require('Ext.container.Viewport');
Cela permettra d'assurer que le fichier contenant le code Ext.container.Viewport est chargé avant que l'application ne s'execute. Voius ne devriez plus voir l'avertissement de Ext.Loader Lorsque vous rafraichisserez à nouveau la page.
2.3 Méthodes d'inclusion de la Librairie Extjs
Lorsque vous dezippez ExtJs 4.0, vous verrez les fichiers suivants:
- 1.ext-debug.js - Ce fichier est à utiliser uniquement lors de la phase de développement. Il fournit le minimum des classes Ext Js core pour lui permettre de faire fonctionner normalement le Framework. Toute classe suplémentaire devra être chargé dynamiquement par des fichiers séparé comme il est montré ci dessous.
- 2.ext.js - est identique à ext-debug.js mais minifié pour un usage de production. Cel signifie qu'il faudra l'utiliser en combinaison avec votre fichier d'application app-all.js. (voir section 3)
- 3.ext-all-debug.js - Ce fichier contient toute la librairie ExtJS . Cela peut vous aider à améliorer votre apprentissage, cependant, ext-debug est préféré dans la plupart des cas pour un actuel developpement d'application.
- 4.ext-all.js - C'est une version minifié du fichier ext-all-debug.js qui peut être employé dans un environnement de production. Cependant, il n'est pas recommandé car la plupart des applications n'utilise pas toute les classes qu'elle contient. Il est recommandé que you créez votre propre builder pour votre environnement de production qui sera décrite en section 3.
3. Déploiement
La SDK Sencha nouvellement introduite, rend le déploiement de toute application ExtJs 4.0 plus facile que jamais. Les outils vous permettront de générer un manifeste de toutes les dépendance javascript sous la forme d'un fichier JSB3 (format de ficheir JSBuilder), et créer un builder customizable contenant uniquement le code que votre application a besoin.
Une fois votre SDK installé, ouvrez un explorer et allez à votre répertoire de votre répertoire directement.
cd path/to/web/root/helloext
A partir de là, vous avez simplement besoin de lancer un ensemble de 2 commandes. Le premier génère un fichier JSB3:
sencha create jsb -a index.html -p app.jsb3
Pour les applications construites par des langages dynamiques telles que PHP, Ruby, ASP,..., Vous pouvez cimplement remplacer index.html par l'actuel URL de votre application:
sencha create jsb -a http://localhost/helloext/index.html -p app.jsb3
Cela scanne votre fichier index.html pour tous les framework et fichiers de votre application qui sont actuellement utilisé par votre application, et créée un fichier JSB appelé app.jsb3. Générant le fichier JSB3 pour la première fois, cela nous donne une chance de modifier le fichier app.jsb3 généré avant de le reconstruire. Cela peut vous aidé si vous avez des ressources personnalisée à copier,mais la plupart du temps, nous pouvons procéder à la construction de l'application par la seconde commande:
sencha build -p app.jsb3 -d .
Cela créée 2 fichiers basés sur le fichier jsb3:
1.all-classes.js - Ce fichier contient toutes les classes de votre application. Il n'est pas minifié, ainsi il est souvent utilisé pour débugger votre application construite. Dans ntore exemple, ce fichier est vide parce que notre application "Hello Ext" ne contient aucune classe.
2.app-all.js - Ce fichier est un fichier minifié de votre application avec toutes les classes requises pour le lancer. C'est une version de production du fichier all-classes.js avec app.js.
Une application Ext JS devra avoir une version index.html séparé pour une version de production de votre application. Vous aurez généralement besoin de l'utiliser pour contruire un process ou tester la logique côté serveur, mais pour l'instant, crééez uniquement un nouveau fichier dans le répertoire helloext et appeller index-prod.html:
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext.js"></script>
<script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>
Noté que ext-debug.jsa été remplacé par ext.js, et app.js a été remplacé par app-all.js. Si vous allez sur http://localhost/helloext/index-prod.html de votre navigateur, vous pourrez voir la version de production de votre application "Hello Ext".
