twitter bootstrap - theme - Uso de Primefaces y Bootstrap en JSF
templates jsf primefaces (7)
Incluso ahora usé JSF + Primefaces en mis proyectos y esto me da muchos componentes nuevos (desde las prima faciales) hasta el trabajo.
Pero mi nuevo cliente necesitaba un buen diseño para el Panel de Administrador (Responsive + Clean + Beautiful). Buscando en http://themeforest.net/ encontré una gran cantidad de diseños geniales, pero casi todo es para bootstrap.
Por lo tanto, mi duda es: ¿Puedo seguir utilizando Primefaces (aprovechar componentes potentes) y usar un diseño para bootstrap? ¿Hay alguna limitación?
Puede usar las caras principales en un portal con tema de bootstrap. solo tienes que tener cuidado de establecer tamaños con porcentajes (usa % lugar de px )
en la mayoría de los casos, debe tener sus componentes, p:panelGrid ej. p:panelGrid con tamaño = 100%
<!-- If the screen is too narrow to hold both columns they will be aligned verically -->
<p:panelGrid columns="2" style="width:100%;">
<!-- Left Align -->
<p:panelGrid columns="1" style="width:85%; text-align:left;">
...
</p:panelGrid>
<!-- Right Align ( Controls )-->
<p:panelGrid columns="1" style="width:15%; text-align:right; float:right;">
...
</p:panelGrid>
</p:panelGrid>
Logré integrar un portlet potenciado por Primefaces 4.0 con liferay 6.2 (tiene un tema receptivo), y funcionó bien, fue receptivo y prolijo.
Tendrá algunos problemas aquí y allá con diálogos desbordantes y scrollBars, que generalmente están limitados con tamaños de píxeles fijos, pero es totalmente factible.
También es posible que desee comprobar Primefaces Grid CSS
Primefaces y Bootstrap son difíciles de trabajar juntos. Bootstrap define un grupo de clases CSS (como navbar) que se utilizan en html. Pero las caras principales representan los componentes utilizando sus propias clases CSS (como ui-menubar).
Aunque Primefaces proporciona un tema bootstrap, el tema simplemente hace que los componentes de las primaras se vean como bootstrap. Pero esos componentes todavía se procesan utilizando clases css de primefaces, no clases css de bootstrap.
Durante mucho tiempo busqué la información de mi proyecto para integrar PrimeFaces + JSF y bootstrap, varios dicen que es imposible, pero creo que no es tan cierto, animo a todos a hacerlo.
usted nedeed (modal.js) http://getbootstrap.com/javascript/#modals
private String saludo ="";
public void mensajito(){
saludo = "Saludos bitacorawil!!!" + new Date();
}
public String getSaludo() {
return saludo;
}
public void setSaludo(String saludo) {
this.saludo = saludo;
}
nuestra forma será
<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="head">
<h:outputScript name="bootstrap/js/modal.js" />
</ui:define>
<ui:define name="implementation">
<h:form id="form">
<p:messages id="messages" closable="true" autoUpdate="true" />
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-angle-right"></i> Criterios de búsqueda
</div>
<div class="panel-body">
<div class="row">
<div class="form-group has-success col-md-4">
<p:commandButton value="Generar Saludo modal con JSF" oncomplete="$(''#myModal'').modal(''show'');" title="Ver campos"
actionListener="#{backbeanController.mensajito}">
</p:commandButton>
</div>
</div>
</div>
</div>
<p:outputPanel autoUpdate="true">
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">Cerrar</button>
<h4 class="modal-title">Datos Registro</h4>
</div>
<div class="modal-body">
<h:panelGrid columns="2">
<h:outputLabel value="Mensaje:" />
<h:outputText value="#{backbeanController.saludo}" />
</h:panelGrid>
</div>
<div class="modal-footer centered">
<button data-dismiss="modal" class="btn" type="button">Cerrar</button>
</div>
</div>
</div>
</div>
</p:outputPanel>
</h:form>
</ui:define>
</ui:composition>
Recomiendo usar BootsFaces junto con el tema Bootstrap de PrimeFaces (ver http://showcase.bootsfaces.net/integration/PrimeFaces.jsf ). BootsFaces reduce el código de la placa de la caldera necesaria para escribir una página de Bootstrap. Además, ofrece un par de widgets que se adaptan mejor a una página de Bootstrap que sus homólogos de PrimeFaces. Hemos diseñado BootsFaces como un complemento para PrimeFaces, por lo que puede usar ambos de forma segura.
Acabo de probar bootfaces, pero cuando abro la página en la tableta y el teléfono, las fuentes son bastante pequeñas. Creo que, IMO, esto no está preparado para un verdadero "diseño web receptivo" y probablemente tenga que ir manualmente usando bootstrap.
Pero ir "manualmente a usar bootstrap" es un esfuerzo extra que va desde el uso de JavaBeans a los servicios de RestFul y agrega una capa de seguridad adicional ... ¡un montón de trabajo para una agradable interfaz gráfica de usuario sensible!
Primefaces ya tiene un tema bootstrap como se menciona en Primefaces Themes Page
Para configurarlo, puede seguir esta discusión de
Me alegro de ser útil.
He comenzado un proyecto llamado AdminFaces . Integra Primefaces y Bootstrap en un nuevo tema, llamado admin . Este tema integra un poco de estilo de arranque en los componentes de las caras principales, como paneles, botones, mensajes, tablas de datos, vista de pestañas, etc. También trae una plantilla basada en la famosa plantilla de administración admin LTE bootstrap.
Puedes echar un vistazo al escaparate aquí: http://admin-showcase-admin-showcase.7e14.starter-us-west-2.openshiftapps.com/showcase/
El proyecto se encuentra en una etapa de desarrollo inicial (por ejemplo, solo hay instantáneas disponibles) por lo que cualquier comentario o contribución es realmente bienvenido.