1. Главная
2. Документация
3. Разработчикам
4. Базовые понятия
5. Технология BrickJSEngine

Технология BrickJSEngine

BrickJSEngine - это технология построения полноценных элементов управления пользовательского интерфейса на базе JavaScript. Выражение «Полноценных элементов управления» здесь приведено не случайно. Оно заключается в том, что благодаря этой технологии, интерфейс пользователя действительно становиться гибким и сравним по мощности с интерфейсом локальных программ и их оконным интерфейсом. А главное, полноценное интернет-приложение может работать в браузере клиента без использование дополнительных фреймворков (java и т.п.). Для работы приложения нужен только браузер и его JavaScript.

Принцип работы BrickJSEngine

1. Клиент: Интернет-браузер запрашивает страницу сайта, которое будет использовать технологию построения интернет-приложений BrickJSEngine.
Сервер: Ядро платформы собирает информацию о всех имеющихся в ней модулей и их JS-компонентах и включает эту информацию в JS-файл ядра фреймворка BrickJSEngine. При этом платформа кеширует этот скомпилированный JS-скрипт и при последующем запросе отдает его уже из кеша.

2. Клиент: Интернет-браузер запрашивает приложение модуля. Фреймворк BrickJSEngine делает запрос на динамическую загрузку определенного JS-компонента.
Сервер: Ядро платформы компилирует исходный код JS-компонента в один JS-файл и отдает клиенту. Если для работы этого JS-компонента необходимы другие JS-компоненты и они указаны в его заголовках, то при получении клиентом этого JS-компонента, BrickJSEngine производит динамическую подгрузку оставшихся JS-компонентов. Это происходит до дех пор, пока не будут подгружены все необходимые JS-комопненты.

После получения клиентом всех необходимых JS-компонентов, BrickJSEngine выполняет JavaScript-код стартого JS-компонента, который при необходимости использует библиотеку запрошенных JS-компонентов.
Таким образом, в процессе выполнения интернет-приложения на платформе Абрикос, все необходимые библиотеки, их функции, подгружаются динамически. Важно заметить тот факт, что все загруженные JS-компоненты складываются в кеш интернет-браузера и при повторном запросе берутся из этого кеша.

Структура JS-компонента

JS-компонент в платформе Абрикос не может быть отдельной сущностью, а принадлежит определенному модулю. Все JS-компоненты находяться в папке js определенного модуля.

  [корневая папка платформы]/
    modules/
      [имя_модуля]
        js/
          langs/
            [имя_js_компонента]_ru.js   - набор фраз русского языка
            [имя_js_компонента]_en.js   - набор фраз английского языка
          [имя_js_компонента].js        - основной JS-файл компонента
          [имя_js_компонента].htm       - HTML-шаблон JS-компонента 
          [имя_js_компонента].css       - CSS-стиль JS-компонента
          

Основной JS-файл компонента

Этот файл является главным в JS-компоненте и содержит в себе исполняемый JavaScript-код.

// создать экземпляр компонента
var Component = new Brick.Component();

// Описание зависимостей этого JS-компонента от других JS-компонентов и прочих JS-библиотек
Component.requires = {
 
 // запросить библиотеки [libname1],...,[libnameN] JS-фреймворка YUI 
 yahoo: ['[libname1]',...,'[libnameN'],
 
 // запросить JS-компоненты из других модулей платформы 
 mod:[
  {name: '[модуль1]', files: ['[js_комп1].js',...,'[js_компN].js']},
  ...
  {name: '[модульN]', files: ['[js_комп1].js',...,'[js_компN].js']},
  
  // запросить JS-компоненты этого модуля
  {name: '{C#MODNAME}', files: ['[js_комп1].js',...,'[js_компN].js']}
 ]		
};

// Точка входа JS-компонента
Component.entryPoint = function(NS){

	// этот JS-код будет выполнен после динамической загрузки всех 
	// зависимых JS-компонентов и прочих JS-библиотек
	...
};

HTML-шаблон JS-компонента

Этот файл содержит HTML-шаблон JS-компонента. Не является обязательным. Используется для построения интерфейса.

 <!--{[id_шаблона1]}-->
 <div id="{i#id}" class="aw-mymodule-class">
  ...
 </div>
 
 ...
 
 <!--{[id_шаблонаN]}-->
 <div id="{i#id}" class="aw-mymodule-class">
  ...
 </div>

где, [id_шаблона1],...,[id_шаблонаN] - идентификаторы HTML-шаблонов

CSS-стиль JS-компонента

CSS-стиль JS-компоненат, который будет применен в процессе выполнения JS-компонента. Не является обязательным. Используется для построения интерфейса.

.aw-mymodule-class {
	... 
}
...

Локализация JS-компонента

Набор фраз определенного языка. При компиляции используется файл языка указанного в настройках платформы. Для автоматизации процесса локализации разработан специализированный модуль Localize. Не является обязательным. Используется для построения интерфейса.

Brick.util.Language.add('[lang_id]',{'mod': {'{C#MODNAME}':{
	'[phrase1]': '[Значение фразы языка lang_id]',
	...,
	'[praseN]': '[Значение фразы языка lang_id]'
}}});