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.

SOLO applications compiled to SWF depend on Flash to load images (whereas the proxied applications get help from the transcoder on the server). This means that SOLO applications are limited to file types supported natively by Flash.

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

Browsers do not natively support .swf or audio or video formats. You must transcode them, omit them from your application, or embed a flash player in your application to handle them.

2.2.2. Audio and Video in DHTML applications

	Note
	The following discussion applies to audio and video resources attached to views, not to videoviews. videoviews are not supported at all for the DHTML runtime.

In order to display swf-formatted audio and video within a DHTML application, you may embedd a swf player in the page. For a discussion of how to do this, see Chapter 35, Browser Integration.

OpenLaszlo 4.0 and above support the following media types:

For up-to-date discussion of supported media and considerations about their deployment in various runtimes, see the OpenLaszlo Wiki.

Note that a resource is not itself a view. Resources do not have x and y positions, or background color, or any of the 49 or so attributes that views have. A resource that is not attached to a view is essentially invisible to the application. As explained below, in order to manipulate a resource, you perform actions on the view to which the resource is attached.

There are a number of view APIs (methods, fields, and events) that can be used to find out about and control a view's resource.

When a resource is declared externally, it must be given a name. The namespace for resources is global to the entire application. Resource tags can only be used as direct children of either the canvas or library tags.

This style of resource inclusion makes it simpler to separate out art assets from code and can make for improved designer/developer interactions.

When you directly import a resource without naming it, as in the first example, the LZX compiler assigns a unique name to that resource.

Behavior when two resources share the same name is undefined. Therefore you should take care to make sure that each resource has a unique and appropriate name.

As of OpenLaszlo 3.1, all LZX applications are compiled to Macromedia Flash (SWF) files. With the exception of audio files noted below, SWF files are played by the Flash plugin at a fixed frame rate and all imported animations are played at that frame rate. This frame rate is fixed at 30 frames per second.

Resources that are loaded at compile time are included in the application binary and add to the initial download size of the application.

<resource name="myname"
        src="resources/logo.gif"/>

Compile-time resource inclusion is good for

Examples of resources that are included at compile time include most of the assets associated with user-interface components.

The LZX compiler may transcode compile-time resources for inclusion in the SWF application; the OpenLaszlo Server caches the results of these transcodes. The compiler checks the last-modified time of all compile-time-included resources to determine if an application needs to be recompiled.

There are two main ways to load resources at run-time. The first is to use special syntax that is understood by the view's resource attribute. If you specify a value for this attribute that is an HTTP url, the compiler assumes that this resource should be loaded at runtime:

Example 18.8. Loading a resource at runtime

<canvas height="180" width="100%">
  <view resource="http:resources/logo.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 ****************************************************** -->

Flash

HTML5

The second method is to use the setSource()method. The previous example is equivalent to the following one:

Example 18.9. Loading a resource at runtime using script

<canvas height="180" width="100%">
  <view oninit="this.setAttribute('source', 'http:resources/logo.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 ****************************************************** -->

Flash

HTML5

	Note
	LZX treats HTTP URLs that omit the two slashes //after the colon (:) as being relative to the application.

setSource() provides more control over the loading of the resource. Using this method, you can:

5.2.1. Protocols for proxied applications

	Note
	This section does not apply to SOLO applications.

Before sending resources to a running, proxied, OpenLaszlo application, the OpenLaszlo Server first fetches (or proxies) the resource. The server uses the URL for the resource to determine how and where to get the resource. The term back-end is used to refer to the server that is ultimately providing the resource. Depending on your configuration, the back-end can be the OpenLaszlo Server host itself. Or it may be another distinct host.

The OpenLaszlo Server determines the protocol to use to communicate to the back-end based on the URL for the resource. By default, URLs that are to be loaded at runtime, that don't specify the protocol are assumed to be HTTP urls. OpenLaszlo supports communication to back-end hosts (including localhost itself) via the HTTP protocol. Relative HTTP URLs are thus fetched using a localhost HTTP transfer.

5.2.2. Caching

By default, in proxied applications, media that is accessed at runtime is cached both in the server and in the client browser. The OpenLaszlo Server uses the standard HTTP If-Modified-Since/Last-Modified caching mechanism specified in the HTTP 1.1 specification.

The OpenLaszlo Server actually maintains two media caches. One cache is used for resources that are requested at runtime. This is simply called the Media Cache. It also maintains a second cache for resources that are compiled into applications called the Compiler Media Cache. In general, the Compiler Media Cache settings only affect the speed of the OpenLaszlo compiler. The settings for the Media Cache can affect server performance. See the OpenLaszlo System Administrator's Guide for details.

The example below provides a text input area for you to type in urls that you'd like to test.

Example 18.10. Testing runtime resource loading

<canvas height="400" width="100%">
  <font src="helmetr.ttf" name="helvet"/> 
  <simplelayout spacing="3"/> 
  <view> 
    <simplelayout axis="x" spacing="2"/> 
    <text valign="middle">Type url:</text> 
    <edittext width="500" id="url">http:resources/logo.gif</edittext>
  </view>
  <text>(also try resources/logo.swf)</text> 
  <command onselect="butt.doit();" key="['Enter']" active="true"/> 
  <checkbox text="Cache in client" id="ccache"/> 
  <checkbox text="Cache in server" id="scache"/> 
  <button id="butt">
    Make request 
    <handler name="onclick"> this.doit(); </handler> 
    <method name="doit"><![CDATA[  
      status.setAttribute("text", "Requesting: " + url.text); 
      // Determine caching from checkboxes 
      var caching = 'none';
      if (ccache.getValue() & scache.getValue()) { 
          caching = 'both'; 
      } else if (ccache.getValue()) { 
          caching = 'clientonly'; 
      } else if (scache.getValue()) { 
          caching = 'serveronly'; 
      } 
      me.setAttribute("source", url.text, caching); 
    ]]></method> 
  </button> 
  <button onclick="me.stop()"> Stop </button> 
  <button onclick="me.play()"> Play </button> 
  <text text="${me.frame + ' out of ' + me.totalframes + ' frame(s)'}"/> 
  <text multiline="true" width="200" height="100" id="status"/> 
  <view id="me"> 
    <handler name="onload" args="e"> 
      status.setAttribute("text", 'loaded: ' + e); 
    </handler> 
    <handler name="onerror" args="e"> 
      status.setAttribute("text", 'error: ' + e); 
    </handler> 
    <handler name="ontimeout" args="e"> 
      status.setAttribute("text", 'timeout: ' + e); 
    </handler> 
  </view> 
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008-2011 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

Flash

HTML5