Praktis ZK Framework

Pengenalan Java
Java merupakan bahasa pemograman turunan dari c/c++ namun lebih sederhana , karena java terbagi
menjadi dua , java merupakan bahasa permograman dan java merupakan pengembang aplikasi , Yang
baru baru ini java di kembangkan pada platform mobile yang makin marak di gunakan “Android” . Di
sana kita dapat menyimpulkan bahwa java jago masalah pengembangan aplikasi.java pertama di
kembangkan oleh sun microsistem , tetapi sejak tahun 2008 an java sudah di adopsi oleh oracle hingga
saat ini .

Java Mulai dikembangkan sejak 1991 oleh “Stealth Project” bertujuan untuk menciptakan suatu sistem
software yang mampu berjalan pada alat- alat elektronik (small devices). James Gosling berkonsentrasi
pada ide pembuatan bahasa pemrograman. Juni 1991, muncullah bahasa interpreter “Oak” yang
merupakan awal dari sejarah dari Java. Java secara resmi diperkenalkan oleh SUN pada dunia pada
tanggal 23 Mei 1995 bersama dengan browser HotJava. Saat ini Java terbagi menjadi 3 teknologi:

✔ JSE – untuk aplikasi desktop

✔ JME – untuk aplikasi small device (HP, PDA,etc).
✔ JEE – untuk aplikasi enterprise (web, Distribute Programming: web service/SOAP, RMI, EJB,
JNDI, etc.

Java Bytecode

Java menggunakan compiler sekaligus Interpreter agar dapat berjalan pada platform yang berbeda.,Java
compiler mengcompile source code menjadi Java Bytecod,Java Bytecode merupakan instruksi mesin
yang tidak spesifik terhadap suatu sistem mesi. Bytecode inilah yang akan dieksekusi oleh JVM yang
ada didalam JRE.

Pemasangan JDK
Pemasangan JDK merupakan awal dari mendevlop sebuah aplikasi menggunakan java , jdk dapat kita
dapat kan di oracle.org gratis .

1
Praktis ZK Framework

Pemasangan JDK di linux

Download JDK dengan versi terbaru http://oracle/technetwork/java/javase/downloads/index.html ,
setelah JDK di download dengan format tar.gz kita akan langsung memasang dan men setting path
dalam bashrc . Disini kita akan menggunakan terminal .

1. Letakkan file JDK versi terbaru yang di download ke home.

2. Kita akan mengekstrak file ,Buka terminal ctrl+alt+t

sudo tar xzvf jdk-7-linux-i586.tar.gz -C /opt/

3. Setelah proses ekstrak selesai kita akan mengatur path

sudo gedit /etc/bash.bashrc

4. Setelah terbuka tambahkan scrip di bawah ini

export PATH=$PATH:/opt/jdk1.7.0/bin

5. Untuk Mengetahui JDK sudah terpasang kita dapat menggunakan scrip di bawah ini
javac -version

Pengenalan ZK Framework

ZK Framework adalah web aplikasi berbasis ajax dan bersifat open source , zk merupakan JEE karena
berjalan di atas berowser dan bersifat servlet , Servlet adalah sebuah class yang digunakan untuk
menerima request dan memberikan response, terutama melalui protokol HTTP. Anda menulis source
code dari Servlet, lalu mengcompile dan mendeploy di java web server. Selanjutnya client dapat
berinteraksi dengan Servlet melalui browser.

2
Praktis ZK Framework

ZK Framework adalah web aplikasi berbasis ajax dan bersifat open source, zk di develop menggunakan
javascrip ,Zk framework bisa dikatakan salah satu framework berbasis RIA(Rich Internet Application),
dan applikasi ini lebih ke component base XUL dan XHTML, karena benar-benar mirip cara
penggunaannya seperti applikasi desktop,dokumen tentang zkoss framework dapat di lihat di zkDemo.

Pemasangan ZK di netbeans Dan Server

Sebelum mesang pastinya mendownload plugin yang di butuhkan untuk menjalankan di IDE netbeans ,
plugin ini dapat di dapatkan di zkoss,org , file itu bernama net-sf-rem601ce.nbm . Server untuk
menjalankan nya sudah paket dalam netbeans , server itu berupa glassfish-3.1.2 dan apache-tomcat .
Jadi kita tidak susah susah untuk mendownload nya kembali.

1. Buka Netbeans IDE dengan versi terbaru

2. Tools – Plugins

3. Pilih tab downloaded dan add plugin , masukkan file plugin zk yang di download .

4. Install dan tunggu beberapa saat hingga proses selesai.

Pengenalan Layar Kerja

Tree Project

Tree Project Merupakan Susunan Project , class , package setelah membuat project .

Pallate

Pallate Merupakan tools – tools yang berisi button , label, image dan yang lainnya , Pallate sangat
membantu pada saat membuat aplikasi , karena memudahkan dalam mendevelop aplikasi , Drag and
Drop lah yang di gunakan untuk menggunakan nya.

3
Praktis ZK Framework

Layar Kerja

Layar kerja merupakan tempat antar programming dengan teman kerja nya untuk memasukkan scrip
yang di inginkan .

4
Praktis ZK Framework

Informasi

Informasi dari project yang di buat , apakah project itu error atau memili bug dapat di lihat di informasi.

Hello World
Hello world merupakan awal dari segala awal untuk memulai , karena bila seoarang developer tidak
heran lagi dengan hello world , Untuk membuat project zk seperti biasanya , setelah pemasangan zk
selesai zk itu terletak di Java Web .

1. File - New Project

2. Java Web dan pilih ZK601CE JavaEE6 Application . NEXT

5
Praktis ZK Framework

3. Beri nama Project dengan nama HelloWorld

4. Project dapat di lihat seperti gambar di bawah ini

5. Buka File index.zul dan tuliskan scrip di bawah ini :

<zk xmlns="http://www.zkoss.org/2005/zul">

<window title="My First ZK Application" border="normal" width="400px" height="400px"

style="bold">
Hello World!

<label value="Helloworld" popup="center"/>

<button label="Say Hello" onClick='Messagebox.show("Hello Selamat Belajar")'/>

</window>

</zk>

6
Praktis ZK Framework

Di bawah ini merupakan penejelasan program di atas ,

<zk xmlns="http://www.zkoss.org/2005/zul">

<window title="My First ZK Application" border="normal" width="400px" height="400px"

style="bold">

Merupakan Layar kerja window di sini height dan width di atur layar kerja yang di inginkan

<label value="Helloworld" popup="center"/>

Membuat label dalam Window dan memasukkan tulisan helloworld

<button label="Say Hello" onClick='Messagebox.show("Hello Selamat Belajar")'/>

Membuat Button dan menampilkan pesan HelloWorld

6. Run Project dan hasil nya seperti di bawah ini :

Pengenalan ZK Userinterface
Membuat tampilan di ZK sangat menyenangkan , karena zk berjalan di browser dan zk seperti aplikasi
desktop , tampilan merupakan syarat utama dalam sebuat pembuatan aplikasi , karena dengan tampilan
yang userfriendly aplikasi sangat di gemari oleh user , di zk kita membuat tampilan sama seperti
membuat tampilan di servlet biasanya , Karena zk susah untuk membuat pernak pernik yang enak di
pandang jadi kita harus memiliki imajinasi yang kuat untuk membuat aplikasi zk itu sendiri.

7
Praktis ZK Framework

Judul Gambar Scrip

<button label="Button" onClick="">
Button
</button>

<caption image="Images/zk.png"
Caption label="Caption"/>

Images <image id="images" src="Images/zk.png"

width="" height=""/>

Label <label id="label" value="Label" />

Separator __________________ <separator bar="true"/>

Splitter <splitter collapse="before"/>

CheckBox <checkbox id="" label="Check" onCheck="" />

ComboBox <combobox>
<comboitem label="Combobox"/>
</combobox>

DateBox <datebox id="db"/>

RadioGroup <groupbox id="gb" mold="3d" width="300px">

<radiogroup

8
Praktis ZK Framework

onCheck="">
<radio
label="Apple"/>
<radio
label="Orange"/>
</radiogroup>
</groupbox>
ListBox <listbox id="" width="100px" height="100px"
onSelect="">

<listhead>

<listheader label="List 1"/>

<listheader label="List 2"/>

</listhead>

<listitem>

<listcell label="List 3"/>

<listcell label="List 4"/>

</listitem>

</listbox>
MenuBar <menubar id="menubar">
<menu label="File"
src="/img/m1.gif" >
<menupopup>
<menuitem
src="/img/m1.gif" label="New"
onClick="alert(self.label)"/>
<menuitem
src="/img/m2.gif" label="Open"
onClick="alert(self.label)"/>
<menuitem
src="/img/m3.gif" label="Save"
onClick="alert(self.label)"/>

<menuseparator/>
<menuitem
label="Exit" onClick="alert(self.label)"/>
</menupopup>
</menu>
</menubar>

9
Praktis ZK Framework

TextBox <textbox value="Text"/>

ToolBar <toolbar>
<toolbarbutton label="Bar 1"/>
<toolbarbutton label="Bar 2"/>
</toolbar>
BorderLayout <borderlayout>
<west title="West"
size="25%" flex="true" maxsize="250"
splittable="true" collapsible="true">

</west>
<center border="none"
flex="true">

</center>
<east size="50%"
border="none" flex="true">

</east>
</borderlayout>
Grid <grid height="100px" width="100px" >
<columns>
<column label="Grid 1"/>
<column label="Grid 2"/>
</columns>
<rows>
<row>
</row>
</rows>
</grid>
Tree <tree id="tree" width="400px" rows="8">
<treecols sizable="true">
<treecol
label="Name" />
<treecol
label="Description" />
</treecols>
<treechildren>
<treeitem>
<treerow>

<treecell label="Item 1" />

<treecell label="Item 1 description" />

</treerow>
</treeitem>

10
Praktis ZK Framework

<treeitem
label="Item 3" />
</treechildren>
</tree>
Iframe <iframe src="http://www.google.com"
width="95%" style="border: 1px solid gray"/>

Window <window title="ZK Framework" width="100px"

height="100px">
</window>

Project Latihan ZK Framework

Animasi

Dalam Sebuah Animasi atau bermain dengan userinterface di zk framework sangat lah menyenangkan ,
permainan pernak pernik sangat lah di utamakan dalam zk , apalagi aplikasi ini berbasis ajax dan
mengadopsi 11 12 desktop , dengan adanya animasi yang di berikan oleh zk framework sangat
menguntungkan , karena dengan adanya animasi yang di gunakan user lebih terasa nyaman dengan
aplikasi yang di buat , animasi pada zk tidak sangatlah sulit karena kita hanya bermain di framework
nya zk saja , tidak mengakar ke scrip java .

➢ Slide Down

index.zul

<zk xmlns:w="client">

<hbox>
<button label="Coba" w:onClick="jq(this.$f('images')).hide().slideDown()">
</button>
</hbox>

<image id="images" src="Images/zk.png" width="" height=""/>

</zk>

11
Praktis ZK Framework

➢ Fade In

index.zul

<zk xmlns:w="client">

<hbox>
<button label="Appear" w:onClick="jq(this.$f('images')).hide().fadeIn">
</button>
</hbox>

<image id="images" src="Images/zk.png" width="" height=""/>

</zk>

➢ Slowly

index.zul

<zk xmlns:w="client">
<hbox>
<button label="Slowly" w:onClick="jq(this.$f('images')).hide().fadeIn(2500)">
</button>
</hbox>

<image id="images" src="Images/zk.png" width="" height=""/>

</zk>

12
Praktis ZK Framework

➢ SlideUp

index.zul

<zk xmlns:w="client">
<hbox>
<button label="SlideUp" w:onClick="jq(this.$f('images')).show().slideUp()">
</button>

</hbox>
<image id="images" src="Images/zk.png" width="" height=""/>
</zk>

➢ FadeOut

13
Praktis ZK Framework

index.zul

<zk xmlns:w="client">
<hbox>

<button label="FadeOut" w:onClick="jq(this.$f('images')).show().fadeOut()">

</button>
</hbox>
<image id="images" src="Images/zk.png" width="" height=""/>
</zk>

14