PrimeIcons
Ajax Framework
Introduction
Process
PartialSubmit
Selector
Search
Validation
RemoteCommand
Observer
Poll
Fragment
Status
Lifecycle
Dropdown
WebSocket
Form
AutoComplete
CascadeSelect
Chips
ClockPicker
Inplace
InputGroup
InputMask
InputNumber
InputOtp
InputPhone
InputText
InputTextArea
KeyFilter
Keyboard
Knob
MultiSelectListBox
MonacoEditor
Password
Rating
SelectBooleanButton
SelectBooleanCheckbox
SelectOneButton
SelectOneRadio
SelectCheckboxMenu
SelectOneMenu
SelectOneListbox
SelectManyButton
SelectManyMenu
SelectManyCheckbox
Signature
Slider
Spinner
TextEditor
ToggleSwitch
TriStateCheckbox
Button
Data
Panel
Accordion
Card
Dashboard
Divider
Fieldset
NotificationBar
OutputPanel
Panel
PanelGrid
Splitter
ScrollPanel
TabView
Toolbar
Wizard
Overlay
Menu
Chart
BarNew
BubbleNew
DoughnutNew
LineNew
MixedNew
PieNew
ScatterNew
PolarAreaNew
RadarNew
CustomNew
FacetNew
ExportNew
Messages
Multimedia
File
DragDrop
Client Side Validation
Dialog Framework
Misc
Dialog Framework
Nested dialogs are supported to allow creating a dialog from another dialog. Demo here has 3 level of nested dialogs where last dialog returns data back to the root.
- nested.xhtml
- DFRootView.java
- level1.xhtml
- DFLevel1View.java
- level2.xhtml
- DFLevel2View.java
- level3.xhtml
- DFLevel3View.java
<h:form id="rootform">
<p:growl id="growl" showDetail="true"/>
<div class="card">
<h5>DialogReturn with Button</h5>
<p:commandButton id="btn" value="View" icon="pi pi-home" action="#{dfRootView.openLevel1}">
<p:ajax event="dialogReturn" listener="#{dfRootView.onReturnFromLevel1}" update="growl"/>
</p:commandButton>
<p:commandButton id="btnPlusFlash" value="View and pass object via flash" icon="pi pi-home" action="#{dfRootView.openLevel1WithFlash}" styleClass="ml-2">
<p:ajax event="dialogReturn" listener="#{dfRootView.onReturnFromLevel1}" update="growl"/>
</p:commandButton>
</div>
<div class="card">
<h5>DialogReturn with Link</h5>
<p:commandLink id="lnk" value="View" action="#{dfRootView.openLevel1}" styleClass="font-bold">
<p:ajax event="dialogReturn" listener="#{dfRootView.onReturnFromLevel1}" update="growl"/>
</p:commandLink>
</div>
<div class="card">
<h5>DialogReturn with a Menu</h5>
<p:menu>
<p:submenu label="Dialog Framework">
<p:menuitem value="View" action="#{dfRootView.openLevel1}">
<p:ajax event="dialogReturn" listener="#{dfRootView.onReturnFromLevel1}" update="growl"/>
</p:menuitem>
</p:submenu>
</p:menu>
</div>
</h:form>
package org.primefaces.showcase.view.df;
import jakarta.enterprise.context.RequestScoped;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.inject.Named;
import java.time.LocalDateTime;
import java.util.HashMap;
import java.util.Map;
import io.quarkus.runtime.annotations.RegisterForReflection;
import org.primefaces.PrimeFaces;
import org.primefaces.event.SelectEvent;
@Named("dfRootView")
@RequestScoped
@RegisterForReflection(serialization = true)
public class DFRootView {
public void openLevel1() {
Map<String, Object> options = new HashMap<String, Object>();
options.put("modal", true);
PrimeFaces.current().dialog().openDynamic("level1", options, null);
}
public void openLevel1WithFlash() {
FacesContext.getCurrentInstance().getExternalContext().getFlash().put("param1", LocalDateTime.now());
openLevel1();
}
public void onReturnFromLevel1(SelectEvent event) {
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Data Returned", event.getObject().toString()));
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="jakarta.faces.html"
xmlns:f="jakarta.faces.core"
xmlns:p="primefaces">
<h:head>
<title>Level 1</title>
<h:outputStylesheet name="css/primeflex3.css" library="showcase"/>
<style>
html {
font-size: 14px;
}
</style>
</h:head>
<h:body>
<div style="padding: 1rem">
<h:form id="level1form">
<p class="ui-widget" style="margin-top: 0">You are at Level 1.</p>
<p:panel header="Value from flash" rendered="#{dfLevel1View.valueFromFlash != null}" styleClass="mb-3">
<p:outputLabel value="#{dfLevel1View.valueFromFlash}" />
</p:panel>
<p:commandButton id="level1btn" value="Go into level 2" icon="pi pi-home" action="#{dfLevel1View.openLevel2}">
<p:ajax event="dialogReturn" listener="#{dfLevel1View.onReturnFromLevel2}"/>
</p:commandButton>
</h:form>
</div>
</h:body>
</html>
package org.primefaces.showcase.view.df;
import jakarta.annotation.PostConstruct;
import jakarta.enterprise.context.RequestScoped;
import jakarta.faces.context.FacesContext;
import jakarta.inject.Named;
import java.time.LocalDateTime;
import java.util.HashMap;
import java.util.Map;
import io.quarkus.runtime.annotations.RegisterForReflection;
import org.primefaces.PrimeFaces;
import org.primefaces.event.SelectEvent;
@Named("dfLevel1View")
@RequestScoped
@RegisterForReflection(serialization = true)
public class DFLevel1View {
private LocalDateTime valueFromFlash;
@PostConstruct
public void init() {
valueFromFlash = (LocalDateTime) FacesContext.getCurrentInstance().getExternalContext().getFlash().get("param1");
}
public void openLevel2() {
Map<String, Object> options = new HashMap<String, Object>();
options.put("modal", true);
PrimeFaces.current().dialog().openDynamic("level2", options, null);
}
public void onReturnFromLevel2(SelectEvent event) {
//pass back to root
PrimeFaces.current().dialog().closeDynamic(event.getObject());
}
public LocalDateTime getValueFromFlash() {
return valueFromFlash;
}
public void setValueFromFlash(LocalDateTime valueFromFlash) {
this.valueFromFlash = valueFromFlash;
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="jakarta.faces.html"
xmlns:p="primefaces">
<h:head>
<title>Level 2</title>
<style>
html {
font-size: 14px;
}
</style>
</h:head>
<h:body>
<div style="padding: 1rem">
<h:form id="level2form">
<p class="ui-widget" style="margin-top: 0">You are at Level 1.</p>
<p:commandButton id="level2button" value="Go to Level 3" icon="pi pi-home"
action="#{dfLevel2View.openLevel3}">
<p:ajax event="dialogReturn" listener="#{dfLevel2View.onReturnFromLevel3}"/>
</p:commandButton>
</h:form>
</div>
</h:body>
</html>
package org.primefaces.showcase.view.df;
import jakarta.enterprise.context.RequestScoped;
import jakarta.inject.Named;
import java.util.HashMap;
import java.util.Map;
import io.quarkus.runtime.annotations.RegisterForReflection;
import org.primefaces.PrimeFaces;
import org.primefaces.event.SelectEvent;
@Named("dfLevel2View")
@RequestScoped
@RegisterForReflection(serialization = true)
public class DFLevel2View {
public void openLevel3() {
Map<String, Object> options = new HashMap<String, Object>();
options.put("modal", true);
PrimeFaces.current().dialog().openDynamic("level3", options, null);
}
public void onReturnFromLevel3(SelectEvent event) {
//pass back to level 1
PrimeFaces.current().dialog().closeDynamic(event.getObject());
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="jakarta.faces.html"
xmlns:p="primefaces">
<h:head>
<title>Level 3</title>
<style>
html {
font-size: 14px;
}
</style>
</h:head>
<h:body>
<div style="padding: 1rem">
<h:form id="level3form">
<p class="ui-widget" style="margin-top: 0">
Welcome to Level 3, enter value and click send to transfer data from level 3 back to level 2.
</p>
<h:panelGrid columns="2" cellpadding="7">
<p:outputLabel for="val" value="Return Value"/>
<p:inputText id="val" value="#{dfLevel3View.val}"/>
</h:panelGrid>
<p:commandButton value="Send" action="#{dfLevel3View.closeDialog()}" style="margin-top: 1rem" />
</h:form>
</div>
</h:body>
</html>
package org.primefaces.showcase.view.df;
import jakarta.enterprise.context.RequestScoped;
import jakarta.inject.Named;
import io.quarkus.runtime.annotations.RegisterForReflection;
import org.primefaces.PrimeFaces;
@Named("dfLevel3View")
@RequestScoped
@RegisterForReflection(serialization = true)
public class DFLevel3View {
private String val;
public String getVal() {
return val;
}
public void setVal(String val) {
this.val = val;
}
public void closeDialog() {
//pass back to level 2
PrimeFaces.current().dialog().closeDynamic(val);
}
}
PrimeFaces: 14.0.8 by
PrimeTek