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

• Oracle JavaScript Extension Toolkit : Base Distribution - базовый набор файлов для начала работы
• Quickstart: Basic Starter Template with Oracle JavaScript Extension Toolkit Pre-configured - включает 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