Requirement Constraints

  • Subscribe to our RSS feed.
  • Twitter
  • StumbleUpon
  • Reddit
  • Facebook
  • Digg

Thursday, 22 August 2013

ZK Example for inline Editing with Add New and Delete

Posted on 08:35 by Unknown

I am quite impressed on this demo from ZK. But adding new record and delete existing record is missing as part of typical CRUD. So i thought that we can add that and see how it works. So here is the example on that

image
ZK Version : 6.5.2

Book.java

package demo.grid.inline_editing;

public class Book {
private String author, title ;
private boolean editingStatus;

public Book(String author, String title, boolean editingStatus) {
this.author = author;
this.title = title;
this.editingStatus = editingStatus;

}

public String getAuthor() {
return author;
}

public void setAuthor(String author) {
this.author = author;
}

public String getTitle() {
return title;
}

public void setTitle(String title) {
this.title = title;
}


public boolean getEditingStatus() {
return editingStatus;
}

public void setEditingStatus(boolean editingStatus) {
this.editingStatus = editingStatus;
}

}


BookData.java



package demo.grid.inline_editing;

import java.util.ArrayList;
import java.util.List;

public class BookData {

private final List<Book> allBooks = new ArrayList<Book>();

public BookData(){
allBooks.add(new Book("Philip Hensher", "The Fit",false ));
allBooks.add(new Book("Philip Hensher", "Kitchen Venom",false));
allBooks.add(new Book("Michael Greenberg", "Hurry Down Sunshine",false));
allBooks.add(new Book("Michael Greenberg", "Painless Vocabulary",false));
allBooks.add(new Book("Rick Perlstein", "Nixonland: The Rise of a President and the Fracturing",false));
allBooks.add(new Book("Rick Perlstein", "Nixonland",false));
}

public List<Book> getAllBooks() {
return allBooks;
}

}

Zul File

<zk>
<style>
.z-label { display:block; } tr.z-row td.z-row-inner { padding:
2px 5px; } .z-row-cnt, .z-column-cnt { text-align: center; }

</style>
<div apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('demo.grid.inline_editing.InlineEditingViewModel')">
<separator></separator>
<separator></separator>
<button onClick="@command('onAddNew')" label="Add New" />
<separator></separator>
<grid id="demoGrid"
model="@load(vm.allBooks) @template((vm.displayEdit and each.editingStatus) ? 'editable' : 'noneditable')">
<columns>
<column width="350px">Title</column>
<column width="650px">Author</column>
<column width="120px" visible="@load(vm.displayEdit)">
Edit
</column>
<column width="120px" visible="@load(vm.displayEdit)">
Delete
</column>
</columns>
<template name="editable">
<row>
<textbox cols="60" id="titletext"
value="@load(each.title) @save(each.title, before='confirm')" />
<textbox
value="@load(each.author) @save(each.author, before='confirm')" />

<div>
<button image="pencil-small.png"
onClick="@command('confirm', currentBook=each)" />
<button image="cross-small.png"
onClick="@command('changeEditableStatus', currentBook=each )" />
</div>
</row>
</template>
<template name="noneditable">
<row>
<label value="@load(each.title)" />
<label value="@load(each.author)" />
<button image="pencil-small.png"
onClick="@command('changeEditableStatus', currentBook=each )" />
<button image="DeleteRecord.png"
onClick="@command('onDelete', currentBook=each )" />
</row>
</template>
</grid>
</div>
</zk>





View Model

package demo.grid.inline_editing;

import java.util.List;

import org.zkoss.bind.BindUtils;
import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zhtml.Messagebox;

public class InlineEditingViewModel {

private BookData data = new BookData();

private boolean displayEdit = true;
private boolean isAddNew = false;

public boolean isDisplayEdit() {
return displayEdit;
}

@NotifyChange({ "allBooks", "displayEdit" })
public void setDisplayEdit(boolean displayEdit) {
this.displayEdit = displayEdit;
}

public List<Book> getAllBooks() {
return data.getAllBooks();
}

@Command
public void changeEditableStatus(@BindingParam("currentBook") Book book) {
if (isAddNew == true) {
data.getAllBooks().remove(book);
isAddNew = false;
} else
book.setEditingStatus(!book.getEditingStatus());
refreshRowTemplate(book);

}

@Command
public void confirm(@BindingParam("currentBook") Book book) {
if (isAddNew == true) {
if (book.getAuthor().equalsIgnoreCase("")
|| book.getTitle().equalsIgnoreCase("")) {
Messagebox.show(" Please enter the values");
return;
} else
isAddNew = false;
}
book.setEditingStatus(!book.getEditingStatus());
refreshRowTemplate(book);
}

public void refreshRowTemplate(Book lcs) {
/*
* This code is special and notifies ZK that the bean's value has
* changed as it is used in the template mechanism. This stops the
* entire Grid's data from being refreshed
*/
BindUtils.postNotifyChange(null, null, lcs, "editingStatus");
}

@Command
@NotifyChange({ "allBooks", "displayEdit" })
public void onAddNew() {
data.getAllBooks().add(0, new Book("", "", true));
isAddNew = true;
}

@Command
@NotifyChange({ "allBooks", "displayEdit" })
public void onDelete(@BindingParam("currentBook") Book book)
{
data.getAllBooks().remove(book);
}
}


Output :
image

Video Demo
http://screencast.com/t/Lwe5GJkN3fQa


You can download the Source here

Email ThisBlogThis!Share to XShare to Facebook
Posted in ZK Framework | No comments
Newer Post Older Post Home

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Popular Posts

  • ZK Example for inline Editing with Add New and Delete
    I am quite impressed on this demo from ZK . But adding new record and delete existing record is missing as part of typical CRUD. So i thoug...
  • ZK Passing Parameter between two files using MVVM–Part 1
    Overview This is the first series of articles about Passing parameter between two zul files using MVVM Design pattern .This article will fo...
  • Hibernate Validator Example 2
    In this example, we will see some more validation constraints such as @email, @past, @length, etc. And also we will also define custom error...
  • ViewModel Class Java Annotation @Init, @NotifyChange, @Command
    In following sections we'll list all syntaxes that can be used in implementing a ViewModel and applying ZK bind annotation. The ZK binde...
  • History of Present Illness
    HPI - One of the main component of Clinical History. What is an HPI ? The history of present illness (HPI) is a chronological description...
  • ZK Border Layout–Another example
    This examples show how you can use ZK Border Layout to show the product information on clicking image. ZK Version 6 Project Name : BorderL...
  • Good Website Design Links
    Form Design Label Placement in Forms International Address Fields in Web Forms 40 Eye-Catching Registration Pages blog-comment-form-...
  • How to refer CSS File in ZK Style tag
    In this example, we will see how to create CSS file as separate file and include in zul file to change the look and feel Project structure a...
  • ZK MVVM Form Binding CRUD with Spring and Hibernate - Part 4
    Presentation Layer using ZK Framework          In part 3 , We have completed Spring integration with hibernate. In this post, we will des...
  • Load Tab box Content on Demand Using MVVM
    ZK Version : 6.5.0 CE In this post, let us see how we can load individual ZUL File on each tab box content Step : 1 First let us create indi...

Categories

  • Billing Process
  • C Workbook
  • C++ Workbook
  • Eclipse Tips
  • EDI 5010
  • EMR Appointment Features
  • EMR Labs Stuff
  • EMR PMS Links
  • EMR Use cases
  • EMR Vital Sign
  • Good Website Design
  • Hibernate Criteria Queries
  • Hibernate Introduction
  • Hibernate Introduction Setup
  • Hibernate Mapping
  • Hibernate POC
  • Hibernate Validator
  • Hibernate–Java Environment setup
  • HPI
  • Java
  • Maven
  • MU Certification
  • NPI
  • PQRS
  • Practice Management System
  • Spring Security
  • Tech Links
  • Today Tech Stuff
  • zk
  • ZK Hibernate
  • ZK 5 Databinding
  • ZK Application
  • ZK Calling Another ZUL
  • ZK CheckBox
  • ZK CreateComponents
  • ZK CSS
  • ZK extended Components
  • ZK Foreach
  • ZK Forum Posts
  • ZK Framework
  • ZK Hibernate Setup
  • ZK ID Space
  • ZK Include
  • ZK Installation
  • ZK iReport
  • ZK Layout
  • ZK Listitem Pagination
  • ZK Message Box
  • ZK MVC
  • ZK MVC Combox Box
  • ZK MVC CRUD Examples
  • ZK MVC Listbox
  • ZK MVVM
  • ZK MVVM Combo
  • ZK MVVM CRUD
  • ZK MVVM ListBox
  • ZK Spring
  • ZK TextBox

Blog Archive

  • ▼  2013 (105)
    • ►  December (3)
    • ►  September (7)
    • ▼  August (13)
      • HL7 Parsing–My Own Parser
      • ZK Dropupload example
      • Hibernate Custom validator to validate Multiple em...
      • ZK List box inline Editing with Add New and Delete...
      • ZK Example for inline Editing with Add New and Delete
      • Patient Demographics and Patient cases
      • How to get Current Date and Time and store in the ...
      • Maintaining Patient Insurance
      • EDI Transactions
      • Health care Coding system
      • ZK upload PDF to server and show in the screen us...
      • ZK Quick InputBox
      • HL7 Parsing
    • ►  July (1)
    • ►  June (11)
    • ►  May (3)
    • ►  April (14)
    • ►  March (19)
    • ►  February (21)
    • ►  January (13)
  • ►  2012 (177)
    • ►  December (1)
    • ►  November (13)
    • ►  October (19)
    • ►  September (24)
    • ►  August (26)
    • ►  July (6)
    • ►  June (37)
    • ►  May (30)
    • ►  April (16)
    • ►  March (1)
    • ►  January (4)
  • ►  2011 (5)
    • ►  December (1)
    • ►  November (1)
    • ►  July (1)
    • ►  June (1)
    • ►  April (1)
  • ►  2010 (1)
    • ►  September (1)
Powered by Blogger.

About Me

Unknown
View my complete profile