Drag Drop Zones with Vertical Layout Stacked horizontally side by side: Basically, in this scenario, we have three drag drop zones with widths set at 33% each, and height set at 100%. This setup prevents the appearance of the scrollbar, and the dashlets are individually positioned to occupy a set percentage of the zones available area. So the layout mechanism here is:
- Dashboard : Horizontal Layout
- Drag Drop Zones: Vertical Layout
- Please note, the mechanism to specify the Dashboard Layout is via the "contentLayoutFunction". This should return a layout object. There is also the maximizedContentLayoutFunction, which is the layout used when the user maximizes a dashlet. The only reason you would use this is to define padding and such in the maximize view. The drag drop zones however, define their layouts inline, as you can observe from the examples.
- In this type of a layout, you may want to set the "movable" and "resizable" flags of the dashlets to false. This is because the layout and positions of the dashlets are calculated by the layout you choose. If you enable these flags, the users positions clash with the layouts calculations and it results in a substandard experience. However, these layouts are a good choice for the "draggable" flag, where the user can drag and drop dashlets so dashlets that are important to the user can appear on top, and with the preference persistence mechanism, these positions are then remembered when the user loads the dashboard in the future.
Drag Drop Zones with Horizontal Layout Stacked Vertically : Similar to the example above, but the drag drop zones are stacked vertically here. So the layout mechanism here is:
- Dashboard : Vertical Layout
- Drag Drop Zones: Horizontal Layout
Asymmetrical Drag Drop Zones: In this case, the dashboard simply has a basic layout. In this specific example, we have forced the zones to fit inside the visible area of the dashboard, so there is no need for a scroll bar. However, this is not a must. If you wish to add a scrollbar, please refer to the example below. You simply really need to wrap the contentGroup in a scroller. In this example, we have:
- Dashboard : Basic Layout
- Drag Drop Zones: Layout defined per drag drop zone.
Single Drag Drop Zone, Basic Layout: In this example, we simply have one zone. The dashlets define x (or left), y (or top), width, height attributes. These are then used to render the dashboard. This example also demonstrates addition of scrollable content. The idea is simple. If the height of the dashlets and their X/Y co-ordinates make the drawn dashlets extend beyond the visual bounds of the dashboard containers view port, scroll bars will be shown. The scroller is added via a custom skin, as is demonstrated in the com.flexicious.sample.dashboard.customskins.bright.DashboardSkin
- Dashboard : Basic Layout
- Drag Drop Zone: Basic Layout.
- Tip: In this layout mechanism, you might wish to use the design view to define initial positions and sizes of your dashlets. The way to do this would be to temporarily move your dashlets inside the dashboard tag for using the design view, and then moving them back into the only drag drop zone in mxml once you are done positioning your dashlets.
- In this type of a layout, you may want to set the "movable" and "resizable" flags of the dashlets to true. This is because a basic layout is similar to a canvas, where each component defines its own bounds. So the user is free to resize, move and drag dashlets around as they see fit. With the preference persistence mechanism, these positions are then remembered when the user loads the dashboard in the future. Since there is just one drag drop zone, it does not make sense to set the "draggable" flag, since there are no other zones to drag to, and the order of children dashlets does not matter from a positioning persepective.