RichFaces tabPanel,带有switchType ajax和a4j:status

Question

我试图实现的目标

我有一个rich:tabPanel用switchType="client",其中一个标签设置了它switchType,ajax因为加载它的数据是一个昂贵的操作.当我单击此Ajax选项卡时,我希望将其标题更改为正在加载...以指示已识别出单击.加载完成后,标题应切换回Ajax Tab.

[Client Tab] [Ajax Tab]
<click on 'Ajax Tab'>
[Client Tab] [Loading...]
<wait...>
[Client Tab] [Ajax Tab]
<click on 'Client Tab'>
[Client Tab] [Ajax Tab]

问题描述

其实,大多数的上述预期作品所描述的,我唯一的问题是,当我从导航阿贾克斯选项卡到任何其他选项卡,将标题阿贾克斯Tab键切换回载入中...:

[Client Tab] [Ajax Tab]
<click on 'Ajax Tab'>
[Client Tab] [Loading...]
<wait...>
[Client Tab] [Ajax Tab]
<click on 'Client Tab'>
[Client Tab] [Loading...]

研究

我在RichFaces的JIRA中发现了一个问题,但是从版本3.2.1开始修复了这个问题.此外,我用谷歌搜索了几个小时,但未能找到任何类似的问题.

环境

• Tomcat 7.0.30
• Mojarra 2.1.12
• RichFaces 4.2.2.Final

代码(减少)

JSF

<ui:composition template="WEB-INF/templates/default.xhtml">
    <ui:define name="content">
        <h:form id="form">
            <rich:tabPanel id="tabPanel" switchType="client">
                <rich:tab id="clientTab">
                    <f:facet name="header">
                        <h:outputText value="Client Tab" />
                    </f:facet>
                    <h:outputText value="Foo" />
                </rich:tab>
                <rich:tab id="ajaxTab" switchType="ajax" status="ajaxTabStatus">
                    <f:facet name="header">
                        <a4j:status id="ajaxTabStatus">
                            <f:facet name="start">
                                <h:outputText value="Loading..." />
                            </f:facet>
                            <f:facet name="stop">
                                <h:outputText value="Ajax Tab" />
                            </f:facet>
                        </a4j:status>
                    </f:facet>
                    <h:outputText value="#{bean.value}" />
                </rich:tab>
            </rich:tabPanel>
        </h:form>
    </ui:define>
</ui:composition>

支持Ajax选项卡的Bean

@ManagedBean
@ViewScoped
public class Bean implements Serializable {

    private static final long serialVersionUID = -8405248908693334970L;

    private String value = "noValue";

    private static final Logger log = LoggerFactory.getLogger(Bean.class);

    @PostConstruct
    public void init() {
        log.info("Init bean.");
        value = getDummyValueWithFakeDelay();
    }

    public String getValue() {
        log.info("Get value.");
        return value;
    }

    private String getDummyValueWithFakeDelay() {
        try {
            Thread.sleep(1000);
        } catch (InterruptedException ex) {
        }

        return DateFormat.getTimeInstance().format(new Date());
    }
}

更新1:

我发现a的标识符(我的意思是你指定的那个<rich:someTag ... status="someStatus" />)a4j:status不是它id的name属性.所以我a4j:status只是针对该页面上的每个 Ajax请求.赋予它一个名称并使用这个命名状态不起作用,因为现在什么也没发生.

<rich:tab id="ajaxTab" switchType="ajax" status="ajaxTabStatus">
    <f:facet name="header">
        <a4j:status id="ajaxTabStatus" name="ajaxTabStatus">
            <f:facet name="start">
                <h:outputText value="Loading..." />
            </f:facet>
            <f:facet name="stop">
                <h:outputText value="Ajax Tab" />
            </f:facet>
        </a4j:status>
    </f:facet>
    <h:outputText value="#{bean.value}" />
</rich:tab>

更新2:

我还发现了另一种方法,使用onbegin和oncomplete属性与一些代码,如:

<rich:tab id="ajaxTab" switchType="ajax"
    onbegin="#{rich:component('ajaxTab')}.?"
    oncomplete="#{rich:component('ajaxTab')}.?">

好吧,如你所见,我还没有找到一种操作标题标题的方法(我没有找到任何有用的文档,说明我可以用rich:component做什么).

Answer 1

我不是很熟悉RichFaces 4.x。然而，这是如何做到的RichFaces 3。
假设这是你tabPanel。

<h:form>
  <rich:tabPanel>
    <rich:tab label="Client Tab" switchType="client">
      Tab - client
    </rich:tab>

    <rich:tab label="Ajax Tab" id="ajaxTab" switchType="ajax" ontabenter="changeLabel(event)">
      <h:outputText value="#{bean.value}" />
    </rich:tab>
  </rich:tabPanel>
</h:form>

请注意ontabenterajax 选项卡中的事件。

现在你的脚本将是这样的。

<script>
    function changeLabel(tabId) {
        var tabLabel = event.target || event.srcElement;
        tabLabel.innerHTML = 'Loading...';
    }
</script>

我不太了解RF4。但是，RF3不需要将oncomplete事件添加到选项卡。