TUTORIAL 03: FILTERING DATA AND HIDING ELEMENTS WITH JUSTINMIND PROTOTYPER

Today I’ll show you some things you can’t do with a wireframe, neither with a mockup. We’ll work with Data Masters, and also, a neat trick to hide and show elements onscreen, using JustInMind Prototyper.I guess you all know blip.fm, don’t you? There, you can search a huge song database and view results. See their site here.

We’ll simulate this situation with JustInMind Prototyper. Firstly, we get a blank screen and put some visual elements that won’t be necessary in this tutorial.

We have the space to put the search field, but we don’t put it there yet.Then we need to create the Data. Let’s add a datamaster. Click on the + sign, right where the cursor points. We have to give it a name, and create the fields. We can use several kinds of fields, from emails, plain text, numbers, money, etc. For this example, we’ll use song name, artist and duration.

After creating it, notice you’ll have several other pages on you right Screens panel. They’re useful to add, edit or delete data on the form we created.Let’s add some fake data, to show you how it will work.

Well, then let’s create the bottom part of the web. We’ll need some boxes with previously posted songs. We drag and drop a container, to have all the little boxes. We can make it without borders, or any design fancy you like, but let’s not mess with it right now.

The important thing is this: because it’s a drag and drop software, by definition all elements you drop on the screen aren’t aligned in any way. They stay where you put them. But in this case, we’ll want this aligned. Inside the big container, everything must be aligned from top to bottom. In the properties menu, we select the second alignment button, and everything will be on top of other things.

Then we’ll add some more containers, for the elements. They have the width of the bigger container, so you’ll only see the horizontal lines. We’ll fill the ones below the first with fake data, just for simulation purposes.The first one is special. Here, we’ll put the form, with the search result. In the object’s properties, we’ll mark the hidden option. This means when we first load the page, it will not be shown. Simulate it, and you’ll see the second rectangle there, but this one won’t be.

Inside it, we’ll drag and drop a data grid. A datagrid shows the content of a datamaster. We’ll arrange it to fit exactly inside the hidden rectangle, and we’ll also mark the hidden button, for it won’t be shown except when something happens.

With all the rectangles filled, let’s work the search form. We drag and drop from the List Components a Filter. This is a blue dashed rectangle. Let’s put it on our search bar, and put inside it the search form and button.

We have to configure it. On the Filter properties, we’ll signal which datagrid it does filter. Note that it has a property which is not common: Datagrid. We’ll choose songs (which is the only datagrid we have, but you could have more than one in a given project).

We then drag and drop a search from the field song from the Data Master Panel to the screen. I deleted the label song name, and created a button called Search Song, as you can see above.This button is very special. It will have 3 actions: filter the datamaster, and show both the container and the filtered datagrid inside it.So, let’s configure the button.Going to the Events panel, we’ll add the 3 events. First, Filter song. When we add an event, we choose the instance (OnClick), and what it will do. Repeat for the three options.OnClick – Show – and we select the container (for it will show the container)OnClick – Show – datagridOnClick – Execute Action – Filter songs (here, it shows the datagrid’s name).

TUTORIAL VIDEOS

Please note that you have to select the option Show when configuring the event, because the default is Hide.Simulate it. http://www.justinmind.com/blog/?p=95