Dashboard
Dashboard is a layout component featuring dragdrop based content reordering similar to portal environments.
Documentation
<style type="text/css">
.ui-panel, div.ui-state-hover {
margin: 10px;
width:200px;
}
.ui-dashboard-column {
width:220px;
}
</style>
<div style="height:500px">
<h:form>
<p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true" />
<p:dashboard id="board" model="#{dashboardView.model}">
<p:ajax event="reorder" listener="#{dashboardView.handleReorder}" update="msgs" />
<p:panel id="sports" header="Sports">
<h:outputText value="Sports Content" />
</p:panel>
<p:panel id="finance" header="Finance">
<h:outputText value="Finance Content" />
</p:panel>
<p:panel id="lifestyle" header="Lifestyle">
<h:outputText value="Lifestyle Content" />
</p:panel>
<p:panel id="weather" header="Weather">
<h:outputText value="Weather Content" />
</p:panel>
<p:panel id="politics" header="Politics">
<h:outputText value="Politics Content" />
</p:panel>
</p:dashboard>
<div style="clear:both" />
</h:form>
</div>
@Named
@ViewScoped
public class DashboardView implements Serializable {
private DashboardModel model;
@PostConstruct
public void init() {
model = new DefaultDashboardModel();
DashboardColumn column1 = new DefaultDashboardColumn();
DashboardColumn column2 = new DefaultDashboardColumn();
DashboardColumn column3 = new DefaultDashboardColumn();
column1.addWidget("sports");
column1.addWidget("finance");
column2.addWidget("lifestyle");
column2.addWidget("weather");
column3.addWidget("politics");
model.addColumn(column1);
model.addColumn(column2);
model.addColumn(column3);
}
public void handleReorder(DashboardReorderEvent event) {
FacesMessage message = new FacesMessage();
message.setSeverity(FacesMessage.SEVERITY_INFO);
message.setSummary("Reordered: " + event.getWidgetId());
message.setDetail("Item index: " + event.getItemIndex() + ", Column index: " + event.getColumnIndex() + ", Sender index: " + event.getSenderColumnIndex());
addMessage(message);
}
public void handleClose(CloseEvent event) {
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Panel Closed", "Closed panel id:'" + event.getComponent().getId() + "'");
addMessage(message);
}
public void handleToggle(ToggleEvent event) {
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, event.getComponent().getId() + " toggled", "Status:" + event.getVisibility().name());
addMessage(message);
}
private void addMessage(FacesMessage message) {
FacesContext.getCurrentInstance().addMessage(null, message);
}
public DashboardModel getModel() {
return model;
}
}
