Question

When working with web-designers in a Spring-MVC and JSP environment, are there any tools or helpful patterns to reduce the pain of going back and forth from HTML to JSP and back?

Project requirements dictate that views will change often, and it can be difficult to make changes efficiently because of the amount of Java code that leaks into the view layer. Ideally I’d like to remove almost all Java code from the view, but it does not seem like this works with the Spring/JSP philosophy where often the way to remove Java code is to replace that code with tag libraries, which will still have a similar problem.

To provide a little clarity to my question I’m going to include some existing code (inherited by me) to show the kinds of problems I’m likely to face when change the look of our views:

<%-- Begin looping through results --%>
<%
List memberList = memberSearchResults.getResults();
for(int i = start - 1; i < memberList.size() && i < end; i++) {
    Profile profile = (Profile)memberList.get(i);                  
    long profileId = profile.getProfileId();
    String nickname = profile.getNickname();
    String description = profile.getDescription();
    Image image = profile.getAvatarImage();
    String avatarImageSrc = null;
    int avatarImageWidthNum = 0;
    int avatarImageHeightNum = 0;

    if(null != image) {
        avatarImageSrc = image.getSrc();
        avatarImageWidthNum = image.getWidth();
        avatarImageHeightNum = image.getHeight();
    }

String bgColor = i % 2 == 1 ? "background-color:#FFF" : "";
%>
<div style="float:left;clear:both;padding:5px 0 5px 5px;cursor:pointer;<%= bgColor %>" onclick='window.location="profile.sp?profileId=<%= profileId %>"'>
    <div style="float:right;clear:right;padding-left:10px;width:515px;font-size:10px;color:#7e7e7e">
        <h6><%= nickname %></h6>
        <%= description %>
    </div> 
    <img style="float:left;clear:left;" alt="Avatar Image" src="<%= null != avatarImageSrc && avatarImageSrc.trim().length() > 0 ? avatarImageSrc : "images/defaultUserImage.png" %>" 
         <%= avatarImageWidthNum < avatarImageHeightNum ? "height='59'" : "width='92'" %> />
</div>
<%
} // End loop
%>

Now, ignoring some of the code smells there, it’s obvious that if someone wants to change the look of that DIV it would be neccesary to re-place all the Java/JSP code into the new HTML given (the designers don’t work in JSP files, they have their own HTML versions of the website). Which is tedious, and prone to errors.

Answer 1

Your example is not MVC at all, but a good starting point is the JavaServer Pages Taglib JSTL.
Putting your example into a Spring controller and a corresponding JSP view it could look something like this:

@Controller
public StuffController
{
    @RequestMapping("bla")
    public ModelAndView doBla()
    {
        ModelAndView view = new ModelAndView();
        // Get memberSearchResults somehow
        MemberSearchResult results = memberSearchResults.getResults();
        view.addAtrribute("memberList", results);
        view.setViewName("blaview");
        return view;
    }
}

And your JSP view like this

// blaview.jsp
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %><%@ taglib uri="http://java.sun.com/jstl/xml" prefix="x" %>
<c:forEach var="searchResult" items="${memberList}">
    <div>
        <h6>${searchResult.nickname}</h6>
        ${searchResult.description}
    </div> 
</c:forEach>

For the whole image thing you should consider to assign its own bean class that has properties that can be used in the JSP. This is much cleaner and given that you provide the designers documentation of all properties and attributes available they will only have to learn the taglib. The only other option would be to let them do just the designing and let someone else handle the taglibs. Obviously there has to be some control flow like this somewhere in the view and taglibs are imho much easier to explain to people that are used to coding HTML than Java Source in a JSP.