Page 1 of 3 123 LastLast
Results 1 to 10 of 22

Thread: Add jquery selector to component

  1. #1
    Sencha Premium Member
    Join Date
    Jun 2013
    Location
    Nuremberg, Germany
    Posts
    88

    Default Add jquery selector to component

    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:
    Code:
        <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:
    Code:
    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

  2. #2
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,178

    Default

    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.

  3. #3
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,178

    Default

    How are you getting the element id?

  4. #4
    Sencha Premium Member
    Join Date
    Jun 2013
    Location
    Nuremberg, Germany
    Posts
    88

    Default

    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.

  5. #5
    Sencha Premium Member
    Join Date
    Jun 2013
    Location
    Nuremberg, Germany
    Posts
    88

    Default

    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
    Attached Files Attached Files

  6. #6
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,178

    Default

    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.

  7. #7
    Sencha Premium Member
    Join Date
    Jun 2013
    Location
    Nuremberg, Germany
    Posts
    88

    Default

    Quote Originally Posted by branflake2267 View Post
    Could you share a fully operation project with me at [email protected]?
    Thanks, will do so.

  8. #8
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,178

    Default

    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.
    Code:
    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);
    	}
    }

  9. #9
    Sencha Premium Member
    Join Date
    Jun 2013
    Location
    Nuremberg, Germany
    Posts
    88

    Default

    Pasting text worked with this. For pasting images, I had to add these lines to the method addPasteListener:
    Code:
    $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

  10. #10
    Sencha Premium Member
    Join Date
    Jun 2013
    Location
    Nuremberg, Germany
    Posts
    88

    Default

    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:
    Code:
    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

Page 1 of 3 123 LastLast

Similar Threads

  1. How to find child component of css selector (this.down not working)?
    By patrickkidd in forum Sencha Touch 2.x: Q&A
    Replies: 3
    Last Post: 18 Feb 2015, 9:48 AM
  2. Component queries with equal sign in selector
    By Roman Tngi in forum Ext: Q&A
    Replies: 5
    Last Post: 25 Feb 2014, 5:21 AM
  3. How to identify a component selector
    By fabiojpoli in forum Ext: Discussion
    Replies: 1
    Last Post: 25 May 2011, 9:37 AM
  4. Ext alternative for jQuery's :input selector?
    By jstockton in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 16 Jul 2008, 9:52 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •