Professional Documents
Culture Documents
Application Prototyping
CONTENTS INCLUDE:
n
Why Prototype?
n
What is Prototyping?
with SketchFlow
n
Guidelines and Principles
n
Real World Scenario
n
About SketchFlow
SketchFlow Basics and more...
By Parvez Ansari
n
One platform,
many opportunities
to create engaging, interactive applications
for the Web, desktop, and mobile devices.
www.microsoft.com/silverlight M
Prototyping Flow
prototype will help judge the technical feasibility of developing Components Involved
the application. The second step is to identify the components of the current
manual system. In this situation these components are:
If a required feature is creating a problem in the prototyping • User Access Rights to different components
stage, it is possible that it might be a bigger roadblock during • Purchase Order (PO) raising and processing
the actual application development. Thus, prototyping helps the • Consent Application handling
team assess this risk and find an alternate method if necessary. Login
Vulnerable feature requirements should be tackled first To ensure authorized access by employees, it is decided to
because, if overlooked, they may hinder the project during create users based on the roles assigned to them in the office.
actual development. Facing difficulties during prototyping Proper access privileges are given to users to grant/deny
makes the actual development process smoother. access to a particular component of the system.
Messaging System
Brainstorming
The messaging system is the core component of the whole
Brainstorming helps the team classify the core components
system. A placed purchase order or an application that has
of the project and facilitates the identification of different
been submitted for consent is shown on the respective
approaches that can be evaluated to find the most efficient way
approving authorities screen. The messaging system also
for interaction between components.
manages the approval/denial of the request.
Quickly Experiment with Different Ideas To ensure decisions are made in a timely manner, a timer that
Prototyping helps us quickly explore how an application should is placed in the messaging system displays the message as
function. Different methods can be experimented with to see soon as the employee logs an application.
how to attain results in the most efficient manner. The main
focus is not to work on the business logic, but on the UI and The message is displayed in the appropriate employee’s
the flow between core components. It helps the team identify message box for them to take necessary action.
a better solution in a limited amount of time. It should be done Flow Between the components
quickly and the focus should remain on the core requirements. It is essential to maintain logical flow between the
components. To place a purchase order, the flow should be
Client Feedback
from the main screen to the Purchase Order form and then to
Client feedback helps the team polish the prototype and
the messaging system for approval.
stay focused on the core components. Since feedback is
implemented in the initial stages, time is saved. Based on the requirements placed by the client and from the
current manual system, the development team decides to
Improve the Prototype Based on Feedback create a SketchFlow WPF application.
Feedback from the client should be incorporated in the
prototype. This will help the client identify whether it meets Client Feedback
their requirements. The technical team can check to see if it Once the prototype is ready, the SketchFlow project is
feasible to implement particular aspects of the feedback. packaged and sent to the client for feedback. The client views
the prototype in the SketchFlow player and gives feedback
Prototype Should be very close to the Real Application using the “My Feedback” feature of SketchFlow, which is
Care must be taken to ensure that the prototype remains then exported to be sent to the development team. This is
close to what the actual application will be when developed. A then imported into the prototype project so the feedback
feature that can not be implemented in the actual application can be reviewed. Multiple people from the client’s team can
should not be included in the prototype. send different feedback files that all need to be viewed by the
development team.
Communication
Just like documentation, communication between the client Incorporate Feedback
and the developer team is an important factor for the success The next step is to incorporate the feedback into the
of the final application. Communication reduces the risk of a prototype and then send the prototype back to the client for
misunderstanding occurring. further review. Several iterations of this can be carried out until
the client is satisfied.
Understanding Requirements
SketchFlow is a great tool from Microsoft It is part of
Your client approaches you for the automation of the current
Expression Studio 4 Ultimate and gives us the capability to
manual office system they have in place. The development
quickly and effectively map out and iterate through the flow of
team should note down the requirements so that they can
an application’s UI.
be used to monitor whether the prototype has met the
requirements once it is completed. Expression Blend is the production tool for WPF & Silverlight,
whereas SketchFlow is a prototyping tool built on top of Artboard shows us the content of the individual screens of our
Expression Blend. Since it is built on Blend, all of the Blend prototype. This is the visual part of the application where you
features are available. This makes our transition from prototype can use the full range of controls available in Expression Blend.
to production much easier. You can draw by using the drawing tools. You can also import
images from Adobe Photoshop, which is especially useful if
SketchFlow enables us to quickly present our ideas on how the
the client has a visual mockup of the application he would like
UI flows and how the screens will look. This enables the client
to use.
to focus on the functionality rather than the specific details of
the design. SketchFlow Map appears at the bottom of the Expression
Blend application when working in SketchFlow. It is where the
Since SketchFlow prototypes are real WPF or Silverlight
whole flow of the application is created. It allows us to define
projects, the prototype or an individual element of the
the way each screen interacts with the other screens.
prototype can be reused or used as a resource library.
In the below figure you can see that the flow of the application
You can download the 60-Day Free Trial version of Expression
is from Screen1 to Screen2. So, it can be determinted that
Studio 4 Ultimate at
Screen1 is the startup screen.
http://www.microsoft.com/expression/try-it/Default.aspx
SKETCHFLOW BASICS
Create a Project
Once you start Expression Blend you see the following startup SketchFlow Map
screen. Click on “New Project” to begin. are an important part of the prototype because they are the
visual element visible to the user. Each screen is shown as a
You get the following screen and have the option to select the
node in the SketchFlow Map.
project type as Silverlight or WPF. Selecting the project type
depends on what kind of requirement the client has, whether There are two types of screens/nodes:
the application would be a standalone application or whether it • Normal screens
• Components screens
has to be deployed on the web.
Normal screens are generally used to navigate to and from.
In our case our client requires a Desktop application, so we will
The component screen is what can be reused in multiple
select WPF SketchFlow Application. Provide a suitable project
screens, for example a menu component created by the design
name and click on Ok.
team can be reused on multiple screens as required.
When you hover over the node in the SketchFlow Map panel
a visual menu appears, as shown below. You can also see the
XAML file name of the screen in the tooltip
Expression Blend, New Project Screen
Screen Node
You will get the following screen:
To create a new screen click on the Create a screen
Hot
Tip menu in the SketchFlow Map toolbar of the node
selected
If you want to connect to the existing screen, hover on the
selected node and from the visual menu select the “Connect
an existing screen” icon . Start dragging to create a new
navigation connection. An arrow will appear following the
mouse pointer. This arrow has to be dragged to the screen
where you want to make the connection.
If you are familiar with Expression Blend, you will find it Objects and Timeline panel shows the hierarchical view of the
similar.You get two views of your design: Artboard and contents on the screen. It allows us to select objects and move
SketchFlow Map. them around as required.
Layers can be further added to organize the objects on the Open the Assets Panel Ctrl + Period
artboard. When you create a storyboard a red circle indicates
Toggle between Design, Split View and Code View F11
that recording is on. You can select the storyboard from the
Storyboard Picker. Build the Project Ctrl+Shift+B
The image below (a) indicates the Record Indicator, (b) indicates Run the Project F5
the Storyboard Picker and (c) represents playback controls.
If an object is modified in the artboard directly using object If you get to a point where you have made mistakes
handles, the property changes will be reflected in the on all of the open panels and are confused, you
properties panel. The sections of the properties panel are Hot can always revert back to the SketchFlow’s default
collapsible. Tip workspace by pressing Ctrl+Shift+R or by selecting
Important sections of the properties panel are (these may “Reset Current Workspace” from the Windows Menu.
vary according to the object on the artboard selected):
Brushes, Appearance, Layout, Common Properties, Transform, Creating Screens
Miscellaneous. In the SketchFlow Map Pane you will see a node named
Screen1. Right click on it and rename it as “Welcome Screen.”
There might be confusion on what is the most
Double click on the Welcome Screen node, this will select the
effective way to change the property of an object on
Welcome screen page in the artboard and allow you to draw
the artboard or in the properties panel. It depends
the contents you want in the welcome screen.
on the requirement. If you wish to fit in an object on
Hot the artboard it would be better if you use the object
Tip handle and mouse to arrange it on the artboard.
If you want a specific height and width of a control
you can do it by selecting the object on the artboard
and modifying the properties in the properties panel.
The changes you make in the object properties are registered Hover over the welcome screen node and click on the “Create
in the form of XAML code for example if you change the height a connected screen” node. This will create a new node, name
and width of the Rectangle to 100 and 200 respectively, the it “Login”. Double click on login to select the “Login Screen”.
XAML code will look like this: Select the “Objects and Timeline Panel” and click on
<Rectangle x:Name=”rectangle” Fill=”#FFF4F4F5”
the root component, in this case it is UserControl named
HorizontalAlignment=”Left” Height=”200” Margin=”74,93,0,0” “Login_Name”. In the properties panel enter Height and
Stroke=”Black” VerticalAlignment=”Top” Width=”100”/>
Width as 300 px. This will resize the Login Panel.
Other properties are set by Blend itself based on the object
From the left side tools panel click on the Assets button it
placement you made like VerticalAligment and Margin.
will open the following panel
The following shortcut keys are the most frequently used keys
in Expression Blend.
Login Screen
From the “Main Screen” node create three more screen nodes
and name them: Consent Application Form, Purchase Order
Form, Help, Messaging System.
Navigation Component Screen
In the Objects & Timeline panel select the three buttons and
rectangle that we have created, right click on the selection and
click on the “Make Into Component Screen” option as shown
below.
Click on the Add button to load the feedback file sent by the
client. Once the feedback file is loaded you can see the details
in the Panel.
SketchFlow Player
BUY NOW
books.dzone.com/books/dynamic-prototyping
#82
CONTENTS INCLUDE:
■
■
About Cloud Computing
Usage Scenarios Getting Started with
Aldon Cloud#64Computing
■
Underlying Concepts
Cost
by...
■
Upcoming Refcardz
youTechnologies ®
■
Data
t toTier
brough Comply.
borate.
Platform Management and more...
■
Chan
ge. Colla By Daniel Rubio
tion:
dz. com
tegra ternvasll
ABOUT CLOUD COMPUTING one time events. TEN TS
INC ■
HTML LUD E:
us Ind Anti-PPaat
Basics
Automated growthHTM
ref car
nuorn
■
Valid
ation one time events, cloud ML
connected to what is now deemed the ‘cloud’. Having the capability to support
Network Security
Usef
Du
ti
■
ul M.
computing platforms alsoulfacilitate
#84
Open the gradual growth curves
n an
Page Source
o
■
s
Vis it
C
faced by web applications. Tools
Core
By Key ■
Elem
Patte
has changed substantially in recent years, especially with Structur
E: al Elem ents
INC LUD gration the entrance of service providers like Amazon, Google and Large scale growth scenarios involvingents
specialized
NTS and mor equipment
rdz !
HTML
CO NTE Microsoft. es e... away by
(e.g. load balancers and clusters) are all but abstracted
Continu at Every e chang
m
About ns to isolat
relying on a cloud computing platform’s technology.
Software i-patter
space
Hadoop
rdz .co
■
n
Re fca
e Work
Build
riptio
and Ant
Desc
These companies have a Privat
are in long deployed
trol repos
itory
webmana applications
ge HTM
L BAS
■
Build
re
Buil Repo
This Refcard active
will introduce are within
to you to cloud riente computing, with an
d units
RATION etc. Some platforms ram support large grapRDBMS deployments.
■
The src
dy Ha
softw
e ine loping and Java s written in hical on of
INTEG attribute
task-o it all
softwar emphasis onDeve es by
Mainl these
ines providers, so youComm can better understand
also rece JavaScri user interfac web develop and the rris
Vis it
UML
codel chang desc
INUOU ding Task Level as the
e code
www.dzone.com
Label
Build
manu
al
d tool
depe deplo t need but as if
eve , a ) stalle the same nmen for stan overlap uen
(i.e. , inef Build t, use target enviro Amazon EC2: Industry standard it has
software and uagvirtualization ine. HTM , so <a>< tly are) nest
with terns problem ce pre-in whether dards
ated b></
ory. ns (i.e. Autom Redu ymen
has bec become e with a> is
via pat ticular d deploEAR) in each very little L
Subversion
reposit -patter s that Pay only cieswhat you consume
tagge or Amazon’s cloud
the curr you cho platform
computing isome
heavily based moron fine. b></ ed insid
lained ) and anti the par solution duce nden For each (e.g. WAR es t
ent stan ose to writ more e imp a></ e
not lega each othe
x” b> is
be exp text to “fi are al Depeapplication deployment
Web ge until t a
librarifew years agonmen
t enviro was similar that will softwaredard
industry standard and virtualization app
e HTM technology.
orta nt,
tterns to pro Minim packa nden
Mo re
CI can ticular con used can rity all depe all targe
s will L or XHT arent. Reg the HTM l, but r. Tags
etimes Anti-pa they
tend
es, but to most phone services:
y Integ alizeplans with le that
late fialloted resources, ts with an and XHT simplify all help ML, und ardless
L VS
XHTM <a><
in a par hes som
Centr
end,
Binar
pro cess. the practic enti ng incurred costgeme
nt
whether e a single
such
temp
resources on
were consumed
t enviro
nmen
orthenot. Virtualization MLaare your
othe
you prov
erst of L
b></
in muchallows physical piece of hardware to
ide be HTM
rily bad
Mana based
approac ed with the cial, but, implem anding
Creat targe es to actually r web
nden
cy rties are nt
of the a solid L has
into differe coding.resources
necessa pared to
chang
efi Depe prope itting utilized by multiple operating
function systems.simplerThis allows foundati job adm been arou
associat to be ben
er
Ge t
te builds commo
are not Fortuna
late Verifi e comm than on
n com Cloud computing asRun it’sremo
known etoday has changed this.
befor alitytohas irably, nd for
They they
etc.
Temp Build (e.g. bandwidth, n memory, CPU) be allocated exclusively to tely exp that som
lts whe
ually,
appear effects. Privat y, contin Every elem mov used
to be, HTML
ecte job e time
ed resu The various resourcesPerfo rm a
consumed by webperio applications
dicall (e.g. nt team
pag
individual operating entsinstances. ed to CSS
system Brow d. Earl
y HTM has expand . Whi
gration
opme because
adverse unintend d Builds sitory Build r to devel common e (HTML . ser ed far le it has don
ous Inte web dev manufacture L had very
Stage Repo
e bandwidth, memory, CPU) areIntegtallied
ration on a per-unit CI serve basis or XHT
produc tinu e Build rm an from
extensio .) All are more e its
e.com
DZone, Inc.
Cloud Computing
the
s on
expand
ISBN-13: 978-1-934238-75-2
140 Preston Executive Dr. ISBN-10: 1-934238-75-9
Suite 100
50795
Cary, NC 27513