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.
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.
Open up the RIA control and locate the Tab control
Drag and Drop this into your page and you should see
By double clicking in the control you will open it up in edit mode with default tab names and Lorem content.
Now go and change the Tab names and content using the editor, you can add some formatting.
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.
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.
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.
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.
I’m going to use the 3 tab version in the lesson. Drag and drop into to you page.
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.
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.
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.
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.
You are going to want to click on the Edit State… for the Navigation control.
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.
Now here is what the Interactive tab control looks like after I save the State back.
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.
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).
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.
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.
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.
I do good work . 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.