At ProtoShare, we strongly believe in low-fidelity wireframes and prototypes. After all, wireframes aren’t the end goal, they are merely a tool to use in a larger process. Most of the time, simple wireframes kickstart the needed discussion to make decisions. There are times, however, when simple doesn’t cut it. Sometimes you need to build out a specific feature more completely to adequately experience and discuss it. At these times, wireframing applications turn into limitations because you can only build what their component palettes allow you to build. That is if you aren’t using ProtoShare and the HTML Sandbox.
The ProtoShare front-end is all HTML/JavaScript, not Flash. Consequently, this allows users to do some unique things, like view the prototype in a browser, or use CSS to change the appearance of components. Now with the HTML Sandbox, ProtoShare gives you the ability to create and add any component they can think up and code. And with the proliferation of JavaScript libraries like Ext (which we use to build ProtoShare), YUI, jQuery, mooTools, etc it is not too much work to find a pre-built component and modify it to fit your needs.
The video below shows some of the possibilities you now have with the Sandbox:
So, how does it work? The HTML Sandbox is currently under our “Experimental” components at the bottom of the palette in the editor. Select it like any other component, click the Source Code field in the properties to open the HTML editor, and type or paste in your code. Close the HTML editor and switch back to Prototype mode, or click the Interactive Mode button 
and check it out.
Below is some sample code you can use to test it. This is a very simple example of doing a basic on-the-fly form validation where it highlights blank entries.
-
<html>
-
<head>
-
src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”>
-
</script>
-
<style type=“text/css”>
-
.error { background-color: #FFD2D2; }
-
div, input { font-size:11px; font-family:Verdana; padding:5px; }
-
input { padding:2px; border:1px solid black; }
-
</style>
-
</head>
-
<body>
-
<form name=“user” action=“#” onsubmit=“return false;”>
-
</form>
-
<script type=“text/javascript”>
-
$(‘input’).blur( function() {
-
if( $(this).val() == ” ) {
-
$(this).parent().addClass( ‘error’ );
-
$(this).next(‘span’).html(‘ this cannot be blank’);
-
} else {
-
$(this).parent().removeClass( ‘error’ );
-
$(this).next(‘span’).html(”);
-
}
-
});
-
$(‘form’).submit( function() {
-
$(‘#name’).blur();
-
$(‘#email’).blur();
-
});
-
</script>
-
</body>
-
</html>
Notice in this example we’re using the jQuery library hosted on code.google.com. If you want to use some jQuery (or other JavaScript library) plugin you find, there will probably be additional files necessary. You can either paste the source code into the HTML editor, or you can upload the files to the Asset Library and link to them.
You upload JavaScript and CSS files to the Asset Library just as you would any image asset. Once the files are uploaded, click on a file to see the full path to the file. These links take the form of /Asset/<directory>/<file>. For example if I were going to use a jQuery library called accordion.js, I would upload it to the Asset Library and my HTML Sandbox code would look something like this:
…
Please remember this is still an experimental component. We consider this an advanced component as you need to know a fair amount about HTML and JavaScript to get the most out of it. We’re very excited about the possibilities here, and we think you’ll be too. We’d also like to hear your thoughts about the HTML Sandbox. Please leave us some comments here describing how you are using it, or how you would like to use it.