Zend_Dojo — инструмент, навязываемый нам авторами фреймворка. Так давайте попробуем, если уж так просят…
Начну с подлого — подразню результатом проделанной работы:
Выглядет привлекательно. Воспроизвести сие творение будет не так и сложно, даже если Ваши познания по Dojo/Dijit оставляют желать лучшего — Вы разберетесь без особых затруднений (хотя лучше таки посматривать в сторону мануалов — "Dojo для начинающих" ;) ).
Для начала — инициализация — приведу кусочек файла Bootstrap.php, в котором мы подключим хелперы Dojo:
<?php
class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
protected function _initView()
{
$view = new Zend_View();
$view->addHelperPath('Zend/Dojo/View/Helper/', 'Zend_Dojo_View_Helper');
// or
Zend_Dojo::enableView($view);
return $view;
}
}
Этап второй — подключить библиотеку Dojo. Сие счастье должно быть подключено в теге <head> Вашего HTML документа. Для этого будет достаточно слегка изменить «layout.phtml» (или «index.phtml», если Вы не используете layout'ы):
<?php echo $this->doctype() ?>
<html>
<head>
<title>Dojo Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<?php
// My own stylesheet
echo $this->headLink()->setStylesheet('/css/my.css');
// Check if dojo library is needed
if ($this->dojo()->isEnabled()):
// Include dojo library
$this->dojo()->setLocalPath('/js/dojo/dojo.js')
// Use dojo theme tundra
->addStyleSheetModule('dijit.themes.tundra');
// Echo out the dojo <script> tags
echo $this->dojo();
endif; ?>
</head>
<!-- Set body class to "tundra" (requeried) -->
<body class="tundra">
<?php echo $this->layout()->content ?>
</body>
</html>
Теперь наше приложение готово к использованию Dojo. Переходим к скриптам вида — первой строчкой в файле «index.phtml» идет включение Dojo:
$this->dojo()->enable();
Если этого не сделать, Dojo не будет подключен в файле layout.phtml.
Все готово, можно начинать — создадим TabContainer — для этого будем использовать соответствующий ViewHelper:
echo $this->tabContainer($id, $content, $params, $attribs);
Вроде нормальный хелпер, да вот только нам еще нужно вызывать методы captureStart() и captureEnd(), чтобы внести данные:
<?php
$this->dojo()->enable();
// Контейнер с табами
$this->tabContainer()->captureStart('tab1', array(), array('style' => 'width:800px;height:500px;'));
// Наш контент
echo $this->tabContainer()->captureEnd('tab1');
Таким образом мы добавляем контент в контейнер. Подобным способом добавляем закладки в наш контейнер:
<?php
$this->dojo()->enable();
// Контейнер с табами
$this->tabContainer()->captureStart('tab1', array(), array('style' => 'width:800px;height:500px;'));
// Таб "Dates"
$this->contentPane()->captureStart('pane1', array(), array('title' => 'Dates'));
echo $this->form1;
echo $this->contentPane()->captureEnd('pane1');
// Таб "FAQ"
$this->contentPane()->captureStart('pane2', array(), array('title' => 'FAQ'));
?>
<h1>FAQ</h1>
<dl><dt>Question 1?</dt><dd>This is my answer 1!</dd></dl>
<dl><dt>Question 2?</dt><dd>Good question, next one.</dd></dl>
<dl><dt>Question 3?</dt><dd>Ok, that's enough!</dd></dl>
<?php
echo $this->contentPane()->captureEnd('pane2');
// Таб "Closable" (в настройках устанавливаем closable = true)
$this->contentPane()->captureStart('pane3', array(), array('title' => 'Closable', 'closable' => true));
echo 'You can close me!';
echo $this->contentPane()->captureEnd('pane3');
// Таб "Splitted" с разделителем
$this->contentPane()->captureStart('pane4', array(), array('title' => 'Splitted'));
$this->splitContainer()->captureStart('split1', array(), array('style' => 'width:250px;height:250px;'));
$this->contentPane()->captureStart('splitpane1', array(), array());
echo 'Hey, I am on the left side!';
echo $this->contentPane()->captureEnd('splitpane1');
$this->contentPane()->captureStart('splitpane2', array(), array());
echo 'Cool!';
echo $this->contentPane()->captureEnd('splitpane2');
echo $this->splitContainer()->captureEnd('split1');
echo $this->contentPane()->captureEnd('pane4');
// Таб "Editor" с WYSIWYG редактором
$this->contentPane()->captureStart('pane5', array(), array('title' => 'Editor'));
echo $this->editor('foo');
echo $this->contentPane()->captureEnd('pane5');
echo $this->tabContainer()->captureEnd('tab1');
Как видим, каждая закладка в нашем контейнере представляет из себя новый ContentPane. ContentPane можно использовать в любом контейнере (кроме AccordionContainer). Более подробную информацию сможете найти в документации по ZF.
В первой закладке выводим форму, которая является объектом типа Zend_Dojo_Form (см. листинг IndexController/IndexAction):
public function indexAction()
{
$form1 = new Zend_Dojo_Form();
$form1->setMethod('post')->setAction("/");
$form1->addElement('DateTextBox', 'date1', array(
'label' => 'Choose a date:',
'datePattern' => 'yyyy-MM-dd',
'validators' => array('Date'),
'required' => true
))
->addElement('TimeTextBox', 'time1', array(
'label' => 'Choose a time:',
'timePattern' => 'HH:mm:ss',
))
->addElement('NumberSpinner', 'number1', array(
'label' => 'Choose a number:',
'value' => 0,
'smallDelta' => 1,
'min' => 0,
'max' => 30,
'defaultTimeout' => 100,
'timeoutChangeRate' => 100,
))
->addElement('HorizontalSlider', 'slide1', array(
'label' => 'Let\'s slide:',
'minimum' => 0,
'maximum' => 25,
'discreteValues' => 10,
'style' => 'width: 450px;',
'topDecorationDijit' => 'HorizontalRuleLabels',
'topDecorationLabels' => array('0%', '50%', '100%'),
'topDecorationParams' => array('style' => 'padding-bottom: 20px;'),
))
->addElement('SubmitButton', 'submit', array(
'label' => 'Submit!'
));
$this->view->form1 = $form1;
}
Вот так легко с помощью Dojo'вских виджетов (Dijits) можно создавать формы. Процесс практически идентичен работе с Zend_Form, можно увидеть лишь небольшое различие в именовании элементов (например «SubmitButton» и «submit»), да и параметров для настройки чуть больше.
Это лишь первый шаг в изучении Zend_Dojo, если хотите узнать больше — следите за обновлениями ;)
Данная статья — лишь вольный перевод "My Very First Steps with Zend_Dojo"