Page 1 of 1
Layout Panel options question
Posted: 03 Oct 2012, 22:34
by pmblatino
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?
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
Re: Layout Panel options question
Posted: 04 Oct 2012, 10:38
by Oleg
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);
Re: Layout Panel options question
Posted: 04 Oct 2012, 14:48
by pmblatino
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!
Re: Layout Panel options question
Posted: 04 Oct 2012, 16:00
by Oleg
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.
Re: Layout Panel options question
Posted: 04 Oct 2012, 17:15
by pmblatino
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
Re: Layout Panel options question
Posted: 05 Oct 2012, 15:33
by pmblatino
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!
Re: Layout Panel options question
Posted: 17 Oct 2012, 00:04
by smithh032772
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>