Crearemos la pagina login.xhtml que mostrara una campo para ingresar el username y otro para el password, y un botón Login.
Crearemos la pagina dentro de Web Pages
Vista de la pagina
Debemos indicar el paquete donde esta ubicado el archivo messages en <f:loadBundle>
Last updated
Was this helpful?
Was this helpful?
<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><!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">
<p:growl id="growl"/>
<h1>
#{msg['login.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}">-->
<h:form id="form" >
<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 />
</f:view>
</h:body>
</html>