Button within Textfield

  1. 2 years ago

    Martin T

    2 Aug 2015 Pre-Release Testers

    Hallo everyone,

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

    Sample

    How to realize this?

    Thank you

  2. Michel B

    2 Aug 2015 Pre-Release Testers, Xojo Pro
    Edited 2 years ago

    @MartinTrippensee Hallo everyone,

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

    Sample

    How to realize this?

    Thank you

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

  3. Dave S

    2 Aug 2015 San Diego, California USA

    cheat.... you don't actually want the button INSIDE the text area, you want it to !@#$% 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

  4. Martin T

    2 Aug 2015 Pre-Release Testers
    Edited 2 years ago

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

    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!

  5. Dave S

    2 Aug 2015 San Diego, California USA

    @MartinTrippensee 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

  6. Michel B

    2 Aug 2015 Pre-Release Testers, Xojo Pro

    @MartinTrippensee 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!

    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.

    -image-

    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.

  7. Emile S

    3 Aug 2015 Europe (France, Strasbourg)

    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 ?

  8. Michel B

    3 Aug 2015 Pre-Release Testers, Xojo Pro

    @Emile S 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 ?

    Its called Emoji ;)

  9. Emile S

    3 Aug 2015 Europe (France, Strasbourg)
    Edited 2 years ago

    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

  10. Michel B

    3 Aug 2015 Pre-Release Testers, Xojo Pro

    @Emile S 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

    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.

  11. 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.

    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.

  12. Emile S

    3 Aug 2015 Europe (France, Strasbourg)

    @Carlo R 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…

  13. Michel B

    3 Aug 2015 Pre-Release Testers, Xojo Pro
    Edited 2 years ago

    @Carlo R 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.

    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.

  14. 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...

    Exactly.

  15. 2 months ago

    Martin T

    Sep 12 Pre-Release Testers

    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 K '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.

  16. Markus W

    Sep 12 Pre-Release Testers #JeSuisHuman Europe (Germany)...

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

  17. Martin T

    Sep 12 Pre-Release Testers

    @Markus W 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.

  18. Markus W

    Sep 12 Pre-Release Testers #JeSuisHuman Europe (Germany)...

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

  19. Greg O

    Sep 13 Xojo Inc Somewhere near Raleigh, NC

    @Markus W 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.

  20. Martin T

    Sep 13 Pre-Release Testers

    @Greg OLone 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.

  21. Newer ›

or Sign Up to reply!