Tuesday, 16 October 2012

ZK MVVM CRUD Without DB Connection - Part 3

        

In Part 2,
we have seen how we can change the look and Feel of the Listing records. Now we will design new form to add new customers

Project Structure

image

First let us add new zul file called as CustomerCRUD.zul under webcontent folder. The code is as follows

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="Customer CRUD" border="normal" id="CustomerCRUD"
width="430px" height="auto" apply="org.zkoss.bind.BindComposer"
minimizable="false" mode="modal" maximizable="false" closable="true"
position="center"
viewModel="@id('vm') @init('appVM.CustomerCRUDVM')">
<separator />
<label value="Customer 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" />
</hbox>
<textbox name="firstName"
value="@bind(vm.selectedCustomer.firstName)" cols="20" />
</row>
<row>
<hbox>
<label value="Last Name" />
</hbox>
<textbox name="LastName"
value="@bind(vm.selectedCustomer.lastName)" cols="20" />
</row>
<row>
<hbox>
<label value="Email" />
</hbox>
<textbox name="firstName"
value="@bind(vm.selectedCustomer.email)" cols="20" />
</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>


Next we will add another ViewModel called as CustomerCRUDVM.java under the package appVM. Here is the code.

package appVM;

import java.util.HashMap;
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.zk.ui.Component;
import org.zkoss.zk.ui.select.Selectors;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;
import domain.Customer;

public class CustomerCRUDVM { /*
* * This is the window ID used in CustomerCRUD.Zul
* File. Using this only, we * can close the model
* window after save and cancel button
*/
@Wire("#CustomerCRUD")
private Window win;
private Customer selectedCustomer;
private String recordMode;

public String getRecordMode() {
return recordMode;
}

public void setRecordMode(String recordMode) {
this.recordMode = recordMode;
}

public Customer getSelectedCustomer() {
return selectedCustomer;
}

public void setSelectedCustomer(Customer selectedCustomer) {
this.selectedCustomer = selectedCustomer;
}

@Init
public void initSetup(@ContextParam(ContextType.VIEW) Component view,
@ExecutionArgParam("sCustomer") Customer c1,
@ExecutionArgParam("recordMode") String recordMode) {
Selectors.wireComponents(view, this, false);
setRecordMode(recordMode);
if (recordMode.equals("NEW")) {
this.selectedCustomer = new Customer();
}
}

@SuppressWarnings({ "rawtypes", "unchecked" })
@Command
public void save() {
Map args = new HashMap();
args.put("pCustomer", this.selectedCustomer);
args.put("recordMode", this.recordMode);
BindUtils.postGlobalCommand(null, null, "updateCustomerList", args);
win.detach();
}

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

Next we will modify our existing CustomerListVM.java to take care of add new customer and update listing records. The code as follows


package appVM;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.GlobalCommand;
import org.zkoss.bind.annotation.Init;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zul.Messagebox;
import domain.Customer;
import appData.CustomerData;

public class CustomerListVM {
private List<Customer> customerList = new ArrayList<Customer>();
private Customer curSelectedCustomer;

public Customer getCurSelectedCustomer() {
return curSelectedCustomer;
}

public void setCurSelectedCustomer(Customer curSelectedCustomer) {
this.curSelectedCustomer = curSelectedCustomer;
}

@Init
public void initSetup() {
customerList = new CustomerData().getAllCustomers();
}

public List<Customer> getallCustomers() {
return customerList;
}

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

@Command
public void editThisCustomer() {
Messagebox.show("Edit Existing Customer Code goes here");
} // The following method will be called from CustomerCRUDVM after the save
// // When we say
// Notifychange("allcustomers), then ZUL list items will be // updated @GlobalCommand @NotifyChange("allCustomers") public void updateCustomerList(@BindingParam("pCustomer") Customer cust1, @BindingParam("recordMode") String recordMode) { if (recordMode.equals("NEW")) { customerList.add(cust1); } } @Command public void deleteThisCustomer() { Messagebox.show("Delete
// Existing Customer Code goes here"); }}
}

Now again you can run customerList.zul file and Click add Customer.

image



         



Download Source code

No comments:

Post a Comment