Table of Contents
This tutorial provides an informal overview of how to use media resources such as images, video and audio in OpenLaszlo applications. These topics are covered in greater depth in Chapter 18, Media Resources.
There are two ways in which you can import an image into OpenLaszlo applications:
-
as a media resource attached to a view;
-
as an image inserted within HTML text
In this tutorial we'll be talking about using resources attached to views, which is the more general mechanism. This technique allows you to import not only images, but audio, video "progressive" images and similar complex media.
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, views are the fundamental visible
entities, and resources are externally generated media to be incorporated in applications.
Resources are made available by being attached 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 the 'resource' attribute
<canvas width="100%" height="80">
<view resource="resources/smiley.gif"/>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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="100%" height="100">
<view resource="resources/smiley.gif"/>
<view x="50" y="50" resource="resources/smiley.gif"/>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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:
The resource gets bundled with the rest of the application when it is compiled on the server, so there will be a larger initial download, but the images will display instantly.
All of these four methods will eventually show the same result on screen:
Example 8.3. Local pathname
<canvas width="500" height="100"> <view resource="resources/smiley.gif"/> </canvas>
Example 8.4. Using the resource global identifier
<canvas width="500" height="100"> <resource name="smileyFaceImg" src="resources/smiley.gif"/> <view resource="smileyFaceImg"/> </canvas>
The resource does not get loaded until the view is initialized, so the rest of the application will load and there may be a visible delay. The initial download will be smaller, because the images are not bundled with it. The server that does the compiling requests the image (if it resides on a different server), and it routes it to the app that is already running in the client.
Example 8.5. Absolute referencing
<canvas width="100%" height="100">
<view resource="http://labs.openlaszlo.org/trunk-nightly/docs/developers/images/next.gif"/>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2011 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
Example 8.6. Local referencing
<canvas width="100%" height="100">
<view x="50" y="50" resource="http:resources/smiley.gif"/>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2011 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
The best way to include a resources that are part of your application is usually with
the global identifier (using the resource tag). That way all resources
can be included in one place, and if you need to change a resource's location or the
resource itself, you only need to change it once. (Reasons to use other ways of including
resources are described in later chapters.)
Example 8.7. Stretching resources
<canvas width="100%" 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>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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. Multi-frame resources
<canvas width="100%" 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.setAttribute('frame', 2);"/>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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.
You can also use multi-frame resources for animation: see Section 10, “Animation with Multi-frame Resources” in the Animation chapter.
![[Warning]](../includes/warning.gif)
![[SWF]](../includes/swf.gif)
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="100%" height="100">
<view resource="resources/still_swf.swf"/>
<view x="150" y="20" resource="resources/anim_swf.swf"/>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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="100%" height="150">
<view name="spinningClock" resource="resources/clock.swf" onclick="this.stop();" clickable="true"/>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
Clicking on the image will cause the animation to stop. The onclick event handler will be covered in Chapter 10, Introduction to Scripting.
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.
These and other APIs are discussed in greater detail in Chapter 18, Media Resources.