Применение Веб-методов. Технология Jasp

14.2.4.3. HTML ресурсы

HTML ресурс – это текстовый файл с расширение html или htm, содержащий HTML разметку компоненты или страницы. Данный файл должен удовлетворять синтаксическим требованиям XML, но при этом, может не являться XHTML-документом. Также в этом файле могут встречаться вставки для создания экземпляров дочерних компонент.

14.2.4.4. Бинарные ресурсы

Также Jasp поддерживает в качестве ресурсов изображения и другие бинарные файлы. При первом старте сайта, такие файлы будут "распакованы" из всех сборок сайта по умолчанию в папку \deploy\<имя сборки> в корне сайта. В HTML, CSS и JavaScript можно использовать специальную конструкцию ~<имя сборки>/<путь к ресурсу>, например в CSS можно написать:

body {  
    background-image: url('~Jasp.Examples/Files/Images/background.gif')
}

В результирующий CSS попадет отформатированная ссылка на ресурс, содержащая абсолютный путь до файла (если сайт работает в виртуальной директории, то будет подставлено и имя директории):

body {  
    background-image: url('/deploy/Jasp.Examples/Files/Images/background.gif')
}

При разработке, нет необходимости каждый раз после изменения файла делать перекомпиляцию проекта – Jasp сам умеет следить за изменениями в ресурсах и автоматически подхватывать их.

Конечно, же, никто не мешает использовать обычный подход к ресурсам, т.е. просто хранить CSS/ JavaScript /HTML и т.п. файлы, но тогда теряется ряд преимуществ, которые предоставляет Jasp: автоматическая загрузка стилей, скриптов по мере использования; минимизация скриптов и разметки; GZIP для страниц, стилей и разметки; возможность использования ресурсов и компонент, использующих их, из других проектов.

Зачастую, разные проекты на нужды одной компании имеют похожий интерфейс. Используя Jasp, можно с легкостью создать библиотеку компонент и ресурсов, содержащую базовые страницы ( MasterPage с layout 'ом по умолчанию, страницы ошибок, 404, 500 и т.п.), компоненты, изображения, стили, скрипты, и другие общие для проектов ресурсы. Например, используя библиотеку ExtJS сразу в нескольких проектах, достаточно сложно поддерживать одинаковую версию ExtJS библиотеки (включая все изображения, скины, плагины и bugfix'ы), т.к. это огромный набор файлов. Используя Jasp, можно с легкостью создать сборку, содержащую все необходимые ресурсы. Это решит проблему синхронизации версий всех файлов между проектами, а также возможные проблемы обновления при выходе новой версии библиотеки. Кроме того, как уже говорилось ранее, Jasp оптимизирует всю работу с ресурсами, начиная от автоматической загрузки, кончая сжатием и клиентской оптимизацией.

14.2.5. Страницы и компоненты

14.2.5.1. Создание страниц

Для создания страницы, необходимо создать класс, наследующий от класса Jasp.Web.UI.Page, после чего, Jasp будет обрабатывать запрос к одноименной странице. Вложенность страниц в папки производится через пространства имен, т.е. достаточно создать папку в проекте, после чего все классы, создаваемые в папке, будут находиться в пространстве имен новой вложенности (по умолчанию в Visual Studio), также как и путь к странице. Тут необходимо учесть, что за базовое пространство имен (от которых начинается нулевой уровень вложенности страниц ), берется имя сборки. Например, для сборки с именем Jasp.Examples, страница с классом Jasp.Examples.Example1 будет обрабатываться по запросу /Example1.jasp, а с классом Jasp.Examples.OldExamples.Example2 по адресу /OldExamples/Example2.jasp. Естественно, имена страниц не чувствительны к регистру.

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; }
    //}
}

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

{
    $init: function() {
        var control = new Jasp.Examples.Controls.MyUserControl({
            title: 'Контрол 1',
            arg: [3, 2]
        });
        // производим необходимые действия с контролом
    }
}

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

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