Depending on which runtime (SWF or DHTML) you're compiling to and whether your application is deployed proxied or SOLO, there may be certain types of assets that may be available. For example, in applications deployed to SWF, you can use assets in SWF format, these are not available in applications compiled to DHTML. Additionally, various formats that are not natively supported by the Flash Player are available only when you run in proxied mode, in which the OpenLaszlo Server transcodes formats.

When you insert an image into HTML text, you can only include images in the formats natively supported by the targeted runtime. For a discussion of how to use the <img> tag within HTML text, see Chapter 21, Text Views .

Being able to bring in art assets is not just for pictures - you can create your own custom view system too.

In OpenLaszlo applications, <view> s are the fundamental visible entities, and resources are externally generated media to be incorporated in applications. Resources are made available by being attatched to views. Thus in OpenLaszlo applications you don't "insert an image" into a view; instead you insert a view whose resource is an image.

Let's look at the simplest way of including an art asset (resource). In this case, a GIF image:

Example 8.1. Using 'resource'

<canvas width="500" height="80">
  <view resource="../resources/smiley.gif"/>
</canvas>

This tiny OpenLaszlo application loads an image called smiley.gif (which is located in resources, a subdirectory of the one that contains the application).

To position an image, position the view that contains that image as a resource:

Example 8.2. positioning images'

 <canvas width="500" height="100">
   <view resource="../resources/smiley.gif"/>
   <view x="50" y="50" resource="../resources/smiley.gif"/>
 </canvas>

We'll come to changing the size of an image later.

In the example above, we included an image from the current local directory that was loaded when the application was compiled on the server. This may or may not be right for the particular application, so LZX has four ways to load images:

<canvas width="500" height="100">
  <view resource="../resources/smiley.gif"/>
</canvas>

<canvas width="500" height="100">
  <resource name="smileyFaceImg" src="../resources/smiley.gif"/>
  <view resource="smileyFaceImg"/>
</canvas>

<canvas>
  <view resource="http://www.laszlosystems.com/images/smiley.gif">
</canvas>

<canvas>
  <view resource="http:../resources/smiley.gif"/>
</canvas>

Example 8.7. Stretching resources

<canvas width="500" height="200">
  <resource name="sourFace" src="../resources/sourface.png"/>
  <resource name="smileyFace" src="../resources/smiley.gif"/>
  
  <view resource="smileyFace" x="10" y="10"/>
  <view resource="sourFace" x="50" y="10"/>
  
  <view x="10" y="50" width="363" height="242" 
  stretches="both" resource="../resources/sunset.jpg"/>
</canvas>

OpenLaszlo supports GIFs, JPEGs and PNGs. They can all be resized by setting the stretches attribute of the view that contains the resource to both, width or height.

Resources can be multi frame, meaning that a single resource is actually made up of a number of different resources, each of which can only be shown one at a time.

The format for doing this is:

Example 8.8. Multiframe Resources

<canvas width="500" height="100">
  <resource name="face">
    <frame src="../resources/sourface.png"/>
    <frame src="../resources/smiley.gif"/>
  </resource>
  
  <view x="150" y="50" resource="face"
         onclick="this.setResourceNumber(2);"/>
</canvas>

The resources nested within the resource tag are numbered starting with 1.

As you can see, OpenLaszlo supports GIFs, JPEGs and PNGs. They can all be resized by setting the stretches attribute of the view that contains the resource to either both, width or height.

SWF only: The features described in this section only work in applications compiled to SWF. They do not work in applications compiled to other runtimes.

In applications compiled to SWF, you can treat SWF-formatted assets as resources, whether they are animated or not:

Example 8.9. Working with swf files

<canvas width="500" height="100">
  <view resource="../resources/still_swf.swf"/>
  <view x="150" y="20" resource="../resources/anim_swf.swf"/>
</canvas>

Any animation will loop ad infinitum. You will probably want to control the animation of a SWF file from the script in your application. To prevent it from playing, we can tell it to stop when the view is initialized:

<view x="150" y="20" resource="anim_swf.swf" oninit="this.stop();"/>

Example 8.10. Stopping swf animations

<canvas width="500" height="150">
  <view name="spinningClock" resource="../resources/clock.swf" 
        onclick="this.stop();"
        clickable="true"/>
</canvas>

Clicking on the image will cause the animation to stop. The onclick event handler will be covered in the "Scripting" tutorial.

Instead of just using stop(), we could have passed the stop() method an argument instructing it at which frame to stop. In addition, we could have used the play() method (also with optional frame argument) to play from a given frame.

We can't really progress beyond this point without covering scripting, but here is a preview of some of the other attributes and methods of <view>s that pertain to resources:

These and other APIs are discussed in greater detail in Chapter 18, Media Resources.