Seminario jquery, html5 y wicket

1,331 views

Published on

  • Be the first to comment

Seminario jquery, html5 y wicket

  1. 1. Seminario #1 jQuery HTML 5 Apache WicketAdrià Solé OrritRicardo Herrera Gil
  2. 2. ÍndicejQuery HTML 51. ¿Qué es? 1. ¿Qué es?2. Instalación 2. Nuevas características3. Introducción a Javascript ○ Drag & Drop ○ Geolocalización4. jQuery ○ Vídeo & Audio ○ Sintaxis ○ WebSockets ○ Eventos ○ Manipulación del DOM ○ Efectos ○ Ajax 1
  3. 3. ÍndiceApache Wicket1. Introducción2. El "Component triad" de Wicket3. Requisitos4. ¿Cómo crear un proyecto?5. Ejemplos: ○ Hello World ○ Link Counter ○ Link Counter (Ajax) ○ Bus 2
  4. 4. jQueryWrite less, do more
  5. 5. 1. ¿Qué es? ● Librería que facilita el uso de JavaScript. ○ JavaScript: lenguaje interpretado diseñado con el objetivo de añadir interactividad a una página web. ● El código se incrusta en el documento HTML y es ejecutado por el navegador. ● Características principales: ○ Gestión de eventos HTML. ○ Manipulación de documentos HTML. ○ Manipulación de estilos (CSS), efectos y animaciones. ○ AJAX ● Alto grado de compatibilidad con navegadores de escritorio y móviles. 4
  6. 6. 2. Instalación ● La librería jQuery es un archivo JavaScript. ○ Para utilizarla, tenemos que referenciarla desde el documento HTML: <head> <script src="jquery.js"></script> </head> ● Puede descargarse desde la web oficial o bien incluirla a través del repositorio de Google o Microsoft: <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> </head> 5
  7. 7. 3. Introducción a JavaScript ● Declaración de variables: /* No se especifica el tipo*/ var myInt = 1; var myString = Hola mundo; var myArray = [ Hola, mundo ]; ● Declaración de funciones: var myFunction = function(saludo, persona) { var texto = saludo + , + persona; return texto; }; ● Declaración de objetos var myObject = { myName: Ricardo, sayHello: function() { var texto = Hola me llamo + this.myName; return texto; } }; 6
  8. 8. 3. Introducción a JavaScript<html> <body> <p>¿Cómo se llaman?</p> <button onclick="mostrarNombres()">Solución</button> <p id="demo"></p> <script> function mostrarNombres(){ var myObject1 = { nombre: "Ricardo", sayHello: function() { var texto = Mi nombre es + this.nombre + .<br>; return texto; } }; var myObject2 = { nombre: "Adrià", sayHello: function() { var texto = Mi nombre es + this.nombre + .<br>; return texto; } }; var seminaristas = [ myObject1, myObject2 ]; var salida = ""; for (var i = 0, limit = 2; i < limit; i++) { salida = salida + seminaristas[i].sayHello(); } document.getElementById("demo").innerHTML = salida ; } </script> </body></html> 7
  9. 9. 4. jQuery: sintaxis ● $(selector).action() ○ $: indicador de comando jQuery ○ (selector): permite seleccionar y manipular elementos HTML. ○ action(): acción jQuery a realizar en el elemento. ● Ejemplos: ○ $(this).hide(): oculta el elemento actual. ○ $("p").hide(): oculta todos los elementos con el tag <p>. ○ $(".test").hide(): oculta todos los elementos con class="test". ○ $("#test").hide(): oculta el elemento con id="test". 8
  10. 10. 4. jQuery: eventos ● La interacción del usuario con el navegador genera eventos. ○ jQuery ofrece un conjunto de métodos para su gestión. ● El evento más conocido es el Document Ready y se genera cuando se ha cargado el documento HTML: ○ Es recomendable el uso del método ready() para evitar la ejecución de código hasta que el documento esté listo. <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function(){ // jQuery methods go here... }); }); </script> </head> <body></body> </html> 9
  11. 11. 4. jQuery: manipulación del DOM ● jQuery cuenta con métodos para manipular y modificar los elementos del documento HTML: ○ Establecer o devolver el valor de un elemento: text(), html(), val(). ○ Añadir contenido nuevo: append(), before(), prepend(), after() ○ Eliminar elementos o contenido existente: empty(), remove(). ○ Manipulación de estilos: addClass(), removeClass(), toggleClass(). 10
  12. 12. 4. jQuery: manipulación del DOM <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#box").click(function(){ $("body").prepend("<div id=div1></div>"); $("#div1").addClass("caja");}); $("#text").click(function(){ $("#div1").append("<p>Hola mundo!</p>");}); $("#vaciar").click(function(){ $("#div1").empty();}); $("#borrar").click(function(){ $("#div1").remove();}); }); </script> <style type="text/css"> .caja{ height:100px; width:300px; border:1px solid black; background-color:yellow; } </style> </head> <body> <button id="box">Añadir caja</button> <button id="text">Añadir texto</button> <button id="vaciar">Vaciar caja</button> <button id="borrar">Borrar caja</button> </body> </html> 11
  13. 13. 4. jQuery: efectos ● jQuery proporciona varios métodos para animar una página web. ● Los métodos mas conocidos son: ○ show() & hide(): muestran y ocultan un elemento. ○ fadeIn() & fadeOut(): cambian la opacidad de un elemento de forma animada. ○ slideDown() & slideUp(): pliegan y despliegan un elemento de forma animada ○ slideToggle(): alterna entre los métodos slideDown() y slideUP(). 12
  14. 14. 4. jQuery: efectos<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); }); </script> <style type="text/css"> #panel,#flip { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } #panel { padding:50px; display:none; } </style> </head> <body> <div id="flip">Click me!</div> <div id="panel">Hola Mundo!</div> </body></html> 13
  15. 15. 4. jQuery: AJAX ● AJAX permite actualizar (asíncronamente) partes de la web sin tener que recargarla por completo. ● En la librería jQuery existen métodos AJAX que permiten solicitar documentos de texto, HTML, XML o JSON a un servidor remoto. ● El método principal empleado para realizar peticiones AJAX es el $.ajax(settings). ○ settings hace referencia a un conjunto de parejas clave/valor que configuran la petición. 14
  16. 16. 4. jQuery: AJAX <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $.ajax({ url: "http://localhost/test.html", success: function(result){ $("div").html(result); } }); }); }); </script> </head> <body> <div><h2>AJAX va a cambiar este texto</h2></div> <button>Cambiar</button> </body> </html> 15
  17. 17. HTML 5The new HTML Standard
  18. 18. 1. ¿Qué es? ● Será el nuevo estándar de HTML. ○ JavaScript: lenguaje interpretado diseñado con el objetivo de añadir interactividad a una página web. ● El código se incrusta en el documento HTML y es ejecutado por el navegador. ● Características principales: ○ Nueva características basadas en HTML,CSS,DOM,Javascript. ○ Reduce la necesidad de plugins externos (como Flash). ○ Mejor gestión de errores. ○ Más etiquetas para reducir los scripts. ● La mayoría de navegadores soportan muchas de sus etiquetas y APIs: ○ http://html5test.com/ 17
  19. 19. 2. Nuevas características ● Nuevos elementos ○ Semánticos/Estructurales: <time>,<figure>, etc. ○ Elementos media: <audio>,<video>,<track>, etc. ○ Elemento <canvas>. ○ Elementos de formulario: <datalist>,<keygen>,<output>. ● Geolocalización ○ Obtener la posición geográfica del usuario (con su permiso). ● Drag&Drop ○ Coger un objeto y dejarlo en una localización distinta. ● Canvas ○ Dibujar gráficos desde la página web. 18
  20. 20. 2. Nuevas características ● Vídeo & Audio ○ Con la etiqueta <video> y <audio> nos ahorramos la necesidad de plugins externos para incrustar video/audio en la web. ● Almacenamiento web ○ Páginas web pueden guardar los datos de manera local en el navegador del usuario. ● SVG ○ Soporte para Scalable Vector Graphics (gráficos definidos en formato XML). ● Aplicación cache ○ La aplicación web se almacena en caché, accesible sin conexión a internet cuando ya ha sido almacenada en caché. 19
  21. 21. 2. Nuevas características ● Web Worker ○ Javascript en background. ● Server-Sent Events ○ La página web recibe actualizaciones automáticas del servidor. ○ Se requiere un servidor capaz de enviar actualizaciones de datos. 20
  22. 22. 2. Drag & Drop ● Hacer que un elemento sea arrastrable. <img draggable="true"> ● Definir lo que se va a arrastrar. ○ dataTransfer.setData() establece el tipo de datos y el valor del elemento arrastrable. function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); } ● Definir dónde se va a soltar. event.preventDefault() ● Soltar. function drop(ev){ ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } 21
  23. 23. 2. Drag & Drop: ejemplo<!DOCTYPE HTML><html><head><style type="text/css">#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}</style><script>function allowDrop(ev) { ev.preventDefault(); }function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id);}function drop(ev){ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}</script> </head> <body><p>Drag the image into the rectangle:</p><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br><img id="drag1" src=" img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"></body></html> 22
  24. 24. 2. Geolocalización ● El método getCurrentPosition() devuelve la posición del usuario. ○ En este ejemplo se devuelven las coordenadas geográficas. <!DOCTYPE html> <html> <body> <p id="demo">Click the button to get your coordinates:</p> <button onclick="getLocation()">Try It</button> <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation){ navigator.geolocation.getCurrentPosition(showPosition); } else{ x.innerHTML="Geolocation is not supported by this browser."; } } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script> </body> </html> 23
  25. 25. 2. Vídeo & Audio ● Sin plugins externos con los tags <video> y <audio>. ○ Vídeo <!DOCTYPE html> <html> <body> <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4"><source src="movie.ogg" </video> </body> </html> ○ Audio <!DOCTYPE html> <html> <body> <audio controls="controls"> <source src="horse.mp3" type="audio/mpeg"> </audio> </body> </html> 24
  26. 26. 2. WebSockets <!DOCTYPE HTML> <html> <body> <script> if ("WebSocket" in window) { var ws = new WebSocket("ws://echo.websocket.org"); //servidor que hace de ECHO ws.onopen = function() { /* Web Socket está abierto. Se puede enviar ldatos con el método send().*/ ws.send("Hola mundo"); }; ws.onmessage = function (evt) { var received_msg = evt.data; alert(evt.data); }; ws.onclose = function() { /* websocket cerrado.*/alert("WebSocket Closed!"); }; }else{ /* el navegador no soporta Websocket */ alert("Websocket is not supported in your browser"); } </script> </body> </html> 25
  27. 27. Apache WicketA Java web application framework
  28. 28. 1. Introducción ● Framework para diseño de aplicaciones web: ○ Orientado a componentes. ○ Implementación del diseño mediante plantillas de HTML puro ○ Implementación del comportamiento a través de Java: ● Stateful programming. ● Componentes vs. Objetos ○ Ambos son módulos de software reusables. ○ Componente: ● Encapsulan procesos: funcionalidades end-user. ● Sólo requieren una configuración inicial para comenzar a funcionar. ○ Objeto: ● Orientados a la encapsulación de datos. ● Building-blocks: no hacen mucho por separado. 27
  29. 29. 2. El "Component triad" de Wicket ● HTML markup: ○ Contiene la mayor parte de la información que se muestra al usuario. ○ Relación tag-componente a través del atributo wicket:id. ● Java components: cómo y cuándo se mostrarán ciertos datos. ● Model: qué datos obtener y dónde conseguirlos. 28
  30. 30. 3. Requisitos ● Apache Tomcat 7 ● Eclipse IDE for Java EE Developers ● Plugin Maven para Eclipse: m2eclipse ○ Help > Install New Software: ● Add: http://download.eclipse.org/technology/m2e/releases 29
  31. 31. 4. ¿Cómo crear un proyecto? ● New Project > Maven Project ● Se recomienda crearlo a partir del arquetipo. 30
  32. 32. 4. ¿Cómo crear un proyecto? ● Seleccionar arquetipo de la comunidad Apache Wicket. 31
  33. 33. 4. ¿Cómo crear un proyecto? 32
  34. 34. 5. Ejemplos: Hello World 33
  35. 35. 5. Ejemplos: Link Counter 34
  36. 36. 5. Ejemplo: Link Counter (Ajax) 35
  37. 37. 5. Ejemplo: Bus public class HomePage extends WebPage { private int counter=0; public HomePage() { add(new AjaxFallbackLink<Void>("linkAjax2"){ public void onClick(AjaxRequestTarget target){ counter++; if (target!=null) send(getPage(),Broadcast.BREADTH,target); } }); add(new CountLabel("counter",new PropertyModel<Integer>(this,"counter"))); add(new CountLabel("count",new PropertyModel<Integer>(this,"counter"))); } public class CountLabel extends Label{ public CountLabel(String id, IModel <Integer> model){ super(id,model); setOutputMarkupId(true); } @Override public void onEvent(IEvent <?>event){ super.onEvent(event); if (event.getPayload() instanceof AjaxRequestTarget){ AjaxRequestTarget target = (AjaxRequestTarget) event.getPayload(); target.add(this); } } } } 36
  38. 38. The end Enjoy it!
  39. 39. Referencias ● w3schools. "jQuery Tutorial w3schools" [en línea]. http://www.w3schools.com/jquery/ [consulta 9 octubre 2012] ● Rebecca Murphey. jQuery Fundamentals. [en línea]. http://jqfundamentals.com [consulta 9 octubre 2012] ● w3schools: "HTML5 Tutorial w3schools" [en línea] http://www.w3schools.com/html5/ [consulta 9 octubre 2012] ● Martijn Dashorst, Eelco Hillenius. Wicket in action. Greenwich: CT, 2009. 38

×