Xây dựng chương trình ứng dụng
3.2.Thiết kế giao diện chương trình ứng dụng
3.2.1. Thiết kế tổng quát
Dựa trên các phân tích thiết kế ở bên trên thì chương trình phần mềm cần có màn hình hiển thị các chức năng chính như sau:
- Màn hình chính tìm kiếm nhân viên.
- Màn hình chính hiển thị danh sách nhân viên. - Màn hình hiển thị thông tin của một nhân viên.
- Màn hình hiển thị các direct reports của một nhân viên. 3.2.2. Thiết kế chi tiết
Dựa vào thiết kế tổng quát, ta thiết kế cho phần mềm các màn hình chính sau: 3.2.2.1. Màn hình tìm kiếm nhân viên
Khi chương trình khởi động, màn hình chính sẽ hiện thị cho phép người sử dụng tìm kiếm nhân viên. Khi người sử dụng thự hiện thao tác nhập ký tự bất kì vào ô search box thì màn hình sẽ được phóng to ra để chuẩn bị thao tác nhập và tìm kiếm.
Hình 17: Màn hình tìm kiếm nhân viên
3.2.2.2. Màn hình hiển thị danh sách các nhân viên theo từ khóa tìm kiếm
Khi người dùng nhập một ký tự bất kỳ vào ô tìm kiếm, màn hình sẽ hiển thị danh sách nhân viên có liên quan đến từ khóa tìm kiếm đó.
Hình 18: Màn hình hiển thị danh sách nhân viên
3.2.2.3. Màn hình hiển thị thông tin chi tiết của một nhân viên
Như đã thấy ở màn hình trên, ta biết đượ thông tin cơ bản: Họ tên, vị trí làm việc trong công ty và ảnh nhận diện, ngoài ra còn biết được số nhân viên mà người này quản lý trực tiếp (chính là số trong ô nhỏ bên phải). Nếu muốn biết thông tin của nhân viên nào, người dùng thao tác chạm vào nhân viên đó, màn hình thông tin chi tiết của nhân viên này sẽ được hiển thị. Ví dụ so sánh chọn James King (là tổng giám đốc của công ty kiêm CEO), và Diem Nguyen Van (là Developer of Sofware trong công ty).
Hình 19: Màn hình hiển thị thông tin chi tiết của một nhân viên
Như có thể thấy, tùy vào vị trí làm việc trong công ty mà các nhân viên có thông tin khác nhau đôi chút. Như trên, vì James King là president của công ty nên sẽ không có thông tin về manager của ông ta. Trong khi Diem Nguyen Van có cả thông tin về manager và direct reports. Nếu nhân viên nào không có direct reports (ví dụ nhân viên cấp thấp nhất) thì cũng sẽ không có thông tin về direct reports.
Nếu ta thao tác chạm vào 2 thông tin này thì màn hình sẽ chuyển sang để xem thông tin về manager hay xem các direct reports tương ứng.
Hình 20: Màn hình thể hiện chức năng View Manager và View Direct Reports của nhân viên (Diem Nguyen Van).
Trong quá trình thao tác các chức năng, người dùng có thể luôn luôn quay trở lại trang Home nếu muốn. Chỉ cần thao tác trực tiếp vào nút Home bên tay trái cùng thanh bar là màn hình sẽ chuyển về màn hình chính ban đầu ngay lập tức. Ngoài ra nếu muốn quay lại trang trước thì chỉ cần thao tác với nút back mà thiết bị di động đã hỗ trợ.
3.2.2.4. Màn hình thao tác các chức năng liên lạc nhanh và chức năng được hỗ trợ của Phonegap.
Người dùng có thể liên lạc nhanh với nhân viên bằng cách thao tác chạm với các chức năng tương ứng: gửi email, gọi điện cơ quan, gọi điện thoại cá nhân hay gửi sms. Đồng thời nếu muốn thực hiện các chức năng được hỗ trợ bởi APIs của Phonegap như: Add Location, Add to Contacts, hay Change Picture thì người dùng cũng chỉ cần thao tác chạm với chức năng tương ứng.
Hình 21: Màn hình thể hiện chức năng liên lạc nhanh (call office cell) và chức năng được hỗ trợ bởi APIs Phonegap (change picture)
Chương 4