Como trocar o foco entre campos que aparecem e desaparecem na tela

Problema:
Um combo cuja escolha de item muda a visibilidade de dois campos (ora um ora outro fica visível).
Os itens do combo são dinâmicos (não dava para fazer um javascript direto) e o usuário necessita que o campo visível tenha foco para edição imediata.


*Problem:
I needed a page which a combobox value's choice affects the visibility of two fields. Each option shows one field and hides the other.
The combo's items are dynamic, and the user needed the visible field to be focused.


------------------------------------------------------------------------------------
Solução:
A visibilidade dos campos é controlada pelo Managed Bean MyMB.
A escolha entre as entrada é feito pela SelectOneMenu. O valueChangeListener é o método no bean que trata a mudança na escolha, e o evento onchange submete o form para que o método seja chamado. Outra solução seria usar um combo Ajax, que não necessita de submissão explícita.
O javascript é controlado por uma variável do bean, a mesma de visibilidade do campo (se o campo está visível, então ele deve ser o foco). A jsValueSet cuida da variável, transformando a "variável bean" mostraChave na "variável da página" mostrar.


*Solution:
The fields visibility is controled by the backing bean (managed bean), called MyMB, with the variable mostraChave. 
The valueChangeListener in the SelectOneMenu calls the exibirSenhas bean method, when the choosen value changes. The onchange event makes the submit. It could be used an Ajax combobox, that doesn't need explicit submission.
The javascript focus function needs the backing bean variable, which transformation is handled by the jsValueSet tag, into the page variable mostrar.


----------------------------------------------------------------------------------
Minha página (trecho):
*JSF Page (codepiece):

<h:form id="myForm">
<h:selectOneMenu value="#{myMB.tipo}" immediate="true"
valueChangeListener="#{myMB.exibirSenhas}" onchange="submit()"
        reRender="label1,campo1, label2, campo2">
      <f:selectItems value="#{myMB.tiposSenha}" />
</h:selectOneMenu>

<br/>
<h:outputLabel id="label1" value="Chave" rendered="#{myMB.mostraChave}" for="campo1"/>
<h:inputText id="campo1" maxlength="11" value="#{myMB.chave}">

<br/>
<h:outputLabel id="label2" value="Codigo" rendered="!#{myMB.mostraChave}" for="campo2"/>
<h:inputText id="campo2" maxlength="15" value="#{myMB.codigo}">

<br/>
<h:outputLabel  value="Usuario" for="campo3"/>
<h:inputText  maxlength="6" value="#{myMB.usuario}">

<br/>
<h:commandButton value="Enviar"  action="#{myMB.loginDireto}" />
</h:form>

<!-- variavel "javascript" ligada a uma variavel no bean -->
<t:jsValueSet name="mostrar" value="#{myMB.mostraChave}"/> 

<script>
setaFoco(mostrar);
function selectField(item){
document.getElementById(item).focus();
document.getElementById(item).select();
}
 function setFocus(mostrarRef){
     if (mostrarRef==true){
     selectCampo('myForm:campo1');
     }
     else{
     selectCampo('myForm:campo2');
     }
</script>

------------------------------------------------------------------------------------
Meu Bean (trecho):
*myMB (codepiece):

private boolean mostraChave;
public void setMostraChave(boolean mostraChave) {
this.mostraChave = mostraChave;
}
public boolean getMostraPeriodo() {
exibirSenhas(null); //Refresh value
return mostraChave;
}
public void exibirSenhas(ValueChangeEvent e) {
if (tipo.equals(TipoSenha.CHAVE)) {
mostraChave = true;
} else {
mostraChave = false;
}
}

-------------------------------------------------------------------------------------