We illustrate the inclusion of static resources by displaying an external picture within an otherwise empty component. Create a component and use the method WAImageTag>>url: to add a URL to an image as follows:

If you have many static files that all live in the same location, it is annoying to have to repeat the base-path over and over again. In this case you should use WAImageTag>>resourceUrl: to provide the tail of the URL.

To tell Seaside about the part of the URL that you left out in your rendering code you have to go to the application configuration page (at http://localhost:8080/config) and specify the Resource Base URL in the server settings. Just enter http://www.seaside.st. Seaside will automatically prepend this string to all URLs specified using resourceUrl:>>resourceUrl:. This reduces your code size and can be very useful if you want to move the resource location during deployment.

Figure 117: Setting the Resource Base URL of your application.

Be careful where you put the slash. Normally directories in URLs end with a slash, that’s why we specified the resource base URL ending with a slash. Thus, you should avoid putting a slash at the beginning of the URL fragments you pass to resourceUrl:.

Another interesting way to serve a picture is to use a dynamically generated picture from within your image. In Pharo it is possible to use WAImageTag>>form: to pass a Pharo Form directly to the image brush.

ComponentWithForm>>renderContentOn:htmlhtmlimageform:aForm

That works reasonably well for simple graphics, however most visual things in Pharo are made using morphs. Luckily it is simple to convert a morph to a form:

If you are using Pharo, have a look at the example implemented in the class WAScreenshot. It demonstrates a much more sophisticated use of WAImageTag>>form: and presents the Pharo desktop as part of a web application. Furthermore it allows basic interactions with your windows from the web browser.