WP7 HUB_Introducción a Visual Studio
Upcoming SlideShare
Loading in...5

WP7 HUB_Introducción a Visual Studio



Fase 3.2

Fase 3.2



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • Open Visual StudioSelect File>New>ProjectSelect Console Applicationfor Windows from the templates.Change the name of the project to SimpleProjectShow the solution explorer, and how there are just a few files, including one called Program.csOpen Program.cs and show the source.Press run to run the program.Show that the command window flashes up for a second and then vanishes, as the Main method completes.Return to the presentation.
  • Return to the solution created earlier.Select Project>Add Class…Show the Add New Item dialogueEnsure that the Class item is selected. Explain that this is how we add all kinds of new software components.Give the new class the name Library.csClick AddShow that the Solution Explorer now contains a new source file called Library.csOpen Library.cs by double clicking the entry in the Solution ExplorerShow the new class the source of the Library.cs class.Note that the new class is in the SimpleProject namespace.Build the solution and note that it builds fine. Return to the presentation
  • Return to the solution created earlier.Open the Program.cs source file in the editor.Add the following statement to the Main method in the Program class:Library l = new Library();Build the program and note that it compiles OK. Explain that this is because the library and the program class are in the same namespace.Explain that we are now going to create a separate namespace for the library (which is a sensible thing to do from a design point of view)Open the Library.cs source file in the editor.Change the namespace of the library class from SimpleProject to SimpleLibrary.Press the Build button.You should get two errors.Explain that these are here because the class name Library is now located in the SimpleLibrary namespace and the compiler cannot find Ask the class how to fix this.There are two solutions: We could add a using SimpleLibrary directive to the start of the Program.cs file. We could use fully the qualified name SimpleLibrary.Library when we want to refer to the Library class.Discuss the merits of these. Adding the using is easy to do, but means that if we have name clashes we will have to use fully qualified names.Using the fully qualified name means that it is easy to see where the class came from, but the program source gets larger.
  • Open the SimpleProject solution in the folder Demo 01 ResourcesShow the properties of the resource Bitmap1.bmp Explain that this resource is Content and the file will be copied into the program directory.Show the properties of the resource Bitmap2.bmp Explain that this resource is an Embedded Resource and will be incorporated into the assembly.Open the file Program1.cs and show what the Main method does.Explain that the Library.cs file is now working as a proper library. Open the file and go through the contents:DisplayBitmapis a method that is given a bitmap and displays it on the background of a form. The form is displayed using ShowDialog so that it remains on the screen until cleared.DisplayBitmapFromFile opens a bitmap file which was added to the project as content. Make the point that if the file is not present the load will fail.DisplayBitmapFromResourceopens a resource stream from the assembly and uses this to create a bitmap.Run the program. The first bitmap is from the file. Close the form and display the second bitmap from the content resource.Open a folder in Explorer and navigate to Demo 01 Resources\\SimpleProject\\bin\\Debug in the directory tree for the sample code.This code is interesting because the display makes a Windows Form directly from code. I had to add the System.Windows.Formsand System.Drawing resources and add using directives to the Library.cs program.Show that the directory contains Bitmap1.bmp but not Bitmap2.bmp. Ask the class where Bitmap2.bmp is. Answer: it is in the executable file, which is surprisingly large for such a short program.Navigate to Demo 01 Resources\\SimpleProject and show the two bitmap files there, and that Bitmap2.bmp is quite large, only slightly smaller than the executable….
  • Clever people could work out the size of the resource in the above and then find that this is the same size as the file.
  • Open All Programs>Microsoft Visual Studio 10>Visual Studio ToolsTypeildasm into the command prompt.The ildasm program will start.ClickFile>Open to open the Open menu.Navigate to Demo 01 Resources\\SimpleProject\\bin\\DebugB.Select and open the SimpleProject assembly.Full expand the SimpleLibraryand SimpleProjecthierarchies to show the classes and their methods.Double click the Main in SimpleProject.Programto show the MSIL view of the method, remind everyone that this method calls the DisplayBitmapFromFile and DisplayBitmapFromResource. Close this MSIL view.Open the View menu and ensure Show source lines is checked.Re-open the Main method and show the source code in with the assembly.Double click the M A N I F E S T part of the ildasm window. Scroll down to the bottom of the manifest and show that Bitmap2.bmp is present.Leave ildasm open for later.Return to the presentation.
  • Open the SimpleProject solution in the folder Demo 02 Multiple ProjectsRun the program and show that it does exactly the same as the previous version.Go to the Solution Explorer and note that there are now two projects in the solution.Open up the DisplayLibrary.cs source file from the DisplayLibrary project.Show that the code is very similar (although we have made the methods static so that we don’t have to make an instance of the class)Show the DisplayBitmapFromFile and state that it is exactly the same code.Show the DisplayBitmapFromResource method and offer a prize to anyone who can tell the difference between this and the previous version of the code.Answer: This version of the method is also passed an assembly to read the image from. Offer an even bigger prize to anyone who can explain why this has changed.Answer: This is because the method is now in a different assembly (the library one) which is not where the images are stored.Open the Program.cssource file from the SimpleProjectproject.Show the code that makes a call of the methods in the library.Show the using method that brings in the namespace of the library.Now open the Solution Explorer and show the References section for the SimpleProject project. Show the class that this contains a reference to the DisplayLibrary project.Ask the class if the References section for DisplayLibrary will have a reference to the SimpleProject?Answer: Definitely not. Make the point that if the two projects did refer to each other this would create a circular dependency that would cause Visual Studio to complain.
  • Use Visual Studio to open the AddingMachineproject in 3 Introduction to Visual Studio\\3.2 Demos\\Demo 01 Broken AddingMachineEnsure that the target for the deployment is the Windows Phone 7 EmulatorRun the program.Enter the values of 2 and 2 into the emulator and press equals. The program will show the result 4.Ask the class if this is a valid test.Answer: no. There are some bugs that this test will not show.Enter the values of 3 (top number) and 2 (lower number) into the emulator and press equals.The program will show the result 6.We need to debug the program to find out what is going on.Do not stop the program, there is no need. Return to Visual Studio and use the Solution Explorer to open the file MainPage.xaml.cs. This contains the program content for this program.Put a breakpoint on the statement float result = v1 + v2;Ask the class why the breakpoint has not been hit yet.Answer: because this code only runs when we press the equals button.Press the equals button. The program should hit the breakpoint and stop. The statement should be highlighted.Hold the cursor over the variables in the edit window and show that v1 has the value 3, and so does v2.Ask if this is right. Answer: no. The value in v2 should be 2, as v2 is supposed to hold a value that represents the lower number entry box.Ask what might cause that to be the case.Answer: The code above is faulty. It uses the text in firstNumberTextBox for both internal variables, not just one. Therefore the program will actually display double the top number rather than adding the top and bottom numbers together. Make the point that this all comes back to the quality of the test data, in that our first test values didn’t detect this bug.Press the stop button to stop the program.Change the statement:float v2 = float.Parse(firstNumberTextBox.Text);tofloat v2 = float.Parse(secondNumberTextBox);Clear the breakpoint on the statement float result = v1 + v2;Run the program.Enter the values of 3 (top number) and 2 (lower number) into the emulator and press equals.The program will show the result 5.Explain that the debugging we did was the result of a fault being observed. Ask if there was anything wrong with the method our program was using.Answer: There wasn’t. We had our program right, but we had failed to enter the code correctly. Make the point that this is the kind of thing that debugging is all about. We are fixing problems with the implementation of a solid solution. This is what debugging should be about. We know exactly how to make the program work and we are fixing a fault in the realisation of our solution. If you are debugging for any other reason (perhaps you are not sure how to make the program work and are just changing what it does to see if that fixes the problem) then you are taking an incorrect approach.Immediate WindowThis shows how values can be changed in the program using the Immediate Window. Leave the program running and put a breakpoint at the statement:resultTextBlock.Text = result.ToString();Press the equals button in the emulator. The program should stop at this statementMove to the Immediate WindowType ResultThe program should show the value 5, which was computed as 2+3Type Result = 1000This will change the value of the Result variable. Press the Run button to continue the program.Note that the system now displays the value 1000 in the result field.

WP7 HUB_Introducción a Visual Studio WP7 HUB_Introducción a Visual Studio Presentation Transcript

  • Introduction to Visual Studio
    The tool for Windows phone developers
  • Projects and Solutions
  • Topics
    Creating and running programs
    A simple Visual Studio project
    Assembly files and executable files
    Visual Studio solutions
    Linking assemblies
    The XAP file
  • Program creation
    Programs are written by programmers using a high level language (for example C#)
    They are then compiled into a lower level language which then runs
    Microsoft .NET uses an intermediate language (MSIL) to allow programs to be more portable
    To create a simple program you just need the compiler to create the compiled code
  • .NET Software Development Kit
    The .NET SDK is a free download:
    It contains the .NET runtime and a command line compiler
    The compiler takes the source file in and creates an output file that can be run
    As long as it doesn’t find any errors in the program
  • Using the command prompt
    The compiler provided with Visual Studio can also be used from the command prompt
  • Programs and Visual Studio
    You could write every program you ever want to write using the notepad editor and command prompt compiler
    But this would be hard work
    Visual Studio is an “Integrated Development Environment” for creating programs
    Edit program source
    Build the solution
    Debug the solution
  • Visual Studio
    Visual Studio is a complicated beast to use
    But you don’t have to press all the buttons at the start
  • Projects and Solutions
    The first thing we are going to look at is how Visual Studio organises things for us
    We are going to start with a look at the Visual Studio project
    To do this we are going to create a very simple project which just contains one program file and runs at the command prompt
  • Demo 1: Creating a Simple Project
  • The Empty Program
    using System;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Text;namespaceSimpleProject{classProgram {staticvoid Main(string[] args) { } }}
  • Using multiple source files
    If we want to write a simple console application we now know how to do it
    We could add new methods to the Program class and new classes to the source file
    However, we often want to spread a development over several source files
    This allows us to reuse code and also work independently from each other
  • Demo 2: Adding a new class
  • Projects and source files
    staticvoid Main(string[] args)
    Library l = newLibrary();
    We can now use the Library class in our main program
  • Projects and Namespaces
    The Main method can use the Library class directly because they are both in the same namespace
    A namespace is a way you can logically group code together
    Stops programmers getting name clashes
    If the namespace of the library class is different from the program the compiler will raise an error
  • Demo 3: Creating namespaces
  • Adding resources to a project
    We can add resources to a project
    These are managed by Visual Studio
    We can control what Visual Studio does with the resource when the program is built
    copy the resource to the output directory
    embed the resource in the program file
  • Copying Resources
    The “Build Action” element of the resource properties tells Visual Studio what to do with the content when the program is built
    We have told Visual Studio that the bitmap is content and should be copied into the output directory
  • Using copied resources
    Bitmap b = newBitmap("Bitmap1.bmp");
    Since the resource is just a file held in the same directory as the program we can load it directly
    This statement loads the bitmap resource into a bitmap called b
    The program can then display it
  • Embedding Resources
    If you want to guarantee that a resource can be found you can embed it in the program file
    It then becomes part of the executable program
    To do this you change the resource properties
  • Using embedded resources
    assembly = Assembly.GetExecutingAssembly();
    imageStream =
    Bitmap b = newBitmap(imageStream);
    To load the bitmap we now have to get a stream from the assembly resources
    We can then construct the bitmap from it
  • Demo 4: Using Resources
  • Programs and Assemblies
    We have seen that a “program” file can contain resources such as bitmaps
    This is because in .NET a program file is actually a .NET assembly file
    An assembly file is a container which can hold a collection of items
    We can look inside an assembly using the ildasm tool
  • ildasm
    The Intermediate Language Disassembler is a program supplied with the .NET Framework
    It allows us to look inside assemblies and see what is there
    It can also show you the Microsoft Intermediate Language (MSIL) statements the compiler produced for your program
  • Starting ildasm
    The ildasm program is a Windows application
    It runs from the Visual Studio Command line
    You open the command line from the programs menu:
    All Programs>Microsoft Visual Studio 10>Visual Studio Tools
  • Ildasm in action
    Ildasm lets you navigate the classes in an assembly
    The display on the right is our resource display app
    You can see all the methods in each class
    The “ctor” method is the constructor for the class
  • The Assembly Manifest
    The assembly contains a manifest section that describes what is inside the assembly
    You can see the Bitmap2.bmp resource
  • Demo 5: Using ildasm
  • Creating libraries
    At the moment we just have a single program
    However, we can also create library assemblies that can provided behaviours for other assemblies
    A library assembly is stored in a file with the language extension .dll
    It does not contain a Main method
  • Creating a library
    A library project is created from the library template in Visual Studio
  • Dynamically Loaded Libraries
    The elements in a library are only loaded when they are used
    When a method in a class is called the class will be loaded into memory and the Just In Time compiler converts it into machine code for execution
    This reduces the amount of memory needed by the program and avoids wasting time compiling un-needed code
  • System Libraries and References
    System.Console.WriteLine("Hello World");
    A program will make use of system resources as it runs
    System resources are deployed as dynamically loaded assemblies
    The system assemblies are held centrally by the operating system in the “Global Assembly Cache”
  • System Assembly References
    The references initially assigned to an assembly are determined by the project template
    These are the references that are assigned to a simple project
    You can add others
  • Building an application
    When we build an application Visual Studio creates the assemblies
    Above you can see these in the output folder
    This folder also contains debug information which is used by Visual Studio
    The release version does not include this
  • Visual Studio Solutions
    A Visual Studio solution can contain a number of projects
    You create additional projects just by adding them to the solution
    The projects do not need to be the same type
    You can have multiple executable assemblies in a single solution
  • Creating a new project in a solution
    You can add projects by using right click on the solution in Solution Explorer
  • Projects in Solution Explorer
    This shows a version of SimpleProject that also contains a DisplayLibrary which performs the display
    The two projects are separate and each produce assemblies
    One is a library and the other an executable
  • Linking Projects
    Although the projects are in the same solution they are not linked
    If you want to use the output of one project in another you must add a reference to the project output
  • Multi-project build output
    When we build a multi-project solution all the required assemblies are copied into the output folder
    The SimpleProject assembly will contain a reference to the DisplayLibrary assembly
  • Manifest external references
    You can use ildasm to find the external assemblies that an assembly uses
    This is the manifest for SimpleProject
  • Demo 6: A Multi-Project Solution
  • Windows Phone Solutions
    A Silverlight Windows Phone solution only contains a single project
    This contains all the images used for the icons on the phone
    It also uses all the Windows Phone references
  • Windows Phone Solutions
    An XNA Windows Phone solution contains two projects
    One of these holds all the assets used by the game itself
    We can add other projects for Xbox and Windows PC versions
  • Windows Phone deployment
    Before a Windows Phone program can run it must be transferred into the target
    This can be either a Windows Phone device or the emulator
    All the content the application requires must be transferred as well
    Along with any additional assemblies that make up the entire application code
  • Output Files for an application
    These are the files that make up the AddingMachine application
    These include the images for use for the background, loading screen and icon
  • The XAP File
    The XAP file is a container that holds everything needed to run the application
    It is a Zip archive with a manifest that describes its contents
  • Running the XAP file
    When you press the “run” button in Visual Studio the XAP file is copied to the target device
    The device opens the archive, reads the manifest file and starts the application running
    The XAP file is also the file that is sent to a customer who buys the program in Windows Marketplace
  • Review
    Visual Studio brings together code and assets into a project file that describes an assembly
    An assembly can be either an executable program or a dynamically loaded library
    Projects are brought together into solutions
    If a project wants to use an external library it must explicitly link to this
    The XAP file contains all the resources and code for deployment to the target device
  • Debuggingprograms
  • Topics
    The Windows Phone emulator
    Deploying to the emulator
    Debugging with Visual Studio
    Adding breakpoints
    Single stepping code
    Viewing and modifying variables
    Using the Immediate Window in Visual Studio
    Designing code for debugging
  • The Windows Phone Emulator
    The Windows Phone emulator runs as a program on your Windows PC
    It contains the same software as a “real” phone, but built for the Windows PC platform
    The emulator is supplied with the Windows Phone SDK
  • Deploying to the Emulator
    Visual Studio lets you select the target device for your program when it runs
    The emulator is started the first time you deploy to it
    It will then remain running until you stop it
  • Emulator Features
    The emulator does not contain the complete Windows Phone experience
    It does have the browser and will provide the phone behaviours for things like placing calls and sending SMS messages
    There are also some entries in the Address Book
    It also contains an emulator of the Windows Phone camera
  • Emulator Performance
    The emulator is not a reliable way of predicting how a program will perform on a real device
    The processor in a Windows PC may be more powerful than the one in the phone
    The emulator is for functional testing only
    If you have any concerns about performance you should ensure you run your program on a real device
  • Visual Studio debugging
    Visual Studio provides an exceptional debugging experience
    This experience extends to Windows Phone
    You can do all the debugging actions in Windows Phone that you can do with a Windows PC application
    Single Stepping
    Viewing and modifying variables
  • Breakpoint
    You set a breakpoint at a statement where you want the program to pause
    When the program reaches the breakpoint you get control and can take a look at what the program is doing
    You can set breakpoints even when the program is running
  • Setting a Breakpoint
    To set a breakpoint just double click in the left margin of the statement
    The statement is highlighted to indicate that a breakpoint has been set
  • Hitting a Breakpoint
    The next time the statement is obeyed the program will break
    The statement at the breakpoint is highlighted
  • Viewing Variable Contents
    You can view the contents of a variable in the program by resting the cursor on the variable name in the code
    You can also select variables to watch
  • Single Stepping a program
    You can step through code a line at a time
    The current position is highlighted in yellow
    The statement at the current position has not been executed yet
  • Program Control
    Start or resume the program running
    Execute a single statement and step into a method call
    Execute a single statement and step over method calls
    Exit a method which was stepped into
    Pause the program
    Stop the program
  • Managing Breakpoints
    Visual Studio provides a Breakpoint window you can use to manage all the breakpoints you set in a program
    You can also manipulate the properties of each breakpoint
  • The Immediate Window
    The Immediate Window lets you view and change the values of variables
    You can even call methods inside your program
  • Demo 1: Debugging
  • Design for Debug
    privatevoidcalculateResult(){resultTextBlock.Text = (float.Parse(firstNumberTextBox.Text) + float.Parse(secondNumberTextBox.Text)).ToString();}
    We could create our entire program behaviour in a single statement
    However, this makes it much harder to take a look at the intermediate values and find out why our program is failing
  • Review
    The Windows Phone emulator shows the behaviour of the phone but not performance
    You can set breakpoints in your Windows Phone programs to stop code at particular statements
    You can view the contents of variables in the program
    You can also view and modify program variables using the Immediate Window
  • Exercise1: Buildingthe time trackeruser interface
  • Exercise 2: debugging a brokenprogram