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.

6hoek.com on the iPad

Looking back at the development process with respect to these frameworks, I see that:

• Even though JQM is still beta, it is mature enough to start depending on it
• Most issues with JQM were easily resolved by reading the excellent JQ forum discussions
• Writing Java component classes instead of JSP/templates turned out to be very productive
• Small reusable components that encapsulate complex HTML and Javascript constructions
• Debugging and refactoring (rename,extract) support from the IDE
• Presentation logic in plain Java
• CSS is still a magic beast to tame
• Javascript debugging (I use Google Chrome) is a big time saver

Of course by creating a real application using these frameworks, one better realizes what features are missing or need to be changed. The upcoming 1.2 release of renderSnake will include all of them.

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.

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.

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.

import static org.rendersnake.HtmlAttributesFactory.*;

public class Head implements Renderable {

    @Override
    public void renderOn(HtmlCanvas canvas) throws IOException {//@formatter:off
       canvas
           .head()
               .meta(
                   http_equiv("Content-Type")
                   .content("text/html; charset=utf-8"))
               .title().write("Welcom to the Webshop")._title()
               .link(
                   rel("stylesheet")
                   .href("../../css/main.css")
                   .type("text/css")
                   .media("all"))
               .meta(
                   name("format-detection")
                   .content("telephone=no"))
               .meta(
                   name("viewport")
                   .content("width=device-width, user-scalable=no"))
           ._head();
    }
}

The class ProductUI is created and initialized with a product from the list of products. While rendering the HTML tags, it can access the attributes of the product in order to show the information on the resulting HTML page.

public class ProductUI implements Renderable {

    public Product product;
    
    @Override
    public void renderOn(HtmlCanvas canvas) throws IOException {

        canvas
            .li()
                .div(class_("productInfo"))
                    .img(src(product.image).alt(product.title))
                    .h3().write(product.title)._h3()
                    .p().write(product.author)
                        .span(class_("extraInfo")).write(product.extraInfo)._span()
                    ._p()
                ._div()
                .div(class_("orderButton"))
                    .p().span(class_("price")).write("€ ",false).write(product.price)._span()._p()
                    .a(href("paypal?bookid="+product.id))
                        .img(src("../../images/bt_order.gif").alt("Order now").width("103").height("37"))                        
                    ._a()
                ._div()
                .div(class_("clearer"))._div()
            ._li();                    
    }

Presentation and logic

Using the Spring-MVC framework is it possible to build applications that clearly separate the responsibilities for handling user interaction and presenting that user with information. Using available Spring extensions, it is possible to integrate the renderSnake library with this framework. By collecting all information (models) in the controller handler method, presentation components can simply access the available information from the page context.

renderSnake project hosting
renderSnake documentation site (uses renderSnake)

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.

Soek.goodies.st is now a complete static site and each project has its own stylesheet and javascript additions. This results in faster load times and better flexibility in adding new features to new exported versions of Smalltalk libraries.

Because the Soek project is implemented in VisualWorks, the first projects were exports of loaded bundles and packages from the Public Store. With the help of the Monticello VW package, it is now possible to add projects from any Monticello repository out there. The process of adding a new library is almost completely automated and uses Cloudfork for storing metadata in Amazon SimpleDB and uploading the site contributions to Amazon S3.

In the next weeks, I would like to update the existing projects listed at soek.goodies.st to newer versions. As stated on the site, I welcome suggestions to add other projects (or versions).

Recent additions:

• HotDraw
• Cloudfork ActiveItem

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:

"C:\Program Files\vast80\bin\abt.exe" -imelissa.icx  -melissaE:\Melissa\coolest-server-headless.ws

The build script must contain Smalltalk code that creates the MelissaBuilder and instruct it to load components (Maps,Apps), test components (Maps,Apps) and finally produce a runtime based on your prepared PackagingInstructions. The following is a basic example that loads the latest configuration map and produces a runtime image. The build and test results are logged on a file.

| melissa |
melissa := MelissaBuilder new.
melissa logFile: 'c:\temp\coolest-server-headless-' , AbtTimestamp now printString , '.build.log'.
melissa loadMap: 'PHW Coolest Server Runtime'.
melissa reporter reportAll.
melissa tester runTestsInMap: 'PHW Coolest Server Test'.
melissa reduceAndDumpUsing: #PhwCoolestHeadlessPackagingInstructions asClass.
melissa exit.

Features

• can load (specific editions of) Apps and Configuration Maps
• can notify developers by email about success|failure of the build (see MelissaNotifier)
• can run Unit tests found in an App or Configuration map
• increments a build number that can be used to initialize a class variable in the runtime image
• the build is run in a background process so you can interrupt the build at any time
• when holding the Shift-button when starting the Melissa image, the image will not exit when completed (this is useful to inspect the freshly loaded image)
• do simple file distribution

This is open-source software (MIT-license) and its configuration map is available on VastGoodies.com to download.
In one of the next posts, I will introduce Melissa for VisualWorks. This package is available in the Cincom Public Store.

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:

Classpath (Mac): .:JNIPort.jar:gdata-2.0-with-dependencies.jar

The example below is taken from the Google Spreadsheet documentation and is translated to the JNIPort method name conventions. This example simply lists all Spreadsheet documents available from your Google account.

| serviceClass urlClass metafeedUrl feedClass feed spreadsheets howMany |
serviceClass := JVM current findClass: 'com.google.gdata.client.spreadsheet.SpreadsheetService'.
service := serviceClass new_String: 'demo'.
service setUserCredentials_String: '<<username>>' String: '<<password>>'.

urlClass := JVM current findClass: 'java.net.URL'.
metafeedUrl := urlClass new_String: 'http://spreadsheets.google.com/feeds/spreadsheets/private/full'.
feedClass := JVM current findClass: 'com.google.gdata.data.spreadsheet.SpreadsheetFeed'.
feed := service getFeed_URL: metafeedUrl Class: feedClass.
spreadsheets := feed getEntries_null.
howMany := spreadsheets size_null.
0 to: howMany - 1 do:[ :i |
	| entry |
	entry := spreadsheets get_int: i.
	Transcript cr ; show: entry getTitle_null getPlainText_null ].

JQTouch is a jQuery plugin for mobile web development, optimized for the iPhone and iPod touch. Among the other alternatives, this one has a nice design and uses the popular jQuery framework. In this post, I am reporting about my efforts to use this library from Seaside which is a component-based Web application framework for Smalltalk. It has great support for jQuery in the sense that the developer is presented with an elegant abstraction layer to do all the fancy selection and Ajax stuff.

Single HTML

JQTouch works with a single HTML page model in which each iPhone page is represented by its own div element. JQTouch will show the div element which has the CSS class current and hides all others. This is what the body of such a page looks like.

<div id="home" class="current">
  <div id="toolbar">
    ....
  </div>
<div id="search">
...
</div>
<div id="results">
...
</div>

Navigating from one page to another can be animated using effects such as slide, flip, cube and dissolve.

Ajax only

Because this single HTML page is loaded once, every interaction with the Seaside application is done using Ajax. For example, a search page typically shows a form field to enter the search pattern. Instead of a regular form submit, you have to setup the ajax request to process the form and upon success (client-side!) navigate to the results page.

Seaside JQTouch support

With only a few small classes, I was able to wrap the JQTouch library (by reference only) and write some methods that makes it easy to write pages and forms. I published the Seaside extensions to the Cincom Public Repository as a bundle named JQTouch. Have a look at the examples to see how it can be used. This package requires a separate download of the JQTouch library as its assets are not included in the FileLibraryReference class. For testing JQTouch applications on your development machine, you can use iPhoney (Mac only), Safari or Chrome which all are based on the Webkit framework.

This package is written for VisualWorks with Seaside 3+.  With minor changes this package should be portable to previous versions (2.8) or other platforms (Pharo,VASmalltalk). Source code can also be viewed on soek.goodies.st

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.

Wanting this for the Smalltalk community too, I started creating the application Soek in Cincom WebVelocity to have a similar view on libraries such as Seaside, Glorp, Cloudfork and even my own projects. I figured out how to parse the comment, declaration and body of a method, defined new syntax highlighting rules for Smalltalk and integrated the client-side search javascript functions from RailsBrian.com, kindly provided by Brian Chamberlain.

Because most libraries that I use are pretty stable, those documentation pages can very well be cached. So to make this happen, I developed a Publisher component that can generate all static pages to files creating a documentation set for each library. Next, I created a public Amazon S3 bucket to host all these documentation sets. Finally, I added a Launcher application as the front-end for this bucket to select which library documentation to explore. Available library information (name,version, s3-url,site-url) is accessed from a Amazon SimpleDB domain using Cloudfork ActiveItem.

The result is now available at soek.goodies.st

The Soek application is made open-source under MIT license and published in the Cincom WebVelocity Community.

Update 1: Current version fails to work in IE (6+). Use any of Firefox, Safari, Chrome instead for the time being.

Update 2: Due to DNS problems goodies.st might not be reachable. You can always use the alternative soek.philemonworks.com

(Store.Registry packageNamed: 'Your-Package-Name')
	propertyAt: #application put: true;
	propertyAt: #namespace put: 'Your-Namespace';
	propertyAt: #velocityThemeName put: 'Default'.

HTML log file

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.

Features of the HypertextLogger are:

• the log can be custom CSS styled  (info,warn and error levels may have different emphasis)
• the log can have a custom pattern for each event (write your own formatBlock)
• you can use any HTML markup (e.q. links to other resources)
• by choosing a FileRollingPolicy you can control how many events are logged onto a single HTML file
• [update] can capture Transcript output and include it in the log

Using the logger

| logger |
logger := HypertextLogging.HypertextLogger onFileNamed: 'myproject.log'.
logger debug: 'This is debugging info only shown if level == #debug'.
logger link: 'http://blog.doit.st' title: 'Smalltalk in the Cloud'.

Logger API

Some examples using the logging api. See class methods for tests.

logger blue: 'Text in Blue'.
logger escaped: '<escaped>'.
logger red:[ logger strong: 'Bummer' ].  "use blocks to combine the api"
logger logException: aSignal. "writes a stack"
logger enabled: true.
logger printTimestamp.
logger printCurrentProcess.

Customizing the logger

You can override the CSS styles and the format of each log entry.

logger css: aDictionary. "mapping between css-class and its definition"
logger formatBlock: [:logger :logLevel :content | logger print: content ]. "provide your own entry formatting"

Setup the FileRollingPolicy

Instead of producing one single big file, you can specify a policy to control log file creation.

logger daily. "every day create a new log (unless no events)" 
logger maximumSize: 100000. "if size reaches limit then create a new log"
logger maximumEntries: 1000. "limit on the number of events"
logger refreshEvery: 10.  "10 seconds auto refresh by the browser"

HypertextLogger is implemented in VisualWorks Smalltalk and is available from the Cincom Public Store under MIT License.

Update: 1.8.4: if rolling policy is set then do not overwite exising log when new logger is created.