ADF 頁面使用 JavaScript 例子

一、ADF頁面中嵌入javascript有兩種方式：

1、頁面中直接寫入。舉例：

<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>

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

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

二、ADF頁面中對js函數的訪問方式。

<?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>

F00mc004.js源碼如下：

function sayOutFileJS() {
    alert("This is function which is in a js file ");
}