Smart Mobile Studio
  • News
  • Forums
  • Download
  • Store
  • Showcases
    • Featured demos
    • The Smart Contest 2013, Round 1 – Graphics
  • Documentation
    • Get the book
    • System requirements
    • Prerequisites
    • Getting started
      • Introduction
      • Application architecture
      • The application object
      • Forms and navigation
      • Message dialogs
      • Themes and styles
    • Project types
      • Visual project
      • Game project
      • Console project
    • Layout manager
    • Networking
      • TW3HttpRequest
      • TW3JSONP
      • Loading files
  • About

Creating a TScrollbox

Posted on 05.03.2013 by Jon Lennart Posted in News

The interface of the TW3Scrollbox:

unit w3scrollbox;
 
interface
 
uses w3system, w3components, w3graphics, w3scrollbar;
 
  //Default size of the scrollbars
  const
  CNT_SCROLLBAR_SIZE  = 18;
 
type
 
  TW3ScrollBoxContainer = Class(TW3CustomControl)
  End;
 
  TW3Scrollbox = Class(TW3CustomControl)
  Private
    FHScroll: TW3HorizontalScrollbar;
    FVScroll: TW3VerticalScrollbar;
    FContent: TW3ScrollBoxContainer;
    Procedure HandleScroll(sender:TObject);
    Procedure UpdateWhenReady;
  protected
    procedure ChildAdded(Const aChild:TW3Component);override;
    procedure InitializeObject; override;
    procedure FinalizeObject; override;
    procedure Resize; override;
  public
    Property  Content:TW3ScrollBoxContainer read FContent;
    Procedure Update;
  End;

Since all the child objects will be created runtime via the constructor in Smart, the JavaScript browser code might not be ready when ChildAdded() is called (which is invoked whenever a child control attach as a child). The “UpdateWhenReady” method will wait until both the DOM (document object model) and TApplication instance is truly ready, and then it will automatically update the scrollbars if there is any content that is larger than the client-area.

Take a look at the implementation:

implementation
 
 
  //###########################################################################
  // TW3Scrollbox
  //###########################################################################
 
  procedure TW3Scrollbox.InitializeObject;
  Begin
    inherited;
    FContent:=TW3ScrollBoxContainer.Create(self);
 
    FHScroll:=TW3HorizontalScrollbar.Create(self);
    FHScroll.OnChanged:=HandleScroll;
    FHScroll.visible:=False;
 
    FVScroll:=TW3VerticalScrollbar.create(self);
    FVScroll.OnChanged:=HandleScroll;
    FVScroll.visible:=False;
 
    //UpdateWhenReady;
  end;
 
  procedure TW3Scrollbox.FinalizeObject;
  Begin
    FHScroll.free;
    FVScroll.free;
    FContent.free;
    inherited;
  end;
 
  procedure TW3Scrollbox.ChildAdded(Const aChild:TW3Component);
  Begin
    inherited ChildAdded(aChild);
    UpdateWhenReady;
  end;
 
  Procedure TW3Scrollbox.UpdateWhenReady;
  begin
    if (w3_DOMReady=False)
    or (ObjectReady=False) then
    w3_callback(updateWhenReady,10) else
    w3_callback(Update,1);
  end;
 
  procedure TW3Scrollbox.Resize;
  var
    wd,hd:  Integer;
  begin
    inherited;
    wd:=clientWidth;
    hd:=clientHeight;
 
    if FHScroll.visible then
    dec(hd,CNT_SCROLLBAR_SIZE);
 
    if FVScroll.Visible then
    dec(wd,CNT_SCROLLBAR_SIZE);
 
    if FHScroll.Visible then
    FHScroll.setBounds(0,hd,wd,CNT_SCROLLBAR_SIZE);
 
    if FVScroll.Visible then
    FVScroll.setBounds(wd,0,CNT_SCROLLBAR_SIZE,hd);
 
    FContent.SetBounds(1,1,wd-2,hd-2);
  end;
 
  Procedure TW3Scrollbox.HandleScroll(sender:TObject);
  Begin
    FContent.ScrollInfo.ScrollTo(FHScroll.Position,FVScroll.Position);
  end;
 
  Procedure TW3Scrollbox.Update;
  begin
    BeginUpdate;
    try
      if FContent.ScrollInfo.ScrollWidth>FContent.ClientWidth then
      Begin
        FHScroll.Total:=FContent.ScrollInfo.ScrollWidth;
        FHScroll.PageSize:=FContent.ClientWidth;
        If not FHScroll.Visible then
        Begin
          FHScroll.Visible:=True;
          self.SetWasSized;
        end;
      end;
 
      if FContent.ScrollInfo.ScrollHeight>FContent.clientHeight then
      Begin
        FVScroll.Total:=FContent.ScrollInfo.ScrollHeight;
        FVScroll.PageSize:=FContent.clientHeight;
        If not FVScroll.Visible then
        Begin
          FVScroll.Visible:=True;
          SetWasSized;
        end;
      end;
 
      FContent.SendToBack;
 
    finally
      EndUpdate;
    end;
 
  end;
 
end.

Using the scrollbox (without the designer) is straight forward. In this case I added a Beatles poster as a resource, inserted an image into the content of the scrollbox – and used the image as a background (as opposed to the image itself. Neat trick!).

FBox:=TW3Scrollbox.Create(self);
FBox.SetBounds(10,200,600,500);
FBox.StyleClass:='TW3CustomControl';
 
FTest:=TW3Image.Create(FBox.Content);
FTest.Background.FromURL('res/beatles.jpg');
FTest.setBounds(0,0,1644 * 2, 1086 * 2);
« Creating a scrollbar
Smart Mobile Studio 1.1 »

Pages

  • About
  • Feature Matrix
  • Forums
  • News
  • Release History
  • Download
  • Showcases
    • The Smart Contest 2013, Round 1 – Graphics
  • Store
  • Documentation
    • Creating your own controls
    • Debugging, exceptions and error handling
    • Differences between Delphi and Smart
    • Get the book
    • Getting started
      • Introduction
      • Local storage, session storage and global storage
      • Application architecture
      • The application object
      • Forms and navigation
      • Message dialogs
      • pmSmart Box Model
      • Themes and styles
    • Layout manager
    • Networking
      • Loading files
      • TW3HttpRequest
      • TW3JSONP
    • Prerequisites
    • Real data, talking to sqLite
    • System requirements
    • Project types
      • Visual project
      • Game project
      • Console project

Archives

  • December 2019
  • December 2018
  • November 2018
  • July 2018
  • June 2018
  • February 2018
  • September 2017
  • April 2017
  • November 2016
  • October 2016
  • September 2016
  • April 2016
  • March 2016
  • January 2016
  • October 2015
  • September 2015
  • July 2015
  • April 2015
  • January 2015
  • December 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • November 2011
  • October 2011
  • September 2011

Categories

  • Announcements (25)
  • Developers log (119)
  • Documentation (26)
  • News (104)
  • News and articles (16)

WordPress

  • Register
  • Log in
  • WordPress

Subscribe

  • Entries (RSS)
  • Comments (RSS)
© Optimale Systemer AS