Overview
1. Dynamic Panels Demo
2. Dynamic Panel Widget
3. Editing Dynamic Panel States
4. Hiding Dynamic Panels
5. Interactions and Dynamic Panels
6. Sample Usage
1. Dynamic Panels Demo
Please turn on speakers for audio
To view on Vimeo, please click here.
2. Dynamic Panel Widget
Dynamic Panels are widgets that allow you to demonstrate dynamic functionality in your prototype. Dynamic panels can contain one or more states. Each state contains a collection of widgets. At any time, one state can be made visible or the entire dynamic panel can be made hidden.
Interaction Actions are available to hide, show, and change the state of dynamic panels.
Like other widgets, dynamic panels can be added to the wireframe by dragging and dropping from the Widgets pane.
3. Editing Dynamic Panel States
Double-clicking a dynamic panel in a wireframe will open the Dynamic Panel State Manager dialog. In this dialog, states can be created, renamed, reordered, removed, and edited. The first state in the panel is the default state of the panel.
Selecting a panel state in the Dynamic Panel State Manager and clicking "Edit State", opens the wireframe for that panel state for design.
Once open, panel states can be designed like any other wireframe. A blue dashed outline on the wireframe indicates the boundaries of the dynamic panel.
4. Hiding Dynamic Panels
Dynamic panels can be set to be hidden by default. To do this, right click on the dynamic panel and select Edit Dynamic Panel->Set Hidden. This will hide the panel contents and change the mask for dynamic panels from blue to yellow.
The dynamic panels can be dynamically shown in the prototype using interactions as discussed below.
5. Interactions and Dynamic Panels
Interactions can be designed to interact with dynamic panels. The Interaction Case Properties dialog contains the following set of actions that affect dynamic panels:
- Set Panel state(s) to State(s)
- Show Panel(s)
- Hide Panel(s)
- Toggle Visibility for Panel(s)
- Move Panel(s)
After selecting one of these actions, the panels to interact with and the states to set the panels to (if needed) can be specified by clicking the links in the Actions descriptions.
When selecting the dynamic panels, the dynamic panels are identified by the Label of the dynamic panel assigned in the Annotations & Interactions Pane. If no label has been specified, dynamic panels will be identified as "Unlabeled".
6. Sample Usage
Tab Control:
A dynamic panel can be used to create a tab control. For a tab control with 3 tabs, the tab control is contained in a dynamic panel which has three states, one for each tab. There is an interaction on each of the three tab buttons that changes the state of dynamic panel to the state corresponding to the clicked tab.
To see a sample containing a tab control created using a dynamic panel, visit this
blog entry.
Flyout Menu:
Dynamic panels can be used to prototype custom flyout menus or dynamically show and hide regions based on mouse movements. This can be accomplished using a combination of the OnMouseEnter event and Actions to show and hide dynamic panels.
To see a sample containing a flyout menu created using a dynamic panel, visit this
blog entry.
Basic flyout menus can be created using the Menu widgets as discussed in
AXURE 201 Lecture 3: Menus
Page Initialization:
Dynamic panels can be used in combination with the OnPageLoad event to initialize a page's interface depending on a variable value. More information on this usage is available in
AXURE 202 Lecture 5: OnPageLoad Event.