HelloWorld

I. Introduction
Dr. Horrible has just completed his latest creation: a humanoid automaton! However Dr. Horrible's team of morally flexible henchmen don't have the tools or training to carry out Dr. Horrible's nefarious machinations. Dr. Horrible needs you to construct a learning environment for training his henchmen. You first task: leave Dr. Horrible a calling digital card!

media type="custom" key="7793573"

II. Learning objectives
//**Knowledge**// //**Skills**//
 * **MXML** is a xml-based language used to create user interfaces, consisting of tags like . Tags can be nested inside other tags. Tags have key-value properties.
 * **GUI** stands for Graphical User Interface.
 * Be able to use Flash Builder to write a simple Flex program in MXML

III. Concepts
=== Let's write your first program! We're going to write Flash/Flex programs because they run almost anywhere and have good user-interface building tools. Flex programs actually use two programming languages: //Actionscript// and //MXML//. Actionscript looks a lot like java, javascript, or C while MXML looks like html and xml. You're probably thinking: "I have to learn //two// languages?" But it's not as bad as you think. ===

MXML
MXML is an XML-based markup language used to create user interfaces. Table 1 shows a program written in MXML.

Table 1. A simple MXML program code format="mxml"     code Notice that the MXML consists of an opening and closing tag like  ... , with other tags nested inside. The first word in the tag is the tag's name, e.g., "mx:Label". The other words inside the the tag are the tag's attribute, e.g., in the Label tag, there is a "text" property, whose value is "Hello World!".

While this may look complicated, the nice thing about MXML is you don't usually have to write it yourself. You use Flash Builder's User interface builder to drag and drop GUI elements like text and buttons onto a user interface, and Flash Builder compiles it into a program that you can run on your computer. You will often use the GUI builder to setup the GUI, then edit little parts of the MXML to make it do what you want.

**GUI**
GUI stands for Graphical User Interface. GUI's include text, buttons, drawing tools, pretty much everything you see on the web or on your computer. If you are writing a program that is meant to be used by a user, student, gamer, or any other kind of person, it probably has a GUI. Old-school computer science majors might take a year of programming, data structures, and algorithms classes before they start learning how to write GUIs. However in modern programs GUI code often makes up the majority of code written for a modern program. For our purposes, we're going focus on HCI (Human-Computer Interaction) including interfaces, interaction, software engineering and design, rather than on traditional Computer Science like algorithms, data-structures, and compilers.

IV. Scenario
Here's your task: Write "Hello World!"

V. The Hello World Program
Here is the program you will write (yes, we are showing you the answer). code format="actionscript3"       code There are a couple of things to notice. The first is the  tag which defines a web based program that you can run in your browser. You can ignore the xmlns "namespace" tags for now which we'll discuss in the future. Notice that the width and height attributes define the size of your application in pixels. You can also ignore the declarations tag for now tat defines variables which we'll discuss in the next lesson. The second thing to notice is the  tag which specifies that the text "Hello Dr. Horrible!" should appear in the middle of the interface. The x and y attributes specify where the text should appear (in pixel coordinates from the top left of the application) and the size of the text box (width and height attributes). That's it!

VII. Self-explain (Try it!)
Go over each tag in the MXML program and explain out loud to yourself what it does. If you don't know exactly what the tag does, just try to guess for now.

VII. Program walkthrough (Try it!)
To create Hello World! do the following:
 * 1) Open Flash Builder
 * 2) Create a new Flex Project (make sure it's a web application)
 * 3) Open the Main.xml file
 * 4) Switch to design mode
 * 5) Drag a Label onto the Application and type in "Hello Dr. Horrible!"
 * 6) Resize the application if you'd like
 * 7) Run the program and see what it does
 * 8) Export the program
 * 9) Upload the .swf file to your website.

**VIII. On your own (Try it!)**
Try writing a second program. Add your own text and try out some of the other GUI widgets. Challenge yourself to try without looking at the steps above.

==<span style="font-size: 1.3em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**IX. Check yourself** ==

X. Feedback
- did you have any questions about GUIs, XML, or the Hello World program? - do you feel like you can write a Flex program on your own? - what questions do you have?