Использование JavaScript в ADF

Доброго времени суток. В этой статье будет показано на примере как использовать Java Script(JS) в ADF.А именно,рассмотрим такие вещи как:
1. Вызов JS функции с ADF страницы.
2. Вызов JS функции с Java.
3. Передача аргументов в JS функцию.
4. Работа с ADF компонентам в JS.

Для этого создайте  форму с компонентами:

• 2 af:commandButton  (cb1,b2);
• 3 af:inputText(it1,it2,it3);
• 2  af:outputText (ot1,ot2).
•  af:popup (p1) с af:dialog (d2) и af:outputText (ot3) с value="Привет Мир  

и назовите их как показано на следующем рисунке :

Описание работы  кнопок:
 "Запустить сценарий со страницы" - запуск  JS функции по нажатию кнопки со страницы, которая передаст  данные с X(it1),Y(it2) в JS   при помощи  af:clientatribute и установит в Z cсумму X и Y при помощи поиска;
"Запустить сценарий с Java" - запуск  функции через Java код;



Приступим к  реализации самого скрипта  и привязке его к приложению.

Создайте JavaScript файл ScriptsForADF.js(Нажмите CTRL+N, и во вкладке HTML выберите   JavaScript файл)

И создайте там функцию:

  function SumFromAttribute(evt

{

} 

Теперь нам нужно связать ScriptsForADF.js и нашу ADF страницу. Для этого на страницу добавьте компонент af:resource  из вкладки ADF Faces->Operations как показано на следующем рисунке

 Выберите в Source наш JavaScript файл ScriptsForADF.js

Файл привязан. Теперь нужно вызвать функцию из ScriptsForADF. Для этого используется  компонент af:clientListener. Его нужно  добавить в тот компонент, который нам нужно прослушивать. Это кнопка  Запустить сценарий со страницы(cb1). У  af:clientListener есть два свойства method (имя необходимой функции в JS) type(событие по  которому должен выполниться сценарий). У нас это : method="SumFromAttribute" type="click" ( нажатие мышкой по компоненте)

Что бы передать наши данные, со страницы, в JS нам их нужно где то хранить.Для это создадим ManagedBean .Один из способов показан на следующих двух рисунках(Bean  и класс назовите BeanClass)

 В Бине создайте две переменных x и у и сгенерируйте  get и set методы к ним как показано на рисунке.

Теперь эти переменные нужно связать с it1(x) и it2(y). Для этого в свойстве value компонента it1 и it2 (  #{BeanClass.x} и #{BeanClass.y}соответственно ). Так же установите у них свойство AutoSubmit="true". А у it3 установите свойство partialTriggers="it1 it2".

Связанные  переменные необходимо передать  в скрипт. Это можно сделать двумя способами:

1. Использовать компонент af:clientAttribute.  

2. Взять данные с формы в скрипте при помощи document.getElementById. 

Первый способ используем для  того что бы взять данные с  it1(x) и it2(y). А document.getElementById используем  для установки значения в it3.

В компонент cb1 добавьте 2 раза тег af:clientAttribute  как показано далее:

 <af:commandButton text="Запустить сценарий со страницы" id="cb1"

                              partialSubmit="true" partialTriggers="it1 it2">

              <af:clientListener method="SumFromAttribute" type="click"/>

              <af:clientAttribute name="x" value="#{BeanClass.x}"/>

              <af:clientAttribute name="y" value="#{BeanClass.y}"/>

            </af:commandButton>

Осталось написать саму функцию в скрипте,она достаточно проста:

function SumFromAttribute(evt)

{

var evts=evt.getSource();

var sum=  document.getElementById('it3::content'); //связывание переменной summ с компонентой  it3 

var it1=evts.getProperty("x"); //данные с <af:clientAttribute name="x"....

var it2=evts.getProperty("y"); //данные с <af:clientAttribute name="y"....

var it3=it1+it2;

sum.value=it3; //передача данных на страницу

} 

Готово.  Теперь наше приложение при помощи скрипта может складывать два числа : )) 

Часто необходимо вызвать скрипт с Java кода,  а не по какому либо событию. Этим и будем заниматься по нажатию кнопки  "Запустить сценарий с Java"

В ScriptsForADF.js  добавьте  функцию  которая будет открывать всплывающее окно

function ShowPopup()

{

    var popupid="p1"; //полный  id компонента

    var popup = AdfPage.PAGE.findComponentByAbsoluteId(popupid); //поиск компонента       

    popup.show(); //открытие окна

}

А на кнопку "Запустить сценарий с Java" в bean-е добавьте следующий код 

    

public String clickButton() {

        FacesContext fctx = FacesContext.getCurrentInstance();

        ExtendedRenderKitService erks = Service.getRenderKitService(fctx, ExtendedRenderKitService.class); 

        erks.addScript(fctx, "ShowPopup()");// "ShowPopup() -название функции в скрипте 

        return null;

    }

Готово:

В JS можно работать со всеми компонентами ADF, по следующей ссылке можно просмотреть все доступные свойства.

http://docs.oracle.com/cd/E17904_01/apirefs.1111/e12046/toc.htm

Так же есть исчерпывающая статья от Oracle об использовании JS в ADF

http://www.oracle.com/technetwork/developer-tools/jdev/1-2011-javascript-302460.pdf