Layout Panel options question

Community Driven Extensions Project
Post Reply
pmblatino
Posts: 23
Joined: 19 Jul 2010, 08:49

03 Oct 2012, 22:34

Hi so i'd been working with LayoutPanel and i created this template

Code: Select all

 <h:form id="mainForm" style="font-size: 11px">
                <pe:layout  id="fullPage" options="#{templateFullLayoutBean.layoutOptions}"
                            widgetVar="fpLayoutWidget"
                            >
                    <pe:layoutPane position="north" >  
                        <ui:insert name="top"> HEADER HERE</ui:insert>
                    </pe:layoutPane>
                    <pe:layoutPane position="center" >
                        <ui:insert name="content"> content </ui:insert>
                    </pe:layoutPane>
                    <pe:layoutPane position="south" >
                        <ui:insert name="bottom"> FOOTER HERE </ui:insert>
                    </pe:layoutPane>
                </pe:layout>

            </h:form>
but what if inside my content on a different page i wanna add more layouts?
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:pe="http://primefaces.org/ui/extensions"
template="/layoutAsignacion.xhtml"
>
<ui:define name="content">
<pe:layoutPane position="east" >
<f:facet name="header">
<h:outputText value="Center-North"/>
</f:facet>
</pe:layoutPane>
<pe:layoutPane position="center">
<f:facet name="header">
<h:outputText value="Center-Center"/>
</f:facet>
</pe:layoutPane>
</ui:define>
</ui:composition>
any ideas how can i add the new layoutPanes, inside my layoutOptions, i try adding them from the @postConstrut of the new page but it didnt work either
PrimeFaces 5.2| GlassFish 4.1| JDK1.7 | Java EE 6 | NetBeans 8.1.2

User avatar
Oleg
Expert Member
Posts: 3803
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

04 Oct 2012, 10:38

You can study this code (bean) http://fractalsoft.net/primeext-showcas ... Layout.jsf and this one http://fractalsoft.net/primeext-showcas ... Layout.jsf

The last example shows how to do this for options for nested panes. You should call setChildOptions() on LayoutOptions to set options for nested panes. You can call this method so many times as you want to build deep nested layouts.

Code: Select all

        layoutOptions = new LayoutOptions();  
  
        // options for all panes  
        LayoutOptions panes = new LayoutOptions();  
        panes.addOption("slidable", false);  
        panes.addOption("spacing", 6);  
        layoutOptions.setPanesOptions(panes);  
  
        // north pane  
        LayoutOptions north = new LayoutOptions();  
        north.addOption("resizable", false);  
        north.addOption("closable", false);  
        north.addOption("size", 60);  
        north.addOption("spacing_open", 0);  
        layoutOptions.setNorthOptions(north);  
  
        // south pane  
        LayoutOptions south = new LayoutOptions();  
        south.addOption("resizable", false);  
        south.addOption("closable", false);  
        south.addOption("size", 28);  
        south.addOption("spacing_open", 0);  
        layoutOptions.setSouthOptions(south);  
  
        // west pane  
        LayoutOptions west = new LayoutOptions();  
        west.addOption("size", 210);  
        west.addOption("minSize", 180);  
        west.addOption("maxSize", 500);  
        layoutOptions.setWestOptions(west);  
  
        LayoutOptions center = new LayoutOptions();  
        center.addOption("resizable", false);  
        center.addOption("closable", false);  
        center.addOption("minWidth", 200);  
        center.addOption("minHeight", 60);  
        layoutOptions.setCenterOptions(center);  
  
        // set options for nested center layout  
        LayoutOptions optionsNested = new LayoutOptions();  
        center.setChildOptions(optionsNested);  
  
        // options for center-north pane  
        LayoutOptions centerNorth = new LayoutOptions();  
        centerNorth.addOption("size", "50%");  
        optionsNested.setNorthOptions(centerNorth);  
  
        // options for center-center pane  
        LayoutOptions centerCenter = new LayoutOptions();  
        centerCenter.addOption("minHeight", 60);  
        optionsNested.setCenterOptions(centerCenter);
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

pmblatino
Posts: 23
Joined: 19 Jul 2010, 08:49

04 Oct 2012, 14:48

Thanks for the response! i got it working with the call setChildOptions() but the problem is that what if on a different page i need to use a different type of layuot for the center and the one i added in the childoptions doesnt fit my needs

lets say i have the following page, using the template layout (the template on my first post), then i have to modified the layoutOptions on the main Template just to fit the needs of this page

Code: Select all

<--header skipped!-->
<ui:define name="content">
<pe:layoutPane position="east" >
<f:facet name="header">
<h:outputText value="Center-east"/>
</f:facet>
</pe:layoutPane>
<pe:layoutPane position="center">
<f:facet name="header">
<h:outputText value="Center-Center"/>
</f:facet>
</pe:layoutPane>
</ui:define>
</ui:composition>
but on a different page i need to use west instead of east

Code: Select all

<--header skipped!-->
<ui:define name="content">
<pe:layoutPane position="west" >
<f:facet name="header">
<h:outputText value="Center-west"/>
</f:facet>
</pe:layoutPane>
<pe:layoutPane position="center">
<f:facet name="header">
<h:outputText value="Center-Center"/>
</f:facet>
</pe:layoutPane>
</ui:define>
</ui:composition>
how can i change the layoutOptions from my template dynamically?
My solution was this , this way i wont have to touch the layoutOptions and it works fine
<ui:define name="content">
<pe:layout fullPage="false" style="width:100%; height:100%;" >
<pe:layoutPane position="east" >
<f:facet name="header">
<h:outputText value="Center-east"/>
</f:facet>
</pe:layoutPane>
<pe:layoutPane position="center" >
center-center
</pe:layoutPane>
</pe:layout>
</ui:define>
let me know what you think!
PrimeFaces 5.2| GlassFish 4.1| JDK1.7 | Java EE 6 | NetBeans 8.1.2

User avatar
Oleg
Expert Member
Posts: 3803
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

04 Oct 2012, 16:00

I'm not sure I have understood you. You need one pe:layout pro page (JSF view). The same is for p:layout. If you want to manipulate LayoutOptions (e.g. update them), read this post please viewtopic.php?f=14&t=25158 LayoutOptions can be created with Id parameter in constructor and you can call replace(id, newLayoutOptions) to replace some sub-tree of childOptions for nested layout. After that you shoud refresh the entire pe:layout. I will add later an JavaScript update method to update only nested layouts and not the entire layout.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

pmblatino
Posts: 23
Joined: 19 Jul 2010, 08:49

04 Oct 2012, 17:15

Oh wow i read that post before but not the whole thing, and thats exactly the problem im having, im gonna try it out and let you know Thanks!




pd:Still exited about the cookbook! all i know about jsf 2.0 its thanks to the cookbook
PrimeFaces 5.2| GlassFish 4.1| JDK1.7 | Java EE 6 | NetBeans 8.1.2

pmblatino
Posts: 23
Joined: 19 Jul 2010, 08:49

05 Oct 2012, 15:33

Hi i tried with replace as shown on the link, like this

Code: Select all

@PostConstruct
    protected void initialize() {
        FacesContext context;
        context = FacesContext.getCurrentInstance();
        ELContext elContext = context.getELContext();
        Application application = FacesContext.getCurrentInstance().getApplication();
        ExpressionFactory expressionFactory = application.getExpressionFactory();
        ValueExpression ve = expressionFactory.createValueExpression(elContext, "#{templateFullLayoutBean.layoutOptions}", LayoutOptions.class);
        layoutOptions = (LayoutOptions) ve.getValue(elContext);
        LayoutOptions center = layoutOptions.getLayoutOptions("centerMainLayout");
        
        LayoutOptions childOptions = new LayoutOptions();
        
        LayoutOptions west = new LayoutOptions();
        west.addOption("size", 200);
        childOptions.setWestOptions(west);
        LayoutOptions centerCenter = new LayoutOptions();
        childOptions.setCenterOptions(centerCenter);

        center.replace("childOptionsMain", childOptions);
        childOptions.render();
    }
I am calling the layoutOptions var from a different bean, is not like in the example where u call it from the same bean,

and i have this on the other template constructor

Code: Select all

  @PostConstruct
    protected void initialize() {
        layoutOptions = new LayoutOptions();
        

        renderEast=true;
        // options for all panes  
        LayoutOptions panes = new LayoutOptions();
        panes.addOption("slidable", false);
        panes.addOption("spacing", 6);
        panes.addOption("resizeWhileDragging", false);
        layoutOptions.setPanesOptions(panes);

        LayoutOptions north = new LayoutOptions();
        north.addOption("size", 45);
        layoutOptions.setNorthOptions(north);

        // options for center pane  
        LayoutOptions center = new LayoutOptions("centerMainLayout");
        //I create a childOptions with id on it
        center.setChildOptions(new LayoutOptions("childOptionsMain"));
        layoutOptions.setCenterOptions(center);
        
        // options for south pane  
        LayoutOptions south = new LayoutOptions();
        south.addOption("size", 45);
        layoutOptions.setSouthOptions(south);
        

    }
it works by just adding the new childOptions
center.setChildOptions(new LayoutOptions("childOptionsMain"))
but i wanna be able to manipulate them dynamically from the bean im working from not the template
any ideas would be apreciated, in the mean time im using the solution i made in the first post :) Thanks again!
PrimeFaces 5.2| GlassFish 4.1| JDK1.7 | Java EE 6 | NetBeans 8.1.2

smithh032772
Posts: 6144
Joined: 10 Sep 2011, 21:10

17 Oct 2012, 00:04

pmblatino wrote:but i wanna be able to manipulate them dynamically from the bean im working from not the template
any ideas would be apreciated, in the mean time im using the solution i made in the first post :) Thanks again!
Below is how I'm manipulating layout panel options 'per' JSF view. Below, is my layoutController bean. I would love to save the state of the layout 'pane' everytime enduser opens/closes layout panes, but the code below does not do that 'yet'. :)

Code: Select all

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package pf;

import java.io.Serializable;

import java.util.ArrayList;
import java.util.List;

import javax.annotation.PostConstruct;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.SessionScoped;

import org.primefaces.extensions.component.layout.LayoutPane;
import org.primefaces.extensions.event.ResizeEvent;
import org.primefaces.extensions.model.layout.LayoutOptions;

/**
 *
 * @author Administrator
 */
@ManagedBean(name = "layoutController")
@SessionScoped
public class LayoutController implements Serializable {
    
    private LayoutOptions layoutOptions;
    
    @ManagedProperty("#{pageNavigationController}")
    private PageNavigationController pageNavigationController;
    
    private static Boolean debug;
    private static List<String> pagesWithLayoutPane;

    public LayoutController() {
        
        debug = false;
        
        pagesWithLayoutPane = new ArrayList<>();
        pagesWithLayoutPane.add("/orders/pf_Add.xhtml");
        pagesWithLayoutPane.add("/orders/pf_Edit.xhtml");
        pagesWithLayoutPane.add("/orders/pf_BrowseAuditTrail.xhtml");
        pagesWithLayoutPane.add("/orders/pf_BrowsePayroll.xhtml");
        pagesWithLayoutPane.add("/orders/pf_BrowseDriverMoney.xhtml");
        pagesWithLayoutPane.add("/orders/pf_InvoiceForOrders.xhtml");
        pagesWithLayoutPane.add("/orders/pf_BrowseCalendar.xhtml");
        pagesWithLayoutPane.add("/orders/pf_BrowseCalendarEditable.xhtml");
        
    }
    
    @PostConstruct
    protected void initialize() {
        if (debug) {
            System.out.println("LayoutController.initialize() BEGIN");
        }
        String page = pageNavigationController.getPage();
        if (debug) {
            System.out.println("LayoutController.initialize() BEFORE initializeForPage(" + page + ")");
        }
        initializeForPage(page);
        if (debug) {
            System.out.println("LayoutController.initialize() END");
        }
    }
    
    public void initializeForPage(String page) {
        if (debug) {
            System.out.println("LayoutController.initializeForPage(" + page + ") BEGIN");
        }
        Boolean pageWithLayoutPane = isPageWithLayoutPane(page);
        if (debug) {
            System.out.println("LayoutController.initializeForPage() pageWithLayoutPane = " + pageWithLayoutPane + ")");
        }
        
        Integer pageWithLayoutPaneNorthSize = 0;
        if (pageWithLayoutPane) {
            if (page.equals("/orders/pf_Add.xhtml")) {
                pageWithLayoutPaneNorthSize = 50;
            }
            else if (page.equals("/orders/pf_Edit.xhtml")) {
                pageWithLayoutPaneNorthSize = 200;
            }
            else if (page.equals("/orders/pf_BrowseAuditTrail.xhtml")) {
                pageWithLayoutPaneNorthSize = 160;
            }
            else if (page.equals("/orders/pf_BrowsePayroll.xhtml")) {
                pageWithLayoutPaneNorthSize = 125;
            }
            else if (page.equals("/orders/pf_BrowseDriverMoney.xhtml")) {
                pageWithLayoutPaneNorthSize = 160;
            }
            else if (page.equals("/orders/pf_InvoiceForOrders.xhtml")) {
                pageWithLayoutPaneNorthSize = 170;
            }
            else if (page.startsWith("/orders/pf_BrowseCalendar")) {
                pageWithLayoutPaneNorthSize = 150;
            }
        }
        if (debug) {
            System.out.println("LayoutController.initializeForPage() pageWithLayoutPaneNorthSize = " + pageWithLayoutPaneNorthSize + ")");
        }
        
        layoutOptions = new LayoutOptions();

        // options for all panes
        LayoutOptions panes = new LayoutOptions();
        panes.addOption("slidable", false);
        panes.addOption("spacing", 6);
        panes.addOption("resizeWhileDragging", false);
        layoutOptions.setPanesOptions(panes);
        
        LayoutOptions north = new LayoutOptions();
        north.addOption("resizable", false);
        north.addOption("size", 100);
        layoutOptions.setNorthOptions(north);

        // options for center pane
        LayoutOptions center = new LayoutOptions();
        if (pageWithLayoutPane) {
            center.addOption("closable", false);
            center.addOption("resizable", false);
            center.addOption("minWidth", 200);
            center.addOption("minHeight", pageWithLayoutPaneNorthSize);
        }
        else {
            
        }
        layoutOptions.setCenterOptions(center);
        
        if (pageWithLayoutPane) {
            // options for nested center layout
            LayoutOptions childCenterOptions = new LayoutOptions();
            center.setChildOptions(childCenterOptions);
            // options for center-north pane
            LayoutOptions centerNorth = new LayoutOptions();
            centerNorth.addOption("resizable", false);
            centerNorth.addOption("size", pageWithLayoutPaneNorthSize);
            childCenterOptions.setNorthOptions(centerNorth);
            // options for center-center pane
            LayoutOptions centerCenter = new LayoutOptions();
            centerCenter.addOption("minHeight", pageWithLayoutPaneNorthSize);
            childCenterOptions.setCenterOptions(centerCenter);
        }
        
        if (debug) {
            System.out.println("LayoutController.initializeForPage(" + page + ") END");
        }
    }
    
    public Boolean isPageWithLayoutPane(String page) {
        Boolean returnValue = false;
        for (String pageWithLayoutPane : pagesWithLayoutPane) {
            if (page.equals(pageWithLayoutPane)) {
                returnValue = true;
                break;
            }
        }
        return returnValue;
    }
    
    public LayoutOptions getLayoutOptions() {
        return layoutOptions;
    }

    public void setPageNavigationController(PageNavigationController pageNavigationController) {
        this.pageNavigationController = pageNavigationController;
    }
    
}
Also, every time other controller beans change the value of pageNavigationController.page, I re-initialize the layout panel options. Below, is code that does this. This code is in pageNavigationController. Look at how I call getLayoutController().initializeForPage(page).

Code: Select all

    public void setPage (String page) {
        if (page == null || page.length() <= 0)
            setToBlankPage();
        else if (this.page != page) {
            this.previousPage = this.page;
            this.page = page;
            if (previousPage.startsWith("/orders") && !page.startsWith("/orders"))
                clearOrdersBrowseScheduleOption();
            getLayoutController().initializeForPage(page);
        }
    }
And by the way, my xhtml is as follows:

Code: Select all

            <pe:layout id="fullPageLayout" options="#{layoutController.layoutOptions}" 
                       widgetVar="layoutWidget">
                <pe:layoutPane position="north">
                    <ui:include src="#{pageNavigationController.pageMenu}"/>
                </pe:layoutPane>
                
                <pe:layoutPane position="center">
                    
                    <ui:include src="/loadingImage.xhtml"/>

                    <p:outputPanel id="pageContentPanel" layout="block"
                                   styleClass="#{layoutController.isPageWithLayoutPane(pageNavigationController.page) ? 'ui-layout-content' : null}"
                                   style="width: 100%; height: 100%">

                        <ui:include src="#{pageNavigationController.page}"/>
                        
                    </p:outputPanel>

                    <h:form id="pollNotificationsForm">
                        <p:growl id="notifications" widgetVar="growl"
                                 life="60000" showDetail="true" showSummary="true" escape="false"/>
                        <p:poll listener="#{pf_usersController.checkNotifications()}"
                                update="notifications" interval="20" global="false"/>
                    </h:form>

                </pe:layoutPane>
            </pe:layout>
Howard

PrimeFaces 6.0, Extensions 6.0.0, Push (Atmosphere 2.4.0)
TomEE+ 1.7.4 (Tomcat 7.0.68), MyFaces Core 2.2.9, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

Java EE 6 Tutorial|NetBeans|Google|Stackoverflow|PrimeFaces|Apache

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest