Image credit

Your first Willow application

This is a follow-up article to the Introduction to Willow.

The series so far:
1) Introducing Willow
2) Your first Willow application (this post!)
3) Rendering content in Willow
4) Component Suppliers in Willow
5) User Interaction in Willow
6) Dynamic content loading in Willow

So you know what Willow is. Now you want to create your own interactive application. How do you proceed? That is what you'll learn here.

Installing Willow

Just in case, make sure you have installed Willow. If not, the code snippet to do that is:

Metacello new
  baseline: 'Willow';
  repository: 'github://ba-st/Willow:v14/source';
  load

Setting a goal

Throughout this post, we'll assume the goal is to create a simple ToDo list, because we are original like that.

Defining an application

The first object you will need is a subclass of WillowApplication, in our case:

WillowApplication subclass: #ToDoApplication
 instanceVariableNames: ''
 classVariableNames: ''
 package: 'ToDoWeb'

The simplest thing to do is just complete the methods defined as subclassResponsibility in WillowApplication.

On the class side, #applicationTitle determines the name shown on your browser tab.

applicationTitle
 ^ 'To Do'

#handlerName determines the url of your application. For example http://localhost:8080/to-do

handlerName
 ^ 'to-do'

Let’s move now to the instance side.

#componentSupplierForApplication determines the front-end framework of your application. We'll start by using the simplest option, plain HTML5, included with the core Willow package.

componentSupplierForApplication
 ^ Html5ComponentSupplier new

To add more component suppliers, you need to install additional projects like Willow-Bootstrap for Bootstrap 3 and Bootstrap 4, or Willow-JQueryUI for JQuery UI.

#contentView is where the stuff happens. This method should eventually point to the content of your application. This means you must return a renderable object (as defined by Seaside). Let's leave that for later, and return only a string:

contentView
 ^ 'This is the To Do application'

#jQueryLibrary is the last mandatory message to implement. It defines the basic jQuery library from Seaside that your application will use. The most common implementation will indicate JQuery 3:

jQueryLibrary
  ^ JQuery3OnlineLibrary default  

That will be enough to continue.

Starting your application

With the previous methods implemented, we can already check our application at work.

In order to start a web server for our applications, we will use Zinc, which comes included with the Seaside installation in Pharo. Assuming we choose to use port 8080, the script to start it is:

(ZnZincServerAdaptor port: 8080) start

Now we need to register our application, so that it can be accessed from a browser:

ToDoApplication registerAsDevelopmentApplication

With that our little example is ready, go to localhost:8080/to-do and check for yourself.