在 Zend Framework 布局脚本中使用 Dojo BorderContainer

Posted 2023-02-16

技术标签:

【中文标题】在 Zend Framework 布局脚本中使用 Dojo BorderContainer【英文标题】：Using Dojo BorderContainer in a Zend Framework layout script 【发布时间】：2010-09-30 08:56:50 【问题描述】：

我刚刚开始在 Zend Framework 中使用 Dojo，直到最近一切都很好。现在，我希望能够使用 BorderContainer 和 ContentPanes 制作一个简单的 GUI，但是我发现这有点尴尬。

基本上为了让容器 Dojo 元素工作，我发现我需要将它们放置在视图脚本中以使 Dojo 工作。但是对我来说，我可以在我的主布局文件 (layouts/scripts/default.phtml) 中放置一些元素是有意义的，因为单个视图脚本应该填充窗格而不是整个页面。

作为一个例子，如果我将它粘贴到渲染 Dojo_Form 的视图中：

<?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');
?>

但如果我尝试将任何元素放入布局中，它就会停止工作。

所以，我很确定我知道为什么会发生这种情况。我推测这是因为通过将 dojo 视图助手放在视图脚本中，dojo 元素在布局脚本命中 $this->dojo() 之前被解析。但是，如果我将 dojo 元素放入布局脚本中，则在回显 $this->dojo() 后会解析这些元素。

我很想看看其他人如何解决这个问题？

【问题讨论】：

【参考方案1】：

只需将布局代码放在主布局文件的开头，这将强制执行工作顺序。所以从定义borderContainer和ContentPanes开始，然后像这样把剩下的放在下面：

$this->borderContainer()->captureStart('main-container', 数组（'设计' => '标题'），大批（ '样式'=>'高度：700px；宽度：1170px'， '对齐' => '居中' ));

echo $this->contentPane( 'contentPaneId', $this->render('_header.phtml'), 数组（'区域' => '顶部'），数组（'样式' => '背景颜色：深蓝色；颜色：白色'） );

// 创建更多内容窗格并以..结束。

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

// 然后是视图脚本的其余部分，包括 dojo()。

【讨论】：

【参考方案2】：

我一直在尝试自己解决这个问题，经过几个小时的试验和@marijn 回答的一些帮助，我终于让它工作了。

首先，我使用 zend 工具进行了简洁的设计。在命令行输入：

zf create project dojoTest
cd dojoTest
zf enable layout

现在像这样编辑 layout.phtml 文件：

<?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>

现在编辑您的 Bootstrap.php 文件，如下所示：

<?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;

现在在公共文件夹中创建一个名为“css”的文件夹，并在该文件夹中创建一个名为“style.css”的文件并添加以下内容：

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


#appLayout 
    height: 100%;

#sidePane 
    width: 300px;

应该这样做。

我遇到的几件事给我带来了问题：

dojo 边界容器不能被另一个 <div> 或它包围不会显示。不知道为什么但是有试图弄清楚很多挫折那个。 height: 100%;的css样式必须应用于html, body 和 borderContainer div 否则不会显示。 echo $this->dojo(); 行必须在borderContainer语句或Zend的之后道场助手将无法生成正确的代码。

【讨论】：

以上是关于在 Zend Framework 布局脚本中使用 Dojo BorderContainer的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Zend Framework 2 中为局部使用共享视图脚本路径？

PHP Zend Framework：禁用布局

PHP Zend Framework：禁用布局和视图 - 用于AJAX

禁用Zend Framework中的视图和布局

Zend Framework appendFile 在 jQuery 包含后不起作用

Zend Framework 2：为布局创建搜索小部件