Programacin Web: Vaadin

Programa de Asesoras, Actualizacin y

Capacitacin Computacional
Diego Quirs M
2
Agenda

Vaadin

!structura

Primer programa

Componentes

"abel, #utton, $ree

3
%Qu& es Vaadin'

(rame)or* para desarrollo Web

+er,er +ide (rameWor*

Client +ide !nginee

+er,idor
4
!structura de Vaadin -./

+er,er +ide (rameWor*

Cdigo 0a,a

+er,lets

Client +ide !nginee

1tiliza 2oogle Web $ool*it

3$M"

0a,ascript

A0A4
5
!structura de Vaadin -5/
6
6e7uerimientos

!clipse 8D! 0uno

Vaadin Plugin

Apac9e $omcat :

41"6unner -18 Web Designer/

C9rome
7
8nstalar !clipse

Descomprimir el arc9i,o eclipse;<ee;<uno;)in=5zip

!<ecutar
8
8nstalar Vaadin

3elp > 8nstall ?e) +o@t)are

En el CD se
encuentran Instaladores/
vaadin-jar-bundle
-6.8.4.20120928145.!i"
9
AAadir Apac9e : a !clipse -./
1
2
Clic en
Wor*benc9
10
AAadir Apac9e : a !clipse -5/
!scoger
$omcat :
11
AAadir Apac9e : a !clipse
Debe aparecer
en +er,ers
!scoger el @older con
la inst de $omcat :
12
.B Aplicacin
13
Crear nue,o proyecto
14
!scoger tipo de proyecto
!scoger #aadin
Pro<ect
15
Dar nombre al proyecto
Ponemos de nombre al
proyecto #aadin$1 y damos
siguiente 9asta @nalizar
16
!structura del proyecto
Cdigo (uente
Proyecto
"ibreras
1n nue,o proyecto es creado
con la siguiente estructura bCsica
17
3ola Mundo
+e crea una clase
VaadinP.Application en el pa7uete
ComeDample,aadinp. "a clase
9ereda de Application
+e crea una ,entana -Windo)/ una eti7ueta 7ue
dice E3ello Vaadin 1serF y se agrega la eti7ueta
al la ,entana
18
Correr Proyecto
Clic Derec9o ;
6un as > 6un on ser,er
1
2
%
19
"isteners

Vaadin @unciona mediante un patrn !,ent;

"istener, en el cual:

!Diste un ob<eto 7ue genera un e,ento y en,a una

noti@icacin al "istener

1n "istener 7ue escuc9a si se produce algGn

e,ento y realiza ciertas acciones si se produce
20
Modi@icar Aplicacin 8

Agregar 5 un botones

Agregar tooltips a los 5 botones

6egistrar un &istener sobre el primer botn

para 7ue aparezca un teDto

Mostrar el segundo botn como un enlace

Para 7ue los cambios tengan
e@ecto se debe agregar las
lneas 'restartApplication al @inal
de la direccin 16"
21
+olucin
1na ,entana
representa
una ,entana
del na,egador
+e crean una
!ti7ueta y 5
botones
+e agregan
tootips
+e agregan
&isteners a los
botones
+e agregan los
componentes a la
Ventana principal
22
$9emes -./

Vaadin separa la apariencia de la lgica

mediante t'e(es

"os t9emes contienen recursos -imCgenes,

C++, H / 7ue utiliza la aplicacin

Vaadin usa por de@ecto el t9eme reindeer

+e pueden crear t9emes personalizados

AdemCs se pueden reutilizar t9emes

23
$9emes -5/

"os t9emes se encuentran en la carpeta

WebContentIVAAD8?It9emesI

Para crear un nuevo te(a:

1
2
%
24
$9emes -=/
Automaticamente
se crea un arc9i,o
stylescss
1
Cargar el $ema. mediante la
(uncin set$9eme
2
25
$9emes -J/
%
5
Vol,er a correr
la aplicacin
4
!sta lnea carga por de@ecto
el tema -reindeer/ a nuestro tema
para reutilizarlo
+e si elimina la lnea
anterior la aplicacin no
$endrC ningGn regla C++
26
$9emes -K/

!n el arc9i,o stylescss se puede sobreescribir las

reglas de estilo
27
$9emes -K/

!n el arc9i,o stylescss se puede sobreescribir las

reglas de estilo
28
Agregar imCgenes -./

Arrastre las imCgenes dentro del t'e(e

1
2
%
Agregue el siguiente cdigo
Corra la aplicacin
29
Aplicacin 88
30
Aplicacin 88: Caractersticas -./

Crear un nue,o proyecto #aadin$2

Crear un nue,o t9eme -$ema 5/ e importar el

t9eme runo

Cambiar el @ondo de aplicacin por una imagen

!stablecer para la aplicacin el tema 5

Agregar un @a,iconico
31
Aplicacin 88: Caractersticas -5/

Crear un )bsolute&a*out

Crear un @ormulario &o+in,or(

Agregar al layout el "ogin(orm y una eti7ueta

-&abel/ 7ue diga: 8ngreso Administrati,o Pilotos

(a,iconico
"abel
"ogin(orm
32
Aplicacin 88: Caractersticas -=/

Al loguear ,eri@icar usuario contra #D y

redireccionar a menG principal o mostrar mensa<e
de contraseAa o usuario incorrecta

Debe tener un botn

cerrar sesin

!l menG principal debe

tener un arbl EbCsicoF
7ue permita agregar
a,iones a los 9angares
de los pilotos
33
Agregar un @a,iconico
#uscar en 2oogle imCgenes por tipo
icono
1
2
2uardarla
%
#uscar pCgina
9aga @a,icon en
lnea
4
2uardar el
arc9i,o
generado en
la raz del
t9eme
34
"ayout

1n &a*out es un Econtenedor de componentesF

Permite acomodar di@erentes componentes:

#uttons, "abels, $ress
AbsoluteLayout miLayout = new AbsoluteLayout();
Label titulo = new Label("MiTitulo");
miLayout.addComponent(titulo,"top:50.0px;let:!00.0px;");
"indo".setContent(miLayout);
35
Agregar "ayout y "ogin
36
Menu y cerrar sesin

Crear una clase MenG la cual serC la ,entana a

la 7ue se redireccione luego del login
37
"ogueo -./
38
Crear clase ConeDin Postgre+Q"
39
"ogin -5/
40
Crear clase Arbol

Copiar toda la clase directamente de los

e<emplos
44
AneDos
45
Mostrar nGmero de lnea eclipse
46
3acer C9rome na,egador por
de@ecto
47
Con@igurar ambiente Apac9e

!stablecer la ,ariable de ambiente 0AVAL3MM!!

48
Correr Apac9e -separado !clipse/
CA$A"8?AL3MM!IbinIstartupbat
49
Crear un arc9i,o War en !clipse

(ile > !Dport > Web > WA6 (ile

50
EDeployF un arc9i,o )ar en Apac9e
Poner arc9i,o en
)ebapps
Acceder a tra,&s
del na,egador )eb
51
Agregar el Dri,er 0D#C a !clipse

Descargar Dri,er postgres7l;N.;NO.<dbcJ -!n CD/

Clic derec9o en el proyecto 7ue se desea incluir el

<dbc P #uild Pat9 P Con@igure #uild Pat9
!scoger dri,er
descargado