Wednesday, October 09, 2013

Utilizando facelets con < p:layout >

Utilizando facelets con < p:layout >

Integramos facelets con el componente <p:layout> de primefaces. Teniendo presente que <p:layout> utiliza    <p:layoutUnit position="north”> para definir las areas y facelets necesitamos  definir el área mediante <ui:insert name="top"> .


<?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:h="http://java.sun.com/jsf/html"
     xmlns:p="http://primefaces.org/ui"
     xmlns:f="http://xmlns.jcp.org/jsf/core">
   <f:view contentType="text/html">
       <h:head>
           <f:facet name="first">
               <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
               <title>PrimeFaces</title>
           </f:facet>
            <style type="text/css">
               .ui-layout-north {
                   z-index:20 !important;
                   overflow:visible !important;;
               }
               .ui-layout-north .ui-layout-unit-content {
                   overflow:visible !important;
               }
           </style>
       </h:head>


   
   <h:body>
       <p:layout fullPage="true">
           <p:layoutUnit position="north" size="100" resizable="true" closable="true" collapsible="true">
               <ui:insert name="top">
         Header
               </ui:insert>
           </p:layoutUnit>
           <p:layoutUnit position="south" size="50" closable="true" collapsible="true">
               <ui:insert name="bottom">
                   Footer
               </ui:insert>
           </p:layoutUnit>
           <p:layoutUnit position="west" size="175" header="Left" collapsible="true">
               <ui:insert name="left">
                   Left
               </ui:insert>
           </p:layoutUnit>
           
           <p:layoutUnit position="center">
               <ui:insert name="center"></ui:insert>
           </p:layoutUnit>
       </p:layout>
   </h:body>
       </f:view>
</html>

No comments: