Dojo toolkit + JEE  Generando las aplicaciones para la web2.0 Alex Fuentes  http://www.jroller.com/afuentes
Agenda <ul><li>Que es Dojo Toolkit </li></ul><ul><li>Porque nace Dojo Toolkit </li></ul><ul><li>Caracteristicas de Dojo To...
Que es Dojo Toolkit ? <ul><li>Proyecto Open Source  nace el 2004 (  AFL y BSD ) </li></ul><ul><li>Libreria modular constru...
Porque nace Dojo Toolkit ? <ul><li>Un aumento de la demanda por aplicaciones  web con mejores caracteristicas tanto de dis...
Porque nace Dojo Toolkit ? <ul><li>Mejorar las experiencias de los usuarios </li></ul>
Caracteristicas Dojo Toolkit ? <ul><li>Construido por paquetes que son utilizados ondemand </li></ul><ul><li>Manipulacion ...
Estructura de Dojo Toolkit <ul><li>El proyecto esta dividido en tres grandes paquetes  </li></ul><ul><ul><li>Dijit : Todos...
Estructura de Dojo Toolkit ( Taller ) <ul><li>Objetivos </li></ul><ul><ul><li>Visualizar la estructura de Dojo Toolkit  </...
Funcionalidades de Dojo Toolkit <ul><li>Sitemas de Paquetes </li></ul>dojo Package System/Bootstrap Language Utilities Eve...
Funcionalidades  de Dojo Toolkit <ul><li>Añadir paquetes  </li></ul><ul><li>dojo.require(&quot;package.*&quot;); </li></ul...
Funcionalidades  de Dojo Toolkit <ul><li>El  Objeto  dojo  </li></ul><ul><li>dojo.byId() : Funcion que retorna el nodo del...
Funcionalidades  de Dojo Toolkit <ul><li>El Objeto dijit </li></ul><ul><li>dijit.byId : Funcion que retorna algun elemento...
Funcionalidades  de Dojo Toolkit <ul><li>Otros Package  </li></ul><ul><li>dojo.back </li></ul><ul><ul><li>Browser history ...
Integracion de Dojo Toolkit <ul><li>< html > </li></ul><ul><li>... </li></ul><ul><li>< script </li></ul><ul><li>type=&quot...
Integracion de Dojo Toolkit <ul><li>Parametros variable dfConfig </li></ul><ul><ul><li>ParserOnLoad : variable que permite...
Intengracion de Dojo Toolkit <ul><li>Definicion del estilo para los widget </li></ul><ul><li><style type=&quot;text/css&qu...
Integracion de Dojo Toolkit <ul><li>Funcion que permite generar comportamientos cuando el toolkit  a completado el proceso...
FireBug – Herramienta de Debug  <ul><li>Herramienta que permite el Debug y el seguimiento de aplicaciones creadas con Dojo...
FireBug – Herramienta de Debug  <ul><li>Posee una consola para monitorear el logging de la aplicación. </li></ul><ul><li><...
Integracion con GroovyServlet dojo.xhrGet
Integracion con Spring MVC ( Taller ) dojo.xhrGet
Recursos <ul><li>Dojo Toolkit  </li></ul><ul><ul><li>http://www.dojotoolkit.com/ </li></ul></ul><ul><li>Dojo Campus </li><...
Gracias! http://www.jroller.com/afuentes
Upcoming SlideShare
Loading in …5
×

Oc2008 Dojo Y Jee

1,975 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,975
On SlideShare
0
From Embeds
0
Number of Embeds
126
Actions
Shares
0
Downloads
36
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Oc2008 Dojo Y Jee

  1. 1. Dojo toolkit + JEE Generando las aplicaciones para la web2.0 Alex Fuentes http://www.jroller.com/afuentes
  2. 2. Agenda <ul><li>Que es Dojo Toolkit </li></ul><ul><li>Porque nace Dojo Toolkit </li></ul><ul><li>Caracteristicas de Dojo Toolkit </li></ul><ul><li>Estructura de Dojo Toolkit </li></ul><ul><li>Funcionalidaes de Dojo Toolkit </li></ul><ul><li>Integracion de Dojo Toolkit </li></ul><ul><li>FireBug -Herramienta de Debug </li></ul><ul><li>Integracion con GroovyServlet </li></ul><ul><li>Integracion con Spring MVC </li></ul><ul><li>Recursos </li></ul>
  3. 3. Que es Dojo Toolkit ? <ul><li>Proyecto Open Source nace el 2004 ( AFL y BSD ) </li></ul><ul><li>Libreria modular construida en JavaScript y con soporte Ajax. </li></ul>
  4. 4. Porque nace Dojo Toolkit ? <ul><li>Un aumento de la demanda por aplicaciones web con mejores caracteristicas tanto de diseño como de usabilidad </li></ul><ul><li>Incompatibilidades en el cumplimiento de los estandares por parte de los Navegadores </li></ul><ul><li>El surgimiento de AJAX genera nuevos desafios para los desarrolladores y diseñadores </li></ul><ul><li>La web 2.0 genera nuevas oportunidades tanto para el desarrollo de servicios como para la evolucion de las tecnologias. </li></ul>
  5. 5. Porque nace Dojo Toolkit ? <ul><li>Mejorar las experiencias de los usuarios </li></ul>
  6. 6. Caracteristicas Dojo Toolkit ? <ul><li>Construido por paquetes que son utilizados ondemand </li></ul><ul><li>Manipulacion de DOM ( Document Object Model ) </li></ul><ul><li>Animaciones </li></ul><ul><li>Apis para el manejo de Ajax y Cometd </li></ul><ul><li>Manejo de Eventos </li></ul><ul><li>Drag and Drop </li></ul><ul><li>Conjunto de Componedentes Reutilizables ( widgets ) </li></ul><ul><li>Soporte nativo para 2D and 3D vector graphics </li></ul><ul><li>Graficos </li></ul><ul><li>Conjunto de Apis utilitarias </li></ul>
  7. 7. Estructura de Dojo Toolkit <ul><li>El proyecto esta dividido en tres grandes paquetes </li></ul><ul><ul><li>Dijit : Todos los widget o componentes reutilizables que permiten la interacción con el usuario </li></ul></ul><ul><ul><li>Dojo : Core de framework </li></ul></ul><ul><ul><li>Dojox: Dojo Experimental y de otros proveedores </li></ul></ul><ul><ul><li>Util : Librerias utilitarias del Framework </li></ul></ul>
  8. 8. Estructura de Dojo Toolkit ( Taller ) <ul><li>Objetivos </li></ul><ul><ul><li>Visualizar la estructura de Dojo Toolkit </li></ul></ul><ul><ul><ul><li>http://archive.dojotoolkit.org/nightly/ </li></ul></ul></ul><ul><ul><li>Navegar por modulos dijit </li></ul></ul><ul><ul><ul><li>Visualizar ejemplos /test </li></ul></ul></ul><ul><ul><li>Navegar por modulo dojo </li></ul></ul><ul><ul><ul><li>Visualizar ejemplos /test </li></ul></ul></ul><ul><ul><li>Navegar por modulo dojox </li></ul></ul><ul><ul><ul><li>Visualizar ejemplos /test </li></ul></ul></ul>
  9. 9. Funcionalidades de Dojo Toolkit <ul><li>Sitemas de Paquetes </li></ul>dojo Package System/Bootstrap Language Utilities Event System Widget System AJAX Utilities Custom Widget Dojo esta organizado en paquetes igual como esta estruturado java
  10. 10. Funcionalidades de Dojo Toolkit <ul><li>Añadir paquetes </li></ul><ul><li>dojo.require(&quot;package.*&quot;); </li></ul><ul><ul><li>Permite la definicion de las librerias que seran cargadas en forma dinamica. Es similar al keyword import de java </li></ul></ul><ul><ul><li>Pueden ser definidos package adicionales </li></ul></ul><ul><ul><li>Permite el uso de caracteres como el * , para bajar un conjunto de archivos js , en donde esta definido el componente a utilizar. </li></ul></ul>
  11. 11. Funcionalidades de Dojo Toolkit <ul><li>El Objeto dojo </li></ul><ul><li>dojo.byId() : Funcion que retorna el nodo del objeto DOM. </li></ul><ul><li>dojo.require() : Funcion que permite la carga dinamica de package </li></ul><ul><li>dojo.body() : Me retorno el objeto body del documento actual </li></ul><ul><li>dojo.fadeIn() : Permite la animacion del algun elemento dentro del DOM </li></ul><ul><li>dojo.xhr() : Permite el soporte para la comunicacion AJAX </li></ul><ul><li>dojo.xhrGet() : Envia un requerimiento HTTP GET al server </li></ul><ul><li>dojo.xhrPost() : Envia un requerimiento HTTP POST al server </li></ul><ul><li>dojo.version : Propiedad que me indica la version </li></ul><ul><li>Etc .. </li></ul>
  12. 12. Funcionalidades de Dojo Toolkit <ul><li>El Objeto dijit </li></ul><ul><li>dijit.byId : Funcion que retorna algun elemento del tipo dijit que este en el DOM. </li></ul><ul><li>dijit.getViewport() :Funcion que retorna la dimensiones del area de visibilidad del browser. </li></ul>
  13. 13. Funcionalidades de Dojo Toolkit <ul><li>Otros Package </li></ul><ul><li>dojo.back </li></ul><ul><ul><li>Browser history management resources </li></ul></ul><ul><li>dojo.dnd </li></ul><ul><ul><li>Drag and Drop resources </li></ul></ul><ul><li>dojo.fx </li></ul><ul><li>Effects library on top of Base animations </li></ul><ul><li>dojo.io </li></ul><ul><ul><li>Additional I/O transports (Ajax) </li></ul></ul><ul><li>dojo.parser </li></ul><ul><ul><li>The Dom/Widget parsing package </li></ul></ul>
  14. 14. Integracion de Dojo Toolkit <ul><li>< html > </li></ul><ul><li>... </li></ul><ul><li>< script </li></ul><ul><li>type=&quot;text/javascript&quot; </li></ul><ul><li>src=&quot;http://localhost:8080/dojo-release-1.1.0/dojo/dojo.js&quot; </li></ul><ul><li>djConfig=&quot;isDebug: false, parseOnLoad: true&quot; </li></ul><ul><li>></ script > </li></ul><ul><li></ html > </li></ul>
  15. 15. Integracion de Dojo Toolkit <ul><li>Parametros variable dfConfig </li></ul><ul><ul><li>ParserOnLoad : variable que permite el parser del DOM Tree , para utilizar el atributo dojoType, para la definicion de widget </li></ul></ul><ul><ul><li>isDebug : Activa el logging en la aplicacion ( FireBug ) </li></ul></ul>
  16. 16. Intengracion de Dojo Toolkit <ul><li>Definicion del estilo para los widget </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>@import &quot;http://localhost:8080/dojo-release-1.1.0/dijit/themes/tundra/tundra.css&quot;; </li></ul><ul><li>@import &quot;http://localhost:8080/dojo-release-1.1.0/dojo/resources/dojo.css&quot;; </li></ul><ul><li></style> </li></ul><ul><li><body class=&quot;tundra&quot; > </li></ul>
  17. 17. Integracion de Dojo Toolkit <ul><li>Funcion que permite generar comportamientos cuando el toolkit a completado el proceso de carga. </li></ul><ul><li>< script > </li></ul><ul><li>dojo.addOnLoad(function() { </li></ul><ul><li>// logica de carga </li></ul><ul><li>}); </li></ul><ul><li></ script > </li></ul>
  18. 18. FireBug – Herramienta de Debug <ul><li>Herramienta que permite el Debug y el seguimiento de aplicaciones creadas con Dojo </li></ul><ul><li>Sitio oficial http://getfirebug.com/ </li></ul>
  19. 19. FireBug – Herramienta de Debug <ul><li>Posee una consola para monitorear el logging de la aplicación. </li></ul><ul><li>< script > </li></ul><ul><li>... </li></ul><ul><li>console.debug(“ log.msg ”)‏ </li></ul><ul><li>console.log(“ log.msg ”)‏ </li></ul><ul><li>console.info(“ log.msg ”)‏ </li></ul><ul><li>console.warn(“ log.msg ”)‏ </li></ul><ul><li>... </li></ul><ul><li></ script > </li></ul>
  20. 20. Integracion con GroovyServlet dojo.xhrGet
  21. 21. Integracion con Spring MVC ( Taller ) dojo.xhrGet
  22. 22. Recursos <ul><li>Dojo Toolkit </li></ul><ul><ul><li>http://www.dojotoolkit.com/ </li></ul></ul><ul><li>Dojo Campus </li></ul><ul><ul><li>http://www.dojocampus.org/ </li></ul></ul><ul><li>Noticias de mundo ajax </li></ul><ul><ul><li>http://www.ajaxian.com </li></ul></ul><ul><li>Sitepen </li></ul><ul><ul><li>http://www.sitepen.com </li></ul></ul>
  23. 23. Gracias! http://www.jroller.com/afuentes

×