Hi,

I'm trying to create a Canvas ListBox control. (Attached you'll find the source.)

The listitems are added to the control, but it fails to show the contents of the canvas.

Any help is welcome.

Thanks.

Luk

Luk,

<< I'm trying to create a Canvas ListBox control. (Attached you'll find the source.)

The listitems are added to the control, but it fails to show the contents of the canvas. >>

What exactly are you trying to accomplish ?  Do you want to be able to draw the items in the list box ?  If so, then you don't really need to copy everything from the existing list box, you only need to create a descendant of the TListControl class and override this method:

     function CreateListItem: TListItem; virtual;

and have it create your descendant TListItem class that performs the canvas drawing, etc.

Also, I can't see where you're actually drawing on the canvas element anywhere in your code.  That's why you're not seeing anything show up - you actually will need to draw the strings from the list on to the canvas, if that's what you want your control to accomplish.

Tim Young
Elevate Software
www.elevatesoft.com

Tim,

Taking your remarks into account,I've created a new component. Unfortunately, it's still not working.

The drawing on the canvas is done in the create event of the form. Using the controls property of the ListBoxEx I get a reference to the ListItemEx controls.

The ultimate goal is to create a TListBox that allows me to do some custom drawing on the listitems.

Thanks.

Luk

Luk wrote:

> The ultimate goal is to create a TListBox that allows me to do some custom drawing on the listitems.

First off, check that the list you are working with is not virtual. When I did mine, making it virtual was really quite important, otherwise it could take many seconds to create all the DOM require. WHen I switched to virtualising, everything was back to instant.

Second, have a look at the FormList that I posted just before your message in this topic. It allows you to create a form which is then used as the list content. That form can have any components you want on it, and could include a canvas.

Luk,

<< Taking your remarks into account,I've created a new component. Unfortunately, it's still not working. >>

Here are the fixes (marked with <<<<<):

unit ListItemEx;

interface

uses WebCore, WebUI, WebCtrls, WebLists;

const

  CANVAS_ELEMENT_NAME = 'Canvas'; <<<<<<<<<<<<<<<<<<<<<  Fix !!!!

type

  {$INTERFACE tlistitemex}
  TListItemEx = class(TListItem)
     private
        { Private declarations }
        FCanvasElement: TCanvasElement;
     protected
        { Protected declarations }
        procedure InitializeProperties; override;
        function GetInterfaceClassName: String; override;
        procedure CreateInterfaceElements; override;
     public
        { Public declarations }
        property Canvas: TCanvasElement read FCanvasElement;
     published
        { Published declarations }
     end;

  TListControlEx = class(TListControl)
     private       
     protected
        function CreateListItem: TListItem; override;
     public
      
     end;

  {$INTERFACE TListBoxEx}
 TListBoxEx = class(TListControlEx)
     private
        FInputElement: THiddenInputElement;
     protected
        procedure CreateInterfaceElements; override;
        procedure InitializeProperties; override;
        function GetInterfaceClassName: String; override;
        function GetInputElement: TInputElement; override;
     public
        property ItemIndex;
        property Selected;
        property SelectedCount;
     published
        property Top;
        property Left;
        property Height;
        property Width;
        property AlwaysOnTop;
        property Animations;
        property AutoItemHeight;
        property Constraints;
        property Corners;
        property Cursor;
        property DataColumn;
        property DataSet;
        property DisplayOrder;
        property Enabled;
        property Hint;
        property ItemHeight;
        property Items;
        property Layout;
        property LayoutOrder;
        property Margins;
        property MultiSelect;
        property Opacity;
        property ReadOnly;
        property TabOrder;
        property TabStop default True;
        property Tag;
        property Text;
        property Visible;
        property OnAnimationComplete;
        property OnAnimationsComplete;
        property OnShow;
        property OnHide;
        property OnMove;
        property OnSize;
        property OnScroll;
        property OnClick;
        property OnDblClick;
        property OnMouseDown;
        property OnMouseMove;
        property OnMouseUp;
        property OnMouseEnter;
        property OnMouseLeave;
        property OnMouseWheel;
        property OnTouchStart;
        property OnTouchMove;
        property OnTouchEnd;
        property OnTouchCancel;
        property OnTouchScroll;
        property OnEnter;
        property OnExit;
        property OnKeyDown;
        property OnKeyPress;
        property OnKeyUp;
        property OnChange;
     end;

implementation

procedure TListItemEx.InitializeProperties;
begin
  inherited InitializeProperties;
  CheckOwnerClass(TListControlEx);
  InterfaceState:=NORMAL_STATE_NAME;
end;

function TListItemEx.GetInterfaceClassName: String;
begin
  Result:=TListItemEx.ClassName;
end;

procedure TListItemEx.CreateInterfaceElements;
begin
  inherited CreateInterfaceElements;
  FCanvasElement:=TCanvasElement(InterfaceManager.CreateElement(CANVAS_ELEMENT_NAME,Element,ELEMENT_CLASS_CANVAS));  <<<<<<<<<<<<<<<<<<<<<  Fix !!!!
end;

function TListControlEx.CreateListItem: TListItem;
begin
  Result:=TListItemEx.Create(Self);
end;
   
procedure TListBoxEx.CreateInterfaceElements;
begin
  inherited CreateInterfaceElements;
  FInputElement:=THiddenInputElement(InterfaceManager.CreateElement(INPUT_ELEMENT_NAME,Element,ELEMENT_CLASS_HIDDENINPUT));
end;

procedure TListBoxEx.InitializeProperties;
begin
  inherited InitializeProperties;
  TabStop:=True;
end;

function TListBoxEx.GetInterfaceClassName: String;
begin
  Result:=TListBoxEx.ClassName;
end;

function TListBoxEx.GetInputElement: TInputElement;
begin
  Result:=FInputElement;
end;

end.

The specific fixes are:

1) You were creating the canvas element without a parent, therefore it wasn't even present in the DOM elements in the browser.

2) You were creating the canvas element with the same element name as the TListItem's element name ("Base"), you should never do that.  "Base" is reserved for use by the base UI element for every control so that the control interfaces, etc. all follow a common naming convention and are easier to understand.

Tim Young
Elevate Software
www.elevatesoft.com