1 Lecture 7: Implementation Options: Overview of VB. Net, Flash, html, etc. Brad Myers / / : Introduction to Human Computer Interaction for Technology Executives Fall, 2009, Mini 2

Implementing your Prototype How “complete” an implementation? 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 Level of complexity required: At least 30 “controls” (widgets: buttons, text fields) About 10 different screens/pages/windows/modes Example:

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 ( Python, tcl/tk, … or other desktop app Ruby on Rails, or any other web scripting system Brett Leber ’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 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 Go first

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: Adobe Dreamweaver free trial: Dreamweaver CS4 10 (Adobe) in Clusters

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” Example: Movie Kiosk

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 Clusters have Visual Studio 2005 OK to use either version

Who has used VB.NET? 10 Get to know your knowledgeable classmates Ask the TAs early and often

What is Visual Basic.NET? 11 UI Builder

What is Visual Basic.NET? Code Editor

What is Visual Basic.NET Debugger

The UI builder 14 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

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 19 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

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 us/vbasic/default.aspx us/vbasic/default.aspx More on the course website

let’s average three numbers 24 (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

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: 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: Uses Eclipse to create ActionScript code More built-in controls than Flash Pro ZQ will demonstrate Flex