Sử dụng JSF Framework 2.0 để xây dựng ứng dụng Shopping Cart

Sử dụng JSF Framework 2.0 để xây dựng ứng dụng Shopping Cart

Mục đích: Chủ đề của bài này đề cập mở rộng nội dung về JSF Framework thông qua việc áp dụng framework này để xây dựng ứng dụng Shopping Cart để giúp chúng ta hiểu rõ hơn cách sử dụng JSF Framework 2.0

Sử dụng JSF Framework 2.0 để xây dựng ứng dụng Shopping Cart

Mục đích: Chủ đề của bài này đề cập mở rộng nội dung về JSF Framework thông qua việc áp dụng framework này để xây dựng ứng dụng Shopping Cart để giúp chúng ta hiểu rõ hơn cách sử dụng JSF Framework 2.0

Ứng dụng ở đây mô tả việc xây dựng một ứng dụng cung cấp chức năng như sau

• Chúng ta áp dụng các yêu cầu về Shopping Cart tương ứng trong các chủ đề về MVC, EJB và Visual
• Yêu cầu
• Nắm vững khái niệm về JSF Frameworks và cách thức cài đặt mô hình ứng dụng với JSF Framework 2.0 (vui lòng xem lại bài JSF Framework – JavaServer Faces Framework, MVC Model và dùng JSF để xây dựng ứng dụng Web bằng JSF Framework 2.0)
• Nắm vững các khái niệm về MVC và cách thức cài đặt mô hình MVC
• Nắm vững về ngôn ngữ lập trình Java, lập trình thao tác hướng đối tượng, Java Beans
• Cách thức sử dụng JSTL, EL, HTML, cách sử dụng taglib trên trang JSP
• Tools sử dụng ở đây là Netbeans 6.9.1
• JDK 6 update 22
• Server: Tomcat 6.0.26
• Các bước thực hiện
• Tạo Web Application tương tự như JSF Framework – JavaServer Faces Framework, MVC Model và dùng JSF để xây dựng ứng dụng Web bằng JSF Framework 2.0
• Tên project: JSF2_0ShoppingCart
• Server: Apache Tomcat 6.0.26
• J2EE/JavaEE version: Java EE 5
• Tại bước chọn Framework, chọn JavaServer Faces, trong Libraries chọn JSF 2.0 tại option Registered Libraries

• Trong thành phần của Configuration, chúng ta nhìn thấy tất các các trang phải nằm trong  URL Pattern là faces/*, bên cạnh đó chúng ta phải chọn trang chúng ta thao tác là JSP qua tham số Preferred Page Language vì chúng ta thao tác chủ yếu trên trang JSP

• Chúng ta nhấn Finish để tạo ra project
• Để thực hiện Navigation Model và mapping Navigation bằng xml thông qua tập tin faces-config, chúng ta tạo tập tin JSF Faces Configuration tương tự như JSF Framework – JavaServer Faces Framework, MVC Model và dùng JSF để xây dựng ứng dụng Web bằng JSF Framework 2.0 để tạo tập tin faces.config.xml
• Lưu ý: tập tin faces-config.xml phải nằm tại thư mục WEB-INF của ứng dụng
• Thực hiện tạo một giỏ hàng để áp dụng vào ứng dụng
• Chúng ta thực hiện tạo một quyển sách có chứa các thành thuộc tính như tựa sách, số lượng sách, phát sinh các phương thức get/set cho các thuộc tính này.
• Tạo constructor cho phép đưa tựa sách với mục đích tạo ra một quyển sách duy nhất

• Tạo ra giỏ hàng có thể chứa đựng nhiều sách với 02 chức năng cơ bản đó là thêm sách vào giỏ hàng và remove hàng ra khỏi sách. Ở đây, chúng ta sẽ áp dụng HashMap để hỗ trợ check trùng và tăng số lượng của một loại sách khi sách đã có sẵn trong giỏ

• Tạo Managed Bean tên CartSessionBean – tầm vực session cho ứng dụng áp dụng đúng mô hình mà JSF Framework mô tả để đón nhận, chuyển xử lý như sau (áp dụng tương tự như JSF Framework – JavaServer Faces Framework, MVC Model và dùng JSF để xây dựng ứng dụng Web bằng JSF Framework 2.0)
• Chọn menu File, chọn New File, chọn JavaServer Faces trong Categories, chọn JSF Managed Bean
• Nhấn Next, nhập tên bean vào class name, nhập package vào Package, chọn Session trong Scope

• Click Finish, Netbeans cập nhật faces-config.xml và phát sinh Beans như sau

• Để hỗ trợ thao tác thực hiện thêm hàng và view giỏ hàng, chúng ta cần thực hiện các bước như sau
• Đây là một Object sử dụng trên ứng dụng Web nên chúng ta phải implement Serializable, khai báo 2 thuộc tính shopping - giỏ hàng kiểu dữ liệu là CartBean đã xây dựng ở trên và selectedBook - quyển sách đang được chọn lựa  và phát sinh các phương thức get/set tương ứng
• Cần lưu ý để thuận tiện trong việc trình bày dữ liệu giỏ hàng trong DataTable và lấy dữ liệu trình bày giỏ hàng dễ dàng, chúng ta phải thay đổi phương thức getShopping trả về kiểu dữ liệu là kiểu List thay vì kiểu CartBean (nói cách khác là HashMap) vì kiểu dữ liệu này rất khó lấy giá trị bên dataTable và dataTable không hỗ trợ kiểu dữ liệu HashMap trong xử lý
• Cài đặt hàm addCart để add một quyển sách vào trong giỏ hàng, sử dụng hàm addBook của kiểu dữ liệu CartBean. Phương thức này sẽ return null để thể hiện khi add hàng xong rồi xem refresh trang hiện hành trong navigation model
• Cài đặt hàm viewCart với việc return về giá trị success để mapping chuyển sang trang show trình bày dữ liệu của giỏ hàng

• Thành phần Managed Bean đã xong, chúng ta chuyển sang tạo giao diện cho ứng dụng thực hiện
• Phát triển giao diện giỏ hàng cho người dùng chọn lựa bằng cách thay đổi trang index.jsp như sau
• Sử dụng dropdown list trong JSF là selectOneMenu kết nối với thuộc tính selectedBook trong managedBean
• Giá trị option trong dropdown list sử dụng selectItem
• 02 nút lệnh kết nối action tương ứng với phương thức addCart và viewCart

• Tạo trang JSF page tương tự như JSF Framework – JavaServer Faces Framework, MVC Model và dùng JSF để xây dựng ứng dụng Web bằng JSF Framework 2.0 với tên show.jsp với nội dung
• Sử dụng dataTable để duyệt thuộc tính shopping trong managed bean
• Mỗi phần tử trong shopping có kiểu dữ liệu là kiểu BookDTO

• Project được cập nhật như sau

• Chúng ta thực hiện mapping các trang qua faces-config.xml. Chúng ta áp dụng tương tự như bài Cài đặt Visual Web JSF và đặt nhãn tương ứng trong chuyển đổi đã thiết lập trong managed bean

• Build, Deploy and Test Project

• Add Servlet 1 lần, Add Enterprise EJB 4 lần, Add Tomcat Web Server 3 lần, Add Jboss 2 lần, add Integrating XML with Java 1 lần

 

• Chúng ta đã hoàn tất xong chức năng add cart và view cart cho ứng dụng
• Chúng ta chuyển sang chức năng remove hàng trong giỏ hàng
• Chúng ta bổ sung thuộc tính chkBooks để xác định rằng hàng nào được chọn trên lưới để thực hiện remove
• Để làm được điều này chúng ta chọn kiểu dữ liệu cho thuộc tính trên là HashMap với key để lưu trữ kiểu Long và mỗi key giá trị lưu trữ có nó sẽ là Boolean để thể hiện có check hay không check trên check box
• Khi chúng ta áp dụng control kiểu selectBooleanCheckBox thì khi chúng ta check vào control, giá trị chúng ta nhận được sẽ là true, còn gỡ check hay không check, giá trị của chúng ta sẽ là false
• Phát sinh get/set cho thuộc tính chkBooks
• Bên cạnh đó, chúng ta phải xây dựng phương thức getTitles để lấy về tất cả các tựa sách đang được chọn trong giỏ hàng. Phương thức này sẽ trả về tập Collection các tựa sách để thông qua đó chúng ta sẽ so sánh với thuộc tính checkBox để kiểm tra xem sách nào được chọn để remove ra khỏi giỏ hàng
• Cuối cùng chúng ta xây dựng phương thức remove sử dụng phương thức getTitles và thuộc tính chkBooks để tìm ra sách được lựa chọn để kích hoạt hàm remove trong CartBean. Hàm này sẽ return null để refresh trang show hiện hành

• Cập nhật giao diện cho trang show.jsp
• Bổ sung thêm checkbox kiểu selectBooleanCheckBox
• Giá trị của nội dung của checkbox reference đến HashMap chkBooks với giá trị item hiện hành trên một hàng chọn lựa thông qua [] thể hiện add giá trị với key và giá trị có chọn hay không chọn (true hay false) vào trong chkBooks, để sau đó chúng ta mới dùng nó để tìm kiếm key và giá trị có chọn hay không chọn trong hàm remove để gọi hàm remove tương ứng

• Build and Clean Project, Deploy và Testing đến trang show

• Thực hiện check các mặt hàng cần loại bỏ

• Click Nút Remove

• Chúng ta đã hoàn tất xong chức năng Remove
• Chúng ta tiếp tục thực hiện chức năng Add More như sau
• Để thực hiện chức năng này chúng ta thực hiện thêm link trong trang show.jsp và bổ sung code trong Managed Bean với giá trị trả về là success.
• Thực hiện mapping trong tập tin faces-config.xml để chuyển lại về trang index.jsp
• Bổ sung code cho managed bean

• Chỉnh sửa trang show.jsp với action của link là phương thức addMore trong managed bean

• Cập nhật cho navigation model, faces-config.xml

• Clean and Build, Deploy, Test đến trang show

• Click nút Add More Cart để quay về trang index

• Add thêm 1 món hàng nữa và click View Cart

Chúc mừng các bạn đã hoàn tất ứng dụng Shopping Cart sử dụng JSF Framework, ở đây là version 2.0, cách thức thiết kế, mô hình ứng dụng và cài đặt ứng dụng web theo mô hình MVC sử dụng JSF Framework theo hướng driven event framework và kết nối – binding và giao tiếp thông qua managed bean hay backing bean. Ở đây chúng ta học hỏi kỹ thuật xử lý check box và drop down list.

Chúng tôi hy vọng nội dung của bài này giúp ích các bạn trong việc cài đặt mô hình ứng dụng web áp dụng MVC với JSF Framework sử dụng bằng code trực tiếp thay vì kéo thả như Visual Web JSF.

Rất mong sự góp ý chân thành và chia sẻ của quí vị về vấn đề này. Hẹn gặp lại quý vị ở chủ đề khác