How to set Custom Attribute for SmartGWT Widget

Question

I want to get the attribute of the smartgwt widget which i am setting like the way in GWT. For example in GWT:

//Button creation
 Button btn1 = new Button(" Button 1");
 Button btn2 = new Button("Button 2");
 Button btn3 = new Button("Button 3");

//setting the attribute to button doms
 btn1.getElement().setAttribute("data-tracking", "Button 1 clicked");
 btn2.getElement().setAttribute("data-tracking", "Button 2 clicked");
 btn3.getElement().setAttribute("data-tracking", "Button 3 clicked");

    //Global handler to catch all the event in my application
        Event.addNativePreviewHandler(new NativePreviewHandler() {
              public void onPreviewNativeEvent(final NativePreviewEvent event) {
                final int eventType = event.getTypeInt();
                switch (eventType) {

                  case Event.ONCLICK:
                     System.out.println("on clikc clicked"+Element.as(event.getNativeEvent().getEventTarget()).getAttribute("data-tracking"));
//getting the button attribute 
                     if(Element.as(event.getNativeEvent().getEventTarget()).getAttribute("data-tracking")!=null && !Element.as(event.getNativeEvent().getEventTarget()).getAttribute("data-tracking").equals("")){
                     googleAnalyticsTrackPageView(Element.as(event.getNativeEvent().getEventTarget()).getAttribute("data-tracking"));
                     }
                    break;

                }
              }
            });

But in SmartGWT, i was not able to set/get this attribute. Is there a way to solve this problem? We have requirement to add google analytics to our apps but the problem which we are facing is unable to set the attribute. want to add some custom attribute to widget where ever its required for example(on click of tabs/clicking on some help icon inside the application, many places)

Img helpButtonImage = new Img(HELP_ICON);
helpButtonImage.getElement().setAttribute("data-tracking", "help on purchase order");

ButtonItem loginButtonItem = new ButtonItem();
loginButtonItem.setAttribute("data-tracking", "User clicked on login button");

and which needs to be catch in the global handler like above mentioned way.

Answer 1

From getElement documentation

Normal usage of SmartGWT is to call draw() on SmartGWT widgets, not to use use RootPanel.add(). Developers will not typically need to call getElement() or setElement() for SmartGWT canvas instances. If developers do need to access the DOM elements created by a drawn SmartGWT component, they should use com.smartgwt.client.widgets.Canvas.getOuterElement() and com.smartgwt.client.widgets.Canvas.getContentElement(). See the javadoc for those methods for more information. Note particularly that these elements should not be directly manipulated in the DOM - instead standard SmartGWT APIs such as draw(), clear(), setContents(), addChild(), redraw() should be used. See also com.smartgwt.client.widgets.Canvas.setHtmlElement(Element) for how to embed a SmartGWT component into an existing DOM element. getElement() and setEleent() exist solely to support adding SmartGWT widgets to a core GWT layout manager. This usage has limitations and caveats - see this list of Frequently Asked Questions. The mechanism that getElement() uses to integrate with core GWT is the same as that described for com.smartgwt.client.widgets.Canvas.setHTMLElement(Element) and has the same caveats

So, an example.

IButton button = new IButton("Hello World");
button.setWidth( 400 );
RootPanel.get().add(button);

result this:

If you try this:

IButton button = new IButton("Hello World");
button.setWidth( 400 );
RootPanel.get().add(button);
button.getContentElement().setAttribute( "style" , "color: white;" );

result is:

Note that IButton is from com.smartgwt.client.widgets.IButton

Regards!