New ZK Flash Based Components

From Documentation
DocumentationSmall Talks2007JulyNew ZK Flash Based Components
New ZK Flash Based Components
Author
Jeff Liu, Engineer, Potix Corporation
Date
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, 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.




Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.
Retrieved from "https://www.zkoss.org/_w/index.php?title=Small_Talks/2007/July/New_ZK_Flash_Based_Components&oldid=6739"