RichFaces 4.1: rich:pickList (in M2)

[kwutzke]

Hello,

I've just used the RichFaces 4 rich:pickList component the first time.

Here's the code:

{code}<rich:pickList value="#{companyManager.instances}"
               columnVar="dontknowwhatitisfor"
               sourceCaption="Available Companies"
               targetCaption="Selected Companies">
  <f:selectItems value="#{companyManager.instances}"
                 var="company"
                 itemValue="#{company.id}"
                 itemLabel="#{company.name}" />
  <!--f:converter converterId="EntityBeanConverter" /-->
  <!--rich:column>#{dontknow.id}</rich:column>
  <rich:column>#{dontknow.name}</rich:column-->
</rich:pickList>{code}

Note, I copied the code from an older thread here, so maybe I'm using the component incorrectly.

I have a few questions:

1. Why are the generated HTML classes called 'rf-pick-source-caption', 'rf-pick-target-caption', 'rf-pick-btn' etc.? RF 4 started to reduce the amount of HTML by abbreviating CSS classes, right? So the abbreviation for pickList should rather be 'plst', 'source' should be 'src', 'caption' should be 'cptn', etcetc. After all, 'btn' got abbreviated, too... Keep up the consistency?

2. The action buttons are all the same size, but when making the browser window smaller the middle buttons are rendered muuuch to narrow (wrong resize behavior). My current workaround is to set CSS like

{code}.rf-pick-btn
{
    min-width: 110px;
}{code}

but it's probably not intended that way. Bug?

3. What is rich:pickList value="#{...}" for? I thought this would be the default target elements (already selected), but it doesn't add the items to the list on the right. Do the list elements have to exclude each other?

4. What's columnVar for? (Why was columnVar named columnVar anyway? AFAI understand each item rather represents a row, like in a dataTable, or am I mistaken? JSF has other component IIRC rowKey etc... or call it targetVar as it belongs to the target items? This would be kind of neutral... but not that important really.)

5. In classic skin, the color of the captions defaults to white. On a gray background this disappears. Has the right color default been correctly chosen here? (I can't compare it to RF 3 as the demo doesn't show the captions.)

Another functionality I could need would be the automatic selection of certain items, that is they are always at the right side and can't be removed, even by the remove all button. Maybe pass a list of fixedValues/selectedValues to rich:pickList? I doubt this will be available short-term, but I'll give it a try nontheless. :-)

#3 and #4 would be the important questions...

Comments appreciated.

Thanks

Karsten

[kwutzke]

Who is responsible for the implementation of rich:pickList in the upcoming releases?

Karsten

[kwutzke]

I've just discovered this

http://planet.jboss.org/post/richfaces_4_1_0_m1_release_announcement

How do you enable the orderingList to the right of the pickList???

Karsten

[kwutzke]

OK after fiddling with the undocumented rich:pickList here's what I've found out: Some code first:

{code}<rich:pickList value="#{myBean.selectedCompanies}"
               converter="#{companyConverter}"
               var="company"
               orderable="true"
               addAllText="Add all"
               addText="Add"
               removeText="Remve"
               removeAllText="Remove all"
               upTopText="First"
               upText="Up"
               downText="Down"
               downBottomText="Last">
  <f:selectItems value="#{companyManager.externalCompanies}" />
  <!--rich:column>#{company.name}</rich:column-->
</rich:pickList>{code}

rich:pickList is the selected items list to the right. This should be bound to your bean and when using form submit will be the place where the selected items are stored.

var is actually the row var which gets stuffed into the converter. The converter looks like (CDI bean):

{code}
import de.poyry.pqgenerator.model.Company;
import de.poyry.pqgenerator.service.CompanyService;
@Named
@RequestScoped
public class CompanyConverter implements Converter
{
    @Inject
    private CompanyService companyService;
    @SuppressWarnings("unused")
    @Override
    public Object getAsObject(FacesContext arg0, UIComponent arg1, String str)
    {
        return companyService.findInstanceByName(str);
    }
    @SuppressWarnings("unused")
    @Override
    public String getAsString(FacesContext arg0, UIComponent arg1, Object obj)
    {
        return ((Company)obj).getName();
    }
}
{code}

orderable = true results in an orderable list to the right. The f:selectItems defines the left-hand side of the pick list. I'm not sure if they really need the itemValue and itemLabel here.

Found the answer here:

http://community.jboss.org/message/631628#631628

Thanks

Karsten

[kwutzke]

Just for your reference... pickList value="..." and f:selectItems="..." must use the same generic types.

See here for a followup discussion:

http://community.jboss.org/thread/174015

Karsten

[bleathem]

Karsten,

Thanks for the great feedback on the picklist component.  Sorry for the delay in replying, we are hard pressed at the moment to get 4.1.0.Milestone 3 out the door.  Also, with regards to the lack of documentation at the moment, we will be addressing that during the CR1 sprint, and will have all appropriate docs ready for the 4.1.0.Final release.

1. Why are the generated HTML classes called 'rf-pick-source-caption', 'rf-pick-target-caption', 'rf-pick-btn' etc.?

Good catch - please file a jira for this, and we'll get it in CR1 before we commit to backwards compatibility with a Final release.

2. The action buttons are all the same size, but when making the browser window smaller the middle buttons are rendered muuuch to narrow (wrong resize behavior).

Another good candidate for an issue

3. What is rich:pickList value="#{...}" for? I thought this would be the default target elements (already selected), but it doesn't add the items to the list on the right. Do the list elements have to exclude each other?

It is indeed for the target values. Post back if you have troubles with this (I think you did already actually, in another thread)

4. What's columnVar for? (Why was columnVar named columnVar anyway? AFAI understand each item rather represents a row, like in a dataTable, or am I mistaken? JSF has other component IIRC rowKey etc... or call it targetVar as it belongs to the target items? This would be kind of neutral... but not that important really.)

columnVar is gone as of M2, replaced with just var. It was named columnVar, as it's was the value you used in rich:columns

5. In classic skin, the color of the captions defaults to white. On a gray background this disappears. Has the right color default been correctly chosen here? (I can't compare it to RF 3 as the demo doesn't show the captions.)

It should be adjusted to be appropriately visible.  Please fle a jira (with screen shots if you can)

Another functionality I could need would be the automatic selection of certain items, that is they are always at the right side and can't be removed, even by the remove all button. Maybe pass a list of fixedValues/selectedValues to rich:pickList? I doubt this will be available short-term, but I'll give it a try nontheless. :-)

A great feature request, please file a jira

Thanks for the feedback, and keep it coming!

[kwutzke]

I'll let it fly...! JIRAs are here:

1. https://issues.jboss.org/browse/RF-11601

2. https://issues.jboss.org/browse/RF-11602

5. https://issues.jboss.org/browse/RF-11603

6. https://issues.jboss.org/browse/RF-11604

Note my original #3 and #4 got solved here:

http://community.jboss.org/thread/174015

Karsten