Desenvolvendo com Dojo Toolkit

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


Brevíssima Introdução ao Javascript


Javascript


Javascript

Programação Orientada a Aspectos em PHP

JAVASCRIPT

<script type="text/javascript"></script>


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.


v
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.


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.


JAVASCRIPT

FATO. Existe muito código Javascript
disponível.


JAVASCRIPT

É fácil copiar e colar.
E também é muito fácil perder o
controle sobre o código.



INÍCIO COPIOU COLOU

SIM
FUNCIONOU? BELEZA!
TENTA DE NOVO!

NÃO

POTE:
PROGRAMAÇÃO FERROU!
ORIENTADA A
TENTATIVA

JAVASCRIPT

Quando você perde o controle sobre o
código, você perde tempo. E quando
você perde tempo certamente não
ganha dinheiro.


JAVASCRIPT

E onde entra o Dojo Toolkit?

O que é e por que deveríamos usá-lo?


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

Bibliotecas Dojo Toolkit

Seus
dijit dojox
widgets

core util

base

Dojo Base

<html>
<head>
<title>Hello, Dojo</title>

<script type="text/javascript"
src="/js/dojo/dojo.js">
</script>
</head>
<body>
</body>
</html>

Dojo Base

<html>
<head>

<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/doj
o/dojo.xd.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

Dojo Base

<html>
<head>

<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 chained
dojo.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 modular
Trabalhe 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, ...

Configurar é fácil

<html>
<head>
<title>index.html</title>

<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 Dijit
dojo.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

●Nihilo

Complementamente 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

Desenvolvendo com Dojo Toolkit

Mais conteúdo relacionado

Mais procurados

Semelhante a Desenvolvendo com Dojo Toolkit

Mais de Flávio Lisboa

Desenvolvendo com Dojo Toolkit