Wednesday, November 21, 2012

Re: Getting Started with GWT tutorial questions

On 11/21/2012 09:10 AM, Ruben wrote:
Hello,

I've just finished the getting started with GWT tutorial:
https://developers.google.com/web-toolkit/doc/latest/tutorial/style
Which I think is really good.

I have a couple of questions though.

https://developers.google.com/web-toolkit/doc/latest/tutorial/style
For the dynamic styling a widget is used, and then the stylename is added to the widget.
Is there a reason a widget is used for this?
code:
stocksFlexTable.setText(row, 2, changeText + " (" + changePercentText          + "%)");      Label changeWidget = (Label)stocksFlexTable.getWidget(row, 2);      changeWidget.setText(changeText + " (" + changePercentText + "%)");

// Change the color of text in the Change field based on its value.      String changeStyleName = "noChange";      if (price.getChangePercent() < -0.1f) {        changeStyleName = "negativeChange";      }      else if (price.getChangePercent() > 0.1f) {        changeStyleName = "positiveChange";      }        changeWidget.setStyleName(changeStyleName);
I don't see the need for it, it works perfect like this as well:
stocksFlexTable.setText(rowIdx, 2, changeText + " (" + changePercentage + "%)");
        if (price.getChangePercent() < -0.1f) {
            stocksFlexTable.getCellFormatter().addStyleName(rowIdx, 2, "negativeChange");
        }else{
            stocksFlexTable.getCellFormatter().addStyleName(rowIdx, 2, "positiveChange");
        }

Can anybody tell me why a widget is suggested here as a better solution?
Good question.
1) It's a tutorial, so one attempts to balance demonstrations of core features vs. code complexity. You probably don't agree (and I will not debate this), but introducing the temporary Label widget as opposed to using the method chain is a good way to further demonstrate widget use.
2) addStyleName performs as expected, but it's not the right solution to this problem. You may have already seen the Javadoc, but for
completeness:
http://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/user/client/ui/UIObject.html#addStyleName%28java.lang.String%29

The concept of a secondary style, aka dependent style name is, as far as I know, specific to GWT. It's a useful technique, but is not really appropriate for this particular tutorial step. setStyleName() is the better solution.


Second question about the generated javascript:
"If, after you compile StockWatcher, you look at the generated JavaScript for the Add button, you will see that the button has a class attribute of gwt-Button:
<button class="gwt-Button" tabindex="0" type="button">Add</button>"

Problem is a cannot find this button code in the "stockwatcher.nocache.js", and also not in any of the generated permutations, is that normal??
(i have compiled it :p )

I don't have an answer for this, as I have not run the tutorial for some years.

Cheers,
jec

No comments:

Post a Comment