Jump to content


Photo

Custom draw in NxEdit


  • Please log in to reply
34 replies to this topic

#1 FourWhey

FourWhey
  • Members
  • 165 posts

Posted 15 September 2016 - 03:42 PM

What I'd like to do is add a rectangle inside the control to indicate to the user that the control input is required. Like so.

 

https://postimg.org/image/4mf4lcm47/

 

I tried to set the control DrawingOptions to doCustom, doCustomOnly, etc. trying each option, but none allow for custom draw as they never seem to break for OnPaint.

 

So I then attempted to implement this within NxEdit by adding a property called Required: Boolean and painting the rectangle in WMPaint when Required = True. This allowed me to draw it at design time after compiling the design time package, but it doesn't seem to work at run time.  Any tips on what I might be doing wrong?

 

Also, another quick question. What is the purpose of the Preview (ShowPreview)? It draws a small square inside the left of the control, but why, what would that be used for?

 

Thanks.



#2 Boki (Berg)

Boki (Berg)

    Boki (Berg)

  • Forum Admin
  • PipPipPipPipPip
  • 8,191 posts
  • Gender:Male

Posted 15 September 2016 - 07:40 PM

Hi,

 

This is one of the trickiest part of Win controls - Edit control. I think that something can be done with WM_PAINT call.

 

Preview is used with OnCustomPreviewDraw. Every Edit control have it, but color pickers and font name picker most benefit from it.

 

Not sure that if you can use for this situation v6 control. Since there you may place other controls in it? You probably want to make some kind of validator if I'm correct. If you want, I can try to write some starting code, just to see how to draw at least triangle.


boki@bergsoft.net | LinkedIn Profile
--
BergSoft Home Page: www.bergsoft.net
Users Section: users.bergsoft.net
Articles and Tutorials: help.bergsoft.net (Developers Network)
--
BergSoft Facebook page
--
Send us applications made with our components and we will submit them on: www.bergsoft.net/apps.htm. Link to this page will be also set on home page too.

#3 FourWhey

FourWhey
  • Members
  • 165 posts

Posted 15 September 2016 - 08:49 PM

> You probably want to make some kind of validator if I'm correct.

 

Yes, this is why.

 

> Not sure that if you can use for this situation v6 control. Since there you may place other controls in it?

 

Yes, I would have used the v6 of the control but I didn't see a way to custom paint it.  I can go back and add the property there.  It looked like I might be able to do it in v5 so I tried there, but ran into problems.

 

> If you want, I can try to write some starting code, just to see how to draw at least triangle.

 

Any help / guidance is appreciated.

This is how I drew the polygon, which was an issue for controls with a button in it, but I was just trying to get it working then fix that later.

with (Canvas) do
begin
  Brush.Color := clRed;
  FrameRect(Rect);
  Pen.Color := clRed;
  Pen.Width := 1;
  Brush.Style := bsSolid;
  Polygon([Point(Rect.Left, Rect.Bottom -1),
           Point(Rect.Left, Rect.Bottom -8),
           Point(Rect.Left +7, Rect.Bottom -1)]);
end;


#4 Boki (Berg)

Boki (Berg)

    Boki (Berg)

  • Forum Admin
  • PipPipPipPipPip
  • 8,191 posts
  • Gender:Male

Posted 15 September 2016 - 09:00 PM

Sometimes Edit control from Win32 re-draw itself so this is main source of problems. Didn't worked for some time on it, but will remind myself.

 

Maybe validation property is nice thing for everybody? Not sure if new Berlin have it, need to check.

 

In v6, you can add other control (example: red square TShape or something) by simply setting Parent and Align. If Valid, you can color this TShape to green.

 

One of ideas.


boki@bergsoft.net | LinkedIn Profile
--
BergSoft Home Page: www.bergsoft.net
Users Section: users.bergsoft.net
Articles and Tutorials: help.bergsoft.net (Developers Network)
--
BergSoft Facebook page
--
Send us applications made with our components and we will submit them on: www.bergsoft.net/apps.htm. Link to this page will be also set on home page too.

#5 FourWhey

FourWhey
  • Members
  • 165 posts

Posted 15 September 2016 - 10:19 PM

> In v6, you can add other control (example: red square TShape or something) by simply setting Parent and Align. If Valid, you can color this TShape to green.

 

Can you give an example of this?

 

Edit: Like, this?

var shp: TShape; pen: TPen;

pen := TPen.Create()
pen.Color := clRed;
pen.Width := 1;
pen.Style := psSolid;
shp := TShape.Create(Control);
shp.Parent := Control;
shp.Pen := pen;
shp.Shape := stRectangle;
shp.Width := Control.Width -4;
shp.Height := Control.Height -4;

This sort of works except that it causes focus issues when clicking (can't click have to use tab to enter) on the control when the shape is present. The shape also overlays the text in the control, which does show up but only when highlighted. Basically, it breaks things so it's not really usable.

 

One other thing. I noticed that NxMemo has no events compared to v5 control.  Still in the process of working on it?



#6 Boki (Berg)

Boki (Berg)

    Boki (Berg)

  • Forum Admin
  • PipPipPipPipPip
  • 8,191 posts
  • Gender:Male

Posted 15 September 2016 - 11:20 PM

Hi,

Set also Alignment of Shape to alLeft or alRight.

I think that I have added events in last working copy. I will do it again.
boki@bergsoft.net | LinkedIn Profile
--
BergSoft Home Page: www.bergsoft.net
Users Section: users.bergsoft.net
Articles and Tutorials: help.bergsoft.net (Developers Network)
--
BergSoft Facebook page
--
Send us applications made with our components and we will submit them on: www.bergsoft.net/apps.htm. Link to this page will be also set on home page too.

#7 FourWhey

FourWhey
  • Members
  • 165 posts

Posted 16 September 2016 - 12:05 AM

> I think that I have added events in last working copy. I will do it again.

 

I just installed nextsuite6_9-16.zip and the events are not there.

 

Thanks.



#8 FourWhey

FourWhey
  • Members
  • 165 posts

Posted 16 September 2016 - 12:09 AM

> Set also Alignment of Shape to alLeft or alRight.

 

It doesn't matter if I choose alLeft or alRight it does the same thing as before.

 

If there's a property, like Required that draws a shape like I showed earlier to indicate that, it would be awesome.  I think others might use something like this, since it would allow us to inform users that the control input is required, and to validate controls which are set required = true and make sure they have a valid value etc.

 

Edit:

 

I started to look at how you implemented the Preview. 

 

TNxCustomEdit6

ShowPreview: Boolean property

PreviewRect: TRect to GetPreviewRect function

 

Then painted in the descendant in PaintPreviewContent.

 

I'm thinking I might be able to do the same with the Required rect.

 

 

Thanks.



#9 Boki (Berg)

Boki (Berg)

    Boki (Berg)

  • Forum Admin
  • PipPipPipPipPip
  • 8,191 posts
  • Gender:Male

Posted 16 September 2016 - 12:16 AM

Hi,

 

I would like to do it on v6 if possible? Version 5 is quite old code written century ago, and I not handle well this code as I do with v6. 

 

Not sure why placing TShape won't work for you.

 

I will add Memo members now.


boki@bergsoft.net | LinkedIn Profile
--
BergSoft Home Page: www.bergsoft.net
Users Section: users.bergsoft.net
Articles and Tutorials: help.bergsoft.net (Developers Network)
--
BergSoft Facebook page
--
Send us applications made with our components and we will submit them on: www.bergsoft.net/apps.htm. Link to this page will be also set on home page too.

#10 Boki (Berg)

Boki (Berg)

    Boki (Berg)

  • Forum Admin
  • PipPipPipPipPip
  • 8,191 posts
  • Gender:Male

Posted 16 September 2016 - 12:18 AM

PS. Only issue is how we validate control?

 

Maybe to add event OnValidate? It's not always empty string invalid input.

 

Or to have property Validation: Invalid, Valid, Unchecked. But OnValidate is kinda more "automatic". Required (Validate: Boolean) property can fit there too.


boki@bergsoft.net | LinkedIn Profile
--
BergSoft Home Page: www.bergsoft.net
Users Section: users.bergsoft.net
Articles and Tutorials: help.bergsoft.net (Developers Network)
--
BergSoft Facebook page
--
Send us applications made with our components and we will submit them on: www.bergsoft.net/apps.htm. Link to this page will be also set on home page too.

#11 FourWhey

FourWhey
  • Members
  • 165 posts

Posted 16 September 2016 - 12:19 AM

> I would like to do it on v6 if possible?

 

Yes, I moved on to v6 as you suggested earlier. I just kept replying to the message here in the v5 forum though.



#12 FourWhey

FourWhey
  • Members
  • 165 posts

Posted 16 September 2016 - 12:21 AM

PS. Only issue is how we validate control?

 

Maybe to add event OnValidate? It's not always empty string invalid input.

 

Or to have property Validation: Invalid, Valid, Unchecked. But OnValidate is kinda more "automatic". Required (Validate: Boolean) property can fit there too.

 

OnValidate, if AutoValidate True. You define in the event what's valid for the control, and if not AutoValidate you can still manually call Validate.

 

I have some code I created to do such a thing I could share. How it would fit in with your code is a different question though.



#13 FourWhey

FourWhey
  • Members
  • 165 posts

Posted 16 September 2016 - 12:33 AM

This is how we handled it. AllowExit keeps the user from leaving the control if validation fails.

Type
TValidateEvent = procedure(Sender: TObject; var AllowExit: Boolean) of object;
private
  FAutoValidate: Boolean;
  FOnValidate: TValidateEvent;
published
  property OnValidate: TValidateEvent read FOnValidate write FOnValidate;
public 
  Validate: Boolean; reintroduce;
protected
  procedure ValidateAsDate;
  procedure ValidateAsDateTime;
  procedure ValidateAsInteger;
  procedure ValidateAsTime;
function TMyEditControl.Validate: Boolean;
var
  AllowExit: Boolean;
  Elapsed: Double;
  TStr: string;
begin
  Result := True;
  FInValidate := True;
  AllowExit := False;

  try
    case FDataType of
      dtInteger: ValidateAsInteger;
      dtDate: ValidateAsDate;
      dtDateTime: ValidateAsDateTime;      
      dtTime: ValidateAsTime;
    end;

    if Assigned(FOnValidate) then
    begin
      FOnValidate(Self, AllowExit);
      Result := AllowExit;
      if not Result then
        SetFocus;
    end;

    if Result then
      FChanged := False;
  finally
    FInValidate := False;
  end;
end;


#14 Boki (Berg)

Boki (Berg)

    Boki (Berg)

  • Forum Admin
  • PipPipPipPipPip
  • 8,191 posts
  • Gender:Male

Posted 16 September 2016 - 12:50 AM

Something similar I had in my mind.

 

Beside this, I was also thinking about:

 

TNxValidationTrigger = (veNone, veExit, veChange);

 

Now, also will be nice if we have "built-in" validator methods (like you have in example for numbers, phone), maybe e-mail etc.

 

I will need to see how to handle this.


boki@bergsoft.net | LinkedIn Profile
--
BergSoft Home Page: www.bergsoft.net
Users Section: users.bergsoft.net
Articles and Tutorials: help.bergsoft.net (Developers Network)
--
BergSoft Facebook page
--
Send us applications made with our components and we will submit them on: www.bergsoft.net/apps.htm. Link to this page will be also set on home page too.

#15 FourWhey

FourWhey
  • Members
  • 165 posts

Posted 16 September 2016 - 02:13 AM

Something similar I had in my mind.

 

Beside this, I was also thinking about:

TNxValidationTrigger = (veNone, veExit, veChange);

Now, also will be nice if we have "built-in" validator methods (like you have in example for numbers, phone), maybe e-mail etc.

 

I will need to see how to handle this.

 

We do phone number and other number using mask format but the code around that is not generic enough so I left it out. It's useful though.



#16 Boki (Berg)

Boki (Berg)

    Boki (Berg)

  • Forum Admin
  • PipPipPipPipPip
  • 8,191 posts
  • Gender:Male

Posted 16 September 2016 - 02:30 AM

I will first try to do some drawing inside Edit, and then gradually implement validation. It will be results in next couple of days.


boki@bergsoft.net | LinkedIn Profile
--
BergSoft Home Page: www.bergsoft.net
Users Section: users.bergsoft.net
Articles and Tutorials: help.bergsoft.net (Developers Network)
--
BergSoft Facebook page
--
Send us applications made with our components and we will submit them on: www.bergsoft.net/apps.htm. Link to this page will be also set on home page too.

#17 FourWhey

FourWhey
  • Members
  • 165 posts

Posted 16 September 2016 - 02:49 AM

I will first try to do some drawing inside Edit, and then gradually implement validation. It will be results in next couple of days.

 

Awesome, thanks.



#18 Boki (Berg)

Boki (Berg)

    Boki (Berg)

  • Forum Admin
  • PipPipPipPipPip
  • 8,191 posts
  • Gender:Male

Posted 16 September 2016 - 03:29 AM

I have added something like:
TNxValidationTriggers = set of (vtLeave, vtTyping, vtTextChanged);
I'm trying to inspect vtTyping in OnKeyDown, but it's gives me wrong Text (one before update). Do you maybe know how to check new (potential) text inside OnKeyDown?

OnKeyUp occur only after you type (even arrrrrrrrrray of chars) and then at the end.
boki@bergsoft.net | LinkedIn Profile
--
BergSoft Home Page: www.bergsoft.net
Users Section: users.bergsoft.net
Articles and Tutorials: help.bergsoft.net (Developers Network)
--
BergSoft Facebook page
--
Send us applications made with our components and we will submit them on: www.bergsoft.net/apps.htm. Link to this page will be also set on home page too.

#19 FourWhey

FourWhey
  • Members
  • 165 posts

Posted 16 September 2016 - 06:14 AM

I have added something like:

TNxValidationTriggers = set of (vtLeave, vtTyping, vtTextChanged);
I'm trying to inspect vtTyping in OnKeyDown, but it's gives me wrong Text (one before update). Do you maybe know how to check new (potential) text inside OnKeyDown?

OnKeyUp occur only after you type (even arrrrrrrrrray of chars) and then at the end.

 

 

Hmm.  Usually OnKeyDown works for most. Maybe you can check CM_ChildKey or CN_KeyDown?

 

http://docs.embarcad...M_CHILDKEY.html

 

http://edn.embarcade...ndlingCNKEYDOWN



#20 Boki (Berg)

Boki (Berg)

    Boki (Berg)

  • Forum Admin
  • PipPipPipPipPip
  • 8,191 posts
  • Gender:Male

Posted 16 September 2016 - 04:18 PM

I will try it. I'm actually inside class using protected virtual KeyDown. This method then call OnKeyDown. I will digging deeper.
boki@bergsoft.net | LinkedIn Profile
--
BergSoft Home Page: www.bergsoft.net
Users Section: users.bergsoft.net
Articles and Tutorials: help.bergsoft.net (Developers Network)
--
BergSoft Facebook page
--
Send us applications made with our components and we will submit them on: www.bergsoft.net/apps.htm. Link to this page will be also set on home page too.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users