Wednesday, May 6, 2009

Wireframing and simulating desktop and rich internet applications

Create events for desktop and rich internet applications 

Events are very important to create rich and high-fidelity application
 wireframes, and thus their creation and managing must be as simple as possible. 

Event triggers are events that may occur during the simulation of a prototype and that cause event actions to execute. The Justinmind Prototyper® provides several event triggers: OnClick, OnDoubleClick, OnRightClick, onKeyPressed, OnMouseOver, OnMouseEnter, OnMouseLeave, OnPageLoadOn, PageUnload and OnChange.
 

Event actions are the processing that takes place when an event triggers. Several actions can be defined for the same trigger upon the same element so that they are taken sequentially. Event actions are: Link to, Execute Action, Set Connection, Hide/Show, Change Style, Enable/Disable, Set Focus on, Set Value.
 

Creating a tab menu 

In order to create a tabbed layout we recommend you to work with the Layered box widget which is able to display several layers one above the other and switch their visibility using events.

Create the box by dragging and dropping the "layered box" to the canvas and add layers by pressing the plus icon at its top.

Drag and drop a button to each tab.

Create a new onClick event for each button, configure a Hide/Show action and select the layer you want to show for the current tab (button). Repeat this step for every tab in the menu.

Simulating a tooltip 

A dynamic tooltip can be easily simulated following the next steps:

Drag and drop a rich text widget to the canvas.

Create an image (or any other widget) to display as tooltip.

Create an OnMouseOver event for the rich text widget and configure a Hide/Show action acting on the tooltip image created.

Component libraries and examples 

Justinmind has prototyped a set of component libraries and examples to help you better understand the power of our wireframing and simulation tool. You can find the examples and component libraries here.