Каждый визуальный компонент наследуется от класса Control. В данном классе существует ряд абстрактных свойств и методов, которые каждый наследник должен реализовать.
Конструктор компонента должен содержать один параметр settings, через который должно поддерживаться задание любых свойств компонента, а также его событий:
varbb = new PP.Button({
Width : 30,
Click : function test() {},
ParentNode : “div1”
Content : "Button"
});
После создания конструктора должен выполниться общий рендеринг компонента и заполнение поля ctrl._DomNode.- Если задано свойство ParentNode, то компонент должен добавиться в данную вершину. Если компонент состоит из нескольких простых компонентов, то через settings должна быть возможность задания свойств этим внутренним частям:
varcomboBox = new PP.Ui.ComboBox({ Id: "combo2",
ListBox: { Orientation: PP.Orientation.Vertical,
Items: [
{ Content: "General"},
{ Content: "Numeric" },
]
}
});
Для каждого компонента можно вызывать метод addToNode, при этом не важно, добавлен компонент на страницу или нет, после вызова этого метода компонент должен отрисоваться в указанной вершине.
После вызова данного метода все внутренние компоненты и свойства должны удалиться. Также компонент должен удалиться со страницы. После вызова этого метода не должно быть подписанных событий на DOM-вершины.
После вызова этого метода компонент должен удалиться со страницы. После вызова этого метода не должно быть подписанных событий на DOM-вершины.
Последующий вызов addToNode должен отработать без ошибок.
Данные методы должны удалять компонент со страницы и отображать соответственно.
Данные свойства должны определять размер компонента. Методы setSize и updateSize для обновления размеров.
Каждый компонент должен поддерживать стандартные события базового класса Control:
["Click", "DblClick", "KeyDown", "KeyUp", "MouseDown", "MouseUp", "MouseOver", "MouseOut", "ContextMenu", "DragStart", "Drag", "DragEnd", "DragOver", "DragOut", "SizeChanging", "SizeChanged"]
Каждый компонент должен поддерживать данные свойства. При установке данных свойств визуально изменения должны применяться сразу.
При Enabled==false компонент должен быть недоступным, то есть все действия пользователя над компонентом должны игнорироваться, но при этом вызов внутренних методов должен отрабатывать как при Enabled==true.
Данные методы должны позволять получать и задавать состояние компонента в виде json объекта. При этом должно поддерживаться задание состояния внутренним частям компонентов, например ListBox внутри ComboBox’a.
Если компонент 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();
}
Следующая статья: Правила описания контекстной документации