Announcement

Collapse
No announcement yet.
X
Collapse
  • Page of 1
  • Filter
  • Time
Clear All
new posts
Previous template Next
    #1

    Howto to add a clickhandler to parts of a label

    Hello, using SmartGWT Power 2.5 official release.

    I have a simple use-case, that seems to baffle me at the moment.

    I fetch some tweets from Twitter, and render them using a series of HTMLFLow, inside a VStack. Pretty straightforward. Inside a tweet can be a '@username' substring, or a '#hashtag' substring. I would like to add a clickhandler to these words. Is something like this possible? In plain Javascript I would just create a <span> around it, and use some jQuery selection on it, and add a clickhandler.

    What approach would you suggest? Or am I going to need some JSNI?
    Tags: None
    #2
    The most "formal" way to do it would be to break up the Twitter string and render it as a series of separate HTMLFlows so that you could add event handlers, use styling APIs, etc all from Java.

    You could alternatively drop down to GWT's lower-level DOM oriented APIs (such as Element) and use an approach more similar to your JQuery approach.

    Finally there's nothing wrong with literally using JQuery if you're comfortable with it - you can do via JSNI.

    Comment

      #3
      Great! I'll try the series of HTMLFlows, no need to create another dependency. Thanks for listing these alternatives.

      Comment

        #4
        The question with the series of HTML flows is getting them to flow as a group, such that it looks like it's one piece of text.

        What container would you suggest? I kind of need some wrapping HStack, that automatically goes to new line after the end is reached.

        Comment

          #5
          On second thought, I'm going for the JSNI+jQuery approach.

          However, I get a jQuery not available Javascript exception. Is SmartGWT removing this? I included jQuery in my welcome html:
          Code:
          <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="gwt:property" content="locale=nl_NL">
    <title>MyApp</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  </head>

  <body>
...
          And I just use this as my native function:
          Code:
          	public static native void attachTweetClickHandlers(SocialFeedWidget w) /*-{
		//attach JS clickHandlers to this, that call the NativeTweetElementClickedHandler
		jQuery('.social-dashboard-twitter-hashtag').click(function(event) {
			//get id
			var myId = jQuery(this).attr("id");
			//call the method that fires the callback to the correct widget instance
 			w.@nl.sytematic.projects.mypackage::fireTweetClickedEvent(Ljava/lang/String;)(myId);			 
		});
  	}-*/;

          This is supposed to work right? Or is SmartGWT clearing the DOM from external scripts? Or is this because I run it in Dev mode or something?
          Last edited by Sytematic; 21 Sep 2011, 02:58.

          Comment

            #6
            (For reference)

            Great, got it working, the jsni code should be like this:

            Code:
            public static native void attachTweetClickHandlers(SocialFeedWidget w) /*-{
		//attach JS clickHandlers to this, that call the NativeTweetElementClickedHandler
		$wnd.jQuery('.social-dashboard-twitter-hashtag').live("click", function(event) {
			//get id
			var myId = $wnd.jQuery(this).attr("id");
			//call the method that fires the callback to the correct widget instance
 			w.@nl.sytematic.myproject.mypackage.SocialFeedWidget::fireTweetClickedEvent(Ljava/lang/String;)(myId);			 
		});
   

	}-*/;
            Notice the 'live' method instead of a normal 'click' method.

            Comment

            Previous template Next
            Working...
            X