In a previous post I showed you how you can use the Advanced HTML component to increase the fidelity of your wireframes. The Advanced HTML component lets you use HTML, CSS, and Javascript to create your own content, extending the functionality of ProtoShare. Below are some additional examples of what you can do.
Activating states on design load
This example shows you how to set your states to specific values when the design loads. This could be useful when you want the values of a state in a certain order but to have the default used on the page something other than the first. The variables addState and addState2 use the ID of the state you want to set. In this example they are 4231 and 4232. These IDs are listed in the States section of the listing in ProtoShare. The value you want to select is indicated by the number after the colon. 0 (Zero) is the first value.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function setState() {
var states = new Array();
states[0] = new Array("4231","1");
states[1] = new Array("4232","0");
//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 onload="setState()">
</body>
</html>
Charting
Highcharts is a Javascript charting library available commercially and for free under the Creative Commons Attribution-NonCommercial 3.0 License. Below shows how you can use this, and many other libraries, to add rich content to your projects. We’ve referenced external Javascript resources but you can also upload your files to ProtoShare and use the address provided by Get URL to link to your files.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Highcharts Demo</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript'>//<![CDATA[
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
});
//]]>
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
HTML5 – Date Picker / Audio Player
In the previous post, I showed how to create a date picker using Javascript. With the introduction of HTML5, this, and many other form controls, can be created much easier. Changing the input type can also let you create color pickers and fields formatted as search boxes.
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title></head>
<body>
<input type="date" />
</body>
</html>
The second allows you to embed an audio player.
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title></head>
<body>
<audio id="audio" src="/wa/asset?oid=3517" controls />
</body>
</html>
In your article you are saying that the IDs are listed in the States section of the listing in ProtoShare. It could be useful to tell also where this “listing” can be found… Do you mean by this “the state list in the sidebar” ?