Re: Getting Started with GWT tutorial questions

[Jeffrey Chimene]

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

[Ashton Thomas]

For your second question: https://developers.google.com/web-toolkit/doc/latest/DevGuideUiCss?hl=no-NO

gwt-[Classname] will use the default css/theme provided by GWT. You can remove/override this if you need

[Oliver Krylow]

The GWT compiler optimises and obfuscates the javascript heavily by default. To see a more human-friendly version set the compiler flag -style to PRETTY or DETAILED. read more about this here https://developers.google.com/web-toolkit/doc/1.6/FAQ_DebuggingAndCompiling#Why_is_my_GWT-generated_JavaScript_gibberish?

[Oliver Krylow]

Sorry, somehow I linked to old version of docs. But you will find latest version on your own :-)