Thử sức thiết kế giao diện người dùng với Java

Trước khi đi vào điều chính, xin được "lạc đề" một chút: tuần rồi có bạn email hỏi tớ làm sao tớ xắp xếp được thời gian của mình để có một weblog riêng như hiện tại. Nói thật là … tớ chưa hề quản lý được thời gian của mình. Cách đây gần 2 tháng, tớ có rất nhiều thời gian rảnh đến nổi không cần "xắp xếp" gì cũng có thể cập nhật nguoitapviet mỗi ngày … vài lần. Còn giờ đây, tớ thậm chí không có thời gian để mà xắp xếp. Buồn cười là có khi cả 3, 4 ngày vừa qua tớ thậm chí còn không vào trang của chính mình! Thật đáng buồn. Nhưng dù sao thì cũng sắp vào học lại - và khi đó có lẽ sẽ nghĩ làm. Hi vọng lúc đó tớ sẽ có dịp thực hành cái gọi là "xắp xếp thời gian" :).

Lạc đề thêm chút nữa. Câu nói hay nhất tuần vừa rồi tớ gặp phải là câu nói của Greg Raleigh, cha đẻ của công nghệ đứng đăng sau chuẩn không dây 802.11n Wi-Fi sắp ra mắt, đại ý là:

Quá đúng. Mà cũng không đúng, bởi thật ra thì bản thân quá trình "chọn lựa" cũng là một vấn đề (mà như Greg nói, giải quyết vấn đề không khó). Mà đã có câu nói hay thì ắt cũng sẽ có câu nói dở nhất. Câu nói dở nhất mà tớ gặp là:

Câu trả lời trên là của ca sĩ Hồ Quỳnh Hương trong bài phỏng vấn gần đây của báo Người Lao Động (trích đăng trên VietnamNet tại đây). Chẳng biết nhạc sĩ Hà Dũng nghĩ gì khi nghe câu trả lời này? Nhưng dù sao thì đó cũng là chuyện bình thường bởi theo tớ khi yêu ai chẳng sợ mất người mình yêu. Nhưng cái cách trả lời của Hồ Quỳnh Hương thật tạo cái cảm giác không thân thiện nổi chút nào. Dù điều đó đúng thì cũng chỉ nên biết vậy mà giữ cho mình, đằng này… Gặp tớ có lẽ tớ … bỏ :). Nói chung thì qua các bài phỏng vấn trên báo, tớ chỉ thích cách trả lời của Hồng Nhung và Mỹ Tâm. Cách trả lời của Hồng Nhung tuy có vẻ hơi "quá sắc sảo", nhưng có lẽ đó thật sự là con người Hồng Nhung, không phải do cô "uốn lưỡi bảy lần". Cách trả lời của Mỹ Tâm tuy có vẻ hơi mang tính chất "chuẩn bị trước", nhưng ít ra vậy vẫn tốt hơn.

Sự kiện thú vị nhất tuần vừa rồi trên Internet theo tớ có lẽ là việc Google cho ra bản Gmail tiếng Việt! Bản Gmail Việt hóa thật hoàn hảo - từ cách chọn thuật ngữ cho đến cách nó hài hòa với giao diện (không giống như bản Yahoo tiếng Việt). Tớ có lẽ sẽ giới thiệu Gmail cho ba mẹ tớ :).

Phần còn lại của bài viết này là về một kinh nghiệm của tớ về thiết kế giao diện người dùng với ngôn ngữ lập trình Java. Xem tiếp nếu bạn có hứng thú…

Thiết kế giao diện người dùng với Java

Tớ vẫn thường xuyên nghĩ rằng Java tệ nhất là về phần thiết kế giao diện người dùng (quả thật rất khó để một chương trình viết bằng Java có giao diện người dùng đẹp như các ứng dụng Windows khác). Tuy nhiên, vừa qua, như một bài tập nhỏ của khóa tớ đang học tại trường trong hè (Software Engineering 311 - Principles of Software Engineering), tớ đã tự làm mình ngạc nhiên (và vui sướng) khi lần đầu tiên tạo được một ứng dụng bằng Java đúng như những ý tưởng trong đầu của mình trước khi làm.

Đề bài nói gọn lại là thiết kế một ứng dụng cho phép người dùng nhập một biểu thức toán học bất kỳ. Chương trình sẽ kiểm tra xem nó có đúng cấu trúc hay không (thứ tự dấu ngoặc kép,…) và tính toán giá trị của biểu thức đó. Chương trình phải có khả năng lưu lại 20 biểu thức cuối cùng người dùng nhập vào giữa các lần chạy, phải cho phép người dùng chọn và sửa lại bất kỳ biểu thức nào trong 20 biểu thức đó (và tất nhiên phải có khả năng thêm vào biểu thức mới).

Nếu bạn tò mò muốn biết một bài tập bên này được ra như thế nào, xem chi tiết đề bài tại đây. Bài tập này chiếm 8% điểm khóa học, làm trong 4-5 ngày. Nên nhớ đây là khóa học dành cho những sinh viên chỉ mới học một khóa về Java, nghĩa là trừ khi bạn đã học trước, bạn chỉ biết đến Java qua một khóa học khi học khóa học này.

Đề bài thật sự không có gì, có chăng chỉ là phần làm thế nào để có thể kiểm tra cấu trúc của một biểu thức và tính ra giá trị - nhưng thật sự thì nó cũng không quá phức tạp (cái mục đích chính của phần này là để làm quen với JUnit và quá trình giả lập các hành vi tương tác của người dùng để kiểm lỗi). Cái mà tớ quan tâm chính khi làm bài tập này là nên thiết kế giao diện của ứng dụng như thế nào để: 1) đáp ứng đúng những yêu cầu của đề bài, 2) thuận tiện nhất cho người dùng, 3) đẹp.

Tất nhiên, yêu cầu thứ nhất thì quá dễ, khỏi cần suy nghĩ cũng có thể tạo ra một giao diện cơ bản nhất đáp ứng được yêu cầu của đề bài. Cái vấn đề thứ 2 thì khó hơn một chút, nhất là chỗ nên xắp xếp như thế nào để người dùng có thể sửa biểu thức cũ, đồng thời thêm biểu thức mới một cách trực quan nhất (tức là, nhìn vào là có thể biết làm thế nào để thực hiện tác vụ mình muốn). Khó hơn nữa chính là cái mục tiêu thứ 3: đẹp.

Sau một đêm thức trắng ngồi đọc đi đọc lại chương Swing trong cuốn Core Java, lục trong tài liệu Java API trên trang của Sun và ngồi "hack" cái giao diện, cuối cùng tớ đã đi đến một kết quả mà làm chính tớ ngạc nhiên (bạn có ngạc nhiên không thì tớ … không biết, nhưng tớ thật sự thích cái giao diện này. Có thể tớ đang "mèo khen mèo dài đuôi" :)):

Những tính năng của chương trình bọn tớ viết (tớ làm bài này chung với một người bạn):

1. Giao diện "aqua". Cái này tớ bắt chước cách mà iTunes phân cách các dòng với nhau bằng cách sử dụng màu trắng-xanh. (hehe, tớ mất khá nhiểu thời gian để nghĩ ra cách làm sao để có được cái giao diện danh sách scroll-list như vậy)

2. Cập nhật trực tiếp: Cho phép bạn nhấn chuột vào một biểu thức bất kỳ và nó sẽ chuyển thành một textfield cho phép bạn sửa đổi nội dung biểu thức (và tất nhiên, kết quả cũng sẽ cập nhật theo).

3. Tính năng "spotlight", hay còn gọi là "live-search" (tìm kiếm theo thời gian thực): đây là tính năng thú vị nhất mà tớ thử nghiệm. Hệ điều hành MacOS X (và cả trong iTunes) giới thiệu tính năng tìm kiếm theo thời gian thực: bạn gõ một ký tự và danh sách sẽ tự thu ngắn lại những kết quả thỏa mãn những gì bạn vừa gõ vào. Gõ thêm một ký tự nữa và danh sách lập tức thu ngắn tiếp lại… Chương trình của bọn tớ cũng có tính năng tương tự: khi bạn bắt đầu gõ biểu thức vào ô dưới cùng, danh sách ở trên cũng sẽ tự động thu ngắn lại theo những gì bạn gõ vào cho phép bạn biết được liệu biểu thức bạn sắp gõ vào đã có chưa. Nếu như nó là biểu thức mới chưa có trong danh sách, cửa sổ sẽ quay về danh sách mặc định.

Bạn có thể tải về và chạy thử chương trình (toàn bộ trong một file thực thi có phần mở rộng jar. Bạn giải nén vào cùng một thư mục và chạy file Calculator.jar. Bạn sẽ cần máy ảo Java - Java Virtual Machine - để chạy):

Tớ không chắc là những thứ trên có "hay" chút nào không hay là quá "tầm thường" với bạn, nhưng đối với tớ, một người mới làm quen với Java chưa lâu thì cái cảm giác sau khi hoàn thành các tính năng này thật … "tự hào" :). Trong quá trình thiết kế, tớ đã để ý đến rất nhiều những chi tiết nhỏ (ví dụ như cách chương trình "highlight" biểu thức mới nhất,…). Nói chung, những gì đề bài yêu cầu chỉ chiếm 30% thời gian, phần còn lại chỉ là cho cái giao diện và những tính năng phụ thêm :).

Chạy thử chương trình và góp ý cho tớ những gì còn thiếu hoặc chưa hay nhé :)