Rich UI on Dojo Toolkit and Zend Framework

Создание динамических интерфейсов и AJAX- приложений промышленного класса с помощью Dojo Toolkit и Zend Framework Георгий Туревич, Wizartech

Немного о себе ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Промышленный? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Где взять Dojo ? ,[object Object],[object Object],[object Object]

Архитектура Dojo Toolkit

Вкратце о Core и Base ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object]

Инициализация ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Конфигурирование ,[object Object],[object Object],[object Object],[object Object],Конфигурировать возможно прямо в тэге <script> : Или программным способом (для соответствия стандартам): <script> var djConfig = {isDebug: true, parseOnLoad: true} </script> <script type="text/javascript" src="/dojotoolkit/dojo/dojo.js"> </script>

Система управления пакетами и зависимостями ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Система управления пакетами и зависимостями ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],/js/wlib/Example.js Вывод в консоли Firebug Lite ( упрощенный аналог плагина для FF) :

[object Object],Интересное в Base и Core События dojo.addOnUnload() <script> var onLoadFunc = function() { console.log('Да! Страница загружена!'); } dojo.addOnLoad(onLoadFunc); </script> <script> var onUnloadFunc = function() { alert('Закрываем страницу'); } dojo.addOnUnload(onUnloadFunc); </script>

Интересное в Base и Core События ,[object Object],<a href="http://phpconf.ru" id="link">Все на конференцию</a> <script> dojo.connect(dojo.byId('link'),'onclick', function(evt) { dojo.stopEvent(evt); console.log('Вы щелкнули на ссылку!'); }); </script>

Интересное в Base и Core События ,[object Object],<script> function foo() { console.log('Вызвана функция foo') } function bar() { console.log('Вызвана фукция bar') } var conn = dojo.connect('foo', bar); foo(); console.log('--- Удаляем соединение --- '); dojo.disconnect(conn); foo(); </script>

Интересное в Base и Core События ,[object Object]

Интересное в Base и Core События ,[object Object],<script> function handlerFirst(data) { console.log("Функция handlerFirst, Данные:", data); } function handlerSecond(data) { console.log("Функция handlerSecond, Данные:", data); } var subscrFirst = dojo.subscribe('mySubscribe', null, handlerFirst); var subscrSecond = dojo.subscribe('mySubscribe', null, handlerSecond); </script>

Интересное в Base и Core События ,[object Object],<script> dojo.publish("mySubscribe", ["Привет всем!"]); dojo.publish("mySubscribe", ["Пока всем!"]); console.log(" --- Очищаем subscrFirst --- "); dojo.unsubscribe(subscrFirst); dojo.publish("mySubscribe", ["Привет всем!"]); dojo.publish("mySubscribe", ["Пока всем!"]); </script>

Интересное в Base и Core Ajax ,[object Object],[object Object],[object Object],<script> dojo.xhrPost({ url: "./test.php", handleAs: "text", content: {a: "1111", b: "2222"}, load: function(response, ioArgs) { console.log(response); return response; } }); </script> ,[object Object],[object Object]

Интересное в Base и Core Ajax test.php <?php print_r($_POST);

Интересное в Base и Core Ajax ,[object Object],<script> function firstCallback(response, ioArgs) { console.log("Вызван firstCallback : ", response); return response; } function secondCallback(response, ioArgs) { console.log("Вызван secondCallback : ", response); return response; } </script>

Интересное в Base и Core Ajax ,[object Object],<script> var deffered = dojo.xhrPost({ url: "./test_deffered.php", handleAs: "json", content: {a: "1111", b: "2222"}, load: function(response, ioArgs) {} }); deffered.addCallback(firstCallback); deffered.addCallback(secondCallback); </script> ,[object Object],[object Object],[object Object]

Интересное в Base и Core Ajax test _ deffered.php <?php echo json_encode($_POST);

Имитация классов и наследования ,[object Object],<script> dojo.declare("wlib.ExampleParentFirst", null, { constructor: function() { console.log("Вызов конструктора"); } }); dojo.declare("wlib.ExampleParentSecond", null, { say: function(message) { console.log(message) } }); </script>

Имитация классов и наследования ,[object Object],<script> dojo.declare( "wlib.ExampleParentChild", [wlib.ExampleParentFirst, wlib.ExampleParentSecond], { sayBy: function() { this.say("Всем пока!") } } ); var child = new wlib.ExampleParentChild(); child.sayBy(); </script>

Имитация классов и наследования ,[object Object]

Имитация классов и наследования ,[object Object],<script> dojo.extend(wlib.ExampleParentChild, { sayHello: function() { this.say("Всем привет!"); } }) ; var child = new wlib.ExampleParentChild(); child.sayHello(); child.sayBy(); </script>

Имитация классов и наследования ,[object Object],<script> var obj = { firstName: "Иван", lastName: "Петров" }; var emp = dojo.mixin(obj, { sayName: function() { console.log( "Меня зовут " + this.firstName + " " + this.lastName ); } }); emp.sayName(); </script>

Имитация классов и наследования ,[object Object],<script> function sayName() { console.log( "Меня зовут " + this.firstName + " " + this.lastName ); } var obj = { firstName: "Иван", lastName: "Петров" }; var callback = dojo.hitch(obj, sayName); callback(); </script>

Что такое Dijit ? ,[object Object],[object Object],[object Object]

Что такое Dijit ? ,[object Object],[object Object],[object Object],[object Object]

Виджеты компоновки

Что такое Dijit ? ,[object Object],[object Object],[object Object],[object Object],[object Object]

Виджеты приложения

Что такое Dijit ? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Инициализация виджетов <script src="/dojotoolkit/dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true " ></script> <script> dojo.require(" dijit.form.Button "); </script> <link id="themeStyles" rel="stylesheet" href=" /dojotoolkit/dijit/themes/tundra/tundra.css "> ,[object Object],[object Object],[object Object],[object Object]

Инициализация виджетов <div class="tundra"> <button id="buttonHello"></button> <button dojoType="dijit.form.Button"> Щелкни по мне! </button> </div> <script> var button = new dijit.form.Button({ label: "Привет!", name: "programmatic" }, "buttonHello"); </script> В секции <body> :

Инициализация виджетов ,[object Object],[object Object]

Возможности расширения ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Dojox ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Dojox ,[object Object],[object Object],[object Object],[object Object],[object Object]

Абстракция работы с данными ,[object Object],[object Object],[object Object],[object Object],[object Object]

Абстракция работы с данными ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Подготовка к выпуску в эксплуатацию ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

D.O.H Система модульного тестирования ,[object Object]

Интеграция Dojo Toolkit и Zend Framework ,[object Object],[object Object],[object Object],[object Object]

Программная настройка Dojo -окружения ,[object Object],<style type="text/css"> @import "/js/dojo-toolkit/dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript"> var djConfig = {"isDebug":true,"parseOnLoad":true}; </script> <script type="text/javascript" src="/js/dojo-toolkit/dojo/dojo.js"></script> <script type="text/javascript"> dojo.require("dojo.io.script"); dojo.require("dojo.fx"); dojo.require("dijit.form.Button"); </script>

Программная настройка Dojo -окружения ,[object Object],<?=$this->dojo() ->enable() ->setDjConfig( array('isDebug' => true, 'parseOnLoad' => true) ) ->setLocalPath('/js/dojo-toolkit/dojo/dojo.js') ->addStyleSheetModule('dijit.themes.tundra') ->requireModule( array('dojo.io.script', 'dojo.fx', 'dijit.form.Button') )?>

Программная настройка Dojo -окружения ,[object Object],[object Object],[object Object],<?=$this->dojo() ?> И в application.ini : resources.dojo.djConfig.isDebug = 1 resources.dojo.djConfig.parseOnLoad = 1 resources.dojo.localPath = "/js/dojo-toolkit/dojo/dojo.js" resources.dojo.requireModule[] = "dojo.io.script" resources.dojo.requireModule[] = "dojo.fx" resources.dojo.requireModule[] = "dijit.form.Button" В макете указываем:

Работа с виджетами View- хелперы ,[object Object],<h1>Форма</h1> <div class="tundra"> <form> <?=$this->editor('editor')?> <?=$this->button( 'send', 'Отправить')?> </form> </div>

Работа с виджетами Элементы форм ,[object Object],$form = new Zend_Dojo_Form(); $form->addElement('editor', 'editor'); $form->addElement( 'button', 'send', array('label' => 'Отправить') ); $this->view->form = $form; <h1>Форма</h1> <div class="tundra"> <?=$this->form?> </div> В шаблоне:

Работа с виджетами Состав компонентов ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Ajax Zend_Dojo_Data ,[object Object],public function dojoDataExampleAction() { $form = new Zend_Dojo_Form(); $form->addElement( 'FilteringSelect', 'city', array( 'label' => 'City', 'storeId' => 'cityStore', 'storeType' => 'dojo.data.ItemFileReadStore', 'storeParams' => array( 'url' => '/json/simple-city-store/', ), 'dijitParams' => array( 'searchAttr' => 'name', ) ) ); $this->view->form = $form; }

Ajax Zend_Dojo_Data ,[object Object],public function simpleCityStoreAction() { $data = array( array('id' => 1, 'name' => 'Волгоград'), array('id' => 2, 'name' => 'Москва'), array('id' => 3, 'name' => 'Минск'), array('id' => 4, 'name' => 'Мурманск') ); $dojoData = new Zend_Dojo_Data('id', $data); echo $dojoData; }

Ajax Zend_Dojo_Data ,[object Object],{ "identifier":"id", "items":[ {"id":1,"name":"Волгоград"}, {"id":2,"name":"Москва"}, {"id":3,"name":"Минск"}, {"id":4,"name":"Мурманск"} ] }

Ajax Zend_Dojo_Data ,[object Object],<div class="tundra"><?=$this->form?></div> Вуаля!

Ajax JSON-RPC ,[object Object],<? $this->dojo()->requireModule("dojo.rpc.JsonService"); ?> <? $this->dojo()->onLoadCaptureStart(); ?> function() { var o = { "serviceType": "JSON-RPC", "serviceUrl": "/json/rpc-server", "methods": [{ "name": "sum", "parameters": [ {name: "numbers"} ] }] } ... } <? $this->dojo()->onLoadCaptureEnd(); ?>

Ajax JSON-RPC ,[object Object],... var rpcObject = new dojo.rpc.JsonService(o) var sum = rpcObject.sum([4,8,15,16,23,42]); sum.addCallback(function(response) { console.log("Сумма чисел: ", response) }); Запрос: {"params":[[4,8,15,16,23,42]],"method":"sum","id":1}

Ajax JSON-RPC ,[object Object],class Default_Model_RpcTest { function sum($numbers) { return array_sum($numbers); } }

Ajax JSON-RPC ,[object Object],public function rpcServerAction() { $server = new Zend_Json_Server(); $server->setClass('Default_Model_RpcTest'); $server->handle(); } Результат:

Ajax Rest ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Ajax Rest ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Выпуск в эксплуатацию Слой сборки ,[object Object],dojo.provide("custom.main"); (function(){ dojo.require("dojo.io.script"); dojo.require("dojo.fx"); dojo.require("dijit.form.Button"); })();

Выпуск в эксплуатацию Профиль сборки dependencies = { action:"release", optimize:"shrinksafe", layerOptimize:"shrinksafe", copyTests:false, loader:"default", cssOptimize:"comments", releaseName:"custom", layers:[{ name:"custom.main.js", layerDependencies:[], dependencies:["custom.main"] }], prefixes:[ ["custom","../custom"], ["dojo","../dojo"], ["dijit","../dijit"] ] };

Выпуск в эксплуатацию Генерация профиля и слоя ,[object Object],public function buildAction() { $build = new Zend_Dojo_BuildLayer(array( 'view' => $this->view, 'layerScriptPath' => 'custom.main.js', 'layerName' => 'custom.main', )); $profile = $build->generateBuildProfile(); $layerScript = $build->generateLayerScript(); }

Подробнее? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Подробнее? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object]

Rich UI on Dojo Toolkit and Zend Framework

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (19)

Similaire à Rich UI on Dojo Toolkit and Zend Framework

Similaire à Rich UI on Dojo Toolkit and Zend Framework (20)

Rich UI on Dojo Toolkit and Zend Framework