现象一

最近在项目中遇到这么一个问题,有些页面元素是在页面加载时通过JavaScript动态渲染而成。当生成这些元素的JavaScript脚本被放置于JSPX文件中时,界面渲染没有问题。但是当我们把生成这些页面元素的JS脚本放到JSFF时就会发现,JS脚本只在我们进入TaskFlow的第一个View被执行了,进入后续View时,后续View的JS代码加载和执行。

 
分析
通过分析,发现当进入TaskFlow的第一个View时,第一个View中通过<af:resource/>标签引入的JS代码能成功被添加到页面上,而且页面的onload事件也被执行,所以页面元素渲染成功。
但是当从第一个View流转到后续View时,后续View中通过<af:resource/>标签引入的JS代码则没有被加入页面中,所以页面元素都无法渲染。但是如果此时我们刷新页面,页面上的元素又能正确展现。这是因为刷新后ADF重新生成页面的HTML代码,重新解析了后View中的<af:resource/>标签,并将相关的代码引入页面。
 
解决
在<af:resource/>标签外套用<af:panelGroupLayout/>,这样resource就会每次都被包含到页面中。
 
现象二
解决了上一个问题,现在TaskFlow中所有View在展现时,JavaScript代码都能正确地被引入页面,并被执行以正确地生成页面元素。但是很快我发现了另外一个问题,那就是JavaScript代码只能在第一次展示View时成功被调用。如果我们从一个View流转到另一个View,然后再次流转回来的话,onload事件的JavaScript就不会被执行了。
 
分析
ADF渲染了某个View后,该View就会有缓存,再次访问时就不会再次渲染并触发onload事件。我尝试设置了TaskFlow的Refresh配置,但是无果。
 
问题的关键是现在无法保证每次进入View时都能触发onload事件,既然客户端脚本不行,那么是否能够通过服务端的方式在页面加载时激活相应的JavaScript代码进行元素的渲染呢?使页面在加载时能触发后台的一个Java方法,然后在Java方法内触发JS方法(关于如何在Java中调用JS,请参考我的这篇文章)。按照这个思路,我们可以通过在页面添加Executable来实现。通过搜索我发现网上的确也有人遇到类似的问题,并通过这种方法解决。但是通过Executable来实现有个缺点,就是需要生成自定义的Java Bean Data Control以及配置起来比较繁琐(需要为每个页面配置Method Binding以及Executable)。
 
解决
经过不断的尝试,最后,我想到了一个简化的方法:
1. 在View中添加一个<af:outputText/>标签;
2. 将<af:outputText/>的Value绑定到一个bean的属性#{myBean.dummy};
3. 其实,无需在myBean中定义dummy属性,只需定义一个getDummy()方法,并在其中添加调用JS代码的逻辑;
 
每当JSFF展现时ADF会重新执行所有的EL表达式,包括#{myBean.dummy},这样在getDummy()中的逻辑就会被执行,相应的JS方法也会被调用。这样我们的需求就实现了。但是,我觉得将JS的调用逻辑完全放在Bean中完成可能会比较死板。如果我们需要更改调用JS的逻辑,就必须要修改Bean的方法。最后我将调用JS的逻辑进行修改,使其调用脚本内容指向前台<af:outputText/>标签的shortDesc属性:
    private RichOutputText scriptSetting; //OutputText的binding变量
 
    public String getDummy() {
        String script = scriptSetting == null ? "" : scriptSetting.getShortDesc(); //获取脚本内容
        invokeJavaScript(script);//调用JS
        return "";
    }
 
以后如果某个页面需要在加载时调用JS脚本,只需要做下面3步:
1. 在TaskFlow中注册myBean;
2. 在页面中放置如下代码;
<af:outputText  shortDesc="youJSFunction();" 
                   value="#{myBean.dummy}" id="scriptControl"
                   binding="#{myBean.scriptSetting}"/>
3. 修改shortDesc属性值为所需要的JS代码。
 
示例的源代码请在这里下载,所使用的JDeveloper版本为11.1.1.6.0。
 
只要思想不滑坡,办法总比问题多 :)元芳,你怎么看?
 
转载自:http://blog.sina.com.cn/s/blog_671b3b1001018vr3.html
 
程序员的基础教程:菜鸟程序员

JSFF或JSF页面加载时触发JavaScript之方法的更多相关文章

  1. JSP在页面加载时调用servlet的方法

    方法:先在JS里面写一个调用servlet的事件(可以利用ajax),然后利用<body>标签的onload调用这个事件. 代码如下: jsp文件代码如下: <%@ page lan ...

  2. 页面加载时调用js函数方法

    方法一:在html的body中加入onload=""事件 <body onload='queryServer()'> </body> 方法二:jquery ...

  3. Javascript在页面加载时的执行顺序【转】

    一.在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对<script>和</script>之间 由<script />标记的src属 ...

  4. ASP.NET中页面加载时文本框(texbox控件)内有文字获得焦点时文字消失

    代码如下: <asp:TextBox ID="TextBox1" runat="server" Height="26px" MaxLe ...

  5. 使用 v-cloak 防止页面加载时出现 vuejs 的变量名

    使用 vuejs 做了一个简单的功能页面,逻辑是,页面加载后获取当前的经纬度,然后通过 ajax 从后台拉取附近的小区列表.但是 bug 出现了,在显示小区列表之前,会闪现小区名对应的 vuejs 变 ...

  6. 解决JS文件页面加载时的阻塞

    关于页面加载时的时间消费,许多书中都做出了介绍,也提出了很多种方法.本文章就详细介绍XHR注入. 概述:JS分拆的方法 1.XHR注入:就是用ajax异步请求同域包含脚本的文件,然后将返回的字符串转化 ...

  7. 页面加载时,页面中DIV随之滑动出来;去掉页面滚动条

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  8. jquery--blur()事件,在页面加载时自动获取焦点

    jquery--blur()事件会在页面加载时自动获取焦点,应将onblur写到html标签中 <div class="inputbox"> <input typ ...

  9. 使用 v-cloak 防止页面加载时出现 vue.js 的变量名

    知识点:使用 v-cloak 防止页面加载时出现 vue.js 的变量名 场景:在使用vue语法,实现下拉框功能时,展示数据列表之前,出现对应的 vuejs 变量名 代码: var vm = new ...

随机推荐

  1. HDU 1533

    http://acm.hdu.edu.cn/showproblem.php?pid=1533 人和房子数量相同,每个人进房子,费用是人到房子的曼哈顿距离,求最小费用 可用最小费用最大流求解,建立虚拟的 ...

  2. Js 图片轮播渐隐效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. WPF 设置TextBox为空时,背景为文字提示

    WPF 设置TextBox为空时,背景为文字提示.   <TextBox FontSize="17" Height="26" Margin="2 ...

  4. cratedb 集群搭建说明

    此为搭建说明,实际上搭建过es 集群的都是可以的,和es 基本一样 配置文件 crate.yaml 参考集群架构图 集群名称 cluster.name: my_cluster 每个node节点名称 如 ...

  5. opencv中读取显示图像

    opencv是个开源的图像处理的库,小到基本的图像处理函数,如图像移动放大缩小,大到人脸识别,部分机器学习的知识,所以是个学习的不错的库.之前有图像处理的知识,这次再学习下这个开源库. 先上基础的图像 ...

  6. python 书籍推荐 一

    最近"瑞丽模特学Python"的热点牵动了大江南北程序员的心,有人说这是炒作,也有人说这是推广Python的爆点...我嘿嘿一笑,美女就是美女,眼光那是杠杠的,不仅人美,学的语言也 ...

  7. 黄聪:Wordpress程序Mysql查询导致CPU100%,页面错误增量飙高解决方案

    最近做的网站,访客一多,CPU就会飙到100%,找了网上很多解决方案,用了下面的方法进行优化: 1.mysql开启慢查询方法: 在my.ini的[mysqld]添加如下语句: log-slow-que ...

  8. 一个单元测试 学习 aysnc await

    using System; using System.Threading.Tasks; using Microsoft.VisualStudio.TestTools.UnitTesting; name ...

  9. Data_Structure04-树

    一.学习总结 1.树结构思维导图 2.树结构学习体会 树结构,从字面上的意思来看,可以简单的理解为数据像一棵树一样展开存储.在学习本章的内容中,一开始只是理解了概念,在真正做题中,一点思路都没有,不知 ...

  10. 事务的ACID和四个隔离级别

    在实际的业务场景中,并发读写引出了和事务控制的需求.优秀的事务处理能力是关系型数据库(特别是oracle等商用RDBMS)相对于正当风口的NoSQL数据库的一大亮点.但这也从另一方面说明了事务控制的复 ...