Justinmind Prototyper Userguide
-
Upload
anonymous-xx5q7zmru -
Category
Documents
-
view
226 -
download
0
Transcript of Justinmind Prototyper Userguide
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 1/124
User Guide
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 2/124
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/
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 3/124
Justimind Prototyper – User Guide
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
-
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 4/124
Justimind Prototyper – User Guide
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 5/124
Prototyping Environment
5
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 6/124
Justimind Prototyper – User Guide
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 7/124
Justimind Prototyper – User Guide
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 8/124
Justimind Prototyper – User Guide
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
"
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 9/124
Justimind Prototyper – User Guide
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.
/
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 10/124
Justimind Prototyper – User Guide
(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.
)*
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 11/124
Justimind Prototyper – User Guide
,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.
))
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 12/124
Justimind Prototyper – User Guide
,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.
)
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 13/124
Justimind Prototyper – User Guide
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.
)-
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 14/124
Justimind Prototyper – User Guide
,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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 15/124
Justimind Prototyper – User Guide
,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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 16/124
Justimind Prototyper – User Guide
,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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 17/124
Justimind Prototyper – User Guide
(%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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 18/124
Justimind Prototyper – User Guide
(%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.
)"
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 19/124
Justimind Prototyper – User Guide
(%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.
)/
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 20/124
Justimind Prototyper – User Guide
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
*
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 21/124
Justimind Prototyper – User Guide
(%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.
)
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 22/124
Justimind Prototyper – User Guide
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.
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 23/124
Justimind Prototyper – User Guide
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.
-
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 24/124
Justimind Prototyper – User Guide
&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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 25/124
Justimind Prototyper – User Guide
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 26/124
Justimind Prototyper – User Guide
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 27/124
Justimind Prototyper – User Guide
/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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 28/124
Scenarios
"
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 29/124
Comments
/
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 30/124
Justimind Prototyper – User Guide
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
-*
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 31/124
Justimind Prototyper – User Guide
• 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.
-)
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 32/124
Justimind Prototyper – User Guide
)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"
-
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 33/124
Justimind Prototyper – User Guide
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.
--
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 34/124
Justimind Prototyper – User Guide
+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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 35/124
Justimind Prototyper – User Guide
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 36/124
Justimind Prototyper – User Guide
• 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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 37/124
Justimind Prototyper – User Guide
• 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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 38/124
Justimind Prototyper – User Guide
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.
-"
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 39/124
Justimind Prototyper – User Guide
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
edition without applying changes press .scape"
• 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%.
-/
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 40/124
Justimind Prototyper – User Guide
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*
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 41/124
Justimind Prototyper – User Guide
,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)
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 42/124
Justimind Prototyper – User Guide
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
1. Select the widget and click on the .dit button in the &roperties panel! ne't to
the $2alue$ attribute" A dialog will display"
4
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 43/124
Justimind Prototyper – User Guide
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
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 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.
Setting default selection
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%.
Selecting (alues in simulation
4-
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 44/124
Justimind Prototyper – User Guide
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.
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.
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%.
Selecting (alues in simulation
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%.
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.
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%.
Selecting (alues in simulation
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 45/124
Justimind Prototyper – User Guide
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.
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%.
Selecting (alues in simulation
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
edition without applying changes press .scape"
• 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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 46/124
Justimind Prototyper – User Guide
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
press ancel to close the dialog without applying changes"
%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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 47/124
Justimind Prototyper – User Guide
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 48/124
Justimind Prototyper – User Guide
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
press ancel to close the dialog without applying changes"
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"
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 49/124
Justimind Prototyper – User Guide
%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/
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 50/124
Justimind Prototyper – User Guide
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*
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 51/124
Justimind Prototyper – User Guide
&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)
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 52/124
Justimind Prototyper – User Guide
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 53/124
Justimind Prototyper – User Guide
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-
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 54/124
Justimind Prototyper – User Guide
!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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 55/124
Justimind Prototyper – User Guide
Text
+idgets w&ic& &ave tet &ave t&e 1o%%owing 1ont 1ormat options to $e c&angedH
55
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 56/124
Justimind Prototyper – User Guide
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 57/124
Justimind Prototyper – User Guide
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 58/124
Justimind Prototyper – User Guide
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"
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 59/124
Justimind Prototyper – User Guide
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/
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 60/124
Justimind Prototyper – User Guide
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*
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 61/124
Justimind Prototyper – User Guide
*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)
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 62/124
Justimind Prototyper – User Guide
)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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 63/124
Justimind Prototyper – User Guide
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-
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 64/124
Justimind Prototyper – User Guide
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
w&ic& we are de1ining t&e event.
/n Mouse +eave3 'ccurs w&en t&e mouse cursor %eaves t&e area o1 t&e e%ement upon
w&ic& we are de1ining t&e event.
/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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 65/124
Justimind Prototyper – User Guide
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 66/124
Justimind Prototyper – User Guide
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 67/124
Justimind Prototyper – User Guide
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 68/124
Justimind Prototyper – User Guide
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"
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 69/124
Justimind Prototyper – User Guide
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/
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 70/124
Justimind Prototyper – User Guide
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*
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 71/124
Justimind Prototyper – User Guide
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)
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 72/124
Justimind Prototyper – User Guide
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 73/124
Justimind Prototyper – User Guide
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-
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 74/124
Justimind Prototyper – User Guide
-. 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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 75/124
Justimind Prototyper – User Guide
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 76/124
Justimind Prototyper – User Guide
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 77/124
Justimind Prototyper – User Guide
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 78/124
Justimind Prototyper – User Guide
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"
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 79/124
Justimind Prototyper – User Guide
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/
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 80/124
Justimind Prototyper – User Guide
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.
"*
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 81/124
Justimind Prototyper – User Guide
")
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 82/124
Justimind Prototyper – User Guide
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.
"
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 83/124
Justimind Prototyper – User Guide
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)**.
"-
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 84/124
Justimind Prototyper – User Guide
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
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 sma%%er va%ue t&an t&e e%ement on its rig&t.
Greater 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 represents
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 85/124
Justimind Prototyper – User Guide
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 86/124
Justimind Prototyper – User Guide
%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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 87/124
Justimind Prototyper – User Guide
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 88/124
Justimind Prototyper – User Guide
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.
""
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 89/124
Justimind Prototyper – User Guide
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]+$/
"/
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 90/124
Justimind Prototyper – User Guide
&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]+)?$/
/*
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 91/124
Justimind Prototyper – User Guide
*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.
/)
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 92/124
Justimind Prototyper – User Guide
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.
/
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 93/124
Justimind Prototyper – User Guide
"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.
/-
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 94/124
Justimind Prototyper – User Guide
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 95/124
Justimind Prototyper – User Guide
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 96/124
Justimind Prototyper – User Guide
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
). 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.
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 97/124
Justimind Prototyper – User Guide
%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
). 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.
4. (%ic, on t&e CData aster actionC radio $utton.
/7
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 98/124
Justimind Prototyper – User Guide
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.
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.
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
). 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.
4. (%ic, on t&e CData aster actionC radio $utton.
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.
/"
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 99/124
Justimind Prototyper – User Guide
Eamp%e H &is epression de%etes on%y users matc&ing CUsernameRo$C.
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.
*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
//
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 100/124
Justimind Prototyper – User Guide
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
)**
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 101/124
Justimind Prototyper – User Guide
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.
)*)
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 102/124
Justimind Prototyper – User Guide
,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.
)*
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 103/124
Justimind Prototyper – User Guide
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
)*-
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 104/124
Justimind Prototyper – User Guide
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 105/124
Justimind Prototyper – User Guide
*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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 106/124
Justimind Prototyper – User Guide
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 107/124
Justimind Prototyper – User Guide
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 108/124
Justimind Prototyper – User Guide
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
). (%ic, on t&e drop?down $utton at t&e top rig&t corner o1 t&e (ontents pane%.
. 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.
)*"
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 109/124
Justimind Prototyper – User Guide
(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 ',.
)*/
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 110/124
Justimind Prototyper – User Guide
*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
). (%ic, on t&e drop?down $utton at t&e top rig&t corner o1 t&e (ontents pane%.
. 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
). (%ic, on t&e drop?down $utton at t&e top rig&t corner o1 t&e (ontents pane%.
. 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.
))*
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 111/124
Justimind Prototyper – User Guide
"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%.
)))
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 112/124
Justimind Prototyper – User Guide
#%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.
))
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 113/124
Justimind Prototyper – User Guide
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.
))-
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 114/124
Justimind Prototyper – User Guide
'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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 115/124
Justimind Prototyper – User Guide
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 116/124
Justimind Prototyper – User Guide
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 117/124
Justimind Prototyper – User Guide
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
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 118/124
Justimind Prototyper – User Guide
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.
))"
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 119/124
Justimind Prototyper – User Guide
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.
))/
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 120/124
Justimind Prototyper – User Guide
<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
)*
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 121/124
Justimind Prototyper – User Guide
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
))
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 122/124
Justimind Prototyper – User Guide
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
)
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 123/124
Justimind Prototyper – User Guide
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
)-
7/23/2019 Justinmind Prototyper Userguide
http://slidepdf.com/reader/full/justinmind-prototyper-userguide 124/124
Justimind Prototyper – User Guide
#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