One of the features that allows ProtoShare to go beyond basic wireframing is the ability to add custom HTML, CSS, and JavaScript through the use of the advanced HTML component. These components have the ability to react to, and activate, states used throughout your designs. Continuing on from our previous post that covers HTML components for wireframes, we’ll look at two examples of this.
Setting multiple states
The first example shows how you can set states using JavaScript. In this case, we’re using a simple button, but the functionality could be applied to any number of elements. You can also have the onLoad event of the advanced HTML component set your states to specific values.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function setStates() {
var states = new Array();
states[0] = new Array("4231","1");
states[1] = new Array("4232","0");
states[2] = new Array("4233","3");
//Additional states should be added as
//states[NEXT_NUMBER] = new Array("STATE_ID","VALUE_INDEX");
//Replace values in caps. The VALUE_INDEX begins at 0 for
//the first state value.
for (var i=0; i<states.length; i++) {
window.parent.site9.PageStateMgr
.getState(states[i][0]).setValue(states[i][1]);
}
}
</script>
</head>
<body>
<button onClick="setStates();">Set States</button>
</body>
</html>
Using state listeners to create a stateful progress bar
A listener allows you to perform an action based on the value of a state. In this example, we’re updating a progress bar element based on our state. This gives us the ability to click on ProtoShare components outside of the advanced HTML component to set states, but to have the contents of it dynamically change. The progress bar could be used to help simulate a login or checkout process.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.parent.site9.PageStateMgr.getState(3856).addListener(
function( event ) {
document.getElementById("progress").value = event.to;
}
, this )
</script>
<style>
body { text-align:center; }
</style>
<meta charset="UTF-8">
</head>
<body>
<progress id="progress" value="0" max="10"> </progress>
</body>
</html>
The examples above require state IDs. These IDs can be found on the states panel just to the right of the state name.
Advanced HTML components are not necessary to be successful in ProtoShare but give advanced users the ability to further extend the functionality of their designs.