JSF: atalhos do SelectOneradio para opções

StackOverflow https://stackoverflow.com/questions/2461588

Pergunta

Eu tenho o seguinte h:selectOneRadio:

<h:selectOneRadio id="#{prefix}_rating" value="#{examinationPanel.tempResult}" >
<f:selectItems value="#{examinationPanel.options}"></f:selectItems>
</h:selectOneRadio>

E então o feijão de apoio está carregando as opções com base em algumas preferências do usuário:

public List<SelectItem> loadOptions (Set<ResultEnum> possibleResults){
    List<SelectItem> options = new ArrayList<SelectItem>();
    for(ResultEnum result:possibleResults){
        SelectItem option = new SelectItem(result,messages.getString(result.name()));
        options.add(option);
    }
    return options;
}

Como posso definir atalhos para as opções no grupo de rádio? Por exemplo, digitando "1" seleciona a primeira opção, digitando "2" o segundo, etc ...

Desde já, obrigado! ps. Estou usando o JSF 1.2, Richfaces, PrimeFaces e Facelets.

Foi útil?

Solução

Isso não é por padrão embutido. Seu melhor resort é usar JavaScript. Anexe uma função ao keypress evento do <body>, Verifica a keyCode da tecla pressionada e alterar o selected Item do menu suspenso de acordo. Isso é factível em apenas algumas linhas usando jQuery. Aqui está um Sscce, apenas copie'n'paste'n'run.

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2461588</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('body').keypress(function(e) {
                    var index = parseInt(String.fromCharCode(e.keyCode));
                    if (0 < index && index < 10) {
                        $('#dropdown option').eq(index - 1).attr('selected', true);
                    }
                });
            });
        </script>
    </head>
    <body>
        <select id="dropdown">
            <option>option1</option>
            <option>option2</option>
            <option>option3</option>
            <option>option4</option>
            <option>option5</option>
            <option>option6</option>
            <option>option7</option>
            <option>option8</option>
            <option>option9</option>
        </select>
    </body>
</html>

Se você deseja suportar 10 ou mais itens, precisará manter uma pilha de teclas pressionadas, aplique -a imediatamente e introduzir um tempo limite para redefinir a pilha (1 segundo?).

Outras dicas

Você pode investigar se <rich:hotKey> ajudaria. Em suma, permite definir atalhos de teclado, mas pode exigir algum conhecimento jQuery.

PrimeFaces Hotkey também pode ajudar.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top