Mostrando entradas con la etiqueta Visual Web Java Server Faces. Mostrar todas las entradas
Mostrando entradas con la etiqueta Visual Web Java Server Faces. Mostrar todas las entradas

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.



7/08/2011

sql server 2000 y visual jsf 50 -instalacion y configuracion del apache tomcat


VISUAL JAVA SERVER FACES y NETBEANS  

Primero se agregará a Tomcat  en otro puerto ya que si instalaste el tomcat al inicio nos dara el 8080 por defecto, aprovechando que tenemos la versión .zip descargado de  http://tomcat.apache.org/download-60.cgi, lo descomprimimos en una carpeta llamada apache-tomcat-6.0.32-windows-x64 .  Posteriormente editamos el archivo server.xml que está el subdirectorio \conf dentro de \apache-tomcat-6.0.32.

Primero buscamos la línea relacionada con el puerto del servidor 8005 y lo cambiamos a8006 en la línea 22.

Luego cambiamos el puerto 8009 a 8010 y 8443 a 8444 en la línea 90.
y  cambiamos el puerto 8088 a 8081 en la línea 69 y el puerto 8443 a 8444 en la línea 71.

Posteriormente editamos el archivo tomcat-user.xml que está el subdirectorio \conf dentro de \apache-tomcat-6.0.32.


Por último cambiamos en la linea 29 y le ponemos los siguiente


   <role rolename="tomcat"/>   

   <role rolename="role1"/>
   <!-- <user username="tomcat" password="tomcat" roles="tomcat"/>   <user username="both" password="tomcat" roles="tomcat,role1"/>
-->
   <user password="123" roles="tomcat,manager,admin" username="123"/>



nos vamos al NETBEANS
 y en la pestaña Ventana-Prestaciones-Servidores le damos agregar servidor


la damos un nombre al servidor en mi caso Tomcat 6.0.32






seleccionamos la carpeta en donde configuramos el apache tomcat en mi caso

/apache-tomcat-6.0.32.


le ponemos el usuario y password igual que el la configuracion anterior




y listo



ahora nos vamos a nuestro proyecto creado en propiedades


en el nodo  Run  en server elegimos el servidor Tomcat 6.0.32






Y LISTO>



7/06/2011

SQL SERVER 2000 Y VISUAL JSF 6- nuestra propia tabla ObjectArrayDataProvider con conexion a Base de Datos


VISUAL JAVA SERVER FACES y NETBEANS









SQL SERVER 2000 Y VISUAL JSF 5- nuestra propia tabla ObjectArrayDataProvider



VISUAL JAVA SERVER FACES y NETBEANS 



















 

SQL SERVER 2000 Y VISUAL JSF 4- Detalles de la creacion de una tabla DefaultTableDataProvider



VISUAL JAVA SERVER FACES y NETBEANS 

 

En el presente tutorial analizaremos como se crea una tabla en Visual Java Server Faces Para asi poder nosotros mismos crear nuestra propia tabla.




Es necesario saber cuales son las clases que influyen para la creacion de una tabla en visual Java Server Faces.

- Page2jsp
- Page2.java
- FieldKey.java
- DefaultTableDataProvider.java
- ObjectArrayDataProvider.java


//****************************************************************************************************************

// Page2.jsp

//****************************************************************************************************************

<?xml version="1.0" encoding="UTF-8"?>

<!--

Document : Page2

Created on : 01/07/2011, 12:13:25 AM

Author : user

-->

<jsp:root version="2.1" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:webuijsf="http://www.sun.com/webui/webuijsf">

<jsp:directive.page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"/>

<f:view>

<webuijsf:page id="page1">

<webuijsf:html id="html1">

<webuijsf:head id="head1">

<webuijsf:link id="link1" url="/resources/stylesheet.css"/>

</webuijsf:head>

<webuijsf:body id="body1" style="-rave-layout: grid">

<webuijsf:form id="form1">

<webuijsf:table augmentTitle="false" id="table1" style="position: absolute; left: 96px; top: 72px" title="Libros" width="450">

<webuijsf:tableRowGroup id="tableRowGroup1" rows="10" sourceData="#{Page2.defaultTableDataProvider}" sourceVar="currentRow">

<webuijsf:tableColumn headerText="column1" id="tableColumn1" sort="column1">

<webuijsf:staticText id="staticText1" text="#{currentRow.value['column1']}"/>

</webuijsf:tableColumn>

<webuijsf:tableColumn headerText="column2" id="tableColumn2" sort="column2">

<webuijsf:staticText id="staticText2" text="#{currentRow.value['column2']}"/>

</webuijsf:tableColumn>

<webuijsf:tableColumn headerText="column3" id="tableColumn3" sort="column3">

<webuijsf:staticText id="staticText3" text="#{currentRow.value['column3']}"/>

</webuijsf:tableColumn>

</webuijsf:tableRowGroup>

</webuijsf:table>

</webuijsf:form>

</webuijsf:body>

</webuijsf:html>

</webuijsf:page>

</f:view>

</jsp:root>



//****************************************************************************************************************

// Page2.java

//****************************************************************************************************************

package webapplication4;
import com.sun.rave.web.ui.appbase.AbstractPageBean;

import com.sun.webui.jsf.model.DefaultTableDataProvider;

import javax.faces.FacesException;
public class Page2 extends AbstractPageBean {

private void _init() throws Exception {

}



private DefaultTableDataProvider defaultTableDataProvider = new DefaultTableDataProvider();

public DefaultTableDataProvider getDefaultTableDataProvider() {

return defaultTableDataProvider;

}

public void setDefaultTableDataProvider(DefaultTableDataProvider dtdp) {

this.defaultTableDataProvider = dtdp;

}

public Page2() {

}
@Override

public void init() {

super.init();

try {

_init();

} catch (Exception e) {

log("Page2 Initialization Failure", e);

throw e instanceof FacesException ? (FacesException) e: new FacesException(e);

}

}
@Override

public void preprocess() {

}

@Override

public void prerender() {

}

@Override

public void destroy() {

}
protected ApplicationBean1 getApplicationBean1() {

return (ApplicationBean1) getBean("ApplicationBean1");

}

protected RequestBean1 getRequestBean1() {

return (RequestBean1) getBean("RequestBean1");

}

protected SessionBean1 getSessionBean1() {

return (SessionBean1) getBean("SessionBean1");

}

}




//****************************************************************************************************************

// DefaultTableDataProvider.java

//****************************************************************************************************************

package com.sun.webui.jsf.model;
import com.sun.data.provider.FieldKey;

import com.sun.data.provider.impl.ObjectArrayDataProvider;

import com.sun.webui.jsf.util.MessageUtil;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;
public class DefaultTableDataProvider extends ObjectArrayDataProvider{

/** Constructor por Defecto. */

public DefaultTableDataProvider() {

setArray(getDefaultTableData());

}



/**

* Cree datos que se desplegarán cuando la mesa se deja caer primero en el diseñador

*/

public Data[] getDefaultTableData(){

int noRows = 5;

int noCols = 3;

Data[] dataSet = new Data[noRows];
for (int i = 0; i < noRows; i++) {

String[] dataStrs = new String[noCols];

for(int j=0; j < noCols; j++){

dataStrs[j] = getMessage("defaultTblCell", String.valueOf(i + 1), String.valueOf(j + 1));

}

dataSet[i] = new Data(dataStrs);

}

return dataSet;

}



/** Vuelva el Campo Codifica el skiiping los 0th ponen en un índice que es la propiedad de la clase */

public FieldKey[] getFieldKeys() {

FieldKey[] superFieldKeys = super.getFieldKeys();

FieldKey[] fieldKeys = new FieldKey[superFieldKeys.length - 1];

for(int i=1; i < superFieldKeys.length; i++){

fieldKeys[i-1] = superFieldKeys[i];

}

return fieldKeys;

}



/**

* Get the message substituting the arguments

*/

public String getMessage(String key, String arg1, String arg2) {

String bundle = getClass().getPackage().getName() + ".Bundle";

return MessageUtil.getMessage(bundle, key, new Object[]{arg1, arg2});

}



/**

* Los datos estructuran que sostiene los datos para tres columnas de una mesa

*/

public static class Data {

private String[] columns = null;



public Data(String[] cols) {

columns = cols;

}



public String getColumn1() {

return columns[0];

}



public void setColumn1(String col) {

columns[0] = col;

}



public String getColumn2() {

return columns[1];

}



public void setColumn2(String col) {

columns[1] = col;

}



public String getColumn3() {

return columns[2];

}



public void setColumn3(String col) {

columns[2] = col;

}

}



}


//****************************************************************************************************************

// FieldKey.java

//****************************************************************************************************************

package com.sun.data.provider;
import java.io.Serializable;
public class FieldKey implements Comparable, Serializable {
/**

* A convenient static empty array to use for no-op method returns

*/

public static final FieldKey[] EMPTY_ARRAY = new FieldKey[0];
/**

* Constructs a new FieldKey with the specified canonical ID.

*

* @param fieldId The desired canonical ID String

*/

public FieldKey(String fieldId) {

this.fieldId = fieldId;

this.displayName = this.fieldId;

}
/**

* Constructs a new FieldKey with the specified canonical ID and display

* name.

*/

public FieldKey(String fieldId, String displayName) {

this.fieldId = fieldId;

this.displayName = displayName;

}
/**

* @param fieldId the canonical internal identifier of this {@link FieldKey}

*/

public void setFieldId(String fieldId) {

this.fieldId = fieldId;

}
/**

* @return the canonical internal identifier of this {@link FieldKey}

*/

public String getFieldId() {

return fieldId;

}
/**

* @param displayName The display name for this data element, suitable for

* inclusion in a menu of available options.

*/

public void setDisplayName(String displayName) {

this.displayName = displayName;

}
/**

* @return the display name for this data element, suitable for

* inclusion in a menu of available options.

*/

public String getDisplayName() {

return displayName;

}
public boolean equals(Object o) {

if (o instanceof FieldKey) {

String fkFieldId = ((FieldKey)o).getFieldId();

String thisFieldId = getFieldId();

return thisFieldId == fkFieldId || (thisFieldId != null && thisFieldId.equals(fkFieldId));

}

return false;

}



public int hashCode() {

String thisFieldId = getFieldId();

if (thisFieldId == null) {

return "".hashCode();

}

return thisFieldId.hashCode();

}
public int compareTo(Object o) {

String thisDisplayName = getDisplayName();

if (o instanceof FieldKey && thisDisplayName != null) {

String fkDisplayName = ((FieldKey)o).getDisplayName();

return thisDisplayName.compareTo(fkDisplayName);

}

return 0;

}
private String fieldId;

private String displayName;
public String toString() {

return "FieldKey[" + getFieldId() + "]"; // NOI18N

}

}



//****************************************************************************************************************

// ObjectArrayDataProvider.java

//****************************************************************************************************************

package com.sun.data.provider.impl;
import com.sun.data.provider.DataProvider;

import com.sun.data.provider.DataProviderException;

import com.sun.data.provider.FieldKey;

import com.sun.data.provider.RowKey;

import com.sun.data.provider.TableDataProvider;

import java.io.Serializable;

import java.lang.reflect.Constructor;

import java.lang.reflect.Modifier;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import java.util.ResourceBundle;

import java.util.TreeMap;
/* @author Joe Nuxoll

* Winston Prakash (bug fixes)

*/

public class ObjectArrayDataProvider extends AbstractTableDataProvider

implements Serializable {





// ------------------------------------------------------------ Constructors

public ObjectArrayDataProvider() {

setArray(null);

}



public ObjectArrayDataProvider(Object array[]) {

setArray(array);

}



public ObjectArrayDataProvider(Object array[], boolean includeFields) {



setArray(array);

setIncludeFields(includeFields);



}



// ------------------------------------------------------ Instance Variables



private Object array[] = null;

private transient ResourceBundle bundle = null;

private boolean includeFields = true;

private Class objectType;



// -------------------------------------------------------------- Private Static Variables



private static final int MAX_DESIGNTIME_ROWCOUNT = 25;

private static final int FAKE_DATA_ROWCOUNT = 3;





// -------------------------------------------------------------- Properties



public Object[] getArray() {

return this.array;

}



public void setArray(Object array[]) {

this.array = array;

if (array != null) {

setObjectType(array.getClass().getComponentType());

} else {

setObjectType(null);

}

}



public Class getObjectType() {

return objectType;

}
public void setObjectType(Class objectType) {

this.objectType = objectType;

this.support = null;

fireProviderChanged();

}



public boolean isIncludeFields() {

return this.includeFields;

}



public void setIncludeFields(boolean includeFields) {

this.includeFields = includeFields;

this.support = null;

}



// ---------------------------------------------------------- Public Methods

// ---------------------------------------------------- DataProvider Methods

public FieldKey getFieldKey(String fieldId) throws DataProviderException {

FieldKey fieldKey = null;

if (getSupport() != null) {

fieldKey = getSupport().getFieldKey(fieldId);

}

if (fieldKey != null){

return fieldKey;

} else{

throw new IllegalArgumentException(fieldId);

}

}



public FieldKey[] getFieldKeys() throws DataProviderException {

if (getSupport() != null) {

return getSupport().getFieldKeys();

}

return FieldKey.EMPTY_ARRAY;

}



public Class getType(FieldKey fieldKey) throws DataProviderException {

if ((getSupport() == null) || (getSupport().getFieldKey(fieldKey.getFieldId()) == null)) {

throw new IllegalArgumentException(fieldKey.toString());

}else{

return getSupport().getType(fieldKey);

}

}



public Object getValue(FieldKey fieldKey) throws DataProviderException {

return getValue(fieldKey, getCursorRow());

}



public void setValue(FieldKey fieldKey, Object value) throws DataProviderException {

setValue(fieldKey, getCursorRow(), value);

}



public boolean isReadOnly(FieldKey fieldKey) throws DataProviderException {

if ((getSupport() == null) || (getSupport().getFieldKey(fieldKey.getFieldId()) == null)) {

throw new IllegalArgumentException(fieldKey.toString());

}else{

return getSupport().isReadOnly(fieldKey);

}

}



// --------------------------------------- TableDataProvider Methods (Basic)

public int getRowCount() throws DataProviderException {

//at designtime, if there are no field keys

//prevent ELExceptions from being thrown by showing zero rows

if (java.beans.Beans.isDesignTime() && getFieldKeys().length < 1) {

return 0;

}

int currentRowCount = calculateRowCount();

if (java.beans.Beans.isDesignTime()) {

if (currentRowCount < 1) {

//we have no rows to show

//so show FAKE_DATA_ROWCOUNT rows of fake data

return FAKE_DATA_ROWCOUNT;

}

else if (currentRowCount > MAX_DESIGNTIME_ROWCOUNT) {

//we have too many rows to show

//only show the maximum permitted

return MAX_DESIGNTIME_ROWCOUNT;

}

else {

return currentRowCount;

}

}

else {

return currentRowCount;

}

}





public Object getValue(FieldKey fieldKey, RowKey rowKey) throws DataProviderException {

if(java.beans.Beans.isDesignTime()) {

//calculate how many rows currently exist in the wrapped data

int currentRowCount = calculateRowCount();

if (currentRowCount < 1) {

//we have no actual rows

//so show fake data

return AbstractDataProvider.getFakeData(getType(fieldKey));

}

}

if ((getSupport() == null) || (getSupport().getFieldKey(fieldKey.getFieldId()) == null)) {

throw new IllegalArgumentException(fieldKey.toString());

}

if (!isRowAvailable(rowKey)) {

throw new IndexOutOfBoundsException("" + rowKey);

}

return getSupport().getValue(fieldKey, array[getRowIndex(rowKey)]);

}







public void setValue(FieldKey fieldKey, RowKey rowKey, Object value) throws DataProviderException {

if ((getSupport() == null) || (getSupport().getFieldKey(fieldKey.getFieldId()) == null)) {

throw new IllegalArgumentException(fieldKey.toString());

}

if (getSupport().isReadOnly(fieldKey)) {

throw new IllegalStateException(fieldKey.toString() + " " + getBundle().getString("IS_READ_ONLY"));

}

if (!isRowAvailable(rowKey)) {

throw new IndexOutOfBoundsException(rowKey.toString());

}

Object previous = getSupport().getValue(fieldKey, array[getRowIndex(rowKey)]);

getSupport().setValue(fieldKey, array[getRowIndex(rowKey)], value);

if (((previous == null) && (value != null)) ||

((previous != null) && (value == null)) ||

((previous != null) && (value != null) && !previous.equals(value))) {

fireValueChanged(fieldKey, rowKey, previous, value);

fireValueChanged(fieldKey, previous, value);

}

}



// -------------------------------------- TableDataProvider Methods (Cursor)

// Base class definitions are sufficient

// ------------------------ TableDataProvider Methods (Append/Insert/Delete)



public boolean canAppendRow() throws DataProviderException {

return false;

}



public RowKey appendRow() throws DataProviderException {

throw new UnsupportedOperationException();

}





public boolean canInsertRow(RowKey beforeRow) throws DataProviderException {

return false;

}



public RowKey insertRow(RowKey beforeRow) throws DataProviderException {

throw new UnsupportedOperationException();

}



public boolean canRemoveRow(RowKey row) throws DataProviderException {

return false;

}
public void removeRow(RowKey row) throws DataProviderException {

throw new UnsupportedOperationException();

}





// --------------------------------------------------------- Private Methods



private ResourceBundle getBundle() {

if (bundle == null) {

bundle = ResourceBundle.getBundle("com/sun/data/provider/impl/Bundle");

}

return bundle;

}



private int getRowIndex(RowKey rowKey) throws DataProviderException {

return ((IndexRowKey) rowKey).getIndex();

}



private RowKey getRowKey(int index) throws DataProviderException {

return new IndexRowKey(index);

}



private transient ObjectFieldKeySupport support = null;
private ObjectFieldKeySupport getSupport() {

if ((support == null) && (objectType != null)) {

support = new ObjectFieldKeySupport(objectType, includeFields);

}

return support;

}



private int calculateRowCount() {

int currentRowCount = 0;

if (array != null) {

currentRowCount = array.length;

}

return currentRowCount;

}

}

Nos vamos a centrar en el codigo del archivo
DefaultTableDataProvider.java
ya que ese ese codigo es el que carga la tabla  mediante el siguiente metodo.

public Data[] getDefaultTableData(){
        int noRows = 5;
        int noCols = 3;
        Data[] dataSet = new Data[noRows];
        for (int i = 0; i < noRows; i++) {
            String[] dataStrs = new String[noCols];
            for(int j=0; j < noCols; j++){
                dataStrs[j] = getMessage("defaultTblCell", String.valueOf(i + 1), String.valueOf(j + 1));
            }
            dataSet[i] = new Data(dataStrs);
        }
        return dataSet;
    }

usaremos el disenio de esta clase para creae nuestra propia clase y asi poder cargar nuestra tabla

SQL SERVER 2000 Y VISUAL JSF 2 - CREACION DE NUESTRA TABLA


VISUAL JAVA SERVER FACES y NETBEANS

Continuando con el tutorial  ahora crearemos un proyecto en visual java server faces.

Archivo -> Proyecto Nuevo ->  Java Web -> Web Application

Escogemos un nombre para el proyecto


seleccionamos por defecto e apache tomcat 6.0.26
aunque mas adelante les explicare agregar un servidor mas reciente como el tomcat 6.0.32 para que pueda correr nuestra aplicacion conectada a base de datos y ademas con visual java server faces.

continuando: lo demas lo dejamos por defecto.


escogemos el framework: Visual Web JavaServer Faces lo demas o dejamos como esta.

y listo ya tenemos nuestro entorno de trabajo
a continuacion creremos un nuevo Visual Web JSF Page.




ahora agregamos un elemento de tipo Button de la pestania Paleta al archivo Page1 en el modo Design

Le damos limpiar y construir
esto es necesario asi siempre para actualizar nuestro proyecto

nos vamos a la carpeta WEB-INF -> luego al archivo faces-config.xml
para indicarle ahi a donde queremos que se dirija cuando presionamos el boton
simpemente arrastrando el mouse desde button1 y soltandolo en Page2.jsp


ejecutamos el proyecto y aparece nuestro boton.

si queremos configurar el navegador donde queremos que se visualice nuestra aplicacion nos vamos a Herramientas -> Opciones

y Seleccionamos el navegador.

Luego arrastramos un elemento Table desde la pestania Paleta al archivo Page2.jsp
Le damos limpiar y construir
y luego Ejecutar



y Listo si es que no funciona traten de limpiar y construir varias veces.
En el siguiente tutorial les mostrare como conectarse a una base de datos sql server 2000 sp4 o 2005 ya que la conexion en estos dos casos es similar.Nos conectaremos de diversas formas. Resaltando que lo mas importante, bueno para mi, es trabajar con conexiones a bases de datos cualquiera que sea.