How do JSF view technologies translate client-side?

Question

So I understand that JSPs are a mixture of a client-side code (DHTML, JS, CSS, etc.) and Java. In this way, JSPs are kind of like pure PHP or pure ASP. When the web container receives a request for a JSP, it compiles the Java inside the JSP, executes it and then returns the resultant client-side code in the HTTP Response.

I also understand that an alternative to JSPs are Servlets, or a Servlet/templating combo, like FreeMarker. The servlets contain pure Java (business logic), and the templates contain presentation logic.

What I don't understand is how JSF-derived technologies like RichFaces, PrimeFaces and ICEFaces turn Java code into client-side code that can run in a browser. I've also heard that the major draw to these frameworks are the "rich" UI controls they come with, but am having a tough time connecting all the dots.

Do these frameworks get compiled to JS like the GWT does? If that's the case then I would assume that these rich UI controls would be the same as, say, jQuery UI controls that are just pure JS.

If that's not the case then I just don't understand (at all) how these frameworks turn server-side code into "stuff" that can execute client-side.

Thanks in advance!

Answer 1

What I don't understand is how JSF-derived technologies like RichFaces, PrimeFaces and ICEFaces turn Java code into client-side code that can run in a browser

The HTML is generated by encodeXxx() methods of UIComponent and/or Renderer implementations. Those methods are invoked during render response phase, starting with the UIViewRoot which delegates the call all the way through the entire component tree hierarchy.

JSF implementations such as Mojarra and practically all component libraries are open source. To take the JSF standard <h:inputText> component as an example, start looking at com.sun.faces.renderkit.html_basic.TextRenderer class to see all the HTML generating code.

---

Do these frameworks get compiled to JS like the GWT does?

Absolutely not. Open a JSF page in browser, rightclick and View Source. It's all just HTML code, if necessary along with auto-included CSS/JS files. With GWT it's one and all JS code.

See also:

• Java EE 6 tutorial - Creating custom components - to learn how to program it yourself.
• What is the difference between JSF, Servlet and JSP?
• What is the need of JSF, when UI can be achieved from CSS, HTML, JavaScript, jQuery?

Answer 2

No, JSF is not something like GWT. The idea is different. But let's start from the beginning.

Servlets are not really alternative to JSP. JSP is a technology, which is responsible for View part in Model-View-Controller design pattern. Servlets usually play role of the Controller.

In a typical scenario Servlet receives request from the user, parses it and calls bussines logic (Model) - it could be just the set of java classes or EJB components or whatever else which calculates something, talks to database, etc. Then Servlet gets the data from bussines logic (if any) and redirects user to a proper View element - JSP, pure HTML page, some template engine, etc.

JSF is sort of a layer over JSP + Servlets that makes programmers' live easier (although many would strongly diagree with that :) )

JSF page is basically a JSP page, that uses set of specialized tags - components (JSF native tags or RichFaces tags or ICE Faces tags). These tags can be written in Java, can boundle JavaScript, CSS. The final effect is that these tags generate HTML representing "component", for instance fancy table with sorting capabilites.

So you have for instance component that you place on JSP page and it represents nicely looking table.

In addition JSF is armed with standard controller, which is not written in Java, but is a set of navigation rules between pages written in XML.

One more element are JSF Beans, which are bounded to JSF pages and are automatically filled with data taken from these pages. It is often quite straighforward - user fills the form, which is a part of JSF page (form also use specialized tags - components). Once this form is submitted the JSF Bean class is filled with data and action method is called. The action method returns a string, which is used to identify page to which user should be redirected (the rule is taken from XML controller configuration).

So in case JSF the frontend part is generated in backend - JSF tags (or components, as people call them) are interpreted in the backend and the backend generates HTML from them.

This could be contrasted with thechnologies, which separates frontend and backend. Backend receives and returns data in the form of XML or, more often, JSON and exchanges them with frontend part of the application. Frontend could be written in JavaScript, Flex, etc. So backend and frontend are totally separated.