Consulenza-Web.com

In questo articolo presento un helper che aiuta nell'utilizzo di jQuery come supporto alla programmazione client-side (javascript) in un'applicazione CakePHP.

CakePHP è un framework che implementa il paradigma MVC per lo sviluppo di applicazioni web in PHP.

1. Scarica il file:

cakephp_jquery_helper.zip (2k)

2. Installa l'helper:

Copia il file "jquery.php" che trovi nell'archivio zip nella cartella "/app/views/helper/".

Crea il file "/app/app_controller.php" per estendere la classe Controller ed utilizzare il nuovo helper:

class AppController extends Controller {
    var $helpers = array('html', 'Jquery');
}

In questo modo gli helpers definiti in questo files verranno automaticamente caricati per ogni controller dell'applicazione. E' tuttavia possibile definire l'utilizzo degli helpers a livello di singolo controller.

3. Utilizza jQuery!

Come accennato inizialmente questo helper permette di utilizzare in modo estremamente semplice jQuery ad i suoi plugins per includere funzionalità client avanzate quali AJAX ed effetti grafici da capogiro.

Innanzitutto scarica l'ultima versione di jQuery e salvala in:
/app/webroot/js/jQuery/jquery.js

Per includere la libreria in un layout (suppongo che il tag HEAD risieda in un layout e non in una vista) si usa la funzione "core()":

<?php echo $jquery->core() ?>
... oppure con Smarty ...
{$jquery->core()}

Successivamente è possibile importare nella pagina i propri script tramite la funzione "run()". Gli script dovranno essere salvati nella cartella "webroot/js" e avere prefisso "jq_":

<?php echo $jquery->run('prova')?>  // Carica "jq_prova.js"
... oppure con Smarty ...
{$jquery->run('prova')}

E' possibile caricare più script in un'unica istruzione separando i nomi degli script con una virgola.

<?php echo $jquery->run('prova,liste')?>
... oppure con Smarty ...
{$jquery->run('prova,liste')} 

E' inoltre possibile organizzare i propri script in cartelle e sottocartelle:

<?php echo $jquery->run('comm/chat,media/images')?>
... oppure con Smarty ...
{$jquery->run('comm/chat,media/images')}

L'helper mette a disposizione delle funzioni che permettono di caricare dei files js dipendenti dal controller o dall'azione che si sta richiedendo:

controller()
carica il file "webroot/js/jq_controller_controllername.js". Se la pagina attualmente visualizzata è "http://localhost/cake/posts/read/22" verrà caricato il file js "webroot/js/jq_controller_posts.js".

controllerAction()
carica il file "webroot/js/jq_controller_controllername_action.js". Se la pagina attualmente visualizzata è "http://localhost/cake/posts/read/22" verrà caricato il file js "webroot/js/jq_controller_posts_read.js".

action()
carica il file "webroot/js/jq_action_actionname.js". Se la pagina attualmente visualizzata è "http://localhost/cake/posts/read/22" verrà caricato il file js "webroot/js/jq_action_add.js".

Tutti e tre i metodi non richiedono parametri. Il codice per l'inserimento delle librerie viene prodotto solamente se le librerie esistono.

Utilizziamo i Plugins

Una delle caratteristiche migliori di jQuery è la possibilità di estendere la libreria base attraverso la scrittura di plugins. Solitamente un plugin consiste in un file javascript contenente il codice del plugin stesso.

E' però abbastanza comune trovare un plugin che utilizza un file css predefinito. jQuery helper fornisce un metodo per caricare un plugin in un'unica operazione generando il codice per importare la libreria Js ed i files css anche per diversi tipi di media.

Il metodo per caricare un plugin è "plugin($name, $media)":

<?php echo $jquery->plugin('iwin', 'screen,print')?>
... oppure con Smarty ...
{$jquery->plugin('iwin', 'screen,print')}

Verranno caricati i seguenti files:
/webroot/js/jQuery/pl_iwin/iwin.jquery.js
/webroot/js/jQuery/pl_iwin/screen.css
/webroot/js/jQuery/pl_iwin/print.css

Come si può vedere dal codice qui sopra sono state adottate delle regole di naming che consentono di organizzare i plugin in modo ordinato.

E' anche possibile caricare più plugins con un'unica istruzione:

<?php echo $jquery->plugins('interface,iwin') ?>

In questo codice verrà caricato il css screen in quanto è il media predefinito.

NOTA: Sia per i files javascript che per i css viene sempre controllata l'esistenza. Non viene prodotto il codice di inclusione di files inesistenti in modo da non appesantire inutilmente la pagina prodotta.

Novità della nuova release:

All'interno del codice dell'helper è stata introdotta la variabile di configurazione "wellCode". Tale impostazione, se settata a 1 (o true), forza l'helper nella creazione di codice ordinato, con le corrette interruzioni di riga e con alcuni commenti che ne facilitano la lettura durante il debugging dell'applicazione che si sta realizzando.

A livello di produzione tale variabile deve essere impostata a "0" (o false) per produrre un codice più compatto a sacrificio della leggibilità: velocità di caricamente e costi dell'hosting ne avranno un sicuro vantaggio!

La seconda novità consiste in un blocco SCRIPT che definisce delle variabili globali per l'applicazione JavaScript:

• __appPath__:  Uri della pagina attualmente caricata.
• __appBase__: BasePath dell'applicazione. (Ad esempio se ci si trova all'interno di una cartella).
• __appController__: nome del controller in uso.
• __appAction__: nome dell'azione in uso.
• __appPlugin__: nome del plugin in uso (CakePHP plugin)
• __appLang__: flag della lingua in uso.

L'ultima novità consiste nella creazione del metodo "Ext()" che rappresenta l'inizio del supporto per la libreria Ext. Questa funzionalità è ancora in fase di sviluppo e sarà oggetto delle prossime release.