TUTORIAL 04: CREATING A COMMENT FORM AND SIMULATING A COMMENT WITH REAL DATA

Today, we’ll show you how to simulate a comment form from a blog or a forum, using a datagrid to show the input data, and hiding the unused fields.This tutorial was recorded on JustInMind Prototyper 2.6 for Mac, which I’m testing and is about to be the release version. I used a 2 year old MacBook, running Mac Os X Leopard and an external monitor, to have a bigger screen. Yesterday’s video was done on a PC, and the tutorial file was the same, and all the data imported from one system to another without any problems.

First of all, we’ll have to create the layout fields. We’ll need two containers and a link. The link can be created with the new widget Link, which is available on your version 2.6.

The link is just a blue text that changes when you click. Later on, we’ll add one more function.

Then we create the two other boxes. They’ll be hidden, because we don’t need them until someone clicks on it.You click on the hidden Property.

And the image will be signalled as hidden by this symbol.

We have to create a Data Master, with four important fields: Name, Email, URL and Comment. If you need more information about Data Masters, we have another tutorial here.

For each kind of form field, we choose a data type. Depending on which data you want, you can use money, numbers, checkboxes, etc.

We then add all the fields we want to the Data Master, and check the buttons, so JustInMind Prototyper will generate automatically all the add/edit/view data screens.

So, we’ll have a Data Master called Comments, with 4 fields.

Then, we create a form, using the input text. We create the layout as we want, can put a button (remember, from version 2.6 on, you have a button widget, just drag and drop on your screen and you’ll have it placed).After that, we select all the form elements, and with a right-click, group them into form.

Then, we’ll have to configure the Submit Comment button and the Comment link. We want the comment box to appear when we click the link, and to disappear when we click on Submit Comment. Besides, we’ll have a Comment box to appear and the new data to be there. So, we’ll configure like this:Comment link:Show Commenting Box -> Create a New Event. We choose the Hide/show option, tick the Show and click on the Commenting box to the preview. Show Comment Form -> the same steps above, but choosing the comment form.

Submit CommentHide Commenting Box ->Same steps above, but option Hide Hide Comment Form Show Comment Box -> This will show the second box, which was hidden until now. Show Datagrid -> this is where the comments are stored. Execute action -> New Comments Action (Comments is the name of the datagrid. This will create a new line on the table).

To insert the datagrid on our project, we drag and drop it inside the container. It must be hidden, because will only be exhibited when we submit a comment.

This datagrid is very edited, not to be show just like a table. We don’t want to show people’s emails, although we’ll collect this data. Also, we have far more space for comments than for names. This way, we have to signal that the field comment is a textarea, not just a simple text.

TUTORIAL VIDEOS

http://www.justinmind.com/blog/?p=115

First, I compressed the first line, because we don’t want it to be shown. Then, we transform the fields to be free arranged, so we can move the objects within. Then we change the editing, putting the name in bold and the website in italic. Note that any editions that you do on the first line will be repeated on the others.After editing, we’ll test the process, to see if it works. Here’s the test.

<object width="450" height="253"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=5713633&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=fc7712&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=5713633&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=fc7712&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="450" height="253"></embed></object>