Category: FireMonkey

Styling Section added to the FireMonkey Guide

I’ve just finished uploading the styling section of the FireMonkey Guide.

This section starts with an explanation of how the styling in FireMonkey works, how styles are created and then applied by FireMonkey. It then moves through how to set styles at run-time in your application and finishes up with a brief description of the built in style designer.

As ever with the Guide I have attempted to distill out the essentials you need to know when using FireMonkey.

Mike

Prettier iOS Development on Windows

If, like me, you’re doing your Delphi iOS development on Windows then your probably making use of the compiler’s ability to compile and run your app on Win32. You’re probably also fed up with how dreadful your apps look during testing on Windows.

Wouldn’t it be great if you could load the proper iOS styles on Windows? Sadly the true iOS styles are locked away somewhere within Delphi. But there are a couple of custom styles available for iOS and it’s a simple process to load them into your app.

Start with your DPR file (select Project|View Source from the main menu). Add FMX.Styles to the uses list, and add the three lines shown below at the start of the code.

program MarginMarkup;

uses
  System
.StartUpCopy,
  
FMX.Forms,
  
FMX.Styles,
  
Calculator in 'Calculator.pas' {CalculatorForm},
  
Calculator.VM in 'Calculator.VM.pas';

{$R *.res}

begin
  {$IFDEF MSWINDOWS}
  TStyleManager
.SetStyleFromFile('C:\Users\Public\Documents\RAD Studio\12.0\Styles\iOS\iOSBlack.fsf');
  
{$ENDIF}
  Application
.Initialize;
  
Application.FormFactor.Orientations := [TFormOrientation.soPortraitTFormOrientation.soInvertedPortrait];
  
Application.CreateForm(TCalculatorFormCalculatorForm);
  
Application.Run;
end

The lines you need to add are the first three after the begin statement. The $IFDEF ensures that our code only compiles if Windows is the target. The line between loads the system style from the file specified (.fsf is a binary style file - you can also load .style files). The above code shows the default installation location for the files.

In addition to the iOSBlack style named above there’s also an iOSTransparent file in the same folder. There are also two premium styles available for download from Embarcadero’s registered downloads area, with each style available in both iOS 7 and non-iOS 7 versions.

The image below shows the iOS7Jet style running under Windows 8.

Adding OnChangeExpanded Functionality to TTreeView

Under the VCL, TTreeView has events OnExpanded, OnExpanding, OnCollapsing and OnCollapsed but there’s nothing similar in FireMonkey.

TTreeViewItem has a number of methods which get called when the expanded state changes, but none of these is virtual, and therefore there’s no simple patch to add such support. However the IsExpanded property does change to reflect the state and since this is a trigger property is is possible to hack the styling and animation systems to add the support we need.

Simply put we need to add an animation to the item, give it a duration of 0 (so it fires immediately) and hook into it’s OnFinish event so we know when the animation has run. It doesn’t matter which animation we use so I plumped for a TFloatAnimation, but it does need a valid PropertyName so I used Opacity and used a couple of near identical values so the change shouldn’t be noticed.

There’s one slight fly in the ointment. When IsExpanded changes the only animations run are those of the ‘button’ object from the style, so rather than adding the animation directly to the TTreeViewItem you need to add it to the ‘button’ item extracted from the style by FindStyleResource.

So, we create a custom child of TTreeViewItem and add the above action to ApplyStyle. From there it’s simple to add a suitable event, OnChangeExpanded, and a method to call it.

The unit for the new tree view item is,

unit TreeViewExpanded;

interface
uses FMX.TreeViewClasses;

type TTreeViewItemExpanded = class(TTreeViewItem)
  private
    
FOnChangeExpandedTNotifyEvent;
  protected
    
procedure ApplyStyle;override;
    
procedure DoChangeExpanded(SenderTObject);
  
published
    property OnChangeExpanded
TNotifyEvent read FOnChangeExpanded write FOnChangeExpanded;
end;

implementation
uses FMX
.AniFMX.Types;

{ TTreeViewItemExpanded }

procedure TTreeViewItemExpanded
.ApplyStyle;
var 
AniTFloatAnimation;
  
OTFMXObject;
begin
  inherited
;

  
:= FindStyleResource('button');
  if 
Assigned(Othen
  begin
    Ani 
:= TFloatAnimation.Create(O);
    
Ani.Parent := O;
    
Ani.Stored := False;
    
Ani.StartValue := 0.999999999999;
    
Ani.StopValue := 1;
    
Ani.PropertyName := 'Opacity';
    
Ani.Trigger := 'IsExpanded=true';
    
Ani.TriggerInverse := 'IsExpanded=false';
    
Ani.Duration := 0;
    
Ani.OnFinish := DoChangeExpanded;
  
end;
end;

procedure TTreeViewItemExpanded.DoChangeExpanded(SenderTObject);
begin
  
if Assigned(OnChangeExpandedthen
    OnChangeExpanded
(Self);
end;

end

And here’s a bit of code from the app to test things out,

procedure TForm1.EVChangeExpanded(SenderTObject);
var 
ItemTTreeViewItem;
begin
  
if Sender is TTreeViewItem then
  begin
    Item 
:= Sender as TTreeViewItem;
    if 
Item.IsExpanded then
      Item
.Text := 'Expanded'
    
else
      
Item.Text := 'Collapsed';
  
end;

end;

procedure TForm1.FormCreate(SenderTObject);
var 
ItemTTreeViewItemExpanded;
begin
  Item 
:= TTreeViewItemExpanded.Create(Self);
  
TreeView1.AddObject(Item);
  
Item.OnChangeExpanded := EVChangeExpanded;
  
Item.Text := 'Parent';
  
Item.AddObject(TTreeViewItemExpanded.Create(Self));
  
Item.Items[0].Text := 'Child';
end

Grids Added to The FireMonkey Guide

I’ve recently added a number of article about grids to the FireMonkey Guide.

TGrid
TStringGrid
TColumn
Custom Grid Columns
Create a Column Showing the Row Index
Formatting a Column as Currency

Introducing The FireMonkey Guide

A couple of months ago somebody in the Embarcadero forums asked if there was a book FireMonkey. The short answer to that was no. Come to think of it the long answer was no too. There’s the Embarcadero DocWiki which lists every class, method, property and event in the librar. It’s a great reference, but many of those pages are a little terse and lacking in examples.

And then you have a few of us who are blogging. Writing occasional articles about random parts of FireMonkey. That’s great but a little lacking in coherence, and expecting Google to curate what’s out there isn’t really working out for those new to FMX.

I chewed this over and though maybe it was time to sate that desire I’m told we all have in us to write a book. I could create my very own book about FireMonkey. There’s only two downsides to that. Firstly most technical books never make any money for the author and, secondly, when I looked at how much time I had available to write I figured it would take me a couple of years to get finished and by then the technology would have moved on again.

Plus, of course, it would be too late to help all those clamouring for help right now. And the increasing numbers who will be learning this stuff when the Mobile versions of Delphi are released.

I could change the focus of the blog from in depth techical articles about FireMonkey arcana but again you run into curation problems: blogs simply arean’t a convenient way to learn a technology from start to finish.

But the software I use to run this site, Expression Engine, includes a wiki module. I currently use it for the documentation of MonkeyStyler and other downloads. And what is a wiki if not an online book?

So I have now started writing what I shall call The FireMonkey Guide, or just The Guide which fits better on the website headers and seems rather fitting for a long time Douglas Adams fan. This will be a work in progress for a very long time, so you’ll have to put up with some gaping holes for a while, but I hope it will become a useful resource for Delphi whether you want to read it from start to finish or odd pages which Google points you to it on a web search.

Currently uploaded are the obligatory introduction pages, an Introduction to FireMonkey, TFMXObject and TAnimation and it’s children. TAnimation also comes with a handy Interpolation and AnimationType Illustrated guide with nice pictures of what all those animation types actually do. I hope you’ll find it saves time testing different interpolations to see which does what.

At present I’m still finding my way with style and depth of content so please do comment on what you like and don’t like about what I’m writing and the mistakes which, history tells me, will be creeping in along the way.

Enjoy.