index

Copiamos el contenido del archivo index.xhtml que esta almacenado en la caperta descomprimida jsftemplate.

lo copiamos en el archivo index.html

Indicamos el paquete donde esta almacenado el archivo messages.

<h:head>
        <f:facet name="first">
            <f:view locale="#{idiomas.locale}"></f:view>
            <f:loadBundle basename="com.javscaz.tallerjsd.properties.messages" var="msg" />

        </f:facet>

Codigo Completo

<!DOCTYPE html>
<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:b="http://bootsfaces.net/ui"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <f:facet name="first">
            <f:view locale="#{idiomas.locale}"></f:view>
            <f:loadBundle basename="com.javscaz.tallerjsd.properties.messages" var="msg" />





        </f:facet>
        <title>#{msg['application.title']}</title>
        <!-- Bootstrap core CSS -->

        <link rel="stylesheet" type="text/css"
              href="#{request.contextPath}/resources/bootstrap/css/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css"
              href="#{request.contextPath}/resources/dist/css/AdminLTE.min.css" />
        <link rel="stylesheet" type="text/css"
              href="#{request.contextPath}/resources/dist/css/skins/skin-blue.min.css" />


        <link rel="stylesheet" type="text/css"
              href="#{request.contextPath}/resources/bootstrapcdn/css/font-awesome.min.css" />
        <link rel="stylesheet" type="text/css"
              href="#{request.contextPath}/resources/ionicframework/css/ionicons.min.css" />
        <h:outputStylesheet library="css" name="bootstrap-reset.css"/>
        <h:outputStylesheet library="webjars" name="font-awesome/4.6.3/css/font-awesome-jsf.css" />
        <h:outputStylesheet library="css" name="style-responsive.css"/>
        <h:outputStylesheet library="css" name="pfcrud.css"/>
        <h:outputStylesheet library="css" name="style.css"/>
        <style type="text/css">

            .ui-growl {
                right: 50%;
                top: 20%;
            }
        </style>





    </h:head>
    <h:body class="hold-transition skin-blue sidebar-mini">
        <f:view >


                <div class="wrapper">

                    <!-- Main Header -->
                    <header class="main-header">

                        <ui:include src="/pages/top.xhtml"/> 
                    </header>
                    <!-- Left side column. contains the logo and sidebar -->
                    <aside class="main-sidebar">
                        <!-- sidebar: style can be found in sidebar.less -->
                        <section class="sidebar">
                            <ui:include src="/pages/left.xhtml"/> 
                        </section>
                        <!-- /.sidebar -->
                    </aside>

                    <!-- Content Wrapper. Contains page content -->
                    <div class="content-wrapper">
                        <!-- Content Header (Page header) -->
                        <section class="content-header">

                            <h1>
                                #{msg['application.title']}
                                <small>Optional description</small>
                            </h1>
<!--                            <ol class="breadcrumb">
                                <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
                                <li class="active">Here</li>
                            </ol>-->
                        </section>

                        <!-- Main content -->
                        <section class="content" >
                            <h:form id="form" rendered="#{!loginController.loggedIn}">

                            <p:messages  id="growl"/>
                            <div class="row form-body">  
                                <p:growl id="msgs" widgetVar="growl"/>
                                <div class="form-group row">
                                    <p:outputLabel  class="col-xs-2 col-form-label" value="#{msg['login.username']}"/>



                                    <div class="col-xs-4">
                                        <p:inputText value="#{loginController.username}"  class="login-input" id="username" placeholder="#{msg['login.email']}"/>
                                    </div>

                                </div>           


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



                                    <div class="col-xs-4">
                                        <p:password value="#{loginController.password}" class="login-input" id="password" placeholder="#{msg['login.password']}"/>
                                    </div>

                                </div>   





                                <div class="form-group row">
                                    <div class="col-xs-4">
                                        <p:commandButton value="#{msg['boton.login']}"  class="btnn btnn-primary login-btn"
                                                     action="#{loginController.doLogin()}" update=":form:growl"/>
                                    </div>

                                </div>

                            </div> 
                            </h:form>
                        </section><!-- /.content -->
                    </div><!-- /.content-wrapper -->

                    <!-- Main Footer -->
                    <ui:include src="/pages/footer.xhtml"/> 
                    <ui:include src="/pages/rigth.xhtml"/> 




                    <!-- Add the sidebar's background. This div must be placed
                         immediately after the control sidebar -->
                    <div class="control-sidebar-bg"></div>
                </div><!-- ./wrapper -->

                <!-- REQUIRED JS SCRIPTS -->


                <script type="text/javascript" src="#{request.contextPath}/resources/bootstrap/js/bootstrap.min.js"></script> <!-- Correio -->
                <script type="text/javascript" src="#{request.contextPath}/resources/dist/js/app.min.js"></script> <!-- Correio -->



                <br />
                <!--<h:link outcome="welcomePrimefaces" value="Primefaces welcome page" />-->


        </f:view>
    </h:body>

</html>

Al entrar en el navegador

http://localhost:8080/tallerjsd/faces/index.xhtml

Si se muestran errores como , no se preocupe solo edite el archivo left.xhtml y edite las opciones de menu que aun no se han creado.

Last updated