客户端获取组件对象--jsff中js获取修改组件值-优快云博客

本文链接：https://blog.youkuaiyun.com/caihuihai/article/details/84741521

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html>
<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
    <af:document title="学生照片导入" id="d1">
        <af:panelGroupLayout id="p1" layout="scroll">
            <af:resource type="javascript">
              function handleEnterEvent(evt) {
                  var poll = AdfPage.PAGE.findComponent("i1");
                  poll.setVisible(true);
              }
            </af:resource>
            <af:messages id="m1"/>
            <af:form id="f1" inlineStyle="text-align:center;" usesUpload="true">
                <af:spacer width="50" height="10" id="s1"/>
                <af:panelFormLayout id="pfl1" inlineStyle="margin-left:50px">
                    <af:inputFile label="图片上传" id="if1" value="#{SynaXsBean.uploadFile}"/>
                </af:panelFormLayout>
                <af:button text="导入学生照片" id="b2" action="#{SynaXsBean.syxszp}">
                    <af:clientListener method="handleEnterEvent" type="action"/>
                </af:button>
                <af:spacer width="10" height="30" id="s3"/>
                <af:button text="返回" id="b4" action="return"/>
                <af:panelGroupLayout layout="vertical" id="p2">
                    <af:spacer width="10" height="10" id="s2"/>
                    <af:outputText value="注：导入时间较长，请耐心等待！(导入的压缩包文件名只能是英文)" id="ot1" inlineStyle="color:Red;"/>
                </af:panelGroupLayout>
                <af:image id="i1" clientComponent="true" inlineStyle="width:30px;height:30px;" partialTriggers="b2" source="/images/progressbar.gif" visible="false"
                          binding="#{SynaXsBean.changeImage}"/>
            </af:form>
        </af:panelGroupLayout>
    </af:document>
</f:view>

---------------以下摘自网上资料------

由于Oracle ADF是JSF的扩展，而JSF更是在UI界面组件化上的一个飞跃，说到Web UI 又不得不谈JavaScript。因此我们自然而然地想到如何在客户端来处理ADF组件。ADF很好地用JavaScript将其在客户端进行很好的封装。所以我们在设计界面时在Inspector属性栏中所能见到的大部分ADF组件属性的Accessor均能利用前端的JavaScript中调用。但是调用的前提就是如何在客户端获取组件对象。
我查阅了官方的文档，其中能够获取组件对象的方法大致有三种（其中一种在新版的ADF中也不再使用）
1. AdfUIComponent.findComponent(expr)
这种方式的前提是必须具有实例化的组件后方能调用该方法。首先我们必须明确：所有在客户端展现的ADF组件对象的类均是AdfUIComponent类的子类。那么所有的ADF组件实例就都具备findComponent()这个实例方法。根据以上特性，我们就可轻松获取界面上的组件的引用。假设我们有以下标记代码（我假设你具备了一定的ADF基础）
<af:panelGroupLayout layout="horizontal">
    <af:commandButton text="Press me" id="MyServerButton" clientComponent="true" partialSubmit="true">
        <af:clientListener method="whenButtonClick" type="action"/>
    </af:commandButton>
    <af:outputText id="console" value="fasdf" clientComponent="true" partialTriggers="MyServerButton"/>
</af:panelGroupLayout>
【代码解释：当ADF组件在声明时属性clientComponent设为true并且ID值已设后方能在客户端的JavaScript中正确调用！】
这段代码声明了一个ADF按钮并为其添加了客户端监听器，以便于在前端的JavaScript中进行处理；另外还声明了一个文本输出控件，用于显示当按钮被按下后所改变的状态。JavaScript代码处理如下：
<trh:script>//<![CDATA[
        function whenButtonClick (actionEvent) {
            // get component which fires this event
            var buttonComponent = actionEvent.getSource();
            // get peer component whose id is console
            var outputText = buttonComponent.findComponent(":console");
            output.setValue("You changed me!");
        }
//]]></trh:script>

2. AdfPage.PAGE.findComponent(clientID)
这种方法的好处是我们无需一个已经实例化的AdfUIComponent对象就可以轻松获取到页面的ADF组件对象引用。这里需要对AdfPage.PAGE这个对象说明一下，官方文档上对其这样解释的：AdfPage.PAGE is a global object that provides a static reference to the page's context object,翻译过来就是AdfPage.PAGE一个可以提供页面上下文对象的一个静态引用的全局对象。既然是获取上下文的全局对象，当然得到的应该是已经实例化的ADF组件了。仍然以上面的代码为例，我们修改一下JavaScript代码利用第二种方式来达到同样的效果，代码如下所示：
<trh:script>//<![CDATA[
        function whenButtonClick (actionEvent) {
            // get component by client id
            var outputText = AdfPage.PAGE.findComponent("console");
            output.setValue("You changed me!");
        }
//]]></trh:script>
是不是更简单明了呢，呵呵
3.AdfPage.PAGE.findComponentByAbsoluteId(absolute expr)
很不幸官方文档上虽对其有说明，但经过测试后发现这个方法在最新的ADF版本上已经不存在了，故在此不做详细解释了。