jQuery и Zend Framework — красивый симбиоз
by Вредный • 09.07.2010 • jQuery, Zend Framework • Комментарии [5]
Приветствую вас, веб-разработчики. В сегодняшней заметке мы с вами научимся встраивать в наши проекты на Zend Framework jQuery. После этой заметки вы поймете, что это очень просто. Для начала идем на сайт jqueryUI и скачиваем скрипты и стили в одном флаконе, благо на сайте все это предумотрено. Нам оттуда потребуется 2 JavaScript файла: jquery и jqueryUI, файл стилей и картинки, которые украсят наш динимический сайт. На картинке можно разглядеть какая структура получилась у меня. (папка public или document_root сайта)
В создании нового проекта на Zend Framework вам очень поможет эта заметка, если вы используете NetBeans как среду разработки.
В первую очередь нужно включить слои enable layout и настроить наш загрузчик bootstrap.php, который находится в APPLICATION_PATH. Вот каким он получился у меня
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <?php class Bootstrap extends Zend_Application_Bootstrap_Bootstrap { protected function _initView() { // получаем ресурс слоя $this->bootstrap('layout'); $layout = $this->getResource('layout'); $view = $layout->getView(); $viewRenderer = Zend_Controller_Action_HelperBroker::getStaticHelper('viewRenderer'); // добавляем поддежрку jQuery $viewRenderer->view->addHelperPath(APPLICATION_PATH . "/views/helpers", 'My_Helper'); $view->addHelperPath('ZendX/JQuery/View/Helper', 'ZendX_JQuery_View_Helper'); // задаем локальные пути для скриптов и стилей ZendX_JQuery::enableView($view); $view->jQuery() ->enable() ->uiEnable() ->setLocalPath('/js/jquery/jquery-1.4.2.min.js') ->setUiLocalPath('/js/jquery/jquery-ui-1.8.2.custom.min.js') ->addStylesheet('/styles/jquery-ui-1.8.2.custom.css'); // инициализация doctype $view->doctype('XHTML1_STRICT'); // настройка title $view->headTitle()->setSeparator(' - ')->headTitle('ZF 4 fun'); } } |
Старался комментировать важные моменты. А еще, чуть не забыл, вам понадобится библиотека из ZF ZendX, которая находится в папке /extras/library/ZendX распакованного архива с Zend Framework.
Теперь создадим лейаут для всего проекта, подкорректировав файл layout.phtml.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <?php // выводим docype // <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ?> <?php echo $this->doctype(); ?> <html> <head> <?php // выводим тайтл, который генерировать будем в каждом контроллере и экшене ?> <?php echo $this->headTitle(); ?> <?php // самое интересное, стили, скрипты и сгенированный javascript выводятся одной строкой ?> <?php echo $this->jQuery(); ?> </head> <body> <?php echo $this->layout()->content; ?> </body> </html> |
Добавим немного магии в виде добавочного тайтла в контроллер по умолчанию IndexController.
1 2 3 4 | public function indexAction() { $this->view->headTitle('Index Controller'); } |
А сейчас самое интересное, покажем всю красу jQuery в виде datePicker’а. Для этого нам нужно в файле, отвечающем за вывод действия и контроллера по умолчанию views/scripts/index/index.phtml написать следующее
1 | <?php echo $this->datePicker('dp1'); ?> |
Махмут, поджигай или запускаем и смотрим что получилось. На первый взгляд отображается только текстовое поле без ничего более, но это лишь на первый взгляд, попробуйте щелкнуть по этому полю и вуаля отобразится красивые календарик
Если заглянуть в исходный код, то можно будет увидеть, что всю черную работу хелперы вида Zend Framework’а сделали за нас. Вот и все =)
Спасибо статья очень помогла прикрутить jquery.
всегда пожалуйста
Немогли бы вы дополнить статью, описав то, как можно прикрутить сторонние JQuery плагины. Мне к примеру нужен time picker плагін, который необходимо использовать в Zend_Form, но в JQuery UI есть только datePicker. Есть много сторонних плагинов, позволяющих реализовать этот функционал, source код которых представляет собой js и css файлами. Я полагаю, что нужно создать новый helper, в которым реализовать вызов JQury функции, но, так как я новичок, не знаю как именно это сделать.Заранее признателен.
P.S. В родной документации на framework.zend.com и документации к ZendX я примера не нашел (как и на просторах web’a).
эти хелперы придется писать вручную, если хотиете готового решения то смотрите в сторону Zend_Dojo_Form, там есть тайм пикер
Не подробно. чтобы воспользоваться нужен определенный багаж знаний.