Vistas

En el directorio src/main/webapp creamos la carpeta images y el pegamos la siguientes imagenes:
Por último vamos con las vistas creamos en src/main/webapp el archivo plantilla.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:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
    
    <h:head>
    </h:head>

    <h:body>
    
    
 <ui:insert name="header">
				<ui:include src="encabezado.xhtml"></ui:include>
</ui:insert>
  <ui:insert name="content">
				<ui:include src="contenido.xhtml"></ui:include>
</ui:insert>      
        
    </h:body>
</html>

En el mismo directorio creamos la clase encabezado.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:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
    
    <h:head>
    </h:head>

    <h:body>
    
    
    <ui:composition>
        <div class="card">
    <h:form>
<p:growl id="messages"/>
<p:menubar>
<p:submenu label="Porcentaje de Bateo" icon="ui-icon-document">

<p:separator />

</p:submenu>

</p:menubar>

</h:form>

</div>
        
    </ui:composition>    
                
        
    </h:body>
</html>

Creamos el archivo contenido.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:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
    
    <h:head>
    </h:head>

    <h:body>
    
    
  <ui:composition>
     
       <h1>Bienvenido a Llaneros de San Luis</h1>
      
      
        
  </ui:composition>              
        
    </h:body>
</html>

Realizamos la vista login.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:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
    
    <h:head>
    </h:head>

    <h:body>
    
    <div style="margin:0 auto;width:70%">
 <ui:composition template="plantilla.xhtml" >
 <ui:define name="content"  >
 
 
 
 <h:form>
 <p:growl id="messagesLogin"/>
  <p:panel header="Ingresar usuario y contraseña" footer="Tutosoftware">
  
  
  <h:panelGrid columns="2" cellpadding="5">
<h:outputLabel value="Email:" for="email"  style="color:white" />
<p:inputText id="email"   value="#{loginView.email}" required="true" label="usuario">
</p:inputText>

<h:outputLabel value="Contraseña:" for="password" style="color:white"  />
<p:password id="password" value="#{loginView.password}"     required="true" label="password">
</p:password>

<f:facet name="footer">

<p:commandButton  value="Acceder" action="#{loginView.loginScore}" update="messagesLogin" >  </p:commandButton>

</f:facet>

</h:panelGrid>
  
  
  
  
        
   </p:panel>
 
 
 
 
 
 
 
 </h:form>
 
 
 

 
 
 
 </ui:define>
 </ui:composition>
 
      </div>   
    </h:body>
</html>

Creamos el segundo template que es el administrador en el mismo directorio creamos plantillaAdmin.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:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
    
    <h:head>
    </h:head>

    <h:body>
    
    
 <ui:insert name="headerAdmin">
				<ui:include src="encabezadoAdmin.xhtml"></ui:include>
</ui:insert>
  <ui:insert name="contentAdmin">
				<ui:include src="contenidoAdmin.xhtml"></ui:include>
</ui:insert>      
        
    </h:body>
</html>

Creamos el archivo encabezadoAdmin.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:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:c="http://java.sun.com/jstl/core">
  
    <h:head>
    </h:head>

    <h:body>
    
    
    <ui:composition>
        <div class="card">
    <h:form>
<p:growl id="messages"/>
<p:menubar>
<p:submenu label="Porcentaje de Bateo" icon="ui-icon-document">


<p:separator />

</p:submenu>
<p:submenu label="Acciones" icon="ui-icon-pencil">
<p:menuitem value="Generar Temporada"  outcome="agregarTemporada"  />
<p:menuitem value="Registrar Jugador"  outcome="agregarJugador"  />
<p:menuitem value="AgregarPorcentaje"  outcome="agregarPorcentaje"  />
</p:submenu>


<p:menuitem value="Salir" action="#{loginView.logout()}" icon="ui-icon-close" />

</p:menubar>

</h:form>

</div>
        
    </ui:composition>    
                
        
    </h:body>
</html>

Creamos el archivo contenidoAdmin.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:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
    
    <h:head>
    </h:head>

    <h:body>
    
    
  <ui:composition>
    <h:form> 
    <p:panel header="Porcentaje de bateo" footer="Tutosoftware">
       
      
      <p>Elige la opción de menú que necesites realizar.</p>
      
      
      <h:graphicImage url="/images/milogo.jpg" />
      </p:panel>
      
     </h:form> 
     
     
     
      
        
  </ui:composition>              
        
    </h:body>
</html>

Creamos el archivo admin.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:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
    
    <h:head>
    </h:head>

    <h:body>
    
    <ui:composition template="plantillaAdmin.xhtml">
	</ui:composition>
    
        
        
                
        
    </h:body>
</html>

Creamos el archivo agregarJugador.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:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
    
    <h:head>

  
    
    </h:head>

    <h:body>
    
    <div style="margin:0 auto;width:70%">
 <ui:composition template="plantillaAdmin.xhtml" >
 <ui:define name="contentAdmin"  >
 
 
 
 <h:form  id="form">
 <p:growl id="messagesLogin"/>
  <p:panel header="Agregar Jugador" footer="Tutosoftware 2021">
  
  
 <h:panelGrid columns="3" cellpadding="5">
 
 
                 <p:outputLabel for="@next" value="Seleccionar Temporada"   style="color:white"  />
                <p:selectOneMenu id="idTemporada" value="#{jugadorView.idTemporada}"  
                required="true" requiredMessage="Selecionar temporada"  >
                    <f:selectItem itemLabel="Seleccionar Temporada" itemValue=""/>
                    <f:selectItems value="#{jugadorView.listaTemporada}"  var="temporada" 
                    itemLabel="#{temporada.nombreTemporada}"  itemValue="#{temporada.idTemporada}"  />
                </p:selectOneMenu>
                <p:message for="idTemporada"></p:message>
 
                <p:photoCam widgetVar="pc" listener="#{jugadorView.oncapture}" update="photo"/>
            <p:commandButton type="button" value="Capture" onclick="PF('pc').capture()"/>
            <p:outputPanel id="photo">
                <p:graphicImage value="#{pageContext.contextPath}/images/tmp/#{jugadorView.foto}.jpeg"
                                rendered="#{not empty jugadorView.foto}"/>
            </p:outputPanel>
 
 
           <h:outputLabel value="Nombre:" for="nombre"  style="color:white" />
        <p:inputText id="nombre"   value="#{jugadorView.nombre}" 
 size="50" required="true" requiredMessage="Nombre requerido" >
</p:inputText>
<p:message for="nombre"></p:message>

          <h:outputLabel value="Apellido Paterno:" for="apellidoPaterno"  style="color:white" />
        <p:inputText id="apellidoPaterno"   value="#{jugadorView.apellidoPaterno}" 
 size="50" required="true" requiredMessage="Apellido Paterno requerido" >
</p:inputText>
<p:message for="apellidoPaterno"></p:message>

  <h:outputLabel value="Apellido Materno:" for="apellidoMaterno"  style="color:white" />
        <p:inputText id="apellidoMaterno"   value="#{jugadorView.apellidoMaterno}" 
 size="50" >
</p:inputText>
<p:separator></p:separator>



 





<f:facet name="footer">

<p:commandButton  value="Agregar Jugador" action="#{jugadorView.guardarJugador}"  update="form" ></p:commandButton>

</f:facet>

</h:panelGrid>
  
  
  
  
        
   </p:panel>
 
 
 
  </h:form>	
 
 
 
 </ui:define>
 </ui:composition>
 
      </div>   
    </h:body>
</html>

Creamos la clase agregarTemporada.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:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
    
    <h:head>
    </h:head>

    <h:body>
    
    <div style="margin:0 auto;width:70%">
 <ui:composition template="plantillaAdmin.xhtml" >
 <ui:define name="contentAdmin"  >
 
 
 
 <h:form  id="form">
 <p:growl id="messagesLogin"/>
  <p:panel header="Agregar Temporada de bateo" footer="Tutosoftware 2021">
  
  
 <h:panelGrid columns="3" cellpadding="5">
<h:outputLabel value="Nombre de la temporada:" for="nombreTemporada"  style="color:white" />
<p:inputText id="nombreTemporada"   value="#{temporadaView.nombreTemporada}" 
 size="100" required="true" requiredMessage="Nombre de la temporada requerido" >
</p:inputText>
<p:message for="nombreTemporada"></p:message>








<f:facet name="footer">

<p:commandButton  value="Crear Temporada"  action="#{temporadaView.crearTemporada}" update="form" ></p:commandButton>

</f:facet>

</h:panelGrid>
  
  
  
  
        
   </p:panel>
 
 
 
  </h:form>	
 
 
 
 </ui:define>
 </ui:composition>
 
      </div>   
    </h:body>
</html>

Creamos la vista agregarPorcentaje.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:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
     >
    
    <h:head>
   
    
    
    
    </h:head>

    <h:body>
    
    <div style="margin:0 auto;width:70%">
 <ui:composition template="plantillaAdmin.xhtml" >
 <ui:define name="contentAdmin"  >
 
 
 
 <h:form  id="form">
 <p:growl id="messagesLogin"/>
 <p:panel header="Agregar Porcentaje" footer="Tutosoftware 2022">
  <p:outputLabel for="@next" value="Seleccionar Temporada"   style="color:white"  />
                <p:selectOneMenu id="idTemporada" value="#{porcentajeView.idTemporada}"  
                required="true" requiredMessage="Selecionar temporada"  >
                    <f:selectItem itemLabel="Seleccionar Temporada" itemValue=""/>
                    <f:selectItems value="#{porcentajeView.listaTemporada}"  var="temporada" 
                    itemLabel="#{temporada.nombreTemporada}"  itemValue="#{temporada.idTemporada}"  />
                </p:selectOneMenu>
                <p:message for="idTemporada"></p:message>
  <br />
  
<p:commandButton  value="Mostrar Jugadores" action="#{porcentajeView.mostrarJugadoresPorTemporada}"  update="form,jugadores" ></p:commandButton>  
  <br />
  
  
  <p:dataTable  lazy="true" dynamic="true"
id="jugadores"  var="j"  value="#{porcentajeView.listaJugador}" editable="true" style="margin-bottom:20px">
<f:facet name="header">

Jugadores
</f:facet>





<p:column headerText="ID Juagador">

<h:outputText value="#{j.idJugador}" />
</p:column>
<p:column headerText="Fotografia">
 <p:graphicImage value="#{j.imagen}" stream="false"/>
</p:column>
<p:column headerText="Nombre jugador">
<h:outputText value="#{j.nombre} #{j.apellidoPaterno} #{j.apellidoMaterno}" />
</p:column>
<p:column headerText="Número de Veces al Bat">

<h:outputText value="#{j.numVecesBat}" />
</p:column>
<p:column headerText="Número de Hits">
<h:outputText value="#{j.numHit}" />
</p:column>
<p:column headerText="Ultima Fecha Jugada">

<h:outputText value="#{j.fechaUltimoJuego}" />

</p:column>
<p:column headerText="Porcentaje">

<h:outputText value="#{j.porcentaje}" />

</p:column>
<p:column exportable="false">
                <p:commandButton icon="pi pi-pencil" update=":form:manage-gamer-content"
                                 oncomplete="PF('manageGamerDialog').show()"
                                 styleClass="edit-button rounded-button ui-button-success" process="@this">
                    <f:setPropertyActionListener value="#{j}" target="#{porcentajeView.jugador}"/>
                    <p:resetInput target=":form:manage-gamer-content"/>
                </p:commandButton>
               
            </p:column>


</p:dataTable>
  
    <p:dialog header="Detalle del Jugador" showEffect="fade" modal="true"
                  widgetVar="manageGamerDialog" responsive="true">
            <p:outputPanel id="manage-gamer-content" class="ui-fluid">
                <p:outputPanel rendered="#{not empty porcentajeView.jugador}">
                
                <div class="p-field">
                 <p:outputLabel for="idJugador">ID Jugador</p:outputLabel>
                  <p:inputText id="idJugador" value="#{porcentajeView.jugador.idJugador}" disabled="true" />
              </div>
                
                <div class="p-field">
                 <p:outputLabel for="idTem">ID Temporada</p:outputLabel>
                  <p:inputText id="idTem" value="#{porcentajeView.jugador.idTemporada}" disabled="true" />
              </div>
                
                   
              <div class="p-field">
                 <p:outputLabel for="nombre">Nombre</p:outputLabel>
                  <p:inputText id="nombre" value="#{porcentajeView.jugador.nombre}" disabled="true" />
              </div>
              
             
              
              <div class="p-field">
                 <p:outputLabel for="numVecesBat">Número de Veces al Bat</p:outputLabel>
                  <p:inputText id="numVecesBat" value="#{porcentajeView.jugador.numVecesBat}" disabled="true" />
              </div>
              
              <div class="p-field">
                 <p:outputLabel for="numHit">Número de Veces al Bat</p:outputLabel>
                  <p:inputText id="numHit" value="#{porcentajeView.jugador.numHit}" disabled="true" />
              </div>
              
              
              
              
             
              
              <div class="p-field">
                 <p:outputLabel for="bats">Introducir Número de Veces al Bat</p:outputLabel>
                  <p:inputText id="bats" value="#{porcentajeView.bats}" required="true" requiredMessage="Número de vecas al bat requerido" />
                  <p:message for="bats"></p:message>
              </div>
              
              <div class="p-field">
                 <p:outputLabel for="hits">Introducir Número de Hits</p:outputLabel>
                  <p:inputText id="hits" value="#{porcentajeView.hits}"  required="true" requiredMessage="Número de hits requerido" />
                  <p:message for="hits"></p:message>
              </div>
              
                 
            </p:outputPanel>
            </p:outputPanel>

           <f:facet name="footer">
                <p:commandButton value="Actualizar Porcentaje" icon="pi pi-check" actionListener="#{porcentajeView.actualizarPorcentaje}"
                    update="manage-gamer-content" process="manage-gamer-content @this" />
               
            </f:facet>
 
        </p:dialog>
  
  
    

        
   </p:panel>
 
 
 
  </h:form>	
 
 
 
 </ui:define>
 </ui:composition>
 
      </div>   
    </h:body>
</html>





Anterior Siguiente