Writing a site on GWT: Part 1
Good day, ladies and gentlemen,
On Habré there are not many articles on the topic of GWT (Google Web Toolkit) and most of them are written in the key "what a fucking thing is, can not do anything, nothing is clear." In addition, as my experience shows, most programmers have not heard anything at all about GWT, and those who have heard it think that he is not capable of more than “Hello World”. I will try to show you that with the help of this wonderful Framework you can do things that most JavaScript programmers can't do.
Before starting a small digression, because the question “why?” will be asked. I wrote this site on GWT, because I had no choice either. I know (was) quite superficially (like most Java programmers themselves) with HTML, CSS, PHP and JavaScript, but the idea and desire were. That is why I used what I had and it turned out that it’s not quite bad.
')
Look at this site . Yes, this is not a masterpiece, but it shows that GWT can do everything that JavaScript can and even more. Why more? The answer to this question completely coincides with the answer to the question: “Why can C ++ be more than Assembler?”. On this topic, I propose to discuss in the comments. And we return to the GWT. There is nothing better (my firm conviction) than to explain something with an example, and therefore I suggest you dissect this site.
So began
We hang the listeners on the elements
So, any GWT application consists of at least one HTML page and a heap of javascripts. Let's look at this very page. As it is not difficult to guess, all the most interesting things will happen in the “content” diva. The whole header and footer are made hardcore, i.e. statically, and in essence, have nothing to do with GWT (turn off JavaScript and see what I mean). But here clicks on the buttons handles GWT. How is this done? On each div (button) the listener is hung up:
That's all, just like that. I think everything is clear in this code, maybe only with the exception of the line:
This line is required because tells the browser that from now on, this element reacts to a click. If you throw out this line, the listener does not receive a signal about the event and your logic, accordingly, will not be processed. This trifle you just need to know, as a matter of fact, everywhere and always.
Loading static html file.
But not all content is generated on the fly. For example, the central page is static HTML. How come? Firebug will confirm this. It will show you that startRu.html (or startDE.html, if the browser says its native language is German) is loaded on the central page. How is this done?
Some may say “many books” and I agree with them. But on the other hand, each line is very clear and this code allows you to respond to errors. After downloading this page, it is necessary to initialize the links (Select model, Put to basket, etc.). Initialization, as you might guess, happens just like divines.
Jump between pages
Notice how the transition between pages. The old content slowly disappears, and the new one also appears slowly. Someone may not like this effect and therefore I just looked at the impression that the site will produce if this effect is turned off. The taste and color, as you know, felt-tip pens are different, but it was no longer pleasant to watch the site without this effect. So how is this done. GWT has an animation class. See examples on the Internet, because The code for the article is too bulky. But the idea in general is as follows: I wrote a class that receives gets a link to the widget that should appear. The link to the current widget that is currently displayed is stored in the static field of the central class, which serves as a warehouse (pattern registry). The old widget slowly changes the Opacity property from 1 to 0, then the old widget is replaced with a new one and we change the Opacity property from 0 to 1. It is very easy to replace widgets:
By the same principle all Pop-Ups appear.
I think enough to start.
There are a lot of interesting things on this page, for example, the site remembers the installed language, buttons work back and forth, dynamic translation of the site from Russian into German and vice versa (translation, by the way, when the site loads takes place before you see the page), once loaded page cached (see if it loads reload, for example, startRu.html?). When you hover over small product icons in the “purchased” products table, you will see one small focus. Trifle, but nice. Beautiful tooltips that show registration errors. Check fields on the client. Fields that accept only numbers and much more. Try to “buy” one product, get a link and see what happens. And you wonder how this happens?
And all this was done by a person who does not have (or rather did not have) practically no clue about HTML, CSS and JavaScript in his free time from work / study / wife / children and had time to sip beer with friends!
Ask questions if you are interested in how this or that feature is implemented.
The story of how I tried to promote this service is also very interesting, by the way.
And now I will reveal to you the true purpose of this topic. I am looking for people / investors / associates for this project. Any ideas, suggestions, constructive criticism are welcome.
On Habré there are not many articles on the topic of GWT (Google Web Toolkit) and most of them are written in the key "what a fucking thing is, can not do anything, nothing is clear." In addition, as my experience shows, most programmers have not heard anything at all about GWT, and those who have heard it think that he is not capable of more than “Hello World”. I will try to show you that with the help of this wonderful Framework you can do things that most JavaScript programmers can't do.
Before starting a small digression, because the question “why?” will be asked. I wrote this site on GWT, because I had no choice either. I know (was) quite superficially (like most Java programmers themselves) with HTML, CSS, PHP and JavaScript, but the idea and desire were. That is why I used what I had and it turned out that it’s not quite bad.
')
Look at this site . Yes, this is not a masterpiece, but it shows that GWT can do everything that JavaScript can and even more. Why more? The answer to this question completely coincides with the answer to the question: “Why can C ++ be more than Assembler?”. On this topic, I propose to discuss in the comments. And we return to the GWT. There is nothing better (my firm conviction) than to explain something with an example, and therefore I suggest you dissect this site.
So began
We hang the listeners on the elements
So, any GWT application consists of at least one HTML page and a heap of javascripts. Let's look at this very page. As it is not difficult to guess, all the most interesting things will happen in the “content” diva. The whole header and footer are made hardcore, i.e. statically, and in essence, have nothing to do with GWT (turn off JavaScript and see what I mean). But here clicks on the buttons handles GWT. How is this done? On each div (button) the listener is hung up:
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) { // } } }); That's all, just like that. I think everything is clear in this code, maybe only with the exception of the line:
DOM.sinkEvents(element, Event.ONCLICK); This line is required because tells the browser that from now on, this element reacts to a click. If you throw out this line, the listener does not receive a signal about the event and your logic, accordingly, will not be processed. This trifle you just need to know, as a matter of fact, everywhere and always.
Loading static html file.
But not all content is generated on the fly. For example, the central page is static HTML. How come? Firebug will confirm this. It will show you that startRu.html (or startDE.html, if the browser says its native language is German) is loaded on the central page. How is this done?
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.getrror() + "!"); } else { HTML startHTML = new HTML(response.getText()); RootPanel.get(„content“).getElement().setInnerHTML(""); 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 books” and I agree with them. But on the other hand, each line is very clear and this code allows you to respond to errors. After downloading this page, it is necessary to initialize the links (Select model, Put to basket, etc.). Initialization, as you might guess, happens just like divines.
Jump between pages
Notice how the transition between pages. The old content slowly disappears, and the new one also appears slowly. Someone may not like this effect and therefore I just looked at the impression that the site will produce if this effect is turned off. The taste and color, as you know, felt-tip pens are different, but it was no longer pleasant to watch the site without this effect. So how is this done. GWT has an animation class. See examples on the Internet, because The code for the article is too bulky. But the idea in general is as follows: I wrote a class that receives gets a link to the widget that should appear. The link to the current widget that is currently displayed is stored in the static field of the central class, which serves as a warehouse (pattern registry). The old widget slowly changes the Opacity property from 1 to 0, then the old widget is replaced with a new one and we change the Opacity property from 0 to 1. It is very easy to replace widgets:
oldWidget.removeFromParent(); RootPanel.get(„content“).add(newWidget); By the same principle all Pop-Ups appear.
I think enough to start.
There are a lot of interesting things on this page, for example, the site remembers the installed language, buttons work back and forth, dynamic translation of the site from Russian into German and vice versa (translation, by the way, when the site loads takes place before you see the page), once loaded page cached (see if it loads reload, for example, startRu.html?). When you hover over small product icons in the “purchased” products table, you will see one small focus. Trifle, but nice. Beautiful tooltips that show registration errors. Check fields on the client. Fields that accept only numbers and much more. Try to “buy” one product, get a link and see what happens. And you wonder how this happens?
And all this was done by a person who does not have (or rather did not have) practically no clue about HTML, CSS and JavaScript in his free time from work / study / wife / children and had time to sip beer with friends!
Ask questions if you are interested in how this or that feature is implemented.
The story of how I tried to promote this service is also very interesting, by the way.
And now I will reveal to you the true purpose of this topic. I am looking for people / investors / associates for this project. Any ideas, suggestions, constructive criticism are welcome.
Source: https://habr.com/ru/post/140123/
All Articles