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.
Related
I am developing a web app with GWT. I'd strongly prefer to code everything in Java instead of hardcoding anything in HTML and CSS. I'm also using GQuery (or GWTQuery) and I'm wondering if using compile time selectors with GWTQuery completely eliminate the need to hardcode any HTML or CSS at all - and have the speed and performance of a fully hardcoded app?
Let me explain with few words what gwt and gquery are.
1- GWT is just a compiler which gives you the tools to produce optimized javascript from java.
2- The js produced with GWT is mainly used to modify the DOM (apart from calculations, business code, ajax etc).
3- GWT additionally gives you a set of widgets, as an abstraction of the DOM, so as you can work with panels, buttons, trees, etc. instead of raw HTML. I think this is what you call hardcoded html.
4- But GQuery is a complement to GWT. It gives you a set of utilities taken from jQuery and ported to java to write less code, it is mainly oriented to manipulate the DOM (select nodes, modify, animate, etc) apart from other cool features like an easier ajax syntax, safe typing, promises, json/xml data-binding, etc.
Said that, don't think that the gwt widget abstraction will make you completely forget about dom and css. Sooner that later you will need to create your own widgets, or customize the current ones.
I think that the only way to forgot almost the DOM is to use a 3rd party widget library like gxt, mosaic, smart-gwt, etc. Because the GWT widgets are tough, they are designed to give the designer the option of easy stylizing them with css.
In the other hand, gwtquery will not help you to forget the DOM at all. It is designed to enhance static DOM elements which are in the page, enhance the DOM of gwt widgets, or create your own DOM structure based on html.
About gQuery compiled selectors, they are used in the same way dynamic selectors are: to select DOM elements, but with a much better performance because the compiler optimizes them. I think you misunderstood their objective, they don't give you any way to eliminate hardcode HTML.
UPDATE: To answer your last comment, it is NOT possible to generate static HTML or CSS with
GWT or GQUERY. They always produce static JAVASCRIPT code written to .js files (or written into javascript tags in .html files depending on the linker)
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 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.
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.
I have a GWT app with a bunch of textboxes. In firefox I would expect that when I type a word in a textbox that I have already typed in and submitted, that firefox would offer to autocomplete that text. But for this GWT app it is not happening.
The ids and the name of the html elements are the same everytime. I don't know if it makes a difference, but I am using UiBinders for presentation.
Also in IE it seems that none of my css stuff is loaded. And when I IE developer tools on my GWT page, it can focus in on any of the textboxes it just focuses on the encompassing DIV around all the textboxes.
The problem with autocompletion is caused by how the DOM tree is created in a dynamic web application, such as the one created using GWT. Basically, all the DOM elements (textboxes, etc) are dynamically created, after the page is loaded. However, AFAIK, the browser only supports autocompletion on "static" elements, ones that are part of the HTML host page. So, for that reason you won't get autocompletion support from your browser in a GWT app. Fot some cases, you can still emulate it via SuggestBox.
You could try including the elements you want autocompletion for in your HTML host page, and then wrapping your GWT Widgets around them - that might work :) But it's not the "prettiest" solution, since you probably want autocompletion for a number of unrelated fields/elements.