Add jquery selector to component

[Holger Herrmann]

Hi there,

my request is to be able to paste an image into a random component by using Ctrl+V. There is a jquery plugin which does so (https://github.com/layerssss/paste.js).

For that I would like to add this plugin to my GXT application and add the new listener to a text area, for example.

I've done this so far:

- Added the plugin to the html page:

    <script type="text/javascript" src="javascript/jquery.js"></script>
    <script type="text/javascript" src="javascript/paste.js"></script>

- Call the required jquery code as jsni method in the constructor of my (custom) text area component:

private native void addPasteListener(String id)

/*-{
       $wnd.$(function() {
           $wnd.$(id).pastableNonInputable();

           $wnd.$(id)
               .on('paste', function(ev, data) {
                   alert('Here we paste');
               })
               .on('pasteImage', function(ev, data){
                   alert('Here we paste');
               })
               .on('pasteImageError', function(ev, data){
            alert('pasteImageError');
               })
               .on('pasteText', function(ev, data){
            alert("text pasted");
               })
       });
   }-*/;

However, no alert message is shown when I hit Ctrl+V in the text area.

Anybody has an idea why?

Thanks!

Holger

[branflake2267]

I can't tell with that. From the looks of it, it could work fine. I suspect timing issue with out seeing all of the source. Could you make an entry point with a small test case in it, that I could look at in more detail? Or a small project if you want. Something that I could run or see more of.

[branflake2267]

How are you getting the element id?

[Holger Herrmann]

Thanks for your answer.

I call addPasteListener(getElement().getId()) in the constructor of the component.

Will set up a small test project to try it out.

[Holger Herrmann]

Hi,

I've added the project "JqueryIncluder" to this post. You will have to add the libs gwt-servlet-2.5.1.jar, gwt-user-2.5.1.jar and gxt-3.0.7.1.jar to the lib file.
The application starts a simple page with a text box to which the listener has been added. When pasting an image or text, an alert should be shown.

Additionally, I have added the project "PasteImage", which is a simple implementation of the paste feature without gwt / gxt.

PLEASE NOTE: The file JqueryIncluder wasn't allowed to be uploaded as zip-file, because only 433 KB file size were allowed. For that I had to add the dummy file type ".pdf". So please just remove .pdf from the file before extracting it.

Would be great if you could find something out!

Thanks,
Holger

[branflake2267]

Hm, lots of things to do, this is wondering out of typically what I can support. Could you share a fully operation project with me at [email protected]? Then size won't limit the ripping out.

[Holger Herrmann]

Could you share a fully operation project with me at [email protected]?

Thanks, will do so.

[branflake2267]

I got it running. There were a couple issues. First the element wasn't attached when adding the listeners. Second the input id was wrong.

First add the listeners after it's attached to the DOM, then instead of using the id, you can use the element to attache the handlers.

This worked for me.

import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.InputElement;
import com.google.gwt.event.logical.shared.AttachEvent;
import com.google.gwt.event.logical.shared.AttachEvent.Handler;
import com.google.gwt.user.client.Event;
import com.sencha.gxt.core.client.Style.Side;
import com.sencha.gxt.widget.core.client.form.TextField;
import com.sencha.gxt.widget.core.client.tips.ToolTipConfig;
import com.sencha.gxt.widget.core.client.toolbar.LabelToolItem;


public class TextBox extends TextField implements MandatoryComponent, LabelComponent {


	private boolean rightAligned = false;
	private boolean mandatory;
	private LabelToolItem label = null;


	public TextBox(TextBoxMetaData textBoxMetaData) {


		super();


		setData(AbstractMetaData.ID, textBoxMetaData);


		setValidateOnBlur(false);


		if (textBoxMetaData.getMaxLength() > -1) {


			InputElement inputElement = getInputEl().cast();
			inputElement.setId("input1");
			inputElement.setMaxLength(textBoxMetaData.getMaxLength());
		}


		if (textBoxMetaData.isUpperCase())
			getInputEl().applyStyles("textTransform:uppercase");


		if (textBoxMetaData.isAbsolutePosition())
			setStyleName("position-absolute");
		else
			setStyleName("position-relative");


		
		addAttachHandler(new Handler() {
      @Override
      public void onAttachOrDetach(AttachEvent event) {
        if (isAttached()) {
          addPasteListener(getInputEl());
        }
      }
    });
	}
	
	@Override
	public void onBrowserEvent(Event event) {
	  super.onBrowserEvent(event);
	  
	  System.out.println("event=" + event.getType());
	}


	private native void addPasteListener(Element el)
	/*-{
		$wnd.$(function() {
			$wnd.$(el).pastableNonInputable();


			$wnd.$(el)
				.on('paste', function(ev, data) {
					alert('Here we paste');
				})
				.on('pasteImage', function(ev, data){
					alert('Here we paste');
				})
				.on('pasteImageError', function(ev, data){
					alert('pasteImageError');
				})
				.on('pasteText', function(ev, data){
					alert("text pasted");
				})
		});
	}-*/;


	@Override
	public boolean isEnabled() {
		return !isReadOnly();
	}


	@Override
	public boolean isMandatory() {
		return mandatory;
	}


	@Override
	public void setMandatory(boolean mandatory, boolean changeStyles) {


		this.mandatory = mandatory;


		// if (changeStyles && isEnabled())
		//  Utilities.setInputElementBackgroundColor(getInputEl(), true, mandatory);
	}


	@Override
	public void setPosition(int x, int y) {


		if (label == null) {
			super.setPosition(x, y);
			return;
		}


		TextBoxMetaData textBoxMetaData = getData(AbstractMetaData.ID);
		Integer labelWidth = textBoxMetaData.getLabelWidth();


		if (labelWidth == null)
			labelWidth = 0;


		if (textBoxMetaData.isLabelLeft()) {
			super.setPosition(x + labelWidth, y);


			if (isRightAligned())
				label.setPosition(x - 6, y + 4);
			else
				label.setPosition(x, y + 4);
		}
		else {
			super.setPosition(x, y + LabelComponent.LABEL_HEIGHT);
			label.setPosition(x, y - 3);
		}
	}


	@Override
	public void setLabel(LabelToolItem label) {


		this.label = label;
	}


	public void updateLabelText(String newText) {


		TextBoxMetaData textBoxMetaData = getData(AbstractMetaData.ID);


		if (textBoxMetaData.isLabelLeft() && isRightAligned() && newText != null && !newText.substring(0, 5).equals("<div "))
			newText = "<div align=\"right\">" + newText + "</div>";


		this.label.setLabel(newText);
	}


	public void setColor(String color) {
		if (color == null)
			return;


		// Utilities.setInputElementBackgroundColor(getInputEl(), color);
	}


	@Override
	public void setText(String text) {


		super.setText(text);


		if (text == null || text.length() == 0)
			setToolTip(null);
	}


	@Override
	public void setToolTip(String tooltip) {


		if (tooltip == null || tooltip.length() == 0) {
			removeToolTip();
			return;
		}


		ToolTipConfig ttConfig = new ToolTipConfig(tooltip);
		ttConfig.setAnchor(Side.LEFT);
		super.setToolTipConfig(ttConfig);
	}


	@Override
	public void setRightAligned(boolean isRightAligned) {
		this.rightAligned = isRightAligned;
	}


	@Override
	public boolean isRightAligned() {
		return this.rightAligned;
	}


	@Override
	public void setVisible(boolean visible) {
		AbstractMetaData amd = getData(AbstractMetaData.ID);
		boolean showDenied = amd.isShowDenied();


		if (showDenied && visible)
			return;


		super.setVisible(visible);


		if (label != null)
			label.setVisible(visible);
	}


	@Override
	public void setEnabled(boolean enabled) {
		AbstractMetaData amd = getData(AbstractMetaData.ID);
		boolean editDenied = amd.isEditDenied();


		if (editDenied && enabled)
			return;


		setReadOnly(!enabled);
		// Utilities.setInputElementBackgroundColor(getInputEl(), enabled, mandatory);
	}
}

[Holger Herrmann]

Pasting text worked with this. For pasting images, I had to add these lines to the method addPasteListener:

$wnd.$(el)
   .on('focus', function() {
   }).pastableTextarea().on('blur', function(){});

However, there seems now to be a problem with generating the mask structure. Please have a look at the following:
not_working_02.jpg

You can see that there is a part of the textarea component not aligned correctly. It's also not a child of the preceding div, but comes in a row.
Compare the structure when I comment out adding the pasteListener:
working.jpg

Any ideas?

Thanks,
Holger

[Holger Herrmann]

It seems as if adding the paste handler adds an additional dif (with strange positions).

I have modified the example project and added a second text box without paste handler:

public class JqueryIncluder implements EntryPoint {

    @Override
public void onModuleLoad() {
        setUpMask();
    }


    private void setUpMask() {

        TextBox textBox = getTextBox("TextBox1", true);
        RootPanel.get("root").add(textBox);

        TextBox textBox2 = getTextBox("TextBox2", false);
        RootPanel.get("root").add(textBox2);

        textBox.setText("Herrmann");
    }

    private TextBox getTextBox(String id, boolean withPasteHandler) {

        // create text box metadata
TextBoxMetaData tmd = new TextBoxMetaData();
        tmd.setAbsolutePosition(true);
        tmd.setHeight(35);
        tmd.setId(id);
        tmd.setLabelLeft(true);
        tmd.setLabelText(id);
        tmd.setLabelWidth(200);
        tmd.setWidth(400);
        tmd.setX(20);
        tmd.setY(20);

        // create text box
TextBox tb = new TextBox(tmd, withPasteHandler);

        return tb;
    }
}

Have a look at the additional div in the first text box:
additionalDiv.jpg

Is there a way to avoid that? Or does the jquery plugin need it?

Thanks,
Holger