Tag Archives

4 Articles
Installation de ZendX Jquery

Installation de ZendX Jquery

Tant que j’ai un peu de temps, autant vous faire des explications sur l’installation de ZendX_JQuery.

Comme je vous l’ai expliqué dans l’installation de Zend, nous pouvons rajouter des librairies externes dans le dossier Library. Ici, nous allons donc ajouter la librairie ZendX. Nous devons donc trouver le dossier Zend et le dossier ZendX directement dans Libray.

Ensuite, il faut savoir que par défaut, Zend peut trouver les classes qui se trouvent dans le dossier ZendX mais, les aides de vue ne peuvent pas être utilisées directement. Pour se faire, il faut rajouter les lignes suivantes dans le bootstrap, de préférence dans la partie _initView() :
protected function _initView()
{
// Initialize view
$view = new Zend_View();
$view->doctype('XHTML1_STRICT');
$view->headMeta()->appendHttpEquiv('Content-Type',
'text/html; charset=utf-8');
$view->addHelperPath('Zend/Dojo/View/Helper/', 'Zend_Dojo_View_Helper');
$view->addHelperPath('App/View/Helper/', 'App_View_Helper');
$view->addHelperPath('ZendX/JQuery/View/Helper', 'ZendX_JQuery_View_Helper');
Zend_Dojo::enableView($view);
Zend_View_Helper_PaginationControl::setDefaultViewPartial('pagination.phtml');
// Add it to the ViewRenderer
$viewRenderer = Zend_Controller_Action_HelperBroker::getStaticHelper('ViewRenderer');
$viewRenderer->setView($view);
//seulement si on utilise d'autres frameworks ajax
ZendX_JQuery_View_Helper_JQuery::enableNoConflictMode();
// Return it, so that it can be stored by the bootstrap
return $view;
}

Si vous avez mis la ligne ZendX_JQuery_View_Helper_JQuery::enableNoConflictMode(); alors faites attention, dans vos codes JQuery, vous devrez avoir $j et non $.

Mais, ceci ne suffit toujours pas, en effet, il va falloir ajouter les lignes suivantes dans les balises header de votre page afin que Zend intègre directement les fichiers JavaScript et style rattachés à JQuery (de préférence dans le Layout). Voici les lignes à rajouter :
$this->jQuery()->enable();
echo $this->jQuery();

Je rajoute toujours $this->jquery->enable() ; au cas où car dans certaines pages, même si je l’intègre dans un script de vue, sa ne marche pas donc je préfère l’intégrer ici en plus pour en être certain.

Voilà, maintenant ZendX_JQuery est fonctionnel sur votre projet. Les aides de vue sont utilisables et vous avez maintenant accès aux ZendX_JQuery_Forms.

Aides de vue JQuery

Aides de vue JQuery

Cet article m’a été demandé et donc je le fais, peut-être en retard mais je n’ai pas eu le temps de le faire plus tôt. Il a pour but l’utilisation de code JQuery à travers l’aide de vue associé à cet effet. Je vais utiliser un exemple concret avec l’utilisation du module « thickbox » permettant l’affichage d’images d’un format plus grand dans une nouvelle fenêtre.

Tout d’abord, il faut avoir installé l’extention ZendX_JQuery dans votre projet. Un sujet détaillant l’installation va arriver prochainement. Ensuite, il faut savoir utiliser les aides de vue qui nous intéresse, ici il s’agit des aides suivantes :
//permet d'ajouter des feuilles de script dans la pile de JQuery
$this->jQuery()->addJavascriptFile();
//permet d'ajouter une feuille de style dans la pile de JQuery
$this->jQuery()->addStylesheet();

Ensuite, il nous faut télécharger le module JQuery Thickbox à cette adresse : http://jquery.com/demo/thickbox/ Par contre ce module n’est plus maintenu à jour. Mais il convient parfaitement pour créer une galere d’image. Je ne vais pas revenir sur l’utilisation et la mise en page de ce module. Vous trouverez toutes les aides sur le site. Juste que nous, avec nos aides, nous allons intégrer dynamiquement, pour la page seulement qui nous intéresse, les lignes script et styles concernées dans le header.

Tout en haut de notre script de vue, nous ajoutons les lignes suivantes afin de mettre en place thickbox :
$this->jQuery()->addJavascriptFile($this->BaseUrl().'/scripts/thickbox-compressed.js')
->addStylesheet($this->BaseUrl().'/styles/thickbox.css')
->enable();

La fonction enable() est ici obligatoire sinon le module JQuery ne se chargera pas.

Dans la vue nous avons aussi la mise en forme décrite dans la documentation de thickbox.

Voilà, ici nous voyons l’intérêt de telles fonctions afin d’intégrer de l’ajax directement dans les pages qui nous intéressent afin de ne pas prolonger inutilement le chargement des autres pages.

Plus loin dans Zendx JQuery Dialog

Bonjours,

après un bref tutorial sur l’utilisation des dialog avec l’extension ZendX JQuery, je vais maintenant expliquer pas à pas quelles sont les options que l’on peut mettre dedans. Si vous voulez, toutes les informations sont disponibles sur le site de JQueryUI.

Comme vous vous en doutez, tout doit être instancié dans cette ligne:
echo $this->dialogContainer($id, $content, $params, $attribs);
Et cela, devrait être instancié dans un tableau $params. Voici la liste des principales options:

  • autoOpen (boolean): permet de savoir si vous voulez que votre fenêtre s’ouvre automatiquement après le chargement de la page ou non. Par défaut est à true. Si vous voulez ouvrir votre fenêtre à partir d’un lien ou d’un bouton vous devrez appeler cette fonction javascript (marche dans un onclick):
    $j('#iddialog').dialog('open');
  • bgiframe (boolean): permet de fixer des erreurs et autres bugs graphiques avec IE6. Je vous conseil fortement de l’activer. Par défaut est à false.
  • closeOnEscape (boolean): permet de fermer la fenêtre en appuyant sur la touche ESC. Par défaut est à true.
  • draggable (boolean): permet de déplacer la fenêtre avec la souris. Par défaut est à true.
  • height (int): permet de fixer la hauteur de votre fenêtre. Par défaut est à ‘auto’.
  • hide (string): Permet de donner un effet spécifique lors de la fermeture de la fenêtre. Par défaut est à NULL.
  • modal (boolean): Permet de faire que la fenêtre prend la main sur toute la page. Vous devez fermer la fenêtre pour reprendre la navigation sur le site. Par défaut est à false.
  • resizable (boolean): Permet de retailler la fenêtre. Par défaut est à true.
  • show (string): Permet de mettre un effet à la fenêtre lors de son ouverture.
  • title (string): Permet de donner un titre à sa fenêtre. Par défaut est à  »
  • width (int): permet de fixer une largeur à sa fenêtre. Par défaut est à 300.

Ensuite vient un paramètre bien particulier, que je vais vous expliquer en détail. Il s’agit de buttons.

Comme on l’a vu plus haut pour les boutons, on doit mettre une fonction comme ceci:
'buttons' => array('Annuler' => new Zend_Json_Expr('function() { $j(this).dialog(\'close\');}'))
Pour en revenir à quelque chose de simple:

  • buttons (array): Permet d’ajouter des boutons à sa fenêtre comme un bouton de fermeture ou un bouton de redirection.

Dans le tableau de boutons, vous devez mettre en premier le nom du bouton et ensuite la fonction qui sera exécutée lorsque l’on clique dessus.

Voilà, j’espère que ce petit complément vous aidera dans la création d’une fenêtre « dialog » en JQuery.

ZendX Jquery Dialog

ZendX Jquery Dialog

Bonjours, dans l’article d’aujourd’hui je vais vous présenter comment réaliser une fenêtre de dialogue avec l’extension ZendX_JQuery du framework.

En première partie je vais vous exposer les erreurs affichées dans la documentation et la correction à apporter puis, comment réaliser une fenêtre avec les boutons comme « valider » ou « annuler ».

Tout d’abord, vous devez avoir eu vent de comment mettre en place l’extension JQuery. Elle est très bien expliquée sur la documentation. Si vous ne savez pas comment faire, dites le et j’expliquerai en détail comment faire.

Attention: les exemples illustrés ici utilisent JQuery en mode non conflictuel. En effet le raccourcis des fonctions ‘$’ est utilisé par plusieurs frameworks JavaScripts. Il sera donc annoté ‘$j’.

Pour en revenir à la documentation, voici la ligne qui sert à créer un dialog JQuery:
echo $this->dialog($id, $content, $params, $attribs);
Vous devez impérativement le remplacer par la ligne ci-dessous, sous peine de vous retrouver avec une erreur:
echo $this->dialogContainer($id, $content, $params, $attribs);
Pour pouvoir donc créer une fenêtre permettant de faire afficher hello World, vous devriez avoir un code ressemblant à ceci:
echo $this->dialogContainer('test', 'Hello World', array(
'bgiframe' => true,
'autoOpen' => true,
'draggable' => true,
'modal' => true,
'resizable' => false,
'title' => 'Welcome message',
'closeOnEscape' => true));

Ce qui vous donnera cette image:

Pour les boutons, c’est une toute autre histoire. En effet, nous devons dire que pour chaque bouton, nous appelons une fonction javascript. Le problème c’est que Zend nous met par défaut des guillemets autour de ces fonctions et donc, cela ne marche pas.

Nous devons donc utiliser Zend_Json_Expr() pour éviter ceci.

Voici le code que l’on obtiendrai pour supprimer convenablement un fichier (fenêtre avec bouton supprimer et annuler):
echo $this->dialogContainer('test'.$i, 'je test juste celà', array(
'bgiframe' => true,
'autoOpen' => false,
'draggable' => true,
'modal' => true,
'resizable' => false,
'title' => 'Welcome message',
'closeOnEscape' => true,
'buttons' => array('Valider' => new Zend_Json_Expr('function() { document.location=\''.$this->url(array(
'module' => 'bien',
'controller' => 'private',
'action' => 'supprimerphoto',
'fiche' => $this->numfiche,
'photo' => $laphoto->num_photo),"",true).'\'}'),
'Annuler' => new Zend_Json_Expr('function() { $j(this).dialog(\'close\');}'))));

Ce qui donnera bien cette fenêtre-ci:

Voilà, si vous avez des questions n’hésitez pas.

J’espère avoir répondu à vos questions.