Component Use Scenarios

Each visual component inherits from the Control class. Each class has abstract properties and methods, which can be implemented by each delegate.

Constructor

Component constructor must contain one parameter "settings", via which all component properties and its events must be set:

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

After creating a constructor execute general rendering of the component and fill the ctrl._DomNode field. If the ParentNode property is set, the component must be added to this node. If the component consists of several simple components, it must be available to set properties via "settings" for these internal components:

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

The addToNode Method

The addToNode method can be called for each component, it does not matter whether a component is added to the page, after calling of the method the component must be rendered in the specified node.

The dispose Method

After calling the method all internal components and properties must be deleted. The component must also be deleted from the page. After calling the method there must be no subscribed events for DOM nodes.

The removeFromDOM Method

After calling the method the component must be removed from the page. After calling the method there must be no subscribed events for DOM nodes.

The next calling of addToNode must work without errors.

The show, hide Methods

These methods must remove and show the component from the page respectively.

The Width, Height Properties and setSize, updateSize Methods

These properties must determine component size. The setSize and updateSize methods for updating sizes.

Standard Events of the Control Class

Each component must support standard events of the Control basic class:

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

The Enabled, IsVisible, IsRTL Properties

Each component must support these properties. On setting these properties there must be immediate visual changes.

If the value is Enabled==false, the component must be unavailable, that is, all user actions on the components must be ignored, but at the same time internal methods must be called as if the value is Enabled==true.

The setSettings, getSettings Methods

These methods must enable the user to get and set component state as a JSON object. In this case, state for internal component parts must be set, for example, ListBox inside ComboBox.

Cascade dispose

If the A component uses some other B component, which is determined on creating, on calling A.dispose the dispose method must not be called for the B object because the A object is not an owner of the B object. If the B object is still created inside the A object, on calling A.dispose the B.dispose must be called too.

Scenarios of Testing for Memory Leaks

Below are main scenarios of visual component use, during which there must not be exceptions and memory leaks.

Create a button and call dispose:

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

Create a button on the page and call 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: "Button",
             ImageUrl: "img/backimage.png",
       });
       pp_Button.dispose();
}

Next article: Rules of Context Documentation Description