How to set Custom Attribute for SmartGWT Widget

[sameen]

Hi,
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 the problem?

[Isomorphic]

You can add custom attributes to the widget (not the DOM element) via setAttribute().

Most of the time, people who ask to add extra elements to a SmartGWT DOM element are about to reinvent something the framework already does in a better way, so, what do you plan to do with these additional DOM element.

Explain the use case (from an end user's perspective, for example), not just the mechanics of attributes and event handlers.

[sameen]

we have developed application using pure SmartGWT .now 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 this way.

//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) {
//catch all the attribute on Onclick
case Event.ONCLICK:
if(Element.as(event.getNativeEvent().getEventTarget()).getAttribute("data-tracking")!=null && !Element.as(event.getNativeEvent().getEventTarget()).getAttribute("data-tracking").equals("")){
//calling google analytics jsni method bypassing the attribute
googleAnalyticsTrackPageView(Element.as(event.getNativeEvent().getEventTarget()).getAttribute("data-tracking"));
}
break;
}
}
});

any help on this?

[Isomorphic]

We've implemented Google Analytics tracking for SmartGWT, and we would recommend against your approach here - there is no reason to put information you want to pass to Google into DOM elements, when such information can be stored on the widgets themselves instead. Just add event handlers as needed to the events and widgets where you want tracking to occur.

[sameen]

Thanks for your reply..i know this approach which require to add the handlers in all the places which is big change.

But i implemented google analytic for GWT application in a very simple manner.Just added a global event handler which catch all the application events and from there i am getting the attribute which i am setting through out the pplicaiton widget level.

[Isomorphic]

So, instead of adding an event handler to widgets, you have added an attribute to the same set of widgets and then also set up a separate global event handler.

This is not saving you work. You still need to set up something on a per-widget basis, now, you just have less flexibility in the data you want to report, since you can't do anything on the fly based on the current widget's state, such as avoiding reporting to Google when navigation is cancelled or disallowed.

You can, of course, take the approach of setting data attributes - it's just less flexible (as already noted), the resulting data is worse, and it also requires you to wait until the widget is drawn (since the element cannot be accessed until then).

That's why we implemented Google Analaytics tracking via event handlers - better approach.