Đặ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ụ:

master-detail%201.png
  • 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ụ:

master-2-1.png

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

Slide3.PNG

Ảnh 2:Trang list.dic

Slide4.PNG

Ảnh 3:Trang hoàn thiện

Slide5.PNG

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

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

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
2016-10-21_14-52-46.png

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
d2.png
Sự thay đổi 3
s1-1.png
Kết quả
  • Sau các bước chỉnh sửa,sản phẩm ta có được như sau:
result.png

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:
s6.png

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:

s7.png

Comment