Lecture 7:
Implementation Options:
Overview of VB. Net, Flash,
html, etc.
Brad Myers
05-863 / 08-763 / 46-863: Introduction to
Human Computer Interaction for
Technology Executives
Fall, 2009, Mini 2
1
Implementing your Prototype

How “complete” an implementation?




Level of complexity required:



Screen transitions must work
All buttons should do something, even if go to a
“not implemented yet” page
Search, other computation does not have to work
At least 30 “controls” (widgets: buttons, text fields)
About 10 different screens/pages/windows/modes
Example: www.toffemmedicines.com
Implementation Options

Pretty much any way you want



Must “work” – not just paintings
Note: TAs and prof. will not be able to help you with
your code
Some options (in order of difficulty)






PowerPoint
Html (using editor like FrontPage or Dreamweaver)
Html + Javascript
Microsoft Visual Basic
Adobe Flash
Adobe Flex
Many other choices

(we don’t know much about these)







Microsoft Expressions Blend
Processing (www.processing.org)
Python, tcl/tk, … or other desktop app
Ruby on Rails, or any other web scripting system
Brett Leber [bleber@cs.cmu.edu] ’s CTAT with an
interface builder (Flash or Java)
We recommend you do not use Java, C++ or
other “professional” language
Note: you must be able to create software that is
easy for others to run

Output a set of web pages, or a Windows .exe file
Using PowerPoint to Prototype






Add a shape, with a label
Go first
Add a hyperlink:
Select “Place in this document”
Create a slide for each mode of the
application
Can add nice animations
Limitations: no text
entry, no scripting, no
data validation
Go back
Html editing

Can use web editors to prototype any kind of
interface


Tricky for detailed layout
Can edit html using



Microsoft Word (not recommended)
Microsoft Frontpage (discontinued)
Microsoft Expression Web 3


free trial: http://www.microsoft.com/expression/products/Web_Overview.aspx
Adobe Dreamweaver


free trial: http://www.adobe.com/products/dreamweaver/
Dreamweaver CS4 10 (Adobe) in Clusters
Example: Movie Kiosk




Dreamweaver works a lot like Word
Hint: use tables a lot for layout
Hint: Controls are in “forms”
Make use of the web for “how-to’s”

E.g., “html button link”
Visual Basic.NET
and Visual Studio 2008
(This section based on material from
previous year’s TAs, especially: Devin Blais
and Andrew Ko)
Visual Studio Express 2008




Free Download
http://www.microsoft.com/express/vb/
Clusters have Visual Studio 2005
OK to use either version
Who has used VB.NET?
• Get to know your knowledgeable classmates
• Ask the TAs early and often
10
What is Visual Basic.NET?
UI Builder
11
What is Visual Basic.NET?
Code Editor
What is Visual Basic.NET
Debugger
The UI builder
Drag and drop GUI elements
Property editor to change the
characteristics of UI controls
Does not help you with the
dynamic behavior of UI controls
14
The UI builder: Toolbox

Holds all the form elements





Buttons
Labels
CheckBoxes
Panels
Web Browsers
The UI builder: Properties

Change properties of a UI item

Mostly visual properties





Font
Color
Background Image
Size
Visibility
The code editor



Write code to give UI
controls behavior
Watch for warning and error
feedback
Use the editor to help find
the names of methods and
properties of things
17
VB.NET: Variables and Sub
Procedures

Variables

Declared with “Dim variableName As variableType”



Ex. Dim numStudents As Integer
Standard data types (Byte, Char, Integer, Double, Long, Short,
Single, String, Date, Boolean, Object, Decimal)
Sub Procedures (methods)


Most of these will be written for you (event-based)
Declared with “Sub functionName(ByVal or ByRef inputVariable…)”


End with “End Sub”
Ex.
Public Sub addNumbers(ByVal numA As Integer, ByVal numB As Integer)
Dim answer As Integer = numA + numB;
End Sub
The debugger
When you see a problem,
start with a hypothesis
Set breakpoints to inspect
parts of the program that
will help you test your
hypothesis
If you’re stuck, check your
assumptions
19
Reading Input
Dim textInput As String = one.Text
Switching Panels




Need to switch between different screens
Use panels as containers for each screen
Create an array to hold all the panels
Create a method that:



Loops through the array
Displays the proper panel
Hides all of the other panels
Cooler (non-square) buttons


Use images
Overlay square buttons over a
background image
Additional Resources

http://msdn.microsoft.com/enus/vbasic/default.aspx

http://www.homeandlearn.co.uk/NET/vbNet.html

More on the course website

http://www.cs.cmu.edu/~bam/uicourse/08763fall09/visualbasicresources.html
let’s average three numbers
(1) take three numbers
and show the average
(2) make sure the text
represents a number
(3) show an error when
there aren’t three
numbers
(4) show the average
when there are three
numbers
24
prototype your code!
25
before you write any code...



decide what features you will and won’t
implement
determine what variables and state you will
have to manage in the interface
decide how you will use events to manage
and manipulate this state
26
design your architecture!

what is the underlying state necessary for it
to run?

which states depend on each other?

what are the different modes in the
interface?

how will you switch between modes?

what input is valid and what input is invalid?

how will you check the validity of input data?
27
the design of our averaging UI

three numbers as input,
represented as text

one number as output,
represented as text

after every change to the
text representing the three
numbers, validate the text
and provide visual
feedback on errors
28
Adobe Flash

In Clusters for Mac or PC
Free trial: http://www.adobe.com/products/flash/

Originally an animation tool



Interactive editor with timeline
Also scripting in
“ActionScript”
(= JavaScript)

Hint: ActionScript
v.2 much easier to
use than v.3
Adobe Flex

Flex Builder free 60 day trial:
http://www.adobe.com/cfusion/entitlement/index.cf?e=flexbuilder3



Uses Eclipse to create ActionScript code
More built-in controls than Flash Pro
ZQ will demonstrate Flex