(Java) Ebook Zk_Framework


Ini kah creator pembuat nya ….Björn Bruhns is a Java developer with about 15 years experience. He’s working a long time in the enterprise environment for big automotive companies . Björn doing most of the complex technical initial implementations of the sample project. His Zkoss forum nick is ‘Daibutsu’.

Table of contents
1.About the Authors
2.Preface
3.Update ZK libs from 3.6.3 to 5.x
3.1.Changes in the Configuration (for zk 5.04)
3.2.Changes in the Configuration (for zk 5.06)
3.3.Changes in the Configuration (for zk 5.0.7.1)
3.4.Changes in the Configuration (for zk 5.0.10)
4.Used frameworks
5.Prerequisites.
6.Download and Install
7.A little bit about maven
8.An overview about the tiers
9.The backend
10.The fronted.
10.1.What’s in a standard module (annotate databinded).
10.2.The Module MainController.
10.3.The list window (manual databinded in controller code)
10.4.The dialog window
10.5.Reporting with DynamicJasper
11.Localisation.
12.The configuration files.
13.Spring.
13.1.Spring AOP.
13.2.Spring-Security.
13.3.Security-Concept.
13.4.Spring Bean scopes.
13.5.An one-time-password implementation..
14.Junit testing.
15.How To’s and special components.
15.1.How to build a custom constraint with a parameter.
15.2.How to declare a custom constraint with parameter in zuml .
15.3.TypeConverters..
15.4.How to overhand parameters to composers.
15.5.Long running operations – The Echo Event.
15.6.Modal (Search) Dialogs that are getting back an object.
15.7.EventQueues. We are building a StatusBar controller.
15.8.EventQueues. We are building a MessageBar controller.
15.9.Dashboard modules.
16.Avoid common failures
16.1.DataBinder failures.
17.How to replace the inMemory H2 sample database.
18.The package structure.
18.1.Backend.
18.2.Frontend.
18.3.History of changes

(Android)Jadwal puasa dan Map Masjid v1.4

assalammualaikum Wr,Wb …
Selamat menunaikan ibadah puasa 1433 H , dengan datangnya bulan suci ramadhan team membuat aplikasi yang berjudul jadwal puasa dan Map Masjid versi 1.4 , dengan adanya aplikasi ini semoga dapat memudahkan dalam melihat jadwal sholat , jadwal imsyak , dan tempat masjid , tempat masjid menggunakan teknologi GOogle Map ,… terima kasih

Menu Utama

Jadwal Puasa Di daerah rertentu

Map

About

Jadwal Imsak ramadhan 1433 H untuk daerah yogyakarta dan sekitarnya

Sebagaimana diberitakan, Kementerian Agama menetapkan awal puasa jatuh pada Sabtu (21/7/2012). Dan juga demikian Jadwal puasa untuk daerah yogyakarta dan sekitarnya , dan juga insya allah team wartech akan membuat aplikasi jadwal puasa berbasis mobile dan desktop.

SELAMAT MENUNAIKAN IBADAH PUASA

(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..

(Java)Kalkulator dengan Zkoss Framework

Kalkular ini Cukup lengkap dan menggunakan teknologi zkoss , dan bila teman teman belum tau apa itu zkoss , teman teman bisa liat di postingan saya sebelum nya , saya juga sudah memposting gimana membuat aplikasi penjumlahan . Insya allah postingan selanjutnya akan membahas fitur fitur dalam zkoss framework…

1. Create New projcet – Java Web – Zkoss projcet – dan beri nama projcet dengan Kalkulator

1. Buka file web-pages – WEB-INF – index.zul (Untuk membuat tampilan) dan ketikkan sckrip di bawah ini :

<zk xmlns="http://www.zkoss.org/2005/zul">
    <window apply="Class.Kalkulator"
title="Kalkulator" border="normal" mode="overlapped" sizable="center" >
 <vbox>
  <textbox id="textInput" focus="true"  ></textbox>
  <hbox>
   <vbox>
    <hbox>
     <button width="35px" id="btnBackSpace" label="~" sclass="myblack" mold="trendy"></button>
     <button width="35px" id="btnCE" label="CE"></button>
     <button width="35px" id="btnC" label="C"></button>
     <button width="35px" id="btnPlus" label="+"></button>
     <button width="35px" id="sin" label="SIN">  </button>

    </hbox>    
    <hbox>      
     <button width="35px" id="btn1" label="1"></button>
     <button width="35px" id="btn2" label="2"></button>
     <button width="35px" id="btn3" label="3"></button>
     <button width="35px" id="btnMinus" label="-"></button>
     <button width="35px" id="cos" label="COS"></button>
    </hbox>    
    <hbox>      
     <button width="35px" id="btn4" label="4"></button>
     <button width="35px" id="btn5" label="5"></button>
     <button width="35px" id="btn6" label="6"></button>
     <button width="35px" id="btnKali" label="*"></button>
     <button width="35px" id="tan" label="TAN"></button>
    </hbox>    
    <hbox>      
     <button width="35px" id="btn7" label="7"></button>
     <button width="35px" id="btn8" label="8"></button>
     <button width="35px" id="btn9" label="9"></button>
     <button width="35px" id="btnBagi" label="%"></button>
     <button width="35px" id="xy" label="x^"></button>
    </hbox>    
    <hbox>      
     <button width="115px" id="btn0" label="0"></button>
    </hbox>
   </vbox>
   <vbox>
    <button width="35px" height="115px" id="submit" label="="></button>
   </vbox>
  </hbox>
 </vbox>
</window>
  <zk>
	<flash src="http://www.zkoss.org/resource/file/product/zkstudio/zkstudio.swf"
		height="300" width="800">
	</flash>
</zk>
</zk>

3. Buat Class dengan nama kalkulator pada source pakages dan ketik scrip di bawah ini :

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

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Textbox;
/**
 *
 * @author aerdy
 */
public class Kalkulator extends GenericForwardComposer {
 private float temporaryValue;
 private Textbox textInput;
 private int currentOperator;
 

 private static final long serialVersionUID = -4832335933787054924L;
 
 @Override
 public void doAfterCompose(Component comp) throws Exception {
  super.doAfterCompose(comp);
 }
 
 public void onClick$btnBackSpace(Event event){
  textInput.setText(textInput.getText().substring(0, textInput.getText().length() - 1));
 }
 
 public void onClick$btnCE(Event event){
  textInput.setText("");
 }
 
 public void onClick$btnC(Event event){
  temporaryValue = 0;
  textInput.setText("");
 }
 
 public void onClick$btnPlus(Event event){
  currentOperator = 1;
  temporaryValue = Float.parseFloat(textInput.getText()) + temporaryValue ;
  textInput.setText("");
 }
 
 public void onClick$btnMinus(Event event){
  currentOperator = 2;
  temporaryValue = temporaryValue - Float.parseFloat(textInput.getText()) ;
  textInput.setText("");
 }
 
 public void onClick$btnBagi(Event event){
  currentOperator = 3;
  temporaryValue = temporaryValue / Float.parseFloat(textInput.getText());
  textInput.setText("");
 }
 
 public void onClick$btnKali(Event event){
  currentOperator = 4;
  temporaryValue = temporaryValue * Float.parseFloat(textInput.getText());
  textInput.setText("");
 }
 public void onClick$sin(Event event){
    
    float a = Float.parseFloat(textInput.getText());
     temporaryValue =(float) Math.sin(a);
     textInput.setText(""+temporaryValue);
      
 }
  public void onClick$cos(Event event){
    
    float a = Float.parseFloat(textInput.getText());
     temporaryValue =(float) Math.cos(a);
     textInput.setText(""+temporaryValue);
      
 }
    public void onClick$tan(Event event){
    
    float a = Float.parseFloat(textInput.getText());
     temporaryValue =(float) Math.tan(a);
     textInput.setText(""+temporaryValue);
      
 }
   public void onClick$xy(Event event){
    currentOperator = 5;
    float a = Float.parseFloat(textInput.getText());
     temporaryValue =(float) Math.pow(temporaryValue, a);
     textInput.setText("");
      
 }
 
 public void onClick$btn0(Event event){
  textInput.setText(textInput.getText() + "0");
 }
 
 public void onClick$btn1(Event event){
  textInput.setText(textInput.getText() + "1");
 }
 
 public void onClick$btn2(Event event){
  textInput.setText(textInput.getText() + "2");
 }
 
 public void onClick$btn3(Event event){
  textInput.setText(textInput.getText() + "3");
 }
 
 public void onClick$btn4(Event event){
  textInput.setText(textInput.getText() + "4");
 }
 
 public void onClick$btn5(Event event){
  textInput.setText(textInput.getText() + "5");
 }
 
 public void onClick$btn6(Event event){
  textInput.setText(textInput.getText() + "6");
 }
 
 public void onClick$btn7(Event event){
  textInput.setText(textInput.getText() + "7");
 }
 
 public void onClick$btn8(Event event){
  textInput.setText(textInput.getText() + "8");
 }
 
 public void onClick$btn9(Event event){
  textInput.setText(textInput.getText() + "9");
 }
 
 public void onClick$submit(Event event){
  switch (currentOperator) {
  case 1:{
   onClick$btnPlus(null);
   break;
    }
  case 2:{
   onClick$btnMinus(null);
   break;
    }
  case 3:{
   onClick$btnBagi(null);
   break;
    }
  case 4:{
   onClick$btnKali(null);
   break;
    }
      case 5:{
   onClick$xy(null);
   break;
    }
 
  default:
   alert("Operator tidak dikenal");
   break;
  }
  textInput.setText(String.valueOf(temporaryValue));
 }
}

3. Hasil

Referensi :
Zkoss Demo…

(Java)Penjumlahan Dengan Zkoss Framework

1. Create new Project – Java web – dan beri nam project terserah anda …

2. Buka File pada web pages – WEB-INF – index.zul dan tulis kan scrip di bawah ini :

<zk xmlns="http://www.zkoss.org/2005/zul">
    <window apply="Source.Jumlah" title="Penjumlahan" border="normal" mode="overlapped">

               <textbox id="angka1" focus="true" > </textbox> 
               <label value="+" > </label>
               <textbox id="angka2" focus="false" > </textbox> 

              <vbox> 

                <button width="325px " id="hasil" label="Hasil" > </button>
              </vbox>
                <vbox>

                <textbox width="320px" id="tampil" > </textbox>
                </vbox>
    </window>
</zk>

3. Create Class pada Source packages dan tuliskan scrip dibawah ini

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Textbox;

/**
 *
 * @author aerdy
 */
public class Jumlah extends GenericForwardComposer {
    private Textbox angka1;
    private Textbox angka2;
    private Textbox tampil;
    Float hasil;

    public void onClick$hasil(Event event){
        Float angka11 = Float.parseFloat(angka1.getText());
        Float angka22 = Float.parseFloat(angka2.getText());        
        hasil = angka11 + angka22;
        tampil.setText(""+hasil);
    }
}

<pre>

Hasil

Referensi : zkoss project

(Java)Membuat Project Pertama ZKOSS

Sebelumnya saya telah memposting bagaimana Cara mengistal zkoss di eclipse,tetapi saya tidak mendefelop menggunakan eclipse melainkan menggunakan NetBeans..teman teman tinggal cari plugin ZKoss buat netbeans sudah tersedia atau bisa singgah di sini, kali ini kita akan mencoba bagaimana membuat Project pada zkoss , karena dalam pembelajaran pemograman kalo gak ketemu helloworld belajarnya jadi gak nyaman, oleh karena itu Semua itu berawal dari Basic dan insya allah akan mencari Lebih dari basic , karena itu butuh proses.. langsung kita mulai saja..

Create new Project – Pilih java web

Buka tree project pada web pages – index.zul

Tuliskan Scrip di bawah ini

 

Penjelasan

(Merupakan XML namespace yang di tujukan pada alamat zkoss)

(Merupakan Jendela layar tampilan)

(Text yang berada dalam window (layar tampilan))

(Text yang berada pada label dan bertulisan Helloworld)

(merupakan Button yang di aktifkan sebagai onClick dan menampilkan persan Hello Selamat Belajar)

Hasil

referensi :
Zkoss Projcet
Google
wikipedia.org