Inspecting ‘platform’ styles redux

Back when XE3 was current I blogged about retrieving the default FMX styles for Windows and OS X, a process less transparent than in XE2 when the standard styles were distributed as *.style files. Roll onto mobile support in XE4 and XE5, and the default styles are if anything even more hidden. Nevertheless, it is possible to recover them and get human-readable *.style files:

1. Find the resource name; for Android this is currently ‘androidstyle’ (see FMX.Controls.Android.pas), for iOS one of ‘iphonestyle’, ‘ipadstyle’ or ‘iphonepadstyle_Modern’ (= iOS 7; see FMX.Controls.iOS.pas).

2. Create a blank new mobile project, and in the form’s OnCreate event, load and output the desired resource to a file. For example, for Android you might do this:

uses System.IOUtils;

procedure TForm1.FormCreate(Sender: TObject);
var
  FN: string;
  Stream: TResourceStream;
begin
  FN := TPath.Combine(TPath.GetHomePath, 'FMX default.style');
  Stream := TResourceStream.Create(HInstance, 'androidstyle', RT_RCDATA);
  Stream.SaveToFile(FN);
  ShowMessage('Saved to ' + FN);
end;

3. Run the app on a device.

4. Manually copy over the extracted file to your development PC or VM.

5. Back in your dummy project, add a TStyleBook component to the form, and double click it to open the style book editor.

6. Click the ‘Load’ button and locate the extracted *.style file.

7. Click the ‘Save’ button and overwrite the extracted *.style file.

The reason for step (7) is because the style will be extracted in a binary format, and resaving in the style book editor will output to a textual one. More specifically, it will convert from the DFM binary format to the DFM textual one with just a simple header added – FMX being based on the VCL’s streaming system as much as the VCL itself.

Removing platform restrictions

If between running the dummy app on the device and loading the extracted style file into the style book you changed the active target platform, the style book editor will complain:

Style load error

To prevent this happening in future, once you have reselected the ‘correct’ target platform (Android in my case) and now successfully loaded the style file, select the style’s ‘description’ component in the Structure pane and press Delete:

Delete style description

Having clicked Apply (or Apply and Close), the style will also now load when you select a different platform (just remember that to make a style book active, the form’s StyleBook property needs to be assigned). Here for example is the Android style used when running on Windows:

Android style on Windows

While XE5 update 2 introduced a special ‘mobile preview’ style for testing mobile projects on Windows, you can’t beat having the style that will actually be used on a device I think.

Advertisements

2 thoughts on “Inspecting ‘platform’ styles redux

  1. Pingback: Improved XE5 mobile previews part 2 | Delphi Haven

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s