ttk creating search bar with icon inside entry widget

[welle...@googlemail.com]

Using tsk widgets on modern macOS, I am trying to create a search widget that resembles typical macOS search widgets such as in 1). The best I can get, however, is shown in 2). Is there any way to have an icon (created in my example as a ttkLabel+binding) INSIDE the entry field, as in 1)?

1) What I want: https://ibb.co/Fw3p3m2
2) What I got: https://ibb.co/ggxqdnr

[welle...@googlemail.com]

Okay. I simply set Labels with icons (no ttkLabels in order to control the background) inside the ttkEntry. I put the labels on the rights, since putting it on the left would overlap with the cursor (I could not set the cursor to be set on the right of the icon). 90% of what I wanted. The the widget gets focus, the whole entry field gets highlighted, which is quite pleasant to see.

The result is here: https://ibb.co/0c498zZ

[Alexandru]

Am Montag, 13. Januar 2020 12:45:38 UTC+1 schrieb welle...@googlemail.com:
> Okay. I simply set Labels with icons (no ttkLabels in order to control the background) inside the ttkEntry. I put the labels on the rights, since putting it on the left would overlap with the cursor (I could not set the cursor to be set on the right of the icon). 90% of what I wanted. The the widget gets focus, the whole entry field gets highlighted, which is quite pleasant to see.
>
> The result is here: https://ibb.co/0c498zZ

Cool, can you share your code?

[welle...@googlemail.com]

I write my UI in Perl with the wrapper Tcl::pTk, so I guess my code is not useful in here, but here it is anyway. It is easy to translate it back to Tcl:

use Tcl::pTk;

my $mw = MainWindow;
my $int = $mw->interp;

my $PngSearch = $mw->Photo( -file => "files/search.png");
my $PngCancel = $mw->Photo( -file => "files/cancel.png");

my $Frame = $mw->ttkFrame()->pack(-side => 'top', -expand=>'1', -fill => 'x');

my $QueryInput="Search";
my $entry = $Frame->ttkEntry(
-textvariable=>\$QueryInput,
-foreground => 'gray85',
)->pack(-side => "top", -padx=>10, -expand => '1', -fill => 'both', -ipadx=>100);

my $buttonLeft = $entry->Label(
-image => $PngCancel,
-background=> "white",
-borderwidth => '0',
)->pack(-side => "right", -anchor => "w", -padx => 10, -pady => 10, -expand=>0, -fill => 'none');

my $button = $entry->Label(
-image => $PngSearch,
-background=> "white",
-borderwidth => '0',
)->pack(-side => "right", -anchor => "w", -padx => 0, -pady => 10, -expand=>0, -fill => 'none');

#bindings
$buttonLeft->bind("<Button-1>", sub {
cancel();
});

$button->bind("<Button-1>", sub {
search();
});

#deleteting word "search" when widget gets focus
$entry->bind("<FocusIn>", sub {
$QueryInput="";
$entry->configure(-foreground => 'black');
});

#resetting word "search" when widget looses focus
$entry->bind("<FocusOut>", sub {
$QueryInput="Search";
$entry->configure(-foreground => 'gray85');
});

$int->MainLoop;


sub search{
print "Performing search";
}

sub cancel{
print "Deleting search entry";
$QueryInput="";
}

[Schelte]

Here's one I did years ago: https://wiki.tcl-lang.org/page/
Mac+style+search+entry+widget

Adjust as necessary for whatever changed over the years.


Schelte.

[Alexandru]

The linke above is broken.

[Alexandru]

https://wiki.tcl-lang.org/page/Mac+style+search+entry+widget

[Francois Vogel]

> The linke above is broken.

It's not. It's just split on two lines.
Remedy: join the lines.

F.

[APE]

Tcl/Tk corresponding code :

image create photo PngSearch -file files/search.png
image create photo PngCancel -file files/cancel.png

set Frame [ttk::frame .frame]
pack $Frame -side top -expand 1 -fill x

set QueryInput "Search"
set Sentry [ttk::entry .frame.sentry -textvariable QueryInput -foreground gray85]
pack $Sentry -side top -padx 10 -expand 1 -fill both -ipadx 100

set buttonLeft [label .frame.sentry.bleft -image PngCancel -background white -borderwidth 0]
pack $buttonLeft -side right -anchor w -padx 10 -pady 10 -expand 0 -fill none
set button [label .frame.sentry.b -image PngSearch -background white -borderwidth 0]
pack $button -side right -anchor w -padx 0 -pady 10 -expand 0 -fill none

#bindings
bind $buttonLeft <Button-1> {cancel}
bind $button <Button-1> {search}

#deleteting word "search" when widget gets focus

bind $Sentry <FocusIn> {
set ::QueryInput ""
$Sentry configure -foreground black

}

#resetting word "search" when widget looses focus

bind $Sentry <FocusOut> {
set ::QueryInput "Search"
$Sentry configure -foreground gray85
}

proc search {} {
puts "Performing search"
}

proc cancel {} {
puts "Deleting search entry"
set ::QueryInput ""
}

Just to see if it was easy to translate back to Tcl

[Alexandru]

Thanks!
Now I could test your code and I see only one issue: The searched text cen get behind the icons.
I also tested the code from Schelte and it doesn't have that issue.

Regards
Alexandru

[Schelte]

On Thu, 16 Jan 2020 20:28:41 -0800, APE wrote:
> Just to see if it was easy to translate back to Tcl

What do you mean, "translate"? The code was already Tcl.


Schelte.

[Alexandru]

It referres to the code posted originally. It's Perl.

[Schelte]

Ah, thanks. That would have been a lot clearer if the remark had been
posted as a followup of the message it pertained to and relevant context
had been quoted.


Schelte.