Hi,

I am trying to create a customcontrol based on TControl. I have added
FBorder: TControlBorder in the private declaration. In the InitElement
procedure I call FBorder.InitElements. I get the error "There is no function
or procedure decalration that matches then InitElements() reference.


procedure TRoundedCorners.InitElement;
begin
{ Must hide any overflow on the base element !!! }
Base.style.overflow:='hidden';
Base.style.backgroundColor:='transparent';
Base.style.whiteSpace:='pre';
FBorder.InitElements;
inherited InitElement;
end;

Why is that? Of course I included WebCtrls with the units.

Greetings,
Ronald

Ronald,

<< I am trying to create a customcontrol based on TControl. I have added
FBorder: TControlBorder in the private declaration. In the InitElement
procedure I call FBorder.InitElements. I get the error "There is no function
or procedure decalration that matches then InitElements() reference. >>

InitElements is declared as protected, which is the problem.

I'll make these protected methods public in the next build/release, but for
now you can do it yourself.  Just change the declaration for the
TControlBorder class to this:

  TControlBorder = class(TObject)
     private
        FControl: TControl;
        FVisible: Boolean=True;
        FTopLeft: THTMLElement;
        FLeft: THTMLElement;
        FBottomLeft: THTMLElement;
        FTop: THTMLElement;
        FBottom: THTMLElement;
        FTopRight: THTMLElement;
        FRight: THTMLElement;
        FBottomRight: THTMLElement;
        procedure SetVisible(Value: Boolean);
     public
        constructor Create(Control: TControl); virtual;
        property Visible: Boolean read FVisible write SetVisible;
        function CreateElements; virtual;
        procedure InitElements; virtual;
        procedure RemoveElements; virtual;
        procedure SetControlState; virtual;
        procedure HeightChanged; virtual;
        procedure WidthChanged; virtual;
        function TopHeight: Integer;
        function LeftWidth: Integer;
        function TotalHeight: Integer;
        function TotalWidth: Integer;
     end;

One point, though - do you really want a rectangular control border around a
control that is supposed to have rounded corners ?

--
Tim Young
Elevate Software
www.elevatesoft.com

No, I want rounded corners. I was examining if I could work this out by
setting this style in FTopLeft etc. But I understand that I am not on the
right track.

"Tim Young [Elevate Software]"  schreef in bericht
news:4ED11FAD-0024-4AC7-9D5B-51C1834DBB87@news.elevatesoft.com...

Ronald,

<< I am trying to create a customcontrol based on TControl. I have added
FBorder: TControlBorder in the private declaration. In the InitElement
procedure I call FBorder.InitElements. I get the error "There is no function
or procedure decalration that matches then InitElements() reference. >>

InitElements is declared as protected, which is the problem.

I'll make these protected methods public in the next build/release, but for
now you can do it yourself.  Just change the declaration for the
TControlBorder class to this:

  TControlBorder = class(TObject)
     private
        FControl: TControl;
        FVisible: Boolean=True;
        FTopLeft: THTMLElement;
        FLeft: THTMLElement;
        FBottomLeft: THTMLElement;
        FTop: THTMLElement;
        FBottom: THTMLElement;
        FTopRight: THTMLElement;
        FRight: THTMLElement;
        FBottomRight: THTMLElement;
        procedure SetVisible(Value: Boolean);
     public
        constructor Create(Control: TControl); virtual;
        property Visible: Boolean read FVisible write SetVisible;
        function CreateElements; virtual;
        procedure InitElements; virtual;
        procedure RemoveElements; virtual;
        procedure SetControlState; virtual;
        procedure HeightChanged; virtual;
        procedure WidthChanged; virtual;
        function TopHeight: Integer;
        function LeftWidth: Integer;
        function TotalHeight: Integer;
        function TotalWidth: Integer;
     end;

One point, though - do you really want a rectangular control border around a
control that is supposed to have rounded corners ?

--
Tim Young
Elevate Software
www.elevatesoft.com

Hi Tim,

Can you point me in the right direction? How should I use THTMLElement in my
custom control? A small example would be great, but I understand you do not
have the time for this now, but could you help me a bit?
Thanks.

Ronald

"Tim Young [Elevate Software]"  schreef in bericht
news:4ED11FAD-0024-4AC7-9D5B-51C1834DBB87@news.elevatesoft.com...

Ronald,

<< I am trying to create a customcontrol based on TControl. I have added
FBorder: TControlBorder in the private declaration. In the InitElement
procedure I call FBorder.InitElements. I get the error "There is no function
or procedure decalration that matches then InitElements() reference. >>

InitElements is declared as protected, which is the problem.

I'll make these protected methods public in the next build/release, but for
now you can do it yourself.  Just change the declaration for the
TControlBorder class to this:

  TControlBorder = class(TObject)
     private
        FControl: TControl;
        FVisible: Boolean=True;
        FTopLeft: THTMLElement;
        FLeft: THTMLElement;
        FBottomLeft: THTMLElement;
        FTop: THTMLElement;
        FBottom: THTMLElement;
        FTopRight: THTMLElement;
        FRight: THTMLElement;
        FBottomRight: THTMLElement;
        procedure SetVisible(Value: Boolean);
     public
        constructor Create(Control: TControl); virtual;
        property Visible: Boolean read FVisible write SetVisible;
        function CreateElements; virtual;
        procedure InitElements; virtual;
        procedure RemoveElements; virtual;
        procedure SetControlState; virtual;
        procedure HeightChanged; virtual;
        procedure WidthChanged; virtual;
        function TopHeight: Integer;
        function LeftWidth: Integer;
        function TotalHeight: Integer;
        function TotalWidth: Integer;
     end;

One point, though - do you really want a rectangular control border around a
control that is supposed to have rounded corners ?

--
Tim Young
Elevate Software
www.elevatesoft.com

Ronald,

<< Can you point me in the right direction? How should I use THTMLElement in
my custom control? A small example would be great, but I understand you do
not have the time for this now, but could you help me a bit? >>

Sure, no problem.  Just let me know which inline styles you were trying to
apply to the TLabel, and I'll show you how to implement them in a
TLabelControl descendant that overrides the InitElement to handle the
background as needed.

--
Tim Young
Elevate Software
www.elevatesoft.com

That would be great. I would like to implement borders with rounded corners.
Thanks a lot.

"Tim Young [Elevate Software]"  schreef in bericht
news:309E079E-CA17-48A0-AEA5-CED256EBADAC@news.elevatesoft.com...

Ronald,

<< Can you point me in the right direction? How should I use THTMLElement in
my custom control? A small example would be great, but I understand you do
not have the time for this now, but could you help me a bit? >>

Sure, no problem.  Just let me know which inline styles you were trying to
apply to the TLabel, and I'll show you how to implement them in a
TLabelControl descendant that overrides the InitElement to handle the
background as needed.

--
Tim Young
Elevate Software
www.elevatesoft.com

Ronald,

Here you go:

interface

uses WebDOM, WebCtrls;

  TRoundedLabel = class(TLabel)
     private
        FRadius: Integer=10;
        procedure SetRadius(Value: Integer);
     protected
        procedure InitElement; override;
     public
        property Radius: Integer read FRadius write SetRadius;
     end;

implementation

{ TRoundedLabel }

procedure TRoundedLabel.SetRadius(Value: Integer);
begin
  if (Value <> FRadius) then
     begin
     Base.style.borderRadius:=PixelsToStr(Value);
     FRadius:=Value;
     end;
end;

procedure TRoundedLabel.InitElement;
begin
  inherited InitElement;
  Base.style.borderRadius:=PixelsToStr(FRadius);
end;

procedure TTestForm.RoundedLabelButtonClick(Sender: TObject);
begin
  with TRoundedLabel.Create(Self) do
     begin
     Top:=500;
     Left:=450;
     Height:=100;
     Width:=100;
     Color:=clRed;
     end;
end;

You'll also need to add to the TCSS2Properties class in the WebDOM unit:

  external TCSS2Properties = class
     public
        { Properties }
        property backgroundColor: String read write;
        property backgroundImage: String read write;
        property backgroundPosition: String read write;
        property backgroundRepeat: String read write;
        property border: String read write;
        property borderRadius: String read write;  <<<<
        property borderTopLeftRadius: String read write;  <<<<
        property borderTopRightRadius: String read write;  <<<<
        property borderBottomLeftRadius: String read write;  <<<<
        property borderBottomRightRadius: String read write;  <<<<

Just a note - rounded border corners are only supported in IE9+, so you'll
see a normal rectangular border in IE8 or less.

--
Tim Young
Elevate Software
www.elevatesoft.com

Hi Tim,

It works great! Thanks a lot. I have a question though.
Somehow your compiler must translate the property borderRadius to the CSS
style: border-radius. How does the compiler "know" that it must compile it
to something like: border-Radius:10px. Do you use the name of the property
itself for that?

Thanks,
Ronald

"Tim Young [Elevate Software]"  schreef in bericht
news:0202E0E9-C46B-4B76-BD68-BF0A152296BE@news.elevatesoft.com...

Ronald,

Here you go:

interface

uses WebDOM, WebCtrls;

  TRoundedLabel = class(TLabel)
     private
        FRadius: Integer=10;
        procedure SetRadius(Value: Integer);
     protected
        procedure InitElement; override;
     public
        property Radius: Integer read FRadius write SetRadius;
     end;

implementation

{ TRoundedLabel }

procedure TRoundedLabel.SetRadius(Value: Integer);
begin
  if (Value <> FRadius) then
     begin
     Base.style.borderRadius:=PixelsToStr(Value);
     FRadius:=Value;
     end;
end;

procedure TRoundedLabel.InitElement;
begin
  inherited InitElement;
  Base.style.borderRadius:=PixelsToStr(FRadius);
end;

procedure TTestForm.RoundedLabelButtonClick(Sender: TObject);
begin
  with TRoundedLabel.Create(Self) do
     begin
     Top:=500;
     Left:=450;
     Height:=100;
     Width:=100;
     Color:=clRed;
     end;
end;

You'll also need to add to the TCSS2Properties class in the WebDOM unit:

  external TCSS2Properties = class
     public
        { Properties }
        property backgroundColor: String read write;
        property backgroundImage: String read write;
        property backgroundPosition: String read write;
        property backgroundRepeat: String read write;
        property border: String read write;
        property borderRadius: String read write;  <<<<
        property borderTopLeftRadius: String read write;  <<<<
        property borderTopRightRadius: String read write;  <<<<
        property borderBottomLeftRadius: String read write;  <<<<
        property borderBottomRightRadius: String read write;  <<<<

Just a note - rounded border corners are only supported in IE9+, so you'll
see a normal rectangular border in IE8 or less.

--
Tim Young
Elevate Software
www.elevatesoft.com

Ronald,

<< Somehow your compiler must translate the property borderRadius to the CSS
style: border-radius. How does the compiler "know" that it must compile it
to something like: border-Radius:10px. Do you use the name of the property
itself for that? >>

The browser DOM has a JavaScript interface, and this is represented by the
external declarations in the WebDOM unit.  These declarations tell the
compiler what the DOM looks like and which properties, methods, etc. are
available for use.

If you want a good book that covers these interfaces, this is the bible:

http://www.amazon.com/JavaScript-Definitive-Guide-Activate-Guides/dp/0596805527/ref=sr_1_1?ie=UTF8&qid=1336051291&sr=8-1

Tim Young
Elevate Software
www.elevatesoft.com