Justinmind vs. Protoshare Prototyping

When doing the design for a web application one of the considerations will be if the site is“Content” centric, “Commerce” centric  or “Data” centric.  Content centric sites have a fixed number of pages with very little data (ie: Blogs, Information sites, Wiki’s).  Commerce centric sites have a lot of data, images and a method for buying things (ie: Amazon, eBay).  A Data centric site is typically one that has lots of data and servers a specific purpose (ie: Monitoring Health Care Beneficiaries, Viewing Court Cases or reviewing store sales)  The prototyping tool you chose will have an impact on how your prototypes appear to the shareholders.

I’ve used Protoshare for the last 2 years and taught may others.  GeeMustHave has some tips and techniques for getting the most from Protoshare.  Recently a new prototyping tool has come to attention called Justinmind.  Justinmind is a Windows based tool that saves your prototypes locally in a file and optionally publishing them to the web for others to view and collaborate on.  If your web sites are “Data” centric you are going to love this application even if it doesn’t run on Apple Mac or Linux.

I’ve just begun an analysis and comparison of the two prototyping tools and will continue to do so for the next year or so.  I’m going to maintain the chart below as I discover different aspects of the 2 tools.

Created with Compare Ninja

Free Protoshare Training Materials

image

Protoshare is an excellent web based prototyping and wire framing tool.  However it does have a steep learning curve and can take a few weeks for get a good feel for the tool.  I have taught a number of classes on Protoshare to both business analysts and web developers.  This training material can be used by anyone who wants to learn or tutor others on how to get started with Protoshare. 

image

Download PDF Version

There are 2 more segments to this Protoshare training material which will be uploaded in separate posts.   The original material was done in PowerPoint and if you send me a message requesting it,  I will send you a copy.

Protoshare Lesson #4 (V6) Tab controls two paths

Protoshare has a couple of ways to insert a Tab control into your prototype.  One is simple but rather limited, the other more complex but much more flexible.  I prefer the second method as I can make the content of the tab windows what ever I want.

Simple Method

The simple method requires you to use one of the stencils in the Web and Desktop category.  The RIA (Rich Internet Application) is a pre-coded tab that uses HTML for the content of the tabs.  You can not add other components like grid, text boxes, etc. without coding them in HTML.  There are plenty of good HTML tools that can help you but that makes it difficult for the non HTML type designer.

image

Open up the RIA control and locate the Tab control

image

Drag and Drop this into your page and you should see

image

By double clicking in the control you will open it up in edit mode with default tab names and Lorem content.

image

Now go and change the Tab names and content using the editor, you can add some formatting.

image

Notice that the Tab 3 look funny from the other tabs?  This is because I accidently edited out the HTML tag that makes this text a tab.  It’s easy to do and a little effort to fix.  I’m not going to cover how to fix it here because I don’t use the Simple tab controls that much.

Now here is what it looks like in design mode after editing and when you test it (Press T) it looks much the same and the tab work like they should.  Notice that Tab 3 is missing, that is because I messed up the HTML tag.

image

Now if I wanted to add text fields, buttons, drills downs I would need to go back into the Tab control and click on HTML and enter the HTML.  I know HTML and use a excellent free HTML editing tool called nVu at http://www.nvu.com/ to create forms and copy them into code.  I don’t recommend this to those who are HTML weak of heart.

Flexible Method

The flexible method will use a component from the Stencils from from the same category as the Simple method but it is the Interactive set.

image

When you open this set of components you will select one of the tab control, there is one with 3 tabs and another with 5 tabs.  It is much easier to delete a tab then to add one so go big.  You can also pick vertical or horizontal tabs.  There are no vertical tabs in the Simple Method.

image

I’m going to use the 3 tab version in the lesson.  Drag and drop into to you page.

image

It looks like a single component but it is really 2 components.  The top one is tab portion of the component and the bottom is the content of the component.

image

They can be sized and moved around independent of each other and that can be scary.  First time I did it I though I broke the component.  The tab portion of the component is control by a State with the tab names in it.  More on this later.

One of the things I like to do is align the first tab with the edge of the content of the tab.  You click on the upper tab portion.

image

Then just use the arrow keys to gently move the tabs over to the left.  If you accidently move the tabs up you will notice the component doesn’t look like a tab anymore.  Just move the tabs back down until they match up with the content again.

image

Much better, now we need to adjust the names of the tabs.  This is controled by the State attached to the tabs.  Click on the tabs and open up an Inspector panel.

image

You are going to want to click on the Edit State… for the Navigation control.

image

I make it habit of changing the Name of tab to something more meaningful.  Then I changes the tab values to be the names of the tabs I want.  If you want one less tab then delete the last one in the list.  If you want one more your going to have to wait until further on in this lesson.

image

Now here is what the Interactive tab control looks like after I save the State back.

image

Nice but the tabs aren’t wide enough to handle the text I entered, so you can just grab one of the handles and stretch it out.   As you stretch it the text in the tab will adjust dynamically.

image

Looking good….  Now on to the content.  Note the default content reminds you have to enter test mode (Press T) to change tabs and thus change the content for that tab.

First thing I’m going to do is change the content in the first (Introduction) tab to be just some sample RTF text.  I will delete the controls currently in the first tab content and drag a (form field label) onto the content.  Make sure the label is inside of the container.  Then I will go to the Inspector and change the label to RTF by clicking on the (Make Rich Text).

image

I had to stretch out the label so it fit in the panel.  Notice how I formatted the text with size. color and decoration (Bold).  I would also typically align the text to the Top of the label control.

Now I want to add a Grid control to the second tab to show a list of projects.  Grid controls are covered in Protoshare Lesson #3.  First I have to do is switch to Tab 2.  Remember you have to enter Test mode (Press T).  Then click on the second tab.

image

Then press (esc) to get out of test mode and back into design mode.  I’ll delete all the exiting controls and drag a Grid control in from the Stencils, Web & Desktop category, RIA Controls.  Next I would edit the Grid control to have some data in it that makes sense for the tab.

image

To do this grid using the Simple Method you would have to use a HTML editing tool, create the grid, tweak it, get the HTML and copy it, then go into the Simple Tab control, switch to HTML and locate the spot to paste it and carefully paste it.  Your chances of making a mistake go way up trying to make the Simple method flexible.

Next I want to put a form in the Reports tab.  First I will switch to Test mode (Press T) and drag and drop Protoshare controls into the tab. 

image

I do good work Winking smile.   To do this in the Simple method would require you to use the HTML editing tool again and put a table down to layout the labels and fields, draw labels and fields using HTML form components which have different properties than Protoshare inspector properties, get the HTML…. da ta da ta da…….  Even though I use an HTML edit all the time I would rather drag and drop PS controls into a container any day.

Simple is not necessarily flexible.  Having said that I must admit there are some things about the Flexible Tab control that are more difficult.  One of them is adding a tab.

Protoshare Hint #1 (V6)–CSS Style Sheet Overrides

In a Protoshare project I wanted to have the hyperlink behave differently than a normal hyperlink.  I wanted the regular hyperlink to appear blue with no underline and when you hovered over the link it would stay blue but the underscore would appear.  You can do this manually by going into each and every hyperlink and changing the style for regular and hover events using the Inspector.  This is very time consuming and prone to error.  The other way to change the style of a Hyperlink is with a style sheet change which is a global change of the style of an object.

Protoshare has single CCS style sheet per project.  You can make updates to the style sheet file to customize layouts.  There are some restrictions on what you can style with the Protoshare Style Sheet.  Typically an Anchor or hyperlink is the (A) CSS style identifier but in Protoshare it is (s9-link) identifier.

So I went in knowing that the hyperlink is called (s9-link) and did what I thought was the correct style sheet settings.

.s9-link {
      color: blue
      text-decoration: none;}

.s9-link:hover {
       color: blue;
      text-decoration: underline;}

Yep I was wrong.  So after a chat session with Protoshare I discovered I was close which only really counts in horse shoes.

So here is the hint it is the secret word (!IMPORTANT) and the keyword (s9-document)

.s9-link .s9-content {
      color: blue !important;
      text-decoration: none !important;}

.s9-link:hover .s9-content {
      color: blue !important;
      text-decoration: underline !important;}

I’m wondering where else this might work in a Protoshare Style Sheet to get around some of the default settings that some Protoshare controls have?   You might see an update on this topic.

Protoshare Lesson #3 (V6) Adjust Data Grid column widths

The data grid that comes in the stencil library of Protoshare is a basic grid with limited capability to be edited.   I have learned to accept it’s limitations in order to get prototypes out the door quickly.  I have experimented to see how far you could push the grid to do what I wanted.  I will post a few lessons learned about grids in this blog.

Often I will start a grid control and when it displays I have a Column with Yes/No in it that is too wide and I’d like to shrink the width.

Start with getting the grid from the stencil library in the bottom of the stencil library named RIA for Rich Internet Applications.

Stencil

Then Click-and-Drag the grid view at the top of the window onto your project page.

GridInStencil

This will result in a bare data grid being placed on your page.

BareGrid.

By double-clicking within the grid you will be able the edit the contents of the grid.

rawgrid

So go into the Grid and change the headings and the data elements.  The last column is a hyperlink column that I wanted and when it is clicked it would go to the Editing window for this grid.  Notice the (Enrolled) column has ( X) in it.

Editedgrid

Now when you test your page by pressing ( T) or the (Test) button you will see the grid then you stretch the grid  to fit into the space you wanted.

Grid01

Now you can use the Inspector to change the property of your grid and stretch all the columns so they are more equal and get rid of the large width first column, just check the (Column Stretch) property.

columnStretch

Now the grid look a little better but it still needs some work.  The (Beneficiary ID), (Enrolled) and (Enrolled Date) columns are way too wide.

gridStretched

So return to the grid in edit mode by (esc) out of test mode.

  1. Place mouse in the header of the column you want to adjust
  2. Right click the mouse (in this example it is the Beneficiary ID column)
  3. Scroll down to (Cell)
  4. Scroll to (Table Cell Properties)
  5. Left click the mouse

TableCell

This will open an editing window for changing the properties of the Cell, we will need to tell it that we want to change all the cells in this column (Scope) , in this example it is the first column (Beneficiary ID)

TableCellProp

We need to set the some of the properties of the cell

  1. Set Scope to (Column) this indicates all columns
  2. Set the width to (100) you may need to play with this value as it is in pixels which is hard to visualize but I found a 10 digit number and 100 px is a good match.
  3. Set the drill down on the bottom to (Update all cells in column)

a02

Which results in the grid adjusting itself to look like.  Nice.

a03

However the (Enrolled) column is still way too wide, I’ll go back to edit the grid, place my mouse over the (Enrolled) Heading in the grid and left-click, this time I’ll try 50 for a width.

a04

Much nicer, now I’ll adjust the (Enrolled Date) this time I will try 70 for a width and I’m hoping to get the Heading to wrap and take up 2 lines.

a05

Looking good.  You could do the same to the (Action) column by why bother it’s the last column and changing it width won’t make it look much different.  But I’m picky I want the ( X)  in the (Enrolled) column to be centered in the column.

So we go back to edit the Alignment of the Cell

a06

And look at it in Grid Edit mode, doesn’t that look nice?

a07

And now when we look at it in test mode…. what happened?   Good question. 

a08

If you try the other alignment option in the Grid Table Cell edit, you will find it behaves the same.  The Enrolled column does not center.

a09

What is the solution?  Well it seems that Rich Internet Application can be written to ignore some HTML markups including (Alignment center) and more including color.

There are some limits to what you can do with the Protoshare RIA components. Do like I do and learn to accept the limits and work within them.  Remember this is a prototype, keep telling yourself that.  Perfect is the enemy of “Good enough”.

If some Protoshare user out there figures out a way to do this send me a message  and I will publish it.

Protoshare Lesson #2 (V6) Multiple Menu Items which set a State and go to a page

In one of my projects I needed to have the same page used twice.  One for each of the States of one of my state variables.  The state values were (BMP. FRANK).   This page would be called from a Menu Sub-selection.  The single page would have a State Value control showing which state was selected from the menu.

Here are what the menu items look like.

ps04   ps05

When the reviewers clicks on Domain Maintenance from with the BMP or FRANK menu select it will set a State Variable to identify BMP or Frank and then go to the Domain Handler Page.

Here are what the hierarchy of the pages look like to handle the menu items above.

ps06

Notice there are the pages that define the sub-menu items.  Domain Maintenance, Roles Maintenance…. for each of the States.

New feature of Protoshare is the ability to name the page with an extensions, that why you see the pages with the (BMP) or (FRANK) in them.

ps08

Notice the handler pages that are being called from the menu navigation pages are not visible to the menu bar because of them being set using

ps07

Now the trick is to get the Domain Maintenance page to set one of the Projects States and then automatically jump to the Domain Handler page.

This will require a Advanced HTML component on the Domain Handler page.  There is a problem here however, if you write HTML that redirects Protoshare to another page automatically you will not be able to edit that maintenance page before it jumps to the handler page.

ps09Protoshare has a SAFE MODE that you can open a page in that allows you to edit pages like this.   Safe Mode allows you to open pages without the HTML triggering.

To do this click on the page you want to edit in the top part of the panel, then in the bottom of the panel called (Page Designs) you Right-click on (Designs) and  on the bottom is the (Open in Safe Mode) option.

 

One of the last prep items it get the ID for the Domain Handler page (Remember that’s the one we want jump to)

ps13

Notice the URL, you should copy it because you’re going to need it for the HTML code

 

I have included a screen shot of the Domain Maintenance page, I normally wouldn’t put this much content on a page that is only open long enough to set a State and Jump to another page but I wanted to use it as an example.

ps10

For the HTML code to work I needed a Global State that I could set to the value that matched the menu selection.  In this case the reviewer clicks on the Domain Maintenance from the BMP sub-menu.

ps12

The state name is gProgram its number is (2048) , I tend to name global States with a prefix of a little {g} an old programmer habit.

Notice the 3 values for the gProgram state

No form selected = Number zero
Benefits Monitoring Program (BMP) = Number 1
FRANK2 = Number 2

Now finally for the code behind the Advanced HTML control that makes this all work.

ps11

Notice Line 8 has the GetState with number  of the gProgram state (2048).

Line 8 also has the setValue to a 1 which actually is the second item in the State BMP.

Line 9 shows URL for the Domain handler page , the one we want to jump to.

 

This code could be greatly shortened but I wanted explain how this little piece of JavaScript and HTML works.

Here is the code in simple text in case you want to copy and paste.


<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta charset=”UTF-8″>
<script language=”javascript” type=”text/javascript”>
function SetStateJumpPage()
{
window.parent.site9.PageStateMgr.getState(‘2048’).setValue(‘2’);
window.parent.location.href = “/wa/page?oid=1004001″;
}
</script>
<title></title>
<style>
body {
font: 13px Verdana;
color: #333;
text-align: center;
}
</style>
</head>
<body onload=”SetStateJumpPage()”>
<p>This page should only display for a few seconds</p>
<p>If the Domain Maintenance Page does not display click button below</p>
</body>
</html>


Here is the Domain Handler page that gets called as a result of the code above.  Notice the State value used in the heading.  If the FRANK menu item had been selected by the reviewer this would have been FRANK2.

ps15

Now a warning, if you use the (Test) PS option to test the maintenance page, it will set the State value and jump to the handler page and the page will go grey.  None of the controls will work on the greyed out page.  The work around is to edit the handler page directly and use the SAFE option to edit the Maintenance page.

This hanging page does not occur when you (Run)the project, run the Exported HTML of the project or run the PS hosted version.  Sometimes when the Amazon servers or the network that PS uses are slow you might see the maintenance page for a brief time before it is replaced with the handler page.

Protoshare Lesson #1 (V6) Get a dynamic date label for current date/time

One of the things missing in Protoshare is a simple component that is a Date/Time field that displays the current date and time.  It needed to be dynamic so when we did presentations they would not have the previous old hard coded date.  We didn’t want to change these dates every time we did a new presentation.  We are lazy.

Here is an example of one of my PS forms with the date/time field outlined.

PS01

The outlined field is an (Advanced HTML) control with some special settings to allow it to blend in with the green background.

ps02

The (Stroke Style) is set to none to eliminate the outline around the Advanced HTML control.

The (Fill Color) is set to transparent to allow the date and time to sit on top of the green background.

The (Show Scrollbars) should be set to Never to eliminate them from displaying on the form.

 

 

 

 

 

 

 

 

Below is the code for the Advanced HTML Block, notice we are using an embedded CSS style to get the text to look like the rest of the text on the form.

By changing the Document.Write statement you can get the date and time to display any way you like.

ps03

Here is the code in simple text so you can copy and paste it into your PS project.


<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
<style>
body {
font: 11px Arial;
color: #333;
text-align: left;
}
</style>
</head>
<body>

<script type=”text/javascript”>
var todayDate=new Date();
var date=todayDate.getDate();
var month=todayDate.getMonth()+1;
var year=todayDate.getFullYear();
var hours=todayDate.getHours();
var minutes=todayDate.getMinutes();
var seconds=todayDate.getSeconds();
document.writeln(month + “/” + date + “/” + year);
document.writeln(” “+ hours + “:” + minutes + “:” + seconds);
</script>
</body>
</html>


This may seem like a simple JavaScript trick but I know lots of prototyper’s who are not that experienced at HTML or JavaScript.  This sample trick can be used to put all sorts of text based information from live web sites in to PS pages