TW3CustomControl

From Smart Mobile Studio
Jump to: navigation, search


Unit: W3Components.pas


Hierarchy
TObject
TW3TagObj
TW3Component
TW3MovableControl
TW3CustomControl
Properties
Property-icon.png BorderRadius
Property-icon.png BoundsRect
Property-icon.png CSSClasses
Property-icon.png Enabled
Property-icon.png Font
Property-icon.png Height
Property-icon.png StyleClass
Property-icon.png Width
Property-icon.png Zoom
Protected Methods
Protected method-icon.png MouseDown
Protected method-icon.png MouseMove
Methods
Method-icon.png BringToFront
Method-icon.png SendToBack
Method-icon.png SetFocus
Events
Event-icon.png OnClick
Event-icon.png OnDblClick
Event-icon.png OnGotFocus
Event-icon.png OnKeyDown
Event-icon.png OnLostFocus
Event-icon.png OnMouseDown
Event-icon.png OnResize

Properties

Property-icon.png BorderRadius

Specifies borderRadius attribute (border-radius in CSS) of object – in pixels unit. This attribute “bevel” all borders of control by specified amount.

property BorderRadius: Integer read getBorderRadius write setBorderRadius;

Initial styling of some controls may include beveled borders (borderRadius > 0), but with this property it may be additionally adjusted.


Example:

W3Button Border Raduis


Property-icon.png BoundsRect

Determine control bounds (Left, Top, Width, Height) as TRect.

property BoundsRect: TRect read getBoundsRect;


Property-icon.png CSSClasses

Provide access to additional class names that may be assigned to same control.

Example:

W3Panel1.CSSClasses.Add('button');
W3Panel1.CSSClasses.Add('order');

Output:

<div id="OBJ5" class="TW3Panel button order" style="visibility: visible; display: inline-block; position: absolute; overflow: hidden; left: 16px; top: 120px; width: 200px; height: 80px;"></div>


See also: TW3CSSClassStyleNames


Property-icon.png Enabled

Specifies whether user actions (taps and keyboard input) on component are processed. Component may change appearance if value of property is False.

procedure SetEnabled(aValue: Boolean); virtual;


Property-icon.png Font

Specifies font of control. This property is of TW3ControlFont type and include own class members.

property Font: TW3ControlFont read getFont;

Example:

W3Button1.Font.Name := 'Verdana';
W3Button1.Font.Size := 24; // in pixels
W3Button1.Font.Weight := 'bold'; // font-weight value
W3Button1.Font.Color := clRed;

W3Button Font


See also: TW3CustomFont


Property-icon.png Height

Specifies vertical size of control.

property Height: Integer read GetHeight write setHeight;


Property-icon.png StyleClass

Specifies class attribute of DOM object.

property StyleClass: String read getStyleClass write setStyleClass;

By default every component set class attribute property with same value as class name (e.g. TW3Button), but with this property this can be changed.

<button id="OBJ4" class="TW3Button" style="visibility: visible; display: inline-block; position: absolute; overflow: hidden; left: 16px; top: 16px; width: 128px; height: 32px;">W3Button</button>

Example:

W3Button1.StyleClass := 'round-button';

Output:

<button id="OBJ4" class="round-button" style="visibility: visible; display: inline-block; position: absolute; overflow: hidden; left: 16px; top: 16px; width: 128px; height: 32px;">W3Button</button>


Property-icon.png Width

Specifies horizontal size of control.

property Width: Integer read GetWidth write SetWidth;

Property-icon.png Zoom

Specifies size multiplication for component (zoom property of DOM object).

property Zoom: Float read getZoom write setZoom;
Note-icon.png Setting this property is not same as setting Width and Height properties of component, since all elements of component will be “zoomed” including borders, font, gradients etc.

Example:

W3Panel1.Zoom := 0.75; // 75%
W3Panel1.Zoom := 1.5; // 150%


Protected Methods

Protected method-icon.png MouseDown

Protected method-icon.png MouseMove

Methods

Method-icon.png BringToFront

Puts the control in front of all other controls in its parent control. It set Control’s Z-index to be largest.

procedure BringToFront;

TW3CustomControl BringToFront


Method-icon.png SendToBack

Puts the control behind of all other controls in its parent control. It set Control’s Z-index to be smallest.

procedure SendToBack;

Method-icon.png SetFocus

Call focus() method of DOM object and set component in focused state. Some controls indicate focused state with different appearance.

procedure SetFocus;


See also: OnGotFocus

Events

Event-icon.png OnClick

Occurs when user click (tap) on control.

property OnClick: TMouseClickEvent read FOnClick write _setMouseClick;

Remarks:

This event is triggered after onclick event of DOM object is invoked.


Event-icon.png OnDblClick

Occur when user double click on control.

property OnDblClick: TMouseDblClickEvent read FOnDblClick write _setMouseDblClick;

Remarks:

This event is triggered after ondblclick event of DOM object is invoked.

Note-icon.png It is important to remember that OnDblClick is called after OnClick occur and after small delay. OnClick will be called before each OnDblClick.


See also: OnClick

Event-icon.png OnGotFocus

Occurs when control receive focus. Opposite of this event is OnLostFocus event.

property OnGotFocus: TGotFocusEvent read FOnGotFocus write _setGotFocus;

Remarks:

This event is triggered when onfocus event of DOM object is invoked.


See also: SetFocus, OnLostFocus


Event-icon.png OnKeyDown

property OnKeyDown: TKeyDownEvent read FOnKeyDown write _setKeyDown;


Event-icon.png OnLostFocus

Occurs when control lost focus. Control lose focus when some other control become focused (active).

property OnLostFocus: TLostFocusEvent read FOnLostFocus write _setLostFocus;

Remarks:

This event is triggered when onblur event of DOM object is invoked.


See also: SetFocus, OnGotFocus


Event-icon.png OnMouseDown

Occurs when user press mouse button over control.

property OnMouseDown: TMouseDownEvent read FOnMouseDown write _setMouseDown;

This event is triggered when onmousedown event of DOM object is invoked.


Event-icon.png OnResize

Occurs when control changed size.

property OnResize: TReSizeEvent read FOnResize write _setResize;

This event is triggered when onresize event of DOM object is invoked.