Сценарии использования компонентов

Каждый визуальный компонент наследуется от класса Control. В данном классе существует ряд абстрактных свойств и методов, которые каждый наследник должен реализовать.

Конструктор

Конструктор компонента должен содержать один параметр settings, через который должно поддерживаться задание любых свойств компонента, а также его событий:

var bb = new PP.Button({
     Width : 30,
     Click : function test() {},
     ParentNode : "div1"
     Content : "Button"
});

После создания конструктора должен выполниться общий рендеринг компонента и заполнение поля ctrl._DomNode.- Если задано свойство ParentNode, то компонент должен добавиться в данную вершину. Если компонент состоит из нескольких простых компонентов, то через settings должна быть возможность задания свойств этим внутренним частям:

var comboBox = new PP.Ui.ComboBox({ Id: "combo2",
   ListBox: { Orientation: PP.Orientation.Vertical,
      Items: [
              { Content: "General"},
              { Content: "Numeric" },
      ]
   }
});

Метод addToNode

Для каждого компонента можно вызывать метод addToNode, при этом не важно, добавлен компонент на страницу или нет, после вызова этого метода компонент должен отрисоваться в указанной вершине.

Метод dispose

После вызова данного метода все внутренние компоненты и свойства должны удалиться. Также компонент должен удалиться со страницы. После вызова этого метода не должно быть подписанных событий на DOM-вершины.

Метод removeFromDOM

После вызова этого метода компонент должен удалиться со страницы. После вызова этого метода не должно быть подписанных событий на DOM-вершины.

Последующий вызов addToNode должен отработать без ошибок.

Методы show, hide

Данные методы должны удалять компонент со страницы и отображать соответственно.

Свойства Width, Height и методы setSize, updateSize

Данные свойства должны определять размер компонента. Методы setSize и updateSize для обновления размеров.

Стандартные события класса Control

Каждый компонент должен поддерживать стандартные события базового класса Control:

["Click", "DblClick", "KeyDown", "KeyUp", "MouseDown", "MouseUp", "MouseOver", "MouseOut", "ContextMenu", "DragStart", "Drag", "DragEnd", "DragOver", "DragOut", "SizeChanging","SizeChanged"]

Свойства Enabled, IsVisible, IsRTL

Каждый компонент должен поддерживать данные свойства. При установке данных свойств визуально изменения должны применяться сразу.

При Enabled==false компонент должен быть недоступным, то есть все действия пользователя над компонентом должны игнорироваться, но при этом вызов внутренних методов должен отрабатывать как при Enabled==true.

Методы setSettings, getSettings

Данные методы должны позволять получать и задавать состояние компонента в виде json объекта. При этом должно поддерживаться задание состояния внутренним частям компонентов, например ListBox внутри ComboBox’a.

Каскадный dispose

Если компонент A использует какой-то другой объект B, который определяется при создании, то при вызове A.dispose, у объекта B не должен быть вызван метод dispose, так как объект A не является владельцем объекта B. Если же объект B создаётся внутри объекта A, то при вызове A.dispose, должен сработать вызов B.dispose.

Сценарии тестирования на наличие утечек памяти

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

Создание кнопки и вызов dispose:

function AddPPButton()
{
       for (i = 0; i < 1000; i++)
       {
                    CreatePPButton();
       }
}
function CreatePPButton()
{
       var   pp_Button = new PP.Button({
                    Id: "memory_button",
                    ParentNode: null,
                    Content: "Кнопка",
                    ImageUrl: "img/backimage.png",
       });
       pp_Button.dispose();
}

Создание кнопки на странице и вызов dispose:

function AddPPButton()
{
       for (var i=0; i < 1000; i++)
             CreatePButton();
}
function CreatePPButton()
{
       var pp_Button;
       pp_Button = new PP.Button({
             Id: "memory_button",
             ParentNode: document.getElementById("button_div"),
             Content: "Кнопка",
             ImageUrl: "img/backimage.png",
       });
       pp_Button.dispose();
}

Следующая статья: Правила описания контекстной документации