[ext-4.0] Premiers pas avec SenchaSDKTools-1.1
Bonjour
tout premier essais avec SenchaSDKTools-1.1
tout d'abord beaucoup de bug dans les versions précédentes.
pour cette version quelques petits pb mais rien de catastrophique.
tout d'abord un bug dans le fichier
...SenchaSDKTools-1.1\jsbuilder\src\Project.js
sous windows pas de pb sur les autre plateforme
dans la méthode compressTarget commentez la ligne
Fs.remove(source);
en effet la comment de compression est lancée en asynchrone et le fichier est supprimé avant le compression
il restera un fichier temporaire mais c'est pas très grave.
toujours pour windows la méthode
getCompressor : ajoutez des " autour du path ycompressor.jar (pb avec les espaces.
voilà pour les prérequis.
créez votre application comme vous en avez l'habitude sur votre serveur local.
ajoutez les classes de votre choix
pensez au requires dans les classe pour les classe requise
pensez à bien référencer tous les js à charger (comme d’habitude) si tout est bien référencé en statique ou en require (les vues controleurs etc suffisent pour les classes MVC)
votre application doit être pleinement fonctionnelle avec le chargement statique ou dynamique.
ouvrez un terminal est depuis le dossier de votre application tapez
Code:
sencha create jsb -a index.html -p app.jsb3
index.html est le fichier de démarrage de votre application le nom du fichier jsb3 est à votre convenance.
le fichier jsb3 vas être créé.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| {
"projectName": "Project Name",
"licenseText": "Copyright(c) 2011 Company Name",
"builds": [
{
"name": "All Classes",
"target": "all-classes.js",
"options": {
"debug": true
},
"files": [
{
"path": "extjs/src/util/",
"name": "Observable.js"
},
... |
changez le nom du projet et la licence si besoin
notes l'attribut files qui référence tous les composants classes etc que vous utilisez dans votre application.
le build va produire un fichier all-classes.js qui contient tout le nécessaire.
c'est ici que sous windows ça se complique un peu. le buil ne sais pas gérer plusieurs disque. si vous avez les outils sur C: et le source sur D: vous allez avoir de soucis.
pourquoi ? je ne sais pas toujours est-il que nombre de vos fichier js situés dans un sous dossier de l'application sont réfférencés ../../../app ....
supprimer tous les ../../
Code:
1
2
3
4
5
6
7
8
| {
"path": "../../../../app/store/",
"name": "Users.js"
},
{
"path": "../../../../app/model/",
"name": "User.js"
}, |
=>
Code:
1
2
3
4
5
6
7
8
| {
"path": "app/store/",
"name": "Users.js"
},
{
"path": "app/model/",
"name": "User.js"
}, |
une fois le fichier prêt tappez
Code:
sencha build -p app.jsb3 -d mydir
ou mydir et le dossier de livraison de votre application.
dans celui-ci remplacez dans index.html les références à ext-debug.js par ext.js et tous vos script par app-all.js
vous pouvez utiliser l'application buildée.
ext.js ne contient que le strict nécessaire et app-all.js contient tout votre code plus les classe et compoant ext que vous utilisez sous forme compressé.
si vous en voulez un forme non compressé le fichier temporaire (dû au bug) qui est resté sur le disque contient tout votre source.
sous chrome le temps de chargement de l'exemple extjs en dev chargement dynamique ets d'environ 3,14s après le buils ext pèse 168 ko et l'application avec les composant Ext 476ko avec un temps de chargement de 532 ms
pour tous ceux qui se pose la question de savoir si Ext-all n'est pas trop lourd si on utilise que quelque composants cet outil apporte une réponse en permettant de ne charger que les élément nécessaires.
A+JYT
Complément d'information si possible
Bonjour,
quand vous dites
Citation:
Envoyé par
sekaijin
pensez au requires dans les classe pour les classe requise
pensez à bien référencer tous les js à charger (comme d’habitude) si tout est bien référencé en statique ou en require (les vues controleurs etc suffisent pour les classes MVC)
que cela veut exactement dire?
car à ce jours, je charge les scripts nécessaires dans ma page et construit mes objets Extjs avec la syntaxe
Code:
viewport = Ext.create('Ext.container.Viewport', {...
Hors, si j'essaye avec ou sans un require:
Code:
Ext.require('Ext.container.Viewport');
dans le fichier *.jsb3, je n'ai jamais rien :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| {
"projectName": "Project Name",
"licenseText": "Copyright(c) 2011 Company Name",
"builds": [
{
"name": "All Classes",
"target": "all-classes.js",
"options": {
"debug": true
},
"files": []
},
{
"name": "Application - Production",
"target": "app-all.js",
"compress": true,
"files": [
{
"path": "",
"name": "all-classes.js"
},
{
"path": "",
"name": "app.js"
}
]
}
],
"resources": []
} |
Pouvez-vous donner un exemple simple de code extjs et le rendu du fichier jsb3
Merci beaucoup
