Dashboard provides a portal like layout with drag&drop based reorder capabilities. Name Default Type Description

Transcription

1 3.22 Dashboard PrimeFaces Userʼs Guide Dashboard provides a portal like layout with drag&drop based reorder capabilities. Info Tag Component Class Component Type Component Family Renderer Type Renderer Class dashboard org.primefaces.component.dashboard.dashboard org.primefaces.component.dashboard org.primefaces.component org.primefaces.component.dashboardrenderer org.primefaces.component.dashboard.dashboardrenderer Attributes Name Default Type Description id null String Unique identifier of the component rendered TRUE Boolean Boolean value to specify the rendering of the component, when set to false component will not be rendered. binding null Object An el expression that maps to a server side UIComponent instance in a backing bean widgetvar null String Name of the client side widget model null Dashboard Model Dashboard model instance representing the layout of the UI. disabled FALSE Boolean Disables reordering feature. style null String Inline style of the dashboard container styleclass null String Style class of the dashboard container Getting started with Dashboard Dashboard is backed by a DashboardModel and consists of panel components. 110

2 <p:dashboard model="#{bean.model"> <p:panel id="sports"> //Sports Content <p:panel id="finance"> //Finance Content //more panels like lifestyle, weather, politics... Dashboard model simply defines the number of columns and the widgets to be placed in each column. See the end of this section for the detailed Dashboard API. public class Bean { private DashboardModel model; public Bean() { 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); State Dashboard is a stateful component, whenever a widget is reordered dashboard model will be updated, by persisting the user changes so you can easily create a stateful dashboard. Ajax Behavior Events reorder is the one and only ajax behavior event provided by dashboard, this event is fired when dashboard panels are reordered. A defined listener will be invoked by passing an org.primefaces.event.dashboardreorderevent instance containing information about reorder. Following dashboard displays a message about the reorder event 111

3 <p:dashboard model="#{bean.model"> <p:ajax event= reorder update= messages listener= #{bean.handlereorder /> <p:growl id="messages" /> public class Bean {... public void handlereorder(dashboardreorderevent event) { String widgetid = event.getwidgetid(); int widgetindex = event.getitemindex(); int columnindex = event.getcolumnindex(); int sendercolumnindex = event.getsendercolumnindex(); //Add facesmessage If a widget is reordered in the same column, sendercolumnindex will be null. This field is populated only when a widget is transferred to a column from another column. Also when the listener is invoked, dashboard has already updated it s model. Disabling Dashboard If you d like to disable reordering feature, set disabled option to true. <p:dashboard disabled="true"...> Toggle, Close and Options Menu Widgets presented in dashboard can be closable, toggleable and have options menu as well, dashboard doesn t implement these by itself as these features are already provided by the panel component. See panel component section for more information. <p:dashboard model="#{dashboardbean.model"> <p:panel id="sports" closable="true" toggleable="true"> //Sports Content 112

4 New Widgets Draggable component is used to add new widgets to the dashboard. This way you can add new panels from outside of the dashboard. <p:dashboard model="#{dashboardbean.model" id="board"> <p:panel id="newwidget" /> <p:draggable for="newwidget" helper="clone" dashboard="board" /> Skinning Dashboard resides in a container element which style and styleclass options apply. Following is the list of structural style classes; Style Class Applies.ui-dashboard.ui-dashboard-column div.ui-state-hover Container element of dashboard Each column in dashboard Placeholder As skinning style classes are global, see the main theming section for more information. Here is an example based on a different theme; Tips Provide a column width using ui-dashboard-column style class otherwise empty columns might not receive new widgets. 113

5 Dashboard Model API org.primefaces.model.dashboardmodel (org.primefaces.model.map.defaultdashboardmodel is the default implementation) Method void addcolumn(dashboardcolumn column) List<DashboardColumn> getcolumns() int getcolumncount() DashboardColumn getcolumn(int index) void transferwidget(dashboardcolumn from, DashboardColumn to, String widgetid, int index) Description Adds a column to the dashboard Returns all columns in dashboard Returns the number of columns in dashboard Returns the dashboard column at given index Relocates the widget identifed with widget id to the given index of the new column from old column. org.primefaces.model.dashboardcolumn (org.primefaces.model.map.defaultdashboardmodel is the default implementation) Method void removewidget(string widgetid) List<String> getwidgets() int getwidgetcount() String getwidget(int index) void addwidget(string widgetid) void addwidget(int index, String widgetid) void reorderwidget(int index, String widgetid) Description Removes the widget with the given id Returns the ids of widgets in column Returns the count of widgets in column Returns the widget id with the given index Adds a new widget with the given id Adds a new widget at given index Updates the index of widget in column 114