I want to design a website using GWT. This is my understanding of how GWT pages will be delivered to the client browser - When the user puts in the URL into her browser she receives all the static HTML + GWT javascript, and then the javascript queries the server for the dynamic page content and adds it to the DOM. eg - For a blog page the content of the blog is queried by the javascript. is my understanding correct?
If I know that the content will surely be a part of the page(add does not depend on user clicking an expand button etc.), Will it be more efficient if the blog content was a part of the HTML initially served? Something that could be done by using a templating engine like django.
Is there a way to make a templating mechanism in GWT?
Yes, putting your content into the HTML will reduce the number of round trips the client makes to your server. It also means that the blog content won't have to wait for your GWT javascript to load before it can be displayed.
GWT itself isn't useful for a template system, but most servers that run GWT servlets will also support JSP pages. GWT works fine with these pages, you just need to put the GWT script tag in as usual. You will no doubt be able to find a ready-made templating solution but rolling your own is not too hard.
Related
I visited new GWT website and noticed that after clicking on tree items - link is changing without adding hash (for example, http://www.gwtproject.org/books.html). I know how to do url routing using hashes, but how URL routing is made in GWT website (and possibly can be made)?
Thanks in advance.
It's commonly called HTML5 PushState. A new way of dealing with the browser history by changing the URL without necessarily reloading the page. By listening on popstate events you can dynamically change your page just like using the hashtag method, with the benefit of having cleaner URLs and out of the box crawlability.
Have a look at the gwt website source. Internally uses the GQuery library (jQuery port for GWT) that leverages such pushState methodology.
EDIT: If you want to take benefit of pushState right from GWT (since it does not natively support it), you can also have a look at Johannes Barop's pushState project.
The setup: I have a Blogger blog set up on a domain name as blog.mydomain.com. The main site site at mydomain.com is running Umbraco CMS.
The problem: I need to have the navigation from the CMS transported to Blogger somehow, so that making a change on the main website doesn't require the extra step of modifying the navigation inside Blogger.
Generating the navigation data on the CMS side in what ever format it needs to be (XML, unordered list, JSON, etc) is not a problem. The problem is getting the data from Umbraco to Blogger after it is generated.
I'm not yet willing to use Javascript, as this would seriously impair the website for users browsing without Javascript. (Too bad because AJAX would be a very workable solution.)
I've tossed around the idea of using an iFrame. How would this work for a navigation system including sub-menus? Creating and deleting multiple iframes is out of the picture, since I don't want to use Javascript. I could use one large iframe to allow for the sub-menus, but then it would cover content at the top of the content area, rendering it unclickable.
I'm thinking about how you could do this, but while I do - in this day-and-age javascript has become very common. Most users are going to have it, and those with it disabled really shouldn't be on the web. Is this the only reason you don't want to use javascript? Around 2% according to YDN have js disabled, and that's lower from other countries. As time goes on that 2% should get lower, I don't see that as an issue. However if you absolutely can't use javascript, I'll keep thinking. I might have an idea, I'll need to test it though.
It's not possible to use IFrame, cause of same origin policy. Both sites are on different domains, when user click menu item inside IFrame, there is no way to call parent window.
There are few ways how this can be done.
1) Javascript solution. Use json rpc, or another cross-domain calls. Load menu from your CMS and render it. Yes, this requires javsascript, but, seriously, show me the site, which does not use javascript.
2) Direct server communication.
Is it possible to perform http call from blogger ? If so, just perform http call to your CMS from Blogger, get data and render it.
3) Mixed flash/javascript solution. Flash can perform http call regardless of same origin policy. Get data with flash, use ExternalInterface to call Javascript function to render data.
There is no another way to do it. I suggest you to use javascript solution
You could build an HTML skeleton of empty ULs in Blogger (the max that you might need) to hold your navigation contents, and then link to an Umbraco-generated external stylesheet.
This stylesheet could fill those LIs with CSS generated content using the :before and :after pseudo-elements, and hiding unused LIs with CSS display: none.
An example of this is at: http://jsfiddle.net/5bXja/1/
This works in IE8+ so depending on your clients, this may-or-may-not be more widely supported than Javascript. Likely not. ;-)
So far what I have used with my gwt application is a simple FI, like #login, #welcome etc.
However I want to "refactor" my application in a more descriptive way, I need make it this way:
http://localhost:8080/main#login
http://localhost:8080/main#search
http://localhost:8080/profile#<username>
http://localhost:8080/api
etc.
Can I do this with GWT?
If you want to stay on the same GWT application, you'll have to use the HTML5 History API (pushState and onpopstate) instead of GWT's default History (or DefaultHistorian) implementation; which means your app would only work with browser supporting the HTML5 History API (or you'd have to provide a fallback).
This is possible with GWT, but if you don't know how to do it and/or how the HTML5 History API works, it'll cost you a lot (of time).
BTW, if you ever switch to the HTML5 History API, why keep some fragment identifiers?
The alternative is, as milan says, to split your app into smaller parts (/main, /profile, /api, etc.)
Yes, but /main and /profile are going to be separate (html) pages, so you'll have EntryPoint for each then (loading/unloading GWT modules). Is that want you want? Google's AdWords is an example (written in GWT), each tab is a separate HTML page (/dashboard/, /cm/CampaignMgmt, ...).
I really like the approach in GWT where you can define "divs", "spans" etc in a regular html page, then in the GWT entry point simply push a button or some other component inside the div.
So small example, here is a snippet of a gwt html page:
<body class='page'>
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position: absolute; width: 0; height: 0; border: 0"></iframe>
<div>
Query Terms: <span id="txtQuery"></span>
<span id="btnQuery"></span><br>
...
</div>
</body>
And here is a small java snippet contained in the gwt entry point:
ClickHandler clickHandler = ...
TextBox txtQuery = new TextBox();
Button btnQuery = new Button("Query", clickHandler);
RootPanel.get("txtQuery").add(txtQuery);
RootPanel.get("btnQuery").add(btnQuery);
One of the reasons I like this approach is that it allows non java coders to design / write the html stuff, and I also like the separation between GWT / java code and the html code.
However... this may work well for a simple web page, but how do you scale this approach up into many webpages? From what I understand, the "GWT way" of doing things is to have one webpage and use history to hide and show various GWT components. I have built 2 projects in GWT using this standard technique, but recently discovered that you can do the sort of thing I showed above.
Is there any way of scaling the above 2 snippets into multiple html pages, where GWT injects its components into standard html pages?
here is no GWT way. At least not in GWT mission statement. If you want to pursue your aproach there are multiple ways how you can do it.
GWT app per page. (e.g. on each page a gwt app specific for this page is included). You simply compile a new GWT module for each page where you need some GWT functionality. You can use few of them together on one page, or none. This approach is good if you GWT apps are going to be really simple, and you don't need to use stuff like GXT Grid on every single page with different settings, otherwise you will waste user browser will have to download large chunks of JS code over and over, and this will be a big problem if you have a lot of pages.
One big GWT app for all pages. Just put everything into single GWT app, create some kind of switch (some js variable) so the app knows what it has to create. Some code splitting might be used, so on each page only things which are really required will be downloaded. Since the same JS will be used on each page, caching should solve the problem with downloading application code over and over (but you still have the problem with actually parsing/running the code very time user changes the page)
There is also a third approach, the most effective of all, but the hardest as well. As soon as the user loads one of the pages, there is no more navigation, gwt module simply takes template for page to which user wants to navigate, and replaces current html code with newly generated template. This is quite easy to achieve, if you will use TextResource from ClientBundle and HTMLPanel. The problem is with navigation in address field (GWT app will have to be responsible for changing the address, so the users can create bookmarks or send the link to their friends). You will use one single GWT script for this and some code splitting is recommended.
All three approaches are totally valid, depending on your requirements you can pick any of them. Also if all you want is to provide people ability to use HTML to layout GWT screens, you might want consider using combination of HtmlPanel and ClientBundle's TextResource.
If the goal is to have designers work on HTML rather than Java, then how about UiBinder? It'd give you what you want (separate HTML –or rather, XHTML-like– code from Java code) inside a GWT project.
can i design my web pages in html and css instead of java methods and use gwt only in parts of page that i need ajax? and which one is better gwt, extgwt, vaadin(it run apps in server-side.can i also use it in client-side?), etc...? do i also need to know javascript for using gwt?
thanks
can i design my web pages in html and
css instead of java methods and use
gwt only in parts of page that i need
ajax?
Yes, you can. You can create a div on your HTML page and insert your GWT widget there.
which one is better gwt, extgwt,
vaadin(it run apps in server-side.can
i also use it in client-side?)
I don't know about vaadin but Ext-GWT is a set of ready made components to use with GWT which make your life easier especially if you want to build an web app that looks and feels like a desktop application.
do i also need to know javascript for
using gwt?
No, it can be useful sometimes but is not necessary.