CODEWITHSUNDEEP
htmlgwt
Ming Leung
Ming Leung

Reputation: 385

GWT: How can I wrap an html icon to a gwt widget?

I have a HTMLPanel defined by a html string which contains an image and an icon. I need getters for them to add event handlers. There is an Image widget matching with html image. So I can Image.wrap(Document.get().getElementById("image"));

I am trying to addClickHandler outside of this Composite. How should I deal with the icon?

public class EvtPanel extends Composite{
private HTMLPanel htmlPanel=new HTMLPanel("");

String html="<div class=\"container\">\r\n" + 
        "  <img id=\"image\" src=\"imgUrl\" alt=\"altStr\" class=\"image\">\r\n" + 
        "  <div class=\"overlay\" style=\"text-align: center;\">\r\n" + 
            "  <i id=\"iconBars\" class=\"fa fa-bars\" style=\"font-size:36px;\"></i>\r\n" +
        "  </div>\r\n" + 
        "</div>\r\n" + 
        "";

public EvtPanel(String _imgUrl, String _altStr)
{
    html=html.replace("imgUrl", _imgUrl);
    html=html.replace("altStr", _altStr);
    htmlPanel.getElement().setInnerHTML(html);
    initWidget(htmlPanel);
}

public Image getEvtImage()
{
    Image img=Image.wrap(Document.get().getElementById("image"));
    return img;
}
public Icon getMenu()
{
    //How can I wrap the iconBars to gwt widget?
}
}

Thanks

Upvotes: 0

Views: 434

Answers (1)

Adam
Adam

Reputation: 5599

I guess you are using GWT-Bootstrap. If that's not the case, let me know.

First, it is a bad habit to use html literals in the code. It is difficult to maintain. You should use uiBinder instead. In uiBinder ui.xml file you can use both html and widgets.

EvtPanel.ui.xml file:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui"
    xmlns:gwtbootstrap3="urn:import:org.gwtbootstrap3.client.ui">

    <g:HTMLPanel>
        <div class="container">
            <gwtbootstrap3:Image ui:field="image" />
            <div class="overlay" style="text-align: center;">
                <gwtbootstrap3:Icon ui:field="iconBars" type="BARS" />
            </div>
        </div>
    </g:HTMLPanel>
</ui:UiBinder>

EvtPanel.java file:

import org.gwtbootstrap3.client.ui.Icon;
import org.gwtbootstrap3.client.ui.Image;

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;

public class EvtPanel extends Composite {

    private static EvtPanelUiBinder uiBinder = GWT.create(EvtPanelUiBinder.class);

    interface EvtPanelUiBinder extends UiBinder<Widget, EvtPanel> {}

    @UiField
    Image image;
    @UiField
    Icon iconBars;

    public EvtPanel(String _imgUrl, String _altStr) {
        initWidget(uiBinder.createAndBindUi(this));

        image.setUrl(_imgUrl);
        image.setAltText(_altStr);
    }

    public Image getEvtImage() {
        return image;
    }

    public Icon getMenu() {
        return iconBars;
    }
}

Notice that in uiBinder file image and iconBars are declared as widgets from org.gwtbootstrap3.client.ui package.

Those widgets are then declared in java file using @UiField annotation.

Upvotes: 1

Related Questions