Write the website in GWT, Part 1

Good afternoon ladies and gentlemen,

On habré there are not many articles on the topic of GWT (Google Web Toolkit) and in the majority they are written in the key of "what is shit, can not do anything, nothing is clear". In addition, in my experience, most programmers about GWT not heard anything, and those who have heard, I think that more than "Hello World"it can not. I will try to show you that with the help of this wonderful Framework, you can do things that most JavaScript programmers simply can not handle.

Before digress, because the question "why?" will sound. This website I wrote based on GWT, because I have and there was no choice. With HTML,CSS, PHP and JavaScriptом I know(was) very superficial( actually most Java programmers), but the idea and desire was. But because I used what you had and it turned out like very not bad.

Look at this website. Yes, it's not a masterpiece, but it shows you what GWT can do everything that JavaScript can and even more. Why more? The answer to this question coincides with the answer to the question: "why C++ can do more than Assembler?". On this subject I propose to discuss in the comments. Now we're back to GWT. There is nothing better( my strong belief), than to explain anything on the example, and therefore I invite you to dissect this site.



So began

Hang listeners on the elements

So, any GWT application consists of at least one HTML page and the heap of Java-scripts. Look at this very page. Not difficult to guess, all the fun will happen in the diva "content". All header and footer done hardcore, i.e. statically, and in fact to GWT have nothing to do(turn off JavaScript and you will understand what I mean ). But clicks on buttons handles GWT. How is this done? For each div(button) is hung on the listener:

the

final Element element = DOM.getElementById("homeSite");
DOM.sinkEvents(element, Event.ONCLICK);
DOM.setEventListener(element, new EventListener() {
public void onBrowserEvent(Event event) {
if (DOM.eventGetType(event) == Event.ONCLICK) {
// our logic
}
}
});

That's all, simple as that. I think in this code everything is clear, may be only except the line:

the

DOM.sinkEvents(element, Event.ONCLICK);

This line is mandatory, because it tells the browser that from this point on this element responds to click. If this line to throw the listener alert of an event and do not get your logic, accordingly, will not be processed. This little thing you just have to know, as a fact, everywhere and always.

Download the static HTML file.

But not all content is generated on the fly. For example, the Central page is static HTML. How so? Faerber will confirm you this. He will show you that on the main page is loaded startRu.html (or startDE.html if the browser is told that his native language is German). How is this done?

the

RequestBuilder requestBuilder = new RequestBuilder(RequestBuilder.GET, GWT.getHostPageBaseURL() + "start/start" + language.getAbkurzung() + ".html");
try {
requestBuilder.sendRequest(null, new RequestCallback() {

public void onResponseReceived(Request request, Response response) {

if (response.getStatusCode() != 200) {
Window.alert(language.getЕrror() + "!");
} else {
StartHTML HTML = new HTML(response.getText());
The rootpanel.get("content").getElement().setInnerHTML("");
The rootpanel.get("content").add(startHTML);
}
}

public void onError(Request request, Throwable exception) {
Window.alert(language.getError() + "!");
}
});
} catch (RequestException ex) {
Window.alert(language.getError() + "!");
}
}

Some may say "many bukaff" and I agree with them. But on the other hand every line is very clear, and this code allows you to respond to errors. After loading this page, you must initialize the links(Select model, add to cart, etc.). Initialize, as you might imagine, is exactly the same as DIVS.

Navigation between pages
Note how the transition between pages. Old content is slowly fading, and new ones slowly appear. Someone this effect may not like, and so I just looked, what impression will make the website, if this effect off. On taste and color, as you know the markers are different, but my website without this effect the look was not pleasant. So, how this is done. In GWT there is class Animation. View examples on the Internet, because the code for the article too bulky. But the idea in General is this: I wrote a class which gets a gets a reference to the widget that should appear. Link to the actual widget that is currently displayed is stored in a static field of a Central class that acts as a warehouse(pattern registry). The old widget is slowly changing the Opacity property from 1 to 0, then the old widget is replaced with a new one and have it change the Opacity from 0 to 1. Replacing widgets is very simple:

the

oldWidget.removeFromParent();
The rootpanel.get("content").add(newWidget);

By the same token, there are all Pop-Upы.

I think it's a good start.

On this page a lot of interesting things, such as the site remembers the set language, working forward and backward buttons, dynamic website translation from Russian into German and Vice versa(the translation, by the way, when loading the site before you will see a page), once loading the page is cached(look loaded again for example startRu.html?). When you hover on the little icon of the product in the table "bought" products, you will see a little trick. A trifle, but nice. Beautiful tool tips that show errors during registration. Field validation on the client. Fields that accept only numbers and much more.Try to "buy" one product, get the link and see what happens. And you wonder HOW that happens?

Did the person who has(or rather had) almost no clue about HTML,CSS and JavaScript in free from work/school/wife/kids and had a beer with friends to drink!

Ask questions if you are curious how a particular feature is implemented.

The story of how I, the service tried to promote it, too, by the way, very interesting.

And now I will reveal the true purpose of this topic. I'm looking for people/investors/partners for this project. Any ideas, suggestions, constructive criticism are welcomed.

Article based on information from habrahabr.ru