# Pagina View

Esta página contendrá los botones Editar, Eliminar, Imprimir y Regresar. El diseño final sera similiar a este:

![](/files/-Lc1WnzlcEIEl531IAuH)

Creamos la página de la misma manera que en los ejemplos anteriores

**En el class="row form-header-2" colocamos los botones para las operaciones descritas.**

```
<div class="row form-header-2" style="padding-top: 5px;">
    <div class="col-md-12 record-status-buttons">   
         <p:commandButton class="btnn btnn-primary" value="#{msg['boton.edit']}" process=":form:content" action="#{tipovehiculoController.edit()}" update=":form:content" /> 
         <p:commandButton class="btnn btnn-primary" value="#{msg['boton.delete']}" process=":form:content" action="#{tipovehiculoController.delete()}"  update=":form:content" > 
         <p:confirm header="#{app['dialog.delete']}" message="#{msg['info.doyouwantdelete']}" icon="ui-icon-alert" />
             </p:commandButton>
          <p:commandButton class="btnn btnn-primary" value="#{msg['boton.print']}" process=":form:content" action="#{tipovehiculoController.print()}" 
              ajax="false"
              update=":form:content" /> 

          <p:link class="btnn btnn-primary" value="#{msg['boton.return']}" outcome="/pages/tipovehiculo/list"/>

    </div>
</div>
```

**Colocamos los componentes similar a la pagina create**

Agregar un componente \<p:confirmDialog para personalizar el dialogo para confirmar la eliminación

```
 <p:confirmDialog global="true" showEffect="fade" hideEffect="explode">
     <p:commandButton value="#{msg['boton.yes']}" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
     <p:commandButton value="#{msg['boton.no']}" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
  </p:confirmDialog>
```

![](/files/-Lc1WnzteBaiR8Jwmyae)

## Codigo Completo

```
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:b="http://bootsfaces.net/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:jsf="http://xmlns.jcp.org/jsf">

    <body>

        <ui:composition template="./../../WEB-INF/template.xhtml">
            <ui:define name="top">
                <h1>
                    #{msg['tipovehiculo.title']}
                    <small> </small>
                </h1>

            </ui:define>
            <!--
          Contenido
            -->
            <ui:define name="content">

                <h:form id="form" rendered="#{loginController.loggedIn}">
                    <h:panelGroup id="content" layout="block">           
                        <p:messages id="msgs"/>


                        <div class="row form-header-2" style="padding-top: 5px;">
                            <div class="col-md-12 record-status-buttons">   

                                <p:commandButton class="btnn btnn-primary" value="#{msg['boton.edit']}" process=":form:content" action="#{tipovehiculoController.edit()}" update=":form:content" /> 
                                <p:commandButton class="btnn btnn-primary" value="#{msg['boton.delete']}" process=":form:content" action="#{tipovehiculoController.delete()}"  update=":form:content" > 
                                      <p:confirm header="#{app['dialog.delete']}" message="#{msg['info.doyouwantdelete']}" icon="ui-icon-alert" />
                                </p:commandButton>
                                <p:commandButton class="btnn btnn-primary" value="#{msg['boton.print']}" process=":form:content" action="#{tipovehiculoController.print()}" 
                                                 ajax="false"
                                                 update=":form:content" /> 


                                <p:link class="btnn btnn-primary" value="#{msg['boton.return']}" outcome="/pages/tipovehiculo/list"/>

                            </div>
                        </div>

                        <div class="row form-body">  

                            <div class="form-group row">
                                <p:outputLabel class="col-xs-2 col-form-label" value="#{msg.idtipovehiculo}"/>

                                <div class="col-xs-4">
                                    <p:outputLabel id="name" value="#{tipovehiculoController.tipovehiculo.idtipovehiculo}" class="required form-name-input fullWidth" 
                                                />
                                </div>

                            </div>


                            <div class="form-group row">

                                <p:outputLabel class="col-xs-2 col-form-label" value="#{msg.tipo}"/>
                                <div class="col-xs-4">

                                    <p:inputText id="tipo" class="fullWidth" value="#{tipovehiculoController.tipovehiculo.tipo}"
                                                 placeholder="#{msg.tipo}"  maxlength="55" requiredMessage="#{msg.tipo} #{msg['info.required']}"/>
                                </div>

                            </div>

                              <div class="form-group row">
                                <p:outputLabel class="col-xs-2 col-form-label" value="#{msg.fecha}"/>
                                <div class="col-xs-4">

                                   <p:calendar id="desde" pattern="dd/MM/yyyy"  class="fullWidth required"
                                                selectOtherMonths="true"
                                                navigator="true"                                               
                                                value="#{tipovehiculoController.tipovehiculo.fecha}" title="#{msg.fecha}" >

                                    </p:calendar>
                                </div>                          
                            </div>

                        </div>  

                    </h:panelGroup>               

                    <p:confirmDialog global="true" showEffect="fade" hideEffect="explode">
                            <p:commandButton value="#{msg['boton.yes']}" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
                            <p:commandButton value="#{msg['boton.no']}" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
                        </p:confirmDialog>
                </h:form>

            </ui:define>

        </ui:composition>

    </body>
</html>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://avbravo-2.gitbook.io/jee7/capitulo-3-crud/capitulo-4.-crud/pagina-view.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
