Develop Reference

Integrating Javascript Frameworks with Java Web Frameworks

I have what I think might be a strange question to ask.
Recently I was playing with some java web frameworks (jsf with primefaces) and I noticed that it's quite good at handling form data or when you play along with the jsf components. I also did a project using grails and again it was useful for form data.
But the moment you want to do something which requires a little deviation; then I found myself doing weird things (examples are tag clouds with large strength values using primefaces and single page webapp forms with grails).
This resulted in some very messy html+javascript code for my grails things(which I blame on my inexperience with javascript). This was done because I was using expression language (grails in this case) to populate some of the javascript. The worst part was that I had a bunch of custom javascript code inline with my server pages (I could of refactored a little out but I think one would still have alot of javascript calls inside a single page).
So now to the question(s) :)
[main question] Are there any resources that demonstrates how to design or at least implement maintainable javascript with server pages (gsp, xhtml, etc) ?
The reason is that I find that there are some neat javascript frameworks, but using them with server pages seems a bit unnatural if one takes into account the expression languages for server side frameworks? Unless it's normal to do this type of thing :) ?
Are there appropriate frameworks for Single page webapps using java?
My current answer is that GWT, Vaadin (based off GWT) and perhaps JavaFX qualify. Maybe ZK, Flex and (Grails/Roo + Flex/GWT) also qualify as well?
Are java web frameworks still useful for presentation layers?
My current answer is that they might be when you are dealing with portal type webapps or Web 1.0 apps for lack of a better word. The other case is that they could be when you use alot of role based security and you want to filter things out based on roles, but even that has counter arguments.
My other answer to this is that it might be better to use a java server to provide your web services and then rely on something else to do the front end?

This might be OP, but for single page apps, it's easier to serve up data from the server via JSON(P)/XML/whatever and then use things like Backbone to process and modify the view(s) accordingly. That way, the server can use REST/SOAP/websockets/whatever, and the browser app becomes a full-fledged app.
I haven't actually done this, so don't quote me, but I imagine that it should make sense.

Backend technology for front-end technologies like Twitter Bootstrap [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
This a noob alike question, but here we go.
I´ve read about Twitter Bootstrap (among other presentation frameworks), which gives the designer/programmer the tools to build easily the front end of a webapp.
What I don´t know is how to integrate that with a, for example, Java EE backend. I mean, do those presentation frameworks allow to integrate them with any backend technology (such as Java, PHP, Python, etc)? or are they linked to a specific technology?
I've built a few Java EE web applications using GWT for the presentation layer and Java in the server side; but as I´ve pointed before, I still don´t catch how it would be integrate Bootstrap with Java for example.
I know it´s a very general question but I´d appreciate any help.

Twitter Bootstrap is a frontend toolkit, so it's basically css and HTML. That means it's not tied to any specific backend technology.
From the blog post announcing it:
At its core, Bootstrap is just CSS, but it's built with Less, a
flexible pre-processor that offers much more power and flexibility
than regular CSS. With Less, we gain a range of features like nested
declarations, variables, mixins, operations, and color functions.
Additionally, since Bootstrap is purely CSS when compiled via Less, we
gain two important benefits:
First, Bootstrap remains very easy to implement; just drop it in your
code and go. Compiling Less can be accomplished via Javascript, an
unofficial Mac application, or via Node.js (read more about this at
http://lesscss.org).
Second, once complied, Bootstrap contains nothing but CSS, meaning
there are no superfluous images, Flash, or Javascript. All that
remains is simple and powerful CSS for your web development needs.
What that means is that you can use it in any way you want. You can generate the markup server-side and serve it to the client (JSP for instance), you can serve a static fil from the server and add dynamic content via ajax (the backend could be servlets or some higher abstraction like Spring MVC or Jersey), or something in between like server-side generated "base" with some dynamic content/behavior via JavaScript/ajax. Another choice could be to drop the servlet container all together and use something like Play! Framework.
Edit:
I don't think Bootstrap creates the HTML elements for you, it creates the css using Less. You have to write the markup yourself on the server, and use the styles and idioms described in the docs: twitter.github.com/bootstrap/components.html You add dynamic values from java through technologies like JSP or template engines like Velocity, Freemarker, StringTemplate etc. Reading values from users is done by handling HTTP GET/POST actions and reading the attributes. Typically you handle a GET by
Reading the parameters
Select the template/JSP by the url
Interpolate dynamic values calculated by java.
For instance if a user does a GET on ./order.html?orderId=1 you select the order.html template, interpolate values from orderService.getOrder(1). Have a look at the Freemarker examples to understand how a template engine work. You basically pass in a Map<String, Object> and the value associated by a ${key} is rendered in the page before it's sent to the browser.

If you are Java-minded, you may like Tobacco, which I made just for that: http://tobacco.noroutine.me/.
Basically it's maven project template with latest js libs and latest Twitter Bootstrap.
There are some similar things around like this. One which is closest to your needs may be resthub especially their Backbone stack may be of interest.

as ebaxt said, Bootstrap is only a modular front end technology. Your question is about the visual part of a Java EE based application.
It will basically deal with MVC patterns and their implementation/technologies (EJB, Spring MVC).
And then you will finally deal with presentation technologies : writting in .jsp pages, using JSF or Struts or GWT technologies or (of course) BootStrap (like any other js and css code) to get visual results and accessibility. By doing this, you will get an entire well structured app.
Sorry for English mistakes if I have done some, I'm a french guy.

Here's an example.
It shows a simple webpage with bootstrap front-end integrated with java-backend service.
Or in another post it mentions integrate bootstrap with spring.

GWT Strength compared to other framework?

One of the main strength of GWT is to code in java and everything gets compiled and is loaded by several browsers through gwt deferred binding??
Apart from this, i.e. working only on a single code base, do GWT has any other advantage compared to other existing framework??
Edit:
I'm trying to say why should we use gwt and not another framework?? What is there in GWT that makes it special for web application development?? What GWT makes for us and another framework or toolkit don't do??
As i said above GWT makes deferred binding which is a plus, so I wanted what other things it do that makes it special and unique??

My point of view :
Pure Java : In standard web application you write html, css, php, javascript, mysql and others and others. In gwt you write java and java and java. Pure Java knowledge is enough for everything.
gwt-rpc mechanism is very simple to communicate with server and uibinder or any other tools are enough for ui development. plus there are many widgets that facilitate front-end developing
Debug : Debugging Java code is very very easy than debugging Javascript code
MVP Development with Activities and Places
Compiler that you can do all the thing, that you can do in Javascript, in GWT. In addition, working with JSON and XML is very easy and History management is unbleviable
and at last I'm a big big fan of Google and they did it so they did the right thing

One of the other benefits of GWT is that you can share code between the client and server components of your app. For example, if you're doing a graphical app you can write computational geometry code and have the same code evaluate on both sides. Of course, you can also do the same thing by using server-side Javascript (for example, Node.js), but server-side Java has serious advantages for performance, ease of deployment, and interoperability with other things.

My favorite benefit is their RPC mechanisms. JSON gives you a huge reduction in payload size, but GWT's serialization policies allow the data to be sent over the wire without key labels for each value and reduces payload size by another 30% or so. On top of that, its easy to build those services using Spring and Hibernate.
Another benefit is the use of md5 hashes for the filenames of compiled JavaScript, allowing you to set never expires cache headers for all of your code.
Last but not least (actually, it is the least cool of the benefits), there are free tools now for GUI design so you don't have to build a GUI by writing XML and Java or HTML and CSS.

GWT follows a principle of no compromise high-performance Javascript.
They have already invested a lot of work into making your application highly performant. For instance, the "compiled" Javascript files it generates are actually .html files. This is due to an issue that some browsers do not correctly support compressed .js files. This sort of tweaking is beyond what most people would do manually.
There are easy to use tools to help you improve the performance of your own application. GWT.runAsync, for instance, allows you to define splitting points in your Javascript which will be used to automatically divide up monolithic Javascript files into bite sized chunks to load.
As has been said, the RPC mechanism performance and ease of design is amazing. MD5 hash based names for the compiled Javascript means for great caching.
My biggest plus for GWT still has to be the debugging capabilities. Javascript debugging has always been messy and frustrating. With GWT you can employ the full debugging facilities of Java when working on your client side code.

There are no simple answers to these questions:
I'm trying to say why should we use
gwt and not another framework?? What
is there in GWT that makes it special
for web application development?? What
GWT makes for us and another framework
or toolkit don't do??
There is no silver bullet. Everything depends on the project and requirements. GWT may be good in one project and other frameworks may be good in other projects. It also depends which other frameworks are taken into account.
In my opinion the most significant element which makes GWT different from almost all other Java web frameworks is that the client side is fully in JavaScript while most of other frameworks generate usually plain HTML code. The JavaScript approach to the client has its benefits, to name a few:
it is fully AJAX which creates great user experience,
views state is managed in the browser,
it communicates with the server asynchronously;
it communicates with the server only to get the datal
However, there are also some drawbacks:
browser history support - it isn't as good as in HTML based frameworks; proper use of history mechanism isn't easy and requires extra effort from developers;
applications aren't SEO friendly;
more complicated page layouts may kill web browsers - sometimes it takes a long time to generate a page, especially when using additional component libraries;
For developers it is very important that GWT hides JS from them. You write in Java and you get fully working AJAX based client application in JS usually without touching a single line of JS. This is great especially when you need a lot of AJAX in your application and you don't know JS. This is specific to GWT - using JS and AJAX in other frameworks isn't usually that easy (Vaadin may be an exception but it is GWT based).
It is worth mentioning that in many cases GWT can be combined with other web frameworks - this way you can have most of you application content created in HTML based frameworks and some more complicated AJAX parts in GWT.

If you want a recent comparison of Java Web Frameworks, here is an interesting presentation from Devoxx 2010 :
http://raibledesigns.com/rd/entry/my_comparing_jvm_web_frameworks

Where to start? Java application with multiple front ends

I've got an application here that I wrote many years ago that consists of a heavy-weight front end that directly queries a database server. This application runs on about 7 dedicated workstations. There is also a web-based front-end that I whipped up that shares the same feature set, and a web-based administration too for managing and reporting on the data -- they all just hit the database directly.
The application is quite simple and I understand the problem it solves very well. It could use an update, and I don't even have access to the tools necessary to work on the GUI anymore. I've been getting into Java lately, and it seems like a rewrite of this app would be a good project to get started with.
So my question then is this:
The application will require a non-web GUI, I suppose in Swing. This is necessary for very particular reasons. The application will also require a web-based GUI with the same exact features as the Swing front that will probably be deployed as a JSR-168 portlet, and a web-based administration tool (portlet also). With my previous design I ended up with a lot of duplicate code because each component had its own code base, and I foolishly used stored procedures to help to ensure that critical calculations were at least consistent.
Where should I start? I'm having such a hard time wrapping my mind around how this should all work in the Java world. I guess what I'm having the hardest time with is how do I create an application that can have both a Swing (or whatever) front-end and a web-based front end with as little duplication as possible?
Edit: I know conceptually how this can work. What I'm asking is for advice specifically related to Java technologies. Which frameworks to consider, etc.

Build a Core that contains the business logic. Use JDepend or a similar tool to ensure that it nowhere references anything swing or anything web/jsp/servlet.
Build the two UIs: For the web version pick a webframework of your choice and call your business logic from there.
For the Swing framework you have two options: access the businesslogic through webservices (you could use RMI or whatever, but I wouldn't), i.e. the logic is on the same webserver that serves the webapp (I'd probably prefer that). The alternative is to ship the weblogic with a swing GUI. Makes the coding and debugging easier, but now you have multiple points that access the db which causes headaches when you want to use caching
In any case you should only duplicate the gui stuff, once in html/css/javascript and once in swing.
Congrats on that project it will teach you tons about design and software architecture

You should have a project with all business logic.
Then, 2 separated projects, 1 for the web access, and 1 for the Swing application. those projects both calling the business logic API.
in these 2 projects, have only presentation code

Use a middle tier server.
Swing Client -> middle-server with spring-remoting -> database
Web Client -> middle-server with spring-remoting -> database
Web Client write once any MVC framework will work stripes, struts, even grails if you are brave rememder to keep it thin....
Swing Client write once using miglayout, and glazelist.
http://www.miglayout.com/
http://publicobject.com/glazedlists/glazedlists-1.8.0/
take a look at this posting.....
Java Swing: Libraries, Tools, Layout Managers
Middle-server write once using jdbc cause you have the db already..
http://www.springsource.org/
database write once using whatever you like. It seems already have this....

Obviously start with a unified code base. You might also want to consider whether you really do need multiple interfaces.
You want to make sure that your code does not have unnecessary dependencies. For instance, make you UI as shallow as possible, rather than the usual ball of mud. Avoid singletons, as they cause dependency hell.
It may seem very enterprisey to have a middle tier, but it also adds a lot of work. For a small group it is entirely pointless.

How to create Java Custom Web Controls?

This question was originary in my head as "Can I use AWT controls in a Servlet?", which will show all my ignorance on the subject.
I am new to JAVA technologies but after a bit of reading, I seem to understand AWT controls directly hook up the OS GUI elements so there is no way to use or extend JPanels, JButtons and so forth in a Servlet to be injected in a JSP and let the browser render those controls (an alternative could probably be embedding an applet in a JSP but I don't wanna do that).
I am looking for a way of building custom re-usable web controls using JSPs and Servlets.
How is this usually done and can you provide some samples/links?
EDIT: This is part of a test run I am giving to the Google Application Engine - so it would probably make sense for me to explore the Google Web Toolkit - any pointers in that directions would be appreciated as well.
Any help appreciated!

AWT is the OS-specific part of UI rendering on desktop, not on the Web side of things in which JSP, Servlets etc. live. A bit more specifically, things like Swing (which has those JPanels, JButtons and so on you mentioned as UI components) and SWT are currently based on AWT and work on top of it to render the UI and allow it to work as expected.
Unfortunately all this means you can't use AWT based components on Web pages since, well, Web pages are (usually) platform agnostic in the sense that they don't get to decide exactly how parts of the UI are rendered, there's just a pile of markup which is treated as a sort of plea to the Web browser to do things the Web designer hopes for without 100% quarantee that the end result will be what the designer wanted.
There's been a lot of reinventing the wheel to achieve Swing/AWT kind of UI creation on the Java's Web side since it's a clever model, like you seem to already know Google Web Toolkit tries to do its part to make Web seem more like a desktop application while in reality it merely automates the needed JavaScript Ajax underneath to make the web page behave as if it was a desktop application. One another framework for this is Tapestry which I haven't personally used but some think it's a decent choice too.
And then there's of course my personal favorite Apache Wicket which allows you to have a true separation between Java code and markup and it behaves quite similarly to Swing UI code too! In fact there's a whole bunch of name collisions with Swing's UI component classes for the most simple things. Assuming you're any familiar with coding a desktop application UI I strongly recommend Wicket, it abstract away the boring and tedious parts (Servlets, URL resolving, page bookmarkability, security...) and replaces them with an event-driven model similar (but not equal) to Swing's EDT which is where the desktop UI magic would normally happen.
While this is going completely away from what you're looking for, with Wicket you can create such a set of POJO Web components that you can reuse them just about anywhere and thus get what you asked for. A word of warning though, Wicket assumes you really know how to code with Java and some laughably easy things may be tedious at first but in the end you should be quite happy with what you got.

In JSP you are probably looking for Custom Tags. Custom Tags are ways to create re-usable code components to be used in the display of JSP pages. There are some very nice ones out there such as those found in the struts2 framework or the display tags library.
But you can write your own or extend the existing ones with new functionality.