Topic: Sử dụng hộp lựa chọn – drop down list để xử lý giao diện nhập liệu trong Struts 2.x Framework

Sử dụng hộp lựa chọn – drop down list để xử lý giao diện nhập liệu trong Struts 2.x Framework

Mục đích: Chủ đề của bài này đề cập đến cách sử dụng drop down list trong giao diện nhập liệu khi sử dụng framework Struts 2. Chúng tôi sẽ giới thiệu và hướng dẫn cách sử dụng hai loại drop down list (select Tag và combo Tag) thông qua ứng dụng cập nhật giá trị thông tin dữ liệu từ người sử dụng đến DB. Qua đó, quí vị sẽ có sự lựa chọn phù hợp cho nội dung ứng dụng tương ứng.

Các kiến thức yêu cầu của bài này

• Nắm vững các khái niệm về MVC, Struts Framework 1.x, các khái niệm cơ bản về Struts 2.x Framework
• Nắm vững khái niệm về ngôn ngữ lập trình Java, lập trình thao tác hướng đối tượng
• Nắm vững khái niệm về lập trình web sử dụng J2EE hay JavaEE với các kiến thức về Servlet, JSP
• Nắm vững khái niệm về cơ chế Filter và RequestDispatcher trong Servlet
• Nắm vững toàn bộ cách thức vận dụng và xây dựng ứng dụng hoàn chỉnh bằng Struts2 Frameworks (quí vị có thể tham khảo toàn bộ bài Mở rộng kiến thức về Struts 2 Framework – Interceptor và Validation; và Tổng quan về Struts 2 Framework, …)

Giới thiệu về drop down list

• Select Tag
• Cho phép user lựa chọn một trong những giá trị có sẵn trong danh dách chọn lựa
• Cú pháp sử dụng

<s:select name=”tên thuộc tính” list=”tên thuộc tính có phương thức get trả ra collection của một action class để trở thành giá trị lựa chọn cho người sử dụng” value=”xác định giá trị tương ứng được lựa chọn - selected” …>

• Khi code được thực thi ở phía server sẽ phát sinh code tương ứng để render ở phía client dưới dạng html như sau

<select name="name đã đặt" id="được phát sinh">

<option value="key1">giá trị 1</option>

…

<option value="keyn">giá trị n</option>

</select>

• Combo Tag
• Cho phép user lựa chọn giá trị trong danh sách lựa chọn. Ngoài ra, user còn có thể nhập giá trị trực tiếp trên ô text box kèm theo danh sách lựa chọn. Nếu giá trị có trong danh sách lựa chọn thì hộp drop down được cập nhật. Control này cho phép nhập những giá trị không có trong danh sách lựa chọn tùy theo cách xử lý của ứng dụng
• Combo tag chỉ sử dụng kiểu chuỗi để xử lý vì mục đích chính của control này là hướng user nhập liệu vào text box, không phải là lựa danh sách chọn lựa như select
• Cú pháp và cách sử dụng tương tự như select tag ngoại trừ thay chữ select bằng combo
• Khi code được thực thi thì phía server sẽ phát sinh code ra control select nhưng có thêm một text box nhập liệu và biến cố onchange trên drop down list

<script type=”text/javascript”>

      Function hỗ trợ handle việc cập nhật giá trị chọn lựa từ dropdown list hiển thị lên text box

</script>

<input type=”text” name=”name đã đặt” value=”giá trị chọn lựa trong drop down bên dưới” id=”được phát sinh”/>

<select onChange="tên function được cài đặt ở phần javascript nêu trên">

<option value="key1">giá trị 1</option>

…

<option value="keyn">giá trị n</option>

</select>

• Các giá trị để hiển thị chọn lựa trong drop down list để nguời dùng lựa chọn sẽ phải là kiểu List hay kiểu Map tùy theo sự đòi hỏi của ứng dụng là hiển thị trị lựa chọn hay hiển thị giá trị thay thế.

Vận dụng nội dung trên để chỉnh sửa chức năng Search với giao diện trình bày hỗ trợ cho việc update trên lưới

• Yêu cầu
• Nắm vững các khái niệm về MVC, Struts Framework 1.x, Struts2 Framework
• 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
• Cách thức sử dụng JSTL, EL, HTML, OGNL
• Cách thức sử dụng liên kết động với DB trong code Java
• Đã hoàn tất xong ứng dụng Struts2 tại địa chỉ chỉ http://www.kieutrongkhanh.net/2016/08/tong-quan-ve-struts-2-framework-mot_18.html
• Thực hiện chỉnh sửa chức năng search với giao diện trình bày thay đổi role là thể hiện một drop down list để người dùng có thể lựa chọn giá trị admin hay user để hỗ trợ việc update dữ liệu của một account
• Tool sử dụng
• Tools sử dụng ở đây là Netbeans 6.9.1, Netbeans 7.4, Netbeans 8.x
• JDK 6 update 22, JDK 7 update 51, JDK 8 update 66
• Server: Tomcat 6.0.26, Tomcat 7.x, Tomcat 8.x
• DBMS: SQL Server 2005 đến SQL Server 2014
• Thư viện hỗ trợ: Driver kết nối database SQLServer (sqljdbc.jar hay sqljdbc4.jar), Struts2 Framework taglib
• Tool Netbeans phải hỗ trợ Struts2
• Các bước thực hiện như sau
• Giao diện của chức năng search mong đợi theo yêu cầu thực hiện như sau

• Thực hiện cập nhật code để thay đổi giao diện của chức năng search trên tập tin search.jsp

• Để giá trị chọn lựa trong drop down list được hiển thị, chúng ta phải cập nhật Action xử lý chức năng search
• Bổ sung thuộc tính roleList (tên được đặt trong list của control dropdown trong code trang search nêu trên) với kiểu dữ liệu là kiểu Map bởi vì chúng ta thấy thực sự bên dưới DB chúng ta là kiểu bit tương ứng giá trị 0 hay 1 (false or true). Tuy nhiên đối với người dùng thì chúng ta phải thể hiện là admin và user nên chúng ta dùng kiểu dữ liệu Map với key là kiểu dữ liệu gốc và value là giá trị hiển thị
• Bổ sung phương thức get /set cho thuộc tính này
• Trong phương thức execute, bổ sung các giá trị mặc định và mapping cho thuộc tính này theo phân tích ở trên để các giá trị này được nào vào drop down list tại tại điểm action được kích hoạt để có giá trị chọn lựa cho người sử dụng

• Không thay đổi gì khác trong tập tin cấu hình struts.xml và các thành phần khác của ứng dụng như DAO, DTO, …
• Thực hiện clean and build, deploy và test thử kết quả

 

 

 

• Chúng ta nhấn phải chuột trên trang chọn View Source hay View Source Page, chúng ta sẽ thấy code phát sinh như sau

• Chúng ta chọn lựa giá trị và nhấn Update thì kết quả sẽ được update xuống DB và giá trị chọn lựa được cập nhật trên trang chúng ta
• Chúng ta vừa hoàn tất cách sử dụng tag select. Để rõ hơn sử khác biệt với thẻ combo, chúng ta thực hiện chỉnh sửa code trang search với select thành combo như sau

• Chúng ta không sửa gì thêm nữa. Thực hiện clean and build, deploy và test

 

• Chúng ta có thể nhập giá trị trực tiếp vào ô text box ở trên         

• Nhấn Update

• Chúng ta thấy kết quả cũng cập nhật được tốt. Như đã đề cập trong phần lý thuyết, combo hướng tới cho phép người dùng nhập liệu trên text box và có thể nhập giá trị không có trong text box. Trong bài này vì chúng ta chỉ chấp nhận 02 giá trị true và false nên việc nhập giá trị không có trong list lựa chọn không làm ảnh hưởng gì cả và code chúng ta không có xử lý việc nhập tùy ý (Quí vị có thể tự làm thêm nội dung này)
• Chúng ta có thể nhấn phải chuột để view source hay view source page

 

Chúc mừng quí vị đã hoàn tất việc sử dụng drop down list trong xây dựng ứng dụng sử dụng Struts2 Framework. Hy vọng chủ để này hỗ trợ quí vị trong việc tạo giao diện phù hợp với yêu cầu chức năng trong ứng dụng

Hẹn gặp lại quý vị ở các chủ đề khác liên quan đến Struts2 Framework