Dynamic Web Development with Seaside

17.1Images

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:

ComponentWithExternalResource>>renderContentOn: html
html image url: 'http://www.seaside.st/styles/logo-plain.png'

Including an external picture into your components
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.

ComponentWithExternalResource>>renderContentOn: html
html image resourceUrl: 'styles/logo-plain.png'

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.

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: html
html image form: 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:

ComponentWithForm>>renderContentOn: html
html image form: (EllipseMorph new
color: Color orange;
extent: 200 @ 100;
borderWidth: 3;
imageForm)

You can also use WAImageTag>>document: as follows:

html image document: EllipseMorph new

Displaying Pharo Morphs

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.

Copyright © 19 March 2024 Stéphane Ducasse, Lukas Renggli, C. David Shaffer, Rick Zaccone
This book is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 license.

This book is published using Seaside, Magritte and the Pier book publishing engine.