Select Item from many menu - jsf-2

Ok I have a simple many menu in wich I call a listener
<p:selectManyMenu style="width: 100%;" id="cmbsectores" valueChangeListener="#{mbcompletado.removeItem}">
<f:selectItems value="#{mbcompletado.sectores}"/>
<f:ajax update="#this"/>
</p:selectManyMenu>
I am looking the way I can use the ValueChangeEvent pass as parameter to detect which item was selected??
So I can use my business logic!
Do i need to use ajax tag? I found an itemSelect event in primeface, framework which I am using, but it only works on charts components!
Thanks in advance

Since you are already using PrimeFaces use p:ajax instead of f:ajax. The event is already set to the appropriate event (valueChanged).
To detect the selected values of the selectManyMenu the value attribute is necessary:
<p:selectManyMenu style="width: 100%;" id="cmbsectores"
value="#{mbcompletado.selectedSectores}">
<f:selectItems value="#{mbcompletado.sectores}"/>
<p:ajax/>
</p:selectManyMenu>
You can remove the valueChangeListener listener altogether.
For a more complete example see SelectManyMenu.
EDIT:
In your backing bean mbcompletado.selectedSectores should point to a collection of the same type like your mbcompletado.sectores. For example, if your sectores is a List of TypeA, selectedSectores should be also a List of the same type (TypeA).
Similar backing-bean structure can be found in the following example SelectManyCheckbox.

You need the <f:ajax listener> (or in this case better <p:ajax listener>) method instead. The ValueChangeListener serves an entirely different purpose and should only be used when you're really interested in both the old and new value, not when you're only interested in the new value.
E.g.
<p:selectManyMenu value="#{bean.selectedSectors>
<f:selectItems value="#{bean.availableSectors}"/>
<p:ajax listener="#{bean.selectedSectorsChanged}" />
</p:selectManyMenu>
with
private List<String> selectedSectors;
private List<String> availableSectors;
public void selectedSectorsChanged() {
System.out.println("Selected sectors are: " + selectedSectors); // Look, JSF has already set it.
// ...
}
See also:
When to use valueChangeListener or f:ajax listener?

Related

Dynamically add Primefaces Hotkey control

I am building an app where one of the requirements is heavy use of hotkeys. So heavy in fact that we want to pull those hotkeys back into a central controller.
The basic idea is each page will have a key associated with it. When jsf hits that key, it will go back to a central enummap to decide what hotkeys are supposed to be associated with that page and what methods are supposed to be added to the keys of that page.
My problem is the dynamic load. I can't use the
For now, I have this
<h:form binding="#{hotkeyController.form}">
<f:event listener="#{hotkeyController.genKeyHandler('HOTKETEST')}" type="preRenderComponent"/>
<p:outputPanel id="displayHotkey">
<h:outputText value="#{hotkeyController.keyText}" rendered="#{not empty hotkeyController.keyText}"/>
</p:outputPanel>
</h:form>
Then for my backing bean i have this
public void genKeyHandler(String pageKey) {
Hotkey hotkey = new Hotkey();
hotkey.setBind("ctl+shift+d");
hotkey.setAsync(true);
// "#{hotkeyController.keyHandler('HOTKETEST', 'F1')}"
hotkey.setActionExpression(createMethodExpression("#{hotkeyController.keyHandler('HOTKEYEXAMPLE', 'CTLSHIFTD')}", null,
String.class, String.class));
hotkey.setUpdate("displayHotkey");
form.getChildren().add(hotkey);
hotkey = new Hotkey();
hotkey.setBind("ctl+shift+a");
hotkey.setAsync(true);
// "#{hotkeyController.keyHandler('HOTKETEST', 'F1')}"
hotkey.setActionExpression(createMethodExpression("#{hotkeyController.keyHandler('HOTKEYEXAMPLE', 'CTLSHIFTA')}", null,
String.class, String.class));
hotkey.setUpdate("displayHotkey");
form.getChildren().add(hotkey);
}
Now this works in the sense that it actually inserts the hotkey into the form. I can see it in inspector. But, my problem is two fold. One, if I refresh the page, I get duplicate ID errors, if I use the preRenderView, I get "Error restoring component" errors. seems like no combination will work.
Is there any way to make this work? All I want is to have the bean method that inserts the hotkeys fire the first time a page is loaded and only fired once in the life of the page/view/whatever. This shouldn't be this hard.
My suggestion is that you use an exclusive form for the hotkeys.
Here is the sample:
<h:form id="mainForm">
<p:remoteCommand name="loadHotKeys" action="#{hotkeyController.genKeyHandler('HOTKETEST')}" update=":hotkeyForm" global="false" process="#this" />
<p:outputPanel id="displayHotkey">
<h:outputText value="#{hotkeyController.keyText}" rendered="#{not empty hotkeyController.keyText}"/>
</p:outputPanel>
</h:form>
<h:form id="hotkeyForm" binding="#{hotkeyController.form}" />
<script type="text/javascript">
jQuery(document).ready(loadForm());
</script>
And the genKeyHandler method should clear the hotkeyForm (form.getChildren().clear()) before adding the hotkeys.

Check Tabs visited in p:tabView. Usage of onTabShow Event?

I am trying to track in a controller-bean, which tabs of a p:tabView were already visited (by tab-id).
I don't want to use the onTabChange event for some reasons (blocked already for other things).
So I tried to realize my usecase with onTabShow event of p:tabView. But did not succeed yet. I first tried with p:ajax listener:
<p:tabView>
<p:ajax event="tabShow" listener="#{myBean.checkTab(event)}" .../>
Result was error-message: tabShow not supported in p:ajax ...
Second try was using remoteCommand:
<p:tabView onTabShow="myCommand()">
...
<p:remoteCommand name="myCommand" actionListener="#{myBean.checkTab}" .../>
But how to pass the event as parameter to my bean-method to get the tab-object from?
Does somebody can help or has another idea how I can track the visited tabs in my bean?
With a binding of tabView perhaps? But how?
Thanks!
You can use the <p:ajax/> without specifying an event. That being said, you can get the currently selected tab either by
Binding the activeIndex property on the <p:tabView/> to a backing bean property
<p:tabView activeIndex="#{bean.selectedTabIndex}">
<p:ajax listener="#{myBean.checkTab}" .../>
</p:tabView>
With this variable bound, you can use it in checkTab.
Use the AjaxBehaviorEvent object to access the specific tab selected:
public void checkTab(AjaxBehaviorEvent abe){
TabView tb = (TabView) abe.getComponent();
List<Tab> loadedTabs = tb.getLoadedTabs();
Tab theTab = loadedTabs.get(tb.getActiveIndex());
}
and in your view:
<p:tabView>
<p:ajax listener="#{myBean.checkTab}"/>

can't refresh a selectOneMenu

first excuse my english if it's not correct ...
I've a probleme with a primeface's component, I'm trying to refresh a p:selectOneMenu from a p:commandButton, but it's doesn't work (it 's work on another xhtml page, but not here and I can't understand why ...)
First I select an item from an p:autocomplete which update a backingbean's attribute ( for example : userChoose ).
then the p:commandButton is able to call his listener and add userChoose to a list, but i can't refresh the selectOneMenu that display the list. I have to use another p:commandButton to refresh the list.
My form is included into a p:tabMenu in another xhtml page.
<p:autoComplete id="acPojo" value="#{forumBean.user}"
completeMethod="#{autoCompleteBean.completeUser}"
converter="#{userConverter}" forceSelection="true"
var="usr" itemLabel="#{usr.loginUtilisateur}" itemValue="#{usr}">
<p:column>
<h:outputText value="#{usr.loginUtilisateur}"/>
</p:column>
</p:autoComplete>
<p:commandButton value="ajouter" process="acPojo #this "
udpate=":tabView:formSujet:listeUser" actionListener="#{forumBean.addUser}"/>
<p:selectOneMenu value="#{forumBean.user}" converter="#{userConverter}" var="us" id="listeUser"
itemValue="#{us}" itemLabel="#{us.loginUtilisateur}">
<f:selectItems value="#{forumBean.newSujet.listeUserAllowed}" var="User"
itemValue="#{User}" itemLabel="#{User.loginUtilisateur}" />
<p:column>
<h:outputText value="#{us.loginUtilisateur}"/>
</p:column>
<p:ajax process="#this" />
</p:selectOneMenu>
<p:commandButton id="refreshAdmin" icon="ui-icon-arrowrefresh-1-w"
update=":tabView:formSujet:listeUser" />
Thanks for help.
From your code:
udpate=":tabView:formSujet:listeUser"
This has at least 2 (potential) mistakes. The right attribute name is update, not udpate. The one on your other button has however the right attribute name.
It that still doesn't work, then the other potential mistake is that the client ID tabView:formSujet:listeUser does not exist in HTML DOM tree (and thus JavaScript/jQuery is unable to find and replace it). That can happen if the <p:tabView> is dynamic (i.e. you're using <p:tabView value="#{bean.tabs}" var="tab">, because it prepents the tab index number in the final client ID like so tabView:0:formSujet:listeUser if it's the 1st tab.
But, after all, as both the dropdownlist and the commandbutton are in the same NamingContainer parent, you don't need an absolute client ID at all. Just the relative client ID should suffice:
update="listeUser"
Fix that on your both buttons.
See also:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"

Initial sortorder for PrimeFaces datatable with multisort

I am trying to implement multisort on Primeface datatable. We are using Primefaces v3.5. I have created a new load method in the LazyLoadClass that takes the List of SortMeta> parameter.
But I am having issues in the initial load of the table. The List of SortMeta> is null when the load method is called. I have also tried without specifying the initial sortBy and sortOrder for the datatable. In both the cases the result is the same.
Seeing that we have this new class SortMeta to support multisort, I suspect that the way to specify the initial sort field and order would have also changed. But I couldn't find any example anywhere to point the difference. The manual 3.5 doesn't mention any difference.
Why we could be getting the List of SortMeta> as null? Any pointers on example code where multisort is used with Lazyload?
I was able to get this to work.
Essentially we need to provide the UIColumn in the SortMeta object for it to work. For the initial sort at render time, I had to find the component in my bean and assign that to the sortMeta.
Below is my code in the view xhtml
<p:dataTable id="transDataTable" var="trans"
value="#{myBean.transModel}" paginator="true" rows="50"
paginatorAlwaysVisible="false" lazy="true"
sortMode="multiple" sortBy="#{myBean.preSortOrder}"
resizableColumns="true">
<p:column headerText="User" sortBy="#{trans.user.name}" >
#{trans.user.name}
</p:column>
<p:column headerText="Company" sortBy="#{trans.companyName}">
#{trans.companyName}
</p:column>
<p:column headerText="Join Date" id="joinDateTime"
sortBy="#{trans.joinDateTime}" >
<h:outputText value="#{trans.joinDateTime}" />
</p:column>
</p:dataTable>
Here is my bean code called on #PostConstruct
/*
* method to build initial sort order for multisort
*/
private void buildSortOrder() {
UIViewRoot viewRoot = FacesContext.getCurrentInstance().getViewRoot();
UIComponent column = viewRoot.findComponent("transDataTable:joinDateTime");
SortMeta sm1 = new SortMeta();
sm1.setSortBy((UIColumn)column);
sm1.setSortField("joinDateTime");
sm1.setSortOrder(SortOrder.DESCENDING);
preSortOrder.add(sm1);
}
I am not sure this is the right way to do this, but it works. I am usually uncomfortable when we have to use the ids from view in the bean code, as that can introduce bugs when people are not careful.
Thanks #CagatayCivici for the quick hint.

JSF / Primefaces 3.4.1 / SelectOneMenu / Pojo / Pre select pojo value not work

This preselected autoCompleteBean.selectedPlayer1 does not work !!
This is the example extracted from the showcase of primefaces site: https://www.primefaces.org/showcase/ui/input/oneMenu.xhtml
<p:selectOneMenu value="#{autoCompleteBean.selectedPlayer1}" converter="player">
<f:selectItems value="#{autoCompleteBean.players}" var="player"
itemLabel="#{player.name}" itemValue="#{player}"/>
</p:selectOneMenu>
In the bean, I put this lines :
private Player selectedPlayer1;
private List players;
/* AutoCompleteBean - constructor */
public AutoCompleteBean() {
players = new ArrayList<Player>();
players.add(new Player("Messi", 10, "messi.jpg", "CF"));
players.add(new Player("Bojan", 9, "bojan.jpg", "CF"));
selectedPlayer1 = players.get(1);
}
Variable autoCompleteBean.selectedPlayer1,
contain the value that you specify before opening the jsp.
But, this is not preselected. Only appear always selected the first element
of the arraylist. Why ??
Only I need that p:selectOneMenu, preselect de value in the list.
Thanks in advance !!
Well, in fact you can pre-select a value, or in other words, select a value by default by doing this:
<p:selectOneMenu value="#{autoCompleteBean.selectedPlayer1}" effect="fade" converter="player">
<f:selectItem itemLabel="autoCompleteBean.selectedPlayer1.name" itemValue="autoCompleteBean.selectedPlayer1" />
<f:selectItems value="#{autoCompleteBean.players}" var="player" itemLabel="#{player.name}" itemValue="#{player}"/>
</p:selectOneMenu>
The only problem with this is that it will repeat the value selected-by-default like this:
And you I guess you would like something like this:
So for this matter, i will recommend you to use the array player:
itemValue="#{player}"
but removing from this array the pre-selected option
Does your player class have hashCode() and equals() functions?
If they are missing, primefaces cannot make differences between them.
Similar problem:
primefaces selectOneMenu doesn't working when it should

Resources