Java Server Pages are at the hearth of Fatwire and Sites development. The core activity in CMS development is extracting content created within the system to render it in a web page. Normally the web designer provides the HTML mockup, then the developer write code to replace key parts of the mockup with the actual content stored in the CMS.
Writing JSP templates is the main task of the programmers in charge of implementing the mockup in the CMS. Sites programmers may also choose to code XML templates, using the less powerful XML based proprietary language of Fatwire/Sites.
There is another option today: pure Java controllers with pure HTML views, using the AgileSites framework; it can significantly simplify the work of implementing the mockup, as described below. However, let us discuss the available options in order.
You may have significant problems with JSPs, because it is a technology not designed to implement business logic. Indeed, JSP is only a presentation layer, the View Tier of the ubiquitous MVC pattern. The pattern actually assume a controller layer. Unfortunately, a controller is not available out of the box in Sites, only the view. Furthermore, standard tags actually are verbose and requires the developer to perform all the steps to extract the model inside the view layer (a job that the programmer should delegate to a controller layer).
So in Sites often we end up with business logic embedded in the presentation layer (the view). Sometimes, it is simple business logic (just read the content). However, it can became pretty complex especially when you need to perform integrations. Long and detailed JSP, containing much more java code than HTML , are frequent.
Writing java-filled JSPs are problematic because:
As a result of the considerations before, I consider the JSP only template technology of Sites a big drawback that hinder productivity and in many cases actually put projects at a risks.
It is not an exaggeration. Why?
Because developers working under pressure rarely have the discipline of follow healthy coding styles. Many projects ends up in a collection of large, hard to read and understand, complex spaghetti JSPs. Those JSPs use crippled Java so they are repetitive and often filled of copy-and-paste code. Finally they implements business logic that should really go in a controller layer.
So what we can do?
What we need in my opinion is the following:
You can do it all with AgileSites. The framework (that is completely open source, free and usable with no license charges in commercial projects) satisfies those requirements by design.
Let's see how.
First, AgileSites lets you to code in Java everything. The details of its magic are in this post:
http://www.sciabarra.com/fatwire/2013/06/28/agilesites-simplifies-fatwire-sites-development/
The simplest possible implementation of a template is then a Java class like this:
public class Hello extends Element {
@Override public String apply(Env e) {
return "<h1>Hello, world</h1>";
}
}
Considering only this sample, AgileSites provided a solution for writing business logic using full Java (you can create classes, use inheritance, share objects and so on)
However, it looks like we created a problem that JSP were supposed to solve: producing HTML in pure java is cumbersome.
Actually, this java class is only part of what the framework provide: indeed, it provides out of the box the Picker, that addresses the HTML generation problem in a good way.
In AgileSites, the programmer uses the HTML mockup provided by the Web Designer, leaving it in its original form. Here is the code you can use to render the mockup with the picker:
@Override public String apply(Env e) {
Picker html = Picker.load("/blueprint/template.html");
return html.outerHtml();
}
This code will load your mockup and emit it in output. We reached goal 2 (keep the original html), and we are close to reach the goal number 1 (separation of html from code), in an MVC way.
Of course, that is interesting but it is not enough. For example we may want a template that is only a snippet of the mockup. What we can do? Usually in JSP template development, we do exactly this: we cut snippets of the mockup and place it in the JSP. A practice that makes updating of the template a real pain. In AgileSites you do not need to do this. Instead, you can use this code:
Picker html = Picker.load("/blueprint/template.html","#content") ;
return html.html();
It is enough to cut the snippet we need. The Picker will “pick” (hence its name) the snippet identified by the id “content”. The syntax for selecting the snippet we want, is the same used for CSS and the ubiquitous jQuery library. The CSS selection syntax is so well know that should not create any problem to Java developer of any level with some exposure to the web. Note that we used the “html” method, that should probably be named “innerHtml()” since it returns the inner html of the block selected with “#content”. The the outerHtml() we used before returns the html including the node you selected.
Now things should became easier to understand. We also reached goal number 4, cutting snippets from the original HTML. However, we still need to place the actual content in the HTML. Here is where the real power of the Picker lies: it lets you to replace parts of the original mockup with the actual content.
The picker, combined with the API to access attributes described in the previous post, creates a very powerful tool to implement easily templates keeping the original mockup and let us to reach all the goals we discussed before.
This code:
html.replace("#title", a.editString("Title"));
combined with this html code in the mockup:
<h1 id="title">Welcome</h1>
lets you to replace html in the mockup with the content stored in an attribute.
Actually, the picker is much more powerful that just this. You can replace attributes, delete nodes, use complex selectors, append and prepend to existing html and so on.
You can get an idea of what is possible to do checking this example:
The Picker itself is described in the tutorial here:
http://www.agilesites.org/tutorial/Picker.html
and more in detail here:
http://www.agilesites.org/reference/Picker.html
Happy picking with AgileSites. It makes implementing templates a real joy.