is it possible to have parts (instead of the entire page) of an HTML page written with GWT?
Is it usual?
I'm quite new to GWT and trying to understand the workflow of it.
Thanks.
I meant HTML static pages, written by hand (or any other means) and on these pages have parts (forms, media, whatever...) in GWT.
Yes, the simplest way this can be achieved is setting an id attribute on the elements you want to be filled in by GWT, e.g.
<body>
<div>
...
<div id="myId"></div>
</div>
</body>
, and then using
RootPanel myIdPanel = RootPanel.get("myId");
so you can put any GWT contents into myIdPanel.
Note, that there are many more ways to mix HTML that's generated by GWT and by other means - basically any combination is possible.
You might want to check out their UIBinder approach:
http://www.gwtproject.org/doc/latest/DevGuideUiBinder.html
Related
We have a web application that its UI is based on GWT.
We are pretty satisfied from the technology, but we have one major problem: We get html files from our designer, and it takes a lot of time to integrate them into our GWT code.
Is there a quick way or rules to do that?
For instance, I would like to take the html, put it almost "as is" in a ui.xml file, and then start binding the components to UiBinder fields.
What is the quickest way to do that? What should I do with the CSS and JS files that I get?
I need some guidelines to make this conversion, so it will be quick & easy.
We have the same problem. It might be hard for a designer to get used to GWT widgets. But he'll have to forget about making HTML proof-of-concepts and using GWT directly.
We didn't overcame the difficulty. As a result, many GWT features are under-used (like CSSResources, or GWT-Bootstrap layout capabilities).
I would advise to have him learn the xml of GWT widget libraries.
You can also start by using GWT Designer. This way he can still do the design, learn the XML bit by bit, and you can still work on wiring the components.
Of course it is a slow process. People don't change old habits instantly.
Errai seems to fit your requirements.
Basically is uses regular HTML5 templates, binded to GWT logic.
"Create standard conform HTML5 templates or use existing HTML and CSS files to design your web and mobile applications."
http://errai.github.io/
Here is an example of a sign-in page:
<!DOCTYPE html>
<link rel=stylesheet href="css/TodoList.css">
<div data-field="main">
<h1>Get it done with Errai.</h1>
<div class=form>
<p class=error data-field=loginError>
Login failed. Please check that your email address and password were entered correctly.
</p>
<input type=text data-field=username placeholder="Email">
<input type=password data-field=password placeholder="Password">
<button data-field=loginButton>Sign In</button>
<p>New here? Sign up in seconds!</p>
</div>
</div>
source
(p.s. I've never used it, yet)
I working on a web app. Is it good to use own html tags than divs? I mean using own tags instead of classes. This will make it easier to bind up dynamic content by splitting up common classes with id.
Example
<div id="message">
My Message
</div>
Replace with this
<message>
My message
</message>
I don't understand why you want this, because now HTML5 supports a lot of semantic tags like <audio>, <address>, etc. Usually, you can achive block-effect (i.e. combining or grouping related content in a block) by <div class="myblock"></div> for special purposes. Anyway, as you've asked, then for your information—you can use custom tags in HTML. Also you can style those using CSS and can use selectors to perform operation on those using JavaScript.
Note: Prior IE9 versions don't support custom tags. Hence you should create your tags like this using JavaScript:
<script type="text/javascript">
document.createElement('mytag');
</script>
The main practical reason for not doing this is that IE 8 and older do not let you style your custom tags. As Vishal mentions, there’s a workaround to this, but it does not work when JavaScript is disabled. And as he points out, you can use the class attribute—you should use id only for uniquely identifying a single element.
You can also use class attributes for elements other than div. You can first select an element so that its default (non-CSS) rendering is the best possible (among available alternatives), then add a class attribute.
In CSS, you would then normally use a class selector without tag name, e.g. .message (if you use class=message).
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.
The Facebook comments count can be done in three different ways: (without directly using JS)
<fb:comments-count href="http://example.com" />
<iframe src="http://www.facebook.com/plugins/comments.php?href=example.com" />
<div class="fb-comments-count" data-href="http://example.com">0</div>
The issue, however, is that doing something like this messes things up:
<p><div class="fb-comments-count" data-href="http://example.com">0</div> comments</p>
...because a <div> is firstly, not valid inside a <p> tag and secondly, looks wrong (though this could be fixed with CSS).
Basically, my question is: is there a way to do the above without using a <div> (a <span> for example), bearing in mind that I want to use the HTML5 method and (if possible!) want to avoid using javascript?
Clarification: I would like to avoid writing extra JS in the page simply because the MVC view currently looks nice and clean and I would prefer to keep it that way. Obviously, I'm still including the Facebook Connect library.
So, one solution would be to use a DIV instead of a P as the outer element.
I Have a hidden box in my HTML. How I can get it value in my GWT when onModuleLoad??
the hidden box will content a value pass from another page. Now I can see the hidden box content the value but I fail to get the value in my GWT onModuleLoad.
HTML page:
<%
String sSessionID=request.getParameter("NA_SessionID");
if(sSessionID==null)
session.setAttribute("NetAdminSession",(String)session.getAttribute("NetAdminSession"));
else
session.setAttribute("NetAdminSession",sSessionID);
%>
<form name=frmMain method=post>
<input type=hidden name=NA_SessionID name=NA_SessionID value="<%=(String)session.getAttribute("NetAdminSession")%>"></input>
</form>
You can access any element in the DOM by using the GWT DOM Class. For example, if your hidden box has the id "NetAdminSession", you may use the following to access the hidden box...
DOM.getElementById("NetAdminSession");
To: Geoffrey Wiseman
my HTML file is in the GWT HTML.. but I change it to JSP file instead of HTML
To: prometheus
Thanks you information, I will give it a try now.
I'm not sure what your overall approach/architecture is, but it might also be helpful to look into some of the new features added in GWT 2.0. Specifically, Declarative Layout with UIBinder. With this you can actually construct your user interface with declarative XML instead of using pure Java. I would steer away from creating too much of your UI in the actual HTML file since it will be easier to control those UI elements if you construct them in your GWT code. You can still stick to good MVC principles if you break your classes/code up the right way.