10/26/2011

Diseño de Paginas Web en JSF

DISEÑO DE PAGINAS WEB EN JAVA SERVER FACES + FLASH


Visítenos en nuestra pagina web http://cristhiandante.com/

Este es uno de los diseños que hice, poco a poco ire colgando mas diseños.

explicaremos detalladamente como se hacen este tipo de diseños.

1er PASO: CREACION DEL PROYECTO VISUAL WEB JAVA SERVER FACES PARA ELABORAR EL DISEÑO.

Creo que eso ya sabemos .



2do PASO: AGREGAR TABLAS.

Entramos en el modo de diseño JSP y agregamos de la paleta el elemento tabla de la pestaña HTML.
agregarlo dentro del  <webuijsf:body>

Lo cual quedaría asi


luego le damos las siguientes propiedades a la tabla
align="center" style="height: 900px; width: 100%" width="1032"

border="1" es por defecto hay que dejarlo asi para diferenciar la tabla.
en mi caso elimine el
<thead>
solo deje el
<tbody>

al final agregar las siguientes proporciones para las filas y columnas.
en mi caso le di  4 filas <TR> y 3 columnas <TH>

lo cual quedaria asi.


3er PASO: AGREGAR ESTILOS.

Luego de damos estilos. en este caso solo de color
puede ser directo o con el editor de estilos en modo diseño.

Yo en mi caso prefiero hacerlo directamente. por que tengo mas control.

el diseño quedaria asi


4to PASO: AGREGAR BOTONES.

Luego agregamos un componente Layout Panel  y 4 componentes Button
lo cual quedaria asi por defecto.
Para darle color a los botones les recomiendo que le den mejor imagenes con fondo entero

5to PASO: AGREGAR ARCHIVOS FLASH.

y por ultimo para agregar el flash es recomendable darle la url del flash. por que si le damos la carpeta directamente ahi veces no lo encuentra y no carga el archivo.

en mi caso 
"http://localhost:8088/ThalesWeb/flash/Banner%20021.swf"

primero prueben solo si la pelicula flash funciona.


este es un video del diseño de la pagina

gracias por visitarnos y hasta pronto cualquier duda solo me comunican.



5 comentarios:

Anónimo dijo...

Visualweb es compatible con la version 7.1.1 de Netbeans?
He intentado siguiendo los pasos de tu tutorial y no me funciona

raul dijo...

Hola, buen tutorial...
pero tengo una pregunta...
¿Cómo haces para tener la paleta de html, para crear las tablas(divisiones)?

Espero tu respuesta, gracias

cristhian dijo...

como sabemos hay tres vistas,
1. desing o diseño:
2. JSP: donde se muestra el codigo jsp de la pagina
3. Java: donde se muestra el codigo java de la aplicacion.

ahora para tener la paleta HTML hay que estar en modo JSP

cristhian dijo...

raul espero te sirva, saludos desde huánuco peru.

cristhian dijo...

No amigos los links que les doy solo es compatible para la version 6.9.1 les recomiendo que trabajen con esta versión por que todos los ejmeplos mostrados estan en esta version, intente descragar el plugin para la version 7 y no lo consegui en esas fechas, no se si ahora este disponible, saludos a todos.