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)
Related
I just started looking into bootstrap-vue (and vue actually) and I noticed that <b-col sm="6"> translates into the classic <div class="col-sm-6"> so I wonder if there is any difference or advantages in using <b-col sm="6">.
Most web designers are confortable in using <div class="col-sm-6"> so why asking them to switch to the other notation?
There is no difference but only more convenient to use.
By setting sm="6" as a property, you can more easily change the value (dynamic) without needing a jquery but purely a js function within Vue. With this you make full use of Vue which is a lot easier to see.
:sm="getColSize"
Can be anything you want. With classes i find it more effort.
<b-col> (and the other layout helper components) are purely for convenience, as they require less typing (expecially for complex colums that have different width at different breakpoints).
They are written as Vue functional components (they keep no state information), so render fast.
You can be free to mix and match with regular html markup for layout, or not use them at all.
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
I have a Java EE 7 project and in web application part I am trying to open JSF forms.
However when I run it, it just sees the initial form.
How can I enable it to reach other forms?
Small example from my code:
<body>
<h:form id="firstForm" prependid="false">
...
</h:form>
<h:form id="secondForm" prependid="false">
...
</h:form>
</body>
This answer helped me a lot. And also there were some referance problem. After correcting them, I can see all the form structure.
I know the code above is not nested form structure, but for other people who are curious about this issue, you cannot make nested forms in HTML5 (for both <h:form> and <form>). So be careful to your template.
Good luck!
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.
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.