* las ventanas emergentes (modales) cuando el contenido es grande ya tienes que pensar en otra solución
* las tablas en su distribución de columnas no se estrechan de manera automática debes asignar un ancho al misma o nuevamente pensar en otra solución adicional (CSS u otros)
bootstrap respecto a los puntos anteriores es más flexible y ofrece una solución más llamativa
Empecemos ...
No te olvides que los recursos de bootstrap, hojas de estilo e imágenes deben de ir en la carpeta "resources"
Archivo Template: WEB-INF/template.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>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="shortcut icon" type="image/png" href="#{request.contextPath}/resources/images/favicon.png" />
<title>MI PAGINITA</title>
</f:facet>
<f:facet name="middle">
<h:outputStylesheet name="bootstrap/css/bootstrap.css" />
// acá va tu hoja de estilos personalizada
<h:outputStylesheet name="assets/css/style.css" />
<h:outputScript name="vendors/jquery-1.9.1.js" />
<h:outputScript name="bootstrap/js/bootstrap.js" />
</f:facet>
<f:facet name="last">
// este tag es para agregar algunos archivos de jquery u hoja de estilos CSS en los contenidos del template (importante)
<ui:insert name="head" />
</f:facet>
</h:head>
<h:body>
<section id="container">
<ui:include src="header.xhtml" />
<ui:include src="content.xhtml" />
</section>
<ui:insert name="status">
<p:ajaxStatus style="width:64px;height:64px;position:fixed;right:5px;bottom:5px">
<f:facet name="start">
<p:graphicImage name="images/ajax-loader.gif" />
</f:facet>
<f:facet name="complete">
<h:outputText value="" />
</f:facet>
</p:ajaxStatus>
</ui:insert>
</h:body>
</html>
algunos detalles que debemos rescatar es sobre lo anterior:
* assets/css/style.css : es tu hoja de estilos que importas para darle mayor detalle a tu vista
* por ahora en tu plantilla principal no cargues demasiados CSS y JS para no recargar el resto de páginas que quizás no requieran, los archivos que importes lo harás en el tag de "head"
Archivo: "WEB-INF/header.xhtml"
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:c3="http://java.sun.com/jsp/jstl/core" xmlns:ui="http://java.sun.com/jsf/facelets">
<header class="header black-bg">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
<a href="#{request.contextPath}/index.xhtml" class="logo"><b>PEJTU</b></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="#{request.contextPath}/view/pagina_dash.xhtml">Principal</a></li>
<li><a href="#{request.contextPath}/view/help.xhtml">Ayuda</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<c3:if test="${request.userPrincipal == null}">
<li><a href="${request.contextPath}/login.xhtml">Login</a></li>
</c3:if>
<c3:if test="${request.userPrincipal != null}">
<li class="dropdown"><a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-user"></i> <h:outputText
value="#{visitBean.usuario.usrLogin}" /><i class="caret"></i>
</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="${request.contextPath}/view/secadmin/cambiar_passw.xhtml">Cambiar Password</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="${request.contextPath}/logout">Logout</a></li>
</ul></li>
</c3:if>
</ul>
</div>
</div>
</header>
</ui:composition>
Del anterior:
* el encabezado es un template básico
* Existen varios templates muy llamativos para decorar el encabezado, el que se muestra es de acuerdo al archivo assets/css/style.css que se declaró en el template principal
Archivo: "WEB-INF/content.xhtml"
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<section id="main-content" style="margin-left: 0px;">
<section class="wrapper site-min-height">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-12">
<ui:insert name="submenuleft" />
</div>
<div class="col-lg-10 col-md-10 col-sm-12">
<ui:insert name="implementation">
</ui:insert>
</div>
</div>
</section>
</section>
</ui:composition>
El comportamiento que deseaba era que el menú izquierdo se apile a la parte superior del contenido, ahora existen varios que prefieren
En el
<ui:insert name="implementation"> insertarás el contenido de cada página que desarrolles En el <ui:insert name="submenuleft" /> insertarás el menú que desees a continuación copio un ejemplo del mismo pero ya agregando objetos PrimefacesArchivo: "pages/menuizq.xhmt"
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"
template="/WEB-INF/template.xhtml">
<ui:define name="submenuleft">
<h:form id="formopt">
<div class="col-lg-12 col-md-12 col-sm-4">
<p:panelMenu>
<p:submenu label="Operaciones">
<p:menuitem value="Operación 1"
actionListener="#" />
...
</p:submenu>
</p:panelMenu>
</div>
<div class="col-lg-12 col-md-12 col-sm-4">
<p:panelMenu>
<p:submenu label="Administración">
<p:menuitem value="Personas"
actionListener="#" />
</p:submenu>
</p:panelMenu>
</div>
<div class="col-lg-12 col-md-12 col-sm-4">
<p:panelMenu>
<p:submenu label="Otros">
<p:menuitem value="Tipos de mensaje"
actionListener="#" />
</p:submenu>
</p:panelMenu>
</div>
</h:form>
</ui:define>
</ui:composition>
No hay comentarios:
Publicar un comentario