View
3.676
Download
0
Category
Preview:
DESCRIPTION
Palestra proferida no 6º SOLISC, em São José, SC.
Citation preview
Desenvolvendo com Dojo Toolkit
Palestrante: Flávio Gomes da Silva Lisboa
Desenvolvendo com Dojo Toolkit
Agenda
▶Situando-se no contexto Javascript▶Apresentação ampla do Dojo Toolkit▶Introdução a programação com alguns exemplos
Desenvolvendo com Dojo Toolkit
Brevíssima Introdução ao Javascript
Desenvolvendo com Dojo Toolkit
Javascript
Desenvolvendo com Dojo Toolkit
Programação Orientada a Aspectos em PHP
Javascript
Javascript
Desenvolvendo com Dojo Toolkit
Programação Orientada a Aspectos em PHP
Javascript
Programação Orientada a Aspectos em PHP
JAVASCRIPT
<script type="text/javascript"></script>
Programação Orientada a Aspectos em PHP
JAVASCRIPT
Javascript é A linguagem de scripting da Web.
É utilizada em bilhões de páginas Web para adicionar funcionalidades, validar formulários, estabelecer comunicação com o servidor e muitas outras coisas.
Programação Orientada a Aspectos em PHP
JAVASCRIPT
Graças ao Javascript, as páginas HTML puderam ganhar um comportamento que ia além do redirecionamento baseado em hyperlinks. Era possível responder a eventos provocados pelo usuário, sem a necessidade de enviar uma requisição ao servidor.
v
Programação Orientada a Aspectos em PHP
JAVASCRIPT
Javascript é baseada em uma especificação aberta (ECMA-262). Embora outras linguagens tenham surgido, ela se firmou como padrão de scripting para cliente Web.
Programação Orientada a Aspectos em PHP
JAVASCRIPT
FATO. Existe muito código Javascript disponível.
Programação Orientada a Aspectos em PHP
JAVASCRIPT
É fácil copiar e colar.E também é muito fácil perder o controle sobre o código.
Programação Orientada a Aspectos em PHP
INÍCIO COPIOU COLOU
FUNCIONOU? BELEZA!
FERROU!
SIM
NÃO
POTE:PROGRAMAÇÃOORIENTADA A TENTATIVA
TENTA DE NOVO!
Programação Orientada a Aspectos em PHP
JAVASCRIPT
Quando você perde o controle sobre o código, você perde tempo. E quando você perde tempo certamente não ganha dinheiro.
Programação Orientada a Aspectos em PHP
JAVASCRIPT
E onde entra o Dojo Toolkit?
O que é e por que deveríamos usá-lo?
O que é?
O que é Dojo Toolkit?● É uma “caixa de ferramentas” livre e aberta para
DHTML escrita em Javascript.
● Ou seja, é um conjunto de bibliotecas Javascript.● Pretende resolver problemas históricos com DHTML.
● Como a incompatibilidade entre browsers.● Permite que você atribua capacidades dinâmicas em
páginas Web facilmente.
● Widgets● Animações
Por que Dojo Toolkit?● Você pode usar Dojo para tornar suas aplicações Web
mais usáveis, responsivas e funcionais.
● Ele suporta AJAX.● Dojo provê muitas facilidades
● Ele esconde o processamento de XMLHttpRequest● Ele manipula as incompatibilidades entre browsers
● Dojo tem uma comunidade de desenvolvedores forte
Arquitetura
Bibliotecas Dojo Toolkit
core
base
dijit dojoxSeus
widgets
util
Dojo Base
<html><head><title>Hello, Dojo</title><!-- load Dojo from [webroot]/js: --><script type="text/javascript" src="/js/dojo/dojo.js"></script></head><body></body></html>
Dojo Base
<html><head><title>Hello, Dojo</title><!-- load Dojo from Google --><script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script></head><body></body></html>
Dojo Base
<html><head><title>Hello, Dojo</title><!-- load Dojo from Yandex --><script src="http://yandex.st/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script></head><body></body></html>
dojo.js: 31k de diversão● Ajax: dojo.xhr, dojo.xhrGet, dojo.xhrPost ...
● Eventos: normalization, keys, Objects or Nodes
● DOM/CSS: dojo.byId, dojo.style, dojo.place, dojo.attr
● Animação: dojo.fadeIn/Out, dojo.animateProperty
● Query/NodeList: Seletores CSS3 ou todas as anteriores.
● Javascript Avançado: dojo.delegate (OMAC), .hitch (IoC?), .partial (mutant signature?), .exists ...
● dojo.declare
● Javascript Nativo: forEach, map, filter, some, every, indexOf ...
● Browser Sniffing: dojo.isIE < 7, isFF, isWebKit ...
Padrões em Dojo
// style and add class to a node:dojo.addClass(“someNode”, “someClass”);dojo.style(“someNode”, { opacity:0.5, lineHeight:”1.3em” });dojo.attr(“someNode”, { id:”newId” });// or chaineddojo.query(“#someNode”).addClass(“someClass”).attr({ id:”newId” }).style({ opacity:0.5, lineHeight:”1.3em” })// connect:dojo.connect(dojo.byId(“foo”), “onclick”, function(e){...});// or connect:dojo.query(“#foo”).connect(“onclick”, function(e){ ... });// or sugar:dojo.query(“#foo”).onclick(function(e){ ... });
OO Simples, Herança Simulada
dojo.declare(“some.Person”, null, {name: ”default”,constructor: function(args){dojo.mixin(this, args);}});dojo.declare(“some.Employee”, some.Person, {employeeId: 0});var bob = new some.Person({ name:”Bob Bobson” });var joy = new some.Employee({ name:”Joy”, employeeId:24 });
E mais...
●Localizado:● dojo.require(“dojo.io.script”);● dojo.require(“my.Widget”);
●Robusto:● dojo.registerModulePath(“external”, “/external/js”);● dojo.require(“external.Thinger”);
●Fácil:● dojo.provide(“my.Widget”);
●Pronto: dojo.ready, dojo.addOnLoad, .addOnUnLoad ...
Sistema de pacotes == código modularTrabalhe com Dojo e customize seu código
Dojo Core
●Use à vontate (self-service) – tudo é aditivo.●Sem rastreamento de dependências – apenas dojo.require(“algumacoisa”)●Poucas, se existem, “regras”●Escala: Cresça de acordo com suas necessidades
Viva uma vida mais feliz com require
●dojo.data – API unificada de dados●dojo.dnd - API de Drag and Drop●dojo.fx / dojo.NodeList-fx – FX avançado adicional●dojo.i18n – Ferramentas de internacionalização●dojo.string, dojo.date, dojo.regexp – utilitários comuns●dojo.io.iframe, dojo.io.script, dojo.rpc - IO avançada●... mais: dojo.behavior, dojo.html, dojo.gears,●dojo.cookie, dojo.parser, dojo.jaxer ...
Dijit – The Dojo Widget Framework
●Comportamento compartimentalizado utilizando marcação existente (como <div></div>)●Totalmente dinâmico. Componentes reutilizáveis baseados em templates●Estenda os existentes ou crie os seus ...
Inclui uma suíte de widgets
●Layouts – Painéis, Caixas...●Formulário - Validação e mais ...●Editor WYSIWYG●Árvore, Sliders, Barra de progresso, ...
Inclui uma suíte de widgets
●Layouts – Painéis, Caixas...●Formulário - Validação e mais ...●Editor WYSIWYG●Árvore, Sliders, Barra de progresso, ...
Configurar é fácil
<html><head><title>index.html</title><!-- some css --><link rel="stylesheet" href="/fwks/js/dijit/themes/tundra/tundra.css"><script type="text/javascript" src="/fwks/js/dojo/dojo.js"></script></head><body class="tundra"></body></html>
A instanciação é flexível
<script type="text/javascript">dojo.ready(function(){//load the resource:dojo.require("dijit.dijit"); // Base Dijitdojo.require("dijit.Dialog"); // Dialog Code// create programatically:var myDialog = new dijit.Dialog({title:"Login",}, "formArea");// access the instance:dijit.byId("formArea").show(); // myDialog.show();});</script>
CDS: CSS Driven Skinning
Três temas completos:●Tundra●Soria●NihiloComplementamente customizáveis
Suporte a internacionalização
Suporte a acessibilidade
● Suporte a leitor de tela● Suporte a modo de alto contraste
● Navegação por teclado● … com qualquer Dijit
Mais informações
www.dojotoolkit.org
Referências● Dojo: 0 to Production. Peter Higgins. SpringOne Americas. 2008
● Introduction to Dojo Toolkit. Sun Microsystems.
www.fgsl.eti.br@fgsl
Recommended