Handling Resize event when layout unit is resized in PrimeFaces - css

Question

I am working on my first web project and using PrimeFaces component suite for it.
I want fire a resize event when i resize the center layout unit. I have tried the code but the method in the bean class is never get called.
What am I doing wrong here? please correct me if I am wrong?
<p:layout fullPage="true" resizeListner="#{resizeBean.handleResize}">
<p:layoutUnit id="top" position="north" resizable="true" size="20%">
<ui:insert name="header">
<ui:include src="Header.xhtml" />
</ui:insert>
</p:layoutUnit>
<p:layoutUnit id="bottom" styleClass="class-bottom" position="south"
resizable="true" size="25%">
<ui:insert name="footer">
<ui:include src="Footer.xhtml" />
</ui:insert>
</p:layoutUnit>
<p:layoutUnit id="left" styleClass="class-left" position="west"
resizable="true" size="24%">
<ui:insert name="tree">
<ui:include src="Tree.xhtml" />
</ui:insert>
</p:layoutUnit>
<p:layoutUnit id="addDlg" position="center">
<ui:insert>
<ui:include src="AddDevice.xhtml" />
</ui:insert>
</p:layoutUnit>
<p:layoutUnit id="center" position="center">
<ui:insert name="centerPage">
<ui:include src="Center.xhtml" />
</ui:insert>
</p:layoutUnit>
</p:layout>
Here is the code for the bean class
#ManagedBean(name = "resize")
public class ResizeBean implements Serializable {
private long width;
private long height;
public void handleResize(ResizeEvent event) {
width = event.getWidth();
height = event.getWidth();
System.out.println("in resize");
}
public long getWidth() {
return this.width;
}
public long getHeight() {
return this.height;
}
}

Answer 1

Well, I don't know witch version of PrimeFaces you're using, but the attribute resizeListener is not found in de PrimeFaces manual. Also you gave your bean a name with the name attribute:
#ManagedBean(name = "resize")
So if you want to use this in your view, then refer to your given name like this:
#{resize.handleResize}
If you don't use the name attribute then you can refer to resizeBean. More info can be found here: http://docs.oracle.com/javaee/6/api/javax/faces/bean/ManagedBean.html
To get the resize event add a <p:ajax> tag in your view something like this:
<p:ajax event="resize" listener="#{resize.handleResize}" />
And now add the <h:form> tag around your layout and everything should work.
Complete view:
<h:form>
<p:layout fullPage="true">
<p:ajax event="resize" listener="#{resize.handleResize}" />
<p:layoutUnit id="top" position="north" resizable="true" size="20%">
<ui:insert name="header">
<ui:include src="Header.xhtml" />
</ui:insert>
</p:layoutUnit>
<p:layoutUnit id="bottom" styleClass="class-bottom" position="south"
resizable="true" size="25%">
<ui:insert name="footer">
<ui:include src="Footer.xhtml" />
</ui:insert>
</p:layoutUnit>
<p:layoutUnit id="left" styleClass="class-left" position="west"
resizable="true" size="24%">
<ui:insert name="tree">
<ui:include src="Tree.xhtml" />
</ui:insert>
</p:layoutUnit>
<p:layoutUnit id="addDlg" position="center">
<ui:insert>
<ui:include src="AddDevice.xhtml" />
</ui:insert>
</p:layoutUnit>
<p:layoutUnit id="center" position="center">
<ui:insert name="centerPage">
<ui:include src="Center.xhtml" />
</ui:insert>
</p:layoutUnit>
</p:layout>
<h:/form>