The attribute size is not defined when using layoutPane

Community Driven Extensions Project
Post Reply
sanurmi
Posts: 50
Joined: 04 Mar 2012, 23:23

05 Oct 2012, 09:23

Code: Select all

<h:body>

        <pe:layout id="fullPage" options="#{fullLayoutController.layoutOptions}"  
               stateCookie="true" widgetVar="fpLayoutWidget">   
        
            
            
            <pe:layoutPane  position="north"  rendered="true"  >  
                <ui:insert name="north">

                    <ui:include src="/north.xhtml"/>    
                </ui:insert>
            </pe:layoutPane>   
             
Hi!

I tried to update my PF and PF-extensions and no I got a message that there is no size attribute anymore in pe:layoutPane. How can I change the size of the North pane for instance? If I want it to be 50 pixels or 20 % or something like that?

Cheers,
Sami

EDIT: I see i see, there is no options anymore in layoutPane. Is there tutorial or handbook for new PR Ext?

I tried to implement a new managed bean to configure layout like that:

Code: Select all

@ManagedBean (name = "fullLayoutController")
@ViewScoped
public class FullLayoutController implements Serializable {

	private static final long serialVersionUID = 20120925L;

	private LayoutOptions layoutOptions;

	@PostConstruct
	protected void initialize() {
		System.out.println("*****************TEST");
                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);

                // options for north pane
		LayoutOptions north = new LayoutOptions();
		north.addOption("size", 100);
		layoutOptions.setNorthOptions(north);
	}
And nothing really happend...:( It is always the same, it doesn't matter what number value is in north.addOption("size", 100); I think that I am too stupid to use Primefaces and PE, always something like that. If you think that this is the simplest thing to implement, it can be your worst nightmare. Are people really using these layouts or are they using just pure html-css stuff when implementing jsf-pages?

Here is the sample code though:
http://fractalsoft.net/primeext-showcas ... Layout.jsf

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

05 Oct 2012, 12:56

Sure, people use these layouts.

What you shown me, are only options for north pane. A layout consist of multiply panes. Center pane is always required. Please post your entire XHTML and Java code please.
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

sanurmi
Posts: 50
Joined: 04 Mar 2012, 23:23

05 Oct 2012, 13:01

Oleg wrote:Sure, people use these layouts.

What you shown me, are only options for north pane. A layout consist of multiply panes. Center pane is always required. Please post your entire XHTML and Java code please.
Thanks for answering!

Code: Select all

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package managedBeans;
import java.io.Serializable;
import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;
import org.primefaces.event.CloseEvent;
import org.primefaces.event.ResizeEvent;
import org.primefaces.extensions.component.layout.LayoutPane;
import org.primefaces.extensions.event.OpenEvent;
import org.primefaces.extensions.model.layout.LayoutOptions;

@ManagedBean (name = "fullLayoutController")
@ViewScoped

public class FullLayoutController implements Serializable {

	private static final long serialVersionUID = 20120925L;

	
	private LayoutOptions layoutOptions;

	@PostConstruct
	protected void initialize() {
		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", 6);
		layoutOptions.setNorthOptions(north);

		
	}

	public LayoutOptions getLayoutOptions() {
		return layoutOptions;
	}

	public String getSrc() {
		return src;
	}
}
            
and then the xhtml:

Code: Select all

<?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:f="http://java.sun.com/jsf/core"
      xmlns:pe="http://primefaces.org/ui/extensions"
      >

    
    <f:view contentType="text/html" locale="en">
    <pe:head title="Testing PE">
        <f:facet name="first">
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <meta http-equiv="pragma" content="no-cache"/>
            <meta http-equiv="cache-control" content="no-cache"/>
            <meta http-equiv="expires" content="0"/>
        </f:facet>
    </pe:head>

    <h:body>

        <pe:layout id="fullPage" options="#{fullLayoutController.layoutOptions}"  
               stateCookie="true" widgetVar="fpLayoutWidget">   
        
            
            
            <pe:layoutPane  position="north"  rendered="true"  >  
                <ui:insert name="north" >

                    Hello north! 
                </ui:insert>
            </pe:layoutPane>   
            



            <pe:layoutPane position="west">  
                <ui:insert name="west">
                    <ui:include src="/index.xhtml"/> 
                </ui:insert>         
            </pe:layoutPane>   



            <pe:layoutPane position="east"  >  
                <ui:insert name="east"> 

                    <ui:include src="/index.xhtml"/>  
                </ui:insert>
            </pe:layoutPane> 




            <pe:layoutPane position="center">  
                <h2>
                    <ui:insert name="title">Default Title</ui:insert>
                </h2>

                <ui:insert name="center">

                    <ui:include src="/index.xhtml"/>  

                </ui:insert>
            </pe:layoutPane> 

            <pe:layoutPane position="south" rendered="false">  
                <ui:insert name="south">


                    <ui:include src="/index.xhtml"/>


                </ui:insert>
            </pe:layoutPane>  

        </pe:layout>  
    </h:body>
</f:view>
</html>
Strange! I think that this happened because of Chrome cache, because this is working is Safari and Firefox, somehow.
If I put north.addOption("size", 60); and check the height with firebug, it is saying that the height is 91??

Could you tell me how I can get rid of borders and scrollbar in northpane? Have you a manual how to use these features? And yes, this is not working Version 22.0.1229.79 Chrome, but In firefox and Safari it is working but the size is never 60.

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 15 guests