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: htmlIf 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
html image url: 'http://www.seaside.st/styles/logo-plain.png'
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.
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
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.