суббота, 5 марта 2016 г.

Oracle JET. Описание и создание простого приложения (Oracle JET. Creating simple application)

В 2015 году на Oracle OpenWorld 2015 был представлен народу Oracle JavaScript Extension Toolkit (Oracle JET). Oracle JET - это  набор JavaScript библиотек находящихся в открытом доступе и созданных Oracle для более простого  и эффективного как это возможно построения клиентских приложений, которые  используют и   взаимодействуют с сервисами и продуктами Oracle

Oracle JET предназначен для :

  • добавления интерактивности к существующим страницам
  • добавления более тесной  интеграции с сервисами Oracle для существующего приложения
  • создания нового полноценного клиентского приложения
Oracle Jet использует следующие библиотеки и технологии(большинство вы технологий вы знаете) :


  • jQuery - JavaScript библиотека , фокусирующаяся на взаимодействии JavaScript и HTML
  • jQuery UI JavaScript библиотека   для создания насыщенного пользовательского интерфейса в веб-приложениях 
  • Knockout - JavaScript библиотека, позволяющая реализовать Model-View-View Model (MVVM) паттерн на клиенте
  • RequireJS - загрузчик модулей использующийся для управления библиотеками и загрузки ресурсов. RequireJS использует  Asynchronous Module Definition (AMD) концепцию
  • JavaScript - всеми нами известный прототипно-ориентированный сценарный язык программирования : )
  • CSS (Cascading Style Sheets) - формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
  • HTML 5 язык для структурирования и представления содержимого в интернете
  • SASS (Syntactically Awesome Style Sheets) - это метаязык на основе CSS, предназначение которого увеличивать уровень абстракции CSS кода и упрощать файлы каскадных таблиц стиля. SASS предоставляет больше возможностей и свободы при написании CSS для создания сайтов.


Oracle JET поддерживает  Model-View-ViewModel (MVVM)  паттерн. В MVVM,  Model предоставляет данные приложению, View  отображает данные, а  ViewModel  являются связующим звеном, для того что бы следить за состоянием  приложения

Что бы  начать с Oracle JET, необходимо скачать один из двух файлов с OTN ( http://www.oracle.com/technetwork/developer-tools/jet/downloads/index.html ):



Разработку можно вести в хорошо нам знакомом Jdeveloper. Для этого нужно в нём создать Custom Application, и для проекта добавить features "HTML and CSS"



Далее в созданном проекте нужно создать папку public_html и скопировать туда файлы из ранее скачанного файла



Если вы скачивали базовый архив, то у вас в проекте появится три папки.


Теперь создайте index.html файл в проекте(при создании в jdev генерируется часть кода).



Далее нужно добавить  Alta тему для приложения, для этого нужно подключить CSS :



где v2.0.0 может отличаться от скачанной версии, а кроме alta может быть alta-android, alta-ios, alta-windows 

После этого добавим RequireJS.  Oracle JET использует RequireJS по умолчанию для Oracle JET QuickStart шаблона и требуется, если вы планируете использовать интернационализацию Oracle JET, компоненты визуализации данных или плагин oj.OAuth в приложении. Что бы добавить  RequireJS, необходимо  добавить строку :


а также  скопировать файл js/libs/oj/v2.0.0/main-template.js  в  js и переименовать в  main.js. В этом файле происходит подключение всех основных библиотек

Приложение готово к разработке.


Компоненты Oracle JET инкапсулируют  JQuery UI виджеты,  а так же имеют возможность использования привязки данных при помощи Knockout. Все Oracle JET компоненты расширяют  HTML элементы, и что бы добавить компонент, вам нужно добавлять HTML тэги на страницу. Некоторые Oracle JET  компоненты расширяют один HTML элемент (например ojInputText расширяет  input), а некоторые компоненты могут расширять несколько элементов( например ojButton расширяет input и div)

Что бы добавить Oracle JET  компонент на страницу, необходимо:

1. Выбрать компонент который вы будете использовать( список компонентов с описанием можно найти здесь :http://docs.oracle.com/middleware/jet200/jet/developer/GUID-92BDFF31-1197-4AF4-9330-E1F1CF245D83.htm#JETDG397 )
2. Посмотреть способ подключения этого компонента :  http://www.oracle.com/webfolder/technetwork/jet/uiComponents-formControls.html

По ссылке выше, по каждому компоненту описывается что нужно прописать в html файле, и подключенном ранее js файле(main.js). Если посмотреть на примере inputtext, то нужно добавить следуйщий код:

  • в HTML (от обычного input явное отличие, это knockout атрибут data-bind для связывания  данных. В него нужно прописывать название Oracle JET компонента, и название связываемой переменной) :




  • в main.js ( здесь прописываются компоненты которые используются в приложении и отслеживаются изменения значении). Тоесть нам нужно при добавлении компонента на странице:
  1. добавить его в require (  require([......,'ojs/ojinputtext'] )
  2. прописать логику обработки для связываемой переменной(например : this.value = ko.observable() ).
  3. применить связывание ( ko.applyBindings(new SimpleModel(), document.body) - здесь указывается какую модель использовать, и где именно на странице). 


В примере  на CookBook следующий код :


Теперь давайте вставим этот код в созданное нам приложение




Если запустить  index.html, то  запустится наше мощное приложение : )


Приложение можно найти в репозитории: https://github.com/JealousyM/jet-app

Ссылки :

Описание работы с knockout : http://www.k-press.ru/cs/2011/1/knockout/knockout.asp
Документация Oracle JET(english) : https://docs.oracle.com/middleware/jet112/jet/index.html