Gerenciando Atalhos do Sistema

Existem diversos exemplos de atalhos para facilitar a navegação do sistema, por exemplo, o próprio JIRA, mostra um painel com todas as ações possíveis. Com o Jmine você também consegue cadastrar atalhos de acesso à páginas ou atalhos que vão disparar um determinado comportamento no contexto de uma página. Veja um exemplo de painel de atalhos:

../../_images/Shrotcuts.png

Atalhos de acesso a páginas

No menu factory de sua aplicação, é comum criar uma instância do MenuConfig para adicionar suas páginas ao menu:

protected MenuConfig createMenuConfig() {
        MenuConfig menu = new MenuConfig();
        menu.addPage(SearchDataSourceRegistry.class, "Cadastro", "Banco de Dados");
        menu.addPage(SearchStoredComparisonStrategy.class, "Cadastro", "Comparação");
        menu.addPage(SearchProject.class, "Cadastro", "Projetos");
        return menu;
}

O cada chamada ao método addPage, retorna um MenuConfigItem, que agora possui um método withShortcut. Para adicionar atalhos a páginas chave de seu sistema basta utilizar este método, passando as teclas de acesso ao atalho e sua descrição:

protected MenuConfig createMenuConfig() {
        MenuConfig menu = new MenuConfig();
        menu.addPage(SearchDataSourceRegistry.class, "Cadastro", "Banco de Dados").withShortcut("c, b", "Cadastrar um novo banco");
        menu.addPage(SearchStoredComparisonStrategy.class, "Cadastro", "Comparação");
        menu.addPage(SearchProject.class, "Cadastro", "Projetos");
        return menu;
}

Como definir atalhos

Utilizamos o plugin jwerty para realizar o bind dos atalhos, você pode ler o readme para descobrir as teclas que podem ser utilizadas, mas de uma forma simplificada é possível combinar as teclas:

  • shift
  • ctrl
  • letras e números
  • +: para combinar teclas, “shift+a” vai disparar quando ‘shift’ e ‘a’ forem pressionados ao mesmo tempo
  • ,: vai encadear as chamadas ‘a, b’ vai disparar quando o usuário digitar ‘a’, e em seguida ‘b’
  • /: permite cadastrar mais de um atalho para a mesma função. “a/b” vai disparar se o usuário digitar ‘a’ ou ‘b’

Para simplificar o processo de criação de atalhos, criamos o ShortcutBuilder, veja o exemplo de criação de um atalho:

/**
* {@inheritDoc}
*/
@Override
public void renderHead(IHeaderResponse response) {
        super.renderHead(response);
        response.renderJavaScript(aSystemShortcut().withKeys("shift+a").willCallback("myCallback").build(), null);
        response.renderJavaScript(aPageShortcut().withKeys("g").orWithKeys("h").willCallback("function() { alert('a or b pressed!'); }").build(), null);
}

No exemplo acima, estamos criando um atalho acionado por ‘shift’ e ‘a’, que chamará uma função de JS chamada “myCallback” e um outro atalho que vai mostrar um popup quando o usuário apertar ‘g’ ou ‘h’;

Atalhos de Sistema e de Página

Repare, no exemplo acima, que criamos dois tipos de atalhos:

  • Sistema: atalhos gerais, disponíveis em qualquer lugar. Atalhos criados com o método ‘withShortcuts’, por exemplo, entram neste contexto. Use este tipo de atalho quando você quiser que as ações fiquem sempre disponíveis para seus usuários, além de carregá-los em um componente sempre presente no sistema, como por exemplo, o header.
  • Página: atalhos para o contexto de uma página. Eles só serão carregados e, consequentemente listados, quando o usuário estiver em uma página específica. Um exemplo de uso, seria criar atalhos para o Cockpit para adicionar ou remover paineis.

É necessário tomar cuidado ao definir os seus atalhos. Alguns navegadores permitirão que você capture atalhos de sistema, por tanto, embora ‘alt+f4’ funcione no firefox, não há garantias de que funcionará nos demais. Sempre que definir um atalho, teste-o em mais de um navegador para garantir que eles estão realmente acessíveis.

FAQ

  • Criei um atalho sem descrição, e ele não aparece na listagem

Por padrão, atalhos sem descrição não são renderizados, embora continuem ativos. Não há motivos para exibi-lo se o usuário não consegue descobrir o que ele faz.

  • Esta funcionalidade vai atrapalhar a edição dos campos?

Não. Quando as teclas de atalho forem acionadas de dentro de um input/textfield/select, os eventos serão ignorados e nada acontecerá.