MCC - CIS162AD CS1 Hello World - 10 points

In Visual Studio .Net all files related to a program are stored in a Project. This document will walk you through the process of creating a Project, Source file, and Windows application for the Hello World (CS1) assignment. You will need a separate Project for each assignment, so pay attention to the detailed steps as you go through this document, because you will be doing this throughout the semester. Only the required options and features to complete this assignment are included. Additional details will be revealed in the textbook and lecture notes.

1. The following instructions will lead to the development of a Windows application similar to this:
   
   
   
   
2. Put your name on your storage device (flash disk), and insert it into the appropriate connection on the computer.
   
   
3. Start Microsoft Visual Studio 2008 Professional.
   
   

In Mesa Community College's computer lab open Microsoft Visual Studio 2008. The program to open on your home computer will depend on which version was installed, Microsoft Visual Studio 2008 or Visual C++ 2008 Express Edition. The Microsoft Visual Studio program appears: If necessary, maximize the application window to fill the entire screen by clicking the maximize button in the upper right-hand corner of the window. Do NOT be alarmed if your Start Page does not look like the picture above. Start Pages will vary depending on who used it last and on the selected options.

4. Each assignment must be stored in a separate project, and the process is different in Microsoft Visual Studio 2008 Professional and Visual C# 2008 Express Edition, so make sure you are following the instructions for the version of the software you are using. These instructions are for Microsoft Visual Studio 2008 Professional.

Click on File on the menu bar, scroll down and mouse over New, and then slide over and select Project.... The Templates on the right side can be displayed either in large or small icons. Select small icons by clicking on the small icon button which is the button on the far right above the Templates. From the list of Frameworks on the upper right side select .Net Framework 3.5 in the dropdown list. From the list of Project Types on the left side click on Visual C#. In the list of Templates click on Windows Forms Application. Note: Selecting anything else will cause your program not to work per these instructions. Enter Name: CS1 To set the Location: use the Browse... button to navigate to the drive assigned to your storage device. The Solution Name should be the same as the application Name (CS1). It may already be grayed out if Create a directory for solution does not have a check mark as instructed on the next step. Click on the box in front of Create a directory for solution to remove the check mark if it has one. Click on OK.

5. After a few seconds, the files for the new project should appear on the right in the Solution Explorer window, and a empty form should be displayed.

   If your workspace window does not display the Solution Explorer, click on View on the menu bar and select Solution Explorer. The form view is used to create the Graphical User Interface (GUI) by placing control objects (buttons, text boxes, etc.) on the form. The size of the form can be adjusted by dragging the resize handles around the form. The handles are present when the form is the currently selected object.

6. The placement of the various panels of the development environment can be reset to the default layout if they do not appear as shown above.

Click on Window on the menu bar. Scroll down and select Reset Window Layout. On the prompt that asks you if you are sure you want to reset the layout, click on Yes.

7. Before building an application we must have a plan. The plan includes a sketch of the form, a list of names and properties for the objects, and the code that will be executed by the program.

   The plan includes a sketch of the objects that will be used on the form: There will be four objects on the Hello World form: 1 label, 1 text box, and 2 buttons. The names and properties of the objects as well as the program code will be provided in the steps that follow.

8. After a plan for the form has been developed, the form can be built.
   To begin adding objects to the form the Toolbox must be displayed, and
   to set object properties, the Properties Window must be displayed.

If the Common Controls Toolbox and Properties Window is not displayed after resetting the window layout, they can be displayed as follows. Click on View on the menu bar, and select Properties Window. The Properties Window should be displayed on the bottom right under the Solution Explorer. Click on View on the menu bar, and select ToolBox. Click on the push-pin to make the Toolbox stay on the screen. The Toolbox will AutoHide if the push-pin is not pushed.

9. Place a label on the Form.

Click on the Label tool in the toolbox to activate it. Move the pointer over the form and the pointer becomes a crosshair with a big A. Click-and-drag on the form where you want to place the Hello World label, and release the mouse.

10. Place a text box on the Form.

Click on the TextBox tool in the toolbox to activate it. Move the pointer over the form and the pointer becomes a crosshair with a small ab. Click-and-drag on the form where you want to place the text box, and release the mouse.

11. Place two buttons on the Form.

Click on the Button tool in the toolbox to activate it. Move the pointer over the form and the pointer becomes a crosshair with a small ab in a button. Click-and-drag on the form where you want to place the first button, and release the mouse. Click on the Button tool in the toolbox to activate it again. Move the pointer over the form and the pointer becomes a crosshair with a small ab in a button. Click-and-drag on the form where you want to place the second button , and release the mouse. Click the Save All button. You should save your work at various times during your work session.

12. Set the Name for Label1.

    Programmers assign meaningful names to Control objects so they can easily reference the objects in program code which is added later. Control objects not referenced in code do NOT have be given meaningful names. The default name assigned to them will usually be fine, but in this program we will be giving all control objects meaningful names to practice naming them. The naming convention what will be used for control objects includes the control type as a three-letter prefix.. The name also includes a descriptive word or group of words (lblHello, txtMessage, btnHello, btnExit). The prefix and descriptive words help programmers (you and I) identify what type of object it is while working in code view. Click once on the label1 object on the form to select it. Verify that the properties are displayed in alphabetical order in the Properties Window by clicking on the A-Z Button one time. Scroll to the top of the property list and change (Name) to lblHello.

13. Set the Text, Text Alignment, and placement of lblHello.

    Scroll down and change Text to Hello World. Scroll down and change TextAlign to Middle Center by clicking on the middle rectangle in the drop down list. Center the actual label on the form over the textbox, by clicking and dragging it. It does not have to be exact; just estimate the center.

14. Set the Name and Text Alignment for TextBox1.

    Click on the TextBox1 object on the form to select it. Scroll to the top of the property list and change (Name) to txtMessage. Scroll down a little more and change TextAlign to Center by selecting Center in the drop down list.

15. Set the Name and Properties for Button1 and Button2.

    Click on the Button1 object on the form to select it. Scroll to the top of the property list and change (Name) to btnHello. Scroll down and change Text to Hello. Click on the Button2 object on the form to select it. Change Text to Exit. Scroll to the top of the property list and change (Name) to btnExit.

16. Set the Properties for Form1 and rename the form file.

    Click anywhere on the form, except on a control to select the form. Scroll to the top of the property list and change (Name) to CS1Form. Scroll down and change Text to Hello World by Your Name. Be sure to enter your actual name instead of the words Your Name. The text property of the form determines the text to appear in the title bar of the application. In the Solution Explorer, right-click on the filename Form1.cs and choose Rename from the shortcut menu. Change the file name to CS1Form.cs, making sure to retain the .cs extension. Press the enter key after typing in the new name. After renaming the files and setting the properties for the label, textbox, buttons, and form, the form should look something like this. Click the Save All button . You should save your work at various times during your work session.

17. After building the interface, the required program code must be entered.

The code that will be executed when a button is clicked or some other event takes place must be added. The code is entered using the editor's Code View. While in form view double-click on the Hello button. This will switch the editor to code view and generate some default code that is required to code the click event. The shell for the button click event is added at bottom of some required application code. Between the open and close braces of the default code, type in txtMessage.Text = "Your Name"; Be sure to enter your name instead of the words Your Name, and the ending semi-colon. Commands and property names are case sensitive, which means that names need to be entered in code view as defined in design view. For example, txtMessage with a capital T would cause an error because we defined it with a lowercase t. So make sure all of the spelling is correct.

18. Enter required program code for Exit button.

    Return to Form View by clicking on the document tab labeled CS1Form.cs [Design] In design view double-click on the Exit button. This will switch the editor back to code view and generate some default code that is required to code the click event. Between the open and close braces of the default code, type in this.Close();

19. When you have completed entering or editing a program, it may be executed.

    Before a program can be executed, it must be compiled and linked. The Start Debugging command automatically initiates these procedures. Execute the program by selecting Start Debugging from the Debug menu. If everything was entered correctly, the program should execute as follows: If the compiler finds errors: A dialog box asking if you want to continue is displayed. Click on No to stop the processing. Error messages generated by the compiler will appear in the Task list. Double-click on a error on the Task List to move to that specific error. Verify that you have entered all of the text as instructed. Correct all the errors in the editing window. Recompile by selecting Start Debugging on the Debug menu item again. Keep editing and recompiling until all errors have been corrected.

20. Test the program code entered for the button events.

Click on the Hello button to display your name in the textbox. Click on the Exit button. The program should now terminate, and return to the Visual Studio editor. After a program actually produces output, you begin the logic testing. If it works as expected, you're done. Otherwise, you'll need to review the program's logic and revise the program as needed in the editor window. Then you'll need to save, compile, link and execute it again to test the new logic. Save your work by clicking on the Save All button.

21. Practice working through syntax errors using the Task List.

Return to Code View by clicking on the document tab labeled CS1Form.cs Remove the semi-colon after "Your Name". Select Start Debugging from the Debug menu item. A dialog box reporting that errors have been found should be displayed. Click on No when prompted if you want to continue. An error should be reported on the Task List: ; expected . Double-click on the error message displayed in the Task List. Double-clicking highlights the error message listed in the Task List and moves you to the line were the error was encountered. In C# all statements must end with a semi-colon. The Smart Editor will point out errors as you are entering the program (red squiggly line). If you ignore the error, it will be caught and reported when the program is compiled. Re-enter the semi-colon that was removed at the end of the command. Press the down arrow, and the red squiggly line and the error message in the task list should go away. Select Start Debugging from the Debug menu again and no errors should be reported. Click on the Exit button to terminate the execution.

22. To exit Microsoft Visual Studio:
• Click the Save All button.
• Click on File on the menu bar and select Close Solution.
• Click the Close Program button.
23. Submit online the files CS1Form.cs and CS1Form.Designer.cs when completed, or follow the instructions provided to you by your instructor.
    See Submitting Assignments Online.
24. Very important: Eject your storage device.