Getting Creative With States, Part II: State Value Button

Easy Ways to Add Interactivity to Your Wireframes

For this post we will examine the new State Value Button component. The most obvious question about this component is: “Why would I use this instead of a normal Button?” The answer is that in addition to setting a particular state value when clicked, the State Value button can also change its appearance when that value is active. This allows you to mimic all manner of toggle-button style controls, such as dropdown menu buttons,¬†on/off switches, and content disclosure toggles.

Action Dropdown Button

First let’s examine the standard blue Action Dropdown Button widget from our Twitter Bootstrap inspired widgets.

The Official Twitter Bootstrap framework requires that dropdown buttons display a menu of items when they are clicked. The menu must remain visible until the button is clicked again. To mimic this behavior in ProtoShare we need to use a State Value Button component and a Container whose visibility is linked to the same state as the button.

Configuration

State Value Button:

State:
Set to the “Button Menu” state, which has two values: On and Off.
Active Value:
Set to ‘2’, because we want the “On” value to be set when the button is clicked.
Text:
Here we use a “Custom” value, because we don’t want to use the state name or its values for the button label. The custom value is “Action” and also includes the down-triangle glyph to indicate that it is a drop-down button.
Appearance:
Normal, Hover, and Active modes are set to give the button styling in accordance with the Twitter Bootstrap specification.

Menu Items Container:

Visibility:
Visibile when the “Button Menu” state is On.
On Show:
Uses the “Fade In” animation to provide richer feedback to the user.

Android Toggle Switch

Now let’s take a look at the Android Toggle Switch widget. This widget uses a single State Value Button and two fill images to simulate a standard Android toggle switch.

Configuration

State Value Button:

State:
Set to the 2-values “Switch” state. Note that you could also use a state with more than two values, but the state button component can only toggle between 2 values.
Active Value:
Set to ‘2’, because we want the “On” value to be set when the button is clicked.
Fill Image:
Two different fill images are used, one for the Normal appearance ( Off ), and one for the Active appearance ( On ).
Stroke:
One other trick has been employed. Because this is a button component and the browser treats it like a normal button, it will by default always have a border. In this case however, the entire fill image is the button and we don’t want a border because we have tried to match the Android UI perfectly. So, to get rid of the border we trick the browser by specifying a Stroke Width of 0. Note that a stroke color must be set for this to work, though it will never actually be drawn.

This entry was posted in Blog, ProtoShare Tips & Tricks. Bookmark the permalink.

Previous post:
Next post:

Leave a Reply

Your email address will not be published. Required fields are marked *