понедельник, 28 октября 2013 г.

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

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

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

  • 2 af:commandButton  (cb1,b2);
  • 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