JavaServer Faces: Melihat Wajah Java


Hari ini aku akan mencoba mempelajari bagaimana menggunakan JSF bersama dengan JSP. JSF masih merupakan bagian dari JEE, dan dibuat berdasarkan projek Apache Struts. Yup! JSF memakai design pattern MVC layaknya Struts. Sayangnya, Tomcat tidak menyertakan JSF dalam paket-nya, sehingga aku harus men-download JAR tambahan di situs Sun. Tapi ada ide yang lebih baik: hari ini aku akan memakai NetBeans IDE 6.5 dan application server GlassFish, soalnya mereka sudah punya JSF sehingga aku tidak perlu repot men-download lagi.

Aku memilih Web Application (Java Web) dari New Project di NetBeans. Setelah itu, pada langkah ke-4, aku men-centang pilihan framework JavaServer Faces. Setelah project dibuat, aku memastikan libraries JSF 1.2 telah disertakan di bagian Libraries, yang terdiri atas commons-beanutils.jar, commons-collections.jar, common-digester.jar, commons-logging.jar, jsf-api.jar, dan jsf-impl.jar.

Pada MVC di JSF, Model diwakili oleh class JavaBean, View diwakili oleh JSP, dan Controller diwakili oleh facet servlet (javax.faces.webapp.FacesServlet) yang dapat di-customize melalui file /WEB-INF/faces-config.xml.

Sebagai latihan, aku akan memakai Model ini:

package com.latihan;

public class User {
    private String firstName;
    private String lastName;
    private String password;

    public String getFirstName() {
        return firstName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

Aku harus mendaftarkan Model tersebut pada file konfigurasi faces-config.xml terlebih dahulu. File konfigurasi ini dapat ditemukan di bagian “Configuration Files” dari project. Saat pertama kali membukanya, NetBeans akan menampilkan PageFlow, sebuah fitur yang sangat berguna untuk melihat hubungan antar View dalam bentuk diagram. Untuk meng-edit file ini, klik pada bagian “XML“, lalu aku menambahkan baris berikut:

<managed-bean>
  <managed-bean-name>user</managed-bean-name>
  <managed-bean-class>com.latihan.User</managed-bean-class>

  <managed-bean-scope>session</managed-bean-scope>
</managed-bean>

Sekarang aku dapat memakai Model tersebut di View melalui managed-bean-name, yaitu user. Sebagai latihan, berikut ini adalah View yang aku beri nama registrasi.jsp:

<%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<html>
    <head>
        <title>Latihan JSF</title>

    </head>
    <f:view>
        <body>
            <h1>User Registration</h1>
            <h:form>

                <table>
                    <tr>
                        <td>First Name:</td>
                        <td><h:inputText value="#{user.firstName}" size="30"/></td>
                    </tr>

                    <tr>
                        <td>Last Name:</td>
                        <td><h:inputText value="#{user.lastName}" size="30"/></td>
                    </tr>
                    <tr>

                        <td>Password:</td>
                        <td><h:inputSecret value="#{user.password}" size="30"/></td>
                    </tr>
                </table>
                <h:commandButton value="Register" action="submit"/>

            </h:form>
        </body>
    </f:view>
</html>

Secara default, View di atas dapat di-akses dengan alamat http://localhost:8080/nama_context/faces/registrasi.jsp. Berikutnya, aku membuat sebuah View lagi, yang aku beri nama userinfo.jsp:

<%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<html>
    <head>
        <title>Latihan JSF</title>
    </head>
    <f:view>
        <body>

            Welcome, <h:outputText value="#{user.firstName}"/>
            <h:outputText value="#{user.lastName}"/>.
            <p/>
            Your password is <h:outputText value="#{user.password}"/>.
        </body>
    </f:view>

</html>

Sebagai langkah terakhir, aku akan menentukan navigasi View di dalam Controller dengan menambahkan baris berikut di file faces-config.xml:

<navigation-rule>
   <from-view-id>registrasi.jsp</from-view-id>
   <navigation-case>
      <from-outcome>submit</from-outcome>

      <to-view-id>userinfo.jsp</to-view-id>
   </navigation-case>
</navigation-rule>

Sekarang, jika aku membuka halaman registrasi.jsp dan aku menekan tombol Submit, aku akan dibawa ke halaman userinfo.jsp. Tampilan diagram PageFlow di NetBeans saat membuka faces-config.xml akan memperjelas flow navigasi antar-view.

Perihal Solid Snake
I'm nothing...

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: