Using a TW3Grid

The developers' three-part tutorial Working with the grid component shows how you can use a TW3Grid to use a variety of types of column such as for text, progress bar, toggle switch or image. School students commonly display contents from an array of records in a string grid. The first demo shows how this can be achieved by adding a (read-only) TW3Grid to a form in Smart Mobile Studio Version 2.1. The code follows a screenshot.

Output

Output

unit Form1;

interface

uses 
  SmartCL.System, SmartCL.Graphics, SmartCL.Components, SmartCL.Forms, SmartCL.Fonts,
  SmartCL.Borders, SmartCL.Application, SmartCL.Grid, SmartCL.Grid.Columns;

type
  TStudent = record
    Forename, Surname : string;
    TheoryMark, PracticalMark : integer;
  end;

  TForm1 = class(TW3Form)
  private
    {$I 'Form1:intf'}
    const MAX_STUDENTS = 3;
    Students : array[1 .. 3] of TStudent;
    TextCols : array [1 .. 4] of TW3TextColumn;
    RowCaptions : array[1 .. 4] of string := ['Forename', 'Surname', 'Theory Mark', 'Practical Mark'];
  protected
    procedure InitializeForm; override;
    procedure InitializeObject; override;
   end;

implementation

procedure TForm1.InitializeForm;
begin
  inherited;
  Students[1].Forename := 'Jo';
  Students[1].Surname :='Wood';
  Students[1].TheoryMark := 55;
  Students[1].PracticalMark := 66;

  Students[2].Forename := 'John';
  Students[2].Surname := 'Bode';
  Students[2].TheoryMark := 73;
  Students[2].PracticalMark := 58;

  Students[3].Forename := 'Kapil';
  Students[3].Surname := 'Shah';
  Students[3].TheoryMark := 59;
  Students[3].PracticalMark := 58;

  for var i := 1 to 4 do
    begin
      TextCols[i] := TW3TextColumn.Create(W3Grid1 as IW3ColumnsControl);
      TextCols[i].Header.Caption := RowCaptions[i];
      (TextCols[i].Header as TW3CustomControl).Font.Weight := 'bold';
      TextCols[i].Width := 110;
      W3Grid1.Columns.Add(TextCols[i]);
    end;
  W3Grid1.AddRow(MAX_STUDENTS);
  for var i := 0 to MAX_STUDENTS - 1 do
    begin
      W3Grid1.Cell[0, i].Value := Students[(i+1)].Forename;
      W3Grid1.Cell[1, i].Value := Students[(i+1)].Surname;
      W3Grid1.Cell[2, i].Value := intToStr(Students[(i+1)].TheoryMark);
      W3Grid1.Cell[3, i].Value := intToStr(Students[(i+1)].PracticalMark);
    end;
end;

procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
end;

initialization
  Forms.RegisterForm({$I %FILE%}, TForm1);
end.

Using a W3Grid with Number Columns

This example, showing some fields of stock control records, demonstrates the use of number columns for displaying integers and real numbers. The pound sign displays as intended when the HTML output is saved in UTF8 format:
Output

Output

The use of number columns saves you the trouble of converting from numbers to strings. Note how the numbers are aligned. If you want decimal alignment, we think that you should use string representations (as in our first example) and write your own code to insert spaces as necessary.

The code follows.

unit Form1;

interface

uses 
  SmartCL.System, SmartCL.Graphics, SmartCL.Components, SmartCL.Forms, SmartCL.Fonts,
  SmartCL.Borders, SmartCL.Application, SmartCL.Grid, SmartCL.Grid.Columns;

type
  TStock = record
    StockCode : string;
    Price : float;
    StockLevel : integer;
  end;

  TForm1 = class(TW3Form)
  private
    {$I 'Form1:intf'}
    const MAX_ITEMS = 3;
    Items : array[1 .. 3] of TStock;
    TextCol :  TW3TextColumn;
    CurrencyCol, LevelCol : TW3NumberColumn;
    RowCaptions : array[1 .. 3] of string := ['Stock Code', 'Price', 'Stock Level'];
  protected
    procedure InitializeForm; override;
    procedure InitializeObject; override;
   end;

implementation

procedure TForm1.InitializeForm;
begin
  inherited;
  Items[1].StockCode := 'ABC123';
  Items[1].Price := 56.28;
  Items[1].StockLevel := 5;

  Items[2].StockCode := 'ABD138';
  Items[2].Price := 6.35;
  Items[2].StockLevel := 50;

  Items[3].StockCode := 'ABE107';
  Items[3].Price := 1.08;
  Items[3].StockLevel := 200;


  TextCol := TW3TextColumn.Create(W3Grid1 as IW3ColumnsControl);
  TextCol.Header.Caption := RowCaptions[1];
  (TextCol.Header as TW3CustomControl).Font.Weight := 'bold';
  TextCol.Width := 100;
  W3Grid1.Columns.Add(TextCol);

  CurrencyCol := TW3NumberColumn.Create(W3Grid1 as IW3ColumnsControl);
  CurrencyCol.Header.Caption := RowCaptions[2];
  (CurrencyCol.Header as TW3CustomControl).Font.Weight := 'bold';
  CurrencyCol.Width := 80;
  TW3NumberColumn(CurrencyCol).TextBefore := '£'; //Use Notepad to save the HTML as UTF8
  W3Grid1.Columns.Add(CurrencyCol);

  LevelCol := TW3NumberColumn.Create(W3Grid1 as IW3ColumnsControl);
  LevelCol.Header.Caption := RowCaptions[3];
  (LevelCol.Header as TW3CustomControl).Font.Weight := 'bold';
  LevelCol.Width := 100;
  TW3NumberColumn(LevelCol).Precision := 0;
  W3Grid1.Columns.Add(LevelCol);

  W3Grid1.AddRow(MAX_ITEMS);
  for var i := 0 to MAX_ITEMS - 1 do
    begin
      W3Grid1.Cell[0, i].Value := Items[(i+1)].StockCode;
      W3Grid1.Cell[1, i].Value := Items[(i+1)].Price;
      W3Grid1.Cell[2, i].Value := Items[(i+1)].StockLevel;
    end;
end;

procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
end;

initialization
  Forms.RegisterForm({$I %FILE%}, TForm1);
end.

Programming - a skill for life!

How to use a range of visual components such as edit boxes, combo boxes, grids and charts on one or multiple forms (including a modal form)