Lecture 7 Implementation Options Overview of VB Net

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 l How “complete” an implementation? l l Level of complexity required: l l l 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 l Pretty much any way you want l l l 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) l l l Power. Point Html (using editor like Front. Page or Dreamweaver) Html + Javascript Microsoft Visual Basic Adobe Flash Adobe Flex

Many other choices l (we don’t know much about these) l l l l 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 l Output a set of web pages, or a Windows. exe file

Using Power. Point to Prototype l l l 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 l Can use web editors to prototype any kind of interface l l Tricky for detailed layout Can edit html using l l l Microsoft Word (not recommended) Microsoft Frontpage (discontinued) Microsoft Expression Web 3 l l free trial: http: //www. microsoft. com/expression/products/Web_Overview. aspx Adobe Dreamweaver l l free trial: http: //www. adobe. com/products/dreamweaver/ Dreamweaver CS 4 10 (Adobe) in Clusters

Example: Movie Kiosk l l 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” l 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 l l 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 l Holds all the form elements l l l Buttons Labels Check. Boxes Panels Web Browsers

The UI builder: Properties l Change properties of a UI item l Mostly visual properties l l l Font Color Background Image Size Visibility

The code editor l l l 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 l Variables l Declared with “Dim variable. Name As variable. Type” l l l Ex. Dim num. Students As Integer Standard data types (Byte, Char, Integer, Double, Long, Short, Single, String, Date, Boolean, Object, Decimal) Sub Procedures (methods) l l Most of these will be written for you (event-based) Declared with “Sub function. Name(By. Val or By. Ref input. Variable…)” l l End with “End Sub” Ex. Public Sub add. Numbers(By. Val num. A As Integer, By. Val num. B As Integer) Dim answer As Integer = num. A + num. B; 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 text. Input As String = one. Text

Switching Panels l l 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: l l l Loops through the array Displays the proper panel Hides all of the other panels

Cooler (non-square) buttons l l Use images Overlay square buttons over a background image

Additional Resources l http: //msdn. microsoft. com/enus/vbasic/default. aspx l http: //www. homeandlearn. co. uk/NET/vb. Net. html l More on the course website l http: //www. cs. cmu. edu/~bam/uicourse/08763 fall 09/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. . . l l l 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! l what is the underlying state necessary for it to run? l which states depend on each other? l what are the different modes in the interface? l how will you switch between modes? l what input is valid and what input is invalid? l how will you check the validity of input data? 27

the design of our averaging UI l three numbers as input, represented as text l one number as output, represented as text l after every change to the text representing the three numbers, validate the text and provide visual feedback on errors 28

Adobe Flash l In Clusters for Mac or PC Free trial: http: //www. adobe. com/products/flash/ l Originally an animation tool l Interactive editor with timeline Also scripting in “Action. Script” (= Java. Script) l Hint: Action. Script v. 2 much easier to use than v. 3

Adobe Flex l Flex Builder free 60 day trial: http: //www. adobe. com/cfusion/entitlement/index. cf? e=flexbuilder 3 l l l Uses Eclipse to create Action. Script code More built-in controls than Flash Pro ZQ will demonstrate Flex