Register Costum Component ZK in zk.xml

In my previous post, i Have example custom Button with Confirmation Dialog. But now i'll register my customer Component in zk, so I don't need register in .zul when i use custom component.
my previous index.zul

Now i Will register Component in zk.xml. step by step. 1.Create file lang-addon.xml in WEB-INF folder. lang-addon.xml

    ExtComponent
    xul/html
    
        extbutton
        button
        id.co.sm.ExtBtnConfirm
    

2. Call lang-addon.xml in zk.xml

 
  ajax
  /timeout.zul
 
 
    /WEB-INF/lang-addon.xml

Ok Finish, so simple guy.. Now we can call the Component everywhere page *.zul. example

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 .

Messagebox.show("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")) {
            Messagebox.show("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.

package id.co.sm;
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.zk.ui.select.annotation.VariableResolver;
import org.zkoss.zul.Button;
import org.zkoss.zul.Messagebox;


@VariableResolver(org.zkoss.zkplus.spring.DelegatingVariableResolver.class)
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() {
  super();
 }
 
 @Override
 public void afterCompose() {
  addEvent();
  
 }
 public void addEvent(){
  addEventListener(Events.ON_CLICK, new EventListener() {
   public void onEvent(Event arg0) throws Exception {
    Messagebox.show(messageConfirm, "Confirmation", Messagebox.YES|Messagebox.NO, Messagebox.QUESTION, new EventListener() {
     public void onEvent(Event e) throws Exception {
      if(e.getName().equals(Messagebox.ON_YES)) 
      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

index.zul

View Model

package id.co.sm;

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

public class VM_TestButton {

 @Command
 public void doProcess()
 {
  Messagebox.show("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

String JavaScript Method .toUpperCase() dan .toLowerCase() (Belajar)

UpperCase dan Lower Case String JavaScript

---

Konversi Object String pada JavaScript untuk mengubah huruf menjadi huruf kapital(.toUpperCase()) dan mengubah huruf pada String menjadi huruf kecil (.toLowerCase()).

var _ObjectString=new String("Srigala Militan Sedang Belajar");
document.write(_ObjectString.toUpperCase());
document.write(_ObjectString.toLowerCase());
//HASIL
//SRIGALA MILITAN SEDANG BELAJAR
//srigala militan sedang belajar

Semoga Dapat Membantu
Salam
Srigala Militan

String JavaScript Method .trim() (Belajar)

string.trim() JavaScript

---

JavaScript String.trim() merupakan method untuk menghapus spasi pada string,pada sisi depan dan belakang dari string.

Contoh Script

var _ObjectString=new String(" Srigala Militan Sedang Belajar ");
document.write("|"+_ObjectString+"|");
document.write("|"+_ObjectString.trim()+"|");
//HASIL
//| Srigala Militan Sedang Belajar |
//|Srigala Militan Sedang Belajar|

Semoga Dapat Membantu
Salam
Srigala Militan

String JavaScript substring (Belajar)

---

JavaScript String.substring merupakan method yang digunakan untuk memecah string berdasarkan paramater/ criterianya. Method substring akan mengembalikan string setelah di pecah.

Terdapat 2 method variasi string substring bawaan dari JavaScript

1. string.substring(int p_startIndek)
2. string.substring(int p_startIndek,int p_panjangKarakter)

Parameter :

1. p_startIndek : indek dimulainya untuk pemecahan String.
2. p_panjangKarakter : panjang karakter yang akan di potong.