jed-software.com

This post describes changes you can make to improve the appearance of popup menus in your Delphi XE3 FireMonkey applications that target OS X.

Modifying OS X styles at design time

To modify OS X styles at design time you must change the target platform for the application to OS X. Otherwise you will always be modifying a windows based style at design time.

If you want to RUN your application with an OS X style on a Windows machine (can be handy for debugging) you need to find and comment out the following lines of the FMX.Styles.pas unit. Copy the unit to your application before modifying it.

Locate the “class function TStyleManager.LoadFromStream(const AStream: TStream): TFmxObject;” method implementation. Towards the end there is a section of code that checks the description and shows a message dialog if the style being used doesn’t match the current target. You can comment out that entire block of code.

What is interesting about this dialog, is that if it does show in your application, due to invalid style being used for the target platform – your application will crash terribly after the dialog is shown. Probably not something you would want to happen.

The Default Popup Menu Style

Here is a screen capture of what the default FM2 popup menu style looks like under Mountain Lion.

Here is a screen capture of what the native menu looks like under Mountain Lion.

As you can see, there are some obvious differences between the default style that FM2 expects you to use and what should be expected.

1. FM2 menu has square corners
2. Font is totally wrong
3. Disabled item state isn’t very clear
4. Separator too close to previous item
5. Selected item doesn’t span the width of the menu
6. First (and last) items are not padded from the top (or bottom) of the menu

Background on menu styles

There are three different styles contained in the default style.

1. menuviewstyle – the style that makes up the background of the popup menu
2. menuitemstyle – the style that makes up the item in the menu
3. menuseparatorstyle – the style used for a separator in the menu

If you extract the default styles from the IDE, why these aren’t included as raw style files is an unbelievable oversight by Embarcadero you can look at these styles and expand, modify or redo them.

Chris Rolliston has a great post on how to extract the default styles for a given platform here: http://delphihaven.wordpress.com/2012/09/11/inspecting-the-default-platform-fmx-styles-in-xe3/

menuviewstyle changes

The changes made to the menuviewstyle are significant. Gone is the “pixel perfect” usage of TSubImage since it kills the rounded appearance of the popup menu it’s been replaced with a TRectangle shape, shadow effect and some very selective use of the padding properties (to have the shadow appear correctly).

The content layout now contains padding values to have the items span the width of the popup menu, as well as provide extra space at the top and bottom of the menu.

menuitemstyle changes

There were two changes to this style.

1. Changed the font family and size to the “text” and “shortcut” TText objects
2. Added TColorAnimation components to the “text” and “shortcut” objects that trigger when the Enabled property is changed

menuseparator style

The following changes were made to this style:

1. Made the separator span the entire width of the item
2. Made the separator height 1 pixel
3. Modified the top and bottom padding of the sub image object to center the line better within the item

NOTE: The source lookup for the TSubImage component included in the style reference “OSX Lionstyle.png”. You need to change this value when adding these styles into your retina style book. I have not tested on a retina system, but if you want to send me a retina enabled laptop for testing, please email me (jeremy.north@gmail.com) for the ship to address!

Style only changes

With some changes to the menu, menu item and menu separator styles, I’ve managed to make the FM2 menu style a little more plausible.

Here is the result:

Style and three source code changes

Throw in a couple of modifications to the FMX.Menus.pas unit, the results are improved once again.

1. Item height reduction
2. Disabled text actually looks disabled

This is the final result for the modified popup menu.

Not perfect and could be tweaked further but I think its a vast improvement on the default!

How to put these changes in your application

Modified style download

To get these changes working in your applications, download the attached popupmenustyle.style file and Add that to your OS X style book(s) for your application. Use the Add… feature in the Style Designer.

Code changes

Copy the FMX.Menus.pas unit to your application folder.

In the TMenuItem.ApplyStyle method add the two lines of code to the end of the method:

ApplyTriggerEffect(Self, ‘Enabled’);
StartTriggerAnimation(Self, ‘Enabled’);

In the TMenuItem.SetEnabled method add the same two lines inside the “if Value <> Enabled then” statement.

These two changes causes the Enabled property to trigger the animation which turns the Text color to Gray.

If you inspect the styles included in the style file, both the text and shortcut style items for the ‘menuitemstyle’ have color animation components added to them with triggers. Some screen captures of the style changes are below.

Instead of applying a color animation, this could have been achieved by directly updating the text and shortcut style items. However this solution allows for further customizations down the track if required. Such as making the disabled color RED!

The final code change addresses the issue of the menu items default height. Currently it is 23, however the native height is 19 (on my installation anyway). To address this issue (which isn’t an ideal solution) I did the following change:

In the TMenuItem.CalcSize method change the following line:

Result := PointF(0, 23);

To something like this:

{$IFDEF JEDOSX}
Result := PointF(0, 19);
{$ELSE}
Result := PointF(0, 23);
{$ENDIF}

NOTE: A define is used here because you don’t want to affect other target platform item sizes. For my applications that target OS X, I always define JEDOSX. This is why I used this define – you should define your own value here!

What I should have done here is added a TStyleTag to the style and set its stylename to ItemHeight and read the value from the style, instead of hardcoding it. This is left as an exercise for the reader – I’ve already spent way too long on this as it is.

Conclusion

Hopefully this post has helped improve the default look of a popup menu in your applications that target OS X. Any queries, post a comment and I’ll try and respond.

NOTE: I’m not done with popup menus and there use in FM2, however that will have to wait for another post.

There appears to be an oversight by Embarcadero with the TStyleTag component not being registered for use.

TStyleTag is a handy little component that allows you to add it to a style definition and have it store an Integer, Float or String value. This is used in some of the default styles, one place being the TTrackBar where it is used to hold the default thumb size of the track item.

This allows you to retrieve the thumb size depending on the default style (Windows or Mac) and adjust your user interface depending on the value.

I’ve created a package that your can compile and install into the IDE to register this component.

Download Package

The component doesn’t have to only be used in a style definition, you can drop it directly on your form if you have a use for its functionality.

NOTE: While the component is used in the default Windows and Mac styles, it doesn’t seem to be used in the other FireMonkey styles. Although I did only look in a couple of them. Perhaps something that will be address in an update.

XE3 Plus Pack is now available for download.

This version supports XE3 and includes a new expert (detailed below), some minor enhancements plus some fixes.

– New expert called Watch Property Groups.

– The Bookmark Guide expert now defaults to suppressing editor bookmarks and aligning to the left of the editor.

– When displaying Options, the Visual Forms window is no longer displayed when not visible.

– When returning from viewing a form as text and there are errors treaming in the form an exception dialog would display repeatedly.

– Support Visual Forms captures for FireMonkey projects (the underlying structure of the form designer changed between XE2 and XE3).

– Logging Visual Forms messages would raise an exception on shutdown when the message view was not visible.

– Fix issue with Bookmark Guide not displaying when loading the IDE with no project.

– New command to automatically jump to the Library Paths options page. Add it to the IDE by customizing a toolbar.

Download

Download the 30 day trial – XE3 Plus Pack Trial Download

XE2 Plus Pack users

XE2 Plus Pack registration details also work with XE3 Plus Pack. Therefore there is no need to purchase XE3 Plus Pack if you are an existing XE2 Plus Pack customer.

Pricing change

The price for XE3 Plus Pack is still only 40 Euros and now includes a lifetime license. This change also applies to existing XE and XE2 Plus Pack holders.

Watch Property Groups

The Watch Property Group expert allows you to group a number of properties you generally watch for a specific object type and adds them all to the Watch List with a click of a button.

Steps Involved

1. Define your property group
2. Highlight the object instance in the code editor and display the Watch Property Group window. The default shortcut is Ctrl+Shift+W.
3. Highlight the desired watch group to use and press enter (or the first toolbar button) in the Watch Property Group dialog to add a watch for each property in the defined group.

The Watch Property Group window can be docked in the IDE and saved to your debug layout so it is always where you want it.

Additional Information available in the online help guide: http://www.jed-software.com/help/WatchPropertyGroup/WatchPropertyGroup.html

We will be closed from today until July 16, 2012 for a well earned break!

• New orders and renewals will not be processed during this time.
• Support queries will be processed however the turn around may be increased.

A new release of XE Plus Pack is now available to download.

For Delphi XE – http://www.jed-software.com/files/XEPlusPackTrial.zip

For Delphi XE2 – http://www.jed-software.com/files/XE2PlusPackTrial.zip

NOTE: Update 4 must be installed for the Delphi XE2 version.

Available Experts

XE Plus Pack is a collection of IDE Experts, component editors and property editors available for either Delphi XE or Delphi XE2.

Currently XE Plus Pack consists of eight experts:

1. Visual Forms (previously available as a separate product)
2. Activate Project
3. File Actions
4. Remember IDE Tree Options
5. Find Bar Alignment
6. New Code Template
7. Bookmark Guide (new in Release 6)
8. Resolution Selector (new in Release 6)
9. Mouse Scroll Form Designer (new in Release 8 )
10. Structure Pane Enhancements (new in Release 8 )
11. Help Shutdown (shutdown DExplorer.exe on IDE shutdown) (new in Release 8 )

Mouse Scroll Form Designer

When the designed form gets too large to fit within the bounds of the embedded form designer, simply use the mouse wheel to scroll the hidden portion of the form into view.

• This feature supports vertical and horizontal scrolling.
• Hold down the control key to scroll horizontally if your mouse only supports vertical scrolling.

NOTE: In XE2, this expert doesn’t always work correctly with the FireMonkey designer. The FireMonkey designer doesn’t play very nice with the IDE and has a number of quirks and inconsistencies. I will continue to investigate making this work nicely in future releases.

Structure Pane Enhancements

This expert has been totally driven by an XE Plus Pack user and would prove especially helpful for other users that use the Floating Form designer layout. This experts helps fix a number of deficencies when dealing with using the structure pane with the floating form designer.

• Add an editor shortcut key combination to collapse the content of the structure pane.
• Optionally make the structure pane the active window after the collapse has occurred.
• Collapse the structure pane when navigating between source code editors.
• (IDE BUG FIX) When using the floating form designer, make sure the source editor structure view is available when moving between the designed form and the source editor for the form.

Help Shutdown

Makes sure the help system is shutdown when the IDE is closed. All instances of “dexplore.exe” are terminated.

What’s coming up

Release 9

1. Options Import/Export utility.
2. Path property editor for FireMonkey

Expected release date – July/August 2012

Release 10

Two new experts will be introduced.

1. Smart Desktops
2. Watch Property Groups

Expected release date – August/September 2012.

Disclaimer: Dates and features mentioned for upcoming versions may change.

A new version of JSDialog Pack is now available to registered users with valid maintenance. If you haven’t received an email with the latest version – please contact me.

Highlighted Additions

This new version includes support for updated progress bar usage on the task bar under Windows 7.

New ShowOnTaskBar property

Also included are new wrapper methods:

• New overloaded version of VerifyMessage to support footers. (Declared in JSDialogs.pas)
• New InputQueryVerification method which displays an input query style dialog with the verification checkbox visible. (Declared in JSEditDialogs.pas)
• Also it is now possible to use your custom TJSEditDialog descendant for use in the edit dialog wrapper methods. Just set the new JSEditDialogClass variable in the JSEdtiDialog.pas unit to your new descendant.

Change Log

• Add ability to display progress on the task bar under Windows 7
• Fix memory management issue with non-modal dialogs
• Fix unique name clashes
• Support retrieving a button on the dialog by using its expected result value
• Make sure dialog is updated when the glyph property is changed
• Make sure using the SetProgressState method to change the state of the progress bar updates the progress bar in the dialog and also on the task bar
• Change the UpdateProgress methods to functions that return the current value of the progress bar after being updated
• Improve color usage in custom styled applications
• New overload of the VerifyMessage wrapper method to allow setting footer information
• Allow setting of the EditValue property in TJSEditDialog descendants
• New event OnSetEditValue for TJSEditDialog descendants
• Support opening files (prefix content location with “file” instead of “http“) when using the EditType of etHTML
• New wrapper method InputQueryVerification that displays an InputQuery dialog with a checkbox on it
• Allow specifying a default TJSEditDialog class to be used when invoking one of the TJSEditDialog wrapper methods. Set the JSEditDialogClass variable to change the default class.

In celebration of my daughter turning 18 in a few days, we are offering 18% off JSDialog Pack orders.

Just use the coupon code MADDIE18 to get the discount.

http://www.jed-software.com/jsd_purchase.htm

Just in time for the next release, which will occur before June.

http://www.jed-software.com/jsd.htm

In this post we’ll discover and solve a couple of glitches in the default styles supplied in FireMonkey for iOS.

• Create a new FireMonkey iOS HD application.
• Drop a button on the form and assign an OnClick handler.
• In the OnClick handler, add code to display a simple message.
  • i.e. ShowMessage(‘You tapped me!’);
• Run the application (you can do this on windows without going to XCode for this post)
• Tap/Click on the button

Problem 1 – The default TButton style doesn’t look different when it has been pressed.

To fix this issue stopped the application and perform the following steps.

Right click on the TButton component and select the Edit Default Style… command at the bottom of the context menu.

The Style Designer will load and since we are updating the Default Style, will have the default style name for TButton, which is Buttonstyle.

The style consists of a TLayout, three TRectangle and a TText control.

To rectify the pressed state, grab a TInnerGlowEffect component from the Tool Palette.

Drag the TInnerGlowEffect component from the Tool Palette and drop it on the background TRectangle control.

With the TInnerGlowEffect component selected, you can see the available properties for the control.

Change the GlowColor property to better suit this situation, I chose Black.
Set the Enabled property to False. This is because we only want this effect enabled when the button is being pressed.
In the Trigger property, enter the following “IsPressed=true“. This means then whenever the IsPressed property is true, this effect will become enabled.

After your changes, you object inspector should look like the capture below.

Run the application now and hopefully you will see the effect display when the button is pressed.

Drop a couple of TCornerButton controls on the same application. Set the XRadius and YRadius values to 10 for one of the corner buttons. The sample application should now look something like the capture below.

Problem 2 – Under side of corner button looks strange when XRadius and YRadius values are not 3.

Below is a close up to better display the issue, it is really noticeable if your background is lighter.

To discover what is occuring with this style issue, we need to inspect the source code. Most importantly where the style information is loaded by the corner button control. In FireMonkey style properties should be modified in the ApplyStyle or ApplyStyleLookup methods. The ApplyStyle method for the TCustomCornerButton control is below, seems like everything should work.

Lets take a look at the default style for a TCornerButton.

Hmm, the source code referenced a StyleName called ‘secondbackground‘ button second background has been been set. The TRectangle without a name next to it should be called ‘secondbackground‘.

Use the object inspector to set the StyleName of the un-style-named TRectangle to ‘secondbackground‘.

Successful renaming is identified by your style, looking like the style in the capture below. Don’t set the name property by accident. You can’t set the name property to anything for a style (and have it persist).

Now when you view the form the corner button style won’t looked odd.

Problem 3 – The cornerbutton doesn’t show any effect when it is pressed.

Note how there is no TInnerGlowEffect define for the style. Follow the same steps above for the TButton and add the same effect (with the same property values) to the corner button style. Parent the TInnerGlowEffect to the background TRectangle control.

Problem 4 – The corner button has a TGlowEffect.

Kind of useless in a mobile application which doesn’t have a tab key to navigate between controls! Delete the TGlowEffect component from the style by clicking on the X.

Now you can rebuild and deploy to XCode and run on iOS to make sure these changes work well. Here is a capture from a real iPad (really it is!).

Default Styles

When in the Style Designer you can use the Load Default button to load all of the style details for the applications default style. This allows you to inspect other styles to learn from them. After making changes, I recommend you save the modified style to disk for safe keeping.

I would attach the modified style file to this post for download, but I’m not sure if I’m allowed to.

I’ve been doing a quite a bit of work with FireMonkey styles lately trying to make a nice TListBoxItem style. You may hear more about this in the future…

About 5 years ago, I knocked together a little GUI layer on top of the .INC file for the FastMM4 project. This was to help someone (can’t remember who) that was having difficulties modifying the include file directly with all of the compiler defines.

Occasionally I get requests to update it and/or release the source. Since I don’t actually use it here is the source:

http://www.jed-software.com/files/fastmmgui_src.zip

Some blasts from the past:

• http://jedqc.blogspot.com.au/2007/07/new-fastmm4-options-interface.html
• http://coding.derkeiler.com/Archive/Delphi/borland.public.delphi.non-technical/2007-08/msg00040.html

Warnings

• The parsing code is horrible.
• The ListBox in the UI is custom drawn to display the checkboxes. It really should be a component, but I never got to that stage and haven’t needed such a component since.
• I changed it today to use generics, but only in one spot so wouldn’t take long to convert back. Originally it was D2006.
• Removed all warnings when built with XE2, so ThemeServices references were changed to StyleServices.
• I don’t know how it will look in an unthemed operating system.
• If you have JSDialog Pack, define JSD to use JSDialog Pack dialogs for messages.
• There is no license on the code, there is no support on the code. You are on your own! The only caveat to this is if you can’t get a clean compile from the included source code, let me know and I’ll address it.

It isn’t complex code, it is just a bit messy reading the options from the INC file. Note it uses hardcoded start and end points, so these should be adjusted in the .ini file created when the application runs – or set in the source code if no .ini file is found. Method is called LoadDefaultSettings in the MainForm unit.

Recently the following QC report was created:

Report No: 102419 (RAID: 289385)          Status: Open
RibbonStyleActnCtrls: No dropdown arrows of Actiontoolbar buttons
http://qc.embarcadero.com/wc/qcmain.aspx?d=102419

I noticed it and included the changes necessary to make it work. Since the ribbon functionality uses additional properties on TActionClientItem, these can be set for normal menu items to get the desired outcome. These additional properties are ignored by existing styles.

An alternate solution is a source code change that is also documented on the report. This source code change is not interface breaking, so you just need to copy the modified file into your applications folder.

As noted on the report, a ribbon style won’t work if the user selects the option in the ActionManager to use “large” images. This is due to the large button size on the ribbon being three times the height of a small button, instead of two that the ActionManager expects.