Wickets + Vaadim + Jquery + HTML5

1. SEMINARIO 2
Miembros del grupo:
Juan Francisco García
Jorge Mahecha
Sergi Mellado

2. Índex
1. Wicket
2- Responsive Web Design
3. Vaadim HTML5
4. JQUERY
5. Bootstrap
6. Diversas Demos

3. 1. Wicket
• ¿Que son los Wickets?
– Escrito por Jonathan Locke, liberado en 2005 y en 2007 se une a la
fundación Apache.
– Es un framework basado totalmente en Java para aplicaciones web.
– Lo que implica programación orientada a objetos y a componentes.
– Pero sin perder las caracteristicas HTTP, como puede ser los
REQUESTS,RESPONSE o guardar la sesiones de los usuarios.
– Seria algo parecido a Javascript pero del lado del servidor, es decir
primero trabajas con los datos y después generas el codigo HTML.
– Paginas HTML muy sencillas ya que todo esta en el servidor.

4. Wicket
• Frameworks similares (orientado a objetos)
– GWT (from Google) -> Trabaja más del cliente.
– JSF (from Oracle)
– Spring MVC
• Por que elegir Wicket?
1. 100% opensource.
2. Poca intrusión de Java en el código HTML.
3. Java puro.
4. Una persona puede trabajar independientemente en la
pagina HTML y otro en la clase Java.

5. Wicket
• Crear un proyecto.

6. Wicket
• Página inicial (HomePage.java y HomePage.html)
• Cada página web tendrá dos archivos:
– 1 clase y 1 archivo html (con el mismo nombre).
• Cada nueva pagina debe tener un extends de WebPage para
heredar los atributos de una página web y un constructor.

7. Wicket
• ¿ Cómo relacionamos Java y HTML?
• Poco intrusivo.
• Simplemente poniendo wicket:id=“myid” a las
etiquetas HTML en los cuales queramos modificar.
• Y utilizando el id en la clase Java para modificar el
contenido.
• Si hemos definido un wicket:id en el archivo html
debemos definirlo en la clase Java  En caso contrario
dará error.

8. Wicket
• Errores más comunes.
1. Nos olvidamos de declarar el id en la Clase.
»
el HTML.
2. Caso opuesto. Olvidamos declarar
el id en

9. Wicket
DEMO
http://www.wicket-library.com/wicket-examples/ajax/form?3
http://www.wicket-library.com/wicket-examples/ajax/choice?2
http://www.wicket-library.com/wicket-examples/navomatic/

10. 2. Responsive Web Designer (I)
• Objetivo principal: diseñar un diseño web para todos los
dispositivos (Web for All)
– No logrado al 100%.
• Combinación de recursos HTML y CSS para una mejor ajuste
del contenido web al ancho de las pantallas de los diferentes
dispositivos.
– Ej. Dispositivos: tablets, PCs, smart phones…
– Diferentes CSS para diferentes dispositivos.

11. 2. Responsive Web Designer (II)
• Reducción de costes de diseño y mantenimiento web.
• Mejor impacto en el cliente.
• Optimización en la actualización del contenido.

12. 3. Vaadin Html5 (I)
• Vaadin Framework es una aplicación web de Java para la
implementación de frameworks, diseñada para la creación y
mantenimiento de aplicaciones web de alta calidad con
interfaces muy sencillas.
• Diseño de webs dinámicas e interactivas usando solo código
JAVA.
– No se tiene la necesidad de recurrir a JavaScript ni a HTML

13. 3. Vaadin Html5 (II)
• Distribución funcionalidades:
- Composites: página web ensí.
- Widgets: pequeñas aplicaciones dirigidas al cliente.
- Themes: para la visualización del contenido (ficheros CSS –
relacionado RWD))
¡¡¡NOS CENTRAREMOS ÚNICAMENTE EN EL DISEÑO DE
COMPOSITES!!!

14. 3. Vaadin Html5 (III)
• Disponible un fichero editado por nostros de
como instalar el plugin de Vaadin en Eclipse, así
como también de las posibles incidencias.
• Diversos tutoriales “potables” dentro del fichero.
• FICHERO DISPONIBLE EN EL BLOG DEL GRUPO 1.
– Nombre del fichero: vaadin.seminario2.byJFJS.docx

15. 3. Vaadin Html5 (IV)
DEMO

16. 4. jQuery(I)
– Lenguaje de programación que permite manipular
páginas web
– El código se carga dentro de la página
– Se ejecuta en cuanto se carga la página
– Con jquery ahorramos tiempo y disgustos
– Como? Con una simple librería incluida en el body

17. 4. jQuery(II)
– Características de Jquery:
•
•
•
•
•
•
•
•
Acceder al documento HTML (DOM)
Modificar la apariencia de la página
Modificar contenido
Manejar eventos de los elementos de la página
Crear efectos
Amplia extensión de plugins
Estilo de programación no invasivo
Trabajar en modalidad Ajax

18. 4. jQuery(III)
– Selectores jQuery. Ejemplos:
• $(‘.boton’)–devuelve todos los elementos que contengan la
clase botón.
• $(‘.*’)–devuelve todos los elementos existentes en la
página .
• $ (‘#divDatos, .boton’)–devuelve todos los elementos que
contengan el ID divDatos y los que contengan la Clase
botón.

19. 4. jQuery(IV)
– Manipulación de eventos. Ejemplos:
• Click()- Evento click
• Keypress()- eventos de teclado
– Efectos visuales
• Show() – muestra un elemento HTML
• fadeOut () – Muestra un elemento HTML desvaneciéndose

20. 4. jQuery(V)
– AJAX. Ejemplos:
• Load(): Carga HTML y permite inyectarlo dentro del DOM
• Get() : Realiza una petición tipo Get al servidor
• getJSON(): Carga datos Json

21. 5. Bootstrap(I)
– Framework de diseño gratuito para diseño páginas y
aplicaciones web
– Basado en HTML5, CSS3 y JAVASCRIPT
– Crossbrowser
– Popular
– Algunas de las razones por las que debemos usar
Bootstrap:

22. 5. Bootstrap(II)
– Gran variedad de iconos:

23. 5. Bootstrap(III)
– Sistema de cuadrícula:

24. 5. Bootstrap(IV)
– Componentes:
– Botones
– Tabs
– Paginación
– Alertas
– Barras de progreso
– y docenas de componentes más.

25. Conclusiones JQuery y Bootstrap
• Jquery:
– Ahorrar tiempo y esfuerzo
– Compactar código
– Modificar y manejar páginas fácilmente
• Bootstrap
– Diseño bonito y amigable
– Gran variedad de complementos
– Compatibilidad con los principales browser y
lenguajes como jQquery

26. JQuery y Bootstrap
DEMO