Monday, 25 June 2012

MVVM–List Item–Hibernate–MySQL–Part 3

Note: This is continuation of my previous article Part 2.  Please click here to go to Part 2

In this Part 3, we will enhance our Listing and model window as follows

1. We will include one more column as last named as Actions. This action will contain image such as edit, activate and delete.
2. We will also give hyperlink for the first column. If the user clicks the first column, then we will show the information in the read-only and if the user clicks the edit image in the action column, then we will show the information in the read only and will allow the user to edit and save.

image

Project Structure

image

Demo.zul

<?page title="Listitem MVVM Demo with Hibernate" contentType="text/html;charset=UTF-8"?>
<zk>
<style>
.z-listcell.red .z-listcell-cnt, .z-label.red{ color:red; }

/* Start: Action Images- Edit
---------------------------------------------- */

.fimageedit { width: 25px; background-image:
url('./images/icon-edit.png'); background-repeat: no-repeat;
border: 0 none; cursor: pointer; }

/* End: Action Images - Edit
---------------------------------------------- */


/* Start: Action Images- Delete
---------------------------------------------- */

.fimageDelete { width: 25px; background-image:
url('./images/icon-trash-red.png'); background-repeat:
no-repeat; border: 0 none; cursor: pointer; }

/* End: Action Images - Delete
---------------------------------------------- */


/* Start: Action Images- Active
---------------------------------------------- */

.fimageActive { width: 25px; background-image:
url('./images/icon-enable.png'); background-repeat: no-repeat;
border: 0 none; cursor: pointer; }

/* End: Action Images - Active
---------------------------------------------- */

/* Start: Action Images- Inactive' ]

---------------------------------------------- */

.fimageInactive { width: 25px; background-image:
url('./images/icon-disable.png'); background-repeat: no-repeat;
border: 0 none; cursor: pointer; }

/* End: Action Images - InActive
---------------------------------------------- */

.z-listcell.highlightcell .z-listcell-cnt,
.z-label.highlightcell { color:blue; cursor: pointer; }


</style>
<window title="Listitem MVVM Demo with Hibernate" border="normal"
apply="org.zkoss.bind.BindComposer"
viewModel="@id('myvm') @init('domainVMS.PersonVM')">
<div>
<button label="Add Person"
onClick="@command('addNewPerson')" />
</div>
<separator />

<listbox id="test" model="@load(myvm.allPersons)"
selectedItem="@bind(myvm.curSelectedPerson)">
<listhead sizable="true">
<listheader label="First Name" width="400px"
sort="auto(firstName)" />
<listheader label="Last Name" width="285px"
sort="auto(lastName)" />
<listheader label="email" width="285px"
sort="auto(email)" />
<listheader label="Action" />
</listhead>
<template name="model" var="p1">
<listitem>
<listcell label="@load(p1.firstName)"
onClick="@command('openAsReadOnly')" sclass="highlightcell" />
<listcell label="@load(p1.lastName)"
sclass="@load(empty p1.email ?'red':'')" />
<listcell label="@load(p1.email)" />
<listcell>
<hbox spacing="20px">
<image sclass="fimageActive" />
<image sclass="fimageDelete" />
<image sclass="fimageedit"
onClick="@command('editThisPerson')" />
</hbox>
</listcell>
</listitem>
</template>
</listbox>
</window>
</zk>



PersonVM.java

package domainVMS;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import mydomain.Person;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.Init;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zul.Messagebox;
import domainDAO.PersonDAO;
import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.GlobalCommand;
import org.zkoss.bind.annotation.NotifyChange;

public class PersonVM {

private List<Person> persons = new ArrayList<Person>();
private Person curSelectedPerson;

public Person getCurSelectedPerson() {
return curSelectedPerson;
}

public void setCurSelectedPerson(Person curSelectedPerson) {
this.curSelectedPerson = curSelectedPerson;
}

public List<Person> getallPersons() {
return persons;
}

@Init
public void initSetup() {
persons = new PersonDAO().getAllPersons();

}

@Command
public void editThisPerson () {
final HashMap<String, Object> map = new HashMap<String, Object>();
map.put("selectedPerson", curSelectedPerson);
map.put("recordMode", "EDIT");
Executions.createComponents("AddPerson.zul", null, map);
}

@Command
public void openAsReadOnly()
{
final HashMap<String, Object> map = new HashMap<String, Object>();
map.put("recordMode", "READ");
map.put("selectedPerson", curSelectedPerson);
Executions.createComponents("AddPerson.zul", null, map);

}

@Command
public void addNewPerson() {
final HashMap<String, Object> map = new HashMap<String, Object>();
map.put("selectedPerson", null);
map.put("recordMode", "NEW");
Executions.createComponents("AddPerson.zul", null, map);
}


//note this will be executed after when we new person from the model window
@GlobalCommand
@NotifyChange("allPersons")
public void refreshList(@BindingParam("newadded") Person p1)
{
persons.add(p1);
}

}


PersonCRUDVM.java


package domainVMS;

import java.util.HashMap;
import org.zkoss.zul.Button;
import java.util.List;
import java.util.Map;
import org.zkoss.bind.BindUtils;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.bind.annotation.ExecutionArgParam;
import org.zkoss.bind.annotation.Init;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zul.Messagebox;
import org.zkoss.zk.ui.Component;
import domainDAO.PersonDAO;
import mydomain.Person;
import org.zkoss.zk.ui.select.Selectors;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;
import org.zkoss.zul.impl.InputElement;

public class PersonCRUDVM {

@Wire("#win")
private Window win;
@Wire
private Button submit;
@Wire
private Button cancel;
@Wire("textbox")
List<InputElement> inputs;

private Person selectedPerson;

public Person getSelectedPerson() {
return selectedPerson;
}

public void setSelectedPerson(Person selectedPerson) {
this.selectedPerson = selectedPerson;
}

@Init
public void initSetup(@ContextParam(ContextType.VIEW) Component view,
@ExecutionArgParam("selectedPerson") Person selectedPerson,
@ExecutionArgParam("recordMode") String recordMode) {
Selectors.wireComponents(view, this, false);
if (selectedPerson == null)
this.selectedPerson = new Person();
else
this.selectedPerson = selectedPerson;

if (recordMode == "READ") {
submit.setVisible(false);
cancel.setLabel("Ok");
for (InputElement i : inputs)
i.setReadonly(true);
win.setTitle(win.getTitle() + " (Readonly)");
}

}

@Command
public void save() {
new PersonDAO().saveOrUpdate(this.selectedPerson);
Map args = new HashMap();
args.put("newadded", this.selectedPerson);
BindUtils.postGlobalCommand(null, null, "refreshList", args);
win.detach();
}

@Command
public void closeThis() {
win.detach();
}
}


AddPerson.zul


<zk>
<window id="win" title="Person" width="520px" height="220px"
border="normal" minimizable="false" mode="modal" maximizable="false"
closable="true" action="show: slideDown;hide: slideUp"
apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('domainVMS.PersonCRUDVM')" >
<separator />
<label value="Person information" />
<separator />
<panel width="100%">
<panelchildren>
<separator />
<grid width="99.5%">
<columns>
<column label="" width="150px" />
<column label="" />
</columns>
<rows>
<row>
<hbox>
<label value="First Name" />
<label value="*" />
</hbox>
<textbox name="firstName"
value="@bind(vm.selectedPerson.firstName)" cols="50" />
</row>
<row>
<hbox>
<label value="Last Name" />
<label value="*" />
</hbox>
<textbox name="firstName"
value="@bind(vm.selectedPerson.lastName)" cols="50" />
</row>
<row>
<hbox>
<label value="email" />
<label value="*" />
</hbox>
<textbox name="email"
value="@bind(vm.selectedPerson.email)" cols="50" />
</row>
</rows>
</grid>
</panelchildren>
</panel>
<separator />
<div align="center">
<button id="submit" label="Submit" onClick="@command('save')" />
<button id="cancel" label="Cancel" onClick="@command('closeThis')" />
</div>
</window>
</zk>



Download the source as war file




Download as individual files as follows

hibernate.cfg.xml
Person.java
HibernateUtil.java
PersonVM.java
PersonCRUDVM.java
PersonDAO.java
icon-trash-red.png
icon-edit.png
icon-enable.png
Demo.zul
AddPerson.zul

2 comments:

  1. Hi,
    thank you for this article.
    I have a question:
    you used a MVVM pattern to develop application, is right to use @Wire binding of complex Object as Button or window?
    I think that is very convenient and easy to manage the buttons from java code.
    Also I am developing an application following MVVM but I do not know what strategy to use to bind complex objects in Java code.
    The approach @ Wire, as well as the @ BindingParam is not recommended because compromises the decoupling between view and model, characteristic of the MVVM. Do you think it is right to use it?
    What would be the alternative to have a pure MVVM pattern?

    ReplyDelete
  2. We are a third party technical support service. Avast Customer Support is here to help you out with the whole procedure to Download Avast Antivirus online, We not only fix your Avast Support related issues but will guide with how to get started with your new Avast product once it gets installed successfully. Call on our Toll Free no. 1 855 966 3855
    Gmail Customer service is a third party technical support service for Gmail users when they face any technical issue or error in their Gmail account. Our Gmail Customer Support team solves issues like forgot Gmail account password, Gmail configuration or Sync issues, recover deleted emails and many more. Toll Free number (800) 986-9271
    How you install or reinstall Office 365 or Office 2016 depends on whether your Office product is part of an Office for home or Office for business plan. If you're not sure what you have, see what office com setup products are included in each plan and then follow the steps for your product. The steps below also apply if you're installing a single, stand-alone Office application such as Access 2016 or Visio 2016. Need Help with office setup Enter Product Key? Call 1-800-000-0000 Toll Free
    Norton Tech Support is a third party service provider and not in any way associated with Norton or any of its partner companies. We offer support for Norton products and sell subscription based additional warranty on computer and other peripheral devices. Call our Toll Free number 1 855 966 3855
    Other Services
    Norton Toll Free , Office-Setup , office.com/setup.

    ReplyDelete