Aug 12, 2014

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

Aug 8, 2014

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