CODEWITHSUNDEEP
javahtmlcssgwt
user2104560
user2104560

Reputation:

How set css style to GWT TextBox text?

I'm trying to implement my own TextBox.

My goal is to add the following fucntion: when user types text, first letter should be styled in a special way. I want to do these actions:

  1. Create css styling file
  2. Get TextBox's text property as html.
  3. Set text something like <span class="first_letter_style">S</span>ome text

I tried to perform textBox.setText("some HTML") and the result was predictable - textBox simply treated html as a text=)

Also i tried textBox.getElement.getInnerHTML(), in order to copy it and slightly change with setInnerHTML() but I saw in debug mode JavaScriptObject doesn't have getInnerHTML() method. Strange message - I expected Element not JavaScriptObject.

My question is - how set text to GWT TextBox and force it to treat it as HTML not as simple text. I mean html tags should make sense.

Other idea is creating ContentPanel with InlineHTML and simply use span tag, but this approach has a great disadvantage - I have no idea how make DIV+Label behave as TextBox - cursor showing, highlight selection, selection on double click and other things.

UPDATE: Actually I need to span not only first element but each third letter. I found something interesting in other stackoverflow answer to similar question but I don't understand it. Also i shouldn't use JQuery and I can't understand what does answerer mean by

"create other container and wrap each letter with span"

I think it's not good idea to create other container - I should perform changes inside textBox not in other widget.

Upvotes: 3

Views: 2762

Answers (1)

klarki
klarki

Reputation: 915

I don't think it can be done in a simple way of just manipulating a TextBox.

One way you could get it to work is by creating a TextBox and hiding its output, while simultaneously copying the text from it, modifying it to add the things you want, and displaying it in a div element.

You will probably run into a few issues, since some functionality will be lost, like selecting a fragment of text and deleting it. You may be able to reproduce it by handling appropriate events.

I created a sample widget like this, feel free to try it:

public class HTMLBox extends FlowPanel{

    //this will be the text shown
    private HTML html = new HTML();

    //this will be our text box with the text hidden
    private TextBox textBox = new TextBox();

    private KeyUpHandler handler = new KeyUpHandler() {

        @Override
        public void onKeyUp(KeyUpEvent event) {
            String textToShow = decorateHtml(textBox.getText()); 
            html.setHTML(textToShow);
        }
    };

    private ClickHandler ch = new ClickHandler() {

        @Override
        public void onClick(ClickEvent event) {
            //makes clicking on the "html" element set focus on textBox, so that user can type
            textBox.getElement().focus();       
        }
    };

    //add any tags to the text
    //like make every third letter bold
    public String decorateHtml(String html) {
        StringBuilder sb = new StringBuilder();
        for (int i = 0; i < html.length(); i++) {
            if (i%3 == 0) {
                sb.append("<span style='font-weight:bold;'>" + html.charAt(i) + "</span>");
            } else {
                sb.append(html.charAt(i));
            }
        }
        return sb.toString();
    }

    @Override
    public void onAttach() {
        super.onAttach();
        //height of html set to height of textBox -4
        html.getElement().getStyle().setHeight(textBox.getElement().getOffsetHeight()-4, Unit.PX);
        html.getElement().getStyle().setLeft(2.0, Unit.PX);
        html.getElement().getStyle().setBottom(2.0, Unit.PX);
    }

    public HTMLBox() {

        addDomHandler(ch, ClickEvent.getType());
        getElement().getStyle().setPosition(Position.RELATIVE);
        html.getElement().getStyle().setPosition(Position.ABSOLUTE);
        textBox.getElement().getStyle().setColor("transparent");
        textBox.addKeyUpHandler(handler);
        textBox.getElement();
        add(textBox);
        add(html);
    }

}

Using backspace, home and end works no problem. You may need to adjust the styles. Here's how it looks:

textbox_showing_html

Upvotes: 2

Related Questions