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 the html, body and 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.