Ayuda de novato en un programa en Java con JSF

Verán que he creado una página JSF llamada registro.xhtml en donde tengo un formulario en el que ingreso los datos de una persona y las registro en un arrayList de mi ManagedBean y debajo del formulario una tabla donde voy mostrando la lista de las personas que han sido registradas.

Tengo dos ManagedBean, uno llamado Usuario.java y otro ListaUsuarios.java

Usuario.java

Código

package ManagedBean;
 
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
 
@ManagedBean
@RequestScoped
public class Usuario {
    private static int contador = 0;
    private int id;
    private String username;
    private String password;
    private String nombres;
    private String apellidoMaterno;
    private String apellidoPaterno;
    private int edad;
    private String sexo;
    private String ciudad;
 
    public Usuario() {
        this.setId(contador++);
    }
 
    public int getId() {
        return id;
    }
 
    public void setId(int id) {
        this.id = id;
    }
 
    public String getUsername() {
        return username;
    }
 
    public void setUsername(String username) {
        this.username = username;
    }
 
    public String getPassword() {
        return password;
    }
 
    public void setPassword(String password) {
        this.password = password;
    }
 
    public String getNombres() {
        return nombres;
    }
 
    public void setNombres(String nombres) {
        this.nombres = nombres;
    }
 
    public String getApellidoMaterno() {
        return apellidoMaterno;
    }
 
    public void setApellidoMaterno(String apellidoMaterno) {
        this.apellidoMaterno = apellidoMaterno;
    }
 
    public String getApellidoPaterno() {
        return apellidoPaterno;
    }
 
    public void setApellidoPaterno(String apellidoPaterno) {
        this.apellidoPaterno = apellidoPaterno;
    }
 
    public int getEdad() {
        return edad;
    }
 
    public void setEdad(int edad) {
        this.edad = edad;
    }
 
    public String getSexo() {
        return sexo;
    }
 
    public void setSexo(String sexo) {
        this.sexo = sexo;
    }
 
    public String getCiudad() {
        return ciudad;
    }
 
    public void setCiudad(String ciudad) {
        this.ciudad = ciudad;
    }
 
    @Override
    public int hashCode() {
        int hash = 5;
        hash = 47 * hash + this.id;
        return hash;
    }
 
    @Override
    public boolean equals(Object obj) {
        if (obj == null) {
            return false;
        }
        if (getClass() != obj.getClass()) {
            return false;
        }
        final Usuario other = (Usuario) obj;
        if (this.id != other.id) {
            return false;
        }
        return true;
    }
}

ListaUsuarios.java

Código

package ManagedBean;
 
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean
@SessionScoped
public class ListaUsuarios {
 
    private List<Usuario> usuarios;
    private List<String> ciudades;
 
    public ListaUsuarios() {
        usuarios = new ArrayList<>();
 
        ciudades = new ArrayList<>();
        ciudades.add("Lima");
        ciudades.add("Arequipa");
        ciudades.add("Cusco");
        ciudades.add("Tacna");
        ciudades.add("Tumbes");
        ciudades.add("Madre de Dios");
    }
 
    public List<Usuario> getUsuarios() {
        return usuarios;
    }
 
    public void setUsuarios(List<Usuario> usuarios) {
        this.usuarios = usuarios;
    }
 
    public void agregaUsuario(Usuario usuario) {
        usuarios.add(usuario);
    }
 
    public void eliminaUsuario(Usuario usuario) {
        usuarios.remove(usuario);
    }
 
    public List<String> getCiudades() {
        return ciudades;
    }
 
    public void setCiudades(List<String> ciudades) {
        this.ciudades = ciudades;
    }    
}

El problema lo tengo en mi página JSF llamada registro.xhtml en donde si lo hago de esta manera no tengo ningún problema, los datos se van guardando y apareciendo correctamente en la pantalla:

Código

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Data Table</title>
    </h:head>
    <h:body>
        <h:form>
            <h:panelGrid columns="2">
                <h:outputLabel for="txtValor" value="Valor:"/>
                <h:inputText id="txtValor" value="#{dato.valor}" label="Valor" required="true"/>
 
                <h:outputLabel for="txtNombre" value="Nombre:"/>
                <h:inputText id="txtNombre" value="#{dato.nombre}" label="Nombre" required="true"></h:inputText>
 
                <h:outputLabel for="btnAgregar"/>
                <h:commandButton id="btnAgregar" action="#{holaMundo.addValor(dato)}" value="Añadir"/>
            </h:panelGrid>
        </h:form>
        <h:dataTable id="tabla" value="#{holaMundo.datos}" var="dato">
            <h:column>
                <f:facet name="header">
                    <h:outputText value="valor"/>
                </f:facet>
                <h:outputText value="#{dato.valor}"/>
            </h:column>
            <h:column>
                <f:facet name="header">
                    <h:outputText value="Nombre"/>
                </f:facet>
                <h:outputText value="#{dato.nombre}"/>
            </h:column>
            <h:column>
                <h:form>
                    <h:commandButton id="btnBorrar" value="Borrar" action="#{holaMundo.removeValor(dato)}"/>
                </h:form>
            </h:column>
        </h:dataTable>
        <br/>
 
 
    </h:body>
</html>

Como se ve en el código de la página registro.xhtml primero hay un dataTable y segundo un formulario, pero si es que ahora cambio el orden de ambos controles, y primero pongo el formulario y luego el dataTable, el programa no funciona de forma correcta.

Si cambio a esto:

Código

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Data Table</title>
    </h:head>
    <h:body>
        <h:dataTable id="tabla" value="#{holaMundo.datos}" var="dato">
            <h:column>
                <f:facet name="header">
                    <h:outputText value="valor"/>
                </f:facet>
                <h:outputText value="#{dato.valor}"/>
            </h:column>
            <h:column>
                <f:facet name="header">
                    <h:outputText value="Nombre"/>
                </f:facet>
                <h:outputText value="#{dato.nombre}"/>
            </h:column>
            <h:column>
                <h:form>
                    <h:commandButton id="btnBorrar" value="Borrar" action="#{holaMundo.removeValor(dato)}"/>
                </h:form>
            </h:column>
        </h:dataTable>
        <br/>
 
        <h:form>
            <h:panelGrid columns="2">
                <h:outputLabel for="txtValor" value="Valor:"/>
                <h:inputText id="txtValor" value="#{dato.valor}" label="Valor" required="true"/>
 
                <h:outputLabel for="txtNombre" value="Nombre:"/>
                <h:inputText id="txtNombre" value="#{dato.nombre}" label="Nombre" required="true"></h:inputText>
 
                <h:outputLabel for="btnAgregar"/>
                <h:commandButton id="btnAgregar" action="#{holaMundo.addValor(dato)}" value="Añadir"/>
            </h:panelGrid>
        </h:form>
    </h:body>
</html>

Se registran los usuarios pero sus datos están vacíos. No entiendo por qué de esta segunda forma no funciona. Además creo que el programa se vería mejor de la segunda forma pero así no funciona o.O