Here is the code I am using, it is the same as the showcase:
Code: Select all
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<body>
<ui:composition template="./CL_Template.xhtml">
<ui:define name="head">
<style type="text/css">
.ui-panel, div.ui-state-hover {
margin: 10px;
width:200px;
}
.ui-dashboard-column {
width:220px;
}
</style>
</ui:define>
<ui:define name="content">
<h:body>
<h:form>
<p:growl id="growl" showDetail="true" />
<p:dashboard id="board" model="#{dashboardBean.model}"
reorderListener="#{dashboardBean.handleReorder}" onReorderUpdate="growl">
<p:panel id="sports" header="Sports" toggleable="true" closable="true"
closeListener="#{dashboardBean.handleClose}" onCloseUpdate="growl"
toggleListener="#{dashboardBean.handleToggle}" onToggleUpdate="growl" widgetVar="sportsWidget">
<h:outputText value="Sports Content: How much content will this little thing actually hold?" />
<f:facet name="options">
<p:menu>
<p:submenu label="Settings">
<p:menuitem value="Toggle" url="#" icon="/images/update.png"
onclick="sportsWidget.toggle()"/>
<p:menuitem value="Remove" url="#" icon="/images/delete.png"
onclick="sportsWidget.close()"/>
</p:submenu>
</p:menu>
</f:facet>
</p:panel>
<p:panel id="finance" header="Finance" toggleable="true" closable="true"
closeListener="#{dashboardBean.handleClose}" onCloseUpdate="growl"
toggleListener="#{dashboardBean.handleToggle}" onToggleUpdate="growl" widgetVar="financeWidget">
<h:outputText value="Finance Content" />
<f:facet name="options">
<p:menu>
<p:submenu label="Settings">
<p:menuitem value="Toggle" url="#" icon="/images/update.png"
onclick="financeWidget.toggle()"/>
<p:menuitem value="Remove" url="#" icon="/images/delete.png"
onclick="financeWidget.close()"/>
</p:submenu>
</p:menu>
</f:facet>
</p:panel>
<p:panel id="lifestyle" header="Lifestyle" toggleable="true" closable="true"
closeListener="#{dashboardBean.handleClose}" onCloseUpdate="growl"
toggleListener="#{dashboardBean.handleToggle}" onToggleUpdate="growl"
widgetVar="lifestyleWidget">
<h:outputText value="Lifestyle Content" />
<f:facet name="options">
<p:menu>
<p:submenu label="Settings">
<p:menuitem value="Toggle" url="#" icon="/images/update.png"
onclick="lifestyleWidget.toggle()"/>
<p:menuitem value="Remove" url="#" icon="/images/delete.png"
onclick="lifestyleWidget.close()"/>
</p:submenu>
</p:menu>
</f:facet>
</p:panel>
<p:panel id="weather" header="Weather" toggleable="true" closable="true"
closeListener="#{dashboardBean.handleClose}" onCloseUpdate="growl"
toggleListener="#{dashboardBean.handleToggle}" onToggleUpdate="growl"
widgetVar="weatherWidget">
<h:outputText value="Weather Content" />
<f:facet name="options">
<p:menu>
<p:submenu label="Settings">
<p:menuitem value="Toggle" url="#" icon="/images/update.png"
onclick="weatherWidget.toggle()"/>
<p:menuitem value="Remove" url="#" icon="/images/delete.png"
onclick="weatherWidget.close()"/>
</p:submenu>
</p:menu>
</f:facet>
</p:panel>
<p:panel id="politics" header="Politics" toggleable="true" closable="true"
closeListener="#{dashboardBean.handleClose}" onCloseUpdate="growl"
toggleListener="#{dashboardBean.handleToggle}" onToggleUpdate="growl"
widgetVar="politicsWidget">
<h:outputText value="Politics Content" />
<f:facet name="options">
<p:menu>
<p:submenu label="Settings">
<p:menuitem value="Toggle" url="#" icon="/images/update.png"
onclick="politicsWidget.toggle()"/>
<p:menuitem value="Remove" url="#" icon="/images/delete.png"
onclick="politicsWidget.close()"/>
</p:submenu>
</p:menu>
</f:facet>
</p:panel>
</p:dashboard>
<div style="clear:both" />
<br />
<h:panelGrid columns="3">
<p:panel id="travel" header="Travel" toggleable="true" closable="true" style="width:200px">
<h:outputText value="Travel Content" />
</p:panel>
<p:draggable for="travel" dashboard="board" helper="clone"/>
<p:panel id="tv" header="TV" toggleable="true" closable="true" style="width:200px">
<h:outputText value="TV Content" />
</p:panel>
<p:draggable for="tv" dashboard="board" helper="clone"/>
</h:panelGrid>
</h:form>
</h:body>
</ui:define>
</ui:composition>
</body>
</html>
