Re: Textfield with "delete text" image combined in GWT

Create new custom composite TextBox:

 

package com.lokur.akshay.client;

 

import com.google.gwt.event.dom.client.ClickEvent;

import com.google.gwt.event.dom.client.ClickHandler;

import com.google.gwt.resources.client.ImageResource;

import com.google.gwt.user.client.ui.Composite;

import com.google.gwt.user.client.ui.HorizontalPanel;

import com.google.gwt.user.client.ui.Image;

import com.google.gwt.user.client.ui.TextBox;

 

public class TextBoxWithClearTextIcon extends Composite implements ClickHandler {

 

       private TextBox textBox = new TextBox();

       private Image image = new Image();

 

       public TextBoxWithClearTextIcon() {

             

              ImageResource rsrc = PreviewBundle.INSTANCE.crossIcon();

              image.setResource(rsrc);

              image.setStyleName(PreviewBundle.INSTANCE.css().withoutLeftBorder());

              textBox.setStyleName(PreviewBundle.INSTANCE.css().withoutRightBorder());

             

              // Place the image to thr right of the text box using a horizontal panel.

              HorizontalPanel panel = new HorizontalPanel();

              panel.add(textBox);

              panel.add(image);

              panel.setBorderWidth(0);

 

              image.setAltText("delete text");

              image.addClickHandler(this);

 

              // All composites must call initWidget() in their constructors.

              initWidget(panel);

 

              // Give the overall composite a style name.

              // setStyleName("example-OptionalCheckBox");

       }

 

       @Override

       public void onClick(ClickEvent event) {

              Object sender = event.getSource();

              if (sender == image) {

                     textBox.setText("");

                     textBox.setFocus(true);

              }

       }

 

}

View.java

@UiField

    TextBoxWithClearTextIcon customTF;

 

 

ClientBundle.java :

public interface MyBundle extends ClientBundle {

    public static final PreviewBundle INSTANCE =  GWT.create(PreviewBundle.class);

 

    @Source("myCss.css")

    @NotStrict

    public MyCss css();

   

    @Source("cross.png")

    public ImageResource crossIcon();

   

 

    interface MyCss extends CssResource {

        String withoutLeftBorder();

        String withoutRightBorder();

    }

}

 

myCss.css:

@sprite .crossIcon {

       gwt-image: 'crossIcon';

       display: inline-block;

}

 

.withoutLeftBorder {

        border-left: 1px solid #FFFFFF !important;

        border-top: 1px solid #000000 !important;

        border-bottom: 1px solid #000000 !important;

        border-right: 1px solid #000000 !important;

}

 

.withoutRightBorder {

        border-right: 1px solid #FFFFFF !important;

        border-top: 1px solid #000000 !important;

        border-bottom: 1px solid #000000 !important;

        border-left: 1px solid #000000 !important;

}

 

myView.ui.xml

 

<!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:akshaycustom='urn:import:com.lokur.akshay.client'

             ui:generateFormat='com.google.gwt.i18n.rebind.format.PropertiesFormat'

             ui:generateKeys='com.google.gwt.i18n.rebind.keygen.MD5KeyGenerator'

             ui:generateLocales="default">

 

    <ui:with field="bundle" type="com.lokur.akshay.client. MyBundle "/>

 

<g:HTMLPanel>

<akshaycustom:TextBoxWithClearTextIcon ui:field="customTF" />

</g:HTMLPanel>

 

 

 

Finished look and feel is attached.

 

Am Freitag, 26. Juli 2013 14:40:51 UTC+5:30 schrieb Jens:

Use an Image and a TextBox (styled with a transparent background and no borders). Put both in a container (HTMLPanel, FlowPanel, maybe FocusPanel) that is styled like a TextBox.

Should be really easy using UiBinder.

-- J.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.