jRIApp - новый HTML5 фреймворк для создания интернет бизнес приложений

Источник: habrahabr

MaximTsap

jRIApp - ещё один HTML5 фреймворк, созданный для разработки Web приложений, которые по своей функциональности мало чем уступают desktop приложениям. Основное отличие от уже существующих фреймворков типа angularJS или emberJS, это наличие интегрированного с фреймворком сервиса данных, а также использование MVVM дизайн-архитектуры вместо наиболее распространенного в фреймворках такого типа MVC дизайна.
В общих чертах его можно охарактеризовать как HTML5 Фреймворк реализующий привязку к данным, имеющий инфраструктуру для декларативного прикрепления логики к HTML элементам, имеющий классы для работы с данными (DbContext, DbSet) и имеющий реализованную серверную часть дата сервисов. Клиентская часть фреймворка написана на javascript ( сейчас в разработке typescript версия ), а серверная часть на C#. Этот фреймворк опубликован на GitHub под MIT лицензией. Он включает демо-приложение написанное с использованием ASP.NET MVC4 и содержит документацию по его использованию.

Стиль приложений создаваемых с использованием jRIApp очень напоминает создание приложений с использованием Microsoft Silverlight с WCF RIA сервисом. Привязка к данным имеет схожий синтаксис - однонаправленная, двунаправленная, может использовать конвертер данных. Действия (action) можно привязывать через команды (command) к пользовательским элементам типа кнопки или гиперссылки. К примеру, так создается в демо-приложении переключатель страниц:

   
   Total: ,   Selected:

Шаблоны, также имеют схожий тип создания - в них исключается использование скрипта подобного циклам foreach, которые повторяют вывод кусков разметки в результирующий HTML документ. Эта функциональность в шаблонах прекрасно заменяется, тем, что каждый DOM элемент к свойствам которого осуществляется привязка к данным, на самом деле обертывается при создании привязки видом элемента (element view), который по сути может привязывать любую логику к HTML элементу. Таким образом jQuery плагин привязывает логику к HTML элементу, однако фреймворк делает это в декларативном стиле. Пример небольшого шаблона:

   Time:

Помимо этого имеются уже готовые пользовательские элементы, интегрированные с компонентами для работы с данными, такие как - DataGrid, DataForm, StackPanel, ComboBox и др. Валидация данных проходит как на клиенте, так и на сервере и использует метаданные задаваемые на серверной стороне. В дополнение, я хотел бы включить в этот топик немного основ для начала работы с Фреймворком.

Базовый класс фреймворка:

Чем он так примечателен?
Во первых он несет в себе функции observer, т.е. к нему можно присоединять события, на которые подписчики хотят получать уведомления. Он также несет в себе базовую функцию уничтожения объекта, чтобы освободить занятые им ресурсы ( в основном ссылки на другие объекты и события ), и также может уведомить другие объекты о своём уничтожении с помощью события, и ещё может уведомлять подписчиков об ошибках, которые произошли в этом объекте ( как правило клиенты подписываются только на событие error у объектов Global и Application ). Еще одна важная функция присущая данному классу, это то, что он имеет метод, extend , что позволяет наследовать функциональность в производных классах. Пример создания нового класса объекта:

var NewObject = RIAPP.BaseObject.extend( { //конструктор _create:function (radioValue) { this._super(); this._radioValue = radioValue; }, //переопределение базового метода _getEventNames:function () { var base_events = this._super(); return ['radio_value_changed'].concat(base_events); }, //вызвать событие в собственном методе _onRadioValueChanged: function(){ this.raiseEvent('radio_value_changed',{value: this.radioValue}) } }, { //создание нового свойства radioValue:{ set:function (v) { if (this._radioValue !== v){ this._radioValue = v; this.raisePropertyChanged('radioValue'); this._onRadioValueChanged(); } }, get:function () { return this._radioValue; } } }, function (obj) { //регистрация класса, чтобы его можно было достать вне модуля //app - здесь доступно из внешнего closure scope app.registerType('custom.NewObject', obj); });

В дальнейшем, класс объекта можно получать из других модулей var Instance = app.getType('custom.NewObject').create('radioValue1'); Поскольку все классы объектов создаются внутри модулей, то классы объектов можно также экспортировать из них как это делается в классическом определении модулей, т.е. внутри каждого модуля переменная this ссылается на сам модуль и к ней можно прикрепить любые свойства. Например, в одном из модулей, newObjMod, мы экспортируем класс:
var thisModule = this; thisModule.NewObject = NewObject;
а в другом импортируем:
var NewObject = app.modules.newObjMod.NewObject; Изучив основу определения классов в Фреймворке можно перейти к определению привязки к данным, т.е. к объекту, Binding .

Привязка к данным:

В принципе, объект, Binding, можно создавать в коде, но более удобно, это, декларативное определение привязки к данным, которое в основном и используется в приложениях ( в документации есть пример создания привязки в коде ). Пример привязки к данным HTML элемента, select :

 //или

Модульная структура:

Фреймворк имеет иерархию модулей.
Объект Global имеет верхнюю структуру модулей. В одном из его модулей определяется класс Application.
Объект Application в свою очередь также имеет свои модули ( большинство модулей фреймворка ).
При создании экземпляра приложения ( Application ) он инициализирует свои модули, которые в свою очередь делятся на ключевые ( которые определены в фреймворке ), и пользовательские ( определены пользователем ).
Пользовательские модули обеспечивают расширение возможностей Фреймворка, а также служат для создания определений в них классов View Model, которые в пользовательских приложениях, MVVM, обеспечивают источники данных для привязок ( DataBindings ).

Итоги:

Я думаю, это только малая часть из всего, что имеется в фреймворке для создания приложений. Документация к нему имеет сейчас 80 страниц и описать все его возможности в коротком вводном топике не представляется возможным. Для более детального знакомства с ним понадобится написать несколько таких небольших топиков охватывающих каждый отдельную часть использования фреймворка. Но в первую очередь я предлагаю посмотреть проект на GitHub и посмотреть видео демо-приложения на youtube. Также, прошу учесть, что Фреймворк создавался мной для перевода приложений работающих в SilverLight, и, что это были приложения для работы с данными. Поэтому, дизайн демо приложения простой, в нем показано в основном как работать с данными. Однако, если вы хотите хорошего дизайна, то этот Фреймворк ничего не ограничивает в плане использования стилей и дизайна. Дизайн будет зависеть только от дизайнера.

Oracle выпускает Java Platform Enterprise Edition 7.

Business Objects в четверке лидеров списка BIPMQ.

Computer Associates включает управление качеством IT-обслуживания в состав интегрированных решений.

Лицензирование Crystal Reports for Java.

Rational Software Delivery Platform Desktop Products Release 7.

Главная » Java