Aug 12, 2014

Custom Button ZK With Confirmation Dialog

In this Post we will she how to Custom Button framework ZK, and we will minimalizir boiler plate in code. When we processing data usually as the confirmation user like this "Are you Sure to Save?", if user click "Yes" Button, we will processing the data (SAVE,DELETE,APPROVAL or Submit). in my application i will put the the same code like this everywhere process ."Are you sure to save?", "Confirm Dialog", Messagebox.OK | Messagebox.IGNORE  | Messagebox.CANCEL, Messagebox.QUESTION, new org.zkoss.zk.ui.event.EventListener() {
    public void onEvent(Event evt) throws InterruptedException {
        if (evt.getName().equals("onOK")) {
            alert("Data Saved !");
        } else if (evt.getName().equals("onIgnore")) {
  "Ignore Save", "Warning", Messagebox.OK, Messagebox.EXCLAMATION);
        } else {
            alert("Save Canceled !");
i don't like put code everywhere process data like that. in ZK Forums i see example good idea to minimalizir boiler plate like that. check this link But, I Have a simple idea to extends component button put message box there. check this out.
import org.zkoss.zk.ui.IdSpace;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.event.Events;
import org.zkoss.zk.ui.ext.AfterCompose;
import org.zkoss.zul.Button;
import org.zkoss.zul.Messagebox;

public class ExtBtnConfirm extends Button implements IdSpace,AfterCompose{

 private static final long serialVersionUID = 1272856633449159555L;
 public static final String ON_SAVE_STR="onProcess";
 String messageConfirm;
 public ExtBtnConfirm() {
 public void afterCompose() {
 public void addEvent(){
  addEventListener(Events.ON_CLICK, new EventListener() {
   public void onEvent(Event arg0) throws Exception {, "Confirmation", Messagebox.YES|Messagebox.NO, Messagebox.QUESTION, new EventListener() {
     public void onEvent(Event e) throws Exception {
      Events.postEvent(new EventOnProcess());
 public class EventOnProcess extends Event{
  private static final long serialVersionUID = 1L;
  public EventOnProcess() {
   super(ON_SAVE_STR, ExtBtnConfirm.this);
   // TODO Auto-generated constructor stub

 public String getMessageConfirm() {
  return messageConfirm;

 public void setMessageConfirm(String messageConfirm) {
  this.messageConfirm = messageConfirm;
this is my Zul



View Model


import org.zkoss.bind.annotation.Command;
import org.zkoss.zul.Messagebox;

public class VM_TestButton {

 public void doProcess()
 {"Test Confirm Button Processing.....!");

and The final result

that's it. :D my English level elementary. sorry! if you want to read my code all. check this link.. I hope you understand when you reading my code. hahahaha...

see yaa

No comments: