Note that this can be readily approximated now using the ace:list component with nested ace:panels. See the http://icefaces-showcase.icesoft.org/showcase.jsf?grp=aceMenu&exp=listBlockComplexBean demo for an approximate example.

r52351: added initial version of the ace:dashboard component

This component is based on the gridster.js third party library: http://dsmorse.github.io/gridster.js/

r52354: changed markup to use <div>'s instead of <ul> and <li>'s; removed 'gridster' style class from root and adjusted css rules to use 'ice-ace-dashboard'; set the header to be the draggable handle, instead of the whole pane; added paddings to pane header and pane body; added dotted contour to drop placeholder

r52402: fixed bug in gridster library; added listener for close button to close a panel with the underlying widget and improved the button's styling; added hover styling for the close button and more padding and rounded corners; added global resizable attribute; added global draggable attribute; added sizeX and sizeY attributes; added paneWidth and paneHeight attributes; added marginX and marginY attributes; added logic to assign a column to panes, according to the maxColumns property as well as a row; implemented approach to handle the size and position state in an efficient way that wouldn't trigger dynamic updated every time something changes

r52404: added dragStop, resize, and close ajax events; added logic for assigning specific row and column coordinates to all panes, when they aren't explicitly set; added system to keep the size and position data consistent between the client and the server for all panes after each ajax request; these changes, in turn, will allow to persist the state of the dashboard across sessions if desired by the app developer, while still allowing to easily build a dashboard without having to code a model class if state persistence is not required/desired

r52408: added support to make changes to the size and position state programmatically; added logic for the closed state and thus make dynamic updates more efficient after closing a pane by avoiding a full markup update; added pane footers; added localized message for close button; removed toggle button code; sanitized maxColumns value; removed unused attributes

r52409: added ace:dashboard demo to the showcase

r49996: added QA test app

r52437: introduced table layout in order to render footer at the bottom of the pane and make content div take all available height; removed css resources from Meta class, since they are already included in combined.css; change resize handler to use fontawesome, so it looks well on any theme; added destroy function; added custom event classes for ajax events; changed close event to silent mode, so that panes below the one closed stay where they are

Review Notes

• In the demos it's possible for the dashboard panes to be positioned partially off the right side of the visible demo area. Can we prevent that or make it a scrollable region?
• In the Dynamic Panes demo if you add more panes than will fit on the page it stops working, you can't close the panes or add any, even if you reload the page. Should use a vertically scrollable region for the dashboard to live inside?
• It would be more flexible if each dashboardPane could be set to resizable, moveable, or closable. That way you could have panes that are fixed in size or location and cannot be removed, plus others that can. Is that a feasible improvement?
• Missing Wiki docs

Regarding the first bullet point, I don't see that issue on Chrome, FF, and Edge on Windows 10. The whole dashboard fits perfectly with enough white space on both sides. Did you mean make it more centered?

Regarding the third bullet point, each dashboardPane already has its own 'closable' attribute. As for resizable and draggable, the underlying javascript library (gridster.js) doesn't offer that possibility. Either resizing is enabled for all panes or not at all and either dragging is enabled for all panes or not at all. One particular situation is that, by dragging or resizing a pane, it's possible to displace other panes that are on the way.

r52457: demo modifications for correctness and to avoid issues; created all new panes with the same default minumum size of 1, in order to make correct size and position calculations and this avoid the issue of the dashboard becoming unusable due to javascript errors; also added logic to avoid adding more panes than the maximum number of rows supported by gridster.js (15 rows)

r52458: added code to assume a minimum size of 1, if somehow the x and y sizes are less than 1, in order to make correct size and position calculations

With these fixes the second bullet point is solved.

Added wiki pages for ace:dashboard and ace:dashboardPane, including some important observations for their use.