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: www.toffemmedicines.comwww.toffemmedicines.com

3
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

4
Many other choices (we don’t know much about these) Microsoft Expressions Blend Processing (www.processing.org)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

5
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

21
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

24
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

26
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

27
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

28
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

29
Adobe Flash In Clusters for Mac or PC Free trial: http://www.adobe.com/products/flash/ 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