Getting from HTML design to renderSnake components

RenderSnake is a Java library for creating components and pages that produce HTML using only Java. Its purpose is to support the creation of Web applications that are better maintainable, allows for easier reuse, have testable UI components and produces compact HTML in an efficient way.

This blog post explains how to start from a carefully designed rich HTML page and create new or use the components available in the library.

Web development

The tasks of developing web applications include implementing the application domain logic, database access for persistence and the presentation layer for user-interaction handling and page rendering. For most development teams, members have different roles in the process. Typically, web and interaction designers have the responsibility to create the page flow and construct initial versions of the HTML pages needed. These mockup pages need to be translated into a form that can be served by a web application, make them interactive and present dynamic information.

When using renderSnake to implement the HTML pages, you need to think about how to map the designs to components and how to integrate them with other assets such as Javascript, images and stylesheets.

Layout

The master design of a Web application typically has a small number of layouts. Popular HTML compositions include a Heading, Menu, Search and Footer section. Each of these sections can be defined by its own Renderable component. The composition can defined by creating a subclass of RenderableWrapper. Wrappers can be used in places where you see a standard decoration of dynamic information. Examples are contacts in a list view, search results and product galleries.

Unit

Given the set of HTML mockup pages, the developer has to decide what functional or decoration parts will be translated into Renderable components. Components that render too much HTML are likely to change more frequently over time. Components that are too small require more work, produce more code to maintain and therefore makes development less productive and hard to keep an overview.

Because all components are defined in Java, as a developer you can use all the available language features. Parameterising components translate to adding fields to components classes. Specializing components translate to using class inheritance and composition. Decorations such as layouts translate to Wrapper subclasses. And finally, as a Java developer you have powerful IDE tools with refactoring and debugging support. Changing your component designs is therefore much easier to do and contributes to a more agile development process.

Examples of renderSnake components can be browsed from the renderSnake site itself. Use the HTML Translator tool to convert (parts of) your design to Java code.

Static content

Larger content that is not managed by some CMS system can be maintained by external resource files. These resources are encapsulated (and cached) by instances of StringResource that know how to render them. The separation of static content in files makes maintenance easier ; no Java skills are required for such changes. The classes StringResource and StringTemplate can be used to externalize plain text, embedded Javascript and even HTML fragments.

Javascripts

With the exception of external Javascript libraries such as JQuery and Prototype, most rich Web applications require script elements that implement part of the user-interaction. These Javascript functions are dependent on the structure of the page via element identifiers and CSS classes. For those Javascript functions that cannot be part of an externally hosted resource file, you can use a StringResource to encapsulate each of them. Again, the separation of Javascripts into separate files allows for faster (you know where to look) and easier maintenance.

Examples of resources managed by StringResource objects can be browsed from the renderSnake site itself.

comments powered by Disqus