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 progress indicator

Posted on 23.05.2012 by Jon Lennart Posted in Documentation

One of the things we did not have time to add for version 1.0 is a simple, graphical progress indicator. These are components we regard as standard in the world of delphi or freepascal – so it really should have been added. But, due to the nature of the VJL it’s very simple to make one. And in this little post I will show you how.

It is important to recognize that under smart, while we are striving to create a truly visual design environment (which is right now only at it’s very beginning), you are expected to write your own components. Writing a mobile application under monotouch (c#) or objective C would likewise demand that you write controls, and indeed – if you want your app to be unique then you must take the plunge. But under smart you only have to worry about a fraction of variables opposed to a delphi component. So let’s get cracking.

Chose your ancestors wisely

Beneath the nice object pascal surface, you are really programming the document object model. As such, all components are in reality html tags which are created and inserted “on the fly” when you create a control (or, when you constructor is called). With the advent of HTML5 the browser suddenly got a new type of tag that is different from all the rest, and that is the canvas tag. The canvas tag means you can define a square region and draw the content yourself via a canvas. So it’s pretty close to what we delphi developers have worked with for over a decade.

We have wrapped and isolated this special tag in the base control TW3GraphicControl. What you get with this control is that it automatically created a canvas tag and also updates the size and proportion of that surface should you alter the width or height properties. This is also where the paint() and invalidate() methods come into play.

Here is the complete unit of a very, very basic progress bar. Another way to do it would be to use TW3CustomControl as the base, and then have a child control inside it that you size accordingly. That would probably be cooler since you could add an animated background to it so it looks more “alive”.

Voila! Le "progress" magnifique!

Voila! Le "progress" magnifique!

unit w3progress;

interface

uses w3system, w3graphics, w3components;

type

TW3ProgressBar = Class(TW3GraphicControl)
private
  FMax:     Integer;
  FPos:     Integer;
  Procedure setmax(aValue:Integer);
  procedure setpos(aValue:Integer);
protected
  procedure Paint;Override;
public
  property  Max:Integer read FMax write setMax;
  property  Position:Integer read Fpos write setpos;
End;

Implementation

Procedure TW3ProgressBar.setmax(aValue:Integer);
Begin
  if aValue <> FMax then
  begin
    FMax:=TInteger.EnsureRange(aValue,0,MAX_INT);
    if Fpos > FMax then
    FPos:=FMax;
    Invalidate;
  end;
end;

procedure TW3ProgressBar.setpos(aValue:Integer);
begin
  if aValue <> FPos then
  begin
    FPos:=TInteger.EnsureRange(aValue,0,FMax);
    Invalidate;
  end;
end;

procedure TW3ProgressBar.Paint;
var
  mRect:  TRect;
  mFill:  TRect;
  mPercent: Integer;
  mpixels:  Integer;
Begin
  // make clientrect
  mRect:=TRect.Create(0,0,Width,Height);

  //Clear background with random color
  canvas.fillstyle:=ColorToWebStr(clWhite);
  canvas.fillRect(mRect);

  //calculate totals to percent, and percent to pixels
  mFill:=mRect;
  mPercent:=TInteger.PercentOfValue(FPos,FMax);
  mPixels:=Round(Width * mPercent / 100.0);
  mFill.Right:=mPixels;
  inc(mFill.Right, mFill.Left);

  // fill in gauge region
  canvas.fillstyle:=ColorToWebStr(clGreen);
  canvas.fillRect(mFill);

  //show percent
  canvas.font:='10pt verdana';
  canvas.FillStyle:='rgb(255,0,0)';
  canvas.FillTextF(IntToStr(mPercent) + ' %',
  width div 2,(Height div 2) + 4,MAX_INT);
end;

end.

Using the control in your own projects

First, add a new unit to your project, then copy and paste in the code above. Now go back to your form unit, and make sure you add w3progress to the uses clause. Then you can do something like this:

// Add this to your forms private section
FMyProgress: TW3ProgressBar

// add this to your form InitializeObject method
FMyProgress:=TW3Progressbar.Create(self);
FMyprogress.setBounds(10,10,100,32);
FMyprogress.max:=300;
FMyprogress.position:=128;
« RemObjects SDK support
Roadmap »

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