Using Dojo BorderContainer in a Zend Framework layout script
I have just started playing around with using Dojo in Zend Framework and things have been fine up until recently. For now, I would like to be able to make a simple GUI using BorderContainer and ContentPanes, however I have been finding this is a bit awkward.
Basically to get the container Dojo elements to work, I have found that I need to place them in a view script for Dojo to work. However to me, it would make sense that I can place some elements in my master layout file (layouts/scripts/default.phtml) as the individual view scripts should populate the panes rather than the whole page.
As an example this works, if I paste it into a view rendering a Dojo_Form as well:
<?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');
?>
But if I try to place any elements into the layout it stops working.
So, I'm pretty sure I know why this happens. I am presuming it's because by placing the dojo view helpers in the view scripts, the dojo elements are parsed before the layout script hits $this->dojo(). But, if I put the dojo elements into the layout script, then the elements are parsed after echoing $this->dojo().
I am interested to see what everyone else does to get around this problem?
Simply place the layout code at the beginning of the master layout file, which will enforce a working execution order. So start with defining the borderContainer and ContentPanes, then put the rest below like so:
$this->borderContainer()->captureStart('main-container', array('design' => 'headline'), array( 'style'=>'height:700px;width:1170px', 'align' => 'center' ));
echo $this->contentPane( 'contentPaneId', $this->render('_header.phtml'), array('region' => 'top'), array('style' => 'background-color: darkblue;color:white') );
// create some more contentPanes and finish with..
echo $this->borderContainer()->captureEnd('main-container');
// then the rest of the view script including dojo().
I've been trying to figure this one out myself and after several hours of experimenting and some help from @marijn's answer I finally got it working.
First I started off with a clean design using the zend tool. At the command line type:
zf create project dojoTest
cd dojoTest
zf enable layout
Now edit the layout.phtml file like so:
<?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>
Now to edit your Bootstrap.php file like so:
<?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;
}
}
Now in the public folder create a folder called 'css' and in that folder create a file called 'style.css' and add the following content:
html, body {
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
}
#appLayout {
height: 100%;
}
#sidePane {
width: 300px;
}
And that should do it.
Few things I ran into that gave me problems:
- The dojo borderContainer cannot be
surrounded by another
<div>or it won't display. Don't know why but had much frustration trying to figure that one out. - The css style of
height: 100%;must be applied to thehtml, bodyand borderContainer div or it won't display. - The
echo $this->dojo();line must come after the borderContainer statements or Zend's dojo helpers won't be able to generate the right code.
加载中,请稍侯......
精彩评论