ADF页面使用javascript示例

一、ADF页面中嵌入javascript有两种方式：

1、页面中直接写入。举例：
[code]
<af:resource type="javascript">
function sayHello() {
alert("Hello, world!")
}

function sayJianlong() {
alert("Hello, world!")
var greeting = AdfPage.PAGE.findComponentByAbsoluteId("greeting");
alert(greeting);
greeting.setValue("http://www.ejianlong.com");
}

function sayHtml() {
var name = document.getElementById("name").value;
alert(name);
}

</af:resource>
[/code]

2、使用外部链接js文件。例如：

[code]
<af:resource type="javascript" source="/mc/js/F00mc004.js"></af:resource>
[/code]

二、ADF页面中对js函数的访问方式。

[code]
<?xml version='1.0' encoding='UTF-8'?>
<!-- ADF中使用javascript示例 -->
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document id="d1" title="my test for javascript\html\adf">

<!-- ADF Tag内嵌JS代码方式 -->
<af:resource type="javascript">
function sayHello() {
alert("Hello, world!")
}

function sayJianlong() {
alert("Hello, world!")
var greeting = AdfPage.PAGE.findComponentByAbsoluteId("greeting");
alert(greeting);
greeting.setValue("http://www.ejianlong.com");
}

function sayHtml() {
var name = document.getElementById("name").value;
alert(name);
}

</af:resource>

<af:resource type="javascript" source="/mc/js/F00mc004.js"></af:resource>

<!-- 测试ADF JS调用 -->
<af:commandButton text="Say Hello" id="button1">
<af:clientListener method="sayHello" type="click"/>
</af:commandButton>

<!-- 测试ADF JS调用，通过ADF js组件访问ADF Component -->
<af:commandButton text="Say Jianlong and show it's websit url" id="button12">
<af:clientListener method="sayJianlong" type="click"/>
</af:commandButton>
<af:outputText id="greeting" value="" clientComponent="true"/>

<!-- 测试ADF Tag与HTML Tag混用，并通过HTML Tag访问ad:resource标记的JS function -->
<af:panelBox text="PanelBox1" id="pb1">
<f:facet name="toolbar"/>
<form id="form1">
<input id="name" type="text" value="please input your name" />
<input id="button" type="button" οnclick="sayHtml()" value="sysHTML" />
</form>
</af:panelBox>

<!-- 测试ADF Tag与JSF Tag混用，并通过JSF Tag访问ad:resource标记的JS function -->
<af:panelBox text="PanelBox2" id="pb2">
<f:facet name="toolbar"/>
<h:commandButton id="testJSF" type="button" value="testJSF" οnclick="sayHello()" />
</af:panelBox>

<af:panelFormLayout id="pfl1">
<af:form id="f1">
<af:commandButton text="access js function from js file" id="cb1">
<af:clientListener type="click" method="sayOutFileJS"/>
</af:commandButton>
</af:form>
<f:facet name="footer"/>
</af:panelFormLayout>

</af:document>
</f:view>
</jsp:root>
[/code]

F00mc004.js源码如下：
[code]
function sayOutFileJS() {
alert("This is function which is in a js file ");
}
[/code]

[color=gray]如果您觉得本文对您有益，请点击博文后的google广告，对作者表示支持，谢谢！[/color]