Konfirmasi dialog popup di richfaces
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).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui: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>
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.
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>http://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="http://urangbiase.wordpress.com/ui">
-------------cutted text-----------8<
<a4j:form>
<urang: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.
Demikianlah, semoga bermanfaat. Kritik, saran dan THR amat dinantikan 
.
PS: tulisan ini dibuat ketika belum dapat kucuran THR.
Recent Comments