Đặt vấn đề

Các khó khăn khi làm các trang detail đơn lẻ

• Có quá nhiều thông tin muốn hiển thị trên 1 trang,nhưng không đủ diện tích để hiển thị hoặc đủ hiển thị nhưng gây sự khó khăn cho người dùng.

Hình ảnh dưới đây là 1 ví dụ:

• Không thể hiện được các mối liên kết giữa các dữ liệu có liên quan đến nhau

Lợi ích của master-detail mang lại.

• Các dữ liệu liên quan được bố trí vào các tab liền kề nhau,thể hiện sự liên kết với dữ liệu đang lựa chọn

Hình ảnh dưới đây là 1 ví dụ:

Các tab liền kề là danh sách các tài khoản sử dụng,mầu tin nhắn của brandname

• Hiện thỉ được nhiều thông tin,giảm thiểu việc phải có nhiều thao tác để làm 1 công việc

Sản phẩm-Hình ảnh minh họa

Ảnh 1:Thông tin detail-Khi chưa có các tab

Ảnh 2:Trang list.dic

Ảnh 3:Trang hoàn thiện

Các bước làm: Step By Step

• Các bước làm cơ bản cho 1 trang master-detail

Bước 1: Gen các file cần thiết

• Về tạo các file danh mục,bạn có thể tham khảo tại đây

Bước 2: Làm trang detail theo giao diện

Ta có sự thay đổi giữa 2 file mới và cũ như sau
* Lưu ý ta có quy định về màu sắc như sau:

1. Màu cam: Thêm mới
2. Màu đỏ: xóa bỏ

Sự thay đổi 1

Trong đó:

• Đoạn code dưới là cách gọi giao diện theo dạng master detail

ModuleName==com.ftl.wakui.ly_page
# Tell the application to use master_detail.jsp
View==/include/master_detail.jsp

• Đoạn code dưới là cách khai báo các tab

# Declare list of child page
Child
    FK_LYPE_LYPG==list_page_entry.jsp
        LinkParameter==LY_PAGE_ID

# Size of the popup for modifying
Popup
    Width==640
    Height==360

Sự thay đổi 2

Sự thay đổi 3

Kết quả

• Sau các bước chỉnh sửa,sản phẩm ta có được như sau:

Bước 3: Chỉnh sửa các tab liên quan

• Copy các file được gen ra từ CRUD hướng dẫn tại đây vào cùng 1 cây thư mục với file detail.dic vừa được chỉnh sửa.
• Ta có sự thay đổi giữa code cũ và code mới như sau:

Bước 4:Kiểm tra và kết quả

Kết quả ta đạt được 1 trang có nội dung và giao diện như sau:

Comment