Dynamically add Primefaces Hotkey control - jsf-2

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.

Related

JSF command button updating even there are validation errors

I'm new to JSF, my question may be silly for you.. It is very much valuable for me..
<h:form id="form1">
<p:messages autoUpdate="true" showDetails="true" />
<p:dataTable id='form1ID'>....</dataTable>
<p:inputText value="#{bean.name}" required="true"
requiredMessage="Please Enter Name!" label="Name ">
</p:inputText>
</h:form>
<h:form id="form2">
<p:messages autoUpdate="true" showDetails="true" />
<p:dataTable id='form2ID'>....</dataTable>
<p:inputText value="#{bean.name}" required="true"
requiredMessage="Please Enter Name!" label="Name ">
</p:inputText>
<p:commandButton value="Submit" update=":form1:form1ID"
actionListener="#{mgmtBean.doCreateType}" />
</h:form>
I have two forms. when I click on form2 command button with empty fields, it will show error messages perfectly since i have added <p:messages autoUpdate="true" showDetail="true"/>.
The bad thing or surprising thing here for me is, it is showing error messages on top of form1 also may be because of <p:messages autoUpdate="true" showDetail="true"/> added in form1 and i'm trying to update form1 on command button click in form2.
I don't want to show error messages on form1 when form2 is throwing validation error messages. How can i fix this ? I googled it out.. but couldn't find the solution.
Evironment i'm using is jsf-api-2.1.5 and primefaces 4.0 version and view technology is facelets(XHTML)
Hope it is clear..
Any idea is highly appreciated.
Try to disable rendering of messages on the form1:
<p:messages autoUpdate="true" showDetails="true" rendered="#{bean.renderedmessage}"/>
And in the bean, add the renderedmessage variable:
public Boolean getRenderedmessage() {
return renderedmessage;
}
/**
* #param renderedmessage the renderedmessage to set
*/
public void setRenderedmessage(Boolean renderedmessage) {
this.renderedmessage = renderedmessage;
}
And, for the doCreateType() method, add:
public void doCreateType(){
..............
setRenderedmessage(false);
.............
}
After the form1 is updated, you can choose some event or method, where you can setRenderedmessage(true);
What you're currently experiencing should indicate to you that you usually don't need two <p:messages/>s in the same JSF view; one is enough.
Regardless of the fact that you have two <h:form/>s on your page, there's still only one FacesContext associated with that view (The FacesContext object is a JSF construct that encapsulates all the information/data/components etc that's associated with a given JSF page request).
By default the <p:messages/> will display every FacesMessage that is queued within it's associated instance of FacesContext, regardless of the source of the message (well, almost: if you set globalOnly="true" on the <p:messages/>, you can change that behaviour).
That being said, you basically have two options:
Get rid of the extra <p:messages/> and rely on (and appropriately position) only one to display all errors/warnings for that view
Specify the for attribute, set to the desired component. Doing so, you'll guarantee that only one input component can trigger the display of its associated message component. For example
<h:form id="form1">
<p:messages for="inputName" autoUpdate="true" showDetails="true" />
<p:dataTable id='form1ID'>....</dataTable>
<p:inputText id="inputName" value="#{bean.name}" required="true"
requiredMessage="Please Enter Name!" label="Name ">
</p:inputText>
</h:form>
Note that I've set an id attribute on the <p:inputText/> component; this is necessary so you can use it in the for attribute for the messages component.
Further reading:
What is FacesContext used for?
I have fixed the issue by using the following code
<p:messages autoUpdate="true" showDetails="true" visibility="info"/>
so it is just displaying info messages and other pop up error messages will not be showun.

Primefaces commandButton inside dialog not firing backing bean's method

I've just started learning JSF and PrimeFaces, and as soon as I solve a problem (with your help), another one arises. I have a datatable showing some data about my application's users; in the last column, a commandButton invokes a dialog allowing the corresponding data to be edited. The dialog actually interacts with the backing bean, since the fields are correctly precompiled with the existing data, but the "Submit changes" commandButton doesn't fire the proper editUser() method!
I've searched everywhere for a solution to my problem, but none of the threads on the PrimeFaces forums nor any question here on Stack Overflow helped me: I tried all combinations of action, actionListener, inner <h:form>, outer <h:form>, even the dreaded nested <h:form>, but the underlying method is still not called.
Thank you all, people!
EDIT: I included some more xhtml. Just to be clear: in the datatable I'm implementing both single and multiple selection mechanisms. The single selection is performed by the editButton in the last column and triggers the editDialog that's giving me pain, while multiple selection is enabled by the checkboxes in the first column and is targeted by a commandButton at the bottom of the table that deletes all selected users; of course they store the selections in different fields in the backing bean (selectedUser and selectedUsers[], respectively).
xhtml file
<h:form id="tableForm">
<p:dataTable id="userList" var="user" value="#{userListBean.userList}"
selection="#{userListBean.selectedUsers}" rowKey="#{user.username}">
<!-- this is a checkbox column I use for multiple selection -->
<p:column selectionMode="multiple" style="width:2%"/>
<!-- other datatable columns -->
<!-- this is the button column that triggers the dialog -->
<p:column style="width:4%">
<p:commandButton id="editButton" update=":tableForm:editUserData"
oncomplete="PF('editDialog').show()" title="Edit" icon="ui-icon-pencil">
<f:setPropertyActionListener target="#{userListBean.selectedUser}"
value="#{user}" />
</p:commandButton>
</p:column>
</p:datatable>
<p:dialog id="editDlg" widgetVar="editDialog" header="Edit User"
showEffect="fade" hideEffect="fade" modal="true" dynamic="true">
<h:panelGrid columns="6" id="editUserData">
<p:outputLabel for="editUsername">Username:</p:outputLabel>
<p:inputText disabled="true" id="editUsername" value="#{userListBean.selectedUser.username}" />
<p:message for="editUsername" />
<!-- and other fields like that -->
</h:panelGrid>
<p:commandButton id="submitChanges" action="#{userListBean.editUser()}"
value="Submit changes" oncomplete="PF('editDialog').hide();" />
</p:dialog>
</h:form>
Backing bean
#ManagedBean(name="userListBean")
#ViewScoped
public class UserListBean {
private UserDTO selectedUser;
public UserListBean() {
}
//some methods...
public String editUser() {
System.out.println("------------------ EDIT TRIGGERED! -------------------");
System.out.println(selectedUser.getUsername());
//this stuff never gets printed, so the method is never called!
}
//getters and setters
}
Actually, the only thing didn't come to my mind turned out to be the one that worked.
I sorted out my issue by using THREE forms (as I mentioned in my question, I had already tried out all possible combinations of one and two forms, even nested ones), like this:
<h:form id="tableForm">
<!-- here lies the p:dataTable -->
</h:form>
<p:dialog>
<h:form id="dialogForm">
<!-- here lies the h:panelGrid with the editable fields -->
</h:form>
<h:form id="buttonForm">
<!-- and HERE goes the commandButton, alone -->
</h:form>
</p:dialog>
It looks like everyone solves this problem in ways that don't work for others :) .

show confirmDialog before rowEditor updates the model

I'm using PrimeFaces dataTable and rowEditor in pretty default way:
<p:dataTable id="payments-table" var="apayment" value="#{payment.payments}" editable="true">
<p:ajax event="rowEdit" listener="#{payment.update}"/>
...
</p:dataTable>
I'd like a confirmation dialog to show itself on clicking to the 'check' button of rowEditor.
I know it's possible using JS confirm function (thanks to Show a confirm message before <p:rowEditor> updates the model on click of "OK" button):
<p:ajax event="rowEdit" listener="#{payment.update}" onstart="return confirm('Save changes?')"/>
But I would like the dialog to conform to the UI theme, confirmDialog component being the best candidate. Alas, I don't know how to use it here. I tried the following and it won't work (simply no confirmation occurres):
<p:ajax event="rowEdit" listener="#{payment.update}">
<p:confirm header="Remove payment" message="Remove payment?" icon="ui-icon-trash"/>
</p:ajax>
....
<p:confirmDialog global="true">
<h:form id="form-payment-confirm">
<p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"/>
<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
</h:form>
</p:confirmDialog>
Any ideas?
I think you can use in this case simple widgetVar and call show() or hide() functions. Here is your modified code:
<p:ajax event="rowEdit" listener="#{tableBean.onRowEdit}" oncomplete="myDialog.show()"/>
I use PF 3.5 and can't find global parameter in p:confirmDialog. May be it is new feature. So I simple deleted it of my code. Here is modified confirmDialog:
<p:confirmDialog widgetVar="myDialog" closeOnEscape="true" appendToBody="true" closable="true">
<h:form id="form-payment-confirm">
<p:commandButton value="Yes" type="button" update="#form" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"/>
<p:commandButton value="No" type="button" onclick="myDialog.hide()" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
</h:form>
</p:confirmDialog>
Please try and adjust this confirm dialog code! May be unnecessary code for update form or hide()...
EDIT:
If you want to dynamically adjust text message of confirmDialog, you can adjust from server-side. Perhaps it is not best solution. I think the second way is it adjust from client-side by JQuery.
Server-side:
The ajax event is same. It call onRowEdit listener which adjust simple String attribute. For example the bean containt:
String myDialogMessage = "Default message";
//getter and setter
public void onRowEdit(RowEditEvent event) {
myDialogMessage="Are you sure?";
}
and the dialog containt message property:
<p:confirmDialog widgetVar="myDialog" closeOnEscape="true" appendToBody="true" closable="true" message="{tableBean.myDialogMessage}">
Client-side:
You can use repleaceWith function of JQuery:
<script>
jQuery("myDialog.p").replaceWith(....
</script>
Of course need to develop more business logic to client-side, more functions. Maybe the server-side solution is faster.
Please try it!
Based on your comment, I edited:
I find this in 4.0 user' guide:
When pencil icon is clicked, row is displayed in editable mode meaning
input facets are displayed and output facets are hidden. Clicking
tick icon only saves that particular row and cancel icon reverts the
changes, both options are implemented with ajax interaction. Another
option for incell editing is cell editing, in this mode a cell
switches to edit mode when it is clicked, losing focus triggers an
ajax event to save the change value.
So ajax event works when row is change. Here is dataTable events which can you catch:
I hope this answer help to you find solution!

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"

Why does my s:selectItems throws no such element exception?

I'm getting this error java.util.NoSuchElementException when i tried to check one of my checkbox under h:selectManycheckBox when i submit the form.
The many checkbox is dynamically populated from the bean. Here is my code.
<h:form id="eF">
<h:inputText id="i" value="#{aklat.suggest}">
<a4j:support event="onkeyup" action="#{aklat.complete}" reRender="m"></a4j:support>
</h:inputText>
<s:div>
<h:selectManyCheckbox value="#{aklat.selectedBooks}" layout="pageDirection" id="m">
<s:selectItems value="#{aklat.books}" var="_book" itemLabel="#{_book}" itemValue="#{_book}" label="#{_book.bookName}"/>
</h:selectManyCheckbox>
<a4j:commandButton value="Add Users" action="#{aklat.fire}"></a4j:commandButton>
</s:div>
</h:form>
The weird part is it renders some data output but when i checked the source code. there are no input type checkbox element.
Is something I am missing.
I assume your managed bean is request scope...
because you are making an ajax request, you have to enable "aklat.books" to persist its value longer than request but shorther than session scope.
If you have tomahawk between your app libraries you can use savestate like this (put it after the h:form tag) :
<t:saveState value="#{aklat.books}"/>
if no tomahawk, you can use a4j:keepAlive:
<a4j:keepAlive beanName = "#{aklat.books}"/>

Resources