« LOV dengan JDeveloper 11g | Main | Teknologi ADF BC dari Oracle »
Bermain dengan “af:popup” dan “af:showPopupBehavior”
By deepe | August 11, 2008
Untuk mengimplementasikan bagaimana cara menggunakan komponen ini, saya telah membuat project kecil dengan nama SimplePopup. Project ini merupakan project sederhana yang hanya mempunyai 1 project dengan nama UserInterface.
Pada project ini saya akan membuat sebuah tampilan (halaman) dengan nama popup.jspx. Pada halaman tersebut akan saya tambahkan komponen textbox (af:inputText) dan button (af:commandButton). Desain halaman tersebut lebih jelas dapat anda liat di link ini.
Dari desain tersebut, popup akan tampil ketika user menekan tombol “Show Popup”. Dari popup yang tampil user akan memasukkan data pada inputan yang berjudul “Some Text”. Ketika user menekan tombol Ok, maka popup akan tertutup dan isi text yang dimasukkan akan di salin ke inputan yang berjudul “Some Text” pada halaman popup.jspx.
Untuk mengaplikasikan kemampuan popup pada project ini saya menambahkan komponen yang bernama af:showPopupBehavior ke dalam button yang berjudul “Show Popup”. Setelah itu saya tambahkan komponen af:popup dilanjutkan dengan memberi nama id untuk masing-masing komponen tersebut dengan nama mypopup. Perlu dicatat bahwa nama id untuk komponen af:showPopupBehavior dan af:popup haruslah sama, karena jika tidak sama maka popup tidak akan tampil.
Seperti cerita diatas, saya mengatakan bahwa setelah user menekan tombol Ok yang terdapat pada popup maka nilai yang dimasukkan pada textbox akan disalin ke textbox yang ada di halaman popup.jspx. Untuk itu tambahkanlah kode dibawah ini pada backing bean (Popup.java) milik halaman popup.jspx.
public String storeSomeTextFromPopupText(){ FacesContext fc = FacesContext.getCurrentInstance(); Application app = fc.getApplication(); ExpressionFactory ef = app.getExpressionFactory(); ValueExpression value =ef.createValueExpression(fc.getELContext(),"#{processScope.someText}",String.class); inputText1.setValue(value.getValue(fc.getELContext())); value.setValue(fc.getELContext(),""); return null; }
Setelah menambahkan kode tersebut jangan lupa tambahkan nama fungsi tersebut ke property action milik button yang ada di komponen popup. Setelah itu jalankan project dan lihatlah hasilnya. Lebih jelas tentang project ini silahkan di download di sini.