Lazarus

Programming => LCL => Topic started by: wittbo on October 28, 2020, 01:15:59 pm

Title: [SOLVED] Edit component with Clear icon available?
Post by: wittbo on October 28, 2020, 01:15:59 pm
I often see software or internet pages containing edit fields, which contain a clickable "Clear" icon, that can be used to clear an edit field with a single mouse click (s.b.). Does anyone know, if there is a similiar component available for Lazarus LCL?
Title: Re: Edit component with Clear icon available?
Post by: wp on October 28, 2020, 01:38:11 pm
Use the TEditButton on the Misc palette. It contains a button next to the edit (it is not embedded in the edit, though), you can assign a Glyph or an image from an attached imagelist, and you can write the handler of the OnButtonClick event to erase the edit.
Title: Re: Edit component with Clear icon available?
Post by: Blaazen on October 28, 2020, 02:40:42 pm
Such component is not impossible. I did a quick test - see screenshot. The background is paintbox:
Code: Pascal  [Select][+][-]
  1. procedure TForm1.PaintBox1Paint(Sender: TObject);
  2. var aRect: TRect;
  3.     aDets: TThemedElementDetails;
  4. begin
  5.   with TPaintBox(Sender) do
  6.     begin
  7.       aRect:=Rect(2, 2, 198, 18);
  8.       Canvas.Brush.Color:=clLime;
  9.       Canvas.FillRect(aRect);
  10.       aRect:=Rect(0, 0, 200, 20);
  11.       aDets:=ThemeServices.GetElementDetails(teEditTextFocused);
  12.       ThemeServices.DrawElement(Canvas.Handle, aDets, aRect)
  13.     end;
  14. end;
and normal TEdit with border bsNone is placed over it. It would be possible to join it into one component.
Title: Re: Edit component with Clear icon available?
Post by: jamie on October 28, 2020, 09:50:57 pm
I don't know how well supporting the widget is for the mac but  you could place a Tedit on a TPanel and set the border for the TEDIT to none, then on the panel you set the border and place an icon using a timage to the right.
Title: Re: Edit component with Clear icon available?
Post by: Blaazen on October 28, 2020, 10:15:10 pm
Unfortunately, Themes paints EditText frame in Qt4 only. GTK2 and Qt5 don't paint anything. My idea of themed TEdit would be a component with a very limited usage.
Title: Re: Edit component with Clear icon available?
Post by: wittbo on October 29, 2020, 11:26:40 am
Thanks to all for your hints.
@Blaazen:  Since themes are limited to QT4, I discardrd this solution. But, using themes and themesservices was a complete new programming ascpect for me; i never used it before. Very interesting.
@WP: TEditButton works as expected on the Mac, no problems. Simple solution, easy to use.
@jamie: Very good idea, looks nice and also easy to implement. This could become my way.
Title: Re: Edit component with Clear icon available?
Post by: JuhaManninen on October 29, 2020, 12:57:17 pm
@WP: TEditButton works as expected on the Mac, no problems. Simple solution, easy to use.
+1
It is used in the FilterEdit controls around Lazarus IDE exactly for clearing the edit field. The icon there is a funnel with red 'x', maybe not useful in your case.
TinyPortal © 2005-2018