Android ImageSpans in Codename One TextFields

Question

I am porting my Android app to iOS and I am using Codename One for that.

In my app an EditText can contain icons mixed with text. It is accomplished with instructions like these:

MyImageSpan iconSpan=new MyImageSpan(activity, R.drawable.icon);

editText.getText().insert(caretPosition,CHAR);

editText.getText().setSpan(iconSpan,caretPosition,caretPosition+1,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

then in other parts, spans have to be detected, if present, and it is performed like this:

Editable editable = editText.getText();
for (int i = 0; i < editable.length(); i = next) {

        // find the next span transition
        next = editable.nextSpanTransition(i, editable.length(), MyImageSpan.class);
        // get all spans in this range

        MImageSpan[] tempSpans = editable.getSpans(i, next, MyImageSpan.class);
        ...
        ...
//In my app that becomes really complex            
        ...
        ...
        ...
        ...

}

I tried to use this online tool:

http://fontello.com/

to manage icons like font glyphs, as it seems to be adviced by Codename One documentation.

In fact I do not understand if it is possible to have spans with different fonts in an TextField in Codename One, and I do not know if I could find and manage them inside the TextField.

But the most important thing is that the online tool to create fonts out of svg files did not work for me because some icons are reverted, others are broken or confused, others are tiny, depending on the saving format (eventually I saved in pure SVG format to avoid issues but it's the same).

What I am asking is how to handle the spans in the TextField in Codename One. It has not to be the same "way" but the result has to be the same.

Answer 1

This won't work. Rich text edit is something that's just too different between platforms and isn't universally available. Since the edit component is implemented using native widgets it's very hard to consistently abstract something like this and effectively impossible.

However, web tools solved that problem already and include some cross platform rich edit tools that work. You can just use one of those tools and embed a BrowserComponent in your app. Then perform the rich editing within the browser component.

Back in the day we did it with CK editor , but this library is pretty out of date by now so I'm not sure how well it works. It should be relatively easy to create something like this though.