`

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

 
阅读更多
<?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版本上已经不存在了,故在此不做详细解释了。

分享到:
评论

相关推荐

    JS_FF--IE (兼容_数据直接添加到剪切板)

    总结来说,"JS_FF--IE (兼容_数据直接添加到剪切板)" 是关于如何在JavaScript中实现跨浏览器的剪贴板操作,尤其是针对IE和Firefox这两种浏览器的不同实现方式。这个功能在网页应用中非常有用,可以让用户方便地复制...

    上传文件-基于jdeveloper

    在IT行业中,JDeveloper是一款由甲骨文公司(Oracle)提供的免费、全面的集成开发环境(IDE),专门用于构建Java应用程序、Web服务以及Oracle Fusion Middleware组件。本话题将围绕"上传文件"这一功能,结合JDeveloper...

    jsff.rar_计算方法课后题

    在jsff.rar这个压缩包中,包含了不同章节的课后习题,涉及了计算方法的核心概念和方法,如二分法、线性方程组计算、拉格朗日插值、三次样条插值、数值微分以及数值积分等。这些题目旨在帮助学生巩固课堂所学,提升...

    ADF应用程序样例入门文档

    - JSFF和jspx页面是ADF扩展的JSF(JavaServer Faces)页面。 - 页面布局通常包含root、view、document、form等标签。 - 将VO拖拽到页面上生成ADF Table,并配置Table选项。 - 页面运行后,可以看到预设的查询和...

    ADF开发者小资料

    将VO的`Updatable`属性设置为`Always`意味着任何对VO的修改都会立即反映到数据库中,而不会等待显式提交。虽然这提供了即时反馈,但也可能增加数据冲突的风险,因此开发者应根据具体场景谨慎选择更新模式,并实施...

    ADF实现多选框及分页的Table组件

    在Oracle Application Development Framework (ADF) 中,`af:table`组件是用于展示和操作数据集的强大工具,提供了诸如排序、过滤、列切换等丰富的功能。然而,有些用户可能更倾向于使用多选框来选择表格中的行,...

    CSS,在adf中创建css

    这可以通过在组件的JSFF(JavaServer Faces Fragment)文件中添加`&lt;af:resource type="css" source="path/to/your.css"/&gt;`来实现,或者直接在组件的属性中写入内联样式。 4. **命名空间和类选择器**: ADF会自动为...

    maf-springboard:MAF 跳板 ViewController 项目

    - **jsff**:JSFF(JavaServer Faces Fragment)文件,定义UI组件和布局。 - **ViewController**:存放ViewController类的Java源代码。 - **resources**:存储资源文件,如图片、样式表、本地化字符串等。 - **...

    Oracle-ADF-Projects:第一个项目

    Oracle ADF(Application Development Framework)是Oracle公司提供的一款企业级Java EE开发框架,它简化了构建富客户端和Web应用程序的过程。Oracle ADF的核心是模型-视图-控制器(MVC)设计模式,允许开发者高效地...

    jsff.zip_到落地的运动过程_求解炮弹从初始发射_炮弹_用四阶龙格-库塔法编写MATLAB程序

    用四阶龙格-库塔法编写MATLAB程序求解炮弹从初始发射到落地的运动过程

    Programming.Firefox.2007

    4. **XPCOM组件**:介绍XPCOM模型,它是Firefox中的一个关键组件,允许JavaScript和C++组件之间的交互,使得开发者可以使用高级功能,如访问操作系统服务。 5. **DOM操作**:讲解如何通过JavaScript操作Firefox的...

    jsff_7.rar_matlab例程_matlab_

    在本压缩包“jsff_7.rar”中,包含了一个名为“jsff_7.m”的MATLAB文件,这个文件是一个示例程序,用于演示如何在MATLAB环境中利用数值方法计算积分。MATLAB是一款强大的数学计算软件,广泛应用于工程、科学计算和...

    商城,微信和支付宝小程序,数据库

    - **编程语言**:通常使用JavaScript,微信小程序采用WXML和WXSS(类似HTML和CSS)进行视图层描述,支付宝小程序则使用JSFF(JavaScript Feature Framework)和自定义组件进行开发。 - **API调用**:微信和支付宝...

    计算方法上机实习6实习报告1

    这篇实习报告主要涉及了计算方法中的数值积分方法,包括固定步长和变步长的复合辛普森积分、复合梯形积分以及高斯-拉格耳积分。以下是这些方法的详细说明: 1. 变步长复化梯形积分: 梯形规则是一种数值积分方法,...

    brine:通过 REGEX 模式匹配更改文件属性

    盐水 Brine 是一个小型实用程序,用于对任何... 创建初始实用程序是为了更改 JSFF 文件列表的属性。 该项目的未来视角是从用户那里获取基于字典的输入,然后根据该输入进行更改。 该项目能够生成变更集报告和实用程序。

    计算方法上机实习7实习报告2

    这篇“计算方法上机实习7实习报告2”主要涉及了计算方法在解决实际问题中的应用,特别是通过编程实现对流体力学中泊松方程的求解。以下是报告中的关键知识点: 1. **问题分析**:这部分可能涉及到对某个特定流体...

    ADF TaskFlow Dialog

    TaskFlow Dialog是ADF中一个重要的组件,用于创建弹出式对话框,它能够在一个主页面上打开一个新的子任务流程,提供更丰富的用户交互体验。 在创建TaskFlow Dialog的过程中,通常包括以下几个步骤: 1. **创建Task...

    计算方法——迭代法

    例如,JSFF可能是用JavaScript编写的一个实现上述算法的文件。在编程时,需要注意数值稳定性,避免除以零的情况,合理选择初始猜测值,以及设置合适的迭代次数和误差阈值。 总的来说,迭代法是计算方法中的重要工具...

    计算方法上机实习2实习报告1

    最小二乘法是一种优化技术,用于找到一组参数使得预测值与实际值之间的残差平方和最小。在这里,我们将数据点的x坐标作为特征变量,y坐标作为目标变量,通过求解最小二乘问题来确定拟合曲线的参数。这涉及到线性代数...

    计算方法上机实习2实习报告2

    这些子程序分别负责三次样条插值、线性回归和线性方程组的求解,而主程序jsff2则协调这些子程序的运行,完成整个计算过程。 通过上述分析,我们可以看出这次实习不仅锻炼了学生在理论知识上的理解,也强化了他们将...

Global site tag (gtag.js) - Google Analytics