3. 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
10. 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
11. 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.
Programação Orientada a Aspectos em PHP
12. 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
14. 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
15. Programação Orientada a Aspectos em PHP
INÍCIO COPIOU COLOU
SIM
FUNCIONOU? BELEZA!
TENTA DE NOVO!
NÃO
POTE:
PROGRAMAÇÃO FERROU!
ORIENTADA A
TENTATIVA
16. 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
17. JAVASCRIPT
E onde entra o Dojo Toolkit?
O que é e por que deveríamos usá-lo?
Programação Orientada a Aspectos em PHP
19. 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
20. 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
27. 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){ ... });
28. 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 });
29. 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
30. 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
31. 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 ...
32. 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 ...
33. Inclui uma suíte de widgets
●Layouts – Painéis, Caixas...
●Formulário - Validação e mais ...
●Editor WYSIWYG
●Árvore, Sliders, Barra de progresso, ...
34. Inclui uma suíte de widgets
●Layouts – Painéis, Caixas...
●Formulário - Validação e mais ...
●Editor WYSIWYG
●Árvore, Sliders, Barra de progresso, ...