Button within Textfield

Hallo everyone,

Will there be an existing Solution to get a Button within a Textfield like this:

Sample

How to realize this?

Thank you

[quote=204104:@Martin Trippensee]Hallo everyone,

Will there be an existing Solution to get a Button within a Textfield like this:

Sample

How to realize this?

Thank you[/quote]

Place a canvas containing the icon over the right side of the text field and use its MouseDown event as Action.

cheat… you don’t actually want the button INSIDE the text area, you want it to butt right up against it.
create a canvas or container control, insert the textarea and button, adjust the borders etc to get the look you want

If you do it with a container control, you can reuse it over again, quite easily

I was thinking about this, but the that’s Not what i want. Should Look and work like the x-Button in a NSSearchField. If the Length of a String ist bigger as the Textfield, the String should ne “cutted” before the Button. Should Look native!

which is exactly why I said you DON’T want the button OVER the text field… NSSearchField (internally) is made up almost exactly this way … the big difference is that it is encapulated as a single control at a bit lower level… so you have to build your own

Unless there is a declare for such a thing and I am sure a gentle soul will very soon post, I merely suggested one way.

However, the icon does not have to cover the TextField. Here is what I did to obtain what I am posting here :

  • Place the icon over the right hand side of the TextField. Make sure the canvas is not child of the TextField so it does not disappear.
  • Run the project
  • Capture the right hand side of the TextField in a picture file with Shift-Cmd-4
  • Place the newly obtained picture in the Canvas, adjust so it just covers the one pixel grey border on the right, adjust vertically so top and bottom border are continuous.

Now the TextField looks native, as text scrolls away from the icon instead of going under.

The catch is that focus ring has to be switched off, otherwise it would look odd. It can be simulated with a canvas placed under the ensemble that will show the focus ring when needed.

As Dave suggested, using a ContainerControl will enable reusing that control.

I’ve done that - years ago, but without the icon - using “style” in the text and adding code to react:

a. Style: blue, underlined

b. code: if the Mouse is over the “link”, the MouseCursor change to the “click finger” (I forgot its real name), and when (if) the user click, the code execute the “link”…
That code check if the text below the Mouse (in MouseMove probably) have the a styles.
What I forgot is how I stored the link internally (it may be the text or image file without the extension ?).

Ask if this is unclear.

Nota: I do not searched, but what I called “icon” may be a special character that we can find in some iconic Font ? (like Dingbats or else)…

Oh, we have a specialist in Fonts: Michel ?

[quote=204197:@Emile Schwarz]I’ve done that - years ago, but without the icon - using “style” in the text and adding code to react:

a. Style: blue, underlined

b. code: if the Mouse is over the “link”, the MouseCursor change to the “click finger” (I forgot its real name), and when (if) the user click, the code execute the “link”…
That code check if the text below the Mouse (in MouseMove probably) have the a styles.
What I forgot is how I stored the link internally (it may be the text or image file without the extension ?).

Ask if this is unclear.

Nota: I do not searched, but what I called “icon” may be a special character that we can find in some iconic Font ? (like Dingbats or else)…

Oh, we have a specialist in Fonts: Michel ?[/quote]

Its called Emoji :wink:

I do not found that character in OS X Yosemite 10.10.5 but I found Emoji Apple Color.

A simple search on internet returned me that its name seems to be “icon-external-link“. we can see some of them there:

external-link

[quote=204206:@Emile Schwarz]I do not found that character in OS X Yosemite 10.10.5 but I found Emoji Apple Color.

A simple search on internet returned me that its name seems to be “icon-external-link“. we can see some of them there:

external-link[/quote]

I did not realize you were talking about a particular glyph. The external link thing is not part of any Mac or Windows system font. Fortunately, the FontAwesome TTF font is freely distributable and one can download it from the site you linked to.

[quote]Place the icon over the right hand side of the TextField. Make sure the canvas is not child of the TextField so it does not disappear.
Run the project
Capture the right hand side of the TextField in a picture file with Shift-Cmd-4
Place the newly obtained picture in the Canvas, adjust so it just covers the one pixel grey border on the right, adjust vertically so top and bottom border are continuous.
Now the TextField looks native, as text scrolls away from the icon instead of going under.[/quote]

I was thinking of using a similar technique to add a lens.icon (an emoji as Michel suggested) to a textfield. The only reason that kept me from doing this is that tomorrow Apple or Windows may change the way the textfield looks like, especially when focusRing is enabled.

That is why I dislike workarounds…

The lens icon on the left as character is easy to add as Cue Text. It will work whatever the look of the TextField, and it looks real good.

Your point is valid : the TextField may change look.

Martin specifically wanted the icon inside the TextField, on the right, and text should not go under. The only way to do that I know of without declares is what I suggested. You may not have noticed my note about the focus ring needing to be carried out by a canvas under the assembly. The native one is unusable with that technique.

That said, if it where for my own program, I would simply place a 22x22 pixels BevelButton with the icon inside set right against the TextField. Or simply a canvas showing the icon next to the TextField. Keep it simple…

For not so simple possibilities, anything can be done using a canvas. It simply requires a tremendous amount of work.

If that was easy via declare, I suspect someone would have already posted something.

Exactly.

Hi,

I started to create my own Textfield to implement a Picture-Button insight based on TextInputCanvas. First of all, I would like to copy the Xojo native TextField. Now I am at the point, if the Text > TextField.Width, the Caret and the Text should move within the TextField. I don’t know how to set the position of the Caret. Please look on my Project, it’s based on @Bob Keeney 's TextInputCanvas Sample-Project. I think the most important Event-Handlers an Methods for drawing the Text correct will be the Paint-Event and the InsertText-Event.

Here’s a short Screencapture of what I mean.

I hope someone can help or has a ready CustomTextField based on the TextInputCanvas-Plugin!

Best regards.

Why not use a two colum listbox with borders on the outside only? Draw the icon in the second column.

Thanks, that’s a nice alternative. I think it will look good on macOS and Windows. In View of Linux I am not sure, because GTK+3 TextFields has rounded corners…
On the other side, would be nice, to get a CustomTextField work like a TextField.

On Linux disable borders, draw a rounded rectangle in the CellBackground

Unfortunately Linux really doesn’t have a white background on a textfield any more either. GTK3 defines a gradient which cannot be easily overridden, but would not be easy to replicate because it’s different on every theme.

You are right. The Listbox Variant looks pretty beautiful on macOS, but it’s nothing for Linux.
Maybe someone has a working sample with TextInputCanvas.