Mini Editor (Use TWPToolbar)

<< Click to Display Table of Contents >>

Navigation:  Programming > User Interface >

Mini Editor (Use TWPToolbar)

Although many of the new features can only be used with a modern edition of Delphi or C++ Builder we took some effort to still support Delphi 5. You will need the WPTools PRO edition with 100% source if you depend on Delphi 5.  

This will empower you to offer your users quite some impressive features - despite the older compiler and VCL.

 

Hint:

The powerful architecture of WPTools makes it easy to enhance this demo application to work with different documents which can be switched, just like a MDI application. We describe the technique in chapter

"Simulated MDI (one editor, multiple documents)".

 

For our Delphi 5 Mini demo we just dropped a TWPRichText, 2 rulers on a TPanel, and a  TWPPreview and TWPToolbar on a form. This looks like this:

 

clip0194

 

Of course we could set the properties in the object inspector, but we do it in code to make clear what we needed to change.

 

procedure TForm1.FormCreate(Sender: TObject);

begin

// 1) Basis

 WPPreview1.Align := alLeft;

 Splitter1.Align:=alLeft;

 WPToolbar1.Align := alTop;

 Panel1.Align := alClient;

 Panel1.BevelInner := bvNone;

 Panel1.BevelOuter := bvNone;

 WPRuler1.Align := alTop;

 WPVertRuler1.Align := alLeft;

 WPRichText1.Align := alClient;

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

// 2) connnect TWPRichText

 WPRichText1.WPRuler := WPRuler1;

 WPRichText1.VRuler := WPVertRuler1;

 WPRichText1.WPToolBar := WPToolbar1;

 WPPreview1.WPRichText := WPRichText1;

 WPPreview1.Configuration := wpPreviewThumbnails;

end;

 

When we start the application we see the classic WPTools editor (EXE Size in this state is 1972 KB):

 

clip0195

 

 

We need to add the unit WPRTEDefsConsts to the uses clause. Now we can select the modern WPTools interface style:

 

 ...

// 3) further configuration

 WPToolbar1.DrawOptions := [ wptDrawPageShade ];

 WPToolbar1.FlatButtons := true;

 WPToolbar1.MarginBottom:= 8;

 WPToolbar1.BevelLines := [ wplBottomShade ];

 

 WPRuler1.DrawOptions := WPRuler1.DrawOptions + [wpDrawThemedBackground,wpDrawFramelines  ];

 WPVertRuler1.DrawOptions := WPVertRuler1.DrawOptions + [wpDrawFramelines ];

 WPRuler1.DrawOptions := [wpDrawPageShade];

 WPVertRuler1.DrawOptions := [wpDrawPageShade];

 WPRichText1.ViewOptionsEx := WPRichText1.ViewOptionsEx + [wpPaintPageShade];

 WPPreview1.ViewOptionsEx := WPPreview1.ViewOptionsEx + [ wpPaintPageShade];

 

You will see the improvement immediately:

 

clip0199

 

 

None of the dialogs do work yet. We need to drop some more components:

 

clip0197

 

In the last component, the new TWPDialogCollection component, we assign the single dialog instances at designtime. The property WPRichText.WPDialogCollection we change to "WPDialogCollection1".

 

clip0198

 

Now we can add popup dialog to make it possible to configure the toolbar. The popup is assigned to TWPToolBar. We need to add WPTBarConfig to the uses clause.

 

To show the configuration dialog use this code:

procedure TForm1.Configure1Click(Sender: TObject);

begin

 WPToolbarConfigurate( WPToolbar1, Self, 'Configure Toolbar' );

end;

 

toolbar_configuration

 

The configuration is stored in the property ConfigString. If this property is not empty, ie. ';' the properties sel_ActionIcons etc. will be ignored.  The character | represents a separator between buttons, its width is controlled by property WPToolbar.WidthBetweenGroups. The property ButtonDistance controls  all other horizontal distances.

 

Please see the XE3 demo in the same folder to learn more about this feature.

 

Hint: To make the toolbar configuration persistent save the contents of the property ConfigString to the registry!

 

 

This requires a Delphi edition with PNG support:

 

To use the modern WPTools 9 icons, just add unit WPIcons to the project, or create and attach a TWPImageList, as described here.

 

Now you should see the modern icons:

 

toolbar_new1

 

 

 

You can activate the new color drop down elements with the property StandardColorDropdowns of the TWPToolbar set to false. The design colors are loaded from the string array WPDesignColors[0..9] (from WPRTEPlatform).

 

ColorDropdown

 

The EXE size of the demo application is now  2255 KB. It includes already the most important dialogs, the editor, RTF and HTML loading and saving etc.

 

Note: In case you get an error message when a form should be displayed you will need to open the respective unit and let Delphi ignore the problem. Since the Delphi 5 VCL misses some modern properties, we decided to not use it as lowest common denominator.

 

In case you want to use the old style toolbar icons You can add the compiler conditional OLDTBRESOURCE and do a BuildAll:

clip0200