Archive for the ‘Ribbon’ Category.

Ribbon – using a ribbon style for a normal menu

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.

A toolbar that works on glass

While redesigning JSDialog Creator I decided to spruce up the user interface by taking advantage of the glass feature available in recent operating systems.

I wanted to have a toolbar at the top and the ability to change active pages at the bottom of the screen with no other visual distractions at the bottom. Initially for the toolbar I tried the TToolbar component. Unfortunately that control looks awful when double buffered (and not on glass), and looks just as bad when placed on glass.

Here are some captures showing the various issues with TToolbar rendering on glass.

TToolbar on glass
TToolbar on glass
TToolbar on glass
TToolbar on glass

What to do?

The solution is actually contained in the VCL already, it just hasn’t been surfaced for you. The Quick Access Toolbar of the TRibbon component paints correctly so we’ll take advantage of this.

First we need to create a new TActionToolbar descendant. For my use I’ve called it TJSActionToolbar, you can call it whatever you want. Only the WM_Paint message needs to be handled in this new class. Here is the implementation for the toolbar, but it isn’t the entire implementation (unfortunately).

unit JSActionToolbar;

interface

uses
  ActnCtrls, Messages;

type
  TJSActionToolbar = class(TActionToolbar)
  protected
    procedure WMPaint(var Message: TWMPaint); message WM_PAINT;
  end;

implementation

uses
  Windows, Classes, Graphics, Controls, uxTheme;

{ TJSActionToolbar }

procedure TJSActionToolbar.WMPaint(var Message: TWMPaint);
var
  DC, MemDC: HDC;
  PS: TPaintStruct;
  PaintBuffer: HPAINTBUFFER;
  LBlackBrush: HBRUSH;
begin
  if not (csDesigning in ComponentState) and DoubleBuffered and (csGlassPaint in ControlState) then
  begin
    DC := BeginPaint(Handle, PS);
    try
      PaintBuffer := BeginBufferedPaint(DC, PS.rcPaint, BPBF_COMPOSITED, nil, MemDC);
      if PaintBuffer <> 0 then
        try
          LBlackBrush := CreateSolidBrush(ColorToRGB(clBlack));
          FillRect(MemDC, ClientRect, LBlackBrush);
          DeleteObject(LBlackBrush);
          Perform(WM_PRINTCLIENT, WParam(MemDC), PRF_CLIENT);
        finally
          EndBufferedPaint(PaintBuffer, True);
        end;
    finally
      EndPaint(Handle, PS);
    end;
  end
  else
    inherited;
end;

end.


The problem is that the Quick Access Toolbar doesn’t allow captions for the commands, so painting text wasn’t an issue, where in this case it might be. To address this we need to add a couple of if statements into the ActnMan unit. Don’t worry, they are simple changes and easy to include.

The easiest way to make VCL unit changes is to copy the unit into the project folder you are going to be using it in. This is easily done with the File Actions expert included in XE Plus Pack, but I’ve got time to wait for you to do it manually………….

We need to paint on glass, which means using the specific theme DrawText method.

To do this I created a new local method called DrawOnGlass. Here it is:

procedure DrawOnGlass(ADC: HDC; const AText: UnicodeString; var ATextRect: TRect;
  ATextFlags: Cardinal; const AGlowSize: Integer; const AFontColor: TColor);
var
  Options: TDTTOpts;
  LDetail: TThemedElementDetails;
begin
  FillChar(Options, SizeOf(Options), 0);
  Options.dwSize := SizeOf(Options);
  Options.dwFlags := DTT_TEXTCOLOR or DTT_GLOWSIZE or DTT_COMPOSITED;
  if ATextFlags and DT_CALCRECT = DT_CALCRECT then
    Options.dwFlags := Options.dwFlags or DTT_CALCRECT;
  Options.crText := ColorToRGB(AFontColor);
  Options.iGlowSize := AGlowSize;
  LDetail := ThemeServices.GetElementDetails(teEditTextNormal);
  DrawThemeTextEx(ThemeServices.Theme[teEdit], ADC, LDetail.Part, LDetail.State, AText, Length(AText), ATextFlags, ATextRect, Options);
end;


Place this method above the TCustomActionControl.DrawText method in the ActnMan.pas unit. This code has been lifted from the TCustomLabel.DoDrawThemeTextEx method in the VCL, and reformatted to how I (mostly) format my code.

When glass was added (or the version after) a new ControlState was added to the VCL. This control state is csGlassPaint. If a control is to be painted on glass, the controls ControlState property includes csGlassPaint. This makes it easy to identify when we need to call the new DrawOnGlass method, instead of the Windows.DrawText method that is currently done.

Below is the updated version of the TCustomActionControl.DrawText method:

procedure TCustomActionControl.DrawText(var ARect: TRect; var Flags: Cardinal;
  Text: string);
begin
  if csGlassPaint in ControlState then
    DrawOnGlass(Canvas.Handle, Text, ARect, Flags, 5, Canvas.Font.Color)
  else
    Windows.DrawText(Canvas.Handle, Text, Length(Text), ARect, Flags);
end;


The same if statement needs to also be added to the TCustomActionControl.DrawShadowedText method in two places, to make sure disabled command text is displayed correctly.

There is one final step that is required to have this work. When you select the style on the TActionManager component, it MUST be one of the office styles. If you select a non-office style, the controls won’t paint correctly. Since the office styles use a 32-bit bitmap skin to paint elements, it works fine on glass.

NOTE: The only difference between the selected styles is the used font color. The hot, pressed, checked, down states are the same for each style.

If you’ve done everything correctly, it should look something like the images below.

TToolbar on glass
TToolbar on glass

Disclaimer: I’ve tested this under the following scenario – Large Normal Buttons. I don’t expect issues with button based items, but some of the more complex command styles available may have issues.

Summary

For this to work correctly remember the following points:

  1. Create a new TActionToolbar descendant that handles the WM_PAINT message
  2. Copy the ActnMan.pas unit to your projects folder
  3. Add the DrawOnGlass method to the unit
  4. Modify the TCustomActionControl.DrawText and TCustomActionControl.DrawShadowText methods to check and use the new draw on glass method
  5. When using the new toolbar in an application, make sure the Action Manager is using an office based style

When I get a chance (motivated), I’ll add a QC entry and perhaps this might be included in a future release, without this workaround being needed.

VCL Ribbon – Ribbon Group Component Editor

I’ve created a component editor specifically for the TRibbonGroup component. With this component editor it will hopefully make it a little easier to layout your ribbon groups.

It has a number of commands for adding controls to the group as well as changing the alignment and vertical row count for the group.

Download

Delphi 2010 version

Delphi 2009 version

Install

  1. Open up your Delphi version.
  2. Select the Components | Install Packages menu item.
  3. Click on the Add button and select the extracted BPL from the downloaded zip file.

The component editor should now be available when you click on a group on the ribbon.

Some screen captures

Available commands for the Component Editor

Available commands for the Component Editor

When you select a command, you can also choose what actions to create as that command.

When you select a command, you can also choose what actions to create as that command.

You can create the different types of Small and Large buttons. NOTE: Selecting the dropdown button is a little different to the others.

You can create the different types of Small and Large buttons. NOTE: Selecting the dropdown button is a little different to the others.

When you are creating a dropdown button you are selecting that actions that should be added to the button as dropdown items. Only one button is created. You can also enter in the button caption.

When you are creating a dropdown button you are selecting that actions that should be added to the button as dropdown items. Only one button is created. You can also enter in the button caption.

VCL Ribbon – Context Tabs

Context Tabs was bought up in a comment to my MDI post.

I’ve been putting considerable effort into getting this working for one of my personal projects. I think it looks pretty good.

Design Time

Design Time

 

Runtime

Runtime

 

Runtime (second tab)

Runtime (second tab)

Unfortunately it isn’t viable to release these changes to the public. This just proves that it is possible though!

If you posted a comment on the previous post, I’ve responded to all comments now.

VCL Ribbon MDI Fix

Disclaimer: I wrote the VCL Ribbon implementation in Delphi 2009. At the time there was no scope for MDI support in the Ribbon however the number of posts about this issue made me look into fixing it. Today I set aside some time to look at a solution and I now present this solution.

The MDI Ribbon bug is evident when your application is a MDI application and the MDI Children are maximized. The screen capture below shows this bug.

VCL Ribbon MDI Bug

VCL Ribbon MDI Bug

The fix is to drop a new component onto the Form with the Ribbon on it. Then you just need to set the Ribbon property to be the TRibbon component on the form, that is all that needs to be done.

The screen shot below shows the component at design time.

VCL Ribbon MDI Bug Fix

VCL Ribbon MDI Bug Fix

When you toggle the Enable MDI Fix check box, you need to restore and maximum a MDI Child form. For real use, you wouldn’t want to disable it anyway.

Various screen captures of the demo application with the fix active.

Fixed Ribbon MDI Bug

Fixed Ribbon MDI Bug

Fixed Ribbon MDI Bug

Fixed Ribbon MDI Bug

Fixed Ribbon MDI Bug

Fixed Ribbon MDI Bug

 

Downloading the Fix

You can download the component and demo application from my site. I may also put the fix on CodeCentral in future.

Ribbon VCL MDI Bug Fix Download

To install the component into the IDE, open the RibbonMDIFix2010.dpk file in Delphi 2010 (should also work, but is untested). In the project manager, select the Install command. Make sure the path to the RibbonMDIFix.pas unit is on your library path so that the compiler can find the file when compiling your application.

 

Further Ribbon Details

If you search for my QualityCentral entries on the Ribbon, most of the issues I raise I also provide the workaround for. Most are simple changes that can be done by copying the Ribbon units into your project folder. IIRC none are interface breaking (I’ve saved those).

 

Performance issue with MDI Applications using the TActionManager framework

There is also an issue with the MDI “detection” when a TActionMainMenuBar component (and descendants) are used in an application. This is actually a bug that was raised with Borland/CodeGear support several years ago. When you have an action that calls GetActiveMDIChild you may see processor usage increase significantly. On the Window group in the application feature throughout this post you’ll see the Close button. This is the TWindowClose standard MDI action. This actions update handler calls ActiveMDIChild. If you are running an MDI application that utilises TActionManager CPU usage will increase because of this. This occurs because of the Window Hook installed for menu processing. It handles the WM_MDIGETACTIVE message, so if an action is calling that method, the window hook is also processing it.

My solution (which also uses a window hook) avoids increasing CPU usage unnecessarily by listening to more specific MDI messages. There is no need to listen to the WM_MDIGETACTIVE (that I can see).