Lập Trình Web JSF | Edu-innovation

Trang chủ » Cài đặt Jsf » Lập Trình Web JSF | Edu-innovation

Có thể bạn quan tâm

Lập trình Web Java Server Faces

Center of Excellence, SaigonTech

Bài 1: Tính lương trước thuế

Bài bổ túc

Thiết kế form

Giao diện có tương tác giữa user và application được gọi là một form. Bài trước đã trình bày cách thiết kế một form đơn giản để tính gross pay. Bài này sẽ tập trung cải thiện phương diện mỹ thuật của form này. Kết quả của thiết kế cuối cùng sẽ như sau

Hình 1

Để có được một form như trên, ta có thể đi theo một tiến trình bắt đầu bằng một thiết kế thô, sau đó từng bước tinh chỉnh cho đến khi đạt được kết quả vừa ý.

I. Thiết kế thô

Ở giai đoạn này, ta chưa cần quan tâm đến khía cạnh kỹ thuật, chỉ cần đảm bảo rằng form có đủ các thành phần đáp ứng được yêu cầu bài toán. Bài trước đã trình bày dạng thô sau

Hình 2

Hình 3

II. Tinh chỉnh thiết kế

Ở bước này, ta có thể dựa vào nguyên tắc chủ đạo là đi từ tổng quát đến chi tiết, còn được gọi là top-down. Trước tiên ta chú ý tinh chỉnh các thành phần tổng quát. Trong một web page, thành phần tổng quát quan trọng nhất đó là toàn bộ trang, thể hiện qua cặp thẻ <html>. Các thành phần chi tiết hơn, sau <html> lần lượt là <head> và <body>. Với ví dụ trên, các thành phần chi tiết hơn, sau <body> lần lượt là <h2>, <fieldset>, và <input>.

Lưu ý rằng nguyên tắc top-down chỉ mang tính chủ đạo, không nên áp dụng cứng nhắc. Chẳng hạn, khi cần kiểm tra một hiệu ứng hiển thị mà ta cho là quan trọng vào thời điểm đó, ta có thể vi phạm nguyên tắc chủ đạo này. Tuy nhiên, khi trình bày code, để thuận tiện cho việc bảo trì, ta nên trình bày top-down.

1. Điều chỉnh thành phần <html>

Điều chỉnh màu nền của toàn trang sang màu xám nhạt.

Hình 4

Hình 5

2. Điều chỉnh thành phần <body>

Đưa form vào giữa trang.

Hình 6

Tạo đường viền màu trắng (white) xung quanh form.

Hình 7

Hình 8

Tạo khoảng trống (rộng 20 pixels) xung quanh đường viền của form.

Hình 9

Hình 10

Để ý rằng kiểu chữ (font) của các thành phần trong form không đồng nhất, ta qui về một font (trong tập hợp font đã cho) duy nhất.

Hình 11

3. Điều chỉnh thành phần <h2>

Tạo một đường biên màu xám (gray) ngay bên dưới thành phần này.

Hình 12

Hình 13

4. Điều chỉnh thành phần <fieldset>

Loại bỏ đường biên bao quanh fieldset.

Hình 14

Hình 15

5. Điều chỉnh thành phần <label> bên trong <fieldset>

Sắp ngay ngắn và canh lề phải cho các labels.

Hình 16

Hình 17

5. Điều chỉnh thành phần nút lệnh (buttons)

Ta muốn canh cho hai buttons bên dưới thẳng hàng với các ô nhập (input text) ở bên trên. Để được như vậy, ta cần nhóm hai buttons này lại với nhau bên trong thành phần <div>, rồi canh lề trái cho thành phần <div> này.

Hình 18

Hình 19

Hình 20

6. Tạo một vài hiệu ứng khác

Để tạo chiều sâu cho form, ta đổi màu cho đường biên đáy của form từ white sang gray.

Hình 21

Hình 22

Ngoài ra, ta có thể làm cho màu nền của form sáng hơn màu nền của toàn web page bằng cách chèn một hình nền được chuẩn bị trên file đặt trong folder resources/images.

Hình 23

Hình 24

III. Tổng kết

Bài viết đã trình bày một tiến trình thiết kế form top-down, bắt đầu từ thiết kế thô, sau đó từng bước tinh chỉnh, từ tổng quát đến chi tiết, cho đến khi đạt được kết quả vừa ý. Đây là tiến trình chủ đạo cần kết hợp với các thay đổi linh hoạt cho phù hợp với tình hình thực tế. Điều này giúp người thiết kế hệ thống hóa các quyết định thiết kế của mình, nhằm hỗ trợ cho sự phát triển và bảo trì về sau.

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

  1. Jina Bolton, Tim Connell, Derek Featherstone (2009) Fancy Form Design, SitePoint.

  2. Joseph W. Lowery, Mark Fletcher (2011) HTML5 24-Hour Trainer, Wiley Publishing.

Từ khóa » Cài đặt Jsf