Desenvolvendo com Dojo Toolkit

Desenvolvendo com Dojo Toolkit

Palestrante: Flávio Gomes da Silva Lisboa


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


Programação Orientada a Aspectos em PHP

Javascript

Javascript



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.


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


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

FUNCIONOU? BELEZA!

FERROU!

SIM

NÃO

POTE:PROGRAMAÇÃOORIENTADA A TENTATIVA

TENTA DE NOVO!


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 é?

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><script type="text/javascript" src="/js/dojo/dojo.js"></script></head><body></body></html>

Dojo Base

<html><head><title>Hello, Dojo</title><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><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, ...

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

http://www.fgsl.eti.br/

Desenvolvendo com Dojo Toolkit

Documents

Transcript of Desenvolvendo com Dojo Toolkit