PrimeFaces open dialog several times with rendered attribute - primefaces

I try to implement a dialog box accessible everywhere in my project and I was wondering if this solution is possible.
The dialog is included in the template of my project. For example, where I am on the login page, I would like to show the dialog when the button "Login" is clicked and the authentication is successful. So I catch the bean linked to the dialog with:
getFacesContext().getELContext().getELResolver().getValue(getFacesContext().getELContext(), null, beanName);
and I set the "show" argument. (have a look below)
The first time, it's working. When I access the login page, the dialog is not rendered and when I click the button login, the attribute show is set, the page is updated and the dialog appears. But if I close it, I could not fire it again when I click again the button. (The dialog is rendered but not shown)
My dialog is like this (I have visible="true" cause I want to show each time it's rendered):
<h:form>
<p:dialog header="Dialog" widgetVar="myDialog" rendered="#{bean.show}" visible="true">
<p:ajax event="close" listener="#{bean.onClose}" />
...
</p:dialog>
</h:form>
The bean is in viewscope:
#ManagedBean(name = "bean")
#ViewScoped
public class MyBean {
private boolean show; // + Getters and Setters
#PostConstruct
public void init() {
this.show = false;
...
}
public void onClose() {
this.show = false;
}
}
And I can add that my LoginBean which is setting the show argument is in viewScope too.
Thanks

Related

PrimeFaces confirmdialogs from single Bean

Submit button is pressed the bean first checks for valid values, if it fails validation a dialog is presented. While the process is running another session submits a button press and the bean checks the flag and need to present a different dialog.
Is there away to have a single commandButton interact with two
different confirmDialogs, commandButton "update" interacts with the
confirmDialog
The main difference with my issue verse the other examples/solutions, there is only one button. And the update="confirmValid" on the submit button is only working for the first button push.
The bean is called successfully from "second" button press, the forceRequest method doesn't display the dialog
<p:commandButton id="myButton" update="confirmValid growl"
value="Submit"
actionlistener="#{message.sendMessage}"
...
/>
This dialog is presented for display when the request is invalid
<p:confirmDialog header="#{message.invalidValuesHdr}"
id="confirmValidData" message="#{message.invalid}"
wigdetVar="confirmValidData">
<p:commandButton value="Ok" update="growl" oncomplete="PF('confirmValidData').hide()"
</p:confirmDialog>
This dialog is presented when the process flag has been updated
<p:confirmDialog header="#{message.forceRequestHdr}"
id="confirmValidData" message="#{message.invalid}"
wigdetVar="confirmForce">
<p:commandButton value="Ok" update="growl" oncomplete="PF('confirmForce').hide()"
</p:confirmDialog>
Bean:
#ViewScoped
#Override
public void sendMessage() {
if (....)
forceRequest();
}
public void forceRequest(){
FacesMessage message = new
FacesMessage(FacesMessage.SEVERITY_INFO,"Message Title", "Message body");
RequestContext.getCurrentInstance().showMessageInDialog(message);
}
Displays a dialog the method below does nothing, which is the issue
public void forceRequest(){
RequestContext context = RequestContext.getCurrentInstance();
context.openDialog("Confirm");
context.execute("PF('confirmForce').jq.click();");
}
faces-config.xml is updated
public void forceRequest(){
RequestContext.getCurrentInstance().execute("PF('confirmForce').show();");
}
Above was the solution and now on to the bean

Primefaces switches between multiple dialogs

I`m using PrimeFaces 4.0. I have a page with three dialog components (Dialog 1, Dialog 2, Dialog 3) and three button components (Button 1, Button 2, Button 3), Dialog 1 will be showed by click button 1, Dialog 2 will be showed by click button 2, and Dialog 3 will be showed by click button 3. User can open these three dialogs in the same time, it means user can do some work with these three dialogs all been on show, just like this:
When user do some work in a dialog, I need to change some values in backing bean and update some components at first, and when user show a dialog by click a button, there is no problem and I can change some values when ActionListener of the button that user clicked fired, but when user showed three dialogs, and changes active dialog by click dialog like this:
How can I change active dialog from 'Dialog 1' to 'Dialog 2'?
Here is my xhtml code:
<p:commandLink onclick="dialog1.show()" update="outputText" actionListener="#{testBean.changeActiveDialog('Dialog 1')}">button 1</p:commandLink><br/>
<p:commandLink onclick="dialog2.show()" update="outputText" actionListener="#{testBean.changeActiveDialog('Dialog 2')}">button 2</p:commandLink><br/>
<p:commandLink onclick="dialog3.show()" update="outputText" actionListener="#{testBean.changeActiveDialog('Dialog 3')}">button 3</p:commandLink><br/>
<br/><hr/><h:outputText id="outputText" value="Active dialog: #{testBean.activeDialog}"/>
<p:dialog id="dialog1"
header="dialog 1"
resizable="true"
dynamic="false"
modal="false"
draggable="true"
widgetVar="dialog1"
minimizable="true"
maximizable="true">
dialog1
</p:dialog>
<p:dialog id="dialog2"
header="dialog 2"
resizable="true"
dynamic="false"
modal="false"
draggable="true"
widgetVar="dialog2"
minimizable="true"
maximizable="true">
dialog2
</p:dialog>
<p:dialog id="dialog3"
header="dialog 3"
resizable="true"
dynamic="false"
modal="false"
draggable="true"
widgetVar="dialog3"
minimizable="true"
maximizable="true">
dialog3
</p:dialog>
And my view bean:
public class TestBean extends BaseBean {
private String activeDialog;
public void changeActiveDialog(String dialog)
{
activeDialog = dialog;
}
public String getActiveDialog() {
return activeDialog;
}
public void setActiveDialog(String activeDialog) {
this.activeDialog = activeDialog;
}
}
I googled it but I didn't find the solution on my problem. Any suggestion will be appreciated, thanks in advance.
Although opening multiple dialogs in the same time is not a good idea, but you can always use javascript to achieve what you want.
The z-index would be changed when the dialog is clicked or dragged, making it "active"/above the other elements, in that case you can setup two main events to listen on: click and dragstop then send that dialog id to the managedBean by a remoteCommand, here's an example:
javascript
$('.ui-dialog').on('click dragstop',function () {
activeDialog([{name: 'activeDialog', value: $(this).attr('id')}]);//remoteCommand
});
xhtml
<p:remoteCommand name="activeDialog" actionListener="#{mainBean.activeDialog}"/>
managedBean
public void activeDialog() {
FacesContext facesContext = FacesContext.getCurrentInstance();
Map map = facesContext.getExternalContext().getRequestParameterMap();
String activeDialog = (String) map.get("activeDialog");//Active dialog
}
A little demo, and a working example on github.
Note: you should keep the actionListener on the first time the dialog is opened.
I think you should never open more than 1 dialog at the same time.
Try to change your design (for example, create 1 large dialog instead of the 3 ones).

how can i show invisible primefaces panel in client side

I create a panel and set its visible attribute to false as following:
<p:panel widgetVar="myPanel" visible="false" >
Now i have a commandButton and i will when user click on it the myPanel change to visible mode and user can see it. my button is like this:
<p:commandButton value="Show Panel" oncomplete="myPanel.show()" />
But primefaces(4) panel just have 2 client side methods:
close
toggle
do you have any solution for this?
thanks.
Why client side?
The normal way with JSF (and Primefaces) is to bind visible (or rendered, the procedure is mostly similar) to a bean property, change this property on click of button and update the component. Something like this:
Bean:
private boolean visible = false;
public boolean isVisible() {
return visible;
}
public void setVisible(boolean visible) {
this.visible = visible;
}
Xhtml:
<p:panel id="mp" widgetVar="myPanel" visible="#{bean.visible}" >
<p:commandButton value="Show Panel" action="#{bean.setVisible(true)}" update="mp" />

Primefaces open closable dialog programmatically

I want to dynamically create a primefaces dialog from the backing bean.
I have written the code above:
public void showDialog(){
UIComponent panelGroup = facesContext.getViewRoot().findComponent("form1");
System.out.println("found or not??"+ panelGroup.toString());
Dialog dialog = new Dialog();
dialog.setId("sample");
dialog.setWidgetVar("widget");
dialog.setHeader("Sample");
dialog.setVisible(true);
dialog.setMinimizable(true);
dialog.setDynamic(true);
dialog.setHideEffect("fade");
dialog.setFooter("footer");
dialog.setDraggable(true);
dialog.setMinWidth(600);
dialog.setClosable(true);
dialog.setModal(true);
dialog.setAppendToBody(false);
panelGroup.getChildren().add(dialog);
RequestContext requestContext = RequestContext.getCurrentInstance();
requestContext.openDialog("widget");
requestContext.update("form1");
}
and in my jsf page: i have
<h:form id="form1" >
<h:commandButton value="show Dialog" action="#{createDialog.showDialog()}" />
</h:form>
The problem is that when i set it to visible , i got the dialog but neither i can close (i don't get the close icon nor i can drag it)!
You need to replace this line:
requestContext.openDialog("widget");
to that:
requestContext.execute("PF('widget').show()");
RequestContext.openDialog() method reffers to Primefaces Dialog Framework API which is different to p:dialog component.
From primefaces user guide:
Dialog Framework (DF) is used to open an external xhtml page in a
dialog that is generated dynamically on runtime.
So, RequestContext.openDialog() expects you to provide path to xhtml page as argument.
And p:dialog component have javascript api show() and hide() methods to interact with it.

Primefaces resetinput in cancel button hanging other tabs

I have got an issue with primefaces resetinput. When I press this cancel button all of my other Tabs just hanged. I am using primefaces 3.5.
<p:commandButton id="cancelMainButton" process="#this"
value="#{bundle.Cancel}" update=":ss_form:ss_tabView:main_tab"
actionListener="#{eccmServiceSpecController.cancelServiceSpec}"
icon="ui-icon-cancel">
<p:resetInput target=":ss_form"/>
</p:commandButton>
**Controller**
#Named("eccmServiceSpecController")
#SessionScoped
public void cancelServiceSpec(ActionEvent event) {
eccmServiceSpec = ejbFacade.findByServiceSpec(eccmServiceSpec);
this.setSelected(eccmServiceSpec);
}
**Facade** Statefull session bean with Extended mode.
public EccmServiceSpec findByServiceSpec(EccmServiceSpec eccmServiceSpec){
this.getEntityManager().detach(eccmServiceSpec);
eccmServiceSpec = this.find(eccmServiceSpec.getServSpecId());
eccmServiceSpec = this.getEntityManager().merge(eccmServiceSpec);
return eccmServiceSpec;
}
Thanks for your reply. I have added my controller and Facade please look at this. I shall be thankful to you.