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:

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:

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:

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.

Comments are closed.