Primefaces mendapatkan ID component

Pada blog hari ini saya akan menulis tentang Primefaces. Pada saat kita menggunakan komponen data seperti datagrid, datatabel, datalist dll dan sayangnya pada komponen data primefaces selalu men-generate id otomatis ke setiap komponen didalamnya. Padahal untuk kasus tertentu kita membutuhkan id tsb untuk diolah sesuai dengan kebutuhan kita. 

Nah dalam blog kali ini saya akan memberi tips untuk menyelesaikan masalah tersebut :D.

Berikut saya memiliki contoh menampilkan data menggunakan datatable component :

Pada gambar diatas saya menggunakan komponen outputtext untuk menampilkan data manufacturer ID dan mendefinisikan id komponen tersebut. Mari kita lihat dibrowser apakah id-nya sesuai dengan keinginan kita .

Dan primefaces men-generate id menjadi j_idt5:t1:0:_id . Untuk menyelesaikan kasus ini saya membungkus component primefaces dengan native html yaitu <div> serta sedikit menggunakan javascript. Berikut solusinya : 

JavaScript Code :

Ide dasar pada gambar diatas adalah setiap user klik tombol button akan memanggil method javascript yang berfungsi mencari id yang ada didalam <div>. Jika id ditemukan akan memanggil remote command component untuk mempassing value ke bean. Mari kita coba :

Pada gambar diatas ketika saya klik button onClick maka kita akan mendapatkan id j_idt5:t1:0:_id. :)

Sekian blog dari saya semoga bermanfaat :D

Primefaces - JSF | Menampilkan File Image Dinamis

Pada kesempatan kali ini, penulis akan membagikan cara menampilkan image dari database dengan format BLOB ke Primefaces / JSF. 

Seperti yang kita tahu, bahwa <p: graphicImage> pada primefaces sebenarnya membuat sebuah <img src> elemen dengan URL. URL ini berisi sebuah ID unik dan disimpan dalam sesi HTTP dari pengguna. Browser menginterpret halaman html dan meminta isi gambar berdasarkan URL yang ditemukan pada atribut src. Jadi, kita tidak bisa langsung memasukkan streamedcontent parameter pada getter beannya. Sehingga, kita membutuhkan <f:param> berisi ID dari gambar yang akan dibaca oleh bean.

berikut contoh potongan code pada file HTML nya :

<p:dataTable value="#{bean.items}" var="item">
    <p:column>
        <p:graphicImage value="#{imageStreamer.image}">
            <f:param name="id" value="#{item.imageId}" />
        </p:graphicImage>
    </p:column>
</p:dataTable>

#{item.imageId} merupakan nilai ID image dari database (primary key) dan bukan byte[]. 
Berikut contoh potongan code untuk bean class ImageStreamer:

@ManagedBean
@ApplicationScoped
public class ImageStreamer {

    @EJB
    private ImageService service;

    public StreamedContent getImage() throws IOException {
        FacesContext context = FacesContext.getCurrentInstance();

        if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) {
            // So, we're rendering the HTML. Return a stub StreamedContent so that it will generate right URL.
            return new DefaultStreamedContent();
        } else {
            // So, browser is requesting the image. Return a real StreamedContent with the image bytes.
            String imageId = context.getExternalContext().getRequestParameterMap().get("imageId");
            Image image = imageService.find(Long.valueOf(imageId));
            return new DefaultStreamedContent(new ByteArrayInputStream(image.getBytes()));
        }
    }

}

Sedangkan class Image merupakan @Entity dengan sebuah @Lob bytes[] property.

@Entity
public class Image {

    @Id
    @GeneratedValue(strategy = IDENTITY) // Depending on your DB, of course.
    private Long id;

    @Lob
    private byte[] bytes;

Demikian cara untuk menampilkan gambar pada JSF - Primefaces secara dinamis. Konsep tersebut juga dapat dilakukan jika Anda ingin membuat datatable yang berisi gambar secara dinamis.