Using TcxScrollBar with WPTools

 

Overview

One of the best third-party component sets for writing Windows applications with Delphi is the Developer Express VCL Suite. It includes hundreds of controls, from simple edits and buttons, to more complex controls such as ribbons, spreadsheets and even a basic word processor. The word processor that is included is good for a lot of tasks, but at this point it is not a full-blown, fully featured control. It is also not a very open control in that there are many parts of the internals you cannot access (without major changes to its source).

 

As far as word processing controls go, you simply cannot beat WPTools from WPCubed. The WPTools control is extremely powerful and fully featured and is the control I use for all of my word processor needs. Depending on the edition you have it includes everything from simple formatting commands, to the ability to insert images and other objects and even has text box, column and footnote capabilities. The biggest drawback is that its default presentation is not as attractive as other controls. It looks fairly dated when you use it with the DevExpress controls.

 

However, all is not lost. WPTools has an extensive api that allows you to access its internals. It also allows you to replace some of its functionality with other controls (such as the scrollbars)and it allows you to set the colors for most of the visual elements.

 

This is the first in a series of articles on integrating the WPTools word processing control into a Delphi application that uses the Developer Express control suite. In this article you will learn how to replace the TWPRichText scrollbars with the TcxScrollBar from DevExpress.

Designing the UI form

The first thing you need to do is create a blank VCL application. You will then place the following controls on the form:

    1. Place a TcxScrollBar on your form and set its properties like the following:
      1. Name: VertScrollBar
      2. Kind: sbVertical
      3. Align: alRight

       

    2. Place a second TcxScrollBar on your form and set its properties:
      1. Name: HorizScrollBar
      2. Kind: sbHorizontal (The default)
      3. Align: alBottom

       

    3. Next place a TWPRuler on your form and set its properties:
      1. Name: HorizRuler
      2. Align: alTop

       

    4. Place a TWPVertRuler on the form, setting its properties:
      1. Name: VertRuler
      2. Align: alLeft (The default)

       

    5. Finally place a TWPRichText on the form and set the properties as follows:
      1. Name: Editor
      2. ScrollBars: ssNone
      3. VRuler: VertRuler
      4. WPRuler: HorizRuler

       

 

    1. Now right-click on the TWPRichText component and select the QuickConfig option.

      and set the options as in the following image:

 

  1. Now change the following properties of the TWPRichText control:
    1. AutoZoom: wpAutoZoomOff
    2. Zooming: 60
    3. LayoutMode: wplayFullLayout

 

You should now have a form in your Delphi IDE that looks like this:

 

Ok, now on to coding

First you need to create an event handler for the TWPRichText control’s OnUpdateExternScrollbar event.This event is triggered when the TWPRichText control wants to update external scrollbar information. The handler should contain the following code:

 

 
procedure TForm1.EditorUpdateExternScrollbar(Sender:
    TWPCustomRtfEdit; ScrollBar: TScrollStyle; Range, Page, Pos:
    Integer);
var
  AScrollBar: TcxScrollBar;
  AVisible: Boolean;
begin
  case ScrollBar of
    TScrollStyle.ssHorizontal: AScrollBar := HorizScrollBar;
    TScrollStyle.ssVertical  : AScrollBar := VertScrollBar;
  else
    AScrollBar := NIL;
  end;

  if (NOT Assigned(AScrollBar)) then
    Exit;

  AVisible := (Page < Range);

  AScrollBar.Visible := AVisible;

  if (NOT AVisible) then
    Exit;

  AScrollBar.Max := Range;
  AScrollBar.PageSize := Page;
  AScrollBar.Position := Pos;
end;

 

Now we need to create a handler for the OnScroll event of each scrollbar.

 

VerScrollBar’s OnScroll event handler:

 
procedure TForm1.VertScrollBarScroll(Sender: TObject; ScrollCode:
    TScrollCode; var ScrollPos: Integer);
var
  ANewPos: Integer;
  AScrVertMult: Single;
begin
  AScrVertMult := Editor.ScrollVertMultiplicator;

  ANewPos := Round(ScrollPos / AScrVertMult);

  Editor.TopOffset := ANewPos;
end;

 

 

HorizScrollBar’s OnScroll event handler:

 
procedure TForm1.HorizScrollBarScroll(Sender: TObject; ScrollCode:
    TScrollCode; var ScrollPos: Integer);
var
  ANewPos: Integer;
  AScrHorizMult: Single;
begin
  AScrHorizMult := Editor.ScrollHorzMultiplicator;

  ANewPos := Round(ScrollPos / AScrHorizMult);

  Editor.LeftOffset := ANewPos;
end;

 

 

That is it! Now compile and run your app. You should get an app that runs like the following demo video:

 

[ult_video width=”600″ height=”400″ ]https://youtu.be/3F9ykooKnz8[/ult_video]

 

 

 

Fully commented code for this project can be downloaded from our BitBucket repository.

 

 

 

Leave a comment