Archive

Archive for September, 2009

Konfirmasi dialog popup di richfaces

September 9, 2009 3 comments

Kali ini saya mendapat tugas membuat konfirmasi dialog popup, yang menampilkan message tertentu..seperti “Are you sure..?” dilengkapi dengan tombol “Yes” atau “No”. Kebetulan teknologi web komponen yang dipakai kali ini adalah richfaces. Agar reusable, saya buat konfirmasi dialog popup tersebut sebagai komponen. Untuk itu dipakek lah teknologi facelets yang bisa bisa mendefine komponen dengan mudah. Dan kebetulan lagi, richfaces dan facelets tersebut sudah ada dan terkonfigurasi dalam JBoss Seam Framework, framework yang sedang saya gunakan sekarang. Untuk instalasi dan konfigurasi richfaces dan facelets, silahkan merujuk ke situs offi-sial-nya.

Langsung saja ke code nya y, daripada berpanjang lebar g jelas (talk is cheap, show me the code, Linus – 2000).

  • Buat satu page popup dialog konfirmasi. Kita beri nama confirmation.xhtml, kira-kira begini isinya:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    &ltui:component xmlns="http://www.w3.org/1999/xhtml"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:a4j="http://richfaces.org/a4j"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:ui="http://java.sun.com/jsf/facelets">
      
    <a4j:jsFunction name="#{submitName}" action="#{resolver.resolveMethodExpression(actionBean)}" reRender="#{listName}"/>
     
    <rich:modalPanel id="#{modalPanelId}" width="250" height="150">
       <f:facet name="header">#{messages['common.Confirmation']}</f:facet>
       <h:panelGrid>
          <h:panelGrid columns="2">
             <h:graphicImage value="/img/msginfo.png" />
             <h:outputText value="#{textMessage}" style="FONT-SIZE: large;" />
          </h:panelGrid>
          <h:panelGroup>
             <rich:spacer height="20px" />
    		 <input type="button" 
    		 value="OK" 
    		 onclick="#{rich:component(modalPanelId)}.hide();#{rich:component('wait')}.show(); 
                                 #{submitName}();return false;" />
    		 <input type="button" value="Cancel" onclick="#{rich:component(modalPanelId)}.hide();return false" />
          </h:panelGroup>
       </h:panelGrid>
    </rich:modalPanel>
    </ui:component>
                
  • Konfirmasi dialog akan menjalankan action tertentu jika jawaban dari user meng”iya”kan. Nah action tersebut kita jadikan parameter agar konfirmasi dialog yang kita pasang dapat memiliki action yang berbeda satu sama lain. Untuk keperluan ini maka kita buat backing bean Resolver. Resolver ini berfungsi me-resolve ekspresi EL berupa action atau method dari backing bean yang dijadikan parameter. Langkah berikutnya adalah membuat bean resolver tersebut. Berikut kodenya:
    /* Resolver.java */
    import org.jboss.seam.ScopeType;
    import org.jboss.seam.annotations.Name;
    import org.jboss.seam.annotations.Scope;
    import org.jboss.seam.core.Expressions;
    import org.jboss.seam.core.Expressions.MethodExpression;
    
    @Name("resolver")
    @Scope(ScopeType.APPLICATION)
    public class Resolver {
    	public Object resolveMethodExpression(String elStr) {
    		MethodExpression resolvedEl = Expressions.instance().createMethodExpression("#{" + elStr + "}");		
    		if (resolvedEl != null) {
    			resolvedEl.invoke();
    		}		
    		return resolvedEl;
    	}
    }
           

    Resolver mempunyai scope “application” karena bean ini akan digunakan berulang kali selama konfirmasi popup dialog digunakan. Sebagai catatan, Resolver diatas spesifik ke seam, karena menggunakan method yang dimiliki oleh seam.

  • Berikutnya tinggal membuat file definisi taglib atas komponen konfirmasi popup dialog dan mendefinisikan file taglib tersebut dalam web.xml.
                <!--- confirmation-taglib.xml --->
                <?xml version="1.0"?>
    <!DOCTYPE facelet-taglib PUBLIC "-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN" "facelet-taglib_1_0.dtd">
    <facelet-taglib>
       <namespace>https://urangbiase.wordpress.com/ui</namespace>
    	<tag>
    		<tag-name>confirm</tag-name>
    		<source>confirmation.xhtml</source>
    	</tag>
    </facelet-taglib>
           
                 <!--- web.xml --->
                 <context-param>
                     <param-name>facelets.LIBRARIES</param-name>
                     <param-value>/WEB-INF/confirmation-taglib.xml</param-value>
                 </context-param>
            
  • Selesai sudah komponen konfirmasi popup dialog yang kita buat. Berikutnya adalah implementasi dari komponen yang telah kita buat.

    <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <ui:composition xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:f="http://java.sun.com/jsf/core"
       -------------cutted text-----------8<
        xmlns:urang="https://urangbiase.wordpress.com/ui">
        -------------cutted text-----------8<
        <a4j:form>
    	&lturang:confirm actionBean="transportationList.removeSelected()" modalPanelId="removeSelectedTransportation" 
    				   listName="transportationList" textMessage="Are you sure remove selected row?"
    				   submitName="submitRemoveSelectedTransportation"/>
        -------------cutted text-----------8<
        <a4j:commandLink id="comLinkRemoveSelected">
               <h:graphicImage value="/img/trash.gif" />
        </a4j:commandLink>
       <rich:componentControl attachTo="comLinkRemoveSelected" 
               for="#{removeSelectedConfirmation}"
               event="onclick" 
               operation="show"/>
       <rich:toolTip value="#{messages['common.RemoveSelected']}" for="comLinkRemoveSelected2"/>
       </a4j:form>
    </ui:composition>
    

    Dan inilah hasil tangkapan layar dari konfirmasi dialog popup.

    popupdialog

    Demikianlah, semoga bermanfaat. Kritik, saran dan THR amat dinantikan :).

    PS: tulisan ini dibuat ketika belum dapat kucuran THR.

    Advertisements
    Categories: NyanyianKode, seam