Rounded textfield

General
1

Hello guys… It is possible to have a Rounded Text-field… I would like to use a rounded text-field area because I think looks better for my project. Or I need something similar to input text on my project…

Thanks in advance…

2

For OS X Cocoa, yes… Add the following code to the open event of the TextField (not textArea) to make it rounded.

declare sub setBezelStyle lib "Cocoa" selector "setBezelStyle:" ( handle as integer, value as integer ) setBezelStyle( me.handle, 1 )

3

Works perfectly Sam thank you!

4

Sam, you are the best. I was precisely exploring chat bubbles, this is getting me closer :slight_smile:

5

Excellent… I tested and it worked. Any possibility for Windows?

I am developing on Mac, but I think the program will be for windows… Thanks

Also I forgot. I will also need rounded TextArea.

I want my project my project to look like a tablet. Also when possible to migrate to ios I would like every window on any platform of my project looks the same everywhere… Thanks

6

You could always draw the background of your “bubble” with a canvas, then place your textfield/area control on top and remove the border. Probably the best all-around solution, IMHO.

7

I am new on all this but I will try…

8

Glad to have helped, as for Windows I’m afraid I can’t help there…

In which case, Anthony’s solution would be what I go for. I don’t know if the Windows equivalent TextField has an api for making it round. The reason it works on OS X, is that Apple have that option.

I’ve not seen this option in the NSTextView docs, but maybe someone else has, alternatively and if you want Windows, you may want to consider faking it by creating a container control with a canvas and a TextView on top.

You may find it harder than you think and it will make the application look inconsistent on some platforms. If you really want it be consistent across all platforms then using a containerControl/Canvas/TextField might be the better option, as for iOS, we don’t know yet…

9

Sounds good. How do you create the text over the canvas at runtime ?

10

I would use a container control, and either use the paint event of the container control or a canvas to draw the rounded ‘well’, then simply add a textfield on top.

There is a containerControl function embed something or rather, don’t have Xojo running, that will allow you to dynamically create a containerControl and add it to the interface.

11

I created a re-usable control which is cross-platform just for that :slight_smile:

It’s part of the new release of the Xojo Developer’s Library 4.0 to be released in the following week (updated for Xojo)

http://www.xojodevspot.com/demos/XDSRoundedTextField.xojo_binary_project

12

Sorry If I didn’t say correctly that I need a rounded corner TextField… The solution that Sam Rowlands offers is excellent. But I need it cross platform. And also I need rounded corner TextArea…

Thanks

13

I shall read and experiment, then. Thanks :slight_smile:

14

how many of these can we used?? i know we can use 1

const NSRoundedBezelStyle           = 1
  const NSRegularSquareBezelStyle     = 2
  const NSThickSquareBezelStyle       = 3
  const NSThickerSquareBezelStyle     = 4
  const NSDisclosureBezelStyle        = 5
  const NSShadowlessSquareBezelStyle  = 6
  const NSCircularBezelStyle          = 7
  const NSTexturedSquareBezelStyle    = 8
  const NSHelpButtonBezelStyle        = 9
  const NSSmallSquareBezelStyle       = 10
  const NSTexturedRoundedBezelStyle   = 11
  const NSRoundRectBezelStyle         = 12
  const NSRecessedBezelStyle          = 13
  const NSRoundedDisclosureBezelStyle = 14
  const NSInlineBezelStyle = 15
  const NSSmallIconButtonBezelStyle  = 2
15

Zero…

A NSTextFieldCell uses a NSTextFieldBezelStyle (not a NSBezelStyle).
NSTextFieldSquareBezel = 0,
NSTextFieldRoundedBezel = 1

https://developer.apple.com/library/mac/documentation/Cocoa/Reference/ApplicationKit/Classes/NSTextFieldCell_Class/Reference/Reference.html#//apple_ref/c/tdef/NSTextFieldBezelStyle

16

those const are to use with setBezelStyle

declare sub setBezelStyle lib "Cocoa" selector "setBezelStyle:" ( handle as integer, value as integer )
setBezelStyle( me.handle, 1 )
17

i just check the apple website and you are right… for textfield just 2.

18

How would you do a round text field with a different background color? I’ve tried this, but it doesn’t work.

[code] declare sub setBackgroundColor lib “Cocoa” selector “setBackgroundColor:” ( handle as integer, color as ptr )
declare sub setDrawsBackground lib “Cocoa” selector “setDrawsBackground:” ( handle as integer, value as Boolean )
declare sub setBezelStyle lib “Cocoa” selector “setBezelStyle:” ( handle as integer, value as integer )
declare function NSClassFromString lib “Cocoa” (classname as CFStringRef) as ptr
declare function grayColor lib “Cocoa” selector “grayColor” (obj as ptr) as ptr

dim gray As ptr=grayColor(NSClassFromString(“NSColor”))

setDrawsBackground( me.handle, true)
setBackgroundColor( me.handle, gray)
setBezelStyle( me.handle, 1 )[/code]

19

I’m trying to do just this but my textfield is displaying under the canvas - how can I change which control is front or back when they overlap?

20

Here is an example:
http://youtu.be/Q7dKqL5lfXo