Justinmind Prototyper Userguide

7/23/2019 Justinmind Prototyper Userguide

http://slidepdf.com/reader/full/justinmind-prototyper-userguide 1/124

User Guide



Justimind Prototyper – User Guide

Table of ContentsIntroduction................................................................................................................................... 4

Prototyping Environment .............................................................................................................5

Getting Started............................................................................................................................. 6

Drawing Screens....................................................................................................................... 7

our !irst Interactive Protoype.................................................................................................."

#nnotations............................................................................................................................... "

Pu$%is& 'n%ine........................................................................................................................... "

(reating Prototypes....................................................................................................................)*

+or,space..............................................................................................................................)*

#dding (ontent to Screens..................................................................................................... -*

#rranging +idgets.................................................................................................................. -*

Guides and Grid......................................................................................................................-

+idgets......................................................................................................................................-4

Static widgets..........................................................................................................................-4

S&apes....................................................................................................................................-7

Input widgets...........................................................................................................................-/

Se%ection widgets....................................................................................................................4

0avigation widgets..................................................................................................................45

Data Grids...............................................................................................................................4/

+e$ widgets...........................................................................................................................5)

Sty%es and !ormatting.................................................................................................................5-

!ormatting...............................................................................................................................5-

De1au%t Sty%es..........................................................................................................................57

(opy Sty%es.............................................................................................................................5"

Events and Interactions..............................................................................................................5/




Events Pane%...........................................................................................................................5/

2in,s....................................................................................................................................... 6

Interactive images...................................................................................................................6-

User Events............................................................................................................................64

#ctions.................................................................................................................................... 65

Simu%ated ru%es and conditions...............................................................................................77

Data Simu%ation..........................................................................................................................7/

Importing 3ea% Data................................................................................................................7/

Epression ui%der 'verview.................................................................................................."*

Smartp&ones and S#P.............................................................................................................)*6

3euse.......................................................................................................................................)*6

emp%ates.............................................................................................................................)*6

asters................................................................................................................................. )*/

(ustom widget %i$raries.........................................................................................................)))

Import and Eport Prototypes...............................................................................................))-

Pu$%is& 'n%ine..........................................................................................................................))5

Eport to 82........................................................................................................................))7

Inc%ude9Ec%ude comments...................................................................................................))7

'ptimi:e code.......................................................................................................................))7

Scenarios.................................................................................................................................. ))"

(reating Scenarios...............................................................................................................))"

;a%idating Prototypes............................................................................................................))/

<ey$oard S&ortcuts..................................................................................................................)*

#dditiona% 8e%p......................................................................................................................... )4

-




IntroductionJustinmind Prototyper is a =uic, prototyping too% t&at a%%ows you to create interactive and

accurate simu%ations o1 t&e app%ications you need. +it& Justinmind Prototyper > you can easi%y

incorporate any corporate image to your prototypes> eport t&em in 82 1ormat to

demonstrate t&em on?%ine or automatica%%y generate a%% o1 t&e documentation in an 'pen '11ice

or S +ord 1i%e. #nd wit&out re=uiring programming ,now%edge or a sing%e %ine o1 code.

No Programming. Justinmind Prototyper is an intuitive too%. #%% t&at@s re=uired is to

drag t&e components or interactions you need 1rom t&e pa%ettes to t&e wor, area.

Instantaneous Simulations. +it& one c%ic, on t&e Simu%ate $utton> you wi%% see t&eprototype o1 your app%ication in action. 0o waiting.

Documentation automatically generated. I1 you wis&> your prototype comes wit& a%%

t&e necessary documentationA Justinmind Prototyper generates t&is documentation 1or

youA you on%y &ave to decide w&ic& 1ormat you want.

Exportable in HT! format. +it&out any e11ort> so t&at your customers or users can

see &ow it wor,s on?%ine and give t&eir opinion. Use it rig&t 1rom t&e $eginning o1 your

proBects 1or tota% assurance> saving you rewor, costs and any inconvenience to your

customers> and a%%owing you to create app%ications wit& easy usa$i%ity.

oreover> i1 you pu$%is& your prototypes in Justinmind "sernote> your customers can s&are

t&eir remar,s on?%ine in a co%%a$orative e11ort. !o%%ow t&eir comments as i1 t&ey were

conversation t&reads in a 1orum> and ta,e advantage o1 t&eir 1eed$ac,A i1 you do it on a

prototype> you won@t &ave to do it %ater on t&e app%ication. 3emem$er t&at Justinmind

"sernote integrates t&e %eading on%ine testing too%s on t&e mar,et.

4



Prototyping Environment

5




Getting Started&ere are a 1ew concepts t&e user must $e 1ami%iar wit& in order to 1u%%y understand t&is userCs

guide> so $e1ore proceeding any 1urt&er weCd %i,e to c%ari1y t&e terms.

#ey concepts

# prototype is a representation o1 a so1tware program t&at inc%udes on%y a 1ew aspects o1 t&e

eventua% app%ication and resem$%es it up to some degree and w&ose purpose is to i%%ustrate &ow

t&at app%ication is to %oo, and $e&ave to get an impression o1 its capa$i%ities and s&ortcomings.

It may a%so $e re1erred to as moc,?up or wire1rame.

&e user inter1ace is t&e co%%ection o1 a%% t&e visua% components t&at ma,e up an app%icationCs

screen and t&at &ave a grap&ica% representation on it. It a%so comprises meta data on t&ese

e%ements suc& as t&eir %ayout disposition or t&eir $e&aviour patterns under certain events.

# screen is a group o1 visua% components gat&ered into a canvas or editing area. It may a%so $e

re1erred to as page and is $rowsed at once.

# 1unctiona% scenario is a grap& o1 app%ication components t&at represent t&e app%icationCs

genera% $e&aviour suc& as its naviga$i%ity or its processing.

# comment is a userCs written remar, o1ten re%ated to an added piece o1 in1ormation on an

e%ement o1 a prototype. It may a%so $e re1erred to as annotation.

Starting t$e application

o start t&e Justinmind Prototyper you Bust need to go to t&e insta%%ation 1o%der or any s&ortcut

you may &ave c&osen to create in t&e operating system menu9des,topF and dou$%e c%ic, on t&e

icon. #1ter t&at> a start?up image wit& a %oading progress $ar disp%ays 1or a s&ort time> rig&t

$e1ore t&e actua% app%ication inter1ace comes up. I1 it is t&e 1irst time you start t&e app%ication or

i1 you &ave not disa$%ed t&e 1unctiona%ity in t&e !i%e Pre1erences menu> a we%come window

w&ic& disp%ays s&ortcuts 1or t&e most common tas,s prompts. &is window o11ers a &and1u% o1

options to =uic,%y start o11 wit& t&e program.

6




Drawing Screens

!rom t&e components pa%ette> drag and drop t&e item you want in t&e canvas. 'nce inside t&e

canvas> you can re?si:e and move it to 1it in your design. o move it> se%ect it and drag it to t&e

desired destinationA you can a%so pus& it wit& t&e arrow ,eys &o%ding down t&e (#PS ,ey wi%%

speed it upF. o &e%p you de$ug your design> you a%so &ave t&e 1o%%owing instrumentsH

&e automatic a%ignment system $%ue guide%inesF.

&e grid see es&F.

&e 3u%es.

&e Guides. o position t&em> c%ic, on t&e ru%es and drag t&em to t&e desired p%ace. o

de%ete t&em> simp%y se%ect t&em and press t&e de%ete ,ey.

&ere is a too%$ar re%ated to t&e wor, area> $etween t&e %ower part o1 t&e canvas and t&e

properties view. &e two tet 1ie%ds indicate a re1erence reso%utionH you can c&ange it $y direct%y

editing t&ese va%ues. &e :oom indicator is on t&e rig&t sideH magni1y or reduce t&e si:e $y

using t&is drop?down menu.

&e e%ements on t&e screen ,eep a certain order o1 dept& $etween t&em. ou can see t&e order

in w&ic& t&ey are arranged in t&e (ontent o1 t&e current screen. &us> t&e &ig&est ones $%oc,

out t&e ones $e%ow t&em. o c&ange t&is order> rig&t c%ic, t&e item or se%ect it in t&e content

viewF and se%ect t&e Sort option o1 your c&oice.

&e Image component a%%ows you to see w&ic& parts o1 t&e screen wi%% $e ta,en up $y images.

'r you can rep%ace t&ese pictures wit& rea% images $y se%ecting a 1i%e 1rom t&e Properties view.

(reate more screens in your prototype $y c%ic,ing t&e $utton on top o1 t&e %ist o1

screens.

3ename it $y rig&t c%ic,ing it. Se%ect Edit 1rom t&e contet menu.

I1 you want to de%ete one> rig&t c%ic, it and c%ic, De%ete.

#nd> to edit t&e content o1 an inactive screen> dou$%e?c%ic, it 1rom t&e %ist o1 screens. Its

content is t&en %oaded onto t&e canvas w&ere you can easi%y c&ange it.

Justinmind Prototyper a%%ows you to copy and paste screen components wit&in t&e

same screen or onto ot&er screens. ou can use t&e options in t&e Edit menu or t&e

usua% ,ey$oard s&ortcuts o1 K(tr%(L copyF and K(tr%;L pasteF. o dup%icate e%ements>

drag t&em to t&e desired position $y &o%ding down t&e (tr% ,ey or wit& (32 D

ac ,ey$oard s&ortcuts are di11erentF.

%emember& '$ate(er action you do) you can undo it or redo it from t$e Edit menu.

7




Your First Interactive Protoype

o convert a tet in your prototype into a %in,> mar, it wit& a speci1ic sty%e 1or eamp%e> t&e

c%assic $%ue co%or and under%inedF and drag it to t&e screen you want it %in,ed to in t&e %ist o1

screens. It is %in,ed automatica%%y. &us> $y activating t&e simu%ation mode> you can interact wit&

t&e de1ined components and navigate t&roug& t&e di11erent screens.

I1 want to a%%ow on%y part o1 t&e tet to $e c%ic,ed on> p%ace an Image ap over it and t&en drag it

to t&e screen you c&oose to generate t&e %in,. &e Image ap is not disp%ayed w&en you c%ic,

t&e Simu%ate $utton $ut t&e area it occupies is sti%% interactive.

ou can a%so move t&e menu e%ements and nodes o1 t&e tree to ot&er screens. Just drag t&em

onto t&e screen you c&oose i1 you do t&e opposite> t&e resu%ts are t&e sameF.

!ina%%y c%ic, on t&e simu%ate $utton at t&e top rig&t o1 t&e canvas to see your prototype in action.

%emember& *ny element dragged into a screen lin+s t$e acti(e screen to t$e assigned

one.

Annotations

+it& Justinmind Prototyper> you can add comments to your wire1rames and we$site prototypes

in a c%ic,.

ou can write notes and o$servations straig&t on t&e prototype@s screens and even on its

components.

o add a note on one o1 t&e components> Bust rig&t c%ic, on t&e component and c&oose Kadd

commentL.

In t&e comment ta$> you@%% 1ind everyt&ing you need to organi:e> searc& and 1i%ter a%% t&e

annotations o1 your we$site prototype. #nd i1 you@re using Usernote> you can even import

eterna% comments to Justinmind Prototyper so you can ,eep on improving your app%ication

prototype. &ese comments wi%% $e automatica%%y %in,ed to t&e wire1rame@s components.

Publish Online

#t Justinmind> we t&in, t&at a we$ prototype is t&e $est communication too% $etween

customers9users and t&e so1tware deve%opment team. I1 you &ave an app%ication prototype at

t&e start o1 a proBect and it is as c%ose as possi$%e to t&e 1ina% app%ication> t&e user can $e

invo%ved 1rom t&e $eginning> giving &is opinion and va%idating itH t&e more ,ey peop%e get

invo%ved> t&e more success1u% t&e proBect wi%% $e as a w&o%e> reducing t&e num$er o1 1ina%

adBustments made on t&e app%ication and not on t&e prototype.

+it& Justinmind Usernote. #%% aut&ori:ed ,ey users can access your prototypes on t&e Internet.&ey can co%%a$orate $y testing and commenting on t&em 1rom t&eir $rowser. #%so> a%% t&eir

"




notes are registered and centra%i:ed so t&at no detai%s are %ost. &roug& t&is service> you can

a%so integrate your prototype on%ine wit& user test too%s and remote too%s.

Se%ect t&e menu option S&are M Pu$%is& 'n%ine and enter in your Justinmind Usernote account.

&en pus& t&e Kup%oad prototypeL and se%ect t&e prototype 1i%e t&at you want to pu$%is& i1 you

want to pu$%is& t&e prototype t&at you are current%y wor,ing on you s&ou%d save it 1irst to some

dis, %ocationF. 'nce up%oaded you can c%ic, on t&e name o1 t&at prototype to navigate it or invite

anot&er users to review it.

/




(reating Prototypesor!space

&is sections detai%s t&e windows t&at compose t&e user inter1ace o1 Justinmind Prototyper suc&

as t&e main menu> t&e too% $ar and t&e edition ta$s.

T$e ain enu

Justinmind PrototyperCs main menu is %ocated at t&e top o1 t&e app%ication and contains eig&t

root %eve% itemsH !i%e> wit& a%% t&e operations re%ated to 1i%es> suc& as save> %oad> etc.> Edit>containing common edition operations> Insert contains two options> insert tet and insert an

image 1i%e> ;iew> containing operations t&at &and%e various visua% aspects> a$%e> containing

operations to edit ta$%es> Simu%ate to simu%ate your current prototype> 3eports containing

operations to generate documentation> S&are> containing contro%s to Pu$%is& your prototype

on%ine or generate t&e 82 version o1 t&e prototype> and 8e%p> wit& a variety o1 options

o11ering &e%p> support and genera% in1ormation.

,ile enu

&e 1i%e menu contains some standard operations t&at act on 1i%es as we%% as ot&er particu%ar

actions t&at &e%p t&e user per1orm speci1ic tas,s.

,ile menu - Ne

Use t&is entry to =uic,%y create new e%ements. Put t&e cursor over t&is item to open a su$ menu

wit& t&e e%ements t&at can $e created.

Prototype N (%ic, on prototype to create a new prototype and open it.

Screen N (%ic, on screen to create a new screen in t&e current prototype. Enter t&e

screen name in t&e window t&at comes up> optiona%%y se%ect t&e temp%ate and c%ic, t&e

', $utton.

Data master N (%ic, on data master to create a new data master in t&e current

prototype. # new window comes up as,ing 1or t&e attri$utes and t&e name> $ut data

masters are 1air%y comp%e and we wi%% cover t&em in detai% %ater on in t&is document.

emp%ate N (%ic, on temp%ate to create a new temp%ate. Enter t&e temp%ateCs name in

t&e window t&at comes up and c%ic, t&e ', $utton.

Scenario N (%ic, on scenario to create a new scenario. Enter t&e desired name and

description in t&e window t&at comes up and c%ic, t&e ', $utton. &e screen wi%%

c&ange to t&e Scenarios view.

)*




,ile menu - /pen

(%ic, on open to open an eisting prototype. &e open dia%ogue comes up> 1rom w&ic& you needto se%ect t&e ;P 1i%e and c%ic, 'pen. &is option c%oses t&e current%y opened prototype. I1 you

want to open more t&an one prototype at t&e same time t&en you &ave to eit&er %aunc& two

Prototypers or dou$%e?c%ic, on t&e ;P 1i%es o1 eac&.

,ile menu - %ecently /pened Prototypes

&is entry contains a %ist o1 prototypes t&at you &ave opened recent%y. o open one o1 t&ese

prototypes Bust c%ic, on it.

,ile menu - Close

(%ic, on c%ose to c%ose t&e current proBect. It is on%y avai%a$%e i1 t&ere is a proBect opened.

,ile menu - Sa(e

(%ic, on save to save t&e unsaved c&anges in t&e current prototype. It is on%y avai%a$%e i1 t&e

current proBect &as su11ered c&anges since t&e %ast save. <ey$oard s&ortcutH (tr%sF

,ile menu - Sa(e as...

(%ic, on save as... to se%ect a new prototype name and9or %ocation to save t&e current prototype.

I1 t&e prototype was a%ready saved in anot&er %ocation and9or name> it is conserved.

,ile menu - Print

Sends to t&e de1au%t printer t&e contents o1 t&e screen> scenario or navigation map t&at is

current%y opened in t&e canvas.

,ile menu - %eco(er prototype

I1 you want to recover a $ac,ed up prototype> c%ic, on recover prototype. &is entry opens t&e

prototype recovery window> w&ic& %ets you se%ect t&e $ac,ed up prototype to recover.

))




,ile menu - Preferences

(%ic, on pre1erences to open t&e pre1erences dia%ogue. &is dia%ogue o11ers t&e inter1ace tomodi1y various program?%eve% user pre1erences t&at are persisted a1ter c%osing> so t&ey wi%% $e

app%ied as you de1ined t&em t&e net time t&e Justinmind Prototyper is run. &e dia%ogue &as a

tree wit& a set o1 sections t&at group t&e pre1erences into %ogica% pages.

,ile menu - Preferences - 0eneral

8ere are t&e genera% pre1erences t&at app%y to a%% aspects o1 t&e app%ication.

(&ange t&e %anguage $y se%ecting t&e desired %anguage in t&e Justinmind Prototyper

2anguage drop?down.

Enter t&e U32 o1 your Justinmind Server provider in t&e Justinmind Usernote U32 input

$o to ena$%e t&e integration o1 your prototyping suite wit& t&e server suite.

ic, or untic, t&e S&ow we%come window at start?up to ma,e or prevent t&e we%come

window 1rom disp%aying at start?up.

ic, t&e Send error reports to Justinmind to a%%ow error reports to $e sent to Justinmind

in order to &e%p us improve t&e product. +e strong%y recommend activating t&is option>

since we periodica%%y pu$%is& product updates wit& $ug 1ies and per1ormance issues

so%ved> most o1 t&em su$mitted $y our customers.

ic, t&e 'ptimi:ed 82 c&ec,$o to generate 82 prototypes w&ose source code&as $een minimi:ed and optimi:ed to per1orm $etter. It &as> &owever> t&e s&ortcoming

o1 $eing %ess reada$%e and more di11icu%t to edit.

ic, t&e Inc%ude (omments in 82 c&ec,$o to inc%ude t&e comments in t&e 82

w&en you eport t&e prototype to t&at 1ormat.

ic, t&e (&ec, 1or updates automatica%%y to a%%ow t&e system to go on%ine and c&ec, 1or

updates once a1ter a de1ined amount o1 time.

Insert a num$er o1 minutes in (&ec, 1or updates interva% in minutesF to de1ine t&e

num$er o1 minutes t&at &ave to e%apse $etween two update c&ec,s.

ic, (&ec, 1or updates at start?up to a%%ow t&e system to c&ec, 1or updates at start?up.

(&ange t&e va%ue o1 t&e input U32 1or updates to modi1y t&e %ocation w&ere t&e updates

are %oo,ed up. Do not c&ange t&is va%ue i1 you are not comp%ete%y sure o1 w&at you do.

,ile menu - Preferences - 1ac+ups

Under t&is entry are t&e pre1erences re%ated to $ac,up copies t&at are automatica%%y created 1or

your prototypes to prevent data %oss.

ic, or untic, t&e Ena$%e autosave c&ec,$o to activate or disa$%e prototype autosaving.

)




I1 auto save is ena$%ed> it occurs every a %imited amount o1 minutes. o c&ange t&is

amount> insert a num$er in t&e #utosave interva% input $o. &e de1au%t va%ue is )*

minutes.

(&ange t&e a. num$er o1 $ac,?ups va%ue to increase or decrease t&e num$er o1

$ac,ups stored $y t&e system. ore $ac,ups mean t&at more o%d versions are stored

per prototype.

,ile menu - Preferences - ,unctional Scenarios

&is entry contains pre1erences re%ated to 1unctiona% scenarios %oo, and 1ee%. !rom &ere you can

c&ange t&e scenario grap&s co%ors> 1ont 1ace> %ine sty%e> ru%ers pre1erences> grid type> etc. &e

va%ues are easy to understand and we consider t&at no 1urt&er ep%anation is needed.

,ile menu - Preferences - Netor+ connections

Use t&is screen to con1igure your networ, connection in case you use a proy server to connect

to t&e internet. I1 you Bust donCt ,now> you are pro$a$%y not using a proy> so %eave it as it is.

't&erwise> contact your internet provider to o$tain your proy connection in1ormation and enter

it under t&e anua% proy con1iguration radio $utton.

,ile menu - Preferences - "ser Interface

&is %ast item contains t&e pre1erences re%ated to t&e visua% aspects o1 t&e screen editor. &e

pre1erences set &ere app%y to t&e $e&aviour o1 a%% screen components and to t&e edition canvas

o1 screens> temp%ates and masters.

ic, t&e S&ow ru%ers c&ec,$o to disp%ay ru%ers at t&e top and %e1t o1 t&e canvas.

o c&ange t&e ru%er units> c&ange t&e va%ue 1rom t&e 3u%er units drop?down.

ic, t&e S&ow grid c&ec, $o to disp%ay a grid over t&e screen canvas to &e%p you

position components.

ic, t&e Snap to grid c&ec, $o to ma,e e%ements snap to t&eir c%osest grid %ine w&en

moving or positioning t&em.

(&ange t&e grid spacing using t&e Grid spacing in pie%sF input $o. &e spacing must$e set in pie%s.

ic, t&e Snap to geometry c&ec, $o to ma,e components to snap to eac& ot&erCs

$oundary %ines w&en dragging t&em across t&e canvas.

,ile menu - Import

&is menu &as a %ist o1 options to import components 1rom ot&er prototypes to t&e one t&at is

current%y $eing modi1ied.

)-




,ile menu - Import - Prototype

Imports a%% t&e contents 1rom a vp 1i%e into t&e prototype and c&ec,s i1 t&ere are any con1%icts.

&is 1unctiona%ity is ep%ained in detai% in t&e 3euse section

,ile menu - Import - Screen

#dds a screen 1rom anot&er prototype to t&e screen %ist a%ong wit& a%% its content and

interactions. &at screen s&ou%d $e eported previous%y 1rom t&e ot&er prototype.

,ile menu - Import - Template

#dds a temp%ate 1rom anot&er prototype to t&e temp%ate %ist a%ong wit& a%% its content and

interactions. &at temp%ate s&ou%d $e eported previous%y 1rom t&e ot&er prototype.

,ile menu - Import - aster

#dds a master 1rom anot&er prototype to t&e master %ist a%ong wit& a%% its content and

interactions. &at master s&ou%d $e eported previous%y 1rom t&e ot&er prototype.

,ile menu - Import - 'idget !ibrary

#dds a%% t&e widgets 1rom t&e se%ected %i$rary 1i%e to t&is insta%%ation o1 Justinmind Prototyper.

&e widgets are inc%uded in t&e y +idgets ta$. &ese widgets do not $e%ong to t&e prototype

$ut to t&e Prototyper so you wi%% 1ind t&em t&ere eac& time you open9create a prototype.

,ile menu - Export - Prototype

Eport t&e contents o1 t&e prototype data masters> screens and so onF into a new vp 1i%e. &is is

etensive%y ep%ained in t&e reuse section.

,ile menu - Export - Screen

Eport t&e contents o1 a screen into a 1i%e t&at can $e imported on ot&er prototypes.

)4




,ile menu - Export - Template

Eport t&e contents o1 a temp%ate into a 1i%e t&at can $e imported on ot&er prototypes. &e dia%og

wor,s t&e same way as t&e one to eport screens.

)5




,ile menu - Export - aster

Eport t&e contents o1 a master into a 1i%e t&at can $e imported on ot&er prototypes. &e dia%ogwor,s t&e same way as t&e one to eport screens.

,ile menu - Export - 'idget !ibrary

Eport t&e se%ected widgets groups into a 1i%e t&at can $e imported in ot&er Justinmind

Prototyper insta%%ations a1terwards.

,ile menu - Exit

(%oses t&e app%ication and eits t&e program.

Edit enu

&e edit menu contains s&ort?cuts to t&e usua% edition actions t&at any wort&y editor o1 any ,ind

must o11er.

(%ic, on Undo to undo t&e %ast operation and get $ac, to t&e state rig&t previous to it.

<ey$oard s&ortcutH (tr%:F

(%ic, on 3edo to redo t&e %ast undone operation. <ey$oard s&ortcutH (tr%yF

(%ic, on Se%ect #%% to se%ect a%% t&e e%ements in t&e current editor> i.e.> a%% t&e e%ements in

a screen. <ey$oard s&ortcutH (tr%aF

(%ic, on (opy to copy t&e current se%ection to t&e c%ip$oard. <ey$oard s&ortcutH (tr%cF

(%ic, on (ut to cut t&e current se%ection 1rom t&e editor and put it into t&e c%ip$oard.

<ey$oard s&ortcutH (tr%F

(%ic, on Paste to paste to t&e current editor t&e contents o1 t&e c%ip$oard. <ey$oard

s&ortcutH (tr%vF

)6




(%ic, on #%ign %e1t> center> rig&t> top> midd%e or $ottom to a%ign t&e se%ected e%ements to

t&e %e1tmost> center> rig&tmost> topmost> midd%e or $ottommost e%ement respective%y.

atc& widt& and atc& &eig&t are avai%a$%e on%y w&en two or more user inter1ace

e%ements usua%%y widgetsF are se%ected.

o o ma,e a%% t&e e%ements $e as wide as t&e %ast e%ement se%ected c%ic, on

atc& widt&

o o ma,e a%% t&e e%ements $e as &ig& as t&e %ast e%ement se%ected c%ic, on

atc& &eig&t

(%i, on !ind to open a searc& dia%og to %oo, 1or tet terms in t&e components o1 your

prototype.

Insert enu

&e insert menu &o%ds options to import image 1i%es into your prototype and a =uic, way to add a

tet $o.

(%ic, on Image 1i%e.. to add an image 1i%e to your prototype..

(%ic, on et and a ric& tet tet $oF wi%% $e added in t&e position *>*.

2ie enu

&e view menu provides contro%s 1or managing various visua% aspects o1 t&e app%ication.

(%ic, on 8ide9s&ow too%$ar to togg%e t&e main too%$ar visi$i%ity o119on.

)7




(%ic, on t&e di11erent options inside t&e oo%$ars menu to se%ect w&ic& too%$ars are

going to $e disp%ayed in t&e main too%$ar.

(%ic, on 3u%ers to s&ow9&ide t&e ru%ers in t&e canvas.

(%ic, on Grid to s&ow9&ide t&e grid in t&e canvas.

(%ic, on Snap to geometry to activate9deactivate t&e automatic a%ignment system.

(%ic, on (anvas Si:e to &ide9s&ow t&e grey %ines in t&e canvas t&at indicate t&e canvas

reso%ution

(%ic, on emp%ates to s&ow9&ide t&e temp%ates pane%.

(%ic, on asters to s&ow9&ide t&e masters pane%.

(%ic, on Data asters to s&ow9&ide t&e Data asters pane%.

(%ic, on ;aria$%es to s&ow9&ide t&e varia$%es pane%.

(%ic, on 'ut%ine to s&ow9&ide t&e out%ine pane%.

(%ic, on 0avigator to s&ow9&ide t&e navigator pane%.

(%ic, on 0otes to s&ow9&ide t&e notes pane%.

Table enu

&is menu contains options to edit a se%ected ta$%e in t&e canvas. &ey are on%y activated w&en

you se%ect a ta$%e.

(%ic, on 0ew (o%umn to add a new co%umn to t&e rig&t o1 t&e ta$%e. &e sty%es o1 t&e

ce%%s o1 t&at new co%umn wi%% $e copied 1rom t&e ones net to it.

(%ic, on 0ew 3ow to add a new row to t&e $ottom o1 t&e ta$%e. &e sty%es o1 t&e ce%%s o1

t&at new row wi%% $e copied 1rom t&e ones Bust a$ove it.

(%ic, on Se%ect (o%umn w&en you &ave a ta$%e ce%% se%ected to se%ect a%% t&e ce%%s t&at

are a$ove and $e%ow t&e one se%ected.

(%ic, on Insert (o%umn 3ig&t to create a new co%umn to t&e rig&t o1 t&e ce%% you &ave

se%ected.

(%ic, on Insert (o%umn 2e1t to create a new co%umn to t&e %e1t o1 t&e ce%% you &ave

se%ected.

(%ic, on Se%ect 3ow w&en you &ave a ta$%e ce%% se%ected to se%ect a%% t&e ce%%s t&at are

rig&t and %e1t t&e one se%ected.

(%ic, on Insert 3ow e%ow to create a new row $e%ow o1 t&e ce%% you &ave se%ected.

(%ic, on Insert 3ow #$ove to create a new row a$ove t&e ce%% you &ave se%ected.

)"




(%ic, on Sp%it ce%% vertica%%y to sp%it t&e se%ected ce%% into two vertica%%y.

(%ic, on Sp%it ce%% &ori:onta%%y to sp%it t&e se%ected ce%% into two &ori:onta%%y.

(%ic, on erge (e%%s to com$ine more t&at one ce%%s into one t&e ce%%s must $e one

net to t&e ot&erF.

Simulate enu

&is menu &as on%y one option and wor,s t&e same as t&e simu%ate $utton

%eports enu

3eports enu &as options to automatica%%y generate speci1ication documents 1rom t&e

in1ormation o1 t&e prototype you are current%y wor,ing on.

(%ic, on Screens to generate a S +ord it can $e opened wit& 'pen'11ice tooF

document inc%uding a%% t&e in1ormation regarding t&e screens suc& as screens&ots>

events in1ormation and notes.

(%ic, on Scenarios to generate a document inc%uding a%% t&e in1ormation regarding t&escenarios suc& as screens&ots and comments.

(%ic, on Data asters to generate a document inc%uding a%% t&e in1ormation regarding

t&e data masters suc& as attri$utes.

(%ic, on (ustomi:ed to generate a document wit& a%% t&e in1ormation Screens>

Scenarios and Data astersF 1rom t&e components o1 t&e prototype t&at you se%ect.

)/




S$are enu

&is menu &as options to s&are your prototype simu%ation wit& ot&er users t&at donCt &ave a

Justinmind Prototyper copy insta%%ed in t&eir computers.

(%ic, Pu$%is& 'n%ine i1 you want to pu$%is& your prototype in Justinmind Usernote and

invite peop%e to review it and insert comments. &e pu$%is&ed prototype can $e $rowsedwit& t&e most common internet $rowsers.

(%ic, on Eport to 82 to eport t&e prototype simu%ation into 82 1i%es. ou can

eit&er send t&ose 1i%es to your users or even c&age t&e 82 code a1terwards.

(%ic, on Save to Image i1 you want to store t&e contents o1 t&e canvas in an image 1i%e.

ou can do t&is 1or severa% screens and insert t&em into a s%ide s&ow so1tware.

Help enu

&is menu %ists a%% t&e &e%p options avai%a$%e to %earn &ow to use Justinmind Prototyper.

(%ic, on Ouic, Start Guide to open a PD! wit& t&e common contro%s o1 Justinmind

Prototyper.

(%ic, on S&ow +e%come +indow to s&ow t&e we%come window

*




(%ic, on 8e%p (ontents to open t&is &e%p

(%ic, on ;ideo utoria%s to $rowse t&roug& our tutoria%s &osted in our we$ site.

(%ic, on Support to as, 1or &e%p to our emp%oyees.

(%ic, on Searc& 1or Updates i1 you want to c&ec, i1 t&ere is a newer version o1

Justinmind Prototyper avai%a$%e.

(%ic, on #$out Justinmind Prototyper to see t&e in1ormation a$out your current copy o1

Justinmind Prototyper suc& as version num$er> %icense num$er and type or c&ange

your current %icense.

(%ic, on ;isit Justinmind to go to our we$site w&ere you can 1ind tutoria%s and etras to

deve%op prototypes.

Toolbar

Justinmind Prototyper &as a main too%$ar rig&t under t&e main menu. 3emem$er t&at you &ave

to se%ect t&e main menu option ;iew M S&ow oo%$ar in order to see t&e too%$ar.

"ser Interface

&e User Inter1ace ta$ &o%ds a%% t&e too%s and views necessary to de1ine t&e contents and t&e

interactions o1 your prototype. In t&is section we wi%% detai% eac& o1 t&e pane%s inside t&at ta$. #%%

t&e views can $e disp%ayed or &idden using t&e main menu option C;iewC.

)




Components

&ese are t&e widgets t&at can $e used to $ui%d t&e content o1 a screen. &ey are detai%ed one

$y one in t&e +idgets section.

Properties

&is pane% s&ows and edit t&e properties o1 t&e component se%ected in t&e canvas. I1 no

component is se%ected t&en t&e screen properties are disp%ayed. ou wi%% 1ind a detai%ed

ep%anation o1 eac& property in t&e !ormatting section.




Contents

2ocated at t&e top rig&t inside t&e User Inter1ace ta$> t&e (ontents pane% %ist a%% t&e screens>

temp%ates and masters created in t&e prototype.

-




&e Templates pane% %ist a%% t&e created temp%ates o1 t&e prototype. y de1au%t a prototype &as

one temp%ate $ut you can create as many temp%ates as you need. &e pane% &as one $utton to

create temp%ates and i1 you c%ic, on one o1 t&em in t&e %ist t&e contents o1 t&at temp%ate aredisp%ayed in t&e canvas. (&ec, t&e emp%ates section 1or 1urt&er in1ormation.

&e asters pane% is very simi%ar to t&e emp%ates pane%. In $ot& an options menu is disp%ayed

w&en eit&er a master or a temp%ate is se%ected using t&e rig&t mouse $utton or ctr%c%ic, in 'S

F. &e masters can $e dragged to t&e screens. ou &ave 1urt&er in1ormation in t&e asters

section.

Can(as& Design

&e centra% section o1 t&e User Inter1ace ta$ is t&e canvas. Disp%ays t&e content o1 t&e current

screen> temp%ate or master and a%%ows to edit it.

4




Can(as& Na(igation ap

&is is an auto?generated navigation map. a,ing t&e %ast se%ected screen as t&e root creates a

%eave 1or eac& navigation event de1ined in t&e components o1 t&at screen and it does t&is

recursive%y. ou can print t&e map using t&e main menu option !i%e ? Print.

E(ents

&e events pane% %ist a%% t&e interactions de1ined in t&e se%ected component in t&e canvas. ore

in1ormation a$out &ow to de1ine events can $e 1ound in t&e Events Q Interactions section.

5




Comments

&is pane% %ist a%% t&e comments associated wit& t&e se%ected component in t&e canvas. #

comment can $e dragged to anot&er component to c&ange t&at association.

Data asters and 2ariables

&e Data aster pane% %ist a%% t&e Data asters created in t&e prototype. Drag t&em to t&e

canvas to $ui%d an input 1orm automatica%%y. I1 you rig&t?c%ic, on one o1 t&em an options menu

wi%% $e disp%ayed. (%ic, on edit and t&e net screen wi%% appear.

&e ;aria$%es pane% %ist a%% t&e varia$%es created in t&e prototype to t&at moment. (reate

varia$%es using t&e $utton on top o1 t&at pane%. &ese varia$%es can $e used in t&e

interactions to simu%ate data interaction.

6




/utline) Na(igator and Notes

•

/utline& disp%ay t&e %ist o1 t&e components t&at are current%y in t&e canvas. ou cande1ine t&e order o1 t&at components $y drag and drop or using t&e green arrows at t&etop.

• Na(igator& s&ows a preview o1 a%% t&e contents in t&e canvas and &ig&%ig&ts t&e areat&at is visi$%e at t&at time.

• Notes& write your own notes a$out t&e screen visua%i:ed in t&e canvas in t&is pane%.&ese notes wi%% appear in t&e eported document too.

7



Scenarios

"



Comments

/




Adding "ontent to Screens

Use t&e +idget Pane% to add t&ese widgets to Screens> asters and emp%ates.

&ere are two ways to add widgets to t&e pageH

Drag and drop

o drag and drop a widget onto a screen drag a widget 1rom t&e widget pane% and re%ease it on

t&e canvas.

Select and dra

o se%ect and draw a widget on a screen c%ic, on a widget in t&e pane% to se%ect it and t&en c%ic,

and drag on t&e canvas to draw t&e widget.

Arranging idgets

Align idgets #elative to $ach Other

+&en you a%ign widgets re%ative to eac&> one o1 t&e widgets remains stationary. !or eamp%e>

c%ic,ing #%ign 2e1t a%igns t&e %e1t edges o1 a%% se%ected widgets wit& t&e %e1t edge o1 t&e %ast

se%ected widget. o a%ign widgets se%ect at %east two widgets> c%ic, on Edit in t&e ain enu and

point to one o1 t&e 1o%%owing optionsH

• Align left

• Align center

-*




• Align right

• Align top

• Align middle

• Align bottom

Distribute widgets e%ual distance &ro' each other

In order to distri$ute wigets e=ua% distance you need to se%ect at %east t&ree di11erent widgets in

t&e wor,ing area. &en se%ect one o1 t&e 1o%%owing options in t&e too%$arH

• Distribute vertically

• Distribute horizontally

(ove a widget &orward or bac!ward

+idgets in t&e canvas are sometimes stac,ed on top o1 eac& ot&er. o move a widget 1orward

or $ac,ward over t&is Cdept&C edge> rig&t?c%ic, on t&e widget to open its contetua% menu and go

to 'rder menu. &en se%ect t&e optionH

• Bring to front

• Send to back

• Move forward

• Move backwards

#s an a%ternative> widgets can $e moved 1orward9$ac,ward $y pointing t&em in t&e 'ut%ine

pane% and t&en se%ecting t&e options ove up or ove down.

Group and Ungroup widgets

Group widgets in order to move and treat t&em %i,e a sing%e widget. o group or ungroup

widgets se%ect two or more widgets and rig&t?c%ic, on any o1 t&em to open t&e contetua% menu.

Se%ect t&e optionH

• Group

• Ungroup

(ove widgets into a Dyna'ic Panel

+idgets can $e moved into a Dynamic Pane% so you can &ave t&em grouped and move t&em

easi%y wit&out &aving t&eir re%ative position %oc,ed as wit& t&e groups. o automatica%%y create a

Dynamic Pane% w&ic& contains a set o1 widgets. !irst se%ect t&e widgets and rig&t?c%ic, on any o1

t&em. &en se%ect t&e option Group into Dynamic Pane%s.

-)




)oc! or Unloc! widgets

+idgets can $e C%oc,edC so t&ey cannot $e moved or resi:ed. o %oc, or un%oc, a widget> use t&erig&t?c%ic, menu on t&e widget and se%ect 2oc, or Un%oc,. ou wi%% a%so 1ind t&ese options

ena$%ed in t&e top too%$ar or t&e Properties pane% once t&e widget is se%ected.

Guides and Grid

Guides and grid can &e%p you to arrange and a%ign widgets on t&e page easi%y.

Grid

+&en t&e grid is activated a set o1 vertica% and &ori:onta% %ines are painted on t&e canvas

$ac,ground. I1 you a%so activate t&e Snap to grid option> w&en moving widgets t&roug& t&ecanvas t&ey wi%% automatica%%y a%ign to t&e nearest grid %ine 1ound.

o activate or deactivate t&e grid you can eit&er go to t&e ;iew menu and c&ec,9unc&ec, t&e

option Grid or go to !i%e?Pre1erences t&en se%ect User Inter1ace and c&ec,9unc&ec, t&e

option S&ow grid. In t&e Pre1erences dia%og you can a%so 1ind t&e 1o%%owing options to con1igure

t&e gridH

• anvas size

• Show grid

• Snap to grid

• Grid spacing

Snap to geo'etry

&e option Snap to geometry can a%so assist you w&en positioning widgets on t&e page. +&en

t&is option is on> vertica% and &ori:onta% guide %ines appear w&i%e dragging a widget to indicate

w&en it is a%igned wit& ot&er widgets on t&e page. &e guide %ines wi%% appear 1o%%owing t&is

criterionH

•

Dragging the widget horizontally! vertical lines appear on the left and right sidesof other widgets meeting left and right side edges of the dragging widget"

• Dragging the widget vertically! horizontal lines appear on the top and bottom

sides of other widgets meeting top and bottom side edges of the dragging

widget"

• #orizontal and vertical lines will also appear together when the dragged widget$s

edges meet horizontal and vertical side edges of another widget on the page"

• #old Alt key while dragging the widget to avoid snapping"

-




o activate t&is option go to t&e ;iew menu and c&ec, t&e option Snap to geometry. ou can

1ind t&e same option in !i%e?Pre1erences> inside t&e User inter1ace section. &e grid wi%% never

$e s&own w&en simu%ating a prototype.

#ulers

3u%ers can $e s&own on t&e top and %e1t sides o1 t&e canvas to assist you w&en positioning

widgets.

o s&ow or &ide t&e ru%ers go to t&e ;iew menu and c&ec, or unc&ec, t&e option 3u%ers. &is

option can a%so $e c&anged in t&e Pre1erences menuH go to !i%e?Pre1erences> se%ect User

inter1ace and c&ec, or unc&ec, t&e option S&ow 3u%ers. In t&e pre1erences menu you can

a%so c&ange t&e units used $y t&e ru%ers. Se%ect t&ere t&e optionH

•

%nches

• entimeters

• &i'els (default option)

#uler guides

(reate &ori:onta% or vertica% guides on t&e ru%ers to &e%p you a%ign t&e widgets over an edge o1

great precision.

o create &ori:onta% or vertica% guides point t&e cursor over t&e position on t&e ru%er you want to

p%ace t&e guide and %e1t?c%ic,. 'nce a guide is created you can dragg it to c&ange its position.o remove a guide> rig&t?c%ic, on its &and%er on t&e ru%er and se%ect t&e option 3emove guide.

#s an a%ternative you can press t&e CSuprC ,ey once se%ected.

--




+idgetsStatic widgets

&e widgets %ocated in t&e Static group o1 t&e widgets pane% are t&ose w&ose content cannot $e

edited manua%%y during t&e prototypeCs simu%ation.

!abel

&e 2a$e% is a sing%e %ine tet widget. It is typica%%y used as a caption &o%ding a tet wit& a sing%e

sty%e.

Editing text

• Double*click a +abel widget to start te't edition" Make the desired changes to the

te't" ,o apply the changes press -eturn or click outside the widget" ,o cancel

edition without applying changes press .scape"

• Select the +abel and change its default te't in the &roperties panel"

Image

&e image widget is a rectang%e s&aped widget w&ic& represents and disp%ays an image. +&en

creating t&is widget on t&e canvas it disp%ays no image $y de1au%t s&owing a cross inside.

C$anging image

Edit t&e image disp%ayed $y t&is widget in one o1 t&e 1o%%owing waysH

• Double*click on the image widget" Browse through your file system! select the

desired image and press /pen"

• Select your image widget! then change the displayed image through the

&roperties panel selecting the option $Select an image file$"

%ic$ Text

&is widget provides a mu%tip%e tet %ine $o w&ose content can $e 1u%%y customi:ed. It can

de1ine di11erent 1ont sty%es 1or di11erent parts o1 its contained tet.

Editing text

• Double*click a -ich ,e't to start te't edition" Make the desired changes to the

te't" ,o apply the changes click outside the widget" ,o cancel edition without

applying changes press .scape"

• Select the -ich ,e't and change its default te't in the &roperties panel"

-4




Editing style

1. Double*click a -ich ,e't to start te't edition"

2. Select the te't range you want edit using the cursor"

3. Make your style changes using the ,e't section of the &roperties panel or use

the top main toolbar"

4. Apply the changes clicking outside the -ich ,e't or cancel them pressing

.scape"

Table

&e a$%e widget is used to organi:e content in rows and co%umns. It is made o1 ce%%s and eac&

ce%% is an individua% container wit& container properties %i,e %ayout and a%ignment. +&en a ta$%e

is created> it &as / ce%%s $y de1au%t t&ree rows and t&ree co%umnsF.

Selecting ros and columns

ou can se%ect a rowH

• lick on the left edge of the row when the cursor changes to

• -ight*click on a cell of the desired row and select the option Select -ow in the

conte'tual menu"

• Select a cell of the desired row and select the option Select -ow in the ,able

menu"

ou can se%ect a co%umnH

• lick on the top edge of the column when the cursor changes to

• -ight*click on a cell of the desired column and select the option Select olumn in

the conte'tual menu"

• Select a cell of the desired column and select the option Select olumn in the

,able menu"

Inserting ros and columns

3ows and co%umns can $e added to t&e eisting ones. 0ew rows wi%% $e added under t&e %ast

row and new co%umns at t&e rig&t side o1 t&e %ast co%umnH

-5




• Select the table widget and click on 0ew -ow or 0ew olumn in the ,able menu"

• -ight*click on the table and select 0ew -ow or 0ew olumn in the conte'tual

menu"

• Select the table widget and change its rows1columns number in the &roperties

panel"

0ew rows and co%umns can a%so $e inserted $etween ot&er rows or co%umns.

Insert a new row $etween two ot&er rowsH

• Select a table row and click on %nsert -ow Below or %nsert -ow Above in the

,able menu"

• -ight*click on a table row or a table cell and select %nsert -ow Below or %nsert

-ow Above in the conte'tual menu"

Insert a new co%umn $etween two ot&er co%umns

• Select a table column and click on %nsert olumn -ight or %nsert olumn +eft in

the ,able menu"

• -ight*click on a table column or a table cell and select %nsert olumn -ight or

%nsert olumn +eft in the conte'tual menu"

%emo(ing ros and columns

De%ete a co%umn or row $y se%ecting it and pressing De%ete ,ey. ou can a%so remove t&em i1

you se%ect t&e option De%ete in t&e contetua% menu.

%esi3ing ros and columns

(o%umns widt& and rows &eig&t can $e easi%y c&anged dragging t&eir $orders.

o resi:e a row drag its %ower $order w&en t&e cursor appears. o resi:e a co%umn drag its

rig&t $order w&en t&e cursor c&anges to .

%esi3ing cells

Individua% ce%%s can a%so $e resi:ed. (&anging t&e si:e o1 a ce%% wi%% automatica%%y modi1y t&e si:e

o1 its co%umn and row to 1it t&e new ce%% si:e.

o resi:e a ce%%H

-6




• Select the table cell" Drag its sizing handles located at the bottom*right corner!

right edge or bottom edge"

• Select the table cell and specify its size in the &roperties panel"

Splitting and merging cells

#ny ta$%e ce%% can $e sp%itted into two parts o1 e=ua% si:e. &ey can $e sp%itted &ori:onta%%y or

vertica%%y. I1 a ce%% is sp%itted vertica%%y t&e ce%% is divided in to di11erent ce%%s wit& &a%1 t&e widt& $ut

ame &eig&t. I1 a ce%% is sp%itted &ori:onta%%y t&e ce%% is divided in two di11erent ce%%s wit& &a%1 t&e

&eig&t $ut same widt&. o sp%it a ce%%H

• -ight*click on one table cell and select Split #orizontally or Split 2ertically in the

conte'tual menu"

• Select a table cell and select Split #orizontally or Split 2ertically in the ,able

menu"

# set o1 contiguous ce%%s can $e merged so t&ey $ecome on%y one ce%%. +&en a group o1 ce%%s is

merged t&eir content is a%so merged into t&e new ce%%. o merge ce%%s 1irst se%ect t&em and ma,e

sure t&ey a%% s&are at %east one edge one to eac& ot&er> t&enH

• -ight*click on any of the selected cells and click on Merge ells in the conte'tual

menu"

• Select Merge ells in the ,able menu"

Copying cells content

ou can copy t&e content o1 a row> co%umn or individua% ce%%s to anot&er part o1 t&e ta$%e using

t&e common copy and paste actions. o copy a set o1 ce%%s 1irst se%ect t&em using t&e (ontro%

,ey i1 necessary and se%ect copy 1rom t&e contetua% menu or Edit menu. &en se%ect t&e target

row> co%umn or ce%% and se%ect Paste.

ou can> a%ternative%y> paste t&e ce%%s outside a ta$%e widget. &en a new ta$%e wi%% $e created

using t&e copied ce%%s content and si:e.

Shapes

%ectangle

&e 3ectang%e widget is a simp%e o$Bect s&aped as a rectang%e wit& on%y si:e> $ac,ground and

$order properties.

Dynamic Panel

&e Dynamic Pane% widget is an advanced widget t&at can $e descri$ed as a group o1 pane%s

t&at act as containers. !rom a%% t&e containers on%y one is disp%ayed at a time w&i%e a%% t&e ot&ers

remain &idden. +&en a Dynamic Pane% is created it on%y &as one sing%e container.

-7




Creating panels

o create a new pane%H

1. Select a Dynamic &anel"

2. lick on the green icon at the top*left corner of the widget"

Selecting panels

+&en you se%ect a pane% it wi%% automatica%%y s&ow and t&e current one wi%% &ide %etting you edit

t&e content o1 t&e se%ected pane%. o se%ect a pane%H

1. Select a Dynamic &anel" A set of tabs will appear along the top edge of the

current showing panel " ,he tabs can also appear along the

bottom edge if there is no space to display them on the top"

2. Select the tab you want to view"

%emo(ing panels

+&en you se%ect a pane% it wi%% automatica%%y s&ow and t&e current one wi%% &ide %etting you edit

t&e content o1 t&e se%ected pane%. o se%ect a pane%H

• -ight*click on the tab you want to remove and select the option Delete"

• Select the tab you want to remove and press the Delete key"

Editing panel4s name

&e pane%s are automatica%%y %a$e%ed w&en you create t&em $ut you can c&ange t&eir names in

order to organi:e your Dynamic Pane%. o c&ange a pane%Cs nameH

1. Select a Dynamic &anel" A set of tabs will appear along the top edge of the

current showing panel"

2. Double*click on the tab you want to edit"

3. Make your changes"

4. &ress .nter or click outside the tab to apply the changes" &ress .scape to cancel

the edition without applying changes"

T$e Default Panel

Every Dynamic Pane% &as a de1au%t pane% w&ic& is t&e one t&at wi%% $e disp%ayed w&en starting

t&e simu%ation o1 t&e prototype. (&ange t&e de1au%t pane% in t&e Properties pane% once t&e

Dynamic Pane% is se%ected on t&e page.

-"




2ertical !ine

# vertica% %ine t&at may $e used to separate e%ements or :ones> to %ay out e%ements or Bust as adesign e%ement. Its widt& and sty%e so%id> dotted or das&edF can $e c&anged in t&e Properties

pane%.

Hori3ontal !ine

#n &ori:onta% %ine t&at may $e used to separate e%ements or :ones> to %ay out e%ements or Bust

as a design e%ement. Its widt& and sty%e so%id> dotted or das&edF can $e c&anged in t&e

Properties pane%.

Input widgets

Input widgets a%so ,nown as input 1ie%ds> are used as a means 1or a user to insert data into an

app%ication. &ey are main%y used to create input 1orms. et $oes are t&e most common input

1ie%d type> $ut t&ere are severa% ot&ers. #%% o1 t&em &ave t&e particu%arity t&at t&eir va%ue can $e

modi1ied $y t&e user during simu%ation t&roug& direct interaction. 8owever> you can disa$%e its

edition $y unc&ec,ing t&e property CEdita$%eC in t&e Properties pane%.

Text

&e et widget is component w&ic& &o%ds a tet as a va%ue. &e tet widget &ave t&ree

di11erent sty%es t&at can $e c&anged in t&e Properties pane%H

• ,e't3 A single line te't bo'"

• ,e't Area3 A te't bo' which can hold different lines of te't with automatic vertical

and horizontal scroll bars"

• &assword3 A te't bo' showing only a single line masked as a password"

Editing default text

+&en in t&e user inter1ace editorH

• Double*click a ,e't widget to start te't edition" Make the desired changes to the

te't" ,o apply the changes press -eturn or click outside the widget" ,o cancel


• Select the ,e't widget and change its default te't in the &roperties panel"

Editing text in simulation

et widgets wi%% $e edita$%e during simu%ation on%y i1 t&ey &ave t&is property ena$%ed.

o c&ange t&e tet o1 a et widget w&en simu%ating t&e prototype> c%ic, once on t&e widget to

start editing. a,e your c&anges. !ina%%y press 3eturn or c%ic, outside t&e widget to app%y t&e

c&anges or press Escape to cance%.

-/




C$ec+ 1ox

&e (&ec, o widget is component w&ic& can on%y represent two di1erent and opposite statesHtrue c&ec,edF or 1a%se unc&ec,edF.

Editing default (alue

+&en in t&e user inter1ace editorH

• double*click on the heck Bo' widget to change its state"

• Select the heck Bo' widget and change its default state in the &roperties

panel$s drop*down"

Editing (alue in simulation

o c&ange t&e va%ue o1 a (&ec, o widget w&en simu%ating t&e prototype> c%ic, once on t&e

widget to c&ange its va%ue.

%adio 1utton

&is widget can on%y represent two di1erent and opposite states %i,e a (&ec, oH true

c&ec,edF or 1a%se unc&ec,edF. 8owever> un%i,e (&ec, oes> 3adio uttons cannot c&ange its

va%ue t&roug& direct interaction during simu%ation once t&ey are c&ec,ed. Events must $e used

in order to c&ange a 3adio utton state to unc&ec,ed as t&ey usua%%y wor, toget&er wit& ot&er

3adio uttons. &e 3adio uttonCs va%ue edition is simi%ar to t&e (&ec, o.

Date 5 Time

&e Date widget is a tet $o usua%%y used to represent dates and time in a standard 1ormat. It

appears as an input $o wit& a ca%endar or watc& icon net to it used to easi%y edit its va%ue. &e

Date widget &as two di11erent sty%es w&ic& can $e c&anged in t&e Properties pane%H

• Date3 A te't bo' that prompts the user for a date in the format MM1DD14444"

• Date and ,ime3 A te't bo' that prompts the user for a date and time in the format

MM1DD14444 ##1mm"

Editing (alue

o edit its va%ue dou$%e?c%ic, on t&e ca%endar or watc& icon at t&e rig&t side o1 t&e widget. #

dia%og wit& a ca%endar wi%% appear. Se%ect t&e desired date or date and time and press o,.

(ance% t&e dia%og to stop editing wit&out app%ying c&anges. During simu%ation c%ic, on%y once on

t&e icon to start editing.

4*




,ile "pload

&e !i%e widget is a sing%e tet %ine $o used to indicate a pat& to one speci1ic 1i%e in t&e 1i%e

system. It appears as an input $o wit& a rowse $utton used to $rowse 1or a 1i%e into your 1i%e

system. &e tet &e%d $y t&is widget cannot $e c&anged direct%y.

Editing (alue in simulation

o edit its va%ue c%ic, on t&e rowse $utton. rowse 1or t&e desired 1i%e in t&e system dia%og.

Press 'pen to use t&e pat& to t&e 1i%e se%ected or press (ance% to c%ose t&e dia%og wit&out

app%ying c&anges.

4)




Selection widgets

Se%ection widgets disp%ay a %ist o1 tet va%ues among w&ic& t&e user needs to se%ect one sing%e

se%ectionF or more mu%tise%ectionF. &e va%ues disp%ayed $y t&ese widgets can $e c&anged and

may come 1rom di11erent data sourcesH

• 5i'ed 2alues3 A user defined list of fi'ed values"

• Data Master 5ield3 A list of category values coming from a Data Master field of

type ategory or Multicategory"

• Data Master3 A list of all the Data Master instances using comas as a field

separator"

+&en a Se%ection widget is created it s&ows a %ist o1 1ied va%ues. o c&ange t&e data source o1

a Se%ection widget> se%ect t&e widget on t&e page and c%ic, on t&e Edit $utton net to C;a%ueC

in t&e Properties pane%. Se%ect t&e data source !ied ;a%ues> Data aster !ie%d or Data aster

in t&e dia%og. 0otice t&at you need 1irst to create a Data aster in order to use it or its 1ie%dsF as

data source.

Editing fixed (alues

1. Select the widget and click on the .dit button in the &roperties panel! ne't to

the $2alue$ attribute" A dialog will display"

2. lick on the radio button 5i'ed 2alues"

3. .dit the fi'ed values through the editor on the right"

0etting (alues from a Data aster ,ield



4




2. lick on the radio button Data Master 5ield" 0otice that this option will be only

enabled if there is any Data Master with ategory or Multicategory fields"

3. Select the field you want to use on the list"

0etting (alues from a Data aster



2. lick on the radio button Data Master" 0otice that this option will be only enabled

if there is any Data Master created"

3. Select the Data Master you want to use on the list"

!ist 1ox

# mu%tip%e tet %ine widget t&at disp%ays a %ist o1 ordered va%ues. &is sing%e se%ection widget &as

t&e particu%arity t&at w&en one o1 its va%ues is se%ected a%% t&e ot&ers remain unse%ected.

Setting default selection

o set one o1 its va%ues se%ected $y de1au%t> dou$%e?c%ic, on t&e desired va%ue on t&e widget.

ou can a%so c&ange t&e de1au%t se%ected va%ue t&roug& t&e attri$ute C;a%ueC in t&e Properties

pane%.

Selecting (alues in simulation

Se%ect a va%ue o1 a 2ist o w&i%e simu%ating $y c%ic,ing once on t&e desired va%ue.

Selection !ist

# $asic drop?down t&at can contain a %ist o1 ordered va%ues. &is sing%e se%ection widget &as t&e

particu%arity t&at w&en one o1 its va%ues is se%ected a%% t&e ot&ers remain unse%ected and &idden.

'n%y t&e se%ected va%ue is disp%ayed in a sing%e %ine.


o set one o1 its va%ues se%ected $y de1au%tH

1. Double*click on the Selection +ist widget"

2. lick again to open the drop*down and select the desired value"

#%ternative%y> you can set a va%ue not de1ined in t&e se%ection widget va%ues as t&e de1au%t va%ue.

o set a di1erent va%ue as de1au%t> dou$%e?c%ic, on t&e widget and write t&e desired tet %i,e a

norma% input tet widget. &en press 3eturn to app%y t&e c&anges. ou can do t&e same using

t&e attri$ute C;a%ueC in t&e Properties pane%.


4-




Se%ect a va%ue o1 a Se%ection 2ist w&i%e simu%ating $y c%ic,ing once on t&e widget to open t&e

drop?down. &en se%ect t&e desired va%ue or write anot&er one %i,e a common tet input.

ulti6selection !ist

# mu%tip%e tet %ine widget t&at disp%ays a %ist o1 ordered va%ues %i,e a 2ist o widget. &is mu%ti?

se%ection widget &as t&e particu%arity t&at can &ave more t&an one o1 its va%ues se%ected at t&e

same time.



Se%ect as many va%ues as you need. Dou$%e?c%ic, again to an a%ready se%ected va%ue to dese%ect

it. ou can a%so c&ange t&e de1au%t se%ection t&roug& t&e attri$ute C;a%ueC in t&e Properties

pane%.


Se%ect a va%ue o1 a u%ti?se%ection 2ist w&i%e simu%ating $y c%ic,ing once on t&e desired va%ue.

(%ic, on an a%ready se%ected va%ue to dese%ect it.

%adio 1utton !ist

# se%ection widget t&at disp%ays a %ist o1 ordered va%ues toget&er wit& a radio $utton 1or eac&

va%ue. &is sing%e se%ection widget $e&aves %i,e a 2ist o $ut &as t&e particu%arity t&at t&e

va%ues must $e se%ected t&roug& radio $uttons. 3adio utton 2ists &ave two di11erent sty%es todisp%ay t&eir va%uesH

• 2ertical3 2alues display in multiple lines vertically"

• #orizontal3 2alues display in a single te't line with the values ne't to each other"

(&ange t&e orientation o1 t&is widget in t&e attri$ute C'rientationC in t&e Properties pane%.



Dou$%e?c%ic, again to an a%ready se%ected va%ue to dese%ect it. ou can a%so c&ange t&e de1au%tse%ection t&roug& t&e attri$ute C;a%ueC in t&e Properties pane%.


Se%ect a va%ue o1 a 3adio utton 2ist w&i%e simu%ating $y c%ic,ing once on t&e desired va%ue.

C$ec+ 1ox !ist

# se%ection widget t&at disp%ays a %ist o1 ordered va%ues toget&er wit& a c&ec, $o 1or eac&

va%ue. &is mu%ti?se%ection widget $e&aves %i,e a u%ti?se%ection 2ist $ut &as t&e particu%arity t&at

t&e va%ues must $e se%ected t&roug& c&ec, $oes. (&ec, o 2ists a%so &ave two di11erent

sty%es to disp%ay t&eir va%uesH ;ertica% and 8ori:onta% See 3adio utton 2istF.

44






Se%ect as many va%ues as you need. Dou$%e?c%ic, again to an a%ready se%ected va%ue to dese%ectit. ou can a%so c&ange t&e de1au%t se%ection t&roug& t&e attri$ute C;a%ueC in t&e Properties

pane%.


Se%ect a va%ue o1 a (&ec, o 2ist w&i%e simu%ating $y c%ic,ing once on t&e desired va%ue. (%ic,

again on an a%ready se%ected va%ue to dese%ect it.

*avigation widgets

0avigation widgets are designed to provide prototypes wit& t&e most common 1orms o1

app%ication navigation t&at one can 1ind in t&e rea% wor%d. #%% o1 t&em are 1u%%y customi:a$%e and

adapta$%e to every prototypeCs needs.

1utton

&e utton is a widget s&aped as a common $utton w&ic& &o%ds a sing%e %ine o1 tet. &e edition

o1 its tet wor,s as 1or t&e 2a$e%s. uttons are a%so t&e per1ect candidates to p%ace your events.

Editing text

• Double*click a Button widget to start te't edition" Make the desired changes to

the te't" ,o apply the changes press -eturn or click outside the widget" ,o cancel


• Select the Button and change its default te't in the &roperties panel"

Image ap

&is widget s&aped as a rectang%e is usua%%y used to create a transparent area to de1ine events.

Image aps are disp%ayed as a s%ig&t%y transparent green rectang%e during t&e edition o1 t&e

user inter1ace $ut $ecome transparent and cannot $e seen during t&e prototypeCs simu%ation.

Tip: Put image maps over images to create event zones – For example, over

the main logo of your application in the upper banner.

Tree

rees are a very common navigation component in app%ications. ree widgets are made o1 ree

0odes organi:ed in a &ierarc&ica% structure ree 0odes can contain ot&er ree 0odesF. +&en

a ree widget is created on a page it contains> $y de1au%t> two root ree 0odes and one su$?

node inside t&e 1irst one.

&roug& t&e Properties pane% you can customi:e t&e epand and co%%apse icons o1 your ree as

we%% as t&e visi$i%ity o1 t&e ree &ierarc&y %ines.

*dding nodes

45




o add a new node to a reeH

1. Drag and drop a ,ree 0ode widget over the position on the ,ree you want to

place it" 6hen dragging the node widget! an orange dotted line feedback will

guide you to place the new node"

2. .nter the name for the new node in the displayed dialog"

3. lick on the /k button to apply and create the new node with the given name or

press ancel to close the dialog without applying changes"

o add a new node as a su$node o1 a ree 0odeH

1. Drag and drop a ,ree 0ode widget over another ,ree 0ode" 6hen dragging the

node widget inside another one a gray rectangular feedback will guide you to

place the new node"

2. .nter the name for the new node in the displayed dialog"

3. lick on the /k button to apply and create the new node with the given name or


%emo(ing nodes

o remove a node 1rom a ree> 1irst se%ect t&e node you want to de%ete. &en press De%ete oropen t&e contetua% menu wit& a rig&t?c%ic, on t&e node and se%ect De%ete. I1 you de%ete a ree0ode t&at contains ot&er nodes t&ey wi%% $e de%eted as we%%.

o(ing nodes

&e order and &ierarc&y o1 tree nodes can $e c&anged once t&ey are created. o c&ange aree 0ode position wit&in a ree> drag and drop t&e node as you were creating a new one. &ecorresponding 1eed$ac, wi%% guide you w&i%e dragging t&e node.

C$anging expand7collapse icons

+&en a ree widget is created it &as> $y de1au%t> a p%us icon to epand nodes and a minusicon to co%%apse t&em. &ese de1au%t icons can $e c&anged in t&e Properties pane%H

46




1. Select the ,ree widget on the screen"

2. lick on the Browse button in the &roperties panel"

3. Browse for an .'pand image in your file system using the dialog displayed and

press /k"

4. Browse for a ollapse image in your file system using the second dialog

displayed and press /k"

+&en c&anging icons ma+e sure bot$ expand and collapse images $a(e t$e same si3e.

Tree Node

# ree 0ode widget can on%y $e created inside an eisting tree widget. o create a ree 0ode

drag and drop it on a tree as ep%ained in C#dding nodesC.

Editing node4s text

o c&ange t&e tet disp%ayed $y a node> 1irst se%ect t&e node you want to c&ange and t&en editits tet in t&e C;a%ueC 1ie%d in t&e Properties pane%.

C$anging node4s icons

Eac& tree node can disp%ay a di11erent icon w&en epanded or co%%apsed. &ese icons can $eassigned t&roug& t&e Properties pane%H

• ,o set an icon when the node is e'panded3 Select the tree node widget and click

on the $Select .'pand %con$ option in the &roperties panel" ,hen browse into your

file system and select the desired image"

• ,o set an icon when the node is collapsed3 Select the tree node widget and click

on the $Select ollapse %con$ option in the &roperties panel" ,hen browse into

your file system and select the desired image"

47




enu

enu widget can $e used to create $asic 1%yout menus. 2i,e a ree widget> enus are made o1enu Items a%so organi:ed in a &ierarc&ica% structure enu Items can contain ot&er enu

ItemsF. enus &ave two common con1igurations t&at can $e de1ined in t&e C'rientationC attri$ute

in t&e Properties pane%H

• #orizontal3 +ike a main menu of a desktop application"

• 2ertical3 +ike a sidebar menu"

*dding items

o add a new menu item to a enuH

1. Drag and drop a Menu %tem widget over the position on the Menu you want to

place it" 6hen dragging the widget! an orange feedback will guide you to place

the new item"

2. .nter the name for the new item in the displayed dialog"

3.

lick on the /k button to apply and create the new menu item with the givenname or press ancel to close the dialog without applying changes"

ou can a%so add items $e1ore and a1ter a enu Item se%ecting t&e options C#dd enu Item #1terC or C#dd enu Item e1oreC in t&e contetua% menu o1 a enu Item.

o add a new item as a su$menu o1 anot&er enu ItemH

1.Drag and drop a Menu %tem widget over another Menu %tem" 6hen dragging theMenu %tem widget inside another one a gray rectangular feedback will guide you

to place the new item"

2. .nter the name for the new item in the displayed dialog"

3. lick on the /k button to apply and create the new item with the given name or


ou can a%so add su$menus o1 a enu Item se%ecting t&e option C#dd Su$menuC in t&econtetua% menu o1 a enu Item.

4"




%emo(ing items

o remove an item 1rom a enu 1irst se%ect t&e enu Item you want to de%ete. &en pressDe%ete or open t&e contetua% menu wit& a rig&t?c%ic, on t&e item and se%ect De%ete. I1 you de%etea enu Item> a%% o1 its su$menus wi%% a%so $e removed.

o(ing items

&e order and &ierarc&y o1 menu items can $e c&anged once t&ey are created. o c&ange aenu ItemCs position wit&in a enu> drag and drop t&e item as you were creating a new one.&e corresponding 1eed$ac, wi%% guide you w&i%e dragging t&e item.

enu Item

# enu Item widget can on%y $e created inside an eisting menu widget. o create a enu Item

drag and drop it on a menu as ep%ained in C#dding itemsC 1or enus.

Editing item4s text

o c&ange t&e tet disp%ayed $y a menu item> 1irst se%ect t&e item you want to c&ange and t&enedit its tet in t&e C;a%ueC 1ie%d in t&e Properties pane%.

C$anging item4s icon

Eac& menu item can disp%ay an icon $e1ore its tet t&at can $e set and c&anged t&roug& t&e

Properties pane%. o set t&e icon 1or a menu item> 1irst se%ect t&e enu Item widget on t&escreen and t&en se%ect t&e CSet IconC option in t&e Properties pane%. rowse 1or t&e desiredimage and press ',. +&en a menu item &as an icon assigned c&ange or remove it using t&e$uttons rowse and De%ete net to t&e Icon 1ie%d.

Data Grids

&e widgets %ocated in t&e Data Grids group are t&ose re%ated to Data astersC visua%

representation. &ese widgets wi%% &e%p you visua%i:e t&e contents o1 your Data asters as we%%

as some in1ormation re%ated to t&em.

Data 0rid

&is widget disp%ays t&e records o1 a Data aster as a %ist. &is %istCs data source is a%ways a

sing%e Data aster w&ic& is se%ected w&en t&e %ist is created. &is widget disp%ays on%y one

&eader and one row w&en editing it in t&e user inter1ace $ut it is epanded w&en simu%ating

rep%icating its rows disp%aying a di11erent row 1or eac& Data asterCs record instance.

In order to create a Data Grid 1or a particu%ar Data asterH

1. lick on the Data Grid widget on the 6idgets$ palette"

4/




2. A dialog will appear asking for information regarding the data source the Data

Grid will use" (%f you have no Data Masters you will be first asked to create a new

one)"

3. 5ill in all the re7uiered fields and press /k"

4. /nce the dialog is closed! 8ust click on the desired place on the canvas to finally

create the item"

'nce a Data Grid is created you can c&ange some o1 its properties inc%uding its identi1ier in t&e

Properties pane% $ut you cannot c&ange its Data aster association.

Selecting ros and columns

o se%ect a row> c%ic, on t&e %e1t edge o1 t&e row w&en t&e cursor c&anges to

o se%ect a co%umn> c%ic, on t&e top edge o1 t&e co%umn w&en t&e cursor c&anges to

Inserting columns

ou can insert new co%umns at t&e end o1 a Data Grid widget. o insert a new co%umn> rig&t?

c%ic, on t&e Data Grid widget and se%ect C0ew (o%umnC in t&e contetua% menu.

%emo(ing columns

De%ete a co%umn $y se%ecting it and pressing De%ete ,ey. ou can a%so remove it i1 you se%ect t&e

option De%ete in t&e contetua% menu o1 a co%umn.

/rdering columns

5*




&e order o1 t&e Data GridCs co%umns can $e modi1ied once created. o move a co%umn to a

di11erent position wit&in t&e Data Grid> drag and drop it to t&e desired position. #n orange

1eed$ac, wi%% guide you w&en p%acing t&e co%umn $etween ot&er co%umns.

%esi3ing ros and columns

Se%ect a Data GridCs ce%% or an entire row or co%umn and drag its si:ing &and%es to resi:e t&em.

C$anging Data 0rid4s properties

+&en a Data Grid widget is se%ected on a screen you can c&ange some o1 its properties in t&e

Properties pane%H

!ind more in1ormation a$out Data Grids in t&e Data Simulation section.

eb widgets

&ese specia% widgets add etra 1unctiona%ity and a $etter %oo, to your prototypes. &ese

widgets are %i,e containers t&at can contain ot&er ,inds o1 e%ements common in t&e computer

wor%d suc& as e%ectronic documents> we$ sites or 1%as& 1i%es.

HT!

&e 82 widget can disp%ay 82 code using a we$ $rowser em$edded in it. +&en you

create a 82 widget it disp%ays a simp%e tet in 82 $y de1au%t. o c&ange t&e 82 code

disp%ayed $y t&is widgetH

1.Select the #,M+ widget on the screen"

2. Make your changes in the te't bo' ne't to the #,M+ field of the &roperties panel"

3. lick outside the te't bo' to apply the changes"

"%!

&is widget disp%ays a we$ page using a we$ $rowser em$edded in it. +&en you create t&is

widget it disp%ays JustinmindCs we$ page $y de1au%t. o c&ange t&e we$ page disp%ayed $y t&is

widget c&ange its associated U32H

1. Select the U-+ widget on the screen"

5)

http://c/workspaceJP4/JustinmindPrototyper3.0/html/data_simulation_data_grids.html

http://c/workspaceJP4/JustinmindPrototyper3.0/html/data_simulation_data_grids.html




2. hange the U-+ in the $U-+$ field of the &roperties panel"

3. &ress .nter to apply the changes or click outside the U-+ te't bo' to cancel

them"

Document

&e Document widget can disp%ay eterna% tet documents. &e 1ormats supported $y t&is

widget are PD!> and 2. +&en a Document widget is created it disp%ays a PD! 1i%e as an

eamp%e $y de1au%t. ou can c&ange t&e document disp%ayedH

1. Select the Document widget on the screen"

2. lick on the Browse button in the $5ile$ field of the &roperties panel and select the

desired document"

Requirement: In order to display the PDF files correctly you need to have

Adobe Acrobat eader installed on your computer.

,las$

&is is t&e widget used to disp%ay !%as& 1i%es. +&en a !%as& widget is created it disp%ays a 1%as&

1i%e as an eamp%e $y de1au%t. ou can c&ange t&e document disp%ayed $y t&is widget as we%% as

its parameters in t&e Properties pane%H

1. Select the 5lash widget on the screen"

2. lick on the Browse button in the $5ile$ field of the &roperties panel and select the

desired document" hange the its input parameters using the parameters$ table

under the $5ile$ field"

5




Sty%es and !ormattingFor'atting

&e appearance> re=uirements and properties o1 a widget may $e a%tered to matc& any %oo, and

1ee% and 1it any %ayout t&roug& t&e Properties pane% or t&e sty%e too%$ar. Eac& widget &as its

particu%ar sty%es> depending on its properties i1 it &as tet> $ac,ground> $order> etc.F. 8ence>

you may not 1ind a%% t&e 1ormatting options de1ined &ere in every widget $ut in most o1 t&em.

0eneral properties

ost o1 t&e widgets &ave some properties in common t&at you wi%% a%ways 1ind in t&e Genera%

group o1 t&e Properties pane%.

Position and si3e

# set o1 contro%s are provided in order to c&ange t&e position and si:e o1 any widget on t&e

canvasH

5-




!ayout

+idgets t&at can contain ot&er widgets %i,e Dynamic Pane%s &as a C%ayoutC property w&ic& %ets

you de1ine &ow t&e contents o1 t&e widget wi%% $e distri$utedH

1ac+ground

ost widgets &ave a $ac,ground %ayer disp%aying a co%or or an image t&at can a%so $e de1ined

in t&eir $ac,ground propertiesH

Selecting a bac+ground color

o se%ect t&e co%or o1 t&e $ac,ground> c%ic, on t&e (o%or pic,er $utton and se%ect t&e desired

co%or 1rom t&e drop?down. I1 you do not 1ind t&e co%or t&ere> c%ic, on Core co%ors...C option to

de1ine your own co%or or C(apture (o%orC to get t&e co%or 1rom anot&er widget. ou can a%so

indicate t&e co%or you want typing its &eadecima% code direct%y into t&e tet input net to t&e

co%or pic,er $utton.

I1 you Bust want your widget wit&out $ac,ground> se%ect t&e option CransparentC 1rom t&e co%or

pic,er drop?down.

Selecting a gradient

ou can a%so decide to de1ine a gradient as t&e $ac,ground o1 your widget. o create a

gradient> c%ic, on t&e (o%or pic,er $utton and se%ect t&e C(reate gradientC optionH

54




Text

+idgets w&ic& &ave tet &ave t&e 1o%%owing 1ont 1ormat options to $e c&angedH

55




1order

(ustomi:e t&e type> co%or and widt& o1 your widgetCs $order using t&e contro%s providedH

HT! 'ebsite

&is widget disp%ays an entire 82 site you can &ave %oca%%y in your computer using a we$

$rowser em$edded in it. o create a new 82 we$site widgetH

1. lick on the #,M+ 6ebsite widget in the 6idgets panel" A dialog will appear"

2. %n the first field $Select a directory$! select the website folder (folder where all thesite files *#,M+! images! SS! etc"* are contained)" Use the Browse button to

navigate through your local disks"

3. %n the second field $hoose an entry file$! select an initial html file! usually the

inde'"html" %t is recommended this file to be located inside the folder selected in

the previous step"

4. &ress /k to accept the parameters and close the dialog" ,hen click on the screen

to finally create the widget

Summary

&e Summary widget is a specia% tet %a$e% w&ic& s&ows in1ormation a$out a Data Grid. &is

widget cannot $e direct%y edited %i,e a norma% 2a$e% as its content is automatica%%y generated

using its associated Data Grid in1ormation. &e in1ormation disp%ayed $y t&is widget is t&e tota%

num$er o1 rows and t&e current%y disp%ayed ones.

o c&ange its associated Data Grid> se%ect t&e Summary widget and se%ect t&e desired Data

Grid in t&e Properties pane%.

56




Index

&e Inde widget is a specia% tet %a$e% w&ic& s&ows in1ormation a$out t&e Data GridCs pages.&is widget cannot $e direct%y edited %i,e a norma% 2a$e% as its content is automatica%%y

generated using its associated Data Grid in1ormation. &e in1ormation disp%ayed $y t&is widget

is t&e inde o1 pages o1 t&e Data Grid. &e current page inde wi%% $e &ig&%ig&ted using a $o%d

1ont sty%e. 0otice t&at t&e num$er o1 pages o1 a Data Grid wi%% depend on t&e 1ie%d C3ows per

pageC in t&e Data Grid widgetCs properties.

o c&ange its associated Data Grid> se%ect t&e Inde widget and se%ect t&e desired Data Grid in

t&e Properties pane%.

De&ault Styles

# co%%ection o1 de1au%t 1ormatting attri$utes or sty%es are saved 1or every temp%ate o1 a prototype.

Every widget created in a screen wi%% use t&e sty%es de1ined in t&e associated temp%ate as

de1au%t. #%% new proBects start wit& a de1au%t temp%ate w&ic& de1ines a%% t&e sty%es 1or every

widget. &is set o1 sty%es may $e edited> $ut not de%eted.

Tip: !se different templates "ith different styles to easily change the

loo# and feel of your prototype.

Editing default styles

o c&ange t&e sty%es de1ined 1or a speci1ic temp%ate> rig&t?c%ic, on t&e temp%ate in t&e emp%atespane% and se%ect t&e option CEdit emp%ate Sty%eC. # dia%og wi%% appear s&owing t&e current

1ormatting attri$utes 1or every widget.

57




De1au%t sty%es 1or speci1ic widgets can a%so $e edited 1rom t&e Properties pane%. I1 we want to set

a widgetCs current sty%e as de1au%tH

). Se%ect t&e widget on t&e screen.

2. (%ic, on t&e $utton CSet as de1au%t sty%eC in t&e Properties pane%.

*pplying template styles

'nce we &ave c&anged t&e de1au%t sty%es 1or a speci1ic temp%ate> we may a%so want t&e sty%es to

$e app%ied to a%% t&e a%ready created widgets on t&e screens associated wit& t&is temp%ate. o

app%y t&e sty%es> 1irst ma,e sure t&e desired temp%ate is correct%y associated wit& t&e screens

you want to c&ange t&e widgetsC sty%e 1rom. &en rig&t?c%ic, on t&e temp%ate and se%ect C#pp%y

emp%ate Sty%eC. #%% t&e widgets 1rom a%% t&e screens associated wit& t&e temp%ate wi%% get its

de1au%t sty%e.

ou can a%so app%y a de1au%t stored sty%e to one speci1ic widget 1rom t&e Properties pane%. o

app%y t&e de1au%t sty%e to a widgetH

). Se%ect t&e widget on t&e screen.

2. (%ic, on t&e $utton C#pp%y emp%ate Sty%eC in t&e Properties pane%.

"opy Styles

Sometimes you may 1ind t&e need to reuse t&e sty%e 1rom one widget created and 1ormatted on

t&e screen and app%y it to ot&er widgets in order to save time. &is can $e accomp%is&ed wit&

t&e C(opy Sty%eC too% t&at can $e 1ound on t&e Sty%e too%$ar. +&en you copy t&e sty%e 1rom

one widget to anot&er> t&e target widget wi%% get a%% t&e possi$%e sty%es 1rom t&e source. &ere

are some 1ormatting attri$utes t&at wi%% never $e copiedH position> si:e and %ayout.

o copy t&e sty%e 1rom one widget to anot&erH

). Se%ect t&e widget you want to copy t&e sty%es 1rom on t&e screen.

2. (%ic, on t&e C(opy Sty%eC too% in t&e Sty%e too%$ar. &e cursor wi%% get t&e $rus& s&ape

-. (%ic, on t&e target widget.

5"




Events and InteractionsEvents are a ,ey 1eature t&at provides Justinmind Prototyper wit& t&e a$i%ity to $ui%d 1u%%y?

1unctiona% and interactive prototypes. &e events t&at Justinmind Prototyper wor,s wit& consist

o1 two main componentsH an event trigger or user eventF and a set o1 actions. #dditiona%%y> one

can de1ine conditions 1or every interaction. Every event must $e de1ined on a speci1ic e%ement

on t&e screen w&ic& wi%% act as t&e source o1 t&e event trigger. #%% t&e events wi%% $e simu%ated

respecting any conditions and order de1ined in t&e user inter1ace.

$vents Panel

#%% t&e events de1ined on a widget can $e seen> edited> de%eted or created t&roug& t&e Events

pane% once it is se%ected on t&e canvas.

"ser E(ents

&e User EventsC drop?down disp%ays a%% t&e avai%a$%e event triggers t&at can $e used to de1inean event 1or a widget. Se%ect t&e desired trigger $e1ore de1ining any action.

o ,now more a$out event triggers c&ec, User Events.

5/

http://c/workspaceJP4/JustinmindPrototyper3.0/html/events_user.html

http://c/workspaceJP4/JustinmindPrototyper3.0/html/events_actions.html








E(ents Toolbar

Interactions

#%% t&e interactions o1 a widget 1or a speci1ic event trigger are disp%ayed one on top o1 eac& ot&er

in t&e Events pane% so you can easi%y see t&e order t&ey wi%% $e eecutedH

Creating interactions

o create a new interaction 1or a speci1ic user event> c%ic, on t&e C#dd InteractionC $utton on t&e

events too%$ar. !or 1urt&er in1ormation a$out creating interactions see #ctions.

/t$er interaction4s operations

6*






*ctions

Every CinteractionC wi%% consist o1 a possi$%e condition and a set o1 actions disp%ayed &ori:onta%%y.

&e actionsC eecution wi%% a%so &ave an order 1rom %e1t to rig&tF> &ence a particu%ar action wi%%

not $e eecuted unti% t&e one $e1ore 1inis&es its eecutionH

Selecting actions

&e actions in t&e Events pane% can $e se%ected individua%%y or as a group so you can copy>

de%ete or order t&em.

o se%ect an action separate%y> Bust c%ic, on it wit& t&e mouse %e1t $utton. # grey $order

1eed$ac, wi%% %et you ,now w&en an action is se%ected.

o se%ect a group o1 actions> c%ic, on t&em w&i%e &o%ding t&e (ontro% $utton.

ou can de1ine t&e order o1 t&e actions $y drag and drop.

/t$er action4s operations

6)




)in!s

2in,s are used to create &yper%in,s to screens. &ey are t&e type o1 eventCs action t&at provides

navigation t&roug& your prototypeCs screens.

Create a lin+ it$ drag and drop

o create a %in, Bust drag t&e widget w&ic& s&ou%d contain t&e %in, action and drop it on t&e

desired screen in t&e Screens pane%.

Create a lin+ using t$e contextual menu

ou can a%so create a %in, t&roug& t&e contetua% menu o1 any widget on a screenH

). 3ig&t?c%ic, on t&e widget w&ic& s&ou%d contain t&e %in, action and se%ect t&e C#dd 2in,C

option. # dia%og wit& a drop?down wi%% appear.

. Se%ect t&e target screen 1rom t&e drop?down %a$e%ed CInterna% ScreenC.

-. Press ', to create t&e %in, or press (ance% to c%ose t&e dia%og wit&out creating t&e

action.

6




Interactive i'ages

+&en de1ining an app%ication> t&e grap&ic design p&ase is a%ways inc%uded. ypica%%y> t&e

designer presents &is proposa%s in t&e 1orm o1 static images t&at may $e created wit& an

eterna% image editor to represent a 1ew screens. +&i%e t&e presentation and appearance o1

t&ese images can $e ece%%ent> t&e inconvenience is t&at t&ey are comp%ete%y static and do not

provide any type o1 interaction. It is t&ere1ore re%ative%y easy to %ose sig&t o1 t&e app%ication@s

usa$i%ity and t&e navigation $etween screens. &ese grap&ic proposa%s are ,nown as moc,ups.

Justimind Prototyper provides you wit& t&e necessary too%s to add interactivity to t&ese images

wit& minima% e11ort.

). Set up eac& moc,up t&at you &ave on a di11erent screen o1 your prototype remem$ert&at you can drag 1i%es or images direct%y or copy and paste t&emF.

. Drag and drop t&e Image ap widget over t&e moc,up areas representing $uttons or

any ot&er e%ement t&at s&ou%d cause a screen c&ange w&en c%ic,ing on it.

3. Drag t&e Image aps you created and drop t&em on t&e screens you want t&em to %in,

in t&e Screens pane%. 'r see &ow %in,s can $e created &ere.

Tip: $ven forms can be brought to life% place form fields over their

graphic representation, remove borders, and ad&ust size and font. 'o"

clic# on the (imulate button.

6-

http://c/workspaceJP4/JustinmindPrototyper3.0/html/events_links.html






User $vents

Events in Justinmind Prototyper consist o1 two main componentsH an event trigger and a set o1

actions. Justinmind Prototyper o11ers a set o1 user interactions t&at can $e recogni:ed as event

triggers and> t&ere1ore> eecutes a set o1 actions conse=uent%y. &ese user interactions areH

/n lick3 'ccurs w&en t&e user c%ic,s wit& t&e mouse %e1t $utton on t&e e%ement upon

w&ic& we are de1ining t&e event.

/n Double*click3 'ccurs w&en t&e user dou$%e c%ic,s wit& t&e mouse %e1t $utton on t&e

e%ement upon w&ic& we are de1ining t&e event.

/n -ight*click3 'ccurs w&en t&e user c%ic,s wit& t&e mouse rig&t $utton on t&e e%ement

upon w&ic& we are de1ining t&e event.

/n 9ey &ressed3 'ccurs w&en a ,ey is pressed on t&e ,ey$oard. &e ,ey must $e

speci1ied w&en de1ining t&e event. I1 no ,ey is speci1ied t&e event wi%% $e triggered w&en

pressing any ,ey.

/n Mouse /ver3 'ccurs w&en t&e mouse cursor is over t&e e%ement upon w&ic& we are

de1ining t&e event.

/n Mouse .nter3 'ccurs w&en t&e mouse cursor enters t&e area o1 t&e e%ement upon


/n Mouse +eave3 'ccurs w&en t&e mouse cursor %eaves t&e area o1 t&e e%ement upon


/n &age +oad3 'ccurs w&en t&e page t&at &as t&e e%ement upon w&ic& we are de1ining

t&e event %oads it 1 irst disp%aysF.

/n &age Unload3 'ccurs w&en we %eave t&e page t&at contains t&e e%ement upon w&ic&

we are de1ining t&e event we navigate to any ot&er pageF.

/n hange3 'ccurs w&en t&e va%ue o1 t&e e%ement ?usua%%y an input 1ie%d? upon w&ic& we

are de1ining t&e event c&anges. &e event wi%% on%y $e triggered i1 t&e inputCs va%ue is c&anged

t&roug& direct user interaction.

64




Actions

Event actions are t&e processes t&at ta,e p%ace w&en a user event is captured during t&esimu%ation o1 a prototype. any actions can $e de1ined 1or t&e same event trigger upon t&e

same widget so t&at t&ey are ta,en se=uentia%%y.

o create an action 1or a speci1ic user event over a widget 1o%%ow t&e stepsH

). Se%ect t&e widget w&ic& wi%% trigger t&e event on t&e canvas.

. Se%ect t&e user event type 1rom t&e drop?down in t&e Events pane%.

-. (%ic, on C#dd interactionC in t&e Events pane%. # dia%og wi%% appear s&owing a%% t&e

avai%a$%e actions t&at can $e de1ined.

!in+ to

Se%ect t&e C2in, toC action to create navigation to anot&er page o1 your prototype or an eterna%

we$ page. ou can a%so con1igure t&e navigation so t&e target page opens in a pop?up window.

o navigate to an interna% screen> se%ect t&e radio $utton CInterna% ScreenC and t&en se%ect t&e

screen you want t&e %in, to.

o navigate to an eterna% we$ page> se%ect t&e radio $utton CEterna% addressC and type in t&e

address you want to navigate to.

65




Data aster action

&is action is direct%y re%ated to Data asters. Se%ect t&is action i1 you want to modi1y any Data

aster adding new records to it> modi1ying or de%eting t&em.

o create any Data aster action> 1irst c%ic, on t&e radio $utton to se%ect t&e Data aster you

want to $e modi1ied 1rom current Data asterCs %ist. &en c%ic, on one o1 t&e 1o%%owing $uttonsH

Ne& (%ic, on new to construct an epression to add a new record to t&e Data aster.

!or 1urt&er in1ormation a$out &ow to create t&e epression C0ewC go to Data Simu%ation ?

(reate.

odify& (%ic, on modi1y to construct an epression to modi1y a Data asterCs record or

a set o1 records. !or 1urt&er in1ormation a$out &ow to create t&e epression Codi1yC go

to Data Simu%ation ? Update.

Delete& (%ic, on de%ete to construct an epression to de%ete a record or set o1 records

1rom t&e Data aster. !or 1urt&er in1ormation a$out &ow to create t&e epression

CDe%eteC go to Data Simu%ation ? De%ete.

66

http://c/workspaceJP4/JustinmindPrototyper3.0/html/data_simulation_create.html


http://c/workspaceJP4/JustinmindPrototyper3.0/html/data_simulation_update.html

http://c/workspaceJP4/JustinmindPrototyper3.0/html/data_simulation_delete.html




http://c/workspaceJP4/JustinmindPrototyper3.0/html/data_simulation_update.html





Pagination action

&is action is direct%y re%ated to Data Grids. Se%ect t&is action i1 you want to navigate t&roug& t&e

pages o1 a Data Grid.

Tip: Distribute the records displayed by a Data )rid in Data )rid*s pages

using the fild *o"s per page* in the Properties panel. emember Data

)rids only sho" one page "ith all its ro"s by default.

o create any pagination action> se%ect t&e CPagination #ctionC radio $utton and t&en c%ic, on one

o1 t&e 1o%%owing $uttonsH

,irst Page& (%ic, on C1irst pageC i1 you want to disp%ay t&e 1irst page o1 a Data Grid.

Pre(ious Page& (%ic, on Cprevious pageC to disp%ay t&e page previous to t&e one

current%y $eing disp%ayed o1 a Data Grid.

Next Page& (%ic, on Cnet pageC to disp%ay t&e page w&ic& 1o%%ows t&e one current%y$eing disp%ayed o1 a Data Grid.

!ast Page& (%ic, on C%ast pageC to disp%ay t&e %ast page o1 a Data Grid.

67




Hide7S$o

&is action ma,es a widget o1 t&e same screen appear s&owF or disappear &ideF. o create a

&ide9s&ow action 1o%%ow t&e stepsH

). Se%ect t&e widget you want to &ide or s&ow on t&e current screen disp%ayed in t&e sma%%

canvas or se%ect it on t&e out%ine view.

. (%ic, on t&e radio $utton C8ideC i1 you want to &ide it or on CS&owC i1 you want to ma,e it

appear.

Tip: !se this action on Dynamic Panels to change bet"een its tabs. +o do

this select a +ab of the Dynamic Panel as the target of the action.

6"




C$ange style

&is action c&anges t&e sty%e o1 a widget o1 t&e same screen. Severa% 1ormatting attri$utes can

$e c&anged at once wit& t&is action. o create a c&ange sty%e action 1o%%ow t&e stepsH

). Se%ect t&e widget you want to c&ange t&e sty%e o1 on t&e current screen disp%ayed in t&e

sma%% canvas or se%ect it on t&e out%ine view. # set o1 sty%es wi%% appear under t&e sma%%

canvas.

. Se%ect t&e sty%es you want to c&ange c&ec,ing t&em in t&e Sty%esC %ist.

-. (on1igure t&e attri$utes o1 t&e se%ected sty%e to matc& t&e desired %oo, and 1ee%.

6/




Enable7Disable input

&is action ena$%es or disa$%es an input or a se%ection widget> ma,ing possi$%e t&e user to

interact wit& it or not. 0otice you can on%y app%y t&is action to input and se%ection widgets. o

create a ena$%e9disa$%e action 1o%%ow t&e stepsH

). Se%ect t&e input or se%ection widget you want to ena$%e9disa$%e on t&e current screen

disp%ayed in t&e sma%% canvas or se%ect it on t&e out%ine view.

. Se%ect ena$%e or disa$%e c%ic,ing on t&e corresponding radio $utton.

7*

http://c/workspaceJP4/JustinmindPrototyper3.0/html/widgets_inputs.html


http://c/workspaceJP4/JustinmindPrototyper3.0/html/widgets_selection.html







Set ,ocus on

&is action sets t&e 1ocus on a particu%ar widget ?usua%%y an input 1ie%d or a se%ection component?

in t&e same screen. &e Set !ocus action is common%y used w&en we &ave a widget on t&escreen w&ic& is out o1 t&e user view and we want it to $e seen. +&en t&is action is eecuted t&e

canvas wi%% scro%% unti% t&e target widget can $e seen. oreover> i1 t&e target widget is a input> it

wi%% a%so get t&e tet 1ocus.

o create t&is action> Bust se%ect t&e target widget you want to 1ocus on t&e current screen

disp%ayed in t&e sma%% canvas or se%ect it on t&e out%ine view.

7)




Set 2alue

&is action sets a va%ue to a particu%ar widget in t&e current screen or to a varia$%e. &e va%ue to

assign can $e eit&er a simp%e tet or an epression invo%ving ot&er widgets and varia$%es.

o create an action w&ic& sets a va%ue to a screenCs widget> 1o%%ow t&e stepsH

). (%ic, on t&e CScreensC ta$ to indicate t&e targetCs type.

. Se%ect t&e widget you want to assign t&e va%ue to on t&e current screen disp%ayed in t&e

sma%% canvas or se%ect it on t&e out%ine view. 0otice t&at on%y some widgets &as t&e

property to disp%ay a va%ueH

Input widgets.

Se%ection widgets.

Static widgets containing tetH 2a$e%> 3ic& et> utton.

-. ype t&e va%ue in t&e C;a%ueC tet $o or c%ic, on C(a%cu%ateC $utton to de1ine a more

comp%e va%ue invo%ving ot&er prototypeCs e%ements.

7




o create an action w&ic& sets a va%ue to a varia$%e> 1o%%ow t&e stepsH

). (%ic, on t&e C;aria$%esC ta$ to indicate t&e targetCs type.

. Se%ect t&e varia$%e you want to assign t&e va%ue to on t&e varia$%esC %ist.

7-




-. ype t&e va%ue in t&e C;a%ueC tet $o or c%ic, on C(a%cu%ateC $utton to de1ine a more

comp%e va%ue invo%ving ot&er prototypeCs e%ements.

Select 2alue

&is action se%ects a va%ue or group o1 va%ues 1rom a se%ection widget in t&e current screen. &e

va%ue or va%ues to $e se%ected can $e de1ined eit&er wit& a simp%e tet or wit& an epression

invo%ving ot&er widgets and varia$%es.

o create an action w&ic& se%ects a va%ue 1rom a sing%e se%ection widget> 1o%%ow t&e stepsH

). Se%ect a sing%e se%ection widget on t&e current screen disp%ayed in t&e sma%% canvas or

se%ect it on t&e out%ine view. 0otice t&at on%y t&e 1o%%owing se%ection widgets &as t&e

property to $e se%ectedH

2ist o.

Se%ection 2ist.

3adio utton 2ist.

. Indicate t&e va%ue you want to se%ect 1rom t&e va%uesC drop?down or c%ic, on t&e

C(a%cu%ateC $utton to de1ine a more comp%e va%ue invo%ving ot&er prototypeCs e%ements.

74






o create an action w&ic& se%ects a set o1 va%ues 1rom a mu%ti se%ection widget> 1o%%ow t&e stepsH

-. Se%ect a mu%ti se%ection widget on t&e current screen disp%ayed in t&e sma%% canvas or

se%ect it on t&e out%ine view. 0otice t&at on%y t&e 1o%%owing se%ection widgets &as t&eproperty &ave more t&an one va%ue se%ectedH

u%ti?se%ection 2ist.

(&ec, o 2ist.

4. Indicate t&e va%uesF you want to se%ect c%ic,ing on t&e corresponding c&ec, $oes in

t&e va%uesC %ist or c%ic, on t&e C(a%cu%ateC $utton to de1ine a more comp%e va%ue invo%ving

ot&er prototypeCs e%ements.

Pause

&is action pauses t&e current eventCs eecution and de%ays t&e eecution o1 1ort&coming

actions de1ined 1or t&e same user event. 0otice t&at it on%y pauses t&e eecution o1 t&e current

event 1or t&e current e%ement> &ence a%ready eecuting actions 1or ot&er e%ements or new%y

triggered events wi%% $e carried on norma%%y.

75




o create t&is action> Bust speci1y t&e time you want t&e eventCs eecution to $e stopped in t&e

ime input. Introduce t&e time in mi%%iseconds )s R )***msF.

76




Si'ulated rules and conditions

3u%es> or conditions> can $e set up 1or a given eventCs interaction in order to govern its actionsC

eecution. Using conditions one can sp%it and organi:e t&e eecution o1 an interaction into

di11erent Cconditiona% $%oc,sC and decide w&en to per1orm one action or anot&er. #n interaction

sp%itted into Cconditiona% $%oc,sC wou%d %oo, %i,e t&e 1o%%owing eamp%e in t&e Events pane%H

&ere are two di11erent types o1 conditions t&at can $e de1ined wit& Justinmind PrototyperH

User decisionH &e interaction o1 t&e user is needed w&en t&e event is triggered to

decide w&at actions to eecute.

#utomatic eva%uated conditionH &e condition is an epression t&at can $e eva%uated

automatica%%y once t&e event is triggered.

Creating a user decision

o de1ine a decision 1or an speci1ic interaction t&at &as $een a%ready created 1o%%ow t&e stepsH

). (%ic, on t&e widget t&at &as t&e event de1ined on t&e canvas. Its events wi%% disp%ay on

t&e Events pane%.

. (%ic, on t&e C#dd conditionC %in, a$ove t&e actions you want to ma,e conditiona%. &e

Epression ui%der dia%og wi%% appear.

-. (onstruct an epression wit& on%y a tet string w&ic& wi%% de1ine t&e decision EBH Does

t&e user eistF.

4.

77




5. Press ', to create t&e decision. Se%ect (ance% to c%ose t&e dia%og wit&out app%ying

c&anges.

+&en simu%ating a user decision it wi%% appear as a es90o decision $o. I1 t&e user se%ects yest&e corresponding actions wi%% $e eecuted ot&erwise t&ey wi%% $e ignored.

Creating an automatic condition

o de1ine an automatic condition 1or a speci1ic interaction t&at &as $een a%ready created 1o%%ow

t&e stepsH

). (%ic, on t&e widget t&at &as t&e event de1ined on t&e canvas. Its events wi%% disp%ay on

t&e Events pane%.

. (%ic, on t&e C#dd conditionC %in, a$ove t&e actions you want to ma,e conditiona%. &e

Epression ui%der dia%og wi%% appear.

-. (onstruct a comparative epression using prototypeCs e%ements and 1unctions EBH

InputT) R a$cF.

4.

5. Press ', to create t&e condition. Se%ect (ance% to c%ose t&e dia%og wit&out app%ying

c&anges.

'ne can a%so de1ine a decision or condition 1or an action w&en de1ining it. o create it c%ic, on

t&e C#dd conditionC $utton in t&e Interactions dia%og.

7"




Data Simu%ationou can add data to your prototype and interact wit& it during simu%ation to ma,e it even more

rea%istic. ou wi%% a%so $e a$%e to pass data $etween di11erent screens and use data to contro%

t&e eventCs eecution.

I'porting #eal Data

Sta,e&o%ders tend to $e more invo%ved in t&e review o1 a prototype i1 t&ey see rea% data on it.

+it& rea% data t&e &idden and 1orgotten re=uirements in t&e 1unctiona% ana%ysis raise c%ear%y and

=uite soon. Sad%y t&e e11ort re=uired to 1i%% a prototype wit& rea% data is too &ig& and o1ten itCs

1i%%ed wit& dummy data instead.

Justinmind Prototyper a%%ows you to popu%ate t&e data masters and $y etent data grids and

simu%ated =ueriesF wit& data 1rom a csv 1i%e. &an ,ind o1 1i%e can $e easi%y etracted 1rom any

,ind o1 data $ase. So t&at your prototypes can $e 1i%%ed wit& p%enty o1 records coming 1rom an

a%ready eisting data $ase.

o do so Bust open any o1 your data masters using t&e option CeditC in t&e contetua% menu o1 a

data master. &en se%ect t&e C;iew and edit recordsC ta$.

7/




Press t&e CImportC $utton and a dia%og wi%%

appear as,ing you to se%ect a csv 1i%e.

&e on%y re=uirement to t&at 1i%e is t&at it

must &ave a 1irst row wit& tets t&at

matc& t&e names o1 t&e attri$utes in t&e

data master t&e order o1 t&e co%umn

donCt matterF.

ou can se%ect w&ic& c&aracter is used

in your csv 1i%e to separate t&e va%ues.

!ina%%y you can eit&er rep%ace t&e current

records in t&e data master $y t&e ones in

t&e 1i%e or add t&e ones in t&e 1i%e to t&ea%ready eisting ones in t&e data master.

ou can a%so eport a%% t&e records in a data master to a csv 1i%e in order to import t&em in ot&er

prototypes.

P%ease note t&at you can 1i%% a drop down or a se%ection %ist wit& t&e va%ues in a data master. &e

import 1rom csv comes in &andy w&en you com$ine $ot& options to &ave> 1or instance> a drop

down t&at disp%ays a%% t&e countries in t&e wor%d. &at drop down cou%d use a data master

CcountryC wit& Bust an attri$ute and you can down%oad a 1u%% %ist o1 countries in a csv or ece% 1i%e

and 1i%% it wit& t&at 1i%e.

$+pression ,uilder Overview &e $usiness %ogic editor> a%so ca%%ed expression builder is a new ,ind o1 editor introduced in

t&e version -.* o1 Justinmind Prototyper. It is a compre&ensive 1ront end to de1ine comp%e

epressions used to $asica%%y eva%uate a resu%t out o1 some input data. &e $usiness %ogic editor

is used main%y 1or two purposesH

). o speci1y a va%ue to set in a CSet ;a%ueC or CSet Se%ectionC event action.

. o $ui%d t&e condition t&at an interactionCs conditiona% $%oc, must meet in order to $eeecuted. In t&is case t&e resu%t o1 t&e epression must $e comparative wit& a $oo%ean

true91a%se> yes9noF resu%t.

&e epression $ui%der %ayout is 1air%y simp%e. It &as an area to edit t&e epression at t&e top and

two pane%s w&ere you can 1ind a%% t&e avai%a$%e 1unctions and data sources.

"*




")




Creating expressions

Every epression in Justinmind Prototyper is a com$ination o1 !unctions and Data sources. ocreate your own epression> Bust drag t&e 1unctions you need 1rom t&e !unctions pane% and drop

t&em on t&e editing area. Do t&e same wit& t&e Data sources you wi%% 1ind in t&e Data pane%.

0otice t&at w&en dragging t&e 1unctions or data e%ements over t&e epression> its structure wi%%

dynamica%%y c&ange s&owing a 1eed$ac, o1 t&e resu%t.

odifying expressions

&e editing area is very interactive and you can move e%ements around $y drag and drop and

de%ete e%ements $y c%ic,ing on t&e 1eed$ac, t&at appears at t&e top?rig&t corner w&en t&e

mouse is over an item.

,unctions

0eneral ,unctions

&ere is a great set o1 operations> or 1unctions> t&at cover most o1 t&e processing and %ogicneeds o1 any prototype.

"




Numeric functions

&ese are operations w&ose operands are num$ers integers> 1%oating point num$ers> etc.F.

Addition

Su'. 3epresented $y t&e p%us sign. a,es two numeric operands and com$ines

t&eir =uantity or va%ue.

Subtraction

(inus. 3epresented $y t&e das& sign. a,es two numeric operands and ta,es away

t&e =uantity o1 t&e second 1rom t&e =uantity o1 t&e 1irst.

Multiplication

(ultiply . 3epresented $y t&e cross sign. a,es two numeric operands> say and . times mu%tip%ied $y F resu%ts in adding copies o1 toget&er> or adding

copies o1 toget&er> 1or it &as t&e commutative property.

Division

Division. 3epresented $y a s%as&. Is t&e inverse o1 t&e mu%tip%ication. a,es two

numeric operands> say and . divided $y resu%ts in t&e num$er o1 groups o1

si:e one can 1orm out o1 a group o1 si:e .

Maximum

(a+ . Given two num$ers> it returns t&e %argest one in va%ue.

Minimum

(in. Given two numeric parameters> it returns t&e sma%%est one in va%ue.

Average

Avg . Given two numeric parameters and > #vg> F returns t&e 1o%%owingH

F9 w&ere is t&e addition and 9 t&e division ep%ained a$ove.

Absolute

Abs. a,es a rea% num$er and returns its numerica% va%ue wit&out regard o1 its sign.

Rounding up

#ound . a,es two numeric parameters> a 1%oating point num$er and an integer> and

returns an approimate representation o1 t&e 1irst using on%y as many decima%

num$ers as t&e second parameterCs va%ue.

Percentage

-. a,es two numeric operands and t&e resu%t is t&e 1irst num$er epressed as a

1raction o1 t&e second. !or instance> o1 R x F9)**.

"-




Square root

S%rt . a,es Bust one numeric operand since t&e second is a%ways two s=uareF. It

returns a num$er 3 suc& t&at 3 R > meaing 3 x 3 R .

Modular arithmetic

(od . a,es two numeric operands and > and it returns t&e remnant o1 t&e division

o1 $y .

Comparators

Equal

3eturns true i1 $ot& e%ements at t&e two ends o1 t&e e=ua% sign RF &ave t&e same

va%ue. 3eturns 1a%se ot&erwise.

Not equal

Is t&e resu%t o1 app%ying t&e %ogica% 1unction 0ot ep%ained a$ove to t&e E=ua%

1unction ep%ained in t&e previous su$section> so t&e 0ot E=ua% 1unction returns true

i1 t&e e%ements at t&e two ends &ave a di11erent va%ue.

Greater

3eturns true on%y i1 t&e va%ue o1 t&e e%ement at t&e %e1t o1 t&e Greater sign represents

a neat%y %arger va%ue t&an t&e e%ement on its rig&t.

Less


a neat%y sma%%er va%ue t&an t&e e%ement on its rig&t.

Greater or equal


a %arger or e=ua% va%ue t&an t&e e%ement on its rig&t.

Less or equal

3eturns true on%y i1 t&e va%ue o1 t&e e%ement at t&e %e1t o1 t&e Greater sign representsa sma%%er or e=ua% va%ue t&an t&e e%ement on its rig&t.

!ogic

And

.. Given two $oo%ean operands t&e #0D it returns true i1 $ot& are true> and returns

1a%se ot&erwise.

r

Or . Given two $oo%ean operands> t&e '3 operation returns true i1 eit&er or $ot& o1t&em are true and returns 1a%se ot&erwise.

"4




Not

*ot . Given a $oo%ean operand> t&e 0' operation returns its opposite. 0'trueF R

1a%se> 0'1a%seF R true.

!or

/or . Given two $oo%ean operators> t&e '3 operation returns true i1 on%y one o1 t&em

is true> and 1a%se ot&erwise.

Text ,unctions

"ount

&is 1unction ta,es a string parameter and returns a natura% num$er representing t&e

num$er o1 c&aracters o1 t&e incoming string.

"oncatenation

"oncat . &is 1unction ta,es two string parameters # and and returns a string t&at

represents appended to t&e end o1 #.

Substring

&is 1unction ta,es a string parameter # and two numeric parameters> and > and

returns a su$?string o1 # t&at comprises 1rom t&e c&aracter at t&e inde to t&at at >

given t&at stringsC tota% range spans 1rom * to n?)> w&ere n is t&e num$er o1 c&aracters o1 t&e

string.

#ndex o$

Inde+O& . &is 1unction ta,es two string operands> # and > and returns an integer wit&

t&e inde in # w&ere t&e 1irst occurrence o1 starts. I1 does not occur in a>

it returns ?).

%o upper case

Upper"ase. &is 1unction ta,es a string and returns a string w&ic& contains t&e same

c&aracters in t&e same order w&ere %ower case %etters &ave $een rep%aced $y capita%

%etters.

"5




%o lo&er case

)ower"ase. &is 1unction ta,es a string and returns a string w&ic& contains t&e same

c&aracters in t&e same order w&ere capita% %etters &ave $een rep%aced $y %ower case%etters.

'irst upper

FirstUpper . &is 1unction ta,es a string and returns a representation o1 t&e same string

w&ere t&e %etter at t&e inde * &as $een capita%i:ed.

Match regular expression

#ege+p. &is 1unction ta,es a string # and a string representing a standard regu%ar

epression 3 and returns true i1 # matc&es t&e epression 3> and 1a%se ot&erwise.

I1 you need more in1ormation a$out regu%ar epressions and &ow t&ey can $e created> p%ease

re1er to &ttpH99en.wi,ipedia.org9wi,i93egu%arTepression. 8owever> you wonCt a%ways need to

$ui%d your own regu%ar epressions> 1or t&e Justinmind Prototyper provides some o1 t&e mostuse1u% constructions ready?to?use. 3e1er to t&e #egular e+pression constants

"ontains

0as. &is 1unction ta,es two input strings # and . It returns true on%y i1 1irst string #

contains t&e w&o%e string .

Collection4s ,unctions

Some data e%ements may $e represented as co%%ections and some ot&er 1unctions may $e

needed. &is is t&e case 1or Data asters> Data Grids> Se%ection (omponents> etc.

"6

http://en.wikipedia.org/wiki/Regular_expression






Data selection

Select . &is 1unction ta,es two input parameters # and . &e # parameter representst&e data co%%ection w&ere t&e se%ection wi%% $e app%ied to eBH Data asterF> and

parameter wor,s as a se%ection 1i%ter represented $y a Data asterCs attri$ute. 8ence> t&is

1unction wi%% return t&e 1i%tered data 1rom # 1o%%owing ru%es. &e resu%t wi%% $e genera%%y a %ist o1

va%ues.

Distinct

Distinct . &is 1unction wor,s as CData se%ectionC returning t&e same %ist o1 va%ues $ut

repeated items.

'ilter

Filter . &is 1unction ta,es two input parameters # and . &e # parameter represents

t&e data co%%ection w&ere t&e 1i%ter is app%ied to eBH Data asterF> and parameter

represents t&e 1i%ter condition. Parameter is usua%%y a conditiona% epression made o1 Data

asterCs attri$utes and conditiona% operators. 8ence> t&is 1unction wi%% return a %ist o1 Data

asterCs instances 1o%%owing ru%es.

"ount

"ount . &is 1unction returns t&e num$er o1 data instances t&e input co%%ection &as.

"7




Summation

Su'. &is 1unction returns t&e summation o1 an input data %ist. &e 1unction needs two

parameters # and H parameter # represents a data co%%ection and acts as a 1i%ter o1

# as t&e CData Se%ectionC operation does. oreover> parameter may contain num$er

operators. &e 1i%tered data co%%ection must consist o1 num$ers 1or t&e operation to wor,

proper%y.

Average

Avg . &is 1unction returns t&e mean 1rom a data set $y dividing t&e sum o1 data $y t&e

num$er o1 items in t&e data set. &e input parameters are t&e same as 1or t&e

Summation operation.

Maximum

(a+ . &is 1unction ta,es t&e same parameters as 1or Summation. !or t&is case> it wi%%

return t&e maimum num$er 1ound in t&e input data set.

Minimum

(in. &is 1unction ta,es t&e same parameters as 1or Summation. !or t&is case> it wi%%

return t&e minimum num$er 1ound in t&e input data set.

"oncatenate

Add1o. &is 1unction represents t&e concatenation o1 two data co%%ections. It ta,es two

input parameters eac& one representing a data co%%ection and returns a %ist containing

$ot& sets.

""




Substract

#e'oveFro'. &is 1unction ta,es two input parameters # and > eac& one

representing a data co%%ection. It returns a %ist containing a%% t&e items 1rom data set #w&ic& do not appear in .

Data sources

+e ca%% CData sourcesC to t&e data e%ements we can use and manipu%ate in t&e epression

$ui%der to create epressions and ca%cu%ations. &ese e%ements act as parameters o1 t&e

epressions.

&ere are main%y 1ive ,inds o1 data sources we can use to $ui%d our epressionH

Screen4s 'idgetsH &e va%ue disp%ayed $y a widget on t&e current screen can $e used as a

parameter o1 your epression. o use t&em> drag and drop t&e widgets 1rom t&e CScreenC ta$ o1

t&e Epression ui%der to t&e editing area. 0otice t&at on%y t&e widgets w&ic& can disp%ay a

va%ue are permittedH

• Input widgets.

• Se%ection widgets.

• Static widgets containing tetH 2a$e%> utton and 3ic& et.

• Data Grids.

• Data GridsC rows.

2ariablesH #s ep%ained in ;aria$%es page> varia$%es act as generic containers 1or data w&ic&

can $e used in epressions.

Data astersH Use a Data aster in a epression to operate wit& a%% its records. ou can a%so

use Data astersC attri$utes in order to 1i%ter a Data aster among ot&er 1unctions.

ConstantsH &ere are severa% static e%ements you can use as parameters asH

• et constantH &is e%ement a%%ows t&e user to input any desired string as a %itera%.

• Date constantH 2ets you se%ect a date 1rom a ca%endar.

• System dateH Gives t&e current system date.

• System timeH Gives t&e current system time.

• 3andom num$erH Generates a random num$er $etween * and ) t&at can $e used to

inc%ude randomness in ca%cu%ations. It is very use1u% to simu%ate a random or vague

$e&aviour.

%egular expressionH Use t&e regu%ar epressions to easi%y c&ec, i1 a va%ue meets a Cru%eC. EBH

(&ec, i1 a num$er is a correct posta% code. See &ow to construct t&is epressions in t&e et

!unctions section. &ere are severa% regu%ar epressions a%ready created t&at you can use

toget&er wit& t&e C3egu%ar EpressionC 1unctionH

Number

&is regu%ar epression represents any num$er> wit& its sign and its decima% part

separated 1rom t&e integer part $y eit&er C.C or C>C./^[-]?[0-9]+[.|,]?[0-9]+$/

"/




Email

&is regu%ar epression represents any va%id emai% address according to t&e standard.

(&ec, 1or t&e name> t&e V sym$o% and t&e domain names.

/^[0-9a-zA-Z]+@[0-9a-zA-Z]+[.]{1}[0-9a-zA-Z]+[.]?[0-9a-zA-Z]+$/

Percentage

&is regu%ar epression accepts any num$er wit& an integer part up to two digits and a

decima% part up to two digits.

/^\d{0,2}(.\d{1,2})?$/

oney

&is regu%ar epression accepts any monetary va%ue in t&e 1orm W-4>45>456.--> w&ere

t&e do%%ar sym$o% and t&e decima% part are optiona%./^\$?[1-9][0-9]{0,2}(,[0-9]{3})*(.[0-9]{2})?$/

P$one

#ccepts any num$er $etween si and ten digits> optiona%%y separated in its second or

t&ird digit $y a das& or a w&ite space.

/^[0-9]{2,3}-? ?[0-9]{6,}$/

Postal code

#ccepts any U< posta% code> w&ic& are one or two town district %etters> 1o%%owed $y one

or two digits> 1o%%owed $y a w&ite space> 1o%%owed $y a digit> 1o%%owed $y two posta%

district %etters. #%so any Spanis& posta% code is accepted> w&ic& are num$ers o1 1ive digits.

/(^[A-Z]{1,2}[0-9]{1,2}) ([0-9][A-Z]{2}$)|(^[0-9]{!}$)/

Credit card

&is accepts a%% ;isa credit cards.

/^(?"#[0-9]{12}(?"[0-9]{3})?|![1-!][0-9]{1#}|6(?"011|![0-

9][0-9])[0-9]{12}|3[#][0-9]{13}|3(?"0[0-!]|[6][0-9])[0-9]{11}|

(?"2131|100|3!\d{3})\d{11})$/

"%!

&is accepts a%% possi$%e U32s> w&ic& are strings matc&ing t&e 1o%%owing notationH

resourceTtypeH99usernameHpasswordVdomainHport91i%epat&name=ueryTstringXanc&or.

/^[A-Za-z]{2,}"//(/)?([A-Za-z0-9]+"[A-Za-z0-9]+@)?[A-Za-z0-9.-]

{3,}("[0-9]{2,10})?(/[A-Za-z0-9]+)*((?[A-Za-z0-9]+%[A-Za-z0-9]+)

(&a'[A-Za-z0-9]+%[A-Za-z0-9]+)*|/)?([A-Za-z0-9]+)?$/

/*




*rit$metic Calculations

ou can operate wit& data 1rom any data source on your prototype %i,e input widgets> tetwidgets> Data Grids> Data asters etc. &e most $asic and common operations are t&e

arit&metic ones w&ic& app%y on%y to num$ers. ou wi%% $e a$%e to operate wit& eit&er integer or

decima% num$ers. 0otice t&at t&e on%y num$er 1ormats understood $y Justinmind Prototyper are

t&e 1o%%owingH

Integers matc&ing t&e regu%ar epressionH Y?ZHH[[d\)>-]FYVZR[[d[[d[[dFF

H[[d[[d[[dF^[[d_F.

Eamp%esH

• 5 ta,en as 5F

• 5>)-4 ta,en as 5)-4F

• 5.)-4.-4) ta,en as 5)-4-4)F

• 5>)-4>-4) ta,en as 5)-4-4)F

Decimals matc&ing t&e regu%ar epressionH Y?ZHH[[d\)>-]FYVZR[[d[[d[[dFFH[[d[[d[[dFH

YXZ[[d_F^[[d_HYXZ[[d_FF.

Eamp%esH

• 5>-4 ta,en as 5.-4F

• 5.-4 ta,en as 5.-4F

• 5.-4) ta,en as 5.-4)F

• 5.)-4>-4 ta,en as 5)-4.-4F

• 5>)-4.-4 ta,en as 5)-4.-4F

o create an arit&metic operation and store or display its result 1o%%ow t&e stepsH

). Se%ect a widget on t&e screen and 1o%%ow t&e steps to create a Set 2alue action see

#ctionsF.

. In t&e Interactions dia%og c%ic, on t&e C(a%cu%atedC $utton. &e Epression ui%der wi%%

appear.

-. (reate t&e desired arit&metic epression using numeric 1unctions and t&e re=uired data.

4. Press ', to c%ose t&e Epression ui%der dia%og.

5. Se%ect a widget on t&e sma%% canvas as t&e target to disp%ay t&e resu%t o1 t&e epression

or se%ect a varia$%e to store it.

/)




6. Press ', to app%y t&e c&anges.

ou can a%so use arit&metic operations wit&in a eventCs condition in order to compare t&e resu%t

wit& any ot&er data source.

2ariables

;aria$%es are pieces o1 data t&at can $e written and read t&roug& t&e eventsC system. # ;aria$%e

va%ue can $e interpreted as a string> num$er> date> co%%ection o1 Data asterCs records or

anyt&ing depending on t&e ca%cu%ations app%ied on it. ;aria$%esC %i1espan is t&at o1 t&e simu%ation

o1 t&e prototype.

Creating (ariables

o create a new ;aria$%e> 1irst se%ect t&e option C;aria$%esC 1rom t&e ;iew menu to s&ow t&e

corresponding pane%. &en 1o%%ow t&e stepsH

). (%ic, on t&e green Cp%usC $utton. # dia%og wi%% appear.

. Introduce a name 1or t&e ;aria$%e in t&e input C0ameC. &e name o1 t&e ;aria$%e must $e

uni=ue per prototype in order to identi1y t&em proper%y.

-. 'ptiona%F Introduce a de1au%t va%ue in t&e input CDe1au%t ;a%ueC. &is wi%% $e t&e va%ue t&e

;aria$%e wi%% ta,e w&en starting t&e prototypeCs simu%ation.

4. (%ic, on ', to create t&e ;aria$%e or c%ic, (ance% to cance% t&e c&anges.

odifying (ariables

o modiy t&e name or de1au%t va%ue o1 an eisting ;aria$%e> dou$%e?c%ic, on it on t&e ;aria$%es

pane% or rig&t?c%ic, on it and se%ect CEditC. odi1y t&e parameters in t&e dia%og and c%ic, on ',.

Deleting (ariables

o de%ete a ;aria$%e> rig&t?c%ic, on it on t&e ;aria$%es pane% and se%ect CDe%eteC.

Setting a (alue

ou can store any ,ind o1 in1ormation in a ;aria$%e during simu%ation using events and

interactions. Speci1ica%%y> storing a va%ue to a ;aria$%e must $e done t&roug& a CSet ;a%ueC action

using t&e desired varia$%e as t&e actionCs target. Justinmind Prototyper o11ers you two di11erent

ways to create t&is action 1or a ;aria$%eH

(sing drag and drop

o store t&e va%ue 1rom a screenCs widget to a ;aria$%e Bust drag t&e widget and drop it

on t&e desired varia$%e on t&e ;aria$%es pane%. &is wi%% create an 4/n page unload4event wit& an action t&at sets t&e widgetCs va%ue to t&e varia$%e.

/




"reating the action manuall)

o store t&e va%ue 1rom a screenCs widget or any ot&er data source inc%uding t&e resu%t

o1 comp%e ca%cu%ationsF use t&e Events pane% to create a CSet ;a%ueC action see

#ctions 1or more in1ormation a$out t&is actionF. ype a constant as a va%ue or c%ic, on

t&e C(a%cu%atedC $utton to use a data source or construct a ca%cu%ation.

0etting t$e (alue

ou can disp%ay t&e contents o1 a ;aria$%e during simu%ation a%so using a CSet ;a%ueC action and

setting t&e ;aria$%e as t&e data source. Justinmind Prototyper o11ers you two di11erent ways to

create t&is actionH

(sing drag and drop

o disp%ay t&e va%ue o1 a ;aria$%e in a screenCs widget Bust drag t&e ;aria$%e and drop it

on t&e screenCs widget. 0otice t&at t&e target widget must $e compati$%e wit& t&e

;aria$%eCs va%ue type. &is wi%% create an 4/n page load4 event wit& an action t&at sets

t&e ;aria$%eCs va%ue to t&e widget.

"reating the action manuall)

o disp%ay t&e va%ue o1 a ;aria$%e on a screenCs widget use t&e Events pane% to create aCSet ;a%ueC action see #ctions 1or more in1ormation a$out t&is actionF. In t&e

Interactions dia%og se%ect t&e screenCs widget as t&e actionCs target> c%ic, on t&e

C(a%cu%atedC $utton and create an epression using t&e ;aria$%e as t&e on%y data

source.

/-




Data 0rids

Data Grids are a way to disp%ay t&e records o1 a Data aster as a %ist. &is %istCs data source isa%ways a sing%e Data aster w&ic& is se%ected w&en t&e %ist is created. # Data Grid disp%ays

on%y one &eader and one row w&en editing it in t&e user inter1ace $ut it is epanded w&en

simu%ating rep%icating its rows disp%aying a di11erent row 1or eac& Data asterCs record instance.

!ind more in1ormation a$out creating a Data Grid in t&e +idgets topic.

*dding content to your Data 0rid

Data Grids &ave a de1au%t structure w&ic& disp%ays as many co%umns as Data asterCs 1ie%ds

indicated w&en creating it. 8owever> t&ey can $e customi:ed adding more in1ormation or

rearranging t&e de1au%t in1ormation provided.

0ew widgets can $e added into a Data GridCs ce%%. 8owever> notice t&at some widgets can &avea different be$a(iour inside a Data GridCs ce%% depending on t&eir propertiesH

• *ssociated to a Data ,ield& I1 t&e widget is associated to a Data asterCs 1ie%d w&ic&

$e%ongs to t&e Data aster associated to t&e Data Grid> t&en it wi%% disp%ay di11erent

va%ues depending on t&e row it is disp%ayed s&owing t&e di11erent Data asterCs records

1or t&is 1ie%d.

• Not associated to a Data ,ield& I1 t&e widget is not associated to any 1ie%d> t&en it wi%%

disp%ay t&e same va%ue 1or eac& row o1 t&e Data Grid.

/4




8ence> you can 1u%%y customi:e your Data asterCs grap&ica% representationH

*ssociate idgets to a Data aster4s field

0ot every widget can $e associated to a Data asterCs 1ie%d. 'n%y t&e 1o%%owing canH

• Input widgets

• Se%ection widgets

• Image widget

In order to associate a widget to a Data asterCs 1ie%d> 1irst se%ect t&e widget on t&e screen and

t&en se%ect t&e desired Data asterCs 1ie%d 1rom t&e CData !ie%dC drop?down you wi%% 1ind in t&e

Properties pane%. &e drop?down wi%% s&ow a%% t&e avai%a$%e 1ie%ds w&ic& t&e se%ected widget can

$e associated to.

any speci1ic 1unctions and actions can $e app%ied to Data Grids %i,e 1i%ters. See some specia%Data Grid 1unctions &ere.

/5




Create

(reating new records 1or a Data aster can $e easi%y simu%ated t&roug& t&e eventCs system. o

create a new record instance 1or a speci1ic Data aster> create t&e corresponding Data asteraction 1o%%owing t&e stepsH





4. (%ic, on t&e CData aster actionC radio $utton.

5. Se%ect t&e Data aster you want to add records to and c%ic, on t&e C0ewC $utton. &e

Epression ui%der wi%% appear.

6. (reate t&e epression 1i%%ing t&e re=uired parameters wit& any data sources.

Eamp%eH &is epression creates a new user in t&e Data aster CUsersC using

some 1orm inputs on t&e screen.

7. Press ', to a%% opened dia%ogs to app%y t&e c&anges.

0otice t&at a%% t&e instances you create> modi1y or de%ete during simu%ation wi%% $e restored once

you stop simu%ating.

%ead

ou can get any in1ormation out o1 a Data aster or a Data Grid in order to use it 1or ot&er

ca%cu%ations or Bust to disp%ay it separate%y using event actions.

%eading entire record4s instances

o get a speci1ic Data asterCs record instance or a co%%ection o1 t&em use one o1 t&e 1o%%owing

data sources in t&e Epression ui%derH

• Data asterH 3epresents t&e co%%ection o1 a%% t&e Data asterCs instances.

• Data GridH 3epresents t&e co%%ection o1 a%% t&e Data asterCs instances current%y

disp%ayed $y t&e Data Grid.

• Data GridCs rowH 3epresents t&e instance disp%ayed $y t&e current row.

• ;aria$%e containing any o1 t&e mentioned data types a$ove.

#dditiona%%y you can 1i%ter any o1 t&e data sources mentioned a$ove in order to get a more

speci1ic record instance. o do so> you wi%% need to create a ,ilter epression in t&e Epressionui%der dia%og.

/6




%eading record instance4s fields

o get a speci1ic 1ie%d 1rom a Data asterCs record instance in t&e Epression ui%der you wi%%

&ave to use t&e Select 1unction. &e Se%ect 1unction needs two parametersH

• ,irst parameter& Introduce &ere a Data asterCs record instance or a co%%ection o1

instances. o do so> you can drag and drop any Data aster> Data Grid> Data GridCs

row or ;aria$%e containing record instances.

• Second parameter& Introduce &ere t&e Data asterCs 1ie%d you want to get 1rom t&e

instancesC co%%ection.

I1 t&e 1irst parameter de1ines a collection of record instances> t&en t&e se%ect operation wi%%

return a %ist o1 va%uesH

I1 t&e 1irst parameter de1ines a single record instance> t&en t&e se%ect operation wi%% return a

sing%e va%ueH

"pdate

ou can modi1y a speci1ic record instance or a group o1 instances o1 a Data aster using

eventCs actions during simu%ation. o modi1y records 1rom a speci1ic Data aster> create t&e

corresponding Data aster action 1o%%owing t&e stepsH






/7




5. Se%ect t&e Data aster you want to modi1y records 1rom and c%ic, on t&e Codi1yC $utton.

&e Epression ui%der wi%% appear wit& a modi1y epression.

6. (reate t&e epression 1i%%ing t&e re=uired parameters wit& any data sources. 0otice t&att&e first parameter o1 t&e epression re1ers to t&e record or records co%%ection you want

to modi1y.

Eamp%e )H &is epression modi1ies a%% users 1rom t&e Data aster CUsersC using

some 1orm inputs as va%ues.

Eamp%e H &is epression modi1ies on%y users matc&ing CUsernameRo$C using

some 1orm inputs as va%ues.




Deleteou can de%ete a speci1ic record instance or a group o1 instances o1 a Data aster using eventC

actions during simu%ation. o de%ete records 1rom a speci1ic Data aster> create t&e

corresponding Data aster action 1o%%owing t&e stepsH






5. Se%ect t&e Data aster you want to de%ete records 1rom and c%ic, on t&e CDe%eteC $utton.

&e Epression ui%der wi%% appear wit& a de%ete epression 1or t&e Data aster

speci1ied.

6. (reate t&e epression 1i%%ing t&e re=uired parameter wit& a data source. 0otice t&at t&e

first and only parameter o1 t&e epression re1ers to t&e record or records co%%ection

you want to de%ete.

Eamp%e )H &is epression de%etes a%% users 1rom t&e Data aster CUsersC.

/"




Eamp%e H &is epression de%etes on%y users matc&ing CUsernameRo$C.




*ttribute TypesEvery Data aster &as a set o1 attri$utes or 1ie%ds w&ic& &as a speci1ic type. &e type o1 eac&

attri$ute can $e de1ined and c&anged t&roug& t&e Data aster edition dia%og.

o open t&e dia%og dou$%e?c%ic, on a eisting Data aster or create a new one. &ere you wi%%

$e a$%e to c&oose $etween t&e 1o%%owing types 1or eac& attri$uteH

//




Text 8default type9

&e tet type de1ines a 1ie%d w&ic& disp%ays a plain text. &is attri$ute type can &ave t&reedi11erent grap&ica% representationsH tet> tet area mu%ti?%ineF or password. o se%ect t&e correct

representation> se%ect t&e attri$ute 1ie%d on t&e CData aster !ie%dsC ta$%e and c%ic, on t&e

penci% $utton. # new dia%og wi%% appear in order to se%ect $etween t&ree di11erent sty%esH

Editing Text records

o edit a et record Bust c%ic, on t&e corresponding ce%% in t&e C3ecords a$%eC and type any tetyou want as a va%ue.

Date

&e date type de1ines a 1ie%d w&ic& disp%ays a date using t&e 1ormat 9DD9 or a date

and time using t&e 1ormat 9DD9 88Hmm. &is attri$ute type can &ave two di11erent

grap&ica% representations. o se%ect t&e correct representation> se%ect t&e attri$ute 1ie%d on t&e

CData aster !ie%dsC ta$%e and c%ic, on t&e penci% $utton. # new dia%og wi%% appear in order to

se%ect $etween t&e di11erent sty%esH

)**




Editing Date records

o edit a Date record Bust c%ic, on t&e corresponding ce%% in t&e C3ecords a$%eC and type a date

in t&e 1ormat 9DD9 or 9DD9 88Hmm depending on t&e sty%e you c&oose. 't&er1ormats o1 tet wi%% not $e accepted 1or t&is 1ie%d type.

Category

&e category type de1ines a 1ie%d w&ic& disp%ays a (alue from a range of predefined (alues.

&is attri$ute is common%y represented $y a sing%e se%ection widget t&at can &ave t&ree di11erent

grap&ica% representations. o se%ect t&e correct representation and t&e desired range o1 va%ues>

se%ect t&e attri$ute 1ie%d on t&e CData aster !ie%dsC ta$%e and c%ic, on t&e penci% $utton. # new

dia%og wi%% appear in order to se%ect $etween t&e di11erent sty%esH

Editing Category records

o edit a (ategory record Bust c%ic, on t&e corresponding ce%% in t&e C3ecords a$%eC and type

any tet matc&ing some o1 t&e va%ues in t&e va%uesC range de1ined. 't&er tet not matc&ing any

categoryCs va%ue wi%% not $e accepted. EBH ou can type C3edC i1 you de1ined t&e va%uesC3edC>CGreenC>C%ueC 1or t&e category 1ie%d.

True7,alse

&e true91a%se type de1ines a 1ie%d w&ic& disp%ays can on%y disp%ay true or false. It is a%ways

represented as a c&ec, $o widget as it is t&e on%y $oo%ean widget.

Editing True7,alse records

o edit a $oo%ean record Bust c%ic, on t&e corresponding ce%% in t&e C3ecords a$%eC and type

CtrueC or C1a%seC.

)*)




,ile upload

&e 1i%e up%oad type de1ines a 1ie%d w&ic& can disp%ay a 1i%e pat& or an image file i1 t&e widget

used to represent it is an Image widget.

Editing ,ile records

o edit a !i%e record Bust c%ic, on t&e corresponding ce%% in t&e C3ecords a$%eC. # $rowse and

de%te $utton wi%% appear. (%ic, on t&e $rowse $utton and se%ect a 1i%e se%ect an image 1i%e i1 you

want t&e 1i%e to $e disp%ayedF.

ulticategory

&e mu%ticategory type de1ines a 1ie%d w&ic& disp%ays a set of (alues from a range of

predefined (alues. &is attri$ute is common%y represented $y a mu%ti?se%ection widget t&at can

&ave two di11erent grap&ica% representations. o se%ect t&e correct representation and t&e

desired range o1 va%ues> se%ect t&e attri$ute 1ie%d on t&e CData aster !ie%dsC ta$%e and c%ic, on

t&e penci% $utton. # new dia%og wi%% appear in order to se%ect $etween t&e di11erent sty%esH

Editing ulticategory records

o edit a u%ticategory record Bust c%ic, on t&e corresponding ce%% in t&e C3ecords a$%eC and

type any tet matc&ing some o1 t&e va%ues in t&e va%uesC range de1ined. ou can type more t&an

one va%ue in t&e range using comas to separate t&em. EBH ou can type CUS>!irewireC i1 you

de1ined t&e va%ues CUSC>C%uetoo&C>C!irewireC 1or t&e mu%ticategory 1ie%d.

C$anging attribute4s type

o c&ange t&e type o1 a Data asterCs attri$ute> c%ic, on its type in t&e CData aster !ie%dsC ta$%e

o1 t&e Data asterCs dia%og. # drop?down s&owing a%% t&e avai%a$%e types wi%% appear. Se%ect t&e

desired type 1rom t&e drop?down. Press ', to app%y t&e c&anges.

)*




0otice t&at c&anging t&e type o1 a Data asterCs attri$ute wi%% ma,e all t$e idgets in t$e

prototype associated to t&is attri$ute to c&ange according to t&e new type. #%so t&e records 1or

t&is attri$ute wi%% $e restored to its de1au%t to matc& t&e new 1ormat.

Dynamic Selects

ou can use a se%ection widget to disp%ay t&e contents o1 a Data aster.

Displaying Data aster4s record instances

o ma,e a se%ection widget disp%ay t&e Data asterCs record instancesH Se%ect and drag t&e

se%ection widget you want to disp%ay t&e Data asterCs va%ues on t&e screen and drop it on t&e

desired Data aster on t&e Data asters pane%. #%ternative%y> you can drag t&e Data aster

and drop it on t&e se%ection widget on t&e screen. &is process wi%% associate t&e widget wit& t&e

Data aster.

ou can a%so associate a se%ection widget wit& a Data aster 1o%%owing t&e stepsH

). Se%ect t&e se%ection widget you want to associate on t&e screen.

. (%ic, on t&e Cpenci%C $utton in t&e ;a%ue 1ie%d o1 t&e Properties pane%. # new dia%og wi%%

open.

-. Se%ect t&e option Data aster c%ic,ing on t&e radio $utton.

4. Se%ect t&e desired Data aster 1rom t&e %ist.

5. (%ic, on ', to app%y t&e c&anges.

'nce associated> t&e se%ection widget wi%% disp%ay a%% t&e Data asterCs record instances

separating eac& 1ie%d va%ue wit& a coma. 8owever> you can de1ine w&ic& Data aster 1ie%ds you

want t&e widget to disp%ay using t&e Data aster4s descriptor H

)*-




Displaying Data aster4s category field (alues

ou can disp%ay t&e va%ues de1ined 1or a Data asterCs category attribute. o ma,e a se%ection

widget to disp%ay t&ese va%ues> se%ect and drag a sing%e?se%ection widget on t&e screen and drop

it on t&e desired category attri$ute in t&e Data asters pane%. #%ternative%y> you can drag t&e

category attri$ute 1rom t&e Data asters pane% and drop it on t&e se%ection widget.

ou can a%so associate a se%ection widget wit& a Data asterCs category attri$ute 1o%%owing t&e

stepsH

). Se%ect t&e sing%e?se%ection widget you want to associate on t&e screen.

. (%ic, on t&e Cpenci%C $utton in t&e ;a%ue 1ie%d o1 t&e Properties pane%. # new dia%og wi%%

open.

-. Se%ect t&e option Data aster !ie%d c%ic,ing on t&e radio $utton.

4. Se%ect t&e desired Data aster !ie%d 1rom t&e %ist.

5. (%ic, on ', to app%y t&e c&anges.

Displaying Data aster4s multicategory field (alues

ou can disp%ay t&e va%ues de1ined 1or a Data asterCs multicategory attribute 1o%%owing t&e

same steps descri$ed a$ove 1or t&e category attri$utes. 0otice t&at in t&is case you wi%% need a

mu%ti?se%ection widget.

)*4




*uto6,orms

ou may need to create a 1orm out o1 some Data asterCs 1ie%ds. &is is 1ast and easy wit&Justinmind Prototyper wit& a simp%e Cdrag and dropC.

o create a 1orm using all t$e fields 1rom a Data aster> Bust drag t&e Data aster 1rom t&e

Data asterCs pane% and drop it on t&e canvas. # 1orm wi%% $e created wit& Data asterCs 1ie%d

names as 2a$e%s wit& a corresponding input 1or eac& o1 t&em.

I1 you want a 1orm wit& on%y some of t$e Data aster4s fields> se%ect t&e re=uired 1ie%ds on t&e

Data asterCs pane% and drag and drop t&em on t&e canvas.

)*5




Smartp&ones and S#P0ow you can easi%y prototype app%ications 1or Ip&one> Sym$ian> #ndroid> S#P and muc& more

t&an,s to t&e many widget %i$raries provided $y Justinmind.

!ind a%% t&e %i$raries needed 1or your mo$i%e app%ications.

!ind a%% t&e %i$raries needed 1or your S#P app%ications.

3euse

1e'plates

&e emp%ates are a way to s&are content $etween a prototypeCs screens in order to save time

and 1aci%itate any g%o$a% c&anges. In Justinmind Prototyper> emp%ates $e&ave %i,e a screen as

1ar as t&e user inter1ace edition is concerned $ut> un%i,e t&e screens> t&ey can de1ine a set o1

sty%es and can $e associated to screens. Every screen in a prototype &as one emp%ate

associated w&ic& a%so de1ines t&e de1au%t sty%es o1 every widget.

In a screen> t&e contents o1 t&e associated emp%ate are disp%ayed s%ig&t%y transparent during

edition so you can c%ear%y see w&ic& contents $e%ong to t&e emp%ate and w&ic& ones to t&e

screen. 0otice t&at t&e contents o1 a emp%ate cannot $e c&anged during a screenCs edition. o

edit t&e contents o1 a screenCs emp%ate you 1irst need to se%ect it on t&e emp%ates pane% to

open it.

Creating a Template

o create a new emp%ate 1o%%ow t&e stepsH

). (%ic, on t&e Cp%usC $utton in t&e emp%ates pane%. # dia%og wi%% appear.

. Introduce t&e name 1or t&e new emp%ate in t&e C0ameC 1ie%d. 3emem$er t&e name must

$e uni=ue in t&e prototype.

-. Press ', to app%y t&e c&anges or c%ic, on (ance% to c%ose t&e dia%og wit&out creating

t&e emp%ate.

#%ternative%y you can create a emp%ate $y dup%icating an eisting one. o dup%icate a emp%ate>

rig&t?c%ic, on t&e emp%ate you want to dup%icate in t&e emp%ates pane% and se%ect t&e

CDup%icateC option. &en 1o%%ow t&e same steps descri$ed a$ove.

)*6

http://www.justinmind.com/extras?category=1&locale=en








Editing Template4s name

I1 you want to c&ange t&e name you gave to a emp%ate> rig&t?c%ic, on it in t&e emp%ates pane%and se%ect CEditC. # dia%og %i,e t&e creation dia%og wi%% appear. Introduce t&e new name and press

',.

Setting a Template as default

I1 you want to ma,e a emp%ate t&e de1au%t emp%ate 1or every new screen> rig&t?c%ic, on it in

t&e emp%ates pane% and c&ec, t&e option CSet as de1au%t emp%ateC in t&e dia%og t&at wi%%

appear. &en press ', to app%y t&e c&anges.

*ssociate a Template to a screen

o associate a emp%ate to a speci1ic screen so it can wor, as its emp%ate> rig&t?c%ic, on t&escreen you want to associate t&e emp%ate to and t&en se%ect t&e CEditC option. # dia%og s&owing

t&e current screenCs name and emp%ate wi%% appear. (%ic, on t&e rowse $utton net to t&e

Cemp%ateC 1ie%d to open t&e emp%ate se%ection dia%ogH

Se%ect t&e emp%ate and press ', to app%y t&e c&anges.

)*7




Deleting a Template

o de%ete a emp%ate> 1irst ma,e sure t&e emp%ate is not set as de1au%t or is $eing used $y ascreen. &en rig&t?c%ic, on it in t&e emp%ates pane% and se%ect CDe%eteC.

C$anging Template4s styles

o c&ange t&e sty%es de1ined $y t&e emp%ate> see t&e De1au%t Sty%es section.

Exporting Templates

o eport a emp%ate> 1irst se%ect t&e emp%ates pane% ta$ and 1o%%ow t&e stepsH

). (%ic, on t&e drop?down $utton at t&e top rig&t corner o1 t&e (ontents pane%.

. Se%ect t&e CEport emp%ateC option. # new dia%og wi%% appear to se%ect t&e emp%ate youwant to eport and %ocation.

-. Se%ect t&e emp%ate you want to eport 1rom t&e drop?down 1ie%d CSe%ect emp%ateC.

'nce se%ected a preview o1 t&e emp%ate wi%% $e s&own so you can c&ec, it is t&e

correct one.

4. (%ic, on t&e CrowseC $utton o1 t&e CEport 2ocationC 1ie%d and se%ect t&e eport

destination in your 1i%e system as we%% as t&e name 1or t&e 1i%e.

5. Se%ect ', to eport t&e se%ected emp%ate or c%ic, on (ance% to c%ose t&e dia%og wit&out

app%ying c&anges.

Importing Templates

o import a emp%ate previous%y eported> 1irst se%ect t&e emp%ates pane% ta$ and 1o%%ow t&e

stepsH


. Se%ect t&e CImport emp%ateC option. # new dia%og wi%% appear to se%ect t&e emp%ate 1i%e.

-. (%ic, on t&e CrowseC $utton o1 t&e CImport 2ocationC 1ie%d and se%ect t&e emp%ate 1i%e

.(pt etensionF you want to import. 'nce se%ected t&e emp%ate wi%% $e disp%ayed in t&e

same dia%og so you can c&ec, it is t&e correct one.

4. Se%ect ', to import t&e se%ected emp%ate or c%ic, on (ance% to c%ose t&e dia%og wit&outapp%ying c&anges.

Tip: ou can also import a +emplate by drag and drop% &ust drag the file

from your file system and drop it on the +emplates panel.

)*"




(asters

&e asters are> %i,e t&e emp%ates> a way to replicate and s$are content across a prototypeCs

screens in order to save time and 1aci%itate any g%o$a% c&anges. In Justinmind Prototyper>

asters a%so $e&ave %i,e a screen as 1ar as t&e user inter1ace edition is concerned $ut> un%i,e

t&e screens> t&ey can $e treated %i,e a compound widget. 8ence> asters can $e created into

screens or temp%ates %i,e a common widget $ut wit& a very $ig di11erenceH every c&ange you

ma,e to a aster wi%% spread to a%% t&e aster instances you created in your prototype.

In a screen or temp%ate> a aster instance is painted wit& a s%ig&t%y transparent ye%%ow co%or so

you can c%ear%y see w&ic& contents $e%ong to a aster. 0otice t&at t&e contents o1 a aster

cannot $e c&anged during t&e screen or temp%ate edition. o edit t&e contents o1 a aster you

1irst need to se%ect it on t&e asters pane% to open it. ou can> a%ternative%y> dou$%e?c%ic, on a

aster instance on your screen or temp%ate to start editing it.

Creating a aster

o create a new aster 1o%%ow t&e stepsH

). (%ic, on t&e Cp%usC $utton in t&e asters pane%. # dia%og wi%% appear.

. Introduce t&e name 1or t&e new aster in t&e C0ameC 1ie%d. 3emem$er t&e name must

$e uni=ue in t&e prototype. Introduce a description into t&e CDescriptionC 1ie%d i1 you need

it.

-. Press ', to app%y t&e c&anges or c%ic, on (ance% to c%ose t&e dia%og wit&out creating

t&e aster.

#%ternative%y you can create a aster $y dup%icating an eisting one. o dup%icate a aster>

rig&t?c%ic, on t&e aster you want to dup%icate in t&e asters pane% and se%ect t&e CDup%icateC

option. &en 1o%%ow t&e same steps descri$ed a$ove.

Editing aster4s name and description

I1 you want to c&ange t&e name or description you gave to a aster> rig&t?c%ic, on it in t&e

asters pane% and se%ect CEditC. # dia%og %i,e t&e creation dia%og wi%% appear. Introduce t&e new

name and press ',.

)*/




*dding a aster to a screen

ou can create as many aster instances as you want per screen or temp%ate. o create aaster instance Bust drag t&e aster %i,e a common widget 1rom t&e asters pane% and drop it

on t&e screen9temp%ate.

Deleting a aster

o de%ete a aster> rig&t?c%ic, on it in t&e asters pane% and se%ect CDe%eteC. 0otice t&at w&en

de%eting a aster a%% t&e aster instances created in t&e prototype wi%% a%so $e de%eted.

Exporting asters

o eport a aster> 1irst se%ect t&e asters pane% ta$ and 1o%%ow t&e stepsH


. Se%ect t&e CEport asterC option. # new dia%og wi%% appear to se%ect t&e aster you want

to eport and %ocation.

-. Se%ect t&e aster you want to eport 1rom t&e drop?down 1ie%d CSe%ect asterC. 'nce

se%ected a preview o1 t&e aster wi%% $e s&own so you can c&ec, it is t&e correct one.

4. (%ic, on t&e CrowseC $utton o1 t&e CEport 2ocationC 1ie%d and se%ect t&e eport

destination in your 1i%e system as we%% as t&e name 1or t&e 1i%e.

5. Se%ect ', to eport t&e se%ected aster or c%ic, on (ance% to c%ose t&e dia%og wit&out

app%ying c&anges.

Importing asters

o import a aster previous%y eported> 1irst se%ect t&e asters pane% ta$ and 1o%%ow t&e stepsH


. Se%ect t&e CImport asterC option. # new dia%og wi%% appear to se%ect t&e aster 1i%e.

-. (%ic, on t&e CrowseC $utton o1 t&e CImport 2ocationC 1ie%d and se%ect t&e aster 1i%e .(cc

etensionF you want to import. 'nce se%ected t&e aster wi%% $e disp%ayed in t&e same

dia%og so you can c&ec, it is t&e correct one.

4. Se%ect ', to import t&e se%ected aster or c%ic, on (ance% to c%ose t&e dia%og wit&outapp%ying c&anges.

Tip: ou can also import a -aster by drag and drop% &ust drag the file

from your file system and drop it on the -asters panel.

))*




"usto' widget libraries0et to t&e +idgets ta$ is t&e y +idgets ta$. y +idgets are customi:a$%e widgets created $y

t&e user> $y Justinmind or $y t&ird?party widget providers> and can $e easi%y imported and

eported to and 1rom any Justinmind Prototyper.

(ustom widgets are organi3ed in idget groups in t&e y +idgets pane%. &roug& its too%$ar

you can create new groups> eport t&em or import new %i$rariesH

Creating a group

I1 you want to create a new widgetsC group> c%ic, on t&e C#dd groupC 1rom t&e pane% too%$ar. #

new dia%og wi%% appear. Introduce t&e name in t&e Cit%eC 1ie%d and press ', to create t&e group

wit& t&e given name.

Editing group4s name

I1 you want to c&ange t&e name o1 a widgetsC group> c%ic, on t&e Cpenci%C $utton net to its name.

# new dia%og wi%% appear. Introduce t&e new name in t&e Cit%eC 1ie%d and press ', to app%y t&e

c&anges.

Deleting group

I1 you want to de%ete a widgetsC group> c%ic, on t&e CcrossC $utton net to its name. # new dia%og

as,ing 1or con1irmation wi%% appear. Press ', to app%y t&e c&anges.

Creating your on idgets

o create your own custom widget> you Bust need to group a%% t&e widgets on t&e screen your

new custom widget s&ou%d consist o1 and t&en drag and drop it on t&e desired group in t&e y

+idgets pane%. # new dia%og as,ing 1or t&e widgetCs name and image wi%% appear. Introduce a

name 1or your widget and> optiona%%y> se%ect an image to disp%ay in t&e y +idgets pane%.

)))




#%ternative%y> you can rig&t?c%ic, on any widget created on t&e screen and se%ect t&e C#dd to y

+idgetsC option 1rom t&e contetua% menu. &is time you wi%% a%so need to introduce t&e

destination widgetCs group.

odifying a idget

'nce a custom widget is created you can modi1y its name> image and t&e widgetCs group it

$e%ongs to. In order to c&ange t&ese properties> rig&t?c%ic, on t&e widget in t&e Cy +idgetsC

pane% and se%ect CEditC.

ou can a%so move a widget $etween widgetCs groups $y drag and drop.

Deleting a idget

I1 you want to de%ete a widget> rig&t?c%ic, on it in t&e Cy +idgetsC pane% and se%ect CDe%eteC. #

new dia%og as,ing 1or con1irmation wi%% appear. Press ', to app%y t&e c&anges.

Exporting 'idget groups

o eport your custom widgets as a %i$rary> 1irst se%ect t&e Cy +idgetsC pane% ta$ and 1o%%ow t&e

stepsH

). (%ic, on t&e CEportC $utton in t&e pane%Cs too%$ar. # new dia%og wi%% appear to se%ect t&e

groups you want to eport and %ocation.

. Se%ect 1rom t&e C+idget groups %istC t&e groups you want to eport moving t&em to t&e

CEported %istC.

-. (%ic, on t&e CrowseC $utton o1 t&e CrowseC 1ie%d and se%ect t&e eport destination

toget&er wit& t&e 1i%e name.

4. Se%ect ', to eport t&e widgets on t&e CEported %istC or c%ic, on (ance% to c%ose t&e

dia%og wit&out app%ying c&anges.

))




Importing 'idget library

o import a custom widget %i$rary previous%y eported> 1irst se%ect t&e Cy +idgetsC pane% ta$and 1o%%ow t&e stepsH

). (%ic, on t&e CImportC $utton in t&e pane%Cs too%$ar. # new dia%og wi%% appear to se%ect t&e

%i$rary 1i%e %ocation.

. (%ic, on t&e CrowseC $utton o1 t&e CrowseC 1ie%d and se%ect t&e %i$rary 1i%e .:pl

etensionF 1rom your 1i%e system.

-. Se%ect ', to import t&e widgets 1rom t&e se%ected 1i%e or c%ic, on (ance% to c%ose t&e

dia%og wit&out app%ying c&anges.

I'port and $+port PrototypesSometimes t&ere comes t&e need to use part o1 a prototype in anot&er prototype> or to s&are

on%y a portion o1 a w&o%e prototype wit& co%%eagues. o ac&ieve it> t&e import and eport

prototype options are provided. &ey %et you se%ect a su$set o1 e%ements o1 a prototype and

eport t&em into a new prototype 1i%e> and a%so %oad a prototype and se%ect a su$set o1 e%ements

to import into anot&er prototype.

Export Prototype

&e eport prototype option is accessi$%e via t&e !i%e M Eport menu. It presents a %ist o1 a%% t&e

eporta$%e prototype e%ements ?screens> scenarios> data masters> temp%ates and masters? on

t&e %e1t and %ets you se%ect t&e e%ements t&at are to $e eported.

Tip: ou can also import a "idgets* library by drag and drop% &ust drag

the file from your file system and drop it on the *-y idgets* panel.

))-




'nce you se%ect an e%ement tic, t&e c&ec,$o on its %e1tF> a%% t&e e%ements it depends on e.g.

t&e temp%ate 1or a screen> t&e %in,s or masters t&at appear in t&at screen...F are mar,ed wit& a

warning sym$o% F. &ese e%ements must $e tic,ed i1 you want t&e se%ected e%ement to $e1u%%y 1eatured and appear in t&e eact same 1ace as in t&e source prototype. 8owever> i1 t&ey

are not eported t&ey Bust wonCt appear in t&e 1ina% prototype. 'n t&e rig&t t&ere are two $uttonsH

• (%ic, on Add Direct Dependencies to automatica%%y add a%% t&e e%ements t&at are direct

dependencies o1 t&e e%ements current%y tic,ed.

• (%ic, on Add All Dependencies to ma,e t&e same process recursive%y 1or a%% add e%ements

unti% no dependencies are missing.

+&en you &ave se%ected a%% t&e desired e%ements and &ave dea%t wit& t&e dependencies> c%ic,

t&e ̀ $utton to se%ect t&e target 1i%e %ocation and give t&e target 1i%e a name. Eported 1i%es &ave

t&e 2vp etension. !ina%%y> c%ic, on t&e O! $utton to per1orm t&e eport.

Import Prototype

&e import prototype option is accessi$%e via t&e !i%e M Import menu. In t&e import prototype

screen> 1irst se%ect t&e prototype you want to import. 'nce se%ected> t&e $ottom area disp%ays a

%ist o1 con1%icts. # con1%ict occurs w&en t&ere are e%ements in t&e imported prototype wit& t&e

same name and type t&an ot&er e%ements in t&e open prototype. !or eac& con1%ict detected> t&e

system o11ers t&ree actionsH

• CopyH (opies t&e e%ement under a new name> so t&at you get $ot& in t&e 1ina% prototype.

&e new name is t&e o%d name wit& a num$er su11i.

• DiscardH Discards t&e imported e%ement and ,eeps t&e origina% one. &e imported e%ementis %ost. &atCs t&e option $y de1au%t.

• "pdateH Discards t&e origina% e%ement and updates it wit& t&e imported. &e origina%

e%ement is %ost.

))4




In t&e %ist> eac& e%ement &as t&ree radio $uttons to se%ect t&e action you desire. 'nce you &ave

dea%t wit& a%% t&e con1%icts> c%ic, O! to per1orm t&e import.

Pu$%is& 'n%ine #t Justinmind> we t&in, t&at a we$ prototype is t&e $est communication too% $etween

customers9users and t&e so1tware deve%opment team. I1 you &ave an app%ication prototype at

t&e start o1 a proBect and it is as c%ose as possi$%e to t&e 1ina% app%ication> t&e user can $einvo%ved 1rom t&e $eginning> giving &is opinion and va%idating itH t&e more ,ey peop%e get

invo%ved> t&e more success1u% t&e proBect wi%% $e as a w&o%e> reducing t&e num$er o1 1ina%

adBustments made on t&e app%ication and not on t&e prototype.

+it& Justinmind "sernote. #%% aut&ori:ed ,ey users can access your prototypes on t&e

Internet. &ey can co%%a$orate $y testing and commenting on t&em 1rom t&eir $rowser. #%so> a%%

t&eir notes are registered and centra%i:ed so t&at no detai%s are %ost. &roug& t&is service> you

can a%so integrate your prototype on%ine wit& user test too%s and remote too%s.

Se%ect t&e menu option S&are M Pu$%is& 'n%ine and enter in your Justinmind Usernote account.

&en pus& t&e Kup%oad prototypeL and se%ect t&e prototype 1i%e t&at you want to pu$%is& i1 you

want to pu$%is& t&e prototype t&at you are current%y wor,ing on you s&ou%d save it 1irst to some

))5




dis, %ocationF. 'nce up%oaded you can c%ic, on t&e name o1 t&at prototype to navigate it or invite

anot&er users to review it.

))6




Eport to 82In order to generate an 82 we$site out o1 your prototype> use t&e CEport to 82C option

%ocated in t&e CS&areC menu o1 t&e app%icationCs main menu. It wi%% re=uest a dis, %ocation w&ere

t&e 82 prototype wi%% $e saved under a new 1o%der w&ose name matc&es t&e prototype 1i%e

name.

&e 82 prototype 1i%e structure is as 1o%%owsH

• ;PrototypeName<7CSS N &is 1o%der contains t&e cascade sty%e s&eets (SSF 1i%es

w&ic& contain in1ormation a$out t&e sty%e and %oo, and 1ee% o1 82 e%ements.

• ;PrototypeName<7images N &is 1o%der contains t&e images o1 your prototype.

• ;PrototypeName<7:a(ascript N &is 1o%der contains t&e Bavascript script 1i%es w&ic&

provide active $e&aviours suc& as most event actions to prototypes.

• ;PrototypeName<7pages N &is 1o%der contains t&e actua% screens sorted $y name. Use

t&is 1o%der to %oo, and $rowse screens wit&out t&e navigation tree on t&e %e1t t&atCs

common to a%% 82 prototypes.

• ;PrototypeName<7index.$tml N Use t&is 1i%e as an entry point to any 82 prototype. It

opens t&e prototypeCs &ome page and adds a use1u% screen tree on t&e %e1t to ease

navigation. 8tm% 1i%es can $e opened wit& any we$ $rowser suc& as Internet Ep%orer>

o:i%%a !ire1o> #pp%e Sa1ari or Goog%e (&rome.

Include3$+clude co''ents+&en t&is option is se%ected you wi%% $e as,ed i1 you want or not comments in your prototype. I1

you want comments t&en a pane% wi%% $e added to t&e %e1t o1 your prototype s&owing t&e

comments i1 t&ere are anyF and a %ist o1 a%% t&e screens in t&e prototype. I1 you c&oose not to

s&ow t&e comments t&en a%% t&at pane% wonCt appear in t&e prototype. &at %ast option is per1ect

to test t&e prototype in mo$i%e p&ones and ta$%ets..

Opti'i4e code

ou can a%so optimi:e t&e generated code so t&e screens can %oad 1aster. In order to optimi:e it>go to t&e C!i%eC menu> c%ic, on Pre1erences and c&ec, t&e option 4/ptimi3ed HT!4 in t&e

Genera% section.

))7




Scenarios"reating ScenariosUse t&e (omponents Pane% to add t&ese components to t&e canvas. ou can a%so drag a%ready

eisting screens to t&e scenario. o drag and drop a component onto a scenario drag a

component or a screen 1rom t&e components pane% and re%ease it on t&e canvas. 'nce in t&e

canvas you can rename t&e component> move it around t&e canvas and c&ange co%or> 1ont and

many ot&er sty%e properties. Draw transitions arrowsF $etween t&e components in t&e canvas

$y using t&e C(reate transitionC too% at t&e too% $ar. ou can draw transitions a%so $y p%acing t&e

cursor onto t&e component in t&e canvas and dragging t&e sma%% arrows to anot&er component.

ou can rename t&e transitions $y dou$%e?c%ic,ing in t&e ... tet a$ove t&em.

))"




5alidating Prototypes # scenario is not on%y a p%ace to draw 1%ow diagrams $ut a%so a way to va%idate your current

simu%ation against t&ose 1%ows. +&en you drag a screen component into t&e scenarioCs canvas

t&e screen is represented $y an icon. I1 t&at screen is renamed in suc& a way t&at t&e new name

matc&es t&e name o1 a screen created in CUser Inter1aceC t&en t&e icon is rep%aced $y a preview

o1 t&at screen. So t&at you can =uic,%y view i1 t&e screens in a scenario are actua% screens in

your prototype. ou can create an actua% screen 1rom a component in a scenario $y c%ic,ing wit&

t&e rig&t mouse $utton on it cmdc%ic, in 'S systemsF and se%ecting t&e C(reate a%so in UIC

option. # new screen wi%% $e created in t&e CUser Inter1aceC ta$ and t&e icon in t&e scenario wi%%

$e rep%aced $y a preview o1 t&at screen. &e transitions are a%so compared to actua% %in,s in t&e

simu%ation. I1 t&e transition &asnCt its companion %in, in t&e screen t&en a warning icon appears.

'nce t&e %in, t&at %in,s t&at screens is created in t&e CUser Inter1aceC t&e warning icon wi%%disappear. Dou$%e?c%ic, on a screen component in t&e scenario opens t&at screen in t&e CUser

Inter1aceC ta$ to edit. (&ec, in w&ic& scenarios appears a screen $y c&oosing t&e CScenariosC

option in t&e contetua% menu o1 a screen in CUser Inter1aceC.

))/




<ey$oard S&ortcutsStandard S&ortcuts +indows 'S

(ut (tr% (md

(opy (tr% ( (md (

Paste (tr% ; (md ;

Dup%icate(tr% D or (tr% (%ic, and

drag

(md D or (md (%ic,

and drag

De%ete De%ete or ac,space De%ete or ac,space

Undo (tr% (md

3edo (tr% (md S&i1t

Se%ect #%% (tr% # (md #

Print (tr% P (md P

!ind (tr% ! (md !

8e%p !) (md S&i1t

Eit #%t !4 (md O

)*




Prototype +indows 'S

0ew (tr% 0 (md 0

'pen (tr% ' (md '

Save (tr% S (md S

(%ose (tr% + (md +

0avigation +indows 'S

Go to &ome screen #%t 8ome (md S&i1t 8

Go to previous screen #%t 2e1t arrow (md Y

Go to net screen #%t 3ig&t arrow (md Z

;iew +indows 'S

!u%%screen !)) (md S&i1t !

Scro%% up ouse w&ee% up ouse w&ee% up

Scro%% down ouse w&ee% down ouse w&ee% down

oom in(tr% ouse w&ee% up or

(tr% CC

(md ouse w&ee% up or

(md CC

oom out

(tr% ouse w&ee% up or

(tr% CC

(md ouse w&ee% down

or (md C?C

))




Drag and move canvas panF Space Drag Space Drag

S&are +indows 'S

Simu%ate !5 (md S&it P

Documentation !6 (md S&i1t S

82 !7 (md S&i1t

Save canvas as image !" (md S&i1t I

et 1ormatting +indows 'S

o%d (tr% (md

Ita%ic (tr% I (md I

Under%ine (tr% U (md U

(enter a%ign (tr% E (md E

2e1t a%ign (tr% 2 (md 2

3ig&t a%ign (tr% 3 (md 3

+idgets +indows 'S

Group (tr% G (md G

Ungroup (tr% S&i1t G (md S&i1t G

)




8ide (tr% 8 (md J

S&ow (tr% S&i1t 8 (md S&i1t J

2oc, (tr% < (md <

Un%oc, (tr% S&i1t < (md S&i1t <

ring to 1ront (tr% S&i1t #rrow up (md S&i1t #rrow up

Send to $ac, (tr% S&i1t #rrow down (md S&i1t #rrow down

ring 1orward (tr% #rrow up (md #rrow up

Send $ac,ward (tr% #rrow down (md #rrow down

#%ign %e1t (tr% #%t 2 (md #%t 2

#%ign center (tr% #%t ( (md #%t (

#%ign rig&t (tr% #%t 3 (md #%t 3

#%ign top (tr% #%t (md #%t

#%ign midd%e (tr% #%t (md #%t

#%ign $ottom (tr% #%t (md #%t

0ew comment (tr% S&i1t ( (md S&i1t (

0ew event (tr% S&i1t E (md S&i1t E

)-




#dditiona% 8e%pCustomer Support Portal

&atCs a specia% p%ace 1or customers to re=uest &e%p to t&e Justinmind Support eam. 'nce you

$uy a %icense you receive t&e registration detai%s to %og in into t&at porta%. &ere you can eit&er

report issues a$out JustinmindCs products or as, &ow to simu%ate somet&ing t&at you are not

a$%e to do. (%ic, t&is %in, or copy and paste t&is ur% $ttp&77support.:ustinmind.com to your

internet $rowser to enter in t&e Justinmind Support Porta%.

Community6poered Support

ou mig&t &ave a =uestion or an issue t&at ot&er users &ad too. (&ec, our community?powered

support porta% &ttpH99getsatis1action.com9BustinmindF and add =uestions> report pro$%ems orpraise &ow good is to prototype wit& Justinmind. Peop%e 1rom Justinmind c&ec, t&is porta% 1rom

time to time and &ave a%ready answered many =uestions. I1 you are a customer we &ig&%y

encourage you to use t&e (ustomer Support Porta% instead.

2ideo Tutorials

JustinmindCs we$ site &as a specia% section wit& video tutoria%s wit& eamp%es on &ow to use

Prototyper to simu%ate di11erent cases. 8ave a %oo, at t&em at

&ttpH99www.Bustinmind.com9tutoria%s

*rticles

JustinmindCs $%og contains many artic%es to &e%p you on your prototyping. Inc%udes 1rom $est

practices to tutoria%s. 8ave a %oo, at &ttpH99$%og.Bustinmind.com

http://support.justinmind.com/


http://getsatisfaction.com/justinmind



http://www.justinmind.com/tutorials


http://blog.justinmind.com/









Documents

Justinmind Prototyper Userguide