Cách tạo menu

Giả sử chúng ta có một plugin book-store và chúng ta muốn có một số menu:

1. Danh sách các cuốn sách.
2. Danh sách tác giả.

Chúng ta có thể mở tập tin book-store-admin-plugin/menus.properties và thêm nội dung như sau:

extensions.book_store=/book-store
extensions.book_store.books=/book-store/books
extensions.book_store.authors=/book-store/authors

Trong đó:

1. extensions: Là tên vùng hiển thị menu.
2. book_store: Là tên của menu cha, thông thường sẽ lấy tên dạng dấu gạch dưới của tên plugin.
3. /book-store, /book-store/books, /book-store/author Là URI chính xác của trang được hiển thị khi người dùng nhấn vào menu.

Sau khi export, build và chạy lại BookStoreAdminPluginStartupTest bạn sẽ thấy các menu hiện thị ở dưới cùng sidebar như sau:

Để menu có thể được nhận dạng tốt hơn, chúng ta có thể bổ sung icon cho chúng bằng cách tìm kiếm các font icon miễn phí của fontawesome phiên bản 5 hoặc ionicons v2.

Giả sử dụng ta tìm được các icon ưng ý và cập nhật nội dung tập tin menu.properties như sau:

extensions.book_store=/book-store; fas fa-book
extensions.book_store.books=/book-store/books; fas fa-list
extensions.book_store.authors=/book-store/authors; fas fa-users

Sau khi export, build và chạy lại BookStoreAdminPluginStartupTest bạn sẽ thấy các menu hiện thị ở dưới cùng sidebar như sau:

Nó đã đẹp hơn nhiều rồi đúng không?

Các vùng hiển thị menu

1. top: Nằm ở trên cùng ngay sau dưới menu media.
2. components: Nằm ở sau các menu top, hiện tại có chứa các menu Plugins, Themes, Socket App. Là vùng chuyên quản lý các menu quản trị các thành phần có trong ezyplatform.
3. . administrator: Nằm sau các menu components, hiện tại có chứa các menu Admins, Users, Settings. Là vùng chuyên quản lý các menu quản trị đặc biệt như người dùng, quản trị viên hay các cài đặt tổng thể.
4. extensions: Nằm sau các menu administrator và trước menu Logout. Là vùng dành cho các plugin ít được người dùng sử dụng thường xuyên.

Đối với các vùng 1, 2, và 3 thông thường sẽ dành cho các plugin được tạo bởi Young Monkeys hoặc plugin thường xuyên được sử dụng bởi người dùng. Khi bạn sử dụng 3 vùng này chúng tôi sẽ review rất kỹ để đảm bảo bạn không lạm dụng vị trí hiển thị nhằm mang lại trải nghiệm tốt nhất cho người dùng.

Book store là một plugin quan trọng để người dùng quản trị website bán sách nên chúng ta sẽ đưa nó lên đầu bằng cách thay đổi extension thành top như sau:

top.book_store=/book-store; fas fa-book
top.book_store.books=/book-store/books; fas fa-list
top.book_store.authors=/book-store/authors; fas fa-users

Sau khi export, build và chạy lại BookStoreAdminPluginStartupTest bạn sẽ thấy các menu của book-store hiển thị ở phía trên của sidebar.

Các menu item

EzyPlatform hiện tại chỉ cung cấp menu một mức, như bạn thấy sau tên plugin là Book Store chỉ có một mức để hiển thị các menu mà thôi. Giả sử bạn cần có các menu ở mức thứ 2 ví dụ như:

1. Thêm 1 cuốn sách.
2. Chi tiết một cuốn sách.
3. Cập nhật một cuốn sách.

Bạn có thể cập nhật tập tin menus.properties như sau:

top.book_store=/book-store; fas fa-book
top.book_store.books=/book-store/books; fas fa-list
top.book_store.books_add=~/book-store/books/add
top.book_store.books_details=~/book-store/books/{id}
top.book_store.books_edit=~/book-store/books/{id}/edit
top.book_store.authors=/book-store/authors; fas fa-users

Bạn có thể thấy rằng menu item sẽ có thêm dấu ~ trước URI và không cần phải có icon.

Sau khi export, build và chạy lại BookStoreAdminPluginStartupTest bạn sẽ thấy các menu của book-store không có gì thay đổi vì các menu item sẽ không được hiển thị trên giao diện.

Đa ngôn ngữ

Mặc định thì khi hiển thị tên menu sẽ được chuyển sang dạng viết hoa chữ cái đầu và có dấu cách, ví dụ books_add sẽ hiển thị là Books Add như vậy nó không được tư nhiên lắm, bạn có thể thay đổi chúng bằng cách thêm vào các tập tin đã ngôn ngữ ví dụ:

books_add=Add Book
books_details=Book Details
books_edit=Edit Book

books_add=Thêm sách
books_details=Chi tiết sách
books_edit=Sửa sách

Hiển thị huy hiệu

Để cho trực quan, chúng ta cũng có thể hiển thị số lượng sách, số lượng tác giả ngay trên menu bằng cách. Tạo một lớp để bổ sung thông tin cho view, ví dụ AdminBookStoreDecorator với nội dung như sau:

@EzySingleton
@AllArgsConstructor
public class AdminBookStoreViewDecorator implements ViewDecorator {

    private final AdminBookAuthorService bookAuthorService;
    private final AdminProductBookService productBookService;


    @Override
    public void decorate(HttpServletRequest request, View view) {
        Reactive.multiple()
            .register(
                "book_store.books",
                productBookService::countAllBooks
            )
            .register(
                "book_store.authors",
                bookAuthorService::countAllAuthors
            )
            .blockingConsume(it ->
                view.putKeyValuesToVariable(
                    VIEW_VARIABLE_MENUITEM_BADGES,
                    it.valueMap()
                )
            );
    }
}

Thì tương ứng số lượng sách và số lượng tác giả sẽ được hiển thị trên menu như sau:

Ví dụ đầy đủ, bạn có thể xem tại đây.