ESCUELA SUPERIOR POLITCNICA DE CHIMBORAZO FACULTAD DE INFORMTICA Y ELECTRNICA ESCUELA DE INGENIERA EN SISTEMAS

JAVA

TEMA: MANUAL DE ICEFACES

REALIZADO POR:

Mario Hidalgo 4491 Paulina Calle 4554

Marcelo Sevilla 4125

Riobamba, 3 de Diciembre del 2013

ESCUELA SUPERIOR POLITCNICA DE CHIMBORAZO FACULTAD DE INFORMTICA Y ELECTRNICA ESCUELA DE INGENIERA EN SISTEMAS

Antes de crear una aplicacin ICEFACES es imprescindible el contar con los plugins que nos permitan trabajar con este Framework. Los plugins para Netbeans 7.3 se encuentran en el archivo IF-3.3.0a-IM-1.3.0-Netbeans-7.3modules.rar, los descomprimimos y procedemos con la instalacin con los siguientes pasos. 1.- Una vez que hemos ingresado a Netbeans damos clic en la ventana Tools ->Plugins

2.- En la ventana que se despliega a continuacin damos clic en la pestaa Downloaded y seguidamente en Add Plugins

ESCUELA SUPERIOR POLITCNICA DE CHIMBORAZO FACULTAD DE INFORMTICA Y ELECTRNICA ESCUELA DE INGENIERA EN SISTEMAS

3.-Ingresamos al lugar en el que descomprimimos el archivo IF-3.3.0a-IM-1.3.0-Netbeans-7.3modules.rar y seleccionamos cada una de las libreras y damos clic en Abrir.

Repetimos el proceso para todos los archivos que descomprimimos. 4.- Una vez abiertos todos los archivos damos clic en Install.

ESCUELA SUPERIOR POLITCNICA DE CHIMBORAZO FACULTAD DE INFORMTICA Y ELECTRNICA ESCUELA DE INGENIERA EN SISTEMAS

5.- Nos aparecer la siguiente ventana en la que damos clic en Next

6.- Aceptamos los trminos de Licencia y seguidamente damos clic en Install.

ESCUELA SUPERIOR POLITCNICA DE CHIMBORAZO FACULTAD DE INFORMTICA Y ELECTRNICA ESCUELA DE INGENIERA EN SISTEMAS

7.- Saldr una advertencia diciendo que los plugins no son seguros, la ignoramos y damos clic en Continue.

8.- Seleccionamos Restart IDE Now y Damos clic en Finish

Al terminar estos 8 pasos ya estn instalados los Plugins para empezar a trabajar con ICEfaces.

ESCUELA SUPERIOR POLITCNICA DE CHIMBORAZO FACULTAD DE INFORMTICA Y ELECTRNICA ESCUELA DE INGENIERA EN SISTEMAS

CREACION DE UNA APLICACIN ICEfaces.

1.- Una vez que ingresamos a Netbeans seleccionamos Nuevo proyecto y a continuacin Java Web /Web Application/Next.

2.-En la ventana que se despliega escribimos el nombre del proyecto para nuestro caso ser WAIceFaces y damos clic en Next.

ESCUELA SUPERIOR POLITCNICA DE CHIMBORAZO FACULTAD DE INFORMTICA Y ELECTRNICA ESCUELA DE INGENIERA EN SISTEMAS

3.- Seleccionamos el servidor Apache Tomcat, los dems valores por defecto y seguidamente damos clic en Next.

4.- Se abrir la siguiente interfaz en la que seleccionamos JavaServerFaces

ESCUELA SUPERIOR POLITCNICA DE CHIMBORAZO FACULTAD DE INFORMTICA Y ELECTRNICA ESCUELA DE INGENIERA EN SISTEMAS

5.- en la parte inferior damos clic en la pestaa Components y marcamos las casillas ICEfaces 3.3.0 y la casilla ICE faces (esperamos unos segundos mientras el IDE reconoce los plugins que instalamos anteriormente) Y damos clic en Finish.

6.- Esperamos unos segundos mientras el IDE realiza las operaciones seleccionadas.

ESCUELA SUPERIOR POLITCNICA DE CHIMBORAZO FACULTAD DE INFORMTICA Y ELECTRNICA ESCUELA DE INGENIERA EN SISTEMAS

7.- Se nos abrir el Index.xthml como se muestra a continuacin.

8.- Para comprobar que la aplicaion ICEfaces se cre correctamente seleccionamos el Proyecto y damos clic en el botn Run Project.

9.- si seguimos todos los pasos adecuadamente se debe mostrar la siguiente Interfaz en el Navegador.

TENEMOS NUESTRA APLICACION ICEfaces creada, ahora para emplear esta aplicacin seguiremos los siguientes pasos:

ESCUELA SUPERIOR POLITCNICA DE CHIMBORAZO FACULTAD DE INFORMTICA Y ELECTRNICA ESCUELA DE INGENIERA EN SISTEMAS

EMPLEO DE LA APLICACIN ICEfaces

Vamos a copiar los paquetes de la aplicacin archivos a nuestra aplicacin de ICEfaces que la llamamos WAIcesfaces, para lo cual abrimos nuestra aplicacin archivos. 1.- Dentro de la aplicacin archivos damos clic en Source Packages, No importa el error que muestra la aplicacin archivos

2.- Seleccionamos los paquetes que deseamos copiar de uno en uno, para nuestro caso damos clic derecho en el paquete ec.edu.espoch.academico.rnegocio.funciones como se muestra en la imagen, y seleccionamos copiar.

10

ESCUELA SUPERIOR POLITCNICA DE CHIMBORAZO FACULTAD DE INFORMTICA Y ELECTRNICA ESCUELA DE INGENIERA EN SISTEMAS

3.-Regresamos a nuestra aplicacin ICEfaces damos clic derecho en sourse packages/ Paste

Repetimos los 2 y 3 para los siguientes paquetes: 1. ec.edu.espoch.academico.rnegocio.clases 2. ec.edu.espoch.academico.controlador 3. ec.edu.espoch.academico Una vez copiados los cuatro paquetes a nuestra Aplicacin debera quedarnos de la siguiente manera.

Deben constar los 4 paquetes los tres citados anteriormente ms el que copiamos en el paso 2 y 3.

11

ESCUELA SUPERIOR POLITCNICA DE CHIMBORAZO FACULTAD DE INFORMTICA Y ELECTRNICA ESCUELA DE INGENIERA EN SISTEMAS

4.- Dentro de nuestra aplicacin WAIcesfaces, Seleccionamos el Index.xhtml copiamos y pegamos el siguiente cdigo:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:icecore="http://www.icefaces.org/icefaces/core" xmlns:ace="http://www.icefaces.org/icefaces/components" xmlns:ice="http://www.icesoft.com/icefaces/component" > <h:head> <title>ICE FACES</title> <ice:outputStyle href="./xmlhttp/css/rime/rime.css" /> </h:head> <h:body> <ace:panel id="tblEstudiantes" header="Estudiantes" > <h:panelGrid bgcolor="blue" border="5"> <h:form id="Mostrar"> <ace:dataTable id="tbEstudiantes" value="#{cEstudiante.lstestudiante}" var="varestud" selectionMode="single" selectedCells="#{cEstudiante.estud}"> <ace:column headerText="Cdigo" rowspan="2"> <h:outputText value="#{varestud.cod_est}" /> </ace:column> <ace:column headerText="Cedula" rowspan="2"> <h:outputText value="#{varestud.cedula}" /> </ace:column> <ace:column headerText="Nombres" rowspan="2"> <h:outputText value="#{varestud.nombres}" /> </ace:column>

12

ESCUELA SUPERIOR POLITCNICA DE CHIMBORAZO FACULTAD DE INFORMTICA Y ELECTRNICA ESCUELA DE INGENIERA EN SISTEMAS

<ace:column headerText="Apellido" rowspan="2"> <h:outputText value="#{varestud.apellidos}" /> </ace:column> <ace:column headerText="Nivel" rowspan="2"> <h:outputText value="#{varestud.nivel}" /> </ace:column> </ace:dataTable> </h:form> </h:panelGrid> <ace:column headerText="botones"> <h:commandButton value="Nuevo" id ="btnNuevo" onclick="panelnuevo.show();"></h:commandButton> <h:commandButton value="Modificar" id ="btnModificar" onclick="panelmodificar.show();"> </h:commandButton> <h:commandButton value="Eliminar" id ="btnEliminar" onclick="paneleliminar.show();"></h:commandButton> </ace:column> </ace:panel> <ace:dialog id="dgpanelnuevo" header="Nuevo" closable="false" modal="true" widgetVar="panelnuevo"> <h:form id="Ingresar"> <h:panelGrid columns="2"> <h:outputText value="Codigo"/> <h:inputText required="true" value="#{cEstudiante.estud.cod_est}"/> <h:outputText value="Nombres"/> <h:inputText value="#{cEstudiante.estud.nombres}"/> <h:outputText value="Apellidos"/> <h:inputText value="#{cEstudiante.estud.apellidos}"/> <h:outputText value="Cedula"/> <h:inputText value="#{cEstudiante.estud.cedula}"/>

13

ESCUELA SUPERIOR POLITCNICA DE CHIMBORAZO FACULTAD DE INFORMTICA Y ELECTRNICA ESCUELA DE INGENIERA EN SISTEMAS

<h:outputText value="Nivel"/> <h:inputText value="#{cEstudiante.estud.nivel}"/> <h:commandButton value="Ingresar" id="btnAceptar" action="#{cEstudiante.insertar()}" onclick="panelnuevo.hide();"></h:commandButton> <h:commandButton value="Cancelar" id="btnCancelar" onclick="panelnuevo.hide();"></h:commandButton> </h:panelGrid> </h:form> </ace:dialog> <ace:dialog id="dgpanelmodificar" header="Modificar" closable="false" modal="true" widgetVar="panelmodificar"> <h:form id="Modificar"> <h:panelGrid columns="2"> <h:outputText value="Codigo"/> <h:inputText required="true" value="#{cEstudiante.estud.cod_est}"/> <h:outputText value="Nombres"/> <h:inputText value="#{cEstudiante.estud.nombres}"/> <h:outputText value="Apellidos"/> <h:inputText value="#{cEstudiante.estud.apellidos}"/> <h:outputText value="Cedula"/> <h:inputText value="#{cEstudiante.estud.cedula}"/> <h:outputText value="Nivel"/> <h:inputText value="#{cEstudiante.estud.nivel}"/> <h:commandButton value="Modificar" id="btnAceptar" action="#{cEstudiante.modificar()}" onclick="panelmodificar.hide();"></h:commandButton> <h:commandButton value="Cancelar" id="btnCancelar" onclick="panelmodificar.hide();"></h:commandButton> </h:panelGrid>

14

ESCUELA SUPERIOR POLITCNICA DE CHIMBORAZO FACULTAD DE INFORMTICA Y ELECTRNICA ESCUELA DE INGENIERA EN SISTEMAS

</h:form> </ace:dialog> <ace:dialog id="dgpaneleliminar" header="Eliminar" closable="false" modal="true" widgetVar="paneleliminar"> <h:form id="Eliminar"> <h:panelGrid columns="2"> <h:outputText value="Codigo"/> <h:inputText required="true" value="#{cEstudiante.estud.cod_est}"/> <h:commandButton value="Eliminar" id="btnAceptar" action="#{cEstudiante.eliminar()}" onclick="paneleliminar.hide();"></h:commandButton> <h:commandButton value="Cancelar" id="btnCancelar" onclick="paneleliminar.hide();"></h:commandButton> </h:panelGrid> </h:form> </ace:dialog> </h:body> </html> Para comprobar que la aplicacin se ejecuta adecuadamente damos clic derecho en el index.xhtml y ejecutamos la aplicacin.

15