SmartCL.System

Low level SmartCL.System.Types

As the name implies this unit is all about low level functionality and the system, which in our case is the document object model. In many ways this unit is a blend between system and sysutils under delphi, here you will find functions for creating, interacting with and obtaining information directly from html entities (all controls are pure javascript under Smart. We don’t map our javascript onto a prefabricated design). This is also the home for common utility functions, data-type declarations and record types.

The only real difference between the sysutils under delphi and w3system under VJL, is that we have isolated common utility functions into their own name-space (as class functions), making everything more organized and easier to work with. So TVariant contains all the variant functions, TRect all the functions for manipulating rectangles – and so on.

TInteger = class
  public
    class function ToPxStr(const aValue: Integer): String; static;
    class function ToHex(const aValue: Integer): String; static; deprecated "Use .ToHex";
    class procedure Swap(var Primary, Secondary: Integer); static;
    class function Sum(const anArray: TIntArray): Integer; static;
    class function Average(const anArray: TIntArray): Float; static;
    class function PercentOfValue(const Value, Total: Integer): Integer; static;
    class function Middle(const Primary, Secondary: Integer): Integer; static;
    class function Sign(const Value: Integer): Integer; deprecated;
    class function Diff(const Primary, Secondary: Integer): Integer; static;
    class function ToNearestSigned(const Value, Factor: Integer): Integer; static;
    class function ToNearest(const Value, Factor: Integer): Integer; static;
    class function Largest(const Primary, Secondary: Integer): Integer; overload;
    class function Largest(const anArray: TIntArray): Integer; overload;
    class function Smallest(const Primary, Secondary: Integer): Integer; overload;
    class function Smallest(const anArray: TIntArray): Integer; overload;
    class function WrapRange(const aValue, aLowRange, aHighRange: Integer): Integer; static;
    class procedure Sort(var Domain: TIntArray); deprecated "Use .Sort";
    class function EnsureRange(const aValue, aMin, aMax: Integer): Integer; static;
    class procedure SetBit(index: Integer; aValue: Boolean; var buffer: Integer); static;
    class function GetBit(index: Integer; const buffer: Integer): Boolean; static;
end;

W3system is also home to our browser drivers. When you execute your application, the application begins by checking what browser you are using – and initializes a driver for it (note: drivers are written in smart, there are no external dependencies involved in this). By using drivers we manage to handle advanced techniques, such as hardware accelerated graphics and transformations, from a common code-base. Any peculiarities are handled by the driver and the rest of the RTL don’t have to worry about it.

If the idea of drivers sounds like overkill for something as trivial as a web app, we must remember that there are subtle but important differences between browsers. For instance webkit browsers favours "length" as a property in some javascript objects – but mozilla favours "size". Through the drivers we are able to keep vendor specific clutter to a bare minimum.

SmartCL.Components

Widgets - SmartCL.Components

This unit is where visual controls are first introduced. The most fundamental class which implements the mechanism for self creation, attaching itself to – and detaching itself from another element, is TW3tagobj. From this basic object the following hierarchy is built:

TW3component

TW3Movablecontrol

TW3Customcontrol

Just like the object hierarchy in delphi, from TWinControl to TCustomcontrol, each descendant adds specific behavior and properties to the model it has inherited.

Smart Mobile Studio Property Inspector

TW3component adds the ability to house child components. It also introduces the familiar delphi component constructor, which takes an owner component as a parameter.

Properties:

  public
    function  ChildByName(const compName: String): TW3Component;
    function  ChildByHandle(const aHandle: THandle): TW3Component;
    procedure EnumChildren(childProc: procedure (child: TW3Component));
    function TopLevelParent : TW3Component;
    property Parent: TW3Component read FParent;
  published
    property Name: String read FName write setName;

TW3Movablecontrol adds properties like left, top, width and height (and associated methods like moveto, setbounds, etc.) and thus allows you to move an element around. This class was added between TW3component and TW3Customcontrol to provide a lightweight alternative for game and multimedia programmers. It is especially suited as a "sprite" (see unit w3sprites) which can be manipulated in both 2d and 3d via the built in Sprite3d engine (see w3sprite3d).

Properties:

  public
    property Constraints: TW3Constraints read getConstraints;
    property BoundsRect: TRect read getBoundsRect;
    property Background: TW3ControlBackground read GetBackGround;
    property Border: TW3Borders read getBorder;
    procedure AdjustToParentBox; virtual;
    function ClientWidth: Integer;
    function ClientHeight: Integer;
    function ClientRect: TRect;
    function ScreenRect: TRect;
    function ClientToScreen(pt: TPoint): TPoint;
    function ScreenToClient(pt: TPoint): TPoint;
    procedure MoveTo(aLeft, aTop: Integer); virtual;
    procedure SetSize(aWidth, aHeight: Integer); virtual;
    procedure SetBounds(aLeft, aTop, aWidth, aHeight: Integer); overload; virtual;
    procedure SetBounds(aRect: TRect); overload; virtual;
  published
    property Color: TColor read FColor write setColor;
    property Visible: Boolean read getVisible write setVisible;
    property Left: Integer read GetLeft write setLeft;
    property Top: Integer read GetTop write setTop;
    property Width: Integer read GetWidth write SetWidth;
    property Height: Integer read GetHeight write setHeight;
    property Opacity: Integer read FAlpha write setAlpha;
    property AlphaBlend: Boolean read FUseAlpha write setUseAlpha;
    property Transparent: Boolean read FTransparent write setTransparent;

TW3Customcontrol is the class all visual controls inherit from. It inherits the full richness of methods and properties from it’s ancestors, but adds sub-objects like background, font, border management, size restriction, CSS style management and scroll information. These sub objects are created on demand, so unless you access these from your code they remain dormant.

TW3Customcontrol is also the class that introduces support for gestures, touch and multi-touch – and all the events standard html entities expose. Depending on the entity a TW3Customcontrol represents, some events may not fire. For instance, if the control represents a html5 canvas the onScroll event will naturally never fire. Since there is a limited number of events under the DOM TW3Customcontrol publishes all of them.

Properties:

  public
    property CSSClasses: TW3CSSClassStyleNames read getClassNames;
    property ScrollInfo: TW3ScrollInfo read getScrollInfo;
    property Font: TW3ControlFont read getFont;
    property BoundsRect: TRect read getBoundsRect;
    function  GetMaxZIndex: integer;
    procedure SendToBack;
    procedure BringToFront;
    procedure SetFocus;
    procedure LayoutChildren; virtual;
    function GetSizeInfo: TW3ControlSizeInfo; virtual;
    function GetChildrenSortedByYPos: TW3ComponentArray; virtual;
    procedure Invalidate; virtual;
 
  published
    property OnResize: TReSizeEvent read FOnResize write _setResize;
    property OnMouseDown: TMouseDownEvent read FOnMouseDown write _setMouseDown;
    property OnMouseUp: TMouseUpEvent read FOnMouseUp write _setMouseUp;
    property OnMouseMove: TMouseMoveEvent read FOnMouseMove write _setMouseMove;
    property OnMouseEnter: TMouseEnterEvent read FOnMouseEnter write _setMouseEnter;
    property OnMouseExit: TMouseExitEvent read FOnMouseExit write _setMouseExit;
    property OnMouseWheel: TMouseWheelEvent read FOnMouseWheel write _setMouseWheel;
    property OnClick: TMouseClickEvent read FOnClick write _setMouseClick;
    property OnDblClick: TMouseDblClickEvent read FOnDblClick write _setMouseDblClick;
    property OnContextPopup : TContextPopupEvent read FOnContextPopup write _setContextPopup;
    property OnKeyDown: TKeyDownEvent read FOnKeyDown write _setKeyDown;
    property OnKeyUp: TKeyUpEvent read FOnKeyUp write _setKeyUp;
    property OnKeyPress: TKeyPressEvent read FOnKeyPress write _setKeyPress;
    property OnAnimationBegins: TAnimationBeginsEvent read FOnAnimationBegins write _setAnimationBegins;
    property OnAnimationEnds: TAnimationEndsEvent read FOnAnimationEnds write _setAnimationEnds;
    property OnChanged: TChangedEvent read FOnChanged write _setChanged;
    property OnGotFocus: TGotFocusEvent read FOnGotFocus write _setGotFocus;
    property OnLostFocus: TLostFocusEvent read FOnLostFocus write _setLostFocus;
    property OnTouchBegin: TTouchBeginEvent read FOnTouchBegins write _setTouchBegins;
    property OnTouchMove: TTouchMoveEvent read FOnTouchMoves write _setTouchMoves;
    property OnTouchEnd: TTouchEndEvent read FOnTouchEnds write _setTouchEnds;
    property OnGestureStart: TGestureStartEvent read FOnGestureStart write _setGestureStart;
    property OnGestureChange: TGestureChangeEvent read FOnGestureChange write _setGestureChange;
    property OnGestureEnd: TGestureEndEvent read FOnGestureEnd write _setGestureEnd;
 
    property Enabled: Boolean read getEnabled write setEnabled;
    property Angle: Float read FAngle write setAngle;
    property Zoom: Float read getZoom write setZoom;
    property BorderRadius: Integer read getBorderRadius write setBorderRadius;
    property StyleClass: String read getStyleClass write setStyleClass;
    property Visible: Boolean read getVisible write setVisible;
    property Left: Integer read GetLeft write setLeft;
    property Top: Integer read GetTop write setTop;
    property Width: Integer read GetWidth write SetWidth;
    property Height: Integer read GetHeight write setHeight;
    property Focused: Boolean read gethasFocus;
  

Go to Event JS Reference.

See more DOM JS Reference.

SmartCL.Controls

Toolkit - SmartCL.Controls

This unit contains the standard visual controls that ship with Smart Mobile Studio. It is a great unit to inspect if you want to learn how to create your own custom controls (which is much easier than it sounds). You will notice that the controls all override one method in particular: makeElementTagObj.

This function (implemented in TW3tagobj as a virtual method) is in charge of creating the actual html tag you want to work with.

As of writing the unit contains the following visual controls (not counting sub controls or auxiliary classes)