FacesComponent works in one page but doesn't in others (retrieves null from ajax event)

I don't know if there's a solved question for that. If so, I wasn't able to find it.

I'm creating a composite component with two SelectOneMenu that fires an event. The thing is that this component works in one jsf but doesn't in others.

The component is inside three different xhtml. In all of them the event is fired when I change the value of the first SelectOneMenu, but only in one of the xhtml the value of the SelectItem is not null. In the rest of them, the retrieved value is "null"

 //In p001DatosNotificacion.xhtml, it retrieves the selected value of the selectonemenu (b, for example)
 //In the others it retrieves null

 UISelectOne oneVoewl = (UISelectOne)event.getSource();
 System.out.println("One Voewl > " + oneVoewl.getValue());

Can anyone help me and tell me where I'm making the mistake(s)?

Thanks in advance!

The code

Component backing bean

@FacesComponent(value="letterExample")
public class LetterExample extends UINamingContainer{

    public void voewlAjaxListener(AjaxBehaviorEvent event){
        UISelectOne oneVoewl = (UISelectOne)event.getSource();
        System.out.println("One Voewl > " + oneVoewl.getValue());

    }

Composite component (Note: I'm using an existing bean for testing)

<cc:interface componentType="letterExample" >
    <cc:attribute name="bean" type="es.ccasa.sgnx.business.bean.Direccion" />
</cc:interface>


<cc:implementation>

    <p:selectOneMenu id="oneMenuVoewl" value="#{cc.attrs.bean.codigoPais}" 
        binding="#{cc.uiSelectOneVoewl}" >
            <f:selectItem itemLabel="Aaaa" itemValue="a" />
            <f:selectItem itemLabel="Eeee" itemValue="e" />
            <f:selectItem itemLabel="Iiii" itemValue="i" />
            <f:selectItem itemLabel="Oooo" itemValue="o" />
            <f:selectItem itemLabel="Uuuu" itemValue="u" />
        <p:ajax event="change"  listener="#{cc.voewlAjaxListener}" update="consonantWrapper" />
    </p:selectOneMenu>

    <h:panelGroup id="consonantWrapper" layout="block">
        <p:selectOneMenu id="oneMenuConsonant"  value="#{cc.attrs.bean.codigoProvincia}"
            binding="#{cc.uiSelectOneConsonant}">
                <f:selectItem itemLabel="Bbbb" itemValue="b" />
                <f:selectItem itemLabel="Cccc" itemValue="c" />
                <f:selectItem itemLabel="Dddd" itemValue="d" />
        </p:selectOneMenu>

    </h:panelGroup>

</cc:implementation>

Bean

public class Direccion implements Serializable {
    private String codigoPais; /* with its getter and setter*/
    private String codigoProvincia; /* with its getter and setter*/

}

XHTML This is the way I use inside the xhtml pages: (The name of the controller changes depends on the current controller)

<sgnx:letter-example bean="#{controller.direccion}" />

The @Named beans

@Named
@ViewScoped
public class P001DatosNotificacionController
    private Direccion direccion; /* with its getter and setter*/

@Named
@ViewScoped
public class P001GestionNotificacionesController
    private Direccion direccion; /* with its getter and setter*/

@Named
@ViewScoped
public class P002BandejaProvisionalNotificacionesController
    private Direccion direccion; /* with its getter and setter*/

Solution

After a few weeks I went back to the problem. I decided to start again from scratch.

When I started to write the controller code and annotated it with @ViewScoped I realize about javax.faces.bean and javax.faces.view packages

And that was the mistake. I was using a wrong combination:

import javax.inject.Named;    
import javax.faces.bean.ViewScoped;

So, the solution is as easy as using the proper combination of packages:

import javax.inject.Named;
import javax.faces.view.ViewScoped;

In these posts are the answer and the explanation: