Membuat Album Foto Dengan PrimeFace Di NetBeans 7


PrimeFaces adalah salah satu framework ‘tampilan’ yang kompatibel dengan Java Server Faces 2.0.  Framework ini sudah di-bundle di NetBeans 7 sehingga pengguna NetBeans tidak perlu lagi men-download sendiri.  Artikel ini akan menunjukkan bagaimana memakai PrimeFaces di NetBeans 7.  Artikel ini hanya menunjukkan pemakaian komponen <galleria>.  Seluruh komponen yang disediakan oleh PrimeFaces dapat dilihat di show case yang berada di http://www.primefaces.org/showcase/ui

Langkah pertama yang dilakukan adalah membuat sebuah project baru di NetBeans 7, dengan memilih menu File, New Project.  Kemudian pilih Java Web, Web Application, seperti yang terlihat di gambar berikut:

Klik tombol Next, isi informasi project seperti Project Name dan Project Location.  Klik tombol Next lagi untuk membuka halaman Server and Settings.  Pada halaman ini, pilih Server yang akan dipakai.

Setelah itu, klik tombol Next, halaman Frameworks akan muncul.  Beri tanda centang pada JavaServer Faces.  Kemudian pada tab Components, pilih PrimeFaces 2.2.1 di Components Suite seperti yang terlihat pada gambar berikut:

Memilih PrimeFaces Pada Saat Membuat Project Web Baru
Setelah itu, klik tombol Finish.  Sebuah facelet dengan nama index.xhtml akan dibuat.  Kalau diperhatikan, facelet tersebut secara otomatis akan menyertakan namespace PrimeFaces, seperti yang terlihat di bagian berikut:

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:h="http://java.sun.com/jsf/html">

Web site yang akan dibuat pada artikel ini tidak menyediakan fungsi upload, sehingga diasumsikan gambar sudah berada di lokasi yang ditentukan.  Sebagai informasi, folder yang dipakai adalah folder dengan nama gambar.  Buat sebuah folder baru di Web Pages dengan klik kanan dan memilih New, Other… Pada dialog yang muncul, pilih Other, Folder. Pada Folder Name, isi dengan nama gambar.  Masukkan beberapa file gambar pada folder ini dengan cara copy-paste.

Langkah berikutnya, buat sebuah Managed Bean dengan memilih menu File, New File.  Kemudian pilih JavaServer Faces pada bagian Categories, dan pilih JSF Managed Bean pada bagian File Types.  Klik tombol Next.  Isi Class Name dengan FileAlbum.  Pada combobox Scope, isi dengan session.  Kemudian klik tombol Finish.

Kemudian ganti kode program pada FileAlbum.java yang dihasilkan oleh NetBeans menjadi seperti berikut:

package co.id.snake.mbean;

import java.io.IOException;
import java.net.URISyntaxException;
import java.nio.file.DirectoryStream;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import javax.faces.application.Resource;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import javax.servlet.ServletContext;

@ManagedBean
@SessionScoped
public class FileAlbum {

  private List<String> fileLocations;

  public FileAlbum() {
    fileLocations = new ArrayList<>();
    try {
      ServletContext sc = (ServletContext)FacesContext.getCurrentInstance().getExternalContext().getContext();
      Path dirGambar = Paths.get(sc.getRealPath("/gambar"));
      try (DirectoryStream<Path> dir = Files.newDirectoryStream(dirGambar)) {
        Iterator<Path> iter = dir.iterator();
        while (iter.hasNext()) {
          Path file = iter.next();
          fileLocations.add("/gambar/" + file.getFileName());
        }
      }
    } catch (IOException ex) {
      ex.printStackTrace();
    }
  }

  public List<String> getFileLocations() {
    return fileLocations;
  }
}

Kode program di atas memanfaatkan fitur baru di Java 7, sehingga hanya bisa dijalankan bila menggunakan JDK 7 ke atas.  Bila fitur baru belum dikenali oleh editor, klik kanan pada nama project, kemudian pilih Properties.  Pada bagian Source/Binary Format, pastikan JDK 7 sudah dipilih.

Setelah itu, lakukan modifikasi pada index.xhtml menjadi seperti berikut ini:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
   <title>Latihan PrimeFaces</title>
</h:head>
<h:body>
   <p:growl id="label" showDetail="true"/>
   <p:panel header="Album Foto">
     <p:galleria effect="slide" effectSpeed="1000">
       <ui:repeat value="#{fileAlbum.fileLocations}" var="fileLocation" >
         <p:graphicImage value="#{fileLocation}" />
       </ui:repeat>
     </p:galleria>
   </p:panel>
</h:body>
</html>

Tampilkan facelet tersebut di browser dengan memilih menu Run, Run File.  Berikut ini adalah contoh tampilan di browser:

Contoh Tampilan PrimeFaces

Video yang mempertunjukkan langkah demi langkah dari artikel ini dapat dilihat di http://www.screencast.com/t/C6KdmBmLCMn.

Perihal Solid Snake
I'm nothing...

6 Responses to Membuat Album Foto Dengan PrimeFace Di NetBeans 7

  1. yama mengatakan:

    ketika sy run program new project yang prtama kali, program gagal me run..apakah butuh library tertentu untuk menjalankan prime face ini??maaf new bie..

  2. jon mengatakan:

    kalau mau di jalan kan di Nokia JDK gmna y mas?

    • Solid Snake mengatakan:

      PrimeFaces adalah teknologi View untuk aplikasi web sehingga harus dijalankan pada server. Untuk mengakses web, aktifkan GPRS/3G dan buka browser di Nokia, ketik URL situs yang dibuat dengan PrimeFaces. Bila browser Nokia tersebut mendukung JavaScript dan jQuery, maka galeri akan ditampilkan dengan baik.

      Terdapat juga PrimeFaces Mobile (yang memakai jQuery Mobile) untuk menghasilkan tampilan web yang cocok diakses di perangkat mobile seperti iPhone, Android, Palm, Blackberry, dan Windows Mobile.

  3. jon mengatakan:

    maaf mas Maksud saya album galerynya di “Nokia SDK 2.0 for Java Emulator” gmna y mas. kan kalau yg artikel mas di pilih ke java jeb projectnya web aplikation. kalau mau ke Nokia SDK 2.0 for Java Emulator pilihannya apa y mas? waduh Maturnuhun banget yo mas mau repply makasiiii🙂

    • Solid Snake mengatakan:

      Untuk membuat aplikasi di Nokia SDK Emulator, saat dialog New Project muncul, pilih Java ME, kemudian pilih Mobile Application. Tentukan nama & lokasi proyek, klik Next. Pada Emulator Platform, pilih Nokia SDK 2.0, kemudian pilih target configuration & profile. Setelah itu click tombol Finish. Bila pilihan emulator Nokia SDK 2.0 belum ada, maka sebelum membuat proyek baru, pilih Tools, Java Platforms, klik pada tombol Add Platforms… Di dialog yang muncul pilih Java ME MIDP Platform Emulator, klik tombol Next, dan beri tanda centang pada lokasi Nokia SDK 2.0, klik tombol Next dan Finish.

      Sebagai informasi: Tulisan saya membahas tentang Java Enterprise Edition (EE), sementara untuk Nokia SDK, memakai Java Micro Edition (ME). Walaupun sama-sama memakai 1 bahasa pemograman yang sama, yaitu bahasa Java, tetapi teknologi mereka berbeda (misalnya, class-class yang ada di JEE belum tentu ada di JME). PrimeFaces hanya untuk JEE (web); membuat galeri di JME bisa menggunakan LWUIT dan sebagainya.

Apa komentar Anda?

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: