воскресенье, 5 июня 2016 г.

Интеграция Oracle JET в ADF (Integration Oracle JET in ADF)

Ранее я рассказывал о том, что в 2015 году Oracle представил набор библиотек  для создания клиентских приложений: http://www.oracle-adf.info/2016/03/oracle-jet.html

В этой статье я хочу рассказать как можно встроить этот набор и использовать его  вместе с ADF. JET часть я возьму с предыдущей  статьи : https://github.com/JealousyM/jet-app

1. Создайте Fusion ADF приложение.
2. Скопируйте Jet файлы во ViewConroller->public_html



3. Создайте jspx страницу.
4. Теперь собственно приступим к встраиванию JET.

В html код выглядел так(красным цветом выделены необходимые элементы, это подключение css,js и компоненты):


<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>index</title>
<link rel="stylesheet" href="css/libs/oj/v1.1.2/alta/oj-alta-min.css" type="text/css"/>
<script data-main="js/main" src="js/libs/require/require.js"></script>
</head>
<body>
<div id="container">
<label for="input">Input value:</label>
<input id="input" type="text" data-bind="ojComponent: {component: 'ojInputText', value: value}"/>
<span class="oj-label">Current value is:</span>
<span data-bind="text: value"></span>
</div>
</body>
</html>

Встроить в jspx страницу JET код достаточно легко: подключение css и js модулей должно быть в начале страницы, а визуальная часть может находиться в любой нужной вам части страницы(единственное ограничение - код должен быть внутри div)

<?xml version='1.0' encoding='UTF-8'?> <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document title="JetAdfApp" id="d1">
<link id="jetCss" rel="stylesheet" href="css/libs/oj/v1.1.2/alta/oj-alta-min.css" type="text/css"/>
<script data-main="js/main" src="js/libs/require/require.js" xmlns="http://www.w3.org/1999/xhtml"></script>
<af:resource type="javascript" source="/js/adfJetScripts.js"/>
<af:form id="f1">
<af:panelHeader text="ADF" id="ph2">
<f:facet name="context"/>
<f:facet name="menuBar"/>
<f:facet name="toolbar"/>
<f:facet name="legend"/>
<f:facet name="info">
</f:facet>
<af:inputText label="Input value:" id="adfInput" clientComponent="true"
partialTriggers="sendBt"/>
<af:button text="Send to Jet" id="sendBt" partialSubmit="true" clientComponent="true">
<af:clientListener method="sendToJet" type="click"/>
</af:button>
</af:panelHeader>
<af:panelHeader text="JET" id="ph1">
<f:facet name="context"/>
<f:facet name="toolbar"/>
<f:facet name="menuBar"/>
<f:facet name="legend"/>
<f:facet name="info"/>
<div id="container">
<label for="input">Input value:</label>
<input id="input" type="text"
data-bind="ojComponent: {component: 'ojInputText', value: value}"/>
<span class="oj-label">Current value is:</span>
<span data-bind="text: value"></span>
</div>
</af:panelHeader>
</af:form>
</af:document>
</f:view>
</jsp:root>

Передачу данных между ADF и JET можно организовать при помощи clientListener( исходники приложения на github: https://github.com/JealousyM/jet-adf )

Результат: