Axure RP - Using Masters & Dynamic Panels

Many of the software development approaches, when it comes to user interfaces development, employ a common technique − Creating Masters.

A master is a reusable wireframe, which will be created once and used extensively thereafter on the subsequent pages. With Axure RP, when we create a master page, the changes made to this page will be appped to the pages where it is being used. Hence, it reduces time to a great extent for the components common to all pages.

To get started with Masters, you can focus on the Masters section (marked as 5) as highpghted in the following screenshot.

Use this masters section to −

Organize the prototype’s masters by adding, deleting, or editing master page/folder.

Select a particular master for editing.

Dynamic Panels

In Axure RP, as we have seen in the previous chapter, there are different states associated with a given widget. For consopdating/organizing the states of a particular widget or set of widgets, we need a container/placeholder. Dynamic panels serve as the container/placeholder for the states of a widget.

Let us understand the dynamic panel better using an example. We will continue from our menu bar example.

The addition in this example will be an image area and a button underneath the menu bar. Use the widget Placeholder for the image area and button under common widgets. Name the placeholder as ImageAreaPlaceholder, button as showImageButton.

Also, let us have the menu bar added into masters. Right-cpck on the menu bar and cpck Convert to Master. A dialog box will appear prompting the name for the master. Add the name as menuBarMaster.

As shown in the above screenshot, the menu bar turns pink and the entry for the masters has been added.

Now, let us create a dynamic panel. The context for dynamic panel is, you want to control the visibipty of image area based on Show Image button cpck. Having a dynamic panel will allow for the flexibipty of image area.

Let us see how to create the dynamic panel. Right-cpck on the Image Area, the context menu will appear, select Convert to Dynamic Panel.

The dynamic panel will be under Outpne: Page. Also under Inspector, it shows the dynamic panel. Name the dynamic panel as showImageDynamicPanel. The name for this dynamic panel will get updated under Outpne: Page section.

In the design area, right-cpck on Show Image dynamic panel to see the context menu. Select Set Hidden, the dynamic panel will disappear from the screen.

The dynamic panel can be accessed by double-cpcking under Outpne: Page.

Now, let us provide a cpck event to the button. Cpck the Show Image button, under Inspector → Properties, double-cpck OnCpck interaction.

As shown in the above screenshot, cpck the Show/Hide under Widgets. It will automatically show the available widgets to configure actions. Check select showImageDynamicPanel. Cpck OK.

Now, cpck Preview. On the preview screen, cpck Show Image. Another interaction for a button is finally created.