New ZK Flash Based Components

Jeff Liu, Engineer, Potix Corporation
July 24, 2007

Version

Applicable to ZK 2.5 and later.

Introduction

Before ZK flash component is released, ZK developer has to code object-embed html tag in ZUL files. Now, ZK developers will be saved from this dirty coding by ZK flash component.

In this small talk, I (Jeff Liu) will guide u through how to embed your flash component in ZK application by using ZK flash component. Also, ZK Youtube component will be used to demonstrate how adaptable the ZK flash component is.

Secondary, by using this object-embed tag html mold, two MP3 based improved ZK audio components are released, ZK XspfPlayer and ZK Odeo

 

Problem:

  1. When developer wants to embed flash into ZUL, he/she has to code up object-embed html tag.
  2. Brower dependency causes unexpected performance of ZK audio component

Solution:

  1. ZK Flash Component is released
  2. 2 MP3 based improved ZK audio components are released, ZK xspf-player and ZK Odeo

 

Installation

  1. Download the zkflash.war
  2. Deploy it by Tomcat manager or extract folder into TOMCAT_PATH\webapps\

ZK Flash Component

Live Demo

How to embed a flash file into a ZUL file by ZK Flash component

...
<flash src="SWF/cc.milestones.121503.swf" height="320" width="620"></flash>
...
Listing.1

By the code sample in Listing.1, inserting a ZK flash into ZUL file is very straight forward. It is as same as object-embed tag, but it is neater and simpler (as ZK component always is).

ZK flash attribute specification table:

Required:

Attribute

Usage

In Embed Tag

In Object Tag

src

Specifies the location (URL) of the movie to be loaded.

src

movie(param)

height

Specifies the height of the movie to be loaded.

height

height

width

Specifies the width of the movie to be loaded.

width

width

Notice: The default value for height and width are “”(blank, empty, or whatever you called).

Attribute

Usage

In Embed Tag

In Object Tag

wmode

Possible values: window, opaque, transparent. Sets the Window Mode property of the Flash movie for transparency, layering, and positioning in the browser.

  • window - movie plays in its own rectangular window on a web page.
  • opaque - the movie hides everything on the page behind it.
  • transparent - the background of the HTML page shows through all transparent portions of the movie, this may slow animation performance.

 

wmode

wmode(param)

bgcolor

[ hexadecimal RGB value] in the format #RRGGBB . Specifies the background color of the movie. Use this attribute to override the background color setting specified in the Flash file. This attribute does not affect the background color of the HTML page.

bgcolor

bgcolor(param)

loop

Possible values: true, false. Specifies whether the movie repeats indefinitely or stops when it reaches the last frame. The default value is true if this attribute is omitted.

loop

loop

play

Possible values: true, false. Specifies whether the movie begins playing immediately on loading in the browser. The default value is true if this attribute is omitted.

play

play(param)

Specification above is adopted from Adobe techNote, “Flash OBJECT and EMBED tag attributes”

ZK Youtube Component

Live Demo

How to Embed a Youtube Clip into a ZUL File by ZK Flash Component


Download Complete Code Here 

...
<youtube onDrop="playClip(event.dragged)" src="http://www.youtube.com/v/t-L-0s-7-Z0"
 droppable="true" id="myYoutube" ></youtube>
...
Listing.2

From Listing.2, embedding a youtube clip into your ZUL file is very easy. Notice the difference here, the Youtube tag was not assigned any height nor width; because the height and width are assigned to 425 x 350 (Official Youtube default).

You might ask this “Can the height and width be changed?” The answer is “YES,” just take look the sample code in Listing.3

...
myYoutube.setWidth(425+(v*3 + 10) + "px");
myYoutube.setHeight(350+(v*3 + 10) + "px");
...
Listing.3

How about change the source URL?

Yes, you can. But notice that once the source URL is changed, the clip will be reloaded.


More on ZK Youtube attribute and method:


Attribute

Usage

src

Specifies the location (URL) of the movie to be loaded.

autoplay

Possible values: true, false. Specifies whether the movie begins playing immediately on loading in the browser. The default value is true if this attribute is omitted.

loop

Possible values: true, false. Specifies whether the movie repeats indefinitely or stops when it reaches the last frame. The default value is true if this attribute is omitted.


ZK XspfPlayer Component & ZK Odeo Component

How to play an mp3 file in ZK application?

There are 2 options:

  1. Use a local flash player: XspfPlayer
  2. Use a remote flash player: Odeo

The difference between two is location of the swf file (flash mp3 player). XspfPlayer uses xspf_player_slim.swf which is stored in the same server as the ZUL file. In contrast, Odeo uses the swf player is stored in odeo website(www.odeo.com). You might ask this: what happen when Odeo goes to dead pool? If it is the case, ZK Odeo won’t work anymore, since the player can not be found.

ZK XspfPlayer Component

Live Demo

How to embed a mp3 file into a ZUL file by ZK XspfPlay

Download Complete Code Here 

 
...
<xspfPlayer id="xspf" visible="true" autoplay="false" >
</xspfPlayer>
...
Listing.4

It is easy hum? But wait, where is the declaration of Mp3 source location? Let’s answer this question by following code segment.

...
xspf.setSongUrl("mp3/"+songList.selectedItem.value);
xspf.setSongTitle(songList.selectedItem.label);
...
Listing.5

Wow..! But, how about I don’t want to set it dynamically? Take a look this code segment

...
<xspfPlayer songUrl="mp3/Emergence - Michael David Crawford.mp3" id="xspf" 
visible="true" autoplay="false" >
</xspfPlayer>
...

More on ZK XspfPlayer Attributes and Methods:


Attribute

Usage

play()

Play the song from start

stop()

Stop the song

songUrl

Specifies the location (URL) of the song  to be loaded.

songTitle

Specifies the title of the song

visible

Possible values: true, false. Specifies the player should be visible or not

autoplay

Possible values: true, false. Specifies whether the movie begins playing immediately on loading in the browser. The default value is true if this attribute is omitted.

ZK Odeo Component

Live Demo

How to embed a mp3 file into a ZUL file by ZK Odeo


Download Complete Code Here 

 
...
<odeo id="odeo" skinColor="black" songUrl="mp3/Emergence - Michael David Crawford.mp3"
autoplay="true" ></odeo>
...
Listing.6

Most of attributes are same as the ZK xspfPlayer, songUrl, autoplay… The difference is that ZK Odeo skin is changeable. See following:

  • skinColor: change the color of ZK odeo player. Possible values: “black” and “gray”
  • skinSize: change the size of ZK odeo player. Possible values: “standard”, “midsize”, and “tiny”


More on ZK Odeo Attributes and Methods:

Attribute

Usage

play()

Play the song from start

stop()

Stop the song

songUrl

Specifies the location (URL) of the song  to be loaded.

audioDuration

Specifies the duration of the song  in second.

visible

Possible values: true, false. Specifies the player should be visible or not

autoplay

Possible values: true, false. Specifies whether the movie begins playing immediately on loading in the browser. The default value is true if this attribute is omitted.

Download

Summary

Due to nature of embed html tag, there are still some limitations in the ZK flash based component. If you have any suggestion or find a bug to report. Please, feel free to post it on ZK forum.

Important Notice:

All flash and mp3 files being used in demostrations are under Creative Commons License.