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:
html image url: 'http://www.seaside.st/styles/logo-plain.png'
WAImageTag>>resourceUrl:to provide the tail of the URL.
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.
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
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.
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:
html image form: (EllipseMorph new
color: Color orange;
extent: 200 @ 100;
html image document: EllipseMorph new
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.