FNC Tableview Header

FNC TMS FNC UI Pack
1
Hello,

I am trying to set the header of a table view at run time to show a time stamp, using HTML as described in the HTML mini guide, like

<p align="left" float="left">Gin</p><p align="right">13 May 2019 11:41 AM</p> 

However the timestamp is overwriting the text. It is left justified, not right justified.

I tried changing align="right" to float="right". No change.

Is there something else I should be setting ?

TIA

Sue
2

Hi,


We have tested this here and the text "Gin" is aligned left and the time is aligned right. Can you send us a sample that demonstrates this?
3
Here is the code for the .pas and .fmx files.

Perhaps there is some setting that I have missed.

Sue

.pas

unit tav_test;

interface

uses
  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs,
  FMX.TMSFNCCustomControl, FMX.TMSFNCTableView;

type
  TForm2 = class(TForm)
    TMSFNCTableView1: TTMSFNCTableView;
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form2: TForm2;

implementation

{$R *.fmx}

end.



.fmx

object Form2: TForm2
  Left = 0
  Top = 0
  Caption = 'Form2'
  ClientHeight = 480
  ClientWidth = 640
  FormFactor.Width = 320
  FormFactor.Height = 480
  FormFactor.Devices = [Desktop]
  DesignerMasterStyle = 0
  object TMSFNCTableView1: TTMSFNCTableView
    Position.X = 196.000000000000000000
    Position.Y = 66.000000000000000000
    Size.Width = 250.000000000000000000
    Size.Height = 350.000000000000000000
    Size.PlatformDefault = False
    TabOrder = 0
    Stroke.Color = xFFC8C7CC
    ItemAppearance.Font.Name = 'Segoe UI'
    ItemAppearance.Fill.Color = claNull
    ItemAppearance.Stroke.Color = xFFC8C7CC
    ItemAppearance.SelectedFill.Color = xFFD9D9D9
    ItemAppearance.SelectedStroke.Color = xFFD9D9D9
    ItemAppearance.DisabledFill.Kind = gfkNone
    ItemAppearance.DisabledFill.Color = claDarkgray
    ItemAppearance.DisabledStroke.Kind = gskNone
    ItemAppearance.DisabledStroke.Color = claDarkgray
    ItemAppearance.FixedHeight = 25.000000000000000000
    ItemAppearance.AccessoryDetailBitmaps = <>
    ItemAppearance.AccessoryFont.Color = claDarkred
    ItemAppearance.AccessoryFont.Name = 'Segoe UI'
    ItemAppearance.AccessoryFont.StyleExt = {00070000000000000004000000}
    ItemAppearance.AccessoryStroke.Color = claBlack
    ItemAppearance.AccessoryFill.Color = claYellowgreen
    DefaultItem.VerticalTextAlign = gtaCenter
    DefaultItem.SelectedTextColor = claBlack
    Items = <
      item
        Text = 'Mercedes'
        VerticalTextAlign = gtaCenter
        SelectedTextColor = claBlack
      end
      item
        Text = 'Audi'
        VerticalTextAlign = gtaCenter
        SelectedTextColor = claBlack
      end
      item
        Text = 'BMW'
        VerticalTextAlign = gtaCenter
        SelectedTextColor = claBlack
      end
      item
        Text = 'Land Rover'
        VerticalTextAlign = gtaCenter
        SelectedTextColor = claBlack
      end
      item
        Text = 'Bugatti'
        VerticalTextAlign = gtaCenter
        SelectedTextColor = claBlack
      end>
    Header.Text =
      '<p align="left" float="left">Status</p> <p align="right">Fred</p' +
      '>'
    Header.Fill.Color = xFFF9F9F9
    Header.Font.Name = 'Segoe UI'
    Header.Stroke.Color = xFFB2B2B2
    Header.Height = 30.000000000000000000
    Footer.Fill.Color = xFFF9F9F9
    Footer.Font.Name = 'Segoe UI'
    Footer.Stroke.Color = xFFB2B2B2
    Footer.Height = 30.000000000000000000
    LookupBar.Font.Name = 'Segoe UI'
    LookupBar.InActiveFont.Color = claSilver
    LookupBar.InActiveFont.Name = 'Segoe UI'
    LookupBar.Stroke.Color = claWhite
    LookupBar.DownFill.Color = xFFF9F9F9
    LookupBar.DownStroke.Color = xFFF9F9F9
    Reload.Stroke.Color = claDarkgray
    Reload.Stroke.Width = 2.000000000000000000
    Categories = <>
    MoreOptions = <>
    MoreOptionAppearance.Font.Color = claWhite
    MoreOptionAppearance.Font.Name = 'Segoe UI'
    MoreOptionAppearance.Fill.Color = claSteelblue
    MoreOptionAppearance.Stroke.Color = claSteelblue
    CategoryAppearance.Font.Name = 'Segoe UI'
    CategoryAppearance.Fill.Color = xFFF4F4F4
    CategoryAppearance.Stroke.Color = claDarkgray
  end
end
4

Hi,


There are some additional settings needed to get it working. Please apply this at designtime:

Header.Height := 40;
VerticalTextAlign := gtaLeading;
HorizontalTextAlign := gtaLeading;
WordWrapping := True;
5
Hi,

Thanks for the tips.  I had tried changing the horizontal text align value, but not WordWrapping.

Testing these settings, it seems that only WordWrapping is required, as the TextAlign settings are ignored when this is on.

Is there a way of centering the wordwrapped text vertically in the space ?
The vertical text is obviously set to gtaLeading and it looks out of balance.  I can make it look a bit better by changing the font size and header height, but would prefer it was automatically centered.  To make the header look right with the same size font as the items, it has to have a smaller height, which doesn't look right to my eye.

Sue
6

Hi,


Alternatively you could override the text drawing, and draw the left and right text in parts. Below is a complete sample.



unit Unit54;


interface


uses
  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs,
  FMX.TMSFNCTypes, FMX.TMSFNCUtils, FMX.TMSFNCGraphics, FMX.TMSFNCGraphicsTypes,
  FMX.TMSFNCCustomControl, FMX.TMSFNCTableView, FMX.TMSFNCTreeViewData;


type
  TForm54 = class(TForm)
    TMSFNCTableView1: TTMSFNCTableView;
    procedure FormCreate(Sender: TObject);
  private
    { Private declarations }
  public
    { Public declarations }
    procedure DoBeforeDrawColumnText(Sender: TObject; AGraphics: TTMSFNCGraphics; ARect: TRectF; AColumn: Integer; AKind: TTMSFNCTreeViewCacheItemKind; AText: string; var AAllow: Boolean);
  end;


var
  Form54: TForm54;


implementation


{$R *.fmx}


procedure TForm54.DoBeforeDrawColumnText(Sender: TObject;
  AGraphics: TTMSFNCGraphics; ARect: TRectF; AColumn: Integer;
  AKind: TTMSFNCTreeViewCacheItemKind; AText: string; var AAllow: Boolean);
begin
  case AKind of
    ikColumnTop:
    begin
      AAllow := False;
      AGraphics.DrawText(ARect, 'Left', False, gtaLeading);
      AGraphics.DrawText(ARect, 'Right', False, gtaTrailing);
    end;
  end;
end;


procedure TForm54.FormCreate(Sender: TObject);
begin
  TMSFNCTableView1.TreeView.OnBeforeDrawColumnText := DoBeforeDrawColumnText;
end;


end.
7
Excellent!  Very powerful component.

Thanks for your help.