Archive

Archive for August 4, 2014

IScroll for Smart Mobile Studio – Part 1

August 4, 2014 4 comments
IScroll has 6+ years of coding behind it

IScroll has 6+ years of coding behind it

Scrolling under HTML5 is no walk in the park, especially under embedded or mobile devices. While the task of moving elements about inside a container is, technically, easy enough – we have to take into consideration that Apple (for some odd reason) is trying to avoid hardware accelerated scrolling for HTML5 web apps. I know this sounds strange, but it’s the only conclusion web developers can deduce, since every other provider on the planet supports ordinary touch scrolling out of the box.

But thankfully there are solutions, and the best of them is a small JavaScript library called IScroll. It provides smooth, flicker-free momentum scrolling for any DIV or element that can host scrollable content, and even better – it’s free (!)

How to use it

First, download IScroll from github and copy it into the Smart Mobile Studio library folder (iScroll.js).

Next, add the unit below to your project – and create an instance of TW3ScrollWindow on your form (or derive your own control from it).

TW3ScrollWindow has a property called “Content”, which derives from TW3CustomControl. This is the control you populate with your components. By default it’s set to auto-size, but you can override the resize method to make it adapt vertically or horizontally only if you wish.

 

And that’s it! Now you have a silky-smooth, hardware accelerated touch-based scroll control 🙂

 

unit ctrlscroll;

interface

uses
  W3System, W3Components, w3graphics, W3Touch;

  type

  TW3ScrollWindowContent = Class(TW3CustomControl)
  end;

  TW3ScrollWindowContentClass = Class of TW3ScrollWindowContent;

  TW3ScrollWindow = Class(TW3CustomControl)
  private
    FObj:     THandle;
    FContent: TW3ScrollWindowContent;
  protected
    function  getScrollContentClass:TW3ScrollWindowContentClass;virtual;
    Procedure IScrollCreate;virtual;
    Procedure IScrollDestroy;virtual;
    procedure InitializeObject; override;
    procedure FinalizeObject;Override;
    function  IScrollOptions:Variant;virtual;
  public
    Property  Content:TW3ScrollWindowContent read FContent;
    Property  IScroll:THandle read FObj;
  End;

implementation

{$R 'iScroll.js'}

//############################################################################
// TW3ScrollWindow
//############################################################################

procedure TW3ScrollWindow.InitializeObject;
Begin
  inherited;
  FContent:=getScrollContentClass.Create(self);
  //FContent.Background.fromColor(clRed);

  w3_setStyle(FContent.Handle,'postion','relative');
  w3_setStyle(FContent.Handle,'min-width','100%');
  w3_setStyle(FContent.Handle,'min-height','100%');

  //Background.fromColor(clWhite);
  IScrollCreate;
end;

procedure TW3ScrollWindow.FinalizeObject;
Begin
  IScrollDestroy;
  FContent.free;
  inherited;
end;

function TW3ScrollWindow.getScrollContentClass:TW3ScrollWindowContentClass;
Begin
  result:=TW3ScrollWindowContent;
end;

function TW3ScrollWindow.IScrollOptions:Variant;
Begin
  result:=TVariant.CreateObject;
  result.mouseWheel:=True;
  result.hScrollbar:=False;
  result.vScrollbar:=False;
end;

Procedure TW3ScrollWindow.IScrollCreate;
var
  mHandle:  THandle;
  mTemp:    THandle;
  mOptions: Variant;
Begin
  w3_callback(Procedure ()
  Begin
    (* setup iScroll options *)
    mOptions:=IScrollOptions;

    (* Create iScroll controller for our viewport *)
    mHandle:=Handle;
    asm
      @mTemp = new IScroll(@mHandle,@mOptions);
    end;
    FObj:=mTemp;
  end,
  1000);
end;

Procedure TW3ScrollWindow.IScrollDestroy;
Begin
  (* IScroll controller created? *)
  if (FObj) then
  begin
    (* Destroy IScroll controller *)
    asm
      (@self).FObj.destroy();
      (@self).FObj = null;
    end;
  end;
end;

end.