PrimeFaces selectOneMenu不呈现图像和字符串

Question

I'm using PrimeFaces selectOneMenu to display some images and strings next to them, i'm only concerned with the string next to the image, the image itself is for displaying only, i tried this but it didn't work:

<p:selectOneMenu id="SkinChooser"
        value="#{personBean.skin}" panelStyle="width:150px"
               effect="fade" var="s" style="width:160px">
       <f:selectItem itemLabel="Select One" itemValue="" />
      <f:selectItems value="#{personBean.selectedSkins}"
               var="skin" itemLabel="#{skin.skinType}" itemValue="#{skin}" />
      <p:column>
               <p:graphicImage value="/resources/images/skin/#{s.skinPhoto}" />
      </p:column>
      <p:column>  
               #{s.skinType}  
     </p:column>
</p:selectOneMenu>



    public class Skin {
          String skinPhoto;
          String skinType;

         public Skin() {}

         public Skin(String photo, String type) {}

         public String getSkinPhoto() {return skinPhoto;}

         public void setSkinPhoto(String skinPhoto) {
                this.skinPhoto = skinPhoto;
         }

        public String getSkinType() {
                  return skinType;
         }

        public void setSkinType(String skinType) {
                   this.skinType = skinType;
         }
        @Override
            public String toString() {
                           return skinType;
             }
       }

inside the bean personBean i initialized the ArrayList selectedSkins as follows:

and this is the personBean:

@ManagedBean(name = "personBean")
@SessionScoped
 public class ReportPerson {
private Skin skin;
private static List<Skin> selectedSkins;


static {
    System.err.println("Array is filled");
    selectedSkins = new ArrayList<Skin>();
    selectedSkins.add(new Skin("1", "Pale white"));
    selectedSkins.add(new Skin("2", "Fair white"));
    selectedSkins.add(new Skin("3", "Light brown"));
    selectedSkins.add(new Skin("4", "Moderate brown"));
    selectedSkins.add(new Skin("5", "Dark brown"));
    selectedSkins.add(new Skin("6", "Deeply pigmented"));
    System.err.println("Finished Filling");

}

public List<Skin> getSelectedSkins() {
    return selectedSkins;
}

public void setSelectedSkins(List<Skin> selectedSkins) {
    this.selectedSkins = selectedSkins;
}

public Skin getSkin() {
    return skin;
}

public void setSkin(Skin skin) {
    this.skin = skin;
        }

    }

but the selectOneMenu component still doesn't render anything!

Answer 1

You are missing the converter.

@ManagedBean(name = "skinConverter")
public class SkinConverter implements Serializable, Converter {

/** Serial Version UID. */
private static final long serialVersionUID = 3661819160508007879L;

@ManagedProperty(value = "#{personBean}")
private PersonBean personBean;

/**
 * Accesses the personBean
 * @return the personBean
 */
public final PersonBean getPersonBean() {
    return personBean;
}

/**
 * Sets the personBean
 * @param personBean the personBean to set
 */
public final void setPersonBean(final PersonBean personBean) {
    this.personBean = personBean;
}

/**
 * @see javax.faces.convert.Converter#getAsObject(javax.faces.context.FacesContext,
 *      javax.faces.component.UIComponent, java.lang.String)
 */
@Override
public Object getAsObject(final FacesContext facesContext, final UIComponent 
          component, final String submittedValue) {
    if (submittedValue.trim().equals("")) {
        return null;
    } else {
        for (Skin p : personBean.getSelectedSkins()) {
            if (p.getSkinType().equals(submittedValue)) {
                return p;
            }
        }
    }
    return null;

}

/**
 * @see javax.faces.convert.Converter#getAsString(javax.faces.context.FacesContext,
 *      javax.faces.component.UIComponent, java.lang.Object)
 */
@Override
public String getAsString(final FacesContext arg0, final UIComponent arg1, final Object value) {
    if (value == null || value.equals("")) {
        return "";
    } else {
        return String.valueOf(((Skin) value).getSkinType());
    }

}

}

Answer 2

In order to render an item as column, the attribute itemValue of the tag <f:selectItems> must point to an Object, not a String.

In your case, itemValue="#{skin}" is correct.

If you use itemValue="skin" or itemValue="#{skin.type}" , the item is rendered as normal text because its type is String .

The PrimeFaces source code will make it clearer.

Reference: SelectOneMenu.java