seminario jquery, html5 y wicket
DESCRIPTION
TRANSCRIPT
Seminario #1jQueryHTML 5
Apache Wicket
Adrià Solé OrritRicardo Herrera Gil
Índice
jQuery1. ¿Qué es?2. Instalación3. Introducción a Javascript4. jQuery
○ Sintaxis
○ Eventos
○ Manipulación del DOM
○ Efectos
○ Ajax
HTML 51. ¿Qué es?2. Nuevas características
○ Drag & Drop○ Geolocalización○ Vídeo & Audio○ WebSockets
1
Índice
Apache 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
jQueryWrite less, do more
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
2. Instalación
● La librería jQuery es un archivo JavaScript.○ Para utilizarla, tenemos que referenciarla desde el documento
HTML:
● Puede descargarse desde la web oficial o bien incluirla a través del repositorio de Google o Microsoft:
5
<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script></head>
<head><script src="jquery.js"></script></head>
3. Introducción a JavaScript
● Declaración de variables:
● Declaración de funciones:
● Declaración de objetos
6
/* No se especifica el tipo*/
var myInt = 1;var myString = 'Hola mundo';var myArray = [ 'Hola', 'mundo' ];
var myFunction = function(saludo, persona) { var texto = saludo + ', ' + persona; return texto;};
var myObject = { myName: 'Ricardo', sayHello: function() { var texto = 'Hola me llamo ' + this.myName; return texto; }};
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
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
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.
9
<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>
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
4. jQuery: manipulación del DOM
11
<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>
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
4. jQuery: efectos
13
<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>
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
4. jQuery: AJAX
15
<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>
HTML 5The new HTML Standard
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
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
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
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
2. Drag & Drop
● Hacer que un elemento sea arrastrable.
● Definir lo que se va a arrastrar.○ dataTransfer.setData() establece el tipo de datos y el valor del
elemento arrastrable.
● Definir dónde se va a soltar.● Soltar.
21
<img draggable="true">
function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}
event.preventDefault()
function drop(ev){ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}
2. Drag & Drop: ejemplo
22
<!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>
2. Geolocalización
● El método getCurrentPosition() devuelve la posición del usuario.○ En este ejemplo se devuelven las coordenadas geográficas.
23
<!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>
2. Vídeo & Audio
● Sin plugins externos con los tags <video> y <audio>.○ Vídeo
○ Audio
24
<!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>
<!DOCTYPE html><html><body>
<audio controls="controls"> <source src="horse.mp3" type="audio/mpeg"></audio>
</body></html>
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
Apache WicketA Java web application framework
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
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
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
4. ¿Cómo crear un proyecto?
● New Project > Maven Project● Se recomienda crearlo a partir del arquetipo.
30
4. ¿Cómo crear un proyecto?
● Seleccionar arquetipo de la comunidad Apache Wicket.
31
4. ¿Cómo crear un proyecto?
32
5. Ejemplos: Hello World
33
5. Ejemplos: Link Counter
34
5. Ejemplo: Link Counter (Ajax)
35
5. Ejemplo: Bus
36
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);
}@Overridepublic void onEvent(IEvent <?>event){
super.onEvent(event);if (event.getPayload() instanceof AjaxRequestTarget){
AjaxRequestTarget target = (AjaxRequestTarget) event.getPayload();target.add(this);
}}
}}
The endEnjoy it!
Referencias
38
● 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.