Thứ Ba, 7 tháng 6, 2016

Cho phép tùy chọn Giao diện trong Spring Web MVC framework

Để tăng độ hài lòng của khách truy cập, trang web có thêm tùy chọn Giao diện theo ý muốn của người dùng. Trong bài viết này, SmartJob chia sẻ với bạn cách xây dựng một ứng dụng Spring Web MVC như thế.
Bạn cần khởi tạo project bằng Maven archetype có tên maven-archetype-webapp, nếu bạn chưa rõ cách khởi tạo hãy xem bài viết Kỹ thuật Autowiring sử dụng annotation trong Spring Framework. Cấu trúc thư mục của ứng dụng sẽ như sau:
spring_theme01
Chúng ta sẽ tạo 14 files mã nguồn bao gồm:
  1. JobController.java
  2. Job.java
  3. beach.properties
  4. classic.properties
  5. modern.properties
  6. beach.css
  7. classic.css
  8. modern.css
  9. addjob.jsp
  10. resultJob.jsp
  11. springmvc-servlet.xml
  12. web.xml
  13. index.jsp
  14. pom.xml
Sau khi Maven tự động tạo cho bạn một số thư mục có sẵn, bạn cần tạo thêm thư mục java, css, pages như trong ảnh chụp màn hình. Sửa lại file pom.xml có nội dung như sau:
Ứng dụng Spring Web MVC cần tối thiểu các dependencies là: spring-core, spring-beans, spring-context, spring-web, spring-webmvc. Chúng ta bổ sung thêm thư viện JUnit để sau này viết Unit test, bổ sung thêm hibernate-validator để validate dữ liệu nhập vào qua form. Tất cả các dependency đều được khai báo 3 tham số GAV (GroupId – ArtifactId – Version). Khi khao báo version cho dependency, chúng ta sử dụng cách tổng quát hóa, khai báo số phiên bản qua properties trong pom.xml, đây là best practice, giả sử khi Spring Framework phát hành phiên bản 4.3.0.RELEASE, thì chúng ta chỉ cần thay đổi giá trị phiên bản này trong 1 vị trí chứ không phải 5 vị trí:

Là một ứng dụng web, nên trước khi xây dựng ứng dụng, bạn cần để ý đến file web.xml (deployment descriptor file). Từ dòng 7 – 18 là nội dung filter, filter này đảm bảo cho việc truyền dữ liệu ký tự Unicode tiếng Việt được đúng. Nếu bỏ qua thiết lập này, ứng dụng của bạn sẽ bị lỗi Font tiếng Việt. Filter có tên encodingFilter  này tác động đến tất cả các đường dẫn ứng dụng (được mô tả bằng <urlpatter>/*</urlpattern> ). Dòng 26 và 31 là đặc biệt quan trọng, để Spring Web MVC xử lý luồng đi của ứng dụng web.

Tạo thực thể Job (công việc). Các quy tắc kiểm tra tính hợp lệ dữ liệu đầu vào được thiết lập bằng annotation: @Size, @NotNull. Hibernate Validator phụ trách việc này.Một công việc có 8 thuộc tính là:
  1. title: Tiêu đề công việc
  2. company: Công ty tuyển dụng
  3. companyAddress: Địa chỉ công ty, nơi làm việc
  4. content: Chi tiết về yêu cầu tuyển dụng, chế độ đãi ngộ, thời gian làm việc, v.v..
  5. startDate: Ngày đăng tin
  6. endDate: Ngày gỡ tin tuyển dụng
  7. salary: Tiền lương
  8. createDate: Thời điểm tạo bản tin tuyển dụng
Controller:

Cấu hình bean cho Spring Framework. Nghiệp vụ tùy chọn giao diện (theme) của người dùng được xử lý ở dòng thứ 24-26. Class  org.springframework.web.servlet.theme.ThemeChangeInterceptor chịu trách nhiệm về việc này. Giao diện (theme) mặc định là modern (Hiện đại), là giao diện xuất hiện khi người dùng chưa đưa ra tùy chọn riêng cho mình.
Chúng ta sẽ tạo 3 giao diện có tên là:
  • Classic: Cổ điển
  • Modern: Hiện đại
  • Beach: Bờ biển
3 tập tin css tương ứng là:
File classic.css
File modern.css
File beach.css
Tạo 3 tập tin *.properties nằm trong thư mục resources:
File classic.properties
File modern.properties
File beach.properties
Cần 2 trang JSP, một trang để thêm công việc mới và một trang để hiển thị kết quả:
Trang thêm mới công việc addJob.jsp . Bạn phải nhớ khai báo thư viện tag sử dụng như ở dòng 2 và dòng 3. Hãy để ý vào dòng 8, 13 và 14. Khi người dùng bấm chọn Giao diện, thì đường dẫn đến file css giao diện thay đổi, được xử lý bởi tag<spring> .
Trang hiển thị kết quả resultJob.jsp
Trang chủ index.jsp sẽ trỏ về trang thêm mới công việc
Đến nay chúng ta đã tạo đủ 14 file và project đã hoàn tất, chạy ứng dụng trên Apache Tomcat để thấy kết quả:
Giao diện mặc định là Hiện đại (Modern) được thiết lập ở dòng 25 trong file springmvc-servlet.xml
spring_theme02
Bấm chọn và đổi giao diện, ta có giao diện Cổ điển (classic):
spring_theme03
Giao diện Bờ biển (beach):
spring_theme04
Sau khi bấm nút Gửi, nếu dữ liệu hợp lệ, sẽ trả về trang kết quả:
spring_theme05
(Nội dung xuất hiện trong tất cả ảnh chụp màn hình chỉ mang tính chất minh họa)
Tải về mã nguồn từ server SmartJob: theme hoặc GitHub: https://github.com/SmartJobVN/spring_theme
Nguồn: http://smartjob.vn/cho-phep-tuy-chon-giao-dien-trong-spring-web-mvc-framework-4632/

0 nhận xét:

Đăng nhận xét