JSF - Bài 4: Thức ăn cho vật nuôi (Pet Food)

Lập trình Web Java Server Faces


Center of Excellence, SaigonTech


Bài 4

Thức ăn cho vật nuôi

I. Bài toán

Một cửa hàng bày bán các loại thức ăn cho vật nuôi như sau:

Loại (grade)	Giá (cents/lb.)
A	30
B	20
C	10

Hãy phát triển một web application để xác định giá của một loại thức ăn cho trước. Dưới đây là một UI mẫu.

Hình 1

II. Giải pháp

Project: PetFoodJSF

1. Thiết kế UI screen

Để trình bày tất cả các loại thức ăn cho user lựa chọn, ta dùng <select> tag (drop-down list), trong đó mỗi loại thức ăn được đặt vào một <option> tag.

Hình 2

2. Bổ sung phần động cho UI screen

2.1. Thiết kế managed bean

Quan sát UI screen, ta thấy có một input component là loại thức ăn mà user chọn (selectedGrade), một output component là giá tương ứng với loại thức ăn đã chọn (price), và hai hành vi: xác định giá (showPrice) và xóa data (clear).

Hình 3

Ngoài ra, để tăng tính động cho application, ta sẽ chuyển tất cả các loại thức ăn định nghĩa bên trong UI screen về managed bean, và đặt chúng vào một array.

Hình 4

Thêm vào đó, data cung cấp cho grades array sẽ lấy từ một kiểu liệt kê (enum) gọi là Grade. Từ nay về sau, khi muốn thêm hay bớt số loại thức ăn, ta chỉ cần thao tác trên enum này.

Hình 5

2.2. Tạo fields và methods cho managed bean

Grade.java

package data;

public enum Grade {
    A, B, C
}

Index.java

package controller;

import data.Grade;
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named(value = "index")
@RequestScoped
public class Index {
    private Grade selectedGrade;
    private Integer price;

    public Index() {
    }
    
    public void showPrice() {
        // TODO
    }
    
    public void clear() {
        selectedGrade = null;
        price = null;
    }

    public Grade getSelectedGrade() { return selectedGrade; }

    public void setSelectedGrade(Grade selectedGrade) {
        this.selectedGrade = selectedGrade;
    }

    public Integer getPrice() { return price; }

    public Grade[] getGrades() { return Grade.values(); }
}

Lưu ý là trong code trên, ta không khai báo grades[] field như đã được chỉ định trong thiết kế, mà ta có thể cung cấp trực tiếp thông qua getGrades() getter.

2.3. Ràng buộc UI screen với managed bean

Đối với loại thức ăn, ta thay <select> tag của HTML bằng <h:seclectOneMenu> của JSF.

Hình 6

Để UI screen có thể tiếp nhận tất cả các loại thức ăn từ managed bean, ta lồng <f:selectItems> tag vào trong <h:selectOneMenu>.

Hình 7

Khi user chọn một loại thức ăn, ta cần ràng buộc giá trị chọn lựa này với selectedGrade bên trong managed bean, thông qua attributevalue của <h:selectOneMenu>.

Hình 8

Đối với các component khác, ngoài Clear button, ta làm theo chỉ dẫn của những bài trước.

Hình 9

2.4. Xóa form ở phía browser

Khác với những bài trước, ngoài ô nhập, UI screen của bài này còn có một drop-down list, thể hiện thông quả <select> tag. Như vậy, JavaScript code cần bổ sung khả năng xóa drop-down list này, tức chuyển nó về option đầu tiên. Ta đặt đoạn JavaScript code sau vào clearForm.js file và khai báo file này trong index.xhtml.

clearForm.js

function clearForm(form) {
    clearInputTexts(form.getElementsByTagName('input'));
    clearSelects(form.getElementsByTagName('select'));
}

function clearInputTexts(inputs) {
    for (i = 0; i < inputs.length; i++)
        if (inputs[i].type == 'text')
            inputs[i].value = '';
}

function clearSelects(selects) {
    for (i = 0; i < selects.length; i++)
        selects[i].selectedIndex = 0;
}

Hình 10

3. Phát triển model

3.1. Design

Hình 11

3.2. Test class

package model;

import data.Grade;
import static org.junit.Assert.assertEquals;
import org.junit.Test;

public class PetFoodTest {

    @Test
    public void getPrice() {
        assertEquals(30, new PetFood(Grade.A).getPrice());
        assertEquals(20, new PetFood(Grade.B).getPrice());
        assertEquals(10, new PetFood(Grade.C).getPrice());
    }
}

3.3. Main class

package model;

import data.Grade;
import java.util.NoSuchElementException;

public class PetFood {
    private Grade grade;

    public PetFood(Grade grade) {
        this.grade = grade;
    }

    public int getPrice() {
        if (this.grade == Grade.A)
            return 30;
        else if (this.grade == Grade.B)
            return 20;
        else if (this.grade == Grade.C)
            return 10;
        else
            throw new NoSuchElementException("Unknown price for grade " + grade);
    }
}

4. Kết nối managed bean với model

Hình 12

III. Tổng kết

Bài viết đã trình bày việc vận dụng <h:selectOneMenu> tag của JSF để phát triển UI cho bài toán xác định giá cả của một loại thức ăn cho vật nuôi. Ngoài ra, bài còn bổ sung JavaScript code để tái khởi động một drop-down list trong form.

IV. Tài liệu tham khảo

1. Gaddis T. (2010) Starting Out with Java: From Control Structures Through Objects, 4th edition, Pearson Education, Boston. Chương 3.
2. Clear a form with JavaScript. http://www.electrictoolbox.com/javascript-clear-form/