Flow Collapse Buttons
Description
Allows you to put a button in a Panel (only applies if the Panel is contained within a PanelLayout) to 'collapse the flow' of Panels that come 'before' the current Panel. By 'collapsing the flow' of a Panel, you make the Panel invisible.
Discussion
Watch the video below to learn more:
The following set of images help to explain the concept:
The image below shows a Panel Layout with 3 child Panel (the child Panels can be PanelCards, PanelNavigators or PanelLayouts). The PanelLayout flow is set to LTR so that the Panels 'flow' from left to right. All of the Panels in the PanelLayout are currently visible. PanelCard1 and PanelCard2 both have an explicit size (e.g. 100px) and PanelCard3 takes up the remaining available space.
Now, let's assume that PanelCard3 has a button (either in the Panel body itself, but more likely in its header or footer) to 'collapse the flow' (of the Panels that come before it).
If this button was pressed, then the Panels that come before it (PanelCard1 and PanelCard2 - because the flow direction is LTR) will get 'collapsed'. Their widths will get set to zero using an animation.
When the animation has completed, Panel Card3 will consume all of the available space in its parent PanelLayout.
The 'Flow collapse' button acts as a toggle. So, if the button were pressed a second time (while PanelCard1 and PanelCard2 are collapsed), then PanelCard1 and PanelCard2 will be re-shown, again, using an animation.
When would you use a 'Flow collapse button'?
Assume that in the above example, PanelCard1 and PanelCard2 contain navigation or menu controls and that PanelCard3 is the main 'work' area of your application. Adding a 'Flow collapse button' in PanelCard3 allows users to toggle 'full screen' mode on and off, taking advantage of the entire screen to display the contents of PanelCard3. When the user wishes to navigate elsewhere in the application, they can click the 'Flow collapse button' to expose the menu and navigation controls.
Defining a 'Flow Collapse' Button
To define a 'Flow Collapse' button for any Panel (PanelCard, PanelNavigator or PanelLayout), set the 'Has a 'flow collapse' button' property in the Panel's Property Sheet.
Once you click this property, you can specify the ID of the button that will act as a 'flow collapse' button.
If you have defined an onClick event for the flow collapse button, the event will be ignored since the button is being 'hijacked' to perform the 'flow collapse' action.
The builder allows you to define separate icons to use for when the Panels are in the collapsed state and when they are in the expanded state.
