Seminario jquery, html5 y wicket

Seminario #1
jQuery
HTML 5
Apache Wicket
Adrià Solé Orrit
Ricardo Herrera Gil

Índice
jQuery HTML 5
1. ¿Qué es? 1. ¿Qué es?
2. Instalación 2. Nuevas características
3. Introducción a Javascript ○ Drag & Drop
○ Geolocalización
4. jQuery ○ Vídeo & Audio
○ Sintaxis ○ WebSockets
○ Eventos
○ Manipulación del DOM
○ Efectos
○ Ajax

1

Índice
Apache Wicket
1. Introducción
2. El "Component triad" de Wicket
3. Requisitos
4. ¿Cómo crear un proyecto?
5. Ejemplos:
○ Hello World
○ Link Counter
○ Link Counter (Ajax)
○ Bus

2

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

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

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",
var texto = 'Mi nombre es ' + this.nombre + '.<br>';
return texto;
}
};
var myObject2 = {
nombre: "Adrià",
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.

<html>
<head>
<script>
$(document).ready(function(){
// jQuery methods go here...
});
});
</script>
</head>
<body></body>
</html>
9

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
<html>
<head>
<script>
$("#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

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
<html>
<head>
<script>
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
#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

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
<html>
<head>
<script>
$("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

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

● 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

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

2. Drag & Drop: ejemplo

<!DOCTYPE HTML>
<html>
<head>
#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

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

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

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


● New Project > Maven Project
● Se recomienda crearlo a partir del arquetipo.
30


● Seleccionar arquetipo de la comunidad Apache
Wicket.
31


32

5. Ejemplos: Hello World

33

5. Ejemplos: Link Counter

34

5. Ejemplo: Link Counter (Ajax)

35

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

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

Seminario jquery, html5 y wicket

Más contenido relacionado

La actualidad más candente (20)

Destacado (20)

Similar a Seminario jquery, html5 y wicket (20)

Seminario jquery, html5 y wicket