Workshop 1: CRUD Java EE (Parte 2)

Workshop: CRUD Java EE

Author(s): Hilmer Ch. @Hchona , Andres Calle @MrACalle

Description: Crear, Consultar, Actualizar y Eliminar (CRUD de las siglas en inglés Create-Read-Update, Delete) son las 4 funciones básicas que componen un software. Este taller enseña cómo crear un CRUD dentro de una aplicación web para gestionar los productos de una tienda.
Level: Básico
Time:
Tools: Netbeans 8.0.2 + Glassfish 4.1, Oracle database express edition

Nota: El siguiente Workshop sera realizado para trabajar con una base de datos Oracle. En el Workshop 2: Database for CRUD encontrara las instrucciones para instalar y configurar la base de datos.

Cuando ejecutemos nuestra aplicación del CRUD obtendremos un resultado como el de la siguiente imagen:

crud

Paso 1: (Open netbeans)
File > New Project > Java EE > Enterprise Application
Next
Project  Name: demo1
Project Location: C:\demos
Project Folder:  C:\demos\demo1
Next
Server: GlassFish Server 4.1
Java EE version: Java EE7
Create EJB Module: demo-ejb
Create Web Application Module: demo-war
Finish

Paso 2:

Save the oracle driver (ojdbc_.jar)  on GLASSFISH_DIR\glassfish\domains\domain1\lib
Services > Servers > Rigth Click in GlassFish Server 4.1 > Start
On an internet browser go to URL http://localhost:4848
JDBC > JDBC Connection Pools > New…
Pool name: demos_java
Resource Type: javax.sql.DataSource
Database Driver Vendor: Oracle
Next
Additional properties >
Delete all properties except :
– User
– URL
– Password
Delete Properties
User: demos_java
URL: jdbc:oracle:thin:@localhost:1521:XE
Password: 123
Finish
 
Click in demos_java
Ping
Note: if you did right the steps, will display a message that say “Ping Succeeded”

Paso 3:
JDBC > JDBC Resources > New…
JNDI Name: jdbc/demos_java
Pool Name: demos_java
OK

Paso 4: In netbeans
Right click on demo-ejb > New > Entities Classes from Database
Database Source: New Data Source
JDNI Name: jdbc/demos_java
Database Connection: New Database Connection
Driver: Oracle Thin
Driver File(s): C:\demos\ojdbc7.jar
Next
Driver Name: Oracle Thin (Service ID (SID))
Host: localhost (if the database is installed on your computer,
Otherwise the computer/server name or IP)
Port: 1521
Service ID (SID): XE
User name: demos_java
Password: 123
Remember password: Yes
Note: Please Test Connection
JDBC URL: jdbc:oracle:thin:@localhost:1521:XE
Next
Select schema: DEMOS_JAVA
Next
JDNI Name: jdbc/demos_java
Database Connection: jdbc:oracle:thin:@localhost:14521:XE [demos_java on DEMO …]
OK
Data Source: java:module/jdbc/demos_java
Selected Tables: PRODUCTO
Next
Project: demo-ejb
Location: Source Packages
Package: entity
Generate Named Query Annotations for Persistent Fields: Yes
Generate JAXB Annotations: Yes
Generate MappedSuperclassess instead of Entities: No
Create Persistence Unit: Yes
Next
Use Column Names in Relationships: Yes
Finish

Paso 5:
Right click on demo-ejb > New > Session Bean For Entity Classes
Entity.Producto
Next
Package: entity
Finish

Paso 6:
Right click on demo-war > New > Other… > JavaServer Faces > JSF Managed Bean
Class name: ProductoManagedBean
Package: view
Scope: session
Finish
Replace the content with this code.

package view;
import entity.Producto;
import entity.ProductoFacade;
import java.util.List;
import javax.ejb.EJB;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class ProductoManagedBean {
@EJB
ProductoFacade productoFacade;
private List productoss;
private Producto producto;
public ProductoManagedBean() {
}
public void findProductoss() {
this.productoss = this.productoFacade.findAll();
}
public String goProductoAction() {
return “producto.xhtml”;
}
public String goAddProductoAction() {
this.producto = new Producto();
return “productoAdd.xhtml”;
}
public String addProductoAction() {
this.productoFacade.create(this.producto);
return this.goMenuAction();
}
public String goUpdProductoAction() {
return “productoUpd.xhtml”;
}
public void updProductoAction() {
this.productoFacade.edit(this.producto);
}
public String goMenuAction() {
return “menu.xhtml”;
}
public Producto getProducto() {
return producto;
}
public void setProducto(Producto producto) {
this.producto = producto;
}
public ProductoFacade getProductoFacade() {
return productoFacade;
}
public void setProductoFacade(ProductoFacade productoFacade) {
this.productoFacade = productoFacade;
}
public List getProductoss() {
return productoss;
}
public void setProductoss(List productoss) {
this.productoss = productoss;
}
}

Preparing graphic workspace
Window > IDE Tools > Palette

Paso 7:
Right click web pages > JSF page…
File name: menu
Finish
Open the file menu.xhtml and and paste next to the tag <h:body> the code above

<f:view>
<h:form>
<h:commandButton value=”Consultar productos” action=”#{productoManagedBean.goProductoAction()}”/>
<h:commandButton value=”Nuevo producto” action=”#{productoManagedBean.goAddProductoAction()}”/>
</h:form>
</f:view>

Paso 8:
Right click web pages > JSF page…
File name: producto
Finish
Open the file producto.xhtml and paste next to the tag <h:body> the code above

<f:view>
<h:form>
<h:panelGrid columns=”2″>
<h:commandButton value=”BUSCAR PRODUCTOS” action=”#{productoManagedBean.findProductoss()}”/>
</h:panelGrid>
<h1>
<h:outputText value=”Productos”/>
</h1>
<h:dataTable value=”#{productoManagedBean.productoss}” var=”item” border=”1″>
<h:column>
<f:facet name=”header”>
<h:outputText value=”Id”/>
</f:facet>
<h:commandLink action=”#{productoManagedBean.goUpdProductoAction()}”>
<f:setPropertyActionListener value=”#{item}” target=”#{productoManagedBean.producto}”/>
<h:outputText value=”#{item.id}”/>
</h:commandLink>
</h:column>
<h:column>
<f:facet name=”header”>
<h:outputText value=”Nombre”/>
</f:facet>
<h:commandLink action=”#{productoManagedBean.goUpdProductoAction()}”>
<f:setPropertyActionListener value=”#{item}” target=”#{productoManagedBean.producto}”/>
<h:outputText value=”#{item.nombre}”/>
</h:commandLink>
</h:column>
<h:column>
<f:facet name=”header”>
<h:outputText value=”Valor”/>
</f:facet>
<h:commandLink action=”#{productoManagedBean.goUpdProductoAction()}”>
<f:setPropertyActionListener value=”#{item}” target=”#{productoManagedBean.producto}”/>
<h:outputText value=”#{item.valor}”/>
</h:commandLink>
</h:column>
</h:dataTable>
</h:form>
</f:view>

Paso 9:
Right click web pages > JSF page…
File name: productoAdd
Finish
Open the file: productoAdd.xhtml and paste next to the tag <h:body> the code above

<f:view>
<h:form>
<h:panelGrid columns=”2″>
<h:outputLabel value=”ID:”/>
<h:inputText value=”#{productoManagedBean.producto.id}” required=”true”/>
<h:outputLabel value=”NOMBRE:”/>
<h:inputText value=”#{productoManagedBean.producto.nombre}” required=”true”/>
<h:outputLabel value=”VALOR:”/>
<h:inputText value=”#{productoManagedBean.producto.valor}” required=”true”/>
</h:panelGrid>
<h:panelGrid columns=”2″>
<h:commandButton value=”INGRESAR” action=”#{productoManagedBean.addProductoAction()}” />
<h:commandButton value=”REGRESAR” action=”#{productoManagedBean.goMenuAction()}” immediate=”true”/>
</h:panelGrid>
</h:form>
</f:view>

Paso 10:
Right click web pages > JSF page…
File name: productoUpd
Finish
Open the file: productoUpd.xhtml and paste next to the tag <h:body> the code above

<f:view>
<h:form>
<h:panelGrid columns=”2″>
<h:outputLabel value=”ID:”/>
<h:outputLabel value=”#{productoManagedBean.producto.id}”/>
<h:outputLabel value=”NOMBRE:”/>
<h:inputText value=”#{productoManagedBean.producto.nombre}” required=”true”/>
<h:outputLabel value=”VALOR:”/>
<h:inputText value=”#{productoManagedBean.producto.valor}” required=”true”/>
</h:panelGrid> <h:panelGrid columns=”2″>
<h:commandButton value=”ACTUALIZAR” action=”#{productoManagedBean.updProductoAction()}” />
<h:commandButton value=”REGRESAR” action=”#{productoManagedBean.goMenuAction()}” immediate=”true” />
</h:panelGrid>
</h:form>
</f:view>

 

Nota: Finalizado este workshop puede continuar con la Parte 3