JSF / PrimeFaces：问题与布局网页 [英] JSF/PrimeFaces: Issue in pages with a layout

查看：232
本文介绍了JSF / PrimeFaces：问题与布局网页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个问题，我的JSF页面，它使用PrimeFaces组件。因为它可能会漫长而枯燥的很快，我尽量尽量简短。考虑这个托管bean：

  @Named（值=testBean这个）
@RequestScoped
公共类testBean就实现Serializable {

    私人字符串试验;

    公共字符串的update（）{
        测试=更新了。
        返回测试;
    }

    // getter和setter ...
}

下面的 test.xhtml 的身体，用不相关的内容和样式删除：

 ＆LT; H：身体GT;
    ＆LT;电话号码：布局ID =布局全页=真正的＆GT;

        ＆LT;电话号码：layoutUnit位置=北＆GT;
            ＆LT;！ - 无所谓 - ＆GT;
        ＆LT; / P：layoutUnit＆GT;

        ＆LT;电话号码：layoutUnit ID =输入位置=西部大开发＆GT;
            ＆LT;电话号码：面板标题=＆GT;
                ＆LT;电话号码：TabView的＆GT;
                    ＆LT;电话号码：分页标题=＆GT;
                        ＆LT;！ - 输入量和提交按钮 - ＆GT;
                    ＆LT; / P：标签＆gt;
                ＆LT; / P：TabView的＆GT;
            ＆LT; / P：面板＆gt;
        ＆LT; / P：layoutUnit＆GT;

        ＆LT;电话号码：layoutUnit ID =输出位置=中心＆GT;
            ＆LT; H：形式GT;
                ＆LT;电话号码：面板ID =显示标题=信息＆GT;
                    ＆LT; H：的outputText值=＃{testBean.test}/＆GT;
                ＆LT; / P：面板＆gt;
                ＆LT;电话号码：分离器/＆GT;
                    ＆LT;电话号码：的commandButton值=更新！行动=＃{testBean.update（）}阿贾克斯=FALSE/＆GT;
            ＆LT; /小时：形式GT;
        ＆LT; / P：layoutUnit＆GT;

        ＆LT;电话号码：layoutUnit位置=南与GT;
            ＆LT;！ - 无所谓 - ＆GT;
        ＆LT; / P：layoutUnit＆GT;

    ＆LT; / P：布局＆GT;
＆LT; / H：身体GT;

和一切工作正常。我有两个问题，但：

  1. 我要移动的commandButton 另一个 layoutUnit （输入），我不能将＆LT; H：形式GT; 在一个合理的位置元素。我试图移动它的旁边＆LT;号码：布局＆GT; 所以它封闭所有的布局单元，但它打破了（在更新的页面不再具有更新字符串）

  2. 我想通过ajax与另一layoutUnit按钮来执行更新。当我删除阿贾克斯=从假属性的commandButton ，并设置的属性prependId =假全球表单元素，输出文本未更新。

在此先感谢您的帮助

解决方案
  

我应该将命令按钮到另一个layoutUnit（输入），我不能代替＆LT; H：形式GT; 在一个合理的位置元素。我试图移动它的旁边＆LT;号码：布局＆GT; 所以它封闭所有的布局单元，但它打破了（在更新的页面不再具有更新字符串）

我不知道如果我理解你的具体问题。刚做这样的事？

 ＆LT;电话号码：layoutUnit ID =输入位置=西部大开发＆GT;
    ＆LT;电话号码：面板标题=＆GT;
        ＆LT;电话号码：TabView的＆GT;
            ＆LT;电话号码：分页标题=＆GT;
                ＆LT;！ - 输入量和提交按钮 - ＆GT;
            ＆LT; / P：标签＆gt;
        ＆LT; / P：TabView的＆GT;
        ＆LT; H：形式GT;
            ＆LT;电话号码：的commandButton值=更新！行动=＃{testBean.update}阿贾克斯=FALSE/＆GT;
        ＆LT; /小时：形式GT;
    ＆LT; / P：面板＆gt;
＆LT; / P：layoutUnit＆GT;

＆LT;电话号码：layoutUnit ID =输出位置=中心＆GT;
    ＆LT;电话号码：面板ID =显示标题=信息＆GT;
        ＆LT; H：的outputText值=＃{testBean.test}/＆GT;
    ＆LT; / P：面板＆gt;
    ＆LT;电话号码：分离器/＆GT;
＆LT; / P：layoutUnit＆GT;

  

我想通过ajax与另一layoutUnit按钮来执行更新。当我删除了ajax =假的命令按钮属性，并设置了prependId =假，为全球的表单元素，输出文本未更新的属性。的

在更新 ID必须是相对或绝对的客户端ID。至于如何计算正确的客户端ID，检查这样的回答：<一href="http://stackoverflow.com/questions/8634156/how-to-reference-components-in-jsf-ajax-cannot-find-component-with-identifier/8644762#8644762">How引用组件的JSF AJAX？无法找到标识符QUOT组成部分;富＆QUOT;鉴于

在PrimeFaces布局组件不是 NamingContainer ，所以它的ID不会prepended，一旦你把＆LT ; H：形式GT; 出中心的布局，那么＆LT;电话号码：面板ID =显示＆GT; 从命令按钮可达通过：显示。因此，这应该做的：

 ＆LT;电话号码：layoutUnit ID =输入位置=西部大开发＆GT;
    ＆LT;电话号码：面板标题=＆GT;
        ＆LT;电话号码：TabView的＆GT;
            ＆LT;电话号码：分页标题=＆GT;
                ＆LT;！ - 输入量和提交按钮 - ＆GT;
            ＆LT; / P：标签＆gt;
        ＆LT; / P：TabView的＆GT;
        ＆LT; H：形式GT;
            ＆LT;电话号码：的commandButton值=更新！行动=＃{testBean.update}更新=：显示/＆GT;
        ＆LT; /小时：形式GT;
    ＆LT; / P：面板＆gt;
＆LT; / P：layoutUnit＆GT;

＆LT;电话号码：layoutUnit ID =输出位置=中心＆GT;
    ＆LT;电话号码：面板ID =显示标题=信息＆GT;
        ＆LT; H：的outputText值=＃{testBean.test}/＆GT;
    ＆LT; / P：面板＆gt;
    ＆LT;电话号码：分离器/＆GT;
＆LT; / P：layoutUnit＆GT;

I have a problem with my JSF page which uses PrimeFaces components. As it may get long and boring quickly, I try to be as brief as possible. Consider this managed bean:

@Named(value = "testBean")
@RequestScoped
public class TestBean implements Serializable {

    private String test;

    public String update() {
        test = "Updated.";
        return "test";
    }

    // Getters and Setters...
}

Here's the body of test.xhtml, with irrelevant content and styles removed:

<h:body>
    <p:layout id="layout" fullPage="true">

        <p:layoutUnit position="north">
            <!-- Does not matter -->
        </p:layoutUnit>

        <p:layoutUnit id="input" position="west">
            <p:panel header="">
                <p:tabView>
                    <p:tab title="">
                        <!-- INPUTS and SUBMIT BUTTON -->
                    </p:tab>
                </p:tabView>
            </p:panel>
        </p:layoutUnit>

        <p:layoutUnit id="output" position="center">
            <h:form>
                <p:panel id="display" header="Information">  
                    <h:outputText value="#{testBean.test}" />  
                </p:panel>
                <p:separator />
                    <p:commandButton value="Update !" action="#{testBean.update()}" ajax="false" />
            </h:form>
        </p:layoutUnit>

        <p:layoutUnit position="south">
            <!-- Does not matter -->
        </p:layoutUnit>

    </p:layout>
</h:body>

And everything works fine. I've got two problems though:

  1. I should move the commandButton to another layoutUnit (input) and I can't place the <h:form> element in a reasonable position. I tried moving it beside <p:layout> so it encloses all layout units but it broke (the updated page no longer has the "Updated." string).

  2. I want to perform the update via ajax with the button on another layoutUnit. When I remove the ajax="false" attribute from the commandButton and set an attribute of prependId="false" for the global form element, the output text does not get updated.

Thanks in advance for your help

解决方案

I should move the commandButton to another layoutUnit (input) and I can't place the <h:form> element in a reasonable position. I tried moving it beside <p:layout> so it encloses all layout units but it broke (the updated page no longer has the "Updated." string).

I'm not sure if I understand your concrete problem. Just do something like this?

<p:layoutUnit id="input" position="west">
    <p:panel header="">
        <p:tabView>
            <p:tab title="">
                <!-- INPUTS and SUBMIT BUTTON -->
            </p:tab>
        </p:tabView>
        <h:form>
            <p:commandButton value="Update !" action="#{testBean.update}" ajax="false" />
        </h:form>
    </p:panel>
</p:layoutUnit>

<p:layoutUnit id="output" position="center">
    <p:panel id="display" header="Information">  
        <h:outputText value="#{testBean.test}" />  
    </p:panel>
    <p:separator />
</p:layoutUnit>

I want to perform the update via ajax with the button on another layoutUnit. When I remove the ajax="false" attribute from the commandButton and set an attribute of prependId="false" for the global form element, the output text does not get updated.

The update ID has to be the relative or absolute client ID. As to how to figure the right client ID, check this answer: How to reference components in JSF ajax? Cannot find component with identifier "foo" in view

The PrimeFaces layout component isn't a NamingContainer, so its ID won't be prepended, and once you take the <h:form> out the center layout, then the <p:panel id="display"> is reachable from the command button by :display. Thus, this should do:

<p:layoutUnit id="input" position="west">
    <p:panel header="">
        <p:tabView>
            <p:tab title="">
                <!-- INPUTS and SUBMIT BUTTON -->
            </p:tab>
        </p:tabView>
        <h:form>
            <p:commandButton value="Update !" action="#{testBean.update}" update=":display" />
        </h:form>
    </p:panel>
</p:layoutUnit>

<p:layoutUnit id="output" position="center">
    <p:panel id="display" header="Information">  
        <h:outputText value="#{testBean.test}" />  
    </p:panel>
    <p:separator />
</p:layoutUnit>

这篇关于JSF / PrimeFaces：问题与布局网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆