Basic usage with right-click trigger and grouped items.
Right-click here to open the CommandPalette
▶File
New File
Open File
Save
Save As...
▶View
Zoom In
Zoom Out
Fullscreen
Source
<h:panelGroup id="commandPaletteTarget" layout="block"
style="border:2px solid #c8c8c8; border-radius:3px; padding:40px; text-align:center; cursor:context-menu;
background:#f9f9f9; font-size:14px; color:#555; user-select:none;">
Right-click here to open the CommandPalette
</h:panelGroup>
<pe:commandPalette id="palette" for="commandPaletteTarget"
label="Actions" filterPlaceholder="Search actions..." width="260" height="350">
<pe:commandPaletteItem group="File" value="new" label="New File"/>
<pe:commandPaletteItem group="File" value="open" label="Open File"/>
<pe:commandPaletteItem group="File" value="save" label="Save"/>
<pe:commandPaletteItem group="File" value="saveAs" label="Save As..."/>
<pe:commandPaletteItem group="Edit" value="undo" label="Undo"/>
<pe:commandPaletteItem group="Edit" value="redo" label="Redo"/>
<pe:commandPaletteItem group="Edit" value="cut" label="Cut"/>
<pe:commandPaletteItem group="Edit" value="copy" label="Copy"/>
<pe:commandPaletteItem group="Edit" value="paste" label="Paste"/>
<pe:commandPaletteItem group="View" value="zoomIn" label="Zoom In"/>
<pe:commandPaletteItem group="View" value="zoomOut" label="Zoom Out"/>
<pe:commandPaletteItem group="View" value="fullscreen" label="Fullscreen"/>
</pe:commandPalette>
@Named
@ViewScoped
public class CommandPaletteController implements Serializable {
private static final long serialVersionUID = 1L;
public void onItemSelect(final SelectEvent<CommandPaletteSelection> event) {
final CommandPaletteSelection selection = event.getObject();
final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO,
"Item Selected",
"Group: " + selection.getGroup()
+ ", Value: " + selection.getValue()
+ ", Label: " + selection.getLabel());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
}