Introducción

Vamos a realizar una calculadora aritmetica con dos parámetros. Para poder realizar este ejercicio debes de tener las siguientes requerimientos:

Abrimos nuestro eclipse y creamos un proyecto maven.File->New->MavenProject

Login Test

Seleccionamos en Create a simple project y presionamos Next

Login Test
LLenamos los siguientes campos: Presionamos Finish
Calculadora

Una vez generado nuestro proyecto maven nos vamos al archivo pom.xml y pegamos el siguiente código esta para poder compilar con java 1.8.

   <build>
    <plugins>
      <plugin>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.3</version>
        <configuration>
           <source>1.8</source>
           <target>1.8</target>
        </configuration>
      </plugin> 
    </plugins>
   </build>
Ahora vemos que tenemos un problema nos vamos a nuestro proyecto y le damos clic derecho donde dice Maven->Update Project..
Login Test
Nos marcara un error que no encuentra el archivo web.xml pero lo solucionaremos de la siguiente manera, hacemos clic derecho en el proyecto y selecionamos Properties
Login Test
Selecionamos Project Facets en el recuadro seleccionamos Dynamic Web Module 3.1 y Java Server Faces 2.2 y presionamos Apply posterriormente OK Login Test
Creamos una carpeta en src/main/webapp llamada WEB-INF.
En el directorio WEB-INF creamos el archivo web.xml y escribimos lo siguiente: 
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee  http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
 <context-param>
  <param-name>javax.faces.PROJECT_STAGE</param-name>
  <param-value>Development</param-value>
 </context-param>
 <context-param>
  <param-name>primefaces.THEME</param-name>
  <param-value>cupertino</param-value>
 </context-param>
 <servlet>
  <servlet-name>Faces Servlet</servlet-name>
  <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
  <load-on-startup>1</load-on-startup>
 </servlet>
 <servlet-mapping>
  <servlet-name>Faces Servlet</servlet-name>
  <url-pattern>/faces/*</url-pattern>
 </servlet-mapping>
 <session-config>
  <session-timeout>30</session-timeout>
 </session-config>
 <welcome-file-list>
  <welcome-file>faces/index.xhtml</welcome-file>
 </welcome-file-list>
</web-app>
En el mismo directorio WEB-INF creamos el archivo faces-config.xml y escribimos lo siguiente: 
<?xml version="1.0" encoding="UTF-8"?>
<faces-config
    xmlns="http://xmlns.jcp.org/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
    version="2.2">

</faces-config>
Ahora agregamos todas las dependencias y así es como quedaría nuestro archivo pom.xml 
  <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.tutosoftware.calculadora</groupId>
  <artifactId>calculadora</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  <name>Calculadora Aritmetica</name>
  
  <repositories>
    <repository>
        <id>prime-repo</id>
        <name>PrimeFaces Maven Repository</name>
        <url>http://repository.primefaces.org/</url>
        <layout>default</layout>
    </repository>
</repositories>
  
  
  
  <dependencies>
  
 	<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-api</artifactId>
			<version>2.2.10</version>
		</dependency>
		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-impl</artifactId>
			<version>2.2.10</version>
		</dependency>

		<!-- http://repo1.maven.org/maven -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>

		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<version>2.5</version>
			<scope>provided</scope>
		</dependency>

		<dependency>
			<groupId>javax.servlet.jsp</groupId>
			<artifactId>jsp-api</artifactId>
			<version>2.1</version>
			<scope>provided</scope>
		</dependency>

		<dependency>
			<groupId>com.sun.el</groupId>
			<artifactId>el-ri</artifactId>
			<version>1.0</version>
		</dependency>
		<dependency>
			<groupId>javax</groupId>
			<artifactId>javaee-web-api</artifactId>
			<version>7.0</version>
			<scope>provided</scope>
		</dependency>

		<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>6.2</version>
     </dependency>
     
   <!-- https://mvnrepository.com/artifact/org.primefaces.themes/mint-choc -->
<dependency>
    <groupId>org.primefaces.themes</groupId>
    <artifactId>all-themes</artifactId>
    <version>1.0.10</version>
</dependency>
     
     
     
	</dependencies>
 
 
  <build>
    <plugins>
      <plugin>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.3</version>
        <configuration>
           <source>1.8</source>
           <target>1.8</target>
        </configuration>
      </plugin> 
    </plugins>
   </build>
  
  
</project>
En src/main/java creamos el paquete com.tutosoftware.calculadora.bean
En el paquete com.tutosoftware.calculadora.bean creamos la clase Calculadora y escribimos:
package com.tutosoftware.calculadora.bean;

import java.io.Serializable;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped
public class Calculadora implements Serializable {
	
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	private double parametro1;
	private double parametro2;
	private double resultado;
	public double getParametro1() {
		return parametro1;
	}
	public void setParametro1(double parametro1) {
		this.parametro1 = parametro1;
	}
	public double getParametro2() {
		return parametro2;
	}
	public void setParametro2(double parametro2) {
		this.parametro2 = parametro2;
	}
	public double getResultado() {
		return resultado;
	}
	public void setResultado(double resultado) {
		this.resultado = resultado;
	}
	
	public String suma(){
		resultado = parametro1+parametro2;
		return "";
	}
	
	public String resta(){
		resultado = parametro1-parametro2;
		return "";
	}
	
	public String multiplicacion(){
		resultado = parametro1*parametro2;
		return "";
	}
	public String division(){
		resultado = parametro1/parametro2;
		return "";
	}

}
En src/main/webapp creamos el archivo index.xhtml
  <html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
     
    <h:head>
    <title>Calculadora aritmética</title>
    </h:head>
 
    <h:body>
      <h:form>
      <p:panelGrid class="ui-noborder">
       <f:facet name="header">  
            <p:row>  
                <p:column style="font-weight: bold;">Introduce los parámetros</p:column>  
                 <p:column style="font-weight: bold;"></p:column>  
            </p:row>  
        </f:facet>
      
       <p:row>  
           <p:column>  
               <h:outputLabel value="Parametro1: "/>
            </p:column>  
            <p:column>  
                <p:inputNumber id="parametro1" value="#{calculadora.parametro1}">  
                    <p:ajax update="parametro1" />  
                </p:inputNumber>  
            </p:column>  
       </p:row>
       <p:row>  
           <p:column>  
               <h:outputLabel value="Parametro2: "/>
            </p:column>  
            <p:column>  
                <p:inputNumber id="parametro2" value="#{calculadora.parametro2}">  
                    <p:ajax update="parametro2" />  
                </p:inputNumber>  
            </p:column>  
       </p:row>
      
        <p:row>  
           <p:column>  
             <h:commandButton value="Suma" action="#{calculadora.suma}"/>
              <h:commandButton value="Resta" action="#{calculadora.resta}"/>
             <h:commandButton value="Multiplicación" action="#{calculadora.multiplicacion}"/>
              <h:commandButton value="División" action="#{calculadora.division}"/>
            </p:column>  
       </p:row>
      
       <p:row>  
           <p:column>  
             <h:outputLabel value="Resultado: "/>
              <h:outputText value="#{calculadora.resultado}"/>
              </p:column>   
       </p:row>
      
         
         
         </p:panelGrid>
      
      
      
      </h:form>  
        
        
        
        
    </h:body>
</html>
Corremos nuestro ejemplo y el resultado es el siguiente:
Login Test
En el primer parametro agregamos 10 y en segundo 5 y le damos sumar
Login Test
Ahora presionamos resta
Login Test
Probamos multiplicación:
Login Test
Por último la división:
Login Test

Conclusión

Como nos dimos cuenta ahora utilizamos primefaces y le agregamos un tema pero no olvidar que para agregar el tema con maven debemos de agregar el repositorio de primefaces y en el web.xml agregar un context-param.

Código

https://github.com/josmarlara/calculadora.git