Powrót do strony głównej

Paleta poleceń JMatrixPlatform do nawigacji UI

W artykule opisano implementację palety poleceń w JMatrixPlatform, inspirowaną VSCode. Wykorzystano istniejące JCommand z hashtagami do wyszukiwania i filtrowania. Podejście przyspiesza nawigację w systemach wielomodułowych bez zmiany struktury UI.

Jak paleta poleceń rozwiązuje chaos UI w JMatrixPlatform
Advertisement 728x90

Paleta komend w JMatrixPlatform: rozwiązanie problemu nawigacji w systemach wielomodulowych

Systemy wielomodulowe, takie jak JMatrixPlatform, napotykają problem przeciążenia interfejsu użytkownika: setki komend, przycisków i zakładek utrudniają nawigację nawet administratorom. Inspirowane paletą komend w VSCode, zaimplementowano uniwersalne rozwiązanie — jednolity pasek wyszukiwania dostępnych komend użytkownika. Redukuje to zależność od hierarchicznych menu i przyspiesza dostęp do funkcji.

Klasyczny problem nawigacji

W systemach z dziesiątkami modułów strona główna jest zapełniona skrótami, kategoriami i podmenu. Użytkownik z dostępem do 10+ procesów traci czas na szukanie: Strona główna -> Moje działania -> Zarządzanie wymaganiami -> Podział. Instrukcje są obowiązkowe: "Rozwiń kategorię A, przejdź do B, kliknij C".

Komendy administracyjne (aktualizacja pamięci podręcznej, synchronizacja, raporty) są szczególnie problematyczne — trudno je umieścić i zapamiętać. Wszystkie rozwiązania sprowadzają się do grupowania, które maskuje funkcjonalność.

Google AdInline article slot

Idea z VSCode

Paleta komend VSCode — to dostęp klawiaturowy do każdej funkcji IDE poprzez wyszukiwanie po nazwie. Eliminuje spory o umieszczenie elementów UI i zapewnia natychmiastowe wywołanie.

W JMatrixPlatform architektura jest już gotowa: każde działanie UI to JCommand z href, label, description i uprawnieniami dostępu. Komendy tworzą stronę główną, paski narzędzi, panele.

Przykład komendy Projekty:

Google AdInline article slot
@JModelPart
public final class ACDProjectsDesk extends JCommand {
  public static ACDProjectsDesk COMMAND = new ACDProjectsDesk();

  @Override
  public JHref getHref(JContext ctx, JRequestParams requestParams) {
    return new JHrefTable(
        ATBProjectsDesk.TABLE,
        JTarget.CONTENT,
        Actions.TOOLBAR,
        null,
        AIQProjectsAll.INQUIRY,
        JHrefTable.RowSelection.MULTI);
  }
}

Lokalizacja w messages_pl.properties:

pl.demo.matrix.schema.ui.command.ACDProjectsDesk=Projekty

Implementacja z hashtagami

Dla palety dodano hashtagi — filtr dostępu i wyszukiwanie semantyczne po synonimach ("firmy" -> "organizacje").

@Override
public Set<String> getHashTags() {
  return Set.of(
    "obieg dokumentów",
    "demonstracja",
    "projekty",
    "zestawy");
}

Kontroler zwraca listę dostępnych komend:

Google AdInline article slot
@GetMapping("/navigator/paletteCommands")
public ResponseEntity<List<JDTOCommand>> getCommands(
    @JPathContextVariable JContext ctx,
    @RequestParam Map<String, String> requestParamsMap) {
  
  JRequestParams requestParams = new JRequestParams(requestParamsMap);

  Set<JCommand> commands = JModel.getAdminListByClass(JCommand.class);

  List<JDTOCommand> results = commands
      .stream()
      .filter(cmd -> cmd.getHashTags() != null && !cmd.getHashTags().isEmpty() && cmd.show(ctx, requestParams))
      .map(cmd -> new JDTOCommand(ctx, requestParams, cmd))
      .toList();

  return ResponseEntity.ok(results);
}

Filtrowanie na UI dla szybkości (do 1000 komend). Przykład JSON:

[
   {
      "name":"ACPersonDesk",
      "description":"Rejestr użytkowników platformy",
      "label":"Użytkownicy",
      "icon":null,
      "settings":{},
      "href":{
         "url":"../table/ATBPersonDesk",
         "requestParams":{
            "toolbar":"AMPersonDeskTableActions",
            "rowSelection":"MULTI",
            "inquiry":"AIQPersonsDesk",
            "target":"CONTENT"
         }
      },
      "hashTags":["użytkownicy", "struktura przedsiębiorstwa"]
   }
]

Wyszukiwanie po "projekty" natychmiast otwiera odpowiedni href, niezależnie od głębokości menu.

Zalety podejścia

  • Szybki dostęp: wyszukiwanie po label, description, hashtagach.
  • Kontekst: hashtagi dodają synonimy i filtrują relewantne komendy.
  • Uniwersalność: działa dla przeglądania komponentów i bezpośrednich działań.
  • Skalowalność: niezależna od struktury UI, odpowiednia dla 100+ modułów.
  • Wydajność: serwer zwraca listę, klient filtruje natychmiast.

Paleta uzupełnia menu, nie zastępując go. Administratorzy uzyskują szybki dostęp do rzadkich funkcji bez instrukcji.

Co jest ważne

  • Architektura JCommand pozwala na trywialną implementację palety bez refaktoringu.
  • Hashtagi rozwiązują filtrowanie i semantykę wyszukiwania jednocześnie.
  • Filtrowanie na kliencie zapewnia responsywność przy 1000+ komendach.
  • Paleta zmniejsza obciążenie poznawcze w ekosystemach wielomodulowych.
  • Odpowiednia dla systemów inżynierskich z konserwatywnymi użytkownikami.

— Editorial Team

Advertisement 728x90

Czytaj dalej