Home > OP4JS, Smart Mobile Studio > IScroll for Smart Mobile Studio – Part 1

IScroll for Smart Mobile Studio – Part 1

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.
Advertisements
  1. August 5, 2014 at 6:43 am

    Well, something else is still required:

    – saved iscroll.js to c:\ProgramData\Optimale Systemer AS\SmartMobileStudio\Libraries
    – created a test project
    – added the ctrlscroll unit
    – created some content:

    FScr:=TW3ScrollWindow.Create(Self);
    FScr.SetBounds(0,0,Width,Height);
    FScr.SendToBack;
    for a:=0 to 100 do begin
    Lab:=TW3Label.Create(FScr.Content);
    Lab.SetBounds(0,a*30,Width-10,28);
    Lab.Caption:=’Label ‘+IntToStr(a);
    end;

    The control and the labels are visible but I can’t do any touch based scrolling on it. I wonder what else is needed?

    Using SMS Enterprise 2.0.2.743

    • Jon Lennart Aasenden
      August 5, 2014 at 8:09 pm

      Hi!

      Try adding a refresh method.

      FHandle.refresh(); should do the trick.

      I will update the code soon, i have written a complete wrapper for this.
      Also, labels might capture the input (?) and kidnap the touch event. See IScroll documentation for pass-through events

    • Jon Lennart Aasenden
      August 5, 2014 at 8:10 pm

      Note! Posted a new and updated unit, this should make it easier.
      See the article: https://jonlennartaasenden.wordpress.com/2014/08/05/iscroll-for-smart-mobile-studio-part-2/

    • Jon Lennart Aasenden
      August 7, 2014 at 6:18 pm

      Also.. why the “sendtoback” call?

  1. No trackbacks yet.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: