This blog post demonstrates some of the new features in Axure RP Pro Version 4.4, which is available in beta here. Here are links to the sample file and generated prototype that are discussed in this article.
IntroTo4-4Features RP File
IntroTo4-4Features Sample Prototype
Affecting Dynamic Panels Inside of Masters
In this version, you now have the ability to affect dynamic panels within masters from the containing page, allowing for increased reuse of masters. In this sample, the header on all of the pages is a single master, but you will notice that each page has a different tab button in the header selected.
Taking a look at the Header master, you will see that the tab menu was created using button shape widgets. The buttons are gray indicating the "unselected" mode. Each button has an OnClick interaction linking to their respective page (i.e., the "Home" tab is linked to the Home page). Each tab button then has a dynamic panel placed on top of it. The "Home" button, for example, has a dynamic panel called "Home Selected Panel" on top of it. That panel has a single state containing a copy of the Home button but this time with a white fill color indicating "selected". The dynamic panel is set it to hidden by default.
Now, depending on which page this master is on, we want to show the "Selected" dynamic panel for that page. This can be accomplished using the OnPageLoad event on the pages.
For example, on the Home page, the OnPageLoad interaction is set to show the Home Selected Panel which is in the Header master which is on the Template master. After this is done for each page, clicking on each tab button in the prototype will take you to the linked page and show that page's selected tab button.
Droplist Interaction
With the new OnChange interaction, you have the ability to specify an action based on the value selected in a droplist. In our sample on the Template master, we have a droplist with five options: Blank, Home, Products, Services, and About Us.
Four OnChange cases (one for each page; the blank option does nothing) were added to the droplist.
When creating each case, select "If Value = "String"" and specify the String value to be one of the values in the droplist. For example, "Home". Then select "Open Link in Current Window" and specify the page to link to. This was done for each of the cases, entering "Products" as the "String" for the second case, "Services" for the third case, and "About Us" for the fourth case, and linking it to the respective page. After this is done, selecting a page in the droplist will take you directly to that page.
Other Action
An action called "Other" has been added to the list of available actions for interactions. With the "Other" action, you can enter a textual description of an action. This was meant as another way to capture actions that the prototypes may not support such as sending an email.
In this sample, the "Email Me!" button has an OnClick interaction with an "Other" action that has the description, "Send the latest newsletter to the email address". When the prototype is generated, clicking the button will show a popup window with this description.
Single File Transfer (Generating a prototype to a .chm file)
You can now generate prototypes into a single .chm file for easy distribution. This is an alternative to zipping and sending the prototype files or publishing the prototype to a server. ".chm" is Microsoft's HTML Help format. Most computers running Windows will be able to open .chm files without needing to install an additional player.
To generate .chm files, you will need the Microsoft HTML Help Workshop installed on your computer. If you do not have it installed, it is free to download and install here. Once installed, you will need to click Locate hhc.exe in the Distribution section and select the hhc.exe installed with the Microsoft HTML Help Workshop. In a typical installation, it will be located at C:\Program Files\HTML Help Workshop\hhc.exe.
If the "Create HTML Help File" option is selected and the hhc.exe file is located, a [filename].chm file containing the prototype will be generated to the folder where the prototype was generated. The associated .hhc and .hhp files will also be in the folder. If you are familiar with HTML Help, you can use those files to modify and recompile the .chm file using the Microsoft HTML Help Workshop.
Please note that some email programs do not allow sending files with a .chm extension so you may need to zip the file before sending.
As mentioned before, in most cases, the recipient of the file will be able to view the prototype by double-clicking the .chm file without installing a player. When viewing the starting Help page in the .chm prototype, the recipient will have the option to open the prototype in a browser or continue viewing the prototype in the HTML Help viewer.
Placeholder Widget
Finally, the new placeholder widget is used throughout this sample. We hope it will come in handy for those who appreciate the classic "boxes and arrows" style wireframing.
To save some scrolling, here are the links to this sample one more time:
IntroTo4-4Features RP File
IntroTo4-4Features Sample Prototype
We hope you get a chance to try out these features and the other features included in this beta. Let us know what you think! Please report any issues you might find to support@axure.com or in the forums. Enjoy!
