Zend_Dojo: первые шаги

    Zend_Dojo

    Zend_Dojo — инструмент, навязываемый нам авторами фреймворка. Так давайте попробуем, если уж так просят…


    Начну с подлого — подразню результатом проделанной работы:

    Zend_Dojo_Form

    Выглядет привлекательно. Воспроизвести сие творение будет не так и сложно, даже если Ваши познания по 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"
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 23

      0
      По юзабилити, конечно не дотягивает до приемлимого уровня (аналогичного ГУИ в обычных десктопных приложениях).
      Трекбар — так вообще ужасен.
      Ну и плюс, слышал, что с кроссброузерностью у Dojo проблемы.
        0
        От этих детских болячек вроде как уже избавились…
          0
          Не избавились, в опере много официальных примеров не работают.
        0
        А вы смотрели в сторону Моча?
          +2
          У веб-разработчиков какие-то странные вкусы на придумывание имён для своих детищ:
          Dojo, django, joomla, а теперь ещё и Mocha
            0
            Вообще-то Mocha это кофе мокка
              0
              Да-да ;-)
          –1
          ExtJS — лучшая альтернатива. Лучше бы его навязывали.
            0
            ExtJS — он-то может и Висто-образен по красоте, но вы видели сколько вест сие чудо? 1Мб одного Жабаскрипта. Я сразу отказался.
              0
              ну во первых не мегабайт, а в 2 раза меньше ( 526 кб — 2.0). Во вторых у многих стоит gzip сжатие на сервере и тогда весь ExtJs сжимается до чуть более 100кб — более чем приемлемая плата за возможности ExtJs
                –1
                У Dojo/Dijit/Dojox возможностей не меньше ;)
              +2
              ладно бы просто весил, так он еще и работает медленно, а дебажить его вообще наказание:(
              0
              после перехода на лицензию GPLv3 она не подходит для многих проектов.
                0
                лучше бы ничего не навязывали, ведь мы и сами можем выбрать что нравится
                +2
                Хочу выбрать 50% на слайдбаре!!!
                  –4
                  Ужас. Что хэлперы, что сам фрэймворк.
                    0
                    эксперт, сразу видно :))))
                    0
                    Подключение Dojo как написано в статье у меня не заработало. Заработало вот так (в Bootstrap):
                    $view = new Zend_View();
                    Zend_Dojo::enableView($view);
                    $viewRenderer = Zend_Controller_Action_HelperBroker::getStaticHelper('viewRenderer');
                    $viewRenderer->setView($view);
                    $view->addHelperPath('Zend/Dojo/View/Helper/', 'Zend_Dojo_View_Helper');
                    return $view;
                      0
                      Спасибо, помогло!
                      +1
                      Честно говоря, не особо знаком с Zend, но приведенный код характирезует его и dojo только с отрицательной стороны, каша какая-то (уж не обижайтесь), я бы не хотел такое писать, и никому не советую. Это ужасно.

                        0
                        Ну кому как, по мне так нормальный код, ничего ужасного нет. Каждый изучает свое. Антону спасибо за статью, +1
                        0
                        Не понимаю, откуда негативная реакция на zend и на dojo?
                        Каждому коту — свой сыр, и что zend прекрасен для мощных сайтов и занимает почетное место в своей нише, что dojo toolkit держит почетные лавры между jQuery и ExtJS (первый слишком легок для определенных задач, а второй слишком тяжелый для некоторых сайтов и приложений)

                        А то, что у Dojo Toolkit проблемы с Оперой — эт правда, но еще ничего не значит, я работаю с ним уже почти год и встретил только один глюк, который пришлось преодолевать ломом — это неправильная центровка dijit.Dialog при определенных условиях контента страницы.

                        Zend_Dojo — конечно сурогат, но как хелпер к zend реализован хорошо.

                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                        Самое читаемое