Interfaçage CakePHP/ExtJS

Ces deux frameworks sont très bien l'un et l'autre, voyons comment on peut simplement profiter des deux en même temps.
Tous les chemins donnés ci après sont absolus (si "/" au début) ou relatifs au répertoire app du projet CakePHP.
Ce billet sera complété à l'occasion...

Les ingrédients de base

• CakePHP : www.cakephp.org
• ExtJS : www.extjs.com
• Eclipse (et ses plugins PHP&WTP) : www.eclipse.org
• Spket : www.spket.com (voir partie tutos pour le support ExtJS)

Rendre ExtJS visible à CakePHP

ExtJS et CakePHP ayant chacun leur propre structure, il n'est pas aisé de les faire coïncider sans hacker le code de ExtJS. Une solution peut être de mettre ExtJS dans app/webroot/js et de manipuler les redirections, mais ce n'est la meilleure solution. Le mieux est certainement d'installer ExtJS quelque part sur votre serveur, disons dans DocumentRoot/ext par exemple, hors de cake donc, de cette façon ExtJS est réutilisable par d'autre projets et aucune modif d'aucune sorte n'est nécessaire.
Concrètement cela revient à ajouter dans le fichier views/layouts/default.thtml (ou votre vue par défaut) ces lignes :

<!-- Inclusion des elements externes extjs -->
<link rel="stylesheet" type="text/css" href="http://www.mondomaine.com/ext/resources/css/ext-all.css" />
<script language="Javascript" src='/ext/adapter/ext/ext-base.js'></script>
<script language="Javascript" src='/ext/ext-all.js'></script>
<script language="Javascript" src='/ext/build/locale/ext-lang-fr.js'></script>

Faire communiquer ExtJS et CakePHP

Conventions d'utilisation de CakePHP

En plus des conventions internes à CakePHP et en vue d'une application utilisant beaucoup Ajax, on peut définir les conventions suivantes :

• le nom de toute fonction utilisée en "mode" Ajax débutera par "ajax", par exemple ajaxLoad;
• le nom de toute vue utilisée pour rendre le résultat d'une fonction en "mode" Ajax débutera par "ajax", par exemple ajax_result.thtml;
• dans le nom des fichiers, on n'utilisera pas de majuscules mais juste des "_";
• on choisira "thtml" comme extension des fichiers vues.

Conventions d'utilisation de ExtJS

On définit ces conventions :

• tout comme pour les vues, on stockera tous les scripts utilisés par les vues d'un modèle dans un dossier du nom du modèle (au pluriel) dans webroot/js;
• on privilégiera la réutilisation des éléments communs stockés dans un dossier views/shared, comme par exemple une vue ajax_result.thtml qui peut être commune à plusieurs modèles.

De ExtJS vers CakePHP

Dans ce sens, on utilise les conventions de CakePHP dont les données pour un objet $A sont stockées dans $A->data et récupérées directement depuis les formulaires contenant des champs nommés.
Mais ça va être long à détailler comme ça, prenons tout de suite un exemple avec une petite application servant à basculer des ressources logicielles dans un état "maintenance", "secours" ou "opérationnel". On va regarder ici uniquement la partie définition des logiciels utilisés par les ressources.

L'application complète gére d'autres objets en plus des logiciels, mais le principe reste le même, aux associations près.

La liste des sources pour la partie gestion des logiciels est celle-ci :

• controllers/bascul_logiciels_controller.php : le controleur des logiciels
  
• models/bascul_logiciel.php : le modele de comportement d'un logiciel
  
• views/bascul_logiciels/ajax_liste.thtml : le template de retour de la liste des logiciels
  
• views/shared/ajax_result.thtml : le template retour d'un appel Ajax
  
• webroot/js/bascul_logiciels/index.js : UI de gestion des logiciels
  

En fait, l'application est découpée en sous éléments et c'est le modèle bascul qui les met en oeuvre, voici le controller, la vue et le script correspondant (pas de modèle) :

• controllers/bascul_controller.php : controleur des bascules
  
• views/bascul/index.thtml : template de la page principale de l'application
  
• webroot/js/bascul/index.js : UI de gestion de l'application
  

De CakePHP vers ExtJS

Dans ce sens, on peut utiliser un fichier XML contenant les informations à passer rempli du côté CakePHP et lu par un objet XMLReader du côté ExtJS. Comme on peut le voir dans la fonction getStoreLogiciels, on peut utiliser un champ "artificiel" nommé displayfield qui servira à désigner la variable à afficher dans les combobox.

Soumettre un formulaire avec ExtJS

Il y a deux méthodes. Soit on utilise la soumission "standard" dans ExtJS, comme dans la fonction editOneLogiciel, et alors la réponse rendue au format JSON est directement exploitable dans le script (le parsing de la réponse est implicite). Soit on utilise une requête Ajax.Request qu'on gère soi même, et alors il faut décoder explicitement la réponse comme dans la fonction delLogiciel.

Fichier joint

En fichier joint, j'ai mis cette mini-application presque complète, il y a des références à l'application englobante via les fonctions "checkMenu" et "checkProfil" qu'il faut définir pour implémenter des contrôles d'affichage ou d'accès par exemple.
La structure de la base est donnée (pour une base postgres) dans le fichier config/database.sql.

app.tar_.gz