Axure

Axure RP Update Supports Firefox 3

2008-06-16T23:00:00Z

Firefox 3 is expected to release on June 17. Like last time, we have released an update to support the new version of Firefox. Thank you everyone who reported issues when using the Firefox 3 release candidates.

The latest Axure RP update (5.0.0.1529) is available at http://www.axure.com/downloads.aspx. In addition to the Firefox updates, it also includes fixes for shared projects, the Word 2007 specification generator, and other minor fixes. To view a more detailed list, please visit the release history.

This is a free update for licenses or renewals purchased after 3/15/2007. If you have a licensed copy of 5.0, you can update to this release without a renewal.

For everyone using Axure RP versions 4.6 or 4.4, we have also released updates to those versions to support the Firefox changes. Those updates are available at http://www.axure.com/previousVersions.aspx (4.6.2.1546 and 4.4.1.801).

We appreciate any feedback, suggestions, or bug reports. Please send them to support@axure.com or discuss them on the Axure RP forum at http://www.axure.com/cs/forums.

Axure RP Pro 5 and the New Axure.com

2008-04-22T00:38:00Z

Axure RP Pro 5 is now available for download at http://www.axure.com/downloads.aspx. This release focuses on collaboration, more interactions, and faster, more customizable specification generation.

New Features
Shared Projects enables multiple people to work on a project at the same time and also keeps a history of revisions to the project. A demo can be found in the Shared Projects online training.

New interactions including OnFocus and OnLostFocus events, anchor links, and moving dynamic panels. Check out the blog post "Anchors, Moving Panels, and Focus Events" for a sample.

Word 2007 Specification Generator offering more customizations including a two-column format and much faster generation.

Popular requests like detachable panes and gradient and alpha color support.

For a more detailed list click here.

Important Information
Files created in version 5 will not open in previous versions of Axure RP. Version 5 will convert legacy files to the new format.

Axure RP Pro 5 is a free upgrade for customers who purchased or renewed a license after March 15, 2007. Other customers will need to purchase a renewal before upgrading.

If your trial had previously expired, installing version 5 will give you a new 30 day trial.

The New Axure.com
We are happy to release the new Axure website. We have a new logo and content including the flash tour, updated online training, and a section to compare features and project benefits. Let us know what you think.

Want the latest updates, discussions, and tutorials?
Join the Axure Community Site and we'll keep you connected. After joining, subscribe to the forum for discussions and the blog for tutorials and release announcements.

We appreciate any feedback, suggestions, or bug reports. Please send them to support@axure.com or discuss them on the Axure RP forum.

Axure RP Pro 5.0 Beta is Now Available!

2008-03-01T00:30:00Z

The beta for Axure RP Pro Version 5.0 is now available for download at http://www.axure.com/axurerp5beta.aspx!

This release enables multiple people to work on the same Axure RP project at the same time and maintains a history of revisions to the project. It also includes new interactions, a new specification generator, as well as enhancements to the interface and designer.

Check out the online training for a guide to using the Shared Projects feature, as well as our blog post "Anchors, Moving Panels, and Focus Events" to view examples of how to use some of the new interactions. For a more detailed description of new features, click here.

This beta can be installed without uninstalling version 4, but please note that files created in Axure RP 5.0 will not open in previous versions. Axure RP Pro 5.0 will convert earlier files to the new format.

This beta will expire on April 30, 2008. A valid beta will be available until the final release of Axure RP Pro 5.0 expected in early April, so your work will not be interrupted.

Is this a free update? If you have purchased Axure RP or a renewal after March 15, 2007 or plan to purchase between now and the final release, you will get version 5.0 as a free update. All other customers will need to purchase a renewal to upgrade. You can login to the customer portal with the account information that was created when your licenses were purchased to see when your maintenance period expires.

Please report any issues you might find to support@axure.com or in the forums.

Anchors, Moving Panels, and Focus Events

2008-01-07T20:20:00Z

This article presents a few of the new features coming in Axure RP Pro Version 5, which are included in the alpha release Shared Projects Preview.

Scroll to Image Map Region (Anchors)
Moving Dynamic Panels
OnFocus and OnLostFocus Events

Here are links to the sample file and generated prototype that are discussed in this article.

Version5PreviewFeatures RP File (Opens in Shared Projects Preview version or later)
Version5PreviewFeatures Sample Prototype

Scroll to Image Map Region (Anchors)

The action to Scroll to Image Map Region allows you to scroll a page in response to an event like a user clicking on a link. You can choose to scroll the page horizontally, vertically or both to the location of an image map region.

In the page "Example 1" in the sample, we have created a list of topics that link to corresponding topic sections on the page.

We placed an image map region over the titles of each topic section that we want to scroll to. Then, we added a case to the OnClick event of each of the topic links with an action to "Scroll to Image Map Region", and specified the appropriate image map region.

The Select Image Map Region dialog allows you to select the Image Map Region and choose whether to scroll horizontally only, vertically only, or horizontally and vertically.

We also added "Top" links at the end of each section that scroll back to the Top of the page where the Help header is.

Moving Dynamic Panels

The Move Dynamic Panels action allows you to move a dynamic panel in response to an event like OnClick or OnMouseEnter. A common use of this feature would be to more easily prototype expanding and collapsing regions on a form.

In the page "Example 2" in the sample, we have created a survey form with optional questions that are shown and hidden based on answers to other questions. When the questions are shown, all of the questions beneath them are moved down. When they are hidden, the questions are moved back up.

On the page, we have Yes and No radio buttons next to the question "Were you traveling with children?". Beneath that is a dynamic panel labeled "Optional Question 1" panel (set to hidden) which includes the questions we would like to show and hide based on whether Yes or No is selected. Then, there is a dynamic panel labeled "Form 1" that contains the remaining questions on the form that will be moved up and down when showing and hiding the "Optional Question 1" panel.

The OnClick events on the Yes and No radio buttons have cases with actions to Show/Hide the "Optional Question 1" panel and move the "Form 1" panel down or up. For the Yes radio button, we added the action to show the "Optional Question 1" panel and the action to "Moved Panel(s)".

Clicking on the link for Move Panel in Step 3 of the Interactions Case Properties dialog, we selected "Move Form 1 to (x,y)" and enter the coordinates we would like to move the panel to. You can also choose to "Move widget by" a certain number of pixels to the left/right and up/down.

Within the "Form 1" dynamic panel, there are a few more dynamic panels that expand and collapse optional questions. It is important to note that the containing dynamic panel should be large enough to show all of the contained panels when they are moved.

OnFocus and OnLostFocus Events

The OnFocus and OnLostFocus Events allow you to perform actions when tabbing or clicking on to and off of form widgets (Text Field, Text Area, Droplist, List Box, Checkbox, Radio Button). In Example 2 of the sample, we added actions to the OnFocus and OnLostFocus events for the "Date of trip" fields to show and hide a dynamic panel containing a date formatting tip. This was also done for the three fields containing dollar amounts to show formatting tips.

Here are the links to this sample one more time:

Version5PreviewFeatures RP File (Opens in Shared Projects Preview version or later)
Version5PreviewFeatures Sample Prototype

We hope you get a chance to try out these features and the other features included in this preview release. Let us know what you think! Please report any issues you might find to support@axure.com or in the forums. Enjoy!

Axure RP Pro - Shared Projects Preview (Alpha)

2007-12-18T19:00:00Z

This release is a preview of the Shared Project feature which will be part of the Version 5.0 scheduled for Q1 2008. We are looking for early feedback on this feature, but as an alpha release, some bugs should be expected.

The Shared Projects feature enables multiple people to work on the same Axure RP project at the same time. It also maintains a history of revisions to the project.

For this preview, we recommend limiting shared projects to 300 combined pages and masters and up to five people working on a project.

Other features in this preview include:

Scroll to Image Map Region (Anchors)
Moving Dynamic Panels
OnFocus and OnLostFocus events

More information and the download are available here.

To learn to use Shared Projects and watch a video demo, visit the online training.

This preview can be installed without uninstalling previous versions, but please note that files created in the Shared Projects Feature Preview will not open in previous versions of Axure RP. Files created in earlier versions will be converted to the new format.

If you have a license key that is valid for 4.6, you can use this preview without interruption. If you do not have a current license key, the preview will provide you with a 30 day evaluation.

Will this be a free update? Version 5.0 will be a free update for customers who purchased a license or a maintenance renewal for Axure RP Pro within 12 months of that release. Other customers will need to purchase a renewal before upgrading.

Please report any issues you might find to support@axure.com or in the forums.

Axure SpecGen Tool Update

2007-10-05T19:00:00Z

An update to the Axure SpecGen Tool is now available for download at http://www.axure.com/axurespecgentool.aspx. A detailed list of new features is available here.

The SpecGen Tool is a free application. It is an example of how the Axure RP API can be used to read data from an Axure RP file.

New Features
The SpecGen Tool improves on the specification generation built into Axure RP by incorporating new technologies and features.

Improved speed (often 10 to 20 times faster)
Option to collapse master annotations into page sections
Option to place annotation tables directly below each page and dynamic panel screenshot
Option to use a two column-specification format
Ability to separate annotations into multiple tables

To see a video on how to use the Axure SpecGen Tool and find out more information, please visit http://www.axure.com/axurespecgentool.aspx.

Source Code
The source code for the Axure SpecGen Tool is available to Axure RP Pro customers upon request. To request a copy, please send an email to support@axure.com.

Want the latest updates, discussions, and tutorials?
Join the Axure Community Site and we'll keep you connected. After joining, subscribe to the forum for discussions and subscribe to the blog for tutorials and release announcements.

We appreciate any feedback, suggestions, or bug reports. Please send them to support@axure.com or discuss them on the Axure RP forum at http://www.axure.com/cs/forums.

Axure RP Pro 4.6 Updates and Safari Compatibility

2007-10-01T23:20:00Z

Since the release of Axure RP Pro version 4.6 in July, we have released several minor updates addressing bugs and minor requests. The latest version (4.6.2.946) was released on 9/21/07 and is available at http://www.axure.com/downloads.aspx. This is a free update for licenses or renewals purchased after 6/1/2006. If you have a licensed copy of 4.6, you can update to this release without a renewal.

The latest update of Axure RP now unofficially supports viewing prototypes in Safari. This was first mentioned on the Rev2 blog.

Some other fixes and updates since the initial release of 4.6 include:

Added OnKeyUp event to the Text Area widget
Added the ability to set the value in a Text Field to the value in a Droplist or Listbox
Fix for prototype error when single and double quotes were used in Labels
Fix for intermittent error generating prototypes resulting in Windows error dialog
Fixed Clear All link in the Condition Builder dialog
Dynamic panels on a page no longer automatically cause the prototype browser to have a horizontal scroll

To view a more detailed list, please visit the release history.

We appreciate any feedback, suggestions, or bug reports. Please send them to support@axure.com or discuss them on the Axure RP forum at http://www.axure.com/cs/forums

DUX 2007 and Upcoming Conference Deadlines

2007-09-17T19:20:00Z

The DUX 2007 conference is coming up on November 5-7 in Chicago, and Axure is a proud sponsor of this year's event! The theme this year is "Changing roles & shifting landscapes: Social media and networks are creating new design challenges. How do we inspire and enable people's ability to contribute, create, personalize, and share experiences? How are design roles changing in the face of this shifting landscape?".

We are planning to attend/participate in a number of conferences next year. For anyone interested in presenting or participating in upcoming conferences, several submission deadlines are fast approaching! Here is a partial list with upcoming deadlines for papers or presentations:

Interaction 08

September 15: Lightning Sessions slots

More Info:
http://interaction08.ixda.org/submissions.htm

CHI 2008

September 19: The Human-Computer Interaction archive (Papers and notes)
October 3: Workshops (participants), Case Studies, Doctoral Consortium, Panels, Interactivity
January 8: Special Interest Groups, Works in Progress, alt.chi, Competitions

More Info:
http://www.chi2008.org/authors.html

IA Summit

October 31: Call for papers
November 31: Research Papers

More Info:
http://www.iasummit.org/2008/call_main.html

UPA 2008

October 1: Presentations, Papers, Panels, Tutorials, Advanced Topics, Workshops, Submissions
January 21: Idea Markets, Posters

More Info:
http://usabilityprofessionals.org/conference/2008/call-for-participation.htm

Please let us know if you have any questions at support@axure.com!

Axure SpecGen Tool Preview - API Sample

2007-09-06T01:30:00Z

NOTE: An update to the Axure SpecGen Tool has been released. You can download and find out more information at http://www.axure.com/axurespecgentool.aspx.

Hello everyone! My name is Nick Hunt and I have been developing a specification generation tool called SpecGen using the Axure RP API. The SpecGen Tool is free, much faster than the built in specification generator, and will serve as an open source example of how to use the API to generate specification documents.

The SpecGen Tool improves on the specification generation built into Axure RP by incorporating new technologies and features. This “preview” release of the SpecGen tool features the following benefits:

Much improved speed (often 10 to 20 times faster)
Formatting option to generate multiple annotation tables
Simpler, more powerful formatting of the specification by managing a single input document
The ability to generate Microsoft Word specifications on a computer without Microsoft Word installed

More features are planned and the source code will be released in the coming weeks.

The installer for the preview release of the SpecGen Tool can be downloaded here.

SpecGen requires and will automatically install the Microsoft .NET 3.0 Framework if it is not installed.

Also, Word 2007 or Word 2000/XP/2003 with the Office 2007 Compatibility Pack (free) is required to edit and view the new .docx file format that SpecGen generates. If you are not using Word 2007 and do not have the Compatibility Pack installed, the Compatibility Pack will be installed with the SpecGen Tool.

Axure RP does not need to be installed on the computer in order to use SpecGen.

Note: If you are distributing the specification to others, you may want to open it in Word and save the generated .docx file as a .doc file for those who do not have Word 2007 or the Compatibility Pack installed.

Using the SpecGen Tool

Getting Started
After installing, run SpecGen
Click “New spec config file“
Select an Axure RP file for spec generation.
Click “Generate”.

Configuring the specification
Most of the configurations in the SpecGen Tool are similar to the built in specification generator.

One noticeable difference is the way the specification’s formatting is configured.

To configure the styles, add content to the document, or add headers and footers:

Create a new .docx document. A good place to start is to create a copy of the default .docx file by clicking the “here” hyperlink in the Word Template section.
Edit the Word document as needed.
Place the string “[[INSERT AXURE SPEC]]” within the document where the specification will be inserted.
In the Word Template section, enter the location of the document and the names of the styles to use in the specification.

New to the SpecGen Tool, you can configure the style of the annotation tables by modifying the Word style. This gives you the ability to configure properties like the alternating row colors that have been added to the default table style.

Another new feature is that the table containing the annotation information can be separated into multiple tables. This is configured in the Annotations section of the SpecGen Tool.

Table of Contents
In this release, the table of contents in the generated specification is not automatically updated. To update the table of contents, select the table of contents in Word and either right click and select the “Update Field” option or press F9.

About the Technology used in the SpecGen Tool

The SpecGen Tool incorporates several new technologies, including OpenXML, .NET 3.0, WPF, and more.

OpenXML
The SpecGen Tool takes advantage of the new Office OpenXML format by generating the XML that makes up a document directly (as opposed to using Office automation to create documents). The primary benefit of moving to this format is increased performance; generating the XML that internally represents these documents is much faster than interfacing with Word to create them. Microsoft has updated previous versions of Office so that compatibility should not be an issue. As an added bonus, OpenXML (.docx) files are generally smaller than their .doc counterparts.

Using the Axure API
This project is an example of what can be created using the Axure RP API. We plan to release the SpecGen Tool source code, which will hopefully provide developers with a good starting point for developing custom specification generators or other applications with the API.

.NET 3.0 and WPF
In addition, the SpecGen tool takes advantage of .NET 3.0 Framework. The interface is developed using Windows Presentation Foundation (WPF). So far, the new framework has provided faster development of more dynamic user interfaces.

Conclusion
In future iterations of the SpecGen tool, we hope to introduce features for more customization of specification documents. In the meantime, we hope you will try out this preview release. We appreciate any feedback, suggestions, or bug reports. Please send them to support@axure.com or discuss them on our Axure RP forum at http://www.axure.com/cs/forums.

Here is the link to the SpecGen download again: Axure SpecGen Tool

Axure's Good Student Program

2007-08-21T23:05:00Z

Axure provides a significant educational and non-profit discount to students and academic institutions, but to further reward students who have excelled in their classes, we are proud to introduce the new Good Student Program!

If you are a student studying HCI, user experience, information architecture, interaction design, or related field and have earned a GPA of 3.0 or higher in the last semester, you are qualified to receive a free license of Axure RP Pro.

We hope the educational discount and the Good Student Program encourage study in the fields of HCI and user experience, and we are excited to give students a chance to add Axure RP Pro to their toolkit for free.

To request your Good Student license, please submit the following to sales@axure.com or fax to (415)651-9527.

Your full name.
Proof of 3.0+ GPA in the last term (transcript or other).
Email address for delivery

If you know any students who may be interested, please spread the word!

Axure RP Pro 4.6 is Now Available!

2007-07-03T04:00:00Z

Axure RP Pro Version 4.6 is now available for download at http://www.axure.com/downloads.aspx. A detailed list of new features is available here. Check out the blog post "Introduction to Version 4.6 Features" for a quick guide to many of the new features and a sample file demonstrating how they can be used.

In this release, we focused on addressing popular feature requests and increasing the range of functional and interactive fidelity of the prototypes that can be created.

If your trial has previously expired, installing version 4.6 will give you a new 30 day trial.

New Features
In this version, we introduce the ability to add conditional logic, read and write values to form fields, pass data through more variables, more easily prototype menus with the Menu widget, and add rollover styles to Button Shapes. Click here for a detailed list.

Important Information
Files created in version 4.6 will not open in previous versions of Axure RP. Version 4.6 will convert legacy files to the new format.

Axure RP Pro 4.6 is a free upgrade for customers who purchased or renewed a license after June 1, 2006. Other customers will need to purchase a renewal before upgrading.

Want the latest updates, discussions, and tutorials?
Join the Axure Community Site and we'll keep you connected. After joining, subscribe to the forum for discussions and subscribe to the blog for tutorials and release announcements.

We appreciate any feedback, suggestions, or bug reports. Please send them to support@axure.com or discuss them on the Axure RP forum at http://www.axure.com/cs/forums.

RIA (Rich Internet Application) Prototyping

2007-06-30T00:20:00Z

"Does Axure RP support designing Rich Internet Applications?"

This is a question we are hearing more these days as companies continue to adopt some of the new (and not so new) technologies like Ajax, Flash, Silverlight, and JavaFX that enable richer and more dynamic interfaces for web applications.

Short answer: Yes

Long answer:

===========================

A Rich Internet Application (RIA) typically means that the application may emulate functionality found in desktop applications, may have animation in the interface, may have client-side data interaction and logic, and generally provides functionality within a page rather than only when moving from page to page. Some examples of RIA functionality include menus, drag and drop, form validation, accordions, sliders, changing visibility, and zoom.

The process of designing an RIA today is similar to designing traditional web applications. It involves beginning with a lower fidelity sketch or wireframe and filling in visual, interactive, and functional fidelity as the design progresses thereby creating a prototype. The optimal level of fidelity is just enough to verify that the design satisfies the requirements and that it is usable. It should also clearly communicate the design to everyone involved.

Axure RP supports design at a wide range of fidelity. For RIA design, Axure RP generally supports low to medium fidelity design and for some functionality high fidelity is possible. At some level, you are able to use Axure RP to describe or storyboard or prototype the RIA functionality. Some RIA functionality that would currently be prototyped at a lower fidelity in Axure RP are drag and drop, animations, and widgets like sliders.

Some RIA functionality that can be prototyped at a high fidelity currently are dynamically hiding, showing, and changing layers, rich client style menus, tabs, rollover effects, custom tool tips, in context tools, and basic client-side data interaction and logic. More support for high fidelity RIA prototyping is planned for future releases.

===========================

Here is a sample Axure RP file created in version 4.6 that contains some common RIA design patterns: Flyout Menus, Custom Tooltips (like Netflix), Accordion controls, Inline Editing, Zoom, and Form Validation. Each are at varying levels of fidelity, but hopefully these examples will give you some ideas on how to use Axure RP to prototype your RIA.

RIADemo46.rp

Here are some screenshots of the Inline Editing example from the prototype. This example takes advantage of dynamic panels and the ability to read data from a text field and set the text in a text panel.

1. A picture and label.

2. As the mouse moves over the Label, a tooltip and custom tooltip are shown.

3. Clicking the label changes the label to a text field with options to save or cancel.

4. Edit the text field to any value.

5. Clicking Save takes the value from the text field and puts it into the original label.

All of this happens right on the page.

Try it yourself along with the other RIA designs.

Here is the RP file again RIADemo46.rp. This will open in 4.6 and above.

Introduction to Version 4.6 Features: Part 3

2007-05-22T14:16:00Z

This is Part 3 of a 3 part series introducing the new features in Axure RP Pro 4.6 currently in beta and available here.

Here are links to the sample file and generated prototype that are discussed in this series.

IntroTo4-6Features RP File
IntroTo4-6Features Prototype

If you have Axure RP installed, it is a good idea to have the file open as you go through these posts.

Part 1: Conditional Logic and Widget Values covers creating conditional logic based on values entered in form widgets, the new KeyUp event, and setting values on widgets.
Part 2: Variables and New Masters Features covers using variables to store and pass data from page to page, using OnPageLoad in masters, and using the new Raise Events action that enables masters to have different interactions on each instance.
Part 3: Menus & Styles introduces the new Menu widgets, rollover styles, line patterns, and text on connectors.

[These articles assume a working knowledge of the basic features in Axure RP. If you are new to Axure, the Flash demos at www.axure.com/samples.aspx are a good place to start.]

Part 3: Menus & Styles

Rollover Styles and Menus

Rollover styles can be now be specified on Button Shapes, and Menu widgets are available in the Wireframe Widgets library to quickly create horizontal and vertical menus with flyout submenus. Both of these could previously be created using dynamic panels and interactions, but now it is easier and faster to create basic rollovers and menus. If specific styles or behaviors are not supported using these new features, dynamic panels can still be used to prototype rollovers and menus. See the article Creating MouseOver Flyout Menus using Dynamic Panels, for more information.

In the "Menus and Rollover Styles Example", there are examples of both a horizontal and vertical menu. Horizontal and vertical menus can be created by dragging and dropping a Menu widget onto the wireframe page. By default, a menu is created with 3 menu items. Editing text and formatting the menu and menu items is similar to other widgets. Double-click on a menu item to edit the text. The color, font, and other styles of the menu and menu items can be changed using the toolbars.

To edit the padding around the menu items, right-click on the menu or menu item and select "Edit Menu Padding". In the horizontal menu in the example, the padding has been set to 0 pixels.

To add or remove menu items, right-click on a menu item and use the Add Menu Item and Delete Menu Item commands.

To add a submenu to a menu item, right-click on the menu item and select "Add Submenu".

Rollover Styles can be applied to menu items in the Menu widgets as well as Button Shape widgets. To edit the rollover style on a Button Shape, right-click on the Button Shape and select "Edit Button Shape"->"Edit Rollover Style". This will open the Set Rollover Style dialog where you can choose the styles to change on rollover. Check the Preview checkbox to see the rollover styles applied to the Button Shape. Rollover style are edited on menu items similarly.

After rollover styles are applied, you can preview the rollover style in the wireframe by mousing over the black and white square in the top left corner of the widget.

In the prototype, you can see that the menus and submenus work like typical flyout menus, and that mousing over and out of the button shapes apply and unapply the rollover style.

Line Patterns and Connector Text

In this version, the flow diagramming functionality continues to be improved. Text can be added to connectors and line patterns can be edited on Flow and Button Shapes. Arrows can also be added to vertical and horizontal line widgets. Samples of these can be found in the "Line Patters and Connector Text Example".

Here is a link to the prototype.

To save some scrolling, here are the links to the sample file and prototype one more time:

IntroTo4-6Features RP File
IntroTo4-6Features Sample Prototype

We hope you get a chance to try these new features and the others included in this release.

Please send any feedback or issues to support@axure.com or in the forums.

Introduction to Version 4.6 Features: Part 2

2007-05-15T03:00:00Z

This is Part 2 of a 3 part series introducing the new features in Axure RP Pro 4.6 currently in beta and available here.

Here are links to the sample file and generated prototype that are discussed in this series.

IntroTo4-6Features RP File
IntroTo4-6Features Prototype

If you have Axure RP installed, it is a good idea to have the file open as you go through these posts.

Part 1: Conditional Logic and Widget Values covers creating conditional logic based on values entered in form widgets, the new KeyUp event, and setting values on widgets.
Part 2: Variables and New Masters Features covers using variables to store and pass data from page to page, using OnPageLoad in masters, and using the new Raise Events action that enables masters to have different interactions on each instance.
Part 3: Menus & Styles introduces the new Menu widgets, rollover styles, line patterns, and text on connectors.

[These articles assume a working knowledge of the basic features in Axure RP. If you are new to Axure, the Flash demos at www.axure.com/samples.aspx are a good place to start.]

Part 2: Variables and New Masters Features

OnPageLoad Event on Masters and Variables

In previous versions of Axure RP, a single variable called the OnLoadVariable could be used to store information that is passed from page to page in the prototype. The OnLoadVariable could be used in the condition of the OnPageLoad event of a page.

In version 4.6, you now have the ability to use up to 10 variables. The variables can also now be used in conditions on interactions of widgets in addition to the OnPageLoad event. This version also adds the OnPageLoad event to Masters helping to increase the reuse of OnPageLoad logic across pages.

In the "Variable and Master OnPageLoad Example" page of the sample, there are three radio buttons: Usability Professional, Information Architect, and Business Analyst. They are labeled "UsabilityRadio", "IARadio" and "BARadio" respectively and all assigned to the radio group "JobGroup".

Selecting a radio button option and clicking the Submit button results in three possible cases. Each case sets a variable named "JobVariable" to a unique value and then links to the page called Master OnPageLoad. The Master OnPageLoad page displays the appropriate welcome message in the header based on the value of the JobVariable. The header was created as a master.

The following describes the steps for defining the OnClick event on the Submit button as well as the OnPageLoad event on the Header master.

First, create the new variable JobVariable. In the Wireframe menu in the main menu, select "Manage Variables" to open the Manage Variables dialog. Add a variable named "JobVariable", which we will use to store the value of the selected radio button.

Now, add the three cases to the OnClick event on the Submit button.

In Case 1, construct the condition "If check state of UsabilityRadio equals checked" as follows. In the Interaction Case Editor dialog, click "Add Condition" and create the following condition in the first row of the Condition Builder dialog: [check state of] + [UsabilityRadio] + [equals] + [value] + [Checked].

Next, set the value of JobVariable in this case. Select the action "Set Variable and Widget Value(s) equal to Value(s)" and set: [value of variable] + [JobVariable] equal to [value] and enter "UP".

Finally, select "Open Link in Current Window" and choose the "Master OnPageLoad" page.

Repeat this for the other two radio button cases using "IA" and "BA" as the other variable values, and you will have these 3 cases.

Now, let's create the Header master that responds to the value of the JobVariable. In the sample file, the Header master is in the "Variable and Master OnPageLoad Example Masters" folder in the Masters pane. This master includes an image and a text panel with Welcome text labeled "WelcomeLabel".

Add three cases to the OnPageLoad event of the master; each corresponding to one of the three variable values set previously on the Submit button. In Case 1, add the condition "If value of variable JobVariable equals 'UP'". Then, select "Set Variable and Widget Value(s) equal to Value(s)" and set: [text on widget] + [WelcomeLabel] equal to [value]. Then, click on "Edit text..." to specify the text. This will open a text editor where you can enter and format the text, "Welcome, Usability Professional".

Repeat this for the other two cases and you will have the following:

Finally, the master is added to the "Variable and Master OnPageLoad Example" page and the "Master OnPageLoad" page.

In the prototype, you can see that selecting a job title and clicking the Submit button on the "Variable and Master OnPageLoad Example" page links to the "Master OnPageLoad" page with the appropriate Welcome message in the header.

The great thing about this is that the master can now be used on any page in a prototype and will respond as designed to the JobVariable without having to redefine the behavior on each page. Want to create a sidebar master that changes depending on whether the user is logged in? Give these features a try!

Raise Events from Masters

This feature falls in the category of "Very Advanced". The term Raise Event is "developer-speak", and we will be working on making this feature more obvious. For now, it is a powerful feature when you need it, but by no means mandatory for creating an effective prototype with Axure RP.

Raised Events are used when an interaction in a master is different for different instances of the master or the interaction needs to affect widgets outside of the master. For example, if you create a button on a master and on one page where you use that master, you want to link to Page 1. Then, on another page where you use that master, you want the button to link to Page 2. Raised events can help you accomplish this with a master. To do this without raised events, you would create two separate buttons on those pages rather than use a master.

Another example of when you might use raised events is if you are designing an interface with several independent but related sections like a login pane or a stock quote pane or dashboard pane. This type of interface is common in portal applications. You want to create each section as a master, but one section needs to be able to affect other sections in the interface. Previously, interactions in a master could only affect other widgets in the master or submasters. Now, you can use a raised event to affect one master on a page from another master on a page.

The "Raised Event Example" page demonstrates the latter. There are two masters on that page, Login Pane and MyInfo Pane. Entering a valid username/password combination (in this case axure/12345) and clicking the Login button in the Login Pane shows user info in the My Info pane.

The following describes how this was created.

The Login Pane master is similar to the one found in "Conditional Logic and Reading Values Example". It contains Username and Password fields, a Login button, and a LoginFailedPanel dynamic panel with an error message. The condition on Case 1 of the OnClick event on the button is: "If text on widget UsernameField equals 'axure' and text on widget PasswordField equals '12345'". The selected action for the case is "Raise Event".

After selecting the Raise Event action, Click on "Event" in Step 3 to open the Manage Raised Events dialog. In that dialog, add an event called "OnLoginSucceed" and check the box next to the new event. Now, if the login is successful in the Login Pane master the OnLoginSucceed event will be raised or triggered.

In Case 2, we set the OnClick to "Show Panel(s)" and select the LoginFailedPanel as we did in Part 1 of this series.

(Click the image to enlarge)

In the MyInfo Pane master, we have created the "AxureInfoPanel" dynamic panel which contains two states: the default NotLoggedIn state, and the LoggedIn state. In the NotLogged in state, there is a text panel with the message "Login to view info." In the LoggedIn state, the panel contains the user's information.

Both masters were added to the "Raised Event Example" page. When you select the Login Pane master, you will see that the OnLoginSucceed event appears in the Interactions pane for that master. Add a case to this event just like any other event and select "Set Panel state(s) to State(s)" to define Set MyInfo Pane/AxureInfoPanel State to LoggedIn.

In the prototype, you can see that entering the valid username and password combination in the Login Pane displays the user information in the MyInfo pane.

To save some scrolling, here are the links to the sample file and prototype one more time:

IntroTo4-6Features RP File
IntroTo4-6Features Sample Prototype

Stay tuned for Part 3 of this series:

Part 3: Menus & Styles introduces the new Menu widgets, rollover styles, line patterns, and text on connectors.

We hope you get a chance to try these new features and the others included in this release.

Please send any feedback or issues to support@axure.com or in the forums.

Introduction to Version 4.6 Features: Part 1

2007-05-09T00:30:00Z

Axure RP Pro Version 4.6 (available in beta here) introduces many new features that enable you to create more functional and more interactive prototypes widening the range of fidelity that you can deliver with Axure RP.

The decision to create a higher fidelity prototype is frequently based on a variety of considerations like the audience for the prototype, the stage in the project, and the time and resources available. The additional effort to create and maintain a high fidelity prototype should be considered before pursuing it. Axure RP is designed to support a wide range of fidelity so you can create what is needed for your project.

This 3 part series of posts walks through some of these new features. Here are links to the sample file and generated prototype that are discussed in this series.

IntroTo4-6Features RP File
IntroTo4-6Features Prototype

If you have Axure RP installed, it is a good idea to have the file open as you go through these posts.

Part 1: Conditional Logic and Widget Values covers creating conditional logic based on values entered in form widgets, the new KeyUp event, and setting values on widgets.
Part 2: Variables and New Masters Features covers using variables to store and pass data from page to page, using OnPageLoad in masters, and using the new Raise Events action that enables masters to have different interactions on each instance.
Part 3: Menus & Styles introduces the new Menu widgets, rollover styles, line patterns, and text on connectors.

[These articles assume a working knowledge of the basic features in Axure RP. If you are new to Axure, the Flash demos at www.axure.com/samples.aspx are a good place to start.]

Part 1: Conditional Logic and Widget Values

Conditional Logic and Reading Values from Widgets

Previously, conditional logic could be specified in Axure RP by providing descriptions of the conditions in the interaction cases. If multiple cases existed, these descriptions were presented as choices in the prototype like "if the radio button is checked" or "if the username and password are valid". This is an effective method for capturing and presenting conditional flows, but there may be times when a more functional prototype is called for. In Version 4.6, you are now able to add functional conditional logic to your designs. Those conditions can be based on real values entered in the prototype by the prototype user.

On the "Conditional Logic and Reading Values Example" page of the sample file, we have created a login dialog with two text fields labeled "UsernameField" and "PasswordField", a Login button and a "LoginFailedPanel" dynamic panel containing an error message.

Clicking the Login button results in two possible cases.

If the user enters a valid username/password combination (in this case axure/12345), clicking the Login button links to the Confirmation page.
If the user enters an invalid combination, clicking the Login button displays a Login Failed message.

The following describes the steps for defining these conditions.

First, add a case to the OnClick event of the Login button. In the Interaction Case Properties dialog, click on "Add Condition" under Step 1.

This opens the Condition Builder dialog, where we will construct the condition expression "If text on widget UsernameField equals 'axure' and text on widget PasswordField equals '12345'".

Because we want both comparisons to be met, we set the Satify droplist to "Satisfy all of the following". Choosing "any" would place an "or" between the comparisons instead of "and".

In the first row, we will construct the UsernameField comparison. Select and enter the following into the droplists and fields in the first row: [text on a widget] + [UsernameField] + [equals] + [value] + ["axure"]. Then, click the "+" sign at the end of the first row to add a second row. Similarly, we want to compare the PasswordField. Set the second row to [text on a widget] + [PasswordField] + [equals] + [value] + ["12345"].

Tip: Labeling the widgets that are used in conditions will come in handy when building conditions and managing your design. To label a widget, select it and fill in the Label field in the Annotations and Interactions pane.

(Click the image to enlarge)

Click OK to return to the Interaction Case Properties dialog. Select "Open Link in Current Window" and specify the Confirmation page. Click OK to complete the first case.

Notice that the description on Case 1 in the Interactions pane now includes an "If" statement describing the condition. Subsequent cases will begin with an "Else If" by default.

Tip: "Else If"'s can be changed to an "If"'s by right-clicking the case and selecting Change to IF. Doing so will allow multiple cases to be performed if multiple conditions are met.

Now add the second case to the OnClick event on the Login button. By default, because a condition already exists in this event above this case, the condition will read "Else If True". We do not need to add a condition to this case because we want it to execute if the first case is not met. To show the error message in this case, click "Show Panel" and select the LoginFailedPanel.

(Click the image to enlarge)

Running the prototype, we can verify that the conditions work as designed. Entering anything other than the combination of "axure" in Username and "12345" in Password and clicking the Login button will show the error message. Entering the valid combination links to the Confirmation page.

OnKeyUp and Setting Values on Widgets

Version 4.6 adds the OnKeyUp event for the Text Field and Text Area widgets. The OnKeyUp event fires when the user releases a keyboard key while typing in the widget.

We have also added a new action to the Interactions Case Properties dialog to set values on widgets such as text on a text field or the check state of a checkbox.

On the "OnKeyUp and Setting Values Example" page of the sample, there are two visible text fields, Name1 and Name2. If the "Same As Above" checkbox is checked, typing into the Name1 field will update the text in the Name2 field to the same value as the user is typing.

This Name1 text field is labeled "NameField1". The checkbox is labeled "SameCheckbox". The Name2 field is actually a dynamic panel labeled "NameField2Panel" with two states, "NormalState" and "ReadOnlyState". Each state in the dynamic panel has a text field in it labeled "NameField2" and "NameField2ReadOnly", respectively. The NameField2ReadOnly text field is set to be read only.

The following describes the steps for defining the interactions for this sample.

First, let's make typing in the NameField1 set the text in NameField2ReadOnly to the text entered in NameField1. Add a case to the OnKeyUp event on NameField1. Check "Set Variable and Widget value(s) equal to Value(s)" and click the link in the description to open the Set Variable and Widgets Values dialog. Set the row to [text on widget] + [NameField2ReadOnly] equal to [text on widget] + [NameField1].

Next, we will add two cases to the OnClick event on the SameCheckbox. The first case will set the NameField2Panel to the ReadOnlyState if the SameCheckbox is checked. To construct this case, we need to define the condition "If check state of SameCheckbox equals Checked". Click "Add Condition" in the Interaction Case Editor dialog and set the condition to: [check state of] + [SameCheckbox] + [equals] + [value] + [Checked]. Then use the "Set Panel State(s) to State(s)" action to set the NameField2Panel to the ReadOnlyState.

The second case handles the Else If True case which is equivalent to the SameCheckbox not being checked. In this case, the NameField2Panel will be changed back to the NormalState and any text already entered in the Name2Field1 will be cleared. To define this in the Interactions Case Properties dialog, use the "Set Panel state(s) to State(s)" action to set the panel state appropriately and use the "Set Variable and Widget value(s) equal to Value(s)" action to set the text on the NameField2 widget. The action should be defined as follows: [text on widget] + [NameField2] equal to [value] + [] (that's an empty string).

(Click the image to enlarge)

Try it out in the prototype!

To save some scrolling, here are the links to the sample file and prototype one more time:

IntroTo4-6Features RP File
IntroTo4-6Features Sample Prototype

For more about new features in version 4.6, check our Part 2 and Part 3 of this series:

Part 2: Variables and New Masters Features using variables to store and pass data from page to page, using OnPageLoad in masters, and using the new Raise Events action that enables masters to have different interactions on each instance.
Part 3: Menus & Styles introduces the new Menu widgets, rollover styles, line patterns, and text on connectors.

We hope you get a chance to try these new features and the others included in this release.

Please send any feedback or issues to support@axure.com or in the forums.