14.2.5.2. Создание компонент

Для создания компонент, необходимо создать класс, наследованный от класса Jasp.Web.UI.UserControl. В Jasp страница является обычным компонентом, так что все функции и возможности, доступные компоненту, как на серверной, так и на клиентской стороне доступны также и странице. Далее, все действия, описываемые для компонент, справедливы также и для страниц.

Каждому компоненту, за исключением страницы, можно создать сокращенное наименование (alias, алиас) с помощью атрибута AliasAttribute, чтобы не указывать зачастую длинные полные имена, и использовать его в JavaScript-коде или разметке.

Как говорилось ранее, в Jasp каждому компоненту можно прикреплять ресурсы, которые автоматически будут загружаться, при его использовании. Для автоматической подгрузки общих ресурсов компонента, достаточно добавить атрибут ResourcesAttribute, в котором перечислить названия общих JavaScript или CSS ресурсов.

Также важно отметить, что на клиентской стороне Jasp не создает лишних глобальных переменных – вся работа происходит внутри одного глобального объекта Jasp. Это позволяет избежать конфликтов с другими библиотеками (в целях оптимизации, Jasp все же создает сокращенные глобальные "алиасы" для компонент, которые имеют формат $j<системный номер компонента>, но вероятность того, что данные "алиасы" могут вызвать конфликт с другими JavaScript-библиотеками крайне мала).

Создать экземпляр компонента можно следующими методами:

1. программно, на серверной стороне;

2. через разметку, на серверной стороне;

3. синхронно или асинхронно на клиентской стороне.

При использовании первых двух вариантов, ресурсы компонент загружаются при загрузке страницы. При использовании последнего варианта, для всех ресурсов компонента идет один запрос к серверу, который возвращает необходимые данные и ресурсы (скрипты, разметку и стили). В Jasp у каждого компонента есть коллекция с дочерними компонентами как на серверной стороне (свойство Controls), так и на клиентской (массив $controls). Также на клиентской стороне у родительского компонента присутствуют свойства с идентификаторами каждого дочернего компонента (начиная со специального символа $).

14.2.5.2.1. Создание экземпляров компонент программно

Для создания компонента программно, необходимо создать новый экземпляр класса и добавить его с помощью метода Add в коллекцию Controls родительского компонента или страницы. Правильнее всего, это делать в переопределенном методе OnInit:

protected override void OnInit()

{

Controls.Add(new MyUserControl());

}

14.2.5.2.2. Создание экземпляров компонент через разметку

Для создания компонент в разметке достаточно создать тег, с полным именем компонента (включая пространство имен) и указанием атрибутов, которые он поддерживает:

<jasp.examples.controls.myusercontrol id="control1" title="Контрол 1" />

14.2.5.2.3. Создание экземпляров компонент на JavaScript

Для создания компонент на JavaScript, достаточно создать новый экземпляр с помощью оператора new, и передать необходимые параметры первым аргументом:

{

$init: function() {

var control = new Jasp.Examples.Controls.MyUserControl({

title: 'Контрол 1'

});

// производим необходимые действия с контролом

}

}

Если в аргументе задано свойство callback(типа function), то компонент будет создан асинхронно, и callback будет вызван после создания компонента на сервере:

{

$init: function() {

new Jasp.Examples.Controls.MyUserControl({

title: 'Контрол 1',

callback: function(control) {

// производим необходимые действия с контролом

}

});

}

}

Если в аргументе задано свойство arg (типа array), то при создании компонента будет вызван серверный конструктор с заданными параметрами из arg (поддерживается перегрузка только по числу параметров, по типу параметров перегрузка не поддерживается). По своей сути arg – это аргумент конструктора. При этом на сервере все дочерние компоненты, которые будут созданы при запросе (из разметки или программно), будут возвращены на клиент и также будут являться дочерними для создаваемого клиентского компонента. Вызываемый конструктор должен быть помечен атрибутом JsonRpcMethodAttribute.

Например, у нас есть следующий компонент:

public class MyUserControl : UserControl

{

private int _x, _y;

public MyUserControl()

{

}

[JsonRpcMethod]

public MyUserControl(int x, int y)

{

_x = x;

_y = y;

}

protected override void OnLoad()

{

Title = string.Format("Сумма {0}", _x + _y);

}

public string Title

{

get { return (string)Data["title"]; }

set { Data["title"] = value; }

}

///// <summary>

///// Данная реализация свойства работает с компонентом title, определенным в разметке

///// </summary>

//public string Title

//{

// get { return ((HtmlControl)GetById("title")).InnerText; }

// set { ((HtmlControl)GetById("title")).InnerText = value; }

//}

}

Примечание: в последней версии библиотеке атрибут JsonRpcMethodAttribute был удален. Теперь все публичные методы доступны из JavaScript-кода.

Одновременно создание компонента на сервере и на клиенте производится следующим образом:

{

$init: function() {

var control = new Jasp.Examples.Controls.MyUserControl({

title: 'Контрол 1',

arg: [3, 2]

});

// производим необходимые действия с контролом

}

}

Как видно из примера, на сервере происходит сложение двух чисел, переданных в клиентский конструктор через параметр arg. Результат записывается в свойство Title, которое может передавать результат на клиентскую сторону в виде JSON-объекта через свойство Data либо через произвольный HTML элемент. Например, через конструктор удобно передавать идентификаторы либо другие объекты, характеризующие какие-либо сущности, далее загружать необходимые данные на сервере и возвращать их на клиентскую сторону вместе с компонент.

Если arg не определен, то произойдет только клиентское создание компонент, при котором дочерние компоненты, определенные на стороне сервера, созданы не будут. Например, компонент для ввода даты вряд ли потребует вызов серверного конструктора.