2010-09-30 4 views
1

Je viens de commencer à jouer avec l'aide Dojo dans Zend Framework et les choses ont été bien jusqu'à récemment. Pour l'instant, je voudrais être en mesure de faire une interface graphique simple en utilisant BorderContainer et ContentPanes, mais j'ai trouvé cela est un peu gênant.Utilisation de Dojo BorderContainer dans un script de mise en page Zend Framework

Fondamentalement, pour que les éléments Dojo du conteneur fonctionnent, j'ai trouvé que je devais les placer dans un script de vue pour que Dojo fonctionne. Cependant, pour moi, il serait logique que je puisse placer certains éléments dans mon fichier de mise en page maître (layouts/scripts/default.phtml) car les scripts de vue individuels devraient remplir les volets plutôt que la page entière.

À titre d'exemple, cela fonctionne, si je le coller dans une vue de rendre une Dojo_Form ainsi:

<?php 
$this->borderContainer()->captureStart('main-container', 
    array('design' => 'headline'), 
    array(
     'style'=>'height:100%;width:100%', 
     'align' => 'left' 
    )); 

echo $this->contentPane(
'menuPane', 
'This is the menu pane', 
array('region' => 'top'), 
array('style' => 'background-color: gray; color:white') 
); 

echo $this->contentPane(
'navPane', 
'This is the navigation pane', 
array('region' => 'left', 'splitter' => 'true'), 
array('style' => 'width: 200px; background-color: lightgray;') 
); 

echo $this->contentPane(
'mainPane', 
$this->form, 
array('region' => 'center'), 
array('style' => 'background-color: white;') 
); 

echo $this->contentPane(
'statusPane', 
'Status area', 
array('region' => 'bottom'), 
array('style' => 'background-color: lightgray;') 
); 

echo $this->borderContainer()->captureEnd('main-container'); 
?> 

Mais si j'essaie de placer des éléments dans la mise en page, il cesse de fonctionner. Donc, je suis assez sûr de savoir pourquoi cela se produit. Je présume que c'est parce qu'en plaçant les aides de vue de dojo dans les manuscrits de vue, les éléments de dojo sont analysés avant que le manuscrit de disposition frappe $ this-> dojo(). Mais, si je mets les éléments dojo dans le script de mise en page, alors les éléments sont analysés après avoir renvoyé $ this-> dojo().

Je suis intéressé de voir ce que tout le monde fait pour contourner ce problème?

Répondre

1

Il suffit de placer le code de mise en page au début du fichier de mise en page maître, ce qui va imposer un ordre d'exécution de travail. Commencez donc par définir borderContainer et ContentPanes, puis placez le reste comme suit:

$ this-> borderContainer() -> captureStart ('main-container', array ('design' => 'headline') , array ( 'style' => 'hauteur: 700px; largeur: 1170px', 'align' => 'centre' ));

echo $ this-> contentPane ( 'contentPaneId', $ this-> render ('_ header.phtml'), un tableau ('région' => 'top'), un tableau ('style' = > 'background-color: darkblue; color: white') );

// créer encore plus contentPanes et finir avec ..

echo $ this-> BorderContainer() -> captureEnd ('principal-conteneur');

// puis le reste du script d'affichage incluant dojo().

0

J'ai essayé de comprendre cela moi-même et après plusieurs heures d'expérimentation et de l'aide de la réponse de @ marijn j'ai finalement réussi à le faire fonctionner.

D'abord j'ai commencé avec un design propre en utilisant l'outil zend. Au niveau de la ligne de commande, tapez:

zf create project dojoTest 
cd dojoTest 
zf enable layout 

Modifiez maintenant la disposition.fichier phtml comme ceci:

<?php echo $this->doctype(); ?> 

<html lang="en"> 
<head> 
    <?php echo $this->headMeta(); ?> 
    <?php echo $this->headTitle(); ?> 
    <?php echo $this->headStyle(); ?> 
    <?php echo $this->headLink(); ?> 
    <?php echo $this->headScript(); ?> 
</head> 
<body class="tundra"> 

<?php 
$this->borderContainer()->captureStart(
     'appLayout', 
     array('design' => 'headline'), 
     array() 
); 

    echo $this->contentPane(
      'headerPane', 
      'This is the header pane', 
      array('region' => 'top'), 
      array('style' => 'background-color: lightblue;') 
    ); 

    echo $this->contentPane(
      'contentPane', 
      $this->layout()->content, 
      array('region' => 'center'), 
      array() 
    ); 

    echo $this->contentPane(
      'sidePane', 
      'This is the sidebar pane', 
      array('region' => 'right'), 
      array('style' => 'background-color: lightblue;') 
    ); 

    echo $this->contentPane(
      'footerPane', 
      'This is the footer pane', 
      array('region' => 'bottom'), 
      array('style' => 'background-color: lightblue;') 
    ); 

echo $this->borderContainer()->captureEnd('appLayout'); 
?> 

<?php if($this->dojo()->isEnabled()) { echo $this->dojo(); } ?> 
</body> 
</html> 

maintenant modifier votre fichier Bootstrap.php comme ceci:

<?php 
class Bootstrap extends Zend_Application_Bootstrap_Bootstrap 
{ 
    protected function _initView() 
    { 
     // Initialize view 
     $view = new Zend_View(); 
     $view->doctype('HTML5'); 
     $view->setEncoding('UTF-8'); 
     $view->headTitle('Dojo Layout Test'); 
     $view->headMeta()->appendName('Content-Type', 'text/html; charset=UTF-8'); 
     $view->headMeta()->appendName('author', 'Chris OConnell'); 
     $view->headLink()->appendStylesheet('/css/style.css?v=1', 'all'); 

     // add dojo helper path to view 
     Zend_Dojo::enableView($view); 

     // configure Dojo view helper, disable 
     $view->dojo()->setCdnBase(Zend_Dojo::CDN_BASE_GOOGLE) 
        ->addStyleSheetModule('dijit.themes.tundra') 
        ->setCdnVersion(1.6) 
        ->setDjConfigOption('parseOnLoad', TRUE) 
        ->disable();  

     // Add it to the ViewRenderer 
     $viewRenderer = Zend_Controller_Action_HelperBroker::getStaticHelper('ViewRenderer'); 
     $viewRenderer->setView($view); 

     // Return it, so that it can be stored by the bootstrap 
     return $view; 
    } 
} 

maintenant dans le dossier public de créer un dossier nommé « NCS » et dans ce dossier, créez un fichier appelé « style.css » et ajouter le contenu suivant:

html, body { 
    height: 100%; 
    margin: 0; 
    overflow: hidden; 
    padding: 0; 
} 

#appLayout { 
    height: 100%; 
} 
#sidePane { 
    width: 300px; 
} 

et cela devrait le faire.

Peu de choses, j'ai rencontré qui m'a donné des problèmes:

  • Le BorderContainer dojo ne peut pas être entouré par un autre <div> ou il ne seront pas affichées. Je ne sais pas pourquoi, mais avait beaucoup de frustration en essayant de comprendre celui-là.
  • Le style CSS de height: 100%; doit être appliqué à la div ou il ne sera pas affichage html, body et BorderContainer.
  • La ligne echo $this->dojo(); doit venir après les instructions borderContainer ou les aides de dojo de Zend ne sera pas en mesure de générer le code correct .
Questions connexes