(Java)Bermain Effect Pada Zkoss Framework

Dengan banyak melihat project yang telah di berikan oleh team zkoss ternyata Effect untuk membuat aplikasi berbasis web keren – keren , jadi makin cinta sama java dan zkoss , semoga postingan selanjutnya dapat memposting contoh aplikasi yang dapat di terima sama user dan teman teman sekalian .Amin..

1. Animation

<zk xmlns:w="client">
<style dynamic="true">
	.ctl { border: 1px outset #777; background:#cfeaf1; margin: 2px;
	margin-right: 10px; padding-left: 2px; padding-right: 2px;
	display: block; width:80px; text-align:center; }
</style>

	<hbox>
		<groupbox mold="3d" width="150px">
			<caption label="Appear" />
			<label sclass="ctl" value="SlideDown"
			 w:onClick="jq(this.$f('t')).hide().slideDown()"/>
			<label sclass="ctl" value="Appear"
			 w:onClick="jq(this.$f('t')).hide().fadeIn()"/>
			<label sclass="ctl"	value="Slowly"
			 w:onClick="jq(this.$f('t')).hide().fadeIn(2500)"/>
		</groupbox>
		<groupbox mold="3d" width="150px">
			<caption label="Disappear" />
			<label sclass="ctl" value="SlideUp"
			 w:onClick="jq(this.$f('t')).show().slideUp()"/>
			<label sclass="ctl" value="Fade"
			 w:onClick="jq(this.$f('t')).show().fadeOut()"/>
		</groupbox>
	</hbox>
	<div id="t" style="position:relative;zoom:1">
	<groupbox>
		<caption label="Dynamic Content" />
		Content to show and hide dynamically.
		<datebox />
	</groupbox>
	Description
	<textbox />
	</div>
</zk>

2.jquery Effect

<hlayout width="1024px">
    <separator width="150px"></separator>
    <window id="t" title="This is a Window" border="normal" width="300px">
        <vlayout style="text-align:center;">
            <image src="/widgets/effects/jQuery_effects/img/magic_wand_hat.png"></image>
            jQuery Effect Test
        </vlayout>

    </window>
    <groupbox closable="false" sclass="z-demo-config" xmlns:w='client'>
    <caption label="Effect" />
    <vlayout>
        <button height="30px" width="200px" label="Slide Down"
            w:onClick="jq(this.$f('t')).hide().slideDown(1000)" />
        <button height="30px" width="200px" label="Slide Up"
            w:onClick="jq(this.$f('t')).show().slideUp(1000)" />
        <button height="30px" width="200px" label="Fade In"
            w:onClick="jq(this.$f('t')).hide().fadeIn()" />
        <button height="30px" width="200px" label="Fade Out"
            w:onClick="jq(this.$f('t')).show().fadeOut()" />
        <button height="30px" width="200px" label="Slide Toggle"
            w:onClick="jq(this.$f('t')).slideToggle(1000)" />
    </vlayout>
</groupbox>

</hlayout>

3. Upload Effect

index.zul

<zk xmlns:c="client">
    <zscript><![CDATA[
        String dir = "/widgets/effects/upload_effect";
    ]]></zscript>
    <style src="WEB-INF/Customize.css" />
    <panel width="550px" framable="true">
        <caption label="ZK Mail Sender">
            <button label="Send" onClick='alert("Send!")' />
            <button label="Draft" />
            <button label="Discard" />
        </caption>
        <toolbar>
            <vlayout spacing="6px">
                <hlayout><label sclass="name" value="To : " /><textbox value="info@zkoss.org" width="480px" /></hlayout>
                <hlayout><label sclass="name" value="CC : " /><textbox value="myDearBoss@yourCompany.com" width="480px" /></hlayout>
                <hlayout><label sclass="name" value="Subject : " /><textbox value="Kindly View The Attachment" width="400px" />
                <button id="attachBtn" sclass="attachBtn" src="/img/Centigrade-Widget-Icons/PaperClip-16x16.png"
                        upload="true,maxsize=10240" label="Attach" onUpload="addItem()"/></hlayout>
                <vlayout id="flist" width="400px" sclass="fileList" />
            </vlayout>
        </toolbar>
        <panelchildren>
            <div sclass="input-area">
                <textbox multiline="true" rows="10" width="99%" >
                    <attribute name="value"><![CDATA[
Hi,
    I am writing to confirm you about the budget of annual meeting.
    Please view the detail as attachment below.

BR]]></attribute>
                </textbox>
            </div>
        </panelchildren>
        <toolbar sclass="footer">
            <div id="footer"></div>
        </toolbar>
    </panel>
    <zscript><![CDATA[
    void addItem() {
        org.zkoss.util.media.Media media = event.getMedia();
        Hlayout hl = new Hlayout();
        hl.setSpacing("6px");
        hl.setClass("newFile");
        hl.appendChild(new Label(media.getName()));
        A rm = new A("remove");
        rm.addEventListener(Events.ON_CLICK,new org.zkoss.zk.ui.event.EventListener(){
            public void onEvent(Event event) throws Exception {
                hl.detach();
            }
        });
        hl.appendChild(rm);
        flist.appendChild(hl);
    }
    ]]></zscript>
    <script type="text/javascript" src="$WEB-INF/UPMSamples.js" />

     <script type="text/javascript"><![CDATA[
    function testUpload(viewer) {
        for (var i = 0 ; i < 5; i ++ ) {
            (function() {
                var fakeLoader = { id: 'tmp' + new Date().getTime() + i},
                        muv = viewer == 1 ?
                        new zk.UPMSample1(fakeLoader, "TempFile" + parseInt((Math.random() + 1)*10) ):
                        new zk.UPMSample2(fakeLoader, "TempFile" + parseInt((Math.random() + 1)*10) ),
                    fsize = 12345678*Math.random() + 1;
                muv.pct = 0;
                var pgs = setInterval(function() {
                    muv.pct += parseInt(Math.random()*19);

                    if (muv.pct >= 100) {
                        clearInterval(pgs);
                        muv.pct = 100;
                    }
                    muv.update(muv.pct, fsize);
                    if (muv.pct == 100)
                        muv.destroy();
                }, 678);
            })();
        }
    }
    ]]></script>
    <groupbox sclass="z-demo-config" closable="false">
        <caption label="Display Upload Progress Monitor" />
        <hlayout>
            Sample 1 :
            <button label="Show" c:onClick='testUpload(1)' />
        </hlayout>
        <hlayout>
            Sample 2 :
            <button label="Show" c:onClick='testUpload(2)' />
        </hlayout>
    </groupbox>
    <separator height="15px"/>
    <groupbox sclass="z-demo-config" closable="false">
        <caption label="Apply to File Uploader" />
        <radiogroup id="selectViewer">
            <attribute name="onCheck"><![CDATA[
                attachBtn.setUpload(self.getSelectedItem().getValue());
            ]]></attribute>
            <vlayout>
                <radio label="Default Style" value="true,maxsize=10240" checked="true" />
                <radio label="Sample 1" value="zk.UPMSample1,maxsize=10240" />
                <radio label="Sample 2" value="zk.UPMSample2,maxsize=10240" />
                <label style="font-weight:bold" value='Upload files by "Attach" button' />
            </vlayout>
        </radiogroup>
    </groupbox>

</zk>

Customer.css

/* 
    Document   : Customize
    Created on : 19 Jul 12, 0:45:08
    Author     : aerdy
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

/*****Panel Customize*****/
.z-panel-tl {
    height: 4px;
}
.z-panel-hl .z-panel-header {
    padding: 2px 3px 5px;
}
.z-caption-l {
    padding-left: 10px;
    font-weight: bold;
}
.z-panel-cl {
    padding-left: 1px;
}
.z-panel-cr {
    padding-right: 1px;
}
.z-panel-noborder .z-panel-btm div.footer {
    padding: 2px 0;
    border-left: 0 none;
    border-right: 0 none;
}
.z-panel .z-panel-cl .z-panel-children-noborder {
    padding-left: 5px;
    padding-right: 3px;
    background-color: #F1F9FF;
}

/*****Text Style*****/
span.name {
    font-size: 12px;
    display: block;
    width: 50px;
    text-align: right;
    font-weight: bold;
}
.attachBtn .z-toolbarbutton-cnt {
    font-weight: bold;
    color: #F25D45;
}
.newFile {
    padding-left: 10px;
}

/*****Attach Field*****/
.z-toolbar {
    background: none;
}
.z-toolbar .fileList a{
    border: 0 none;
    text-decoration: underline;
    background: none;
}

/*****Input Field*****/
.input-area {
    margin: 0 3px;
    border-top: 1px solid #ECECEC;
}
.input-area .z-textbox {
    border: 0 none;
}

/*****UPMSample1*****/
.UPMSample1 .msg span {
    height: 15px;
    padding-left:10px;
    font-size:12px;
}
.UPMSample1 .z-progressmeter {
    width: 100px;
    height: 10px;
}

/*****UPMSample2*****/
.UPMSample2 {
    background:#F4F8FF;
    border-top: 1px solid #99AABD;
    border-bottom: 1px solid #99AABD;
    font-family: tahoma,helvetica,arial,sans-serif;
    font-size: 11px;
    padding: 3px;
    width: 542px;
    color: #0F3B82;
}
.UPMSample2 a {
    color: #0366AC;
    font-weight: bold;
    cursor: pointer;
}
.UPMSample2 .float-left {
    float: left;
}
.UPMSample2 .float-right {
    float: right;
}
.UPMSample2 .clear {
    clear: both;
}

Sample.js

/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

zk.afterMount(function() {
    //Upload Progress Monitor Sample 1
    zk.UPMSample1 = zk.$extends(zk.Object, {
        updated : null,
        $init : function(uplder, filenm) {
            this._uplder = uplder;
            var id = uplder.id;
            //Add message and progressmeter
            zk.Widget.$(jq("$flist")).appendChild(
                new zul.box.Hlayout({
                    id: id + "_layout",
                    spacing: "6px",
                    sclass: "UPMSample1",
                    children: [
                        new zul.wgt.Html({
                            content: ['
‘, filenm,’

‘].join(“”) }), new zul.wgt.Progressmeter({ id: id + “_pgs” })] }) ); }, update : function(sent, total) { zk.Widget.$(jq(‘$’ + this._uplder.id + ‘_pgs’)).setValue(sent); }, destroy : function() { var layout = jq(‘$’ + this._uplder.id + “_layout”); if (zk.ie) { zk.Widget.$(layout).detach(); } else { layout.animate({ width: 1}, 500, function() { zk.Widget.$(layout).detach(); }); } } }); //Upload Progress Monitor Sample 2 zk.UPMSample2 = zk.$extends(zk.Object, { updated : null, $init : function(uplder, filenm) { this._uplder = uplder; var id = uplder.id, uri = ‘../widgets/effects/upload_effect/img/upload-loader.gif’, html = [‘

‘, ”, ‘

   FileName: ‘, filenm , ‘

‘, ‘

‘, msgzk.FILE_SIZE, ‘0 of ‘, ‘0‘, ‘ (0%)‘, ‘

‘].join(“”); jq(“$footer”).append(html); this.viewer = jq(‘#’ + id)[0]; }, update : function(sent, total) { jq(‘#’ + this._uplder.id + ‘-sent’).html(Math.round((total / 1024) * sent / 100) + msgzk.KBYTES); if (!this.updated) { this.updated = true; jq(‘#’ + this._uplder.id + ‘-total’).html(Math.round(total / 1024) + msgzk.KBYTES); } jq(‘#’ + this._uplder.id + ‘-percent’).html(” (” +sent + “%” + “)”); }, destroy : function() { jq(this.viewer).slideUp(1000); } }); });

4.Login Effect

index.zul

<zk xmlns="http://www.zkoss.org/2005/zul">
    <vlayout xmlns:c="client">
    <button id="initBtn" label="Login">
        <attribute name="onClick"><![CDATA[
            if (!loginWin.isVisible())
                loginWin.setVisible(true);
            loginWin.doHighlighted();
        ]]></attribute>
    </button>
    <window id="loginWin" title="Login with zk/zk" width="300px" visible="false" minimizable="true" onOK="loginCheck()" border='normal'>
        <attribute name="onMinimize"><![CDATA[
        if (self.isMinimized())
            Clients.evalJavaScript("loginSucess(" + event.getLeft().replace("px","") + "," + event.getTop().replace("px","") + ")");
        ]]></attribute>
        <style>
        div.minimize {
            border: 1px solid #79858E;
            background: #D3E1EC;
            position: absolute;
            opacity: 0.8;      
        }
        div.loginGrid {
            border: none;
        }
        td.loginCtl {
            text-align: center;
        }
        td.loginCtl .z-label {
            color: red;        
            font-style: italic;
        }
        </style>
        <grid sclass="loginGrid">
            <columns>
                <column width="100px" />
            </columns>
            <rows>
                <row>User Name : <textbox id="name" value="zk" c:onFocus="this.select()" /></row>
                <row>Password : <textbox id="pwd" type="password" c:onFocus="this.select()"/></row>
                <row><cell sclass="loginCtl" colspan="2"><vlayout>
                    <button label="Submit" onClick="loginCheck()" width="100px"/>
                    <label id="mesg" />
                </vlayout></cell></row>
            </rows>
        </grid>
        <zscript><![CDATA[
        void loginCheck () {
            if ((name.getValue().equals("zk") && pwd.getValue().equals("zk"))) {
                mesg.setValue("");
                Clients.evalJavaScript("zk.Widget.$('$loginWin').setMinimized(true)");
                initBtn.getParent().appendChild(new Label("Login Success !! Welcome to ZK Demo!"));
            } else {
                mesg.setValue("User Name or Password Invalid!");
                Clients.evalJavaScript("loginFaild()");
            };
        }
        ]]></zscript>
    </window>
    <script type="text/javascript" src="/widgets/effects/login_effect/jquery-ui-1.8.6.custom.min.js" />
    <script type="text/javascript" src="js/customized_effect.js" />   
</vlayout>
</zk>

sample.js

/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

function loginSucess(wleft, wtop) {

    var w = jq('$loginWin'), b = jq('$initBtn');
    //Minimize from the login Window
    jq('
').appendTo("body").css({
        left : wleft,
        top : wtop,
        width : w.width(),
        height : w.height()
    });
    //Minimize to the init Button
    p = b.offset();
    jq('.minimize').animate({
        left : p.left + b.width() / 2,
        top : p.top + b.height() / 2,
        width : 0,
        height : 0
    }, function() {
        jq(this).remove();
    });
}
function loginFaild() { //Shake the window
    var l = jq("$loginWin").position().left;
    jq("$loginWin").animate({
        left : l - 25
    }, 50).animate({
        backgroundColor : "red"
    }, 50).animate({
        left : l
    }, 50).animate({
        left : l + 25
    }, 50).animate({
        left : l
    }, 50).animate({
        backgroundColor : "white"
    }, 50);
    jq("$loginWin").css('background-color','transparent');
}

5. Display Action

<?xml version="1.0" encoding="UTF-8"?>

<!--
index.zul

{{IS_NOTE
	Purpose:

	Description:

	History:
		Mon Jun 12 21:23:35     2006, Created by tomyeh
		Fri May 01 04:36:35     2009, Modified by stera
}}IS_NOTE

Copyright (C) 2006 Potix Corporation. All Rights Reserved.

{{IS_RIGHT
}}IS_RIGHT
-->
<zk>
    <zscript><![CDATA[
        int i = 0;
    ]]></zscript>
    <groupbox id="gb" closable="false" sclass="z-demo-config" width="400px">
        <caption label="ZK Logging Monitor" />
        <timer id="timer" delay="1000" repeats="true">
            <attribute name="onTimer">
                Label l = new Label("New Record Logged : " + ++i + " --> Hash : " + execution.hashCode());
                l.setAction("show: slideDown");
                if (list.getChildren().size() != 0) {
                    list.insertBefore(l, (Component) list.getChildren().get(0));
                } else {
                    l.setParent(list);
                }      
            </attribute>
        </timer>
        <vlayout id="list" style="background: #FEFFCD; overflow:scroll; overflow-x:hidden"
            action="show: slideDown;hide: slideUp" height="150px" />
    </groupbox>
    <zk>
    <zscript><![CDATA[    
        void ToggleLogging() {
            if (timer.isRunning()) {
                timer.stop();
                list.setVisible(false);
                Label result = new Label("All " + i + " Record(s)");
                result.setId("result");        
                btnCtrl.setLabel("Continue Recording");
                result.setParent(gb);
            } else {
                btnCtrl.setLabel("Stop Recording");
                result.detach();
                list.setVisible(true);
                timer.start();
            }
        }
    ]]></zscript>
    <button id="btnCtrl" label="Stop Logging" onClick="ToggleLogging()" />
</zk>
</zk>

5.Dark and Drop

<?xml version="1.0" encoding="UTF-8"?>

<!--
index.zul

{{IS_NOTE
	Purpose:

	Description:

	History:
		Mon Jun 12 21:23:35     2006, Created by tomyeh
		Fri May 01 04:36:35     2009, Modified by stera
}}IS_NOTE

Copyright (C) 2006 Potix Corporation. All Rights Reserved.

{{IS_RIGHT
}}IS_RIGHT
-->

<zk>
	Drag project to other list or same list for reorder
	<hbox>
		<listbox id="left" height="250px" width="200px" onDrop="move(event.dragged)" droppable="true"
			oddRowSclass="non-odd">
			<listitem draggable="true" droppable="true" onDrop="move(event.dragged)">
				<listcell src="/img/Centigrade-Widget-Icons/Briefcase-16x16.png" label="ZK Forge" />
			</listitem>
			<listitem draggable="true" droppable="true" onDrop="move(event.dragged)"> 
				<listcell src="/img/Centigrade-Widget-Icons/Briefcase-16x16.png" label="ZK Mobile" />
			</listitem>
			<listitem draggable="true" droppable="true" onDrop="move(event.dragged)">
				<listcell src="/img/Centigrade-Widget-Icons/Briefcase-16x16.png" label="ZK GWT" />
			</listitem>
			<listitem draggable="true" droppable="true" onDrop="move(event.dragged)">
				<listcell src="/img/Centigrade-Widget-Icons/Briefcase-16x16.png" label="ZK JSF" />
			</listitem>
			<listitem draggable="true" droppable="true" onDrop="move(event.dragged)">
				<listcell src="/img/Centigrade-Widget-Icons/Briefcase-16x16.png" label="ZK JSP" />
			</listitem>
			<listitem draggable="true" droppable="true" onDrop="move(event.dragged)">
				<listcell src="/img/Centigrade-Widget-Icons/Briefcase-16x16.png" label="ZK Spring" />
			</listitem>
		</listbox>
		<separator />
		<listbox id="right" height="250px" width="200px"
			oddRowSclass="non-odd" onDrop="move(event.dragged)" droppable="true"
			multiple="true" >
			<listitem draggable="true"  droppable="true" onDrop="move(event.dragged)">
				<listcell src="/img/Centigrade-Widget-Icons/Briefcase-16x16.png" label="ZK" />
			</listitem>
			<listitem draggable="true"  droppable="true" onDrop="move(event.dragged)">
				<listcell src="/img/Centigrade-Widget-Icons/Briefcase-16x16.png" label="ZK Studio" />
			</listitem>
		</listbox>
	</hbox>
	<zscript>
	void move(Component dragged) {
		if (self instanceof Listitem) {
			if (dragged.getParent().getId().equals("right")) {
				self.parent.insertBefore(dragged, self.getNextSibling());
			} else {
				self.parent.insertBefore(dragged, self.getNextSibling());
			}
		} else {
			self.appendChild(dragged);
		}
	}
	</zscript>
</zk>

7. Form Effect

<?xml version="1.0" encoding="UTF-8"?>

<!--
index.zul

{{IS_NOTE
	Purpose:

	Description:

	History:
		Mon Jun 12 21:23:35     2006, Created by tomyeh
		Fri May 01 04:36:35     2009, Modified by stera
}}IS_NOTE

Copyright (C) 2006 Potix Corporation. All Rights Reserved.

{{IS_RIGHT
}}IS_RIGHT
-->
<zk xmlns:c="client">
    <style>
    .water-mark {
        color: gray; font-style: italic;
    }
    .form {
        border: 1px solid #E1E1E1;
        background: url('../widgets/effects/form_effect/img/bg.png');
        padding: 20px 20px;
        -webkit-border-radius:4px;
        -moz-border-radius:4px;
        border-radius:4px;
    }
    .form .name {
        display: block;
        width: 100px;
        text-align: center;
    }
    </style>

    <script><![CDATA[
        function pwdValid(pwd2) {
            var valLabel = jq("$pwd_val");
            if (pwd2.getValue() == "") {
                zk.Widget.$(valLabel).setValue("Client Side Validation");
            } else if (pwd2.getValue() != zk.Widget.$(jq("$pwd")).getValue()) {
                zk.Widget.$(valLabel).setValue("Not Match !")
            } else {
                zk.Widget.$(valLabel).setValue("OK !")
            };
        }
    ]]></script>
    <div width="500px" class="form">
        <vlayout spacing="7px">
            <label value="On-line Shopping Info" style="font-size:16px;font-weight:bold;color:gray;" />
            <hlayout spacing="20px">
                <label class="name" value="Name :" />
                <textbox id="username" width='150px' />
                Watermark
            </hlayout>
            <hlayout spacing="20px">
                <label class="name" value="Phone :" />
                <textbox id="phone" width='150px' />
                Mask : (999) 999-9999
            </hlayout>
            <hlayout spacing="20px">
                <label class="name" value="Birthday :" />
                <textbox id="date" width='150px' />
                <label value="Mask : m9/d9/y999" />
            </hlayout>
            <hlayout spacing="20px">
                <label class="name" value="Country Code:" />
                <textbox id="country" width='150px' />
                <label value='Mask : AA (Upper-Case)' />
            </hlayout>
            <hlayout spacing="20px">
                <label class="name" value="Credit Card:" />
                <textbox id="cc" width='150px' />
                <label value='Mask : 9999-9999-9999-9999' />
            </hlayout>

            <hlayout spacing="20px">
                <label class="name" value="Password: " />
                <textbox id="pwd" type="password" width="150px" />
            </hlayout>
            <hlayout spacing="20px">
                <label class="name" value="Re-type:" />
                <textbox type="password" width="150px" c:onChange='pwdValid(this)' />
                <label id="pwd_val" value="Client Side Validation" />
            </hlayout>
        </vlayout>
    </div>
    <div id="result" />
    <!-- Load the script -->
    <script type="text/javascript" src="/widgets/effects/form_effect/maskedinput-1.2.2.min.js" />
    <script type="text/javascript" src="/widgets/effects/form_effect/watermarkinput.js" />
    <script type="text/javascript">
        zk.afterMount(function() {
            jq("$username").Watermark("Your Name","gray");

            $.mask.definitions['A']='[A-Z]';
            $.mask.definitions['m']='[01]';
            $.mask.definitions['d']='[0123]';
            $.mask.definitions['y']='[12]';

            jq("$phone").mask("(999) 999-9999");
            jq("$date").mask("m9/d9/y999");
            jq("$country").mask("AA");
            jq("$cc").mask("9999-9999-9999-9999");
        });
    </script>
</zk>

8. Images Zoom

<?xml version="1.0" encoding="UTF-8"?>

<!--
index.zul

{{IS_NOTE
	Purpose:

	Description:

	History:
		Mon Jun 12 21:23:35     2006, Created by tomyeh
		Fri May 01 04:36:35     2009, Modified by stera
}}IS_NOTE

Copyright (C) 2006 Potix Corporation. All Rights Reserved.

{{IS_RIGHT
}}IS_RIGHT
-->
<zk xmlns:h="native">
    <style>
        .main {
            padding : 0 80px;          
            zoom : 1;
        }
        /*Following CSS refer to Zoomer Gallery's Document'*/
        .main li {
            height: 77px;
            width: 123px;
            position: relative;
            float: left;
            list-style:none outside none;
            margin: 30px 30px 0 0;
        }
        .main li img {
            height: 77px;
            width: 123px;
            border:3px solid #DDDDDD;
            position: absolute;
            -ms-interpolation-mode: bicubic;
        }      
    </style>
    Thumbs of Grid Series Demo
    <div height="350px"> 
        <!-- Data From Server -->
        <zscript><![CDATA[
            String dir = "/widgets/effects/image_zoomer";
            List imgs = new ArrayList();
            imgs.add("grid_simple.png");
            imgs.add("data_filter.png");
            imgs.add("iterative_renderer.png");
            imgs.add("inline_row_editing.png");
            imgs.add("grouping_model.png");
            imgs.add("dynamic_data.png");
            imgs.add("grid_grouping.png");
            imgs.add("header_and_footer.png");
            imgs.add("inline_editing.png");
            imgs.add("dynamic_renderer.png");
            imgs.add("grid_hierarchy.png");
            imgs.add("grid_lod.png");
        ]]></zscript>

        <!-- Page Dom Structure -->
        <h:ul id="zoomArea" class="main">
            <h:li forEach="${imgs}">
                <image src="${dir}/img/${each}" />               
            </h:li>
        </h:ul>

        <!-- Client Programming : JQuery Zoomer Gallery -->
        <script type="text/javascript" src="${dir}/zoomer.js" />     
        <script type="text/javascript">      
            zk.afterMount(function() {
                jq("#zoomArea li").Zoomer({speedView:200,speedRemove:200,altAnim:false,speedTitle:400,debug:false});
            });
        </script>
    </div>   
    <hlayout>
    <label value="Animation Speed : " />
    <radiogroup>
        <radio label="Fast">
            <attribute name="onCheck"><![CDATA[
    Clients.evalJavaScript("jq('#zoomArea li').Zoomer({speedView:100,speedRemove:200,altAnim:false,speedTitle:400,debug:false})");
]]></attribute>
        </radio>
        <radio label="Normal" checked="true">
            <attribute name="onCheck"><![CDATA[
    Clients.evalJavaScript("jq('#zoomArea li').Zoomer({speedView:500,speedRemove:400,altAnim:false,speedTitle:400,debug:false})");
]]></attribute>
        </radio>
        <radio label="Slow">
            <attribute name="onCheck"><![CDATA[
    Clients.evalJavaScript("jq('#zoomArea li').Zoomer({speedView:1000,speedRemove:500,altAnim:false,speedTitle:400,debug:false})");
]]></attribute>
        </radio>
    </radiogroup>
</hlayout>
</zk>

9. Tag Cloud

<?xml version="1.0" encoding="UTF-8"?>

<!--
index.zul

{{IS_NOTE
	Purpose:

	Description:

	History:
		Mon Jun 12 21:23:35     2006, Created by tomyeh
		Fri May 01 04:36:35     2009, Modified by stera
}}IS_NOTE

Copyright (C) 2006 Potix Corporation. All Rights Reserved.

{{IS_RIGHT
}}IS_RIGHT
-->
<zk>

<!--Upload-->
        <button label="Upload" upload="true">
		<attribute name="onUpload">{
			org.zkoss.util.media.Media media = event.getMedia();
			if (media instanceof org.zkoss.image.Image) {
				org.zkoss.zul.Image image = new org.zkoss.zul.Image();
				image.setContent(media);
				image.setParent(pics);
			} else {
				Messagebox.show("Not an image: "+media, "Error", Messagebox.OK, Messagebox.ERROR);
				break; //not to show too many errors
			}
		}</attribute>
	</button>
	<vbox id="pics" > </vbox>

<!--Download-->
	<button label="Download sun.jpg">
		<attribute name="onClick">
		Filedownload.save("/home/aerdy/a.png", null);
		</attribute>
	</button>
<!--Timer-->

        <label id="now" />
	<timer id="timer" delay="1000" repeats="true">
		<attribute name="onTimer">
			now.setValue(new Date().toString());
			pm.value = pm.value == 100 ? 0 : pm.value + 10;
		</attribute>
	</timer>
	<separator bar="true" />
	<progressmeter id="pm" value="0" />
	<separator bar="true" />
	<button label="Stops timer" onClick="timer.stop()" />
	<button label="Starts timer" onClick="timer.start()" />

     <!-- Menjalankan FLash-->

     <zk>
	<flash src="http://www.zkoss.org/resource/file/product/zkstudio/zkstudio.swf"
		height="300" width="800">
	</flash>
</zk>

<!--AUDIO DAn VIDEO-->

<zk>

	<audio id="audio" height="40" />
	<separator />
	<fileupload id="fileupload" label="Upload">
		<attribute name="onUpload">
			Object media = event.getMedia();
		</attribute>
	</fileupload>
	<separator />
	<button label="Play">
	<attribute name="onClick">{
		import org.zkoss.util.media.Media;
		try{
			if (media instanceof org.zkoss.sound.Audio)
				audio.setContent(media);
			else if (media != null)
				Messagebox.show("Not an audio: "+media, "Error", Messagebox.OK, Messagebox.ERROR);
		}catch(e){}
		audio.play();
	}
	</attribute>
	</button>
	<button label="Stop" onClick="audio.stop()" />

</zk>
<!-- DINAMIC IMAGES -->

<zk>
	<hbox>
		<window title="Label and Image" border="normal" width="300px"> 
			<image src="/img/Centigrade-Widget-Icons/Globe-128x128.png"/>
			<separator/>
			Do you like the photo?
			<label id="label"/>
			<hbox>		
				<button label="Yes" onClick="label.value = self.label"/>
				<button label="No" onClick="label.value = self.label"/>
			</hbox>
		</window>
		<window title="Dynamic Image" border="normal" width="300px">
		Click the button to Change Image
			<hbox>
				<vbox>
					<button label="Change Resource">
						<attribute name="onClick">
						image.setContent(new org.zkoss.image.AImage("t", desktop.webApp.getResourceAsStream((odd = !odd) ? "/img/msn2.gif" : "/img/msn1.gif")));				
					</attribute>
					</button>
					<image id="image" src="/img/msn1.gif" />
				</vbox>
				<vbox>
					<button label="Dynamic Render" onClick="update()" />
					<image id="img" />
				</vbox>
			</hbox>
			<zscript>
			import java.awt.*;
			import java.awt.image.*;
			import java.awt.geom.*;
			boolean odd = false;
			boolean odd1 = false;

			void update() {
				BufferedImage bufferimg = newimg((odd1 = !odd1));
				img.setContent(bufferimg);
			}
			BufferedImage newimg(boolean update) {
				BufferedImage bi = new BufferedImage(150, 150, BufferedImage.TYPE_INT_RGB);
				Graphics2D g2d = bi.createGraphics();
				g2d.setStroke(new BasicStroke(5));
				Line2D line = null; Rectangle2D retangle = null ;
				if (update) {
					line = new Line2D.Double(10, 10, 130, 130);
					retangle = new Rectangle2D.Double(25,25,85,85);
				}else {
					line = new Line2D.Double(10, 130, 130, 10);
					retangle = new Rectangle2D.Double(25,25,85,85);
				}
				g2d.setColor(update ? Color.cyan : Color.RED);
				g2d.draw(line);
				g2d.setColor(update ? Color.yellow : Color.pink);
				g2d.draw(retangle);
				return bi;
			}
			BufferedImage bufferimg = newimg(false);
			img.setContent(bufferimg);
			</zscript>
		</window>
	</hbox>
</zk>

</zk>

referensi :
zkoss Demo..

Advertisements

Published by

jarcode

hello I am jarcode

One thought on “(Java)Bermain Effect Pada Zkoss Framework”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s