Standard XE3 Ribbons

<< Click to Display Table of Contents >>

Navigation:  Programming > User Interface > Toolbar > Ribbon Applications >

Standard XE3 Ribbons

Our XE Ribbon demo uses the default action data module wpDefActions7 which must be added to the project.

 

Only then the actions are visible to the IDE. If wpDefActions7 was not added or not found, opening the project in the IDE will remove all links to the actions!

 

 

For a ribbon application you need a TRibbon object on your form. You can also place a TWPRichText, TWPRuler directly on the form or inside of a TPaint. If you place it into a TPanel, you can later use a splitter to offer a splitted GUI with an editor and a thumbnail view.

 

You need an ActionManager to configure the the ribbon.

 

clip0203

 

Attach WPDefAct.StdIcons and WPDefAct.StdActions to the ActionManager.

Then you can double click on the ActionManager and configure the ribbon by using drag and drop.

 

You need to add this units to the uses clause:

 

// manually added:

 ,WPRTEPlatform, WPRTEDefsConsts, WPRTEPaint, WPRTEEdit, WPRTEFormatA, WPObj_Image, WPCtrDrawFkt7

// Default Actions

 , wpDefActions7.

 

 

You need to manually add a procedure to the form:

 

procedure TWPTEditor.DoGetWPRichText(Sender: TObject; var wp: TWPCustomRichText);

begin

wp := WPRichText1;

end;

 

In OnCreate you need some code for initialization:

 

procedure TWPTEditor.FormCreate(Sender: TObject);

begin

 EditPanel.Align := alClient;

 WPRichText1.Align := alClient;

WPActions := TWPDefAct.Create(Self);

 

 WPRichText1.WPDialogCollection := WPActions.WPDialogCollection1;

 

WPActions.OnGetWPRichText := DoGetWPRichText;

 

// Here we update the link to the insnace of the datamodule

with ActionManager1.LinkedActionLists[0] as TActionListItem do

begin

   ActionList := WPActions.StdActions;

end;

 

// Configure TWPRichText

 WPRichText1.EditOptions := WPRichText1.EditOptions

    + [wpActivateRedo,wpActivateRedoHotkey,wpActivateUndo,wpActivateUndoHotkey];

 

 WPRichText1.ViewOptionsEx := [wpPaintThemedBackground];

 WPRuler1.Options := WPRuler1.Options - [wpNoVertRulerAttached];

 WPRuler1.DrawOptions := [wpDrawFramelines, wpDrawThemedBackground];

 WPVertRuler1.DrawOptions := [wpDrawFramelines, wpDrawThemedBackground];

end;

 

You can place TWPComboBox elements on the ribbon:

 

clip0204

 

They are attached to the TWPRichText by a regular ActionList which is referenced by the TWPRichText's property ActionList. Inside the action list you need a TWPToolsCustomEditControlAction for each of the combos. The property AttachedControl must reference the combo, the property AttachedControlStyle is ignored.

 

clip0205

 

After the ribbon was configured the application can look like this

 

wptools7_ribbon_application

 

General Hints:

 

If you get the message "class Actionlist not found" when starting the application simply place an empty TActionlist on the form.

 

If you get a GPF when loading a project in Delphi  XE close Delphi and delete all redundant project files x.RES, x.LOCAL, x.DSK and reopen Delphi.

 

 

If you need to create a color drop down element, You can use the function WPCreateColorForm from unit WPColSel:

 

Example:

var col : TColor;

begin

  if WPCreateColorForm(Self, Sender as TSpeedButton, WPRichText1, col) then

      WPRichText1.CurrAttr.Color :=

      WPRichText1.CurrAttr.ColorToNr( col, true );

   WPRichText1.SetFocus;

end;