1 / 30

Lecture 7: Implementation Options: Overview of VB. Net, Flash, html, etc.

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. Implementing your Prototype. How “complete” an implementation?

atira
Download Presentation

Lecture 7: Implementation Options: Overview of VB. Net, Flash, html, etc.

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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

  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.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) • 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 Go back • Add a shape, with a label • Add a hyperlink: • Select “Place in this document” • Create a slide for each mode of theapplication • Can add nice animations • Limitations: no textentry, no scripting, nodata validation Go first

  6. 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

  7. 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”

  8. Visual Basic.NETand Visual Studio 2008 (This section based on material from previous year’s TAs, especially: Devin Blais and Andrew Ko)

  9. Visual Studio Express 2008 • Free Download • http://www.microsoft.com/express/vb/ • Clusters have Visual Studio 2005 • OK to use either version

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

  11. What is Visual Basic.NET? UI Builder

  12. What is Visual Basic.NET? Code Editor

  13. What is Visual Basic.NET Debugger

  14. 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

  15. The UI builder: Toolbox • Holds all the form elements • Buttons • Labels • CheckBoxes • Panels • Web Browsers

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

  17. 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

  18. 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 ByRefinputVariable…)” • End with “End Sub” • Ex. Public Sub addNumbers(ByVal numA As Integer, ByVal numB As Integer) Dim answer As Integer = numA + numB; End Sub

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

  20. Reading Input Dim textInput As String = one.Text

  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

  22. Cooler (non-square) buttons • Use images • Overlay square buttons over a background image

  23. Additional Resources • http://msdn.microsoft.com/en-us/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

  24. let’s average three numbers • take three numbers and show the average • make sure the text represents a number • show an error when there aren’t three numbers • show the average when there are three numbers

  25. prototype your code!

  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

  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?

  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

  29. 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: ActionScriptv.2 much easier touse than v.3

  30. 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

More Related