New ZK Flash Based Components"
m |
|||
| Line 120: | Line 120: | ||
*Live Demo | *Live Demo | ||
| − | <gflash width="600" height="500">Flash_swf1.swf</gflash> | + | <gflash width="600" height="500">http://docs.zkoss.org/images/9/9b/Flash_swf1.swf</gflash> |
*How to Embed a Youtube Clip into a ZUL File by ZK Flash Component | *How to Embed a Youtube Clip into a ZUL File by ZK Flash Component | ||
| Line 169: | Line 169: | ||
|| 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. | || 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= | =ZK XspfPlayer Component & ZK Odeo Component= | ||
Revision as of 04:43, 14 September 2010
Jeff Liu, Engineer, Potix Corporation
July 24, 2007
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.
|
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
...
<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
...
<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
...
<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
- Download zkflash.war
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. |