For the past month, I have been working on a new iPad Web application that recently was launched at 6hoek.com.
This application provides easy access to the complete product catalog of the Dutch online webshop bol.com.
Because it is targeted to owners of tablet devices such as the Apple iPad, I decided to embrace the upcoming JQuery Mobile framework (JQM), an open-source Javascript library that provides an unified UI to various mobile devices. For producing the HTML markup, I (obviously) choose renderSnake, an open-source HTML component library that promotes writing UI components in Java instead of templates.
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.
renderSnake is a open-source library for creating components that produce HTML using only Java. By defining Java classes for HTML components and pages you can exploit all the language features (e.g. inheritance, composition, type-checking) and IDE tooling (e.g. refactoring, unit-testing, references search, debugging,…). In addition, renderSnake is designed to produce compact HTML in an memory efficient way.
The "V" in MVC
Basically, renderSnake is responsible for the presentation layer of a Web application. It has no dependencies with an application framework but it does provide classes to integrate with other technologies such as JavaServer Pages and Spring-MVC. Spring-MVC is a popular implementation of the MVC architecture. This pattern isolates "domain logic" (the application logic for the user) from the user interface (input and presentation), permitting independent development, testing and maintenance of each (separation of concerns).
Example
Below is an example of a Spring-MVC based setup of components. ProductListController is a component that is responsible to handling incoming requests. That execution starts by retrieving the Product objects (Model) through a Product Data Access Object. Then a ProductListPage object is created and asked to render itself. Each UI component that is part of the ProductListPage is asked to do the same. The response will have the resulting HTML content.
- missing image /2011/02/spring-mvc-rendersnake.png
Controller
The method below is part of the ProductListController and is called with a prepared HtmlCanvas object that captures the request,response and output writer. Before rendering the page using the HtmlCanvas, all required domain objects are retrieved and made available to the PageContext (Map) of the HtmlCanvas object. Now the HtmlCanvas has all the information needed to perform the rendering phase.
@RequestMapping("/productlist.html")
@ResponseBody
public void showProductListPage(HtmlCanvas html) throws IOException {
html.getPageContext().set("products", this.productListDao.getBestSellersProductList());
html.render(new WebshopLayoutWrapper(new ProductListPage())));
}
View
Using renderSnake, the View layer is implemented by a collection of small, potentially reusable, UI component classes that are composed into Page objects that represent HTML content.
Class Head is an example UI component responsible for rendering the head section of every HTML page. It implements the Renderable interface and uses the HtmlCanvas parameter object for rendering. The HtmlCanvas object has methods of all elements (tags) in order to write HTML content. Using the HtmlAttributesFactory, you can specify the attributes for each HTML tag. By convention, the method source has a format that uses indentation to see the nesting of tags. This is not required but improves its readability.
The site soek.goodies.st gives access to the sources of open-source Smalltalk libraries and frameworks. A big advantage to developers is that they can explore Smalltalk classes without having to successfully load them into one of the Smalltalk dialect platforms. Recently, I have changed much of the Smalltalk generator and HTML/Javascript generated code.
Formerly, all Smalltalk source was highlighted using a client-side Javascript library. This resulted in long page loading times because it had to iterate through all DOM elements and replace the HTML content by a post-processing (using regex) result. Current version of Soek uses a highlighter written in Smalltalk that can pre-process all class source files.
Melissa is a simple tool that can help in building development and runtime images in a continous integration environment. It is being used extensively to create daily builds for Smalltalk images. This post describes the steps to use Melissa for VA Smalltalk 8+.
The intended way to use Melissa is to start with a clean VA image, load the Melissa config app and save it as melissa.im. In order to tell Melissa what to build, you need to start that image passing the command line parameter “-melissa buildscript.ws” like:
JNIPort for VisualWorks provides a way to use Java and its huge number of available libraries directly from Smalltalk.
For example, to access the Google Spreadsheets APIs and Tools, you need to download the Java client libraries and all its dependencies. The paths to there Jars must be known to the JVM and can be set through JNIPort. For easy deployment, I put together a single jar using an Ant build script such that the Runtime settings could be:
One way to build applications for the iPhone is to create a Web application that tries to look and behave like a native one. Currently, many Javascript libraries are being developed that try to accomplish just that. One of the big reasons for choosing this route is that developing such applications is so much easier compared to the Apple-way (learn Objective-C, build and test on the local emulator and try to get it accepted by AppleStore).
Soek is a Smalltalk application that provides a different way to navigate through documentation and source code of a Smalltalk library. Instead of the classic multi-list browser view in an image, Soek offers a flat view on all methods and classes and is build using the Seaside Web framework.
- missing image /2009/11/screen-shot-2009-11-13-at-6-33-24-pm.png
I discovered this way of publishing a framework when I worked with Rails and did most of my searches on Railsbrain.com. Not only I could easily find a particular class or method, it also showed me similar methods, other implementations, classes and their sources. The learning effect was great and it became my standard search tool and recommendation to others.
If you want an existing package to register as a WebVelocity one and as a result make it visible to the browser page, you can evaluate this script:
(Store.Registry packageNamed: 'Your-Package-Name')
propertyAt: #application put: true;
propertyAt: #namespace put: 'Your-Namespace';
propertyAt: #velocityThemeName put: 'Default'.
which I found when looking for the newApplication functionality in the image.
Logging can be very helpful in analyzing the (faulty) behavior of a server application in response to client requests. HypertextLogger is a simple component that produces HTML in response to logging instructions. Its main purpose it to provide a better readable log file. By choosing you favorite CSS, you can highlight what is important and leave other information unfocused (timestamps).
- missing image /2009/06/hypertextlogger.png
Upon creation of the logger, it produces a new .html file to which logging events are written. Because most Browsers can deal with open-ended (i.e. not properly closed by tags) HTML files, a single page can be used to collect lots of events. And if you let e.g. Apache serve these log files, you can monitor server applications remotely.
