April 2012 ~ Requirement Constraints

Monday, 30 April 2012

Look and Feel for listitem with paging and with crud actions

Posted on 23:24 by Unknown

Listitem Look and Feel with Pagination and with crud buttons for each record

Output

Click here to see the demo

Click here to download the source code

Posted in ZK CSS | No comments

List item with crud buttons

Posted on 10:42 by Unknown

Output ;

Here is the code

<?page title="Practice List" contentType="text/html;charset=UTF-8"?>
<zk>
<style>

/* Even rows in a listbox */ tr.z-listitem,tr.z-row
td.z-row-inner,tr.z-row td.z-group-inner,tr.z-row
td.z-group-foot-inner,tr.z-row { background: none repeat scroll
0 0; }

/* Odd rows in a listbox */ tr.odd
td.gc,tr.odd,tr.z-listbox-odd,tr.z-grid-odd
td.z-row-inner,tr.z-grid-odd { background: none repeat scroll 0
0; }

/* Even rows in a listbox */ tr.z-listitem,tr.z-row
td.z-row-inner,tr.z-row td.z-group-inner,tr.z-row
td.z-group-foot-inner,tr.z-row { background: none repeat scroll
0 0; }

/* Odd rows in a listbox */ tr.odd
td.gc,tr.odd,tr.z-listbox-odd,tr.z-grid-odd
td.z-row-inner,tr.z-grid-odd { background: #FFFFFF none repeat
scroll 0 0; }

/* Unselected rows with the mouse hovering over them */
tr.overd,td.overd,tr.z-listitem-over { background: #D3DBFC none
repeat scroll 0 0; }

/* Selected rows in a listbox */
tr.seld,td.seld,tr.z-listitem-seld { background: #B8BFDC none
repeat scroll 0 0; }

/* Selected rows with the mouse hovering over them */
tr.overseld,td.overseld,tr.z-listitem-over-seld { background:
#D3DBFC none repeat scroll 0 0; }
/*ZCS:1.0,5.0:
Login.zul
*/

/* Start: Modal window
---------------------------------------------- */

.z-window-modal-hm, .z-window-modal-br,
.z-window-modal-cr, .z-window-modal-cl,
.z-window-modal-hr, .z-window-modal-tr,
.z-window-modal-hl { background-image:none; background-color
: #0C6BA8; }

.z-window-modal-icon { width: 20px; height: 16px;
border-width: 1px; border-style: solid; border-color: #0C6BA8
#0C6BA8 #0C6BA8 #0C6BA8; box-shadow: inset 0 1px 0 #0C6BA8,
inset -1px -1px 0 #0C6BA8, inset -1px -2px 0 #0C6BA8; }

.z-window-modal-close { background:url('../images/close.jpg')
transparent no-repeat 0 0; }

.z-window-modal-header, .z-window-modal-header-noborder {
padding-top : 1px; padding-right : -1px; padding-bottom : 1px;
padding-left : 0; margin-right: -4px; }

/* End: Modal Window
---------------------------------------------- */

/* Start: Form Grid
---------------------------------------------- */

.fgrid tr.z-row
td.z-row-inner,tr.z-row,div.z-grid-body div.z-cell,div.z-grid {
border: none; overflow: hidden; zoom: 1; background: white;
border-top: none; border-left: none; border-right: none;
border-bottom: none;}

/* End: Form Grid
---------------------------------------------- */

/* Start: Form TextBox
---------------------------------------------- */
.ftextbox.z-textbox.z-textbox-focus {
border-style : solid;
border-width : 1px;
border-color : blue;
}

/* End: Form TextBox
---------------------------------------------- */

/* Start: Combo Box
---------------------------------------------- */

.fcombofocus.z-combobox.z-combobox-focus .z-combobox-inp{
border-style : solid;
border-width : 1px;
border-color : blue;

}

/* End: Combox Box
---------------------------------------------- */

/* Start: Input Form Title
---------------------------------------------- */

.flbltitle.z-label
{
font-size : 14px;
font-weight : bolder;
color:#0C6BA8;

}

/* End: Input Form Title
---------------------------------------------- */

/* Start: Input Form Label
---------------------------------------------- */

.flabel.z-label
{
font-size : 12px;
font-family: verdana,arial,sans-serif
}

/* End: Input Form Label
---------------------------------------------- */

/* Start: Required Field asterix
---------------------------------------------- */

.flblreq.z-label
{
font-size : 16px;
font-weight : bolder;
color:red;
}

/* End: Required Field asterix
---------------------------------------------- */

/* button
---------------------------------------------- */
.mybutton.z-button .z-button-cm {
background-image: none;
color: white;
font-weight : bolder;
}

.mybutton.z-button .z-button-tm, .z-button .z-button-bm {
background-image: none;
}

.mybutton.z-button .z-button-cl, .z-button .z-button-cr {
background-image: none;
}

.mybutton.z-button .z-button-tl {
background-image: none;
}

.mybutton.z-button .z-button-bl {
background-image: none;
}

.mybutton.z-button .z-button-tr {
background-image: none;
}

.mybutton.z-button .z-button-br {
background-image: none;
}

.button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}

.bigrounded {
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
.medium {
font-size: 12px;
padding: .4em 1.5em .42em;
}
.small {
font-size: 11px;
padding: .2em 1em .275em;
}

/* color styles
---------------------------------------------- */

/* black */
.black {
color: #d7d7d7;
border: solid 1px #333;
background: #333;
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
background: -moz-linear-gradient(top, #666, #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
.black:hover {
background: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
background: -moz-linear-gradient(top, #444, #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}
.black:active {
color: #666;
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
background: -moz-linear-gradient(top, #000, #444);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
}

/* gray */
.gray {
color: #e9e9e9;
border: solid 1px #555;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top, #888, #575757);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.gray:hover {
background: #616161;
background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
background: -moz-linear-gradient(top, #757575, #4b4b4b);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
}
.gray:active {
color: #afafaf;
background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
background: -moz-linear-gradient(top, #575757, #888);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
}

/* white */
.white {
color: #606060;
border: solid 1px #b7b7b7;
background: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.white:hover {
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
background: -moz-linear-gradient(top, #fff, #dcdcdc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
.white:active {
color: #999;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
background: -moz-linear-gradient(top, #ededed, #fff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
}

/* orange */
.orange {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

/* red */
.red {
color: #faddde;
border: solid 1px #980c10;
background: #d81b21;
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover {
background: #b61318;
background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
background: -moz-linear-gradient(top, #c9151b, #a11115);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
}
.red:active {
color: #de898c;
background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
background: -moz-linear-gradient(top, #aa1317, #ed1c24);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
}

/* blue */
.blue {
color: #d9eef7;
border: solid 1px #0076a3;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top, #0095cc, #00678e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
color: #80bed6;
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -moz-linear-gradient(top, #0078a5, #00adee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}

/* rosy */
.rosy {
color: #fae7e9;
border: solid 1px #b73948;
background: #da5867;
background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));
background: -moz-linear-gradient(top, #f16c7c, #bf404f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f');
}
.rosy:hover {
background: #ba4b58;
background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));
background: -moz-linear-gradient(top, #cf5d6a, #a53845);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845');
}
.rosy:active {
color: #dca4ab;
background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c));
background: -moz-linear-gradient(top, #bf404f, #f16c7c);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c');
}

/* green */
.green {
color: #e8f0de;
border: solid 1px #538312;
background: #64991e;
background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
background: #538018;
background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
background: -moz-linear-gradient(top, #6b9d28, #436b0c);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {
color: #a9c08c;
background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}

/* pink */
.pink {
color: #feeef5;
border: solid 1px #d2729e;
background: #f895c2;
background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));
background: -moz-linear-gradient(top, #feb1d3, #f171ab);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab');
}
.pink:hover {
background: #d57ea5;
background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
background: -moz-linear-gradient(top, #f4aacb, #e86ca4);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4');
}
.pink:active {
color: #f3c3d9;
background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3));
background: -moz-linear-gradient(top, #f171ab, #feb1d3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3');
}

* {
margin: 0;
padding: 0;
}

element.style {
height: 100%;
width: 100%;
}

.z-window-embedded {
height: 100% !important;
margin: 0;
overflow: visible;
padding: 0;
}

.login {
background-color: #BFCCD2;
}

.loginautoSize {
height: 100%;
position: absolute;
width: 100%;
}

img {
border: medium none;
}

.loginWrapper {
position: absolute;
width: 100%;
}

.loginCont {
margin: 50px auto;
width: 940px;
}

.loginlogo {
background: url("../images/drkare_logo.gif") no-repeat scroll 0 0
transparent;
display: block;
height: 39px;
position: absolute;
width: 110px;
}

.loginCont div {
margin: 5px 0;
padding-top: 5px;
}

.loginCont form {
background: url("../images/login_form_bkg.png") no-repeat scroll 0 0
transparent;
margin: auto;
padding: 75px 60px 0;
width: 245px;
}

element.style {
height: 1px;
width: 100%;
}

.loginCont div {
margin: 5px 0;
padding-top: 5px;
}

.loginCont form input {
background: none repeat scroll 0 0 #F2F2F2;
border: 1px solid #CCCCCC;
margin: 5px 0;
padding: 3px 2px;
width: 100%;
}

element.style {
margin: 10px 10px 10px 0;
}

.loginlabel.z-label {
color: #333333;
font: bold 11px normal Tahoma, Geneva, sans-serif;
padding: 0 0 4px;
}

.loginCont div {
margin: 5px 0;
padding-top: 5px;
}

.loginCont form input.signIn {
background: url("../images/login_btn.gif") no-repeat scroll 0 0
transparent;
border: medium none;
color: #FFFFFF;
padding: 6px 0;
width: 60px;
}

.loginCont form input {
margin: 5px 0;
}

.login a:link,.login a:visited {
color: #666666;
}

.login.z-a {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
}

.login.a {
text-decoration: none;
}

.loginCont .help {
border-top: 1px solid #CCCCCC;
margin-top: 10px;
text-align: right;
}

.loginCont div {
padding-top: 5px;
}

.login .footer {
color: #666666;
font-size: 11px;
}

.loginCont div {
margin: 5px 0;
padding-top: 5px;
}

.login .footer P {
margin: 15px 0 30px;
text-align: right;
}

.circle {
width:20px;
height:20px;
display:block;
border-radius:66px;
-moz-border-radius:66px;
-webkit-border-radius:66px;
-khtml-border-radius:66px;
border:#ccc 1px ;
font-size:12px;
line-height:20px;
text-shadow:0 1px 0 #fff;
text-decoration:none;
text-align:center;
padding: 0 0 0;

}

.button.tr.z-listitem, tr.z-listitem a, tr.z-listitem a:visited {
color: white;
font-size: 12px;
font-weight: normal;
text-decoration: none;

}

</style>
<window title="Practice List" border="normal">
<listbox id="box">
<listhead sizable="true">
<listheader label="Practice Name" sort="auto" />
<listheader label="City" sort="auto" />
<listheader label="State" sort="auto" />
<listheader label="Zip Code" sort="auto" />
<listheader label="Action" sort="auto" />
</listhead>
<listitem>
<listcell label="Adult Medical Day Care" />
<listcell label="Cumberland" />
<listcell label="Maryland" />
<listcell label="21502" />
<listcell>
<hlayout >
<a label="A" sclass="mybutton button gray circle " />
<a label="D" sclass="mybutton button orange circle" />
<a label="E" sclass="mybutton button green circle"/>
</hlayout>
</listcell>
</listitem>
<listitem>
<listcell label="Baptist Medical Center" />
<listcell label="Kansas" />
<listcell label="Missouri" />
<listcell label="64131" />
<listcell>
<hlayout>
<a label="A" sclass="mybutton button gray circle " />
<a label="D" sclass="mybutton button orange circle" />
<a label="E" sclass="mybutton button green circle"/>
</hlayout>
</listcell>
</listitem>
<listitem>
<listcell label="California Medical Facility" />
<listcell label="Vacaville" />
<listcell label="California" />
<listcell label="95696" />
<listcell>
<hlayout>
<a label="A" sclass="mybutton button gray circle " />
<a label="D" sclass="mybutton button orange circle" />
<a label="E" sclass="mybutton button green circle"/>
</hlayout>
</listcell>
</listitem>
<listitem>
<listcell label="Garden Park Medical Center" />
<listcell label="Gulfport" />
<listcell label="Mississipp" />
<listcell label="395033085" />
<listcell>
<hlayout>
<a label="A" sclass="mybutton button gray circle " />
<a label="D" sclass="mybutton button orange circle" />
<a label="E" sclass="mybutton button green circle"/>
</hlayout>
</listcell>
</listitem>
</listbox>
</window>
</zk>

Posted in ZK CSS | No comments

ZK ListBox

Posted on 02:13 by Unknown

Let us first design a simple static list box with crud Buttons as last column.

Here is the code

<?page title="Practice List" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="Practice List" border="normal">

<listbox id="box">
<listhead sizable="true">
<listheader label="Practice Name" sort="auto" />
<listheader label="City" sort="auto" />
<listheader label="State" sort="auto" />
<listheader label="Zip Code" sort="auto" />
<listheader label="Action" sort="auto" />
</listhead>
<listitem>
<listcell label="Adult Medical Day Care" />
<listcell label="Cumberland" />
<listcell label="Maryland" />
<listcell label="21502" />
<listcell>
<toolbar>
<toolbarbutton id="Active" label="Active" />
<toolbarbutton id="Delete" label="Delete" />
<toolbarbutton id="Edit" label="Edit" />
</toolbar>
</listcell>
</listitem>
<listitem>
<listcell label="Baptist Medical Center" />
<listcell label="Kansas" />
<listcell label="Missouri" />
<listcell label="64131" />
<listcell>
<toolbar>
<toolbarbutton label="Active" />
<toolbarbutton label="Delete" />
<toolbarbutton label="Edit" />
</toolbar>
</listcell>
</listitem>
<listitem>
<listcell label="California Medical Facility" />
<listcell label="Vacaville" />
<listcell label="California" />
<listcell label="95696" />
<listcell>
<toolbar>
<toolbarbutton label="Active" />
<toolbarbutton label="Delete" />
<toolbarbutton label="Edit" />
</toolbar>
</listcell>

</listitem>
<listitem>
<listcell label="Garden Park Medical Center" />
<listcell label="Gulfport" />
<listcell label="Mississipp" />
<listcell label="395033085" />
<listcell>
<toolbar>
<toolbarbutton label="Active" />
<toolbarbutton label="Delete" />
<toolbarbutton label="Edit" />
</toolbar>
</listcell>

</listitem>
</listbox>
</window>
</zk>

Output as follows

Posted in ZK CSS | No comments

Sunday, 29 April 2012

Hibernate Introduction Part 2

Posted on 22:18 by Unknown

Hibernate Annotations
This example is the same as the first example except that it uses annotations. There we first started
by creating the .hbm.xml file, here there is no need to create it instead we will use annotations to do
the object relational mapping.

Step 1 : Remove the patient.hbm.xml file

Step 2 ; Open the hibernate.cfg.xml and replace the following line


<mapping resource="patient.hbm.xml" />

With


<mapping class="mypack.patient" />

Step 3 : Open the patient.java and replace as follows

package mypack;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.Table;
import javax.persistence.Column;

@Entity
@Table(name="patient")
public class patient {

private Integer id;
private String firstName;
private String lastName;

@Id
@GeneratedValue
@Column(name="ID")
public Integer getId() {
return id;
}

public void setId(Integer id) {
this.id = id;
}

@Column(name="firstname")
public String getFirstName() {
return firstName;
}

public void setFirstName(String firstName) {
this.firstName = firstName;
}

@Column(name="lastname")
public String getLastName() {
return lastName;
}

public void setLastName(String lastName) {
this.lastName = lastName;
}

}

Step 4: No Change in Test.java . Just right click as Test.java and run as Java application.

Posted in Hibernate Introduction | No comments

Hibernate POC

Posted on 10:19 by Unknown

I am not sure whether title for this post is correct or wrong. But in the post , i am going to write how hibernate works if we play around in the application.

1. Tables are automatically created
After Hibernate Introduction Part 1, i just went to the back end database, change the table name from patient

to patient1. Now i again run the application, it runs without any exception. But when i refresh the db at the back end, i saw , again patient table is created and record is inserted.

Posted in Hibernate POC | No comments

Hibernate Introduction Part 1

Posted on 10:06 by Unknown

So What is hibernate ?
Here is the answer
Click the following link
Link

:) Well, if you have time, just go thru each and understand. Otherwise, simply put, using hibernate
it is each save the data into the database or load the data from the database.

Well, let's start.

Step 1: Development environment

1. My sql server 5.0 Download
2. Hibernate 4.1.1 Download
3. JDBC Driver for Mysql ((mysql-connector-java-5.1.19.zip)) Download
4. Eclipse IDE

Unzip the hibernate buddle and you should have the following structure after you unzip
Documentation folder
lib Folder
Project folder
log text file
hibernate logo image
license text file

Step 2:

Open mysql and create the following table in any of the exisitng database or create new database.
Here is the script for our table

CREATE TABLE `patient`
(
`ID` INT(11) NOT NULL AUTO_INCREMENT,
`FirstName` VARCHAR(100) DEFAULT NULL,
`LastName` VARCHAR(100) DEFAULT NULL,
`Email` VARCHAR(200) DEFAULT NULL,
PRIMARY KEY (`ID`)
) ENGINE=INNODB DEFAULT

Step 3: Eclipse Java project

1. Click File -> New -> Other -> Java Project
2. Say Example1 for Project Name and leave all other to default values.
(Make sure, JRE has been configured).
3. Next we will add all dependencies in the example1. Now click Example1 project in the project
explorer and right click -> Click New-> Folder. Say folder name as lib

Now copy the following files into lib folder
(Eclipse project explorer accepts all copy and paste operation. For example, you can copy file
or folder in windows explorer and then you can come back to eclipse project explorer and paste it)

All the files in Hibernate->Lib->required.
All the files in Hibernate->Lib->jpa.
All the files in Hibernate->Lib->envers
mysql-connector-java-5.1.18-bin.jar

4. Now setup the build path. In order to execute our example, all the above jar files should be in
class build path

Again, click on the Example1, right click, and select build Path->configure build path.
Go to Libraries-> External jars, browse lib folder you created earlier. Then add external jars by

selecting all jar files that you copied to lib folder in one of previous step

Step 4: Creating Java beans

Now let us create the java bean for the patient where we want to store in the database.

Again, right click on Example1, Select New -> Class; Package Name : mypack and Class name :patient
Leave the all other to default values

Now type or copy the following

package mypack;

public class patient {

private Integer id;
private String firstName;
private String lastName;

public Integer getId() {
return id;
}

public void setId(Integer id) {
this.id = id;
}

public String getFirstName() {
return firstName;
}

public void setFirstName(String firstName) {
this.firstName = firstName;
}

public String getLastName() {
return lastName;
}

public void setLastName(String lastName) {
this.lastName = lastName;
}

}

Step 5: Mapping between Java bean and Table.

Let us first summarize what we have done so far. 1) My sql table 2) Java bean.

Now, important step, we will see how to map 1) and 2) , so that whenever new object is created,
it will insert one record in the database.

Hibernate makes persisting the state of your Java objects incredibly simple. However, in order for

Hibernate to know where to story your JavaBeans, or how to map the property of a JavaBean to a database

column, the developer has to provide a bit of direction to the Hibernate framework.

This is where the Hibernate mapping file comes into play. The mapping file tells Hibernate what table

in the database it has to access, and what columns in that table it should use.

Using JPA annotations also, we can do the same. In this example, first we will see using mapping files
and then we will convert the same example to JPA annotations.

Now let us create the mapping file
Right Click src->New->File. File Name as patient.hbm.xml

Type or copy the below content

<?xml version="1.0"?>
<!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN"
"http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">

<hibernate-mapping>
<class name="mypack.patient" table="PATIENT">
<id name="id" type="java.lang.Integer">
<column name="ID" />
<generator class="native" />
</id>
<property name="firstName" type="java.lang.String">
<column name="FIRSTNAME" />
</property>
<property name="lastName" type="java.lang.String">
<column name="LASTNAME" />
</property>
</class>
</hibernate-mapping>

Step 6 : Hibernate Configuration

Now we have the persistent class and its mapping file in place. Let’s configure Hibernate.

Right Click src->New->File. File Name as hibernate.hbm.xml

Paste following code there. Save it as hibernate.cfg.xml. Here you have to give the username,password

and database name according to your MySQL account.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE hibernate-configuration PUBLIC
"-//Hibernate/Hibernate Configuration DTD 3.0//EN"
"http://www.hibernate.org/dtd/hibernate-configuration-3.0.dtd">
<hibernate-configuration>
<session-factory>

<property name="connection.driver_class">com.mysql.jdbc.Driver</property>
<property name="connection.url">jdbc:mysql://localhost/sampledb</property>
<property name="connection.username">root</property>
<property name="connection.password">123</property>


<property name="connection.pool_size">1</property>


<property name="dialect">org.hibernate.dialect.MySQLDialect</property>


<property name="current_session_context_class">thread</property>


<property name="cache.provider_class">org.hibernate.cache.NoCacheProvider</property>


<property name="show_sql">true</property>


<property name="hbm2ddl.auto">update</property>


<mapping resource="patient.hbm.xml" />

</session-factory>
</hibernate-configuration>

Step 7: Create Test class to store the objects

To create new class right click on "mypack" package and select New --> Class and give Name as Test.java

and paste the following code in class file.

package mypack;

import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.hibernate.Transaction;
import org.hibernate.cfg.Configuration;
import org.hibernate.service.ServiceRegistry;
import org.hibernate.service.ServiceRegistryBuilder;
import org.hibernate.HibernateException;

public class Test {

private static SessionFactory factory;
private static ServiceRegistry serviceRegistry;

public static void main(String[] args) {
try {
Configuration configuration = new Configuration();
configuration.configure();
serviceRegistry = new ServiceRegistryBuilder().applySettings(
configuration.getProperties()).buildServiceRegistry();
factory = configuration.buildSessionFactory(serviceRegistry);
} catch (Throwable ex) {
System.err.println("Failed to create sessionFactory object." + ex);
throw new ExceptionInInitializerError(ex);
}
System.out.println("**Example : Hibernate 4 SessionFactory**");
System.out.println("----------------------------------------");

Session session = factory.openSession();
Transaction tx = null;
try {
tx = session.beginTransaction();
patient pt = new patient();
pt.setFirstName("John");
pt.setLastName("Smith");
session.saveOrUpdate(pt);
tx.commit();
} catch (HibernateException e) {
if (tx != null)
tx.rollback();
e.printStackTrace();
} finally {
session.close();
}
}
}

Now right click on test.java file and select Run as -> Java Application
If every thing configured correctly, then you will the see the following lines in the console at the
end

INFO: HHH000126: Indexes: [primary]
Apr 29, 2012 10:14:49 PM org.hibernate.tool.hbm2ddl.SchemaUpdate execute
INFO: HHH000232: Schema update complete
**Example : Hibernate 4 SessionFactory**
----------------------------------------
Hibernate: insert into PATIENT (FIRSTNAME, LASTNAME) values (?, ?)

Now go to database and check records are inserted into patient table.

Posted in Hibernate Introduction | No comments

Friday, 27 April 2012

Dynamic Include Source

Posted on 03:05 by Unknown

Dynamic Include Source

Let us see how we can dymanically set the source for the include Component

Our objective is if user clicks on male, then load another zul page. If user clicks on female
, then load another page.

Here is the Root Zul File

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="Dynamic Include Example" id="rootWin"
apply="mypack.DynamicInclude">
<window id="innerWin">
<radiogroup id="radio">
<radio label="Male" />
<radio label="Female" />
</radiogroup>
</window>
<include id="innerIncld" />
</window>

</zk>

Here is the female.zul

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="Female" border="normal">Female zul File</window>
</zk>

Here is the male.zul

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="Male" border="normal">Male Zul file</window>
</zk>

Here is the composer

package mypack;

import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Include;
import org.zkoss.zul.Radiogroup;

@SuppressWarnings("rawtypes")
public class DynamicInclude extends GenericForwardComposer {

private static final long serialVersionUID = 1L;
Radiogroup innerWin$radio;
Include innerIncld;

public void onCheck$radio$innerWin() {
boolean tf = innerWin$radio.getSelectedItem().getLabel().equals("Male");
String s = tf ? "male.zul" : "female.zul";
innerIncld.setSrc(s);
}
}

Posted in ZK Include | No comments

Handle the events in the nested ids space

Posted on 02:23 by Unknown

The following example show how we can handle the events in the nested ids space

Zul File

<window id="win1" title="Win1" border="normal" width="300px" apply="mypack.Example6">
<button id="btn1" label="Win 1 Button" />
<separator bar="true" />
<space />
<window id="win2" title="Win2" border="normal" width="200px">
<button id="btn2" label="Win 2 Button" />
<separator bar="true" />
<space />
<window id="win3" title="Win3 " border="normal" width="200px">
<button id="btn3" label="Win 3 Button" />
</window>
</window>
</window>

In order to manipulate the UI Components, let us follow the MVC Pattern

First we need to create a composer and let us connect the zul and composer by using apply attribute

Here is the composer java class

package mypack;

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;

public class Example6 extends GenericForwardComposer {

public void onClick$btn1(Event event) {
alert("Button 1 Clicked");
}

public void onClick$btn2$win2() {
alert("Button 2 Clicked");
}

public void onClick$btn3$win3$win2() {
alert("Button 3 Clicked");
}

}

Posted in ZK ID Space | No comments

Thursday, 26 April 2012

ID Space - Different method to access UI Elements

Posted on 23:20 by Unknown

The following example is based on the following zk doc

http://books.zkoss.org/wiki/ZK_Essentials/Introduction_to_ZK/Component_Based_UI
http://books.zkoss.org/wiki/ZK_Developer's_Guide/Fundamental_ZK/Basic_Concepts/UI_Component_Forest
http://books.zkoss.org/wiki/ZK_Developer's_Reference/UI_Composing/ID_Space

Here is the simple zul file

<?page title="Example5" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="Example" id="outerWin" border="normal" apply="mypack.Example5">
<button id="outerBtn" label="Outer Win Button" />
<window id="innerWin" border="normal">
<button id="innerBtn" label="Inner Win Button" />
</window>
</window>
</zk>

Now we will see how we can access all these components and do some actions. In this example,
i have just changed the caption, so that's action for us now.

In order to manipulate the UI Components, let us follow the MVC Pattern

First we need to create a composer and let us connect the zul and composer by using apply attribute

Here is the composer java class

package mypack;

import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.Path;

import org.zkoss.zul.Button;
import org.zkoss.zul.Window;

@SuppressWarnings("rawtypes")
public class Example5 extends GenericForwardComposer {

private static final long serialVersionUID = 1L;
private Window outerWin;
private Window innerWin;
private Button innerBtn;
private Button outerBtn;

@SuppressWarnings("unchecked")
public void doAfterCompose(Component comp) throws Exception {
/**
* Dont forget to call super doaftercomposer. By calling this, it will
* add the event listner for us
*/
super.doAfterCompose(comp);

outerWin = (Window) comp;
// Set the outer window title
outerWin.setTitle("Title Changed");

// Now let us try to access outerbtn by different methods

// Using getfellow
outerBtn = (Button) outerWin.getFellow("outerBtn");
outerBtn.setLabel("Outer Button accessed 1");

/**
* The Path provides the utility method getComponent which takes the
* relative path of the component as its argument. outerBtn is
* equivalent to outerWin/outerBtn
*/

// Using Path
outerBtn = (Button) Path.getComponent("/outerWin/outerBtn");
outerBtn.setLabel("Outer Button accessed 2");

/**
* The getFirstChild method returns the first child component of the
* caller. The advantage of using this method is that you don't even
* need to know the component ID to fetch the component.
*/

// Using Getfirstchild
outerBtn = (Button) outerWin.getFirstChild();
outerBtn.setLabel("Outer Button accessed 3");

// Now let us try to access innerBtn by different methods

// Using getfellow
innerBtn = (Button) outerWin.getFellow("innerWin")
.getFellow("innerBtn");
innerBtn.setLabel("inner Button accessed 1");

// Using Path
innerBtn = (Button) Path.getComponent("/outerWin/innerWin/innerBtn");
innerBtn.setLabel("inner Button accessed 2");

// Using Getfirstchild
innerBtn = (Button) outerWin.getFirstChild().getNextSibling()
.getFirstChild();
innerBtn.setLabel("inner Button accessed 3");

// Now let us try to access innerWin by different methods
// Using getfellow

// Using getfellow
innerWin = (Window) outerWin.getFellow("innerWin");
innerWin.setTitle("Inner window accessed 1");

// Using Path
// We can also use (Window)Path.getComponent("outerWin/innerWin");

innerWin = (Window)Path.getComponent("/outerWin/innerWin");
innerWin.setTitle("Inner window accessed 2");

// Using Getfirstchild
innerWin = (Window)outerWin.getFirstChild().getNextSibling();
innerWin.setTitle("Inner window accessed 3");
}
}

You can see above, we have used different methods to access the UI Components

Posted in ZK Framework, ZK ID Space | No comments

Change the color of the selected item in the listbox

Posted on 07:36 by Unknown

Changing Selection Colour - List Box (from default blue) to another custom colour

<zk>

<style>

tr.z-listitem-seld { background-image:none ; background-color :

yellow;}

</style>

<hbox>

classes = new String[] { "College", "Graduate" };

grades = new Object[] { new String[] { "Best", "Better" },

new String[] { "A++", "A+", "A" } };

</zscript>

</listhead>

<listitem label="${forEachStatus.previous.each}: ${each}"

forEach="${grades[forEachStatus.index]}" />

</listbox>

</hbox>

</zk>

Click here to see the demo

Posted in ZK CSS | No comments

Tuesday, 24 April 2012

ZK MVC An Annotation Based Composer For MVC

Posted on 11:47 by Unknown

Finally , we will end using zk 6 An Annotation Based Composer For MVC
This is the 5th post in a series of ZK MVC
Here is the zk documentation and we are following that
and creating new example
http://books.zkoss.org/wiki/Small_Talks/2008/August/ZK_MVC_Made_Easy
http://books.zkoss.org/wiki/Small_Talks/2011/January/Envisage_ZK_6:_An_Annotation_Based_Composer_For_MVC

Here is the Summary

Method 1 : Implements Composer
We implement Composer interface. Here we used getfellow method to hold the
reference for the UI Components and also we added listener to handle
events

Here is the Link for the first post
http://emrpms.blogspot.in/2012/04/mvc-using-composer-interface.html

Method 2 : extends GenericComposer
Here, we removed all the event lisener by extending the GenericComposer
But remember, we need to call super doaftercompose.

Here is the link for the second post
http://emrpms.blogspot.in/2012/04/zk-mvc-using-genericcomposer-utility.html

Method 3: extends GenericAutowireComposer
Here, we removed all the getfellow methods and let them auto wired
Here we dont need override doaftercompose

http://emrpms.blogspot.in/2012/04/zk-mvc-using-genericautowirecomposer.html

Method 4: extends GenericForwardComposer
Here, we removed forward attributes using GenericForwardComposer utility class
Here is the link
http://emrpms.blogspot.in/2012/04/zk-mvc-using-genericforwardcomposer.html

Finally we will the same output using zk 6 An Annotation Based Composer For MVC

A composer analogous to GenericForwardComposer. Instead of wiring variables and adding event listeners by naming convention, this composer do the work by annotation and selectors.

Here is my zul code

<?page title="Example10" contentType="text/html;charset=UTF-8"?>
<zk>
<label
value=" http://books.zkoss.org/wiki/Small_Talks/2008/August/ZK_MVC_Made_Easy.
http://books.zkoss.org/wiki/Small_Talks/2011/January/Envisage_ZK_6:_An_Annotation_Based_Composer_For_MVC"
style="font-size : 18px;font-family: verdana,arial,sans-serif;" />
<separator />
<window
title="MVC Pattern An Annotation Based Composer For MVC"
border="normal" width="700px" apply="com.me.Example10">
<grid>
<columns>
<column label="" />
<column label="" />
</columns>
<rows>
<row>
First Name :
<textbox id="firstName" />
</row>
<row>
Last Name :
<textbox id="lastName" />
</row>
<row>
Address :
<textbox id="address" />
</row>
<row>
<button id="Clear" label="Clear" />
</row>

</rows>
</grid>
</window>
</zk>

Here is my composer
package com.me;

import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Textbox;
import org.zkoss.zul.Window;

public class Example10 extends SelectorComposer<Window> {

@Wire
private Textbox firstName;
@Wire
private Textbox lastName;
@Wire
private Textbox address;

@Listen("onClick=#Clear")
public void submit() {
firstName.setValue("");
lastName.setValue("");
address.setValue("");
}

}

Here is the demo
http://zkfiddle.org/direct/cqjvuo/2/v6.0.0-MVC-An-Annotation-Based-Composer-For-MVC?run=3gbaqbu

Here is the source code
http://zkfiddle.org/sample/cqjvuo/2-MVC-An-Annotation-Based-Composer-For-MVC

Posted in ZK MVC | No comments

Requirement Constraints

Monday, 30 April 2012

Look and Feel for listitem with paging and with crud actions

List item with crud buttons

ZK ListBox

Sunday, 29 April 2012

Hibernate Introduction Part 2

Hibernate POC

Hibernate Introduction Part 1

Friday, 27 April 2012

Dynamic Include Source

Handle the events in the nested ids space

Thursday, 26 April 2012

ID Space - Different method to access UI Elements

Change the color of the selected item in the listbox

Changing Selection Colour - List Box (from default blue) to another custom colour

Tuesday, 24 April 2012

ZK MVC An Annotation Based Composer For MVC

Popular Posts

Categories

Blog Archive

About Me