1

I'm looking for a way to insert emoticons/smileys/any bitmap in a text field (LabelField, EditField, whatever). From what I've researched so far, there is no direct way to do this, so I'm stuck with trying to simulate this behavior.

I was thinking of using a normal text field and instead of smileys to insert blank spaces and then place some BitmapFields over the text field where the smileys should be. The problem is that I have no reliable/quick way of finding a character's position on screen (x,y).

Can you give me some ideas?

Can you think of other approaches to this problem?

I'm sure a lot of people encountered this kind of problem at one time or another. I hope there is someone who managed to find a solution. I'm desperate enough to accept any solution, no matter how crazy/complex/difficult.

Also, I would like to use this in SDK 5.0 and up, but I will settle for only 6.0.

Corneliu Dascălu
  • 3,900
  • 1
  • 28
  • 38

1 Answers1

3

What you might be able to do is create a custom Manager that is a container for EditFields and BitmapFields. When the user clicks in the initial EditField that is inside of your Manager and begins typing, you let them type until they want an emoticon. When they select it you create a BitmapField right after the EditField and then place a new EditField to the right of the BitmapField. You'll have to keep track of things like when the user hits backspace and empties an EditField, it should be removed, and then they are selecting the BitmapField, and a subsequent backspace would delete the BitmapField and put focus on the previous EditField.

You will have to also create your own EditField that you can control the size of, and BitmapField that allows for backspace to delete it.

As far as I can think ahead, you shouldn't have any problem using this for 5.0

Edit for comments:

You'll have to be implementing your own sublayout() of your Manager in any approach you take, so you know positions because you're the one who put them there. If you want to want to do multi-line (my approach was for single-line), you can do one of three things:

1.) Just have new EditFields for each line and do the linking the same way I talked about where backspace drops you to the previous Field, in this case the last line. You have to keep measurements of how big the field is based off of the text, and see if that will move it to the next line. If it does just adjust where the EditFields are positioned.

2.) You can do your image placement in the multi-line field by implementing your own EditField that expands height, in which case you'll know where the text is and what lines you are on. Drawing the Bitmap would be a matter of calculating (what line number you are) * (font height) and getAdvance(text_up_to_bitmap).

3.) Implement your own EditField where you have a focusable Manager that you manually do all of the drawing. You can parse a String that you save from capturing key strokes and maybe have a flag where an emoticon should be. Draw the text before it, draw the emoticon, then continue drawing the text. The difficulty with this is you will have to do things like determining where the cursor should be, bringing up the virtual keyboard, and handling some of the other tasks that the EditField does for you.

jprofitt
  • 10,874
  • 4
  • 36
  • 46
  • I have already considered this approach. There are two big problems, though: – Corneliu Dascălu May 30 '11 at 14:32
  • 1. EditFields are, layout-wise, rectangles. So when I have an editfield of 2 or more lines, and I insert an emoticon in the middle of the line, the next EditField should start after the emoticon, on the last line of the previous EditField, and its X position would be just after the emoticon (somewhere in the middle of the screen). Even assuming that there won't be any problems with the overlapping EditField lines, the second EditField would draw the text with the lines starting from the middle of the screen. – Corneliu Dascălu May 30 '11 at 14:37
  • 2. I don't see any way to find exactly where on the screen I should position the emoticon. I would need a way to calculate the position of the last character from the EditField. Font.getHeight() and getAdvance() aren't of much help, because I can't get the lines of the EditField (where does a line end?). Depending on the width of the EditField, the text can be reflowed very differently. – Corneliu Dascălu May 30 '11 at 14:40
  • All you said is almost exactly what I have been thinking about :) So I guess I'm not going to have an epiphany and find an easy solution... I'll mark the question as solved because I don't think I'll get a better answer, but if you have any other idea, please share. Thank you for your input. – Corneliu Dascălu May 30 '11 at 18:22