在PrimeFaces中调整布局单位大小时处理Resize事件

时间:2013-09-11 05:54:47

标签: css jsf layout primefaces resize

我正在开发我的第一个Web项目并使用PrimeFaces组件套件。

当我调整中心布局单元的大小时,我想要一个resize事件。我已经尝试过代码,但bean类中的方法永远不会被调用。

我在这里做错了什么?如果我错了,请纠正我?

    <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>    

以下是bean类的代码

@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;
    }    
}

1 个答案:

答案 0 :(得分:1)

好吧,我不知道您正在使用的PrimeFaces的女巫版本,但在de PrimeFaces手册中找不到属性resizeListener。您还为bean赋予了name属性的名称:

@ManagedBean(name = "resize")

因此,如果您想在视图中使用它,请参考您的名字,如下所示:

#{resize.handleResize}

如果您不使用name属性,则可以参考resizeBean。更多信息可以在这里找到:http://docs.oracle.com/javaee/6/api/javax/faces/bean/ManagedBean.html

要获取调整大小事件,请在视图中添加<p:ajax>标记,如下所示:

<p:ajax event="resize" listener="#{resize.handleResize}" />

现在在您的布局周围添加<h:form>标记,一切都应该有用。

完整视图:

<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>