Intégrer Ext JS et JSF

Version imprimable

10/05/2010, 10h37
Mako 5013

Intégrer Ext JS et JSF

Bonjour,

J'aurais aimé savoir comment faire pour intégrer Ext JS (3.1) avec le framework JSF (1.1). Je dois intégrer Ext JS au sein d'une application déjà existante, travaillant au niveau de la couche présentation principalement avec JSF.

J'ai eu beau chercher sur le Net, difficile de trouver un tutoriel ou bien même des indications sur comment faire...

Merci.

Mako
10/05/2010, 13h05
takitano

Salut,

je ne crois pas que tu puisse intégrés Extjs 3.1 avec JSF ... ah moins de créer une passerelle entre java et javascript ...

sinon, Etxjs propose Ext gwt ,
C'est la version Java de Extjs. Tu peux avoir plus de renseignement sur le lien suivant ... Il me semble qu'ils sont à la version 2.2...
http://www.extjs.com/products/gwt/

Si tu sais codé en java ... mieux vaut utiliser le Gwt de extjs ...

En espérant d'avoir répondu a ta problématique ...

Takitano
10/05/2010, 13h12
Mako 5013

Citation:

je ne crois pas que tu puisse intégrés Ext js 3.1 avec JSF ... ah moins de créer une passerelle entre java et javascript ...

Je ne comprends pas vraiment le soucis...Par exemple, le projet auquel je dois intégrer Ext JS utilise déjà (très partiellement) Prototype et Scriptaculous, et il suffit d'inclure les .js pour que cela fonctionne. Pourquoi ne pourrait-il en être de même avec Ext JS ?

En ce qui concerne Ext GWT, je te remercie de me le signaler, mais je le connaissais déjà. En fait, il fait également parti des frameworks présentation que je dois évaluer...Je travaillerai donc avec lui un peu plus tard...

En tout cas, merci de la réponse.

Mako
10/05/2010, 13h50
takitano

Re,

Je ne sais pas trop ce que tu recherches ...

mais peut etre tu trouveras ton bonheurs la :
http://www.extjs.com/learn/Ext_Getting_Started
http://www.extjs.com/learn/Tutorials
http://www.extjs.com/learn/Screencasts

et pour evaluer Extjs par rapport au autre framework, tu as :
http://www.extjs.com/products/js/
10/05/2010, 14h06
Mako 5013
Re,

Je n'ai pas été très clair effectivement. Je travaille donc sur une application web, utilisant JSF, Spring, Ajax4jsf et Prototype/Scriptaculous. Mon but (pour des raisons trop longues à expliquer, et sans rapport avec le schmilblick) est de pouvoir également travailler avec Ext JS.

J'ai téléchargé ce dernier (v. 3.1), et l'ai mis dans "/WebContent/js/extjs/". Pour le moment, j'aimerais juste voir si cela fonctionne, et donc, dans la première page de mon appli, je souhaite juste rajouter une alert en faisant :
Code:

1 2 3 4 Ext.onReady(function() { alert("coucou"); });
J'ai pour cela rajouté les lignes suivantes :
Code:

1 2 3 <script language="JavaScript" src="/js/extjs/ext-all.js"/> <link rel="stylesheet" src="/js/extjs/ressources/css/ext-all.js"/>
Le problème est qu'il ne m'exécute pas mon code ext js, car " 'Ext' is undefined ". Une idée ?

Mako

essayes ca ...

Code:

1
2
<script type="text/javascript" src="/js/extjs/ext-all.js"/>
<link rel="stylesheet" type="text/css" href="/js/extjs/ressources/css/ext-all.js"/>

Takitano

10/05/2010, 15h49
Mako 5013

Ça ne fonctionne toujours pas...(même erreur).
Mais merci tout de même ;)

Mako

Edit : Y a-t-il une chance que cela vienne de la version de Ext JS ? Actuellement, je suis sur la 3.1.1. Parce que le chemin m'a l'air correct (quand je regarde les sources de ma page HTML, j'ai bien le même chemin pour Ext JS que pour Prototype par exemple, qui lui, fonctionne...).
10/05/2010, 16h48
takitano
essayes un chemin absolu ou
Code:

1 2 <script type="text/javascript" src="/WebContent/js/extjs/ext-all.js"/> <link rel="stylesheet" type="text/css" href="/WebContent/js/extjs/ressources/css/ext-all.js"/>
A priori, c'est un pb de chemin d'access ...
je ne pense pas qu'il y ait des interferences ... toute la lib d'Ext est sous ne namespace Ext ... a moins que Proto utilise le meme namespace ...

Cela ne fonctionne toujours pas...

Par contre, au départ, j'avais essayé de mettre le Ext.onReady() dans un fichier annexe (MyExtJS), qui se trouvait au même endroit que ext-all.js. L'importation de ce fichier fonctionnait bien, mais pas le code ext js à l'intérieur. Pour être plus précis, j'avais :

MyPage.jspx
Code:

1 2 3 4 <script type="text/javascript" src="/js/extjs/ext-all.js"/> <script type="text/javascript" src="/js/extjs/myExtJS.js"/> <link rel="stylesheet" type="text/css" src="/js/extjs/ressources/css/ext-all.js"/>
MyExtJS.js
Code:

1 2 3 4 5 6 alert("coucou 1"); Ext.onReady(function() { alert("coucou ext js"); }); alert("coucou 2");
Et je voyais bien apparaître la première alert ("coucou 1"), pas les deux suivantes. Donc je me dis que le chemin d'accès ne doit pas être si mauvais que ça, et que c'est réellement le fichier ext-all.js (j'ai également essayé avec le ext-all-debug.js) qui doit avoir un soucis.

Mako

10/05/2010, 17h10
takitano
Tu mets ton fichier CSS avec l'extension .CSS au lieu de .JS

Code:

<link rel="stylesheet" type="text/css" src="/js/extjs/ressources/css/ext-all.css"/>

Puis, tu mets tes fichier javascript
Code:

1 2 <script type="text/javascript" src="/js/extjs/ext-all.js"/> <script type="text/javascript" src="/js/extjs/myExtJS.js"/>
10/05/2010, 17h14
Mako 5013

Pour l'extension .css, c'est juste une erreur de copié/collé dans ce thread, ce n'est donc pas la cause du problème.

J'ai inversé l'ordre entre les css et les javascript, mais rien n'y fait...
J'ai également rajouté le fichier ext-all-base.js (sur un autre forum, on m'a conseillé de le rajouter), mais cela n'a fait que me rajouter une erreur de "stack over flow"...

Mako
10/05/2010, 17h34
takitano

Essayes de rajouter avant ext-all.js

Code:

<script type="text/javascript" src="http://localhost/js/extjs/adapter/ext/ext-base.js"></script>

important,
d'apres la doc extjs ... il faut mettre les lib prototype et autre après ceux de Extjs ...

Ça y est, cela fonctionne !
En fait, le problème était double. D'une part, il fallait mettre le fichier ext-base.js, et d'autre part, il fallait mettre les autres librairies après celles de Ext JS. J'avais pris en compte ces deux problèmes, mais pas simultanément apparemment...Le code correct est donc :
Code:

1 2 3 4 5 6 7 8 9 <link rel="stylesheet" type="text/css" src="/js/extjs/ressources/css/ext-all.css"/> //On inclus ici les autres fichiers css <script type="text/javascript" src="/js/extjs/adapter/ext/ext-base.js"/> <script type="text/javascript" src="/js/extjs/ext-all.js"/> <script type="text/javascript" src="/js/extjs/myExtJS.js"/> //On inclus ici les autres librairies (Prototype,etc.)
Merci beaucoup takitano pour le coup de main.

Mako