What s New in Visual Studio for C++ Developers ---

Transcription

1 What s New in Visual Studio for C++ Developers --- Overview In this lab, you will take a quick look at some of what s new in Visual Studio 2013 for C++ developers. This includes the ability to create and better debug Windows 8.1 apps, IDE improvements that make your life as a developer easier and more productive, new REST libraries that make connecting to services much easier, and even some extensions that bring rename refactoring support and the ability to quickly create a project file from a PDB to Visual Studio This will not be a comprehensive look at all new features, but you will be able to follow provided links to learn more when appropriate. Objectives In this hands-on lab, you will learn how to do the following: - Create a Windows Store app using C++ and the new Hub App project template - Debug asynchronous tasks - Utilize IDE improvements - Get started adding push notifications to a Windows Store app - Use the Visual C++ Refactoring extension to rename a function - Use the PbdProject for Visual Studio 2013 extension to create a project file from a PDB file Prerequisites The following are required to complete this hands-on lab: - Windows Microsoft Visual Studio 2013 (with Update 2 RC applied) Note: You must be an Administrator on the machine where you run this lab in order to install a developer license. Notes Estimated time to complete this lab: 30 minutes. Note: You can log into the virtual machine with user name User and password P2ssw0rd. Note: This lab may make references to code and other assets that are needed to complete the exercises. You can find these assets on the desktop in a folder named TechEd Within that folder, you will find additional folders that match the name of the lab you are working on.

2 Exercise 1: What s New in Visual Studio for C++ Developers In this exercise, you will take a look at a number of new and improved features and capabilities provided with Visual Studio Task 1: Create a new Windows Store app using C++ In this task, you will create a new Windows Store app based on the new Hub App (XAML) project template. 1. Open Visual Studio Select File New Project. 3. Under Templates Visual C++ Store Apps Windows Apps category and select the Hub App (Windows) template. Note: The Hub App template is new in Visual Studio Enter HubApp in the Name field and then click the OK button to create the solution.

3 5. If you do not have a developer license for Windows 8.1 installed yet, you will be prompted to agree to the terms and then install a license. Click the I Agree button if you agree with the terms. You may also need to click Yes in the User Account Control dialog box that appears. Note: Developer licenses are needed for each machine that you develop or test on, and are free to obtain and use 6. If you are installing a developer license, you may also need to sign in with your Microsoft account. Go ahead and sign in to finish the developer license installation.

4 7. After installing a developer license using a Microsoft account, you will be given 30 days before it expires. Click the Close button. 8. Double-click on HubPage.xaml to load it with the XAML designer. 9. The Hub App template makes use of the new Hub control provided with Windows 8.1.

5 Additional XAML controls introduced with Windows 8.1 include: - AppBar controls - CommandBar - DatePicker - Flyout - Hyperlink - MenuFlyout - SettingsFlyout - TimePicker Updates to XAML controls include: - FlipView updates - Headers for ComboBox, DatePicker, TimePicker, Slider, Edit controls - Placeholder text 10. In the XAML pane for HubPage.xaml, scroll down and take note that the hub app that you created does indeed use the new Hub control and defines a number of hub sections on the page to get started with. Note: The hub template uses updated Microsoft design principles that help you create great looking apps with improved usability and additional flexibility.

6 11. In the Quick Launch bar at the top-right corner of Visual Studio, search for document outline to locate the Document Outline window, and then click on the shortcut link to open it. 12. In the Document Outline window, right-click on the BottomAppBar node and select Add CommandBar. 13. The CommandBar control, new with Windows 8.1, lets you easily create properly designed app bars by providing automatic layout of commands and automatic resizing of the app bar when the app size changes. 14. Expand the new CommandBar node in the Document Outline window to expose the nodes for PrimaryCommands and SecondaryCommands. 15. Right-click on PrimaryCommands node and select Add AppBarButton. This adds a new button to the app bar in the bottom-right corner of the design surface.

7 16. To see how easy it is to create a great looking app bar, replace the contents of the <CommandBar> control with the following XAML. XAML <AppBarToggleButton Icon="Shuffle" Label="Shuffle" /> <AppBarToggleButton Icon="RepeatAll" Label="Repeat" /> <AppBarSeparator/> <AppBarButton Icon="Back" Label="Back" /> <AppBarButton Icon="Stop" Label="Stop" /> <AppBarButton Icon="Play" Label="Play" /> <AppBarButton Icon="Forward" Label="Forward" /> <CommandBar.SecondaryCommands> <AppBarButton Icon="Like" Label="Like" /> <AppBarButton Icon="Dislike" Label="Dislike" /> </CommandBar.SecondaryCommands>

8 Note: If you need to do more custom work in the app bar beyond using the provided AppBarButton, AppBarToggleButton, and AppBarSeparator, you will need to use an AppBar control instead of the CommandBar. 17. Right-click on the Icon property for the first AppBarToggleButton and then select Go To Definition. This is new in Visual Studio Since the property is defined in metadata, the Object Browser will open to show the definition. 19. Close the Object Browser window. Note: Additional additions and improvements to the XAML code editor include IntelliSense for data binding expressions and resources, code snippets, and better commenting support. To learn more, please see this article from the Visual Studio blog. Note: Additional additions and improvements to the XAML designer include rulers and dynamic guides (to help better position controls) and improved overall performance. To learn more, please see this article from the Visual Studio blog. Task 2: Debugging Asynchronous Tasks In this task, you will learn about improvements made to the Call Stack and Tasks windows that provide additional debugging information when working with asynchronous tasks. 1. Open HubPage.xaml.cpp (right-click somewhere within the designer and select View Code). 2. Add the following code to the beginning of the HubPage constructor. This creates a few asynchronous tasks that you will use to learn about the new asynchronous debugging features found in Visual Studio 2013.

9 Note: The updates to Visual Studio 2013 described in this task depend upon features first introduced in Windows 8.1. Note: Asynchronous tasks in C++ are implemented in the Parallel Patterns Library, which is included by default for Windows Store applications created using the project templates that come with Visual Studio 2013 (ppltasks.h is included in the pch.h file). C++ create_task([] { std::array<task<void>, 3> tasks = { create_task([] { unsigned i = 0; while (i < 100) { i++; } }), create_task([] { unsigned i = 0; while (i < UINT_MAX) { i++; } }), create_task([] { while (true); }) }; }); 3. Set a breakpoint on the line that creates the first worker task, as shown in the screenshot below.

10 Note: Prior to Visual Studio 2013 and Windows 8.1, developers were unable to use the Call Stack window to determine how an application got to the current location when debugging asynchronous code. Since tasks are created on new threads, the Call Stack window did not contain information about the call stack that existed when it was scheduled and, therefore, had no information about the code sequence leading up to its execution. 4. With Visual Studio 2013 and Windows 8.1, developers will now see some additional stack frames added when debugging asynchronous code that aids in understanding how the program reached a location inside an asynchronous function. The additional frame(s) represent the call stack when the task was first created and are added below the task s actual call stack, with an annotated frame named [Async Call]. 5. Press F5 to start debugging the application. Note: You may be prompted to build the project whenever it is out of date. For the remainder of this lab, go ahead and click Yes each time you are prompted, or alternatively select the checkbox labeled Do not show this dialog again and then click Yes. 6. The debugger should break right at the beginning of the lambda function that represents the asynchronous task.

11 7. Take a closer look at the Call Stack window (Debug Windows Call Stack) and note that in addition to the current call stack, you can see the annotated frame [Async Call] and the frame from when the task was first created. Note: If you were to select the stack frame just below the [Async Call], you would be taken to the location in code, but you will not have access to local variables and other stack information. The main benefit to the additional frame is traceability. 8. Another new debugging feature enabled for C++ developers in Visual Studio 2013 is Just My Code. If you are familiar with any.net Framework languages, you should already know that this debugging feature steps over system, framework, and other non-user calls and collapses those calls in the call stack windows. 9. To see what the Call Stack window would look like without the Just My Code feature enabled, rightclick somewhere within the Call Stack window and select the Show External Code option.

12 10. As you can see, this presents more noise than you would typically need to see during a typical debugging session, and certainly makes it more difficult to locate the frames representing your code. 11. Right-click within the Call Stack window and de-select the option to Show External Code. Note: You can enable or disable the global Just My Code setting for Visual Studio (for all projects in all languages) in the Debugging / General node of the Options window. Note: C++ Just My Code is different than.net Framework and JavaScript Just My Code because the stepping behavior is independent of the call stack behavior. For more information, please see this MSDN documentation.

13 12. Now take a look at the Tasks window (Debug Windows Tasks). The Tasks window resembles the Threads window, except that it shows information about task_handle objects instead of each thread. Like threads, tasks represent asynchronous operations that can run concurrently; however, multiple tasks may run on the same thread. Note: The Tasks window was formerly named the Parallel Tasks window when it was first introduced in Visual Studio 2010, and was renamed for Visual Studio In addition to the rename, it has been upgraded to aid Windows developers in understanding the state of all tasks and promises (in the case of JavaScript) running in their application. 13. You can use the Tasks window to help debug hung and excessively long tasks when you work with the concurrency runtime and task groups, parallel algorithms, asynchronous agents, and lightweight tasks. For more information about tasks in native code, please see the MSDN documentation on the Concurrency Runtime. 14. Note the new fields that show current Status, Start Time (relative to the start app), and Duration. You should see that the currently selected task is in the Active state, and perhaps another task is in the Scheduled state (completed tasks are not displayed). 15. If you hover over the Location column it will show a tooltip view of the call stack (which is navigable). 16. If you would also like to see which thread has been assigned to each active task, you can right-click within the Tasks window and select the Columns Thread Assignment option.

14 17. In the case that you have a lot of Tasks in the application, you can also take advantage of grouping. Right-click within the Tasks window and select the Group By Status option.

15 18. Press Shift+F5 to stop debugging the application. 19. Visual Studio 2013 also introduces the Performance and Diagnostics Hub, which brings together new and existing tools into one location, and makes it easier to see what tools are available for the current project based on current language, application type, or platform. Future updates will also be surface here, increasing the discoverability for testers and developers. To take a quick look at the hub, select Debug Performance and Diagnostics. 20. The startup project for the solution is automatically selected as the Analysis Target, and the tools currently available are shown. 21. Select the Show All Tools link to view all of the tools included in the hub. 22. Note that all tools are now shown, although some are currently disabled.

16 23. Some of the tools shown here are not new in Visual Studio 2012 and 2013, but have simply been moved into the hub. These include the Performance Wizard and JavaScript Function Timing tools. New tools since Visual Studio 2012 include CPU Sampling, JavaScript Memory, and HTML UI Responsiveness (some were introduced in product updates). New tools since Visual Studio 2013 include XAML UI Responsiveness and Energy Consumption. Note: If you are interested in learning more about the new performance and diagnostic tools, please take a look at this blog post by Dan Taylor. If you would like to dig in even more, you can also walk through the New Visual Studio 2013 Diagnostic Tools hands-on-lab. Task 3: Quick Look at IDE Improvements In this task, you will take a quick look at some of the miscellaneous improvements made in the IDE. 1. Open the IDE_Demo.sln solution file found in the lab s Source\IDE_Demo folder. 2. Open App.xaml.cpp from the IDE_Demo project. 3. It is now possible for C++ developers to add event handlers using the same += helper that.net developers have enjoyed for years. In the App constructor, add a Resuming event handler just underneath the existing Suspending handler. To do this, type Resuming += and then press the Tab key twice to automatically stub out a handler and wire it up to the event. Note: You need to wait until the project is fully opened and processed by Visual Studio before this will work. Wait until the blue status bar near the bottom of Visual Studio shows Ready.

17 4. You will automatically be taken to the OnResuming stub method, where you would then provide an implementation. For the purposes of this lab, we will leave the stub in place as-is. 5. It is now easier to fix up code formatting for C++ based on your preferences. Take a look at the Helper class (towards the bottom of App.xaml.cpp) and note that it places opening braces on the same line as the type and function definitions. 6. Assuming that the developer or team prefers to have open braces on a new line, you will now use the IDE to specify your formatting preferences and then use that to re-format code on demand. In the Quick Launch window in the top-right corner of Visual Studio, enter new lines and then select the option related to new line formatting for C/C In the Options window, modify the Position of open braces for types, Position of open braces for functions, and Position of open braces for control blocks options to Move to a new line and then click OK. Note: The Options window is now re-sizeable.

18 8. Highlight all lines of the Helper class (towards the bottom of App.xaml.cpp) and then select Edit Advanced Format Selection. 9. Moving lines of code around is now easier to do. Scroll to the top of App.xaml.cpp and place the cursor on the line from the App constructor where the Resuming event handler is setup.

19 10. Move the line up above the Suspending event handler by pressing Alt+Up a few times. 11. In addition to Go To Definition, developers can now take a peek at the definition using the Peek Definition feature, without the need to open a new code editor tab. Right-click on the call to the InitializeComponent function and then select the Peek Definition option (or press Alt+F12).

20 12. Press Escape to close the peek view. 13. One more IDE improvement that makes navigating source code easier is the enhanced scrollbar. To enable the enhanced scroll bar, right-click on the current scrollbar from a code editor window and select Scroll Bar Options. 14. In the Options window for Scroll Bars, select the option to Use map mode for vertical scroll bar and the option to use the Medium source overview, and then click OK.

21 15. The larger scroll bar using map mode provides an at-a-glance view of the code structure, unsaved changes, breakpoints, and so on.

22 Task 4: Adding Push Notifications In this task, you will learn about how easy it is to add push notifications to your Windows Store app in Visual Studio Visual Studio 2013 makes it easier to update your app tiles using mobile services, send push notifications to your Windows Store apps, and access Azure mobile services backend capabilities through integrated VS tools and a new C++ library for Azure mobile services. 1. Open the XamlSpiro.sln solution file found in the lab s Source\XamlSpiro folder. 2. The XamlSpiro Windows Store app is a sample that shows one way to combine the use of DirectX and XAML. In addition, it has integrated the use of Windows Azure Mobile Services and the Windows Push Notification service to add a toast notification on app startup and each time the user makes a selection and submits a string to the service. 3. Although the work involved in setting up a service and wiring up push notifications has already been performed ahead of time, go ahead and select Project Add Push Notification to view the new wizard that is new to Visual Studio The first screen of the Add Push Notification wizard describes the tasks that can be walked through using this new wizard. This wizard makes it much easier to complete some of the tedious legwork and plumbing code that was previously necessary.

23 5. In case it is tough to read the text in the screenshot of the wizard start screen above, it states that the following tasks will be accomplished by completing this wizard: - Your app will be associated with the Windows Store to acquire a push notification channel URI. - Code will be added to your project for sending the push notification channel URI to your Windows Azure Mobile Service. - Your Windows Azure Mobile Service will be modified to enable it to push notifications to your app through the Windows Notification Service. - To enable support for Live Connect sign-on, the redirect domain URI value of your Windows Azure Mobile Service will be transferred to the Live Connect Developer Center. 6. Click the Cancel button. 7. Open the pushtechreadyservicemobileservice.cpp file from the XamlSpiro project (in services\mobile services\pushtechreadyservice folder). This code returns a client instance for the mobile service, which in turn utilizes C++ Azure Mobile SDK that is shipped with Visual Studio Note: A working mobile service URI and application key are already filled in for you.

24 8. Now open the pushtechreadyservicepush.cpp file from the XamlSpiro project. This code is responsible for setting up the push notification channel through which the app receives notifications from the Windows Push Notification Service (WNS). It is also responsible for sending a test string selected by the user to the mobile service, which in turn will send out a push notification to the app with a message that includes the test string. 9. Press F5 to start the application. 10. The application will show a message asking you to load some photos.

25 11. When the application first loads, the push notification channel is setup and within a few seconds you should see a toast notification appear in the top-right corner of the screen that says Welcome! 12. Right-click to open the bottom app bar and then click the Load Images button. 13. Navigate to the lab s Source\XamlSpiro\Pictures folder and then click the Select All link. 14. Click the Open button to use the selected pictures.

26 15. Once the pictures have been opened, you should see one of the selected images shown in the app. All of the selected images are being rendered in a 3D wheel using DirectX. Hold the mouse over the left or right side of the screen to show the controls that can be used for animating the wheel rotation, and then click to spin. 16. After the wheel stop spinning, one of the images should be selected (mostly centered and visible on the screen). Right-click to show the bottom app bar once again, and then click the Accept button. 17. The text that is shown in the selected image will be sent to the mobile service, which in turn will push out a notification to the app.

27 Formatted: Font: Bold 18. Close the app by pressing Alt+F4. To return to the Desktop, either press Win+D or select the Desktop tile on the Start screen. 19. The C++ Azure Mobile SDK provides a set of REST APIs that are used to access and change table data and retrieve authenticated login information. These REST APIs are implemented using the C++ REST SDK, which provides an asynchronous, cross-platform way to send HTTP requests and handle responses, work with JSON, and asynchronously work with streams and stream buffers. The latest version of the C++ REST SDK, which also goes by the codename Casablanca, can be found on CodePlex at casablanca.codeplex.com, or by searching for the latest NuGet package. 20. If you are interested in learning more about creating and working with mobile services, adding push notifications, and authentication for C++ apps, please see this documentation on MSDN. Task 5: Visual C++ Rename Refactoring In this task, you will install the Visual C++ Refactoring extension from the Visual Studio Gallery and then perform a simple rename refactoring operation. 1. Download and install the Visual C++ Refactoring extension from the Visual Studio Gallery. Open Tools->Extensions and Updates and search online for the extension. Note: this extension was created by the Visual C++ IDE team from Microsoft. 2. After successfully installing the extension, you might need to restart Visual Studio oopen the RenameDemo.sln solution file found in the lab s Source\RenameDemo folder Open the MyClass.cpp source file and note that it has a function named DoSomething. This is not a very descriptive name. Right-click on the function name and then select Refactor Rename.

28 4.5. In the C++ Rename dialog box, enter a new name of ShowMessage and then click OK Once you are satisfied with the preview of changes, click Apply.

29 6.7. Select Build Rebuild Solution to make sure that the project builds as expected. Task 6: PdbProject for Visual Studio 2013 In this task, you will install the PdbProject for Visual Studio 2013 extension from the Visual Studio Gallery and then walk through the process of constructing a project file from a.pdb file plus source code. 1. Download and install the PdbProject for Visual Studio 2013 extension from the Visual Studio Gallery. Note: this extension was created by the Visual C++ IDE team from Microsoft and can currently only handle native sources. 2. Again, you might be asked to restart Visual Studio.

30 2.3. Many C++ projects aren t built using Visual Studio and vcxproj files, but rather by using a legacy build tool. In this case, the only way to utilize features such as tag browsing, IntelliSense, and object browsing is to create a new project from existing code and then manually add the source Launch a new instance of Visual Studio Select File Open Project/Solution Navigate to the lab s Source\Legacy folder and change the extension dropdown to search for just PDB Project files (*.pdb). Click the Open button After selecting the PDB file, the PDB Conversion Wizard window will open. This window is used to map source referenced found in the PDB file back to source code.

31 7.8. Notice that Visual Studio SDK paths are automatically resolved, as they match the local machine paths exactly There are also a number of unresolved paths for source files as the machine you are working on does not have the same paths used when the executable was originally built. In this case, we need to do a manual folder mapping to resolve. Select the ellipses button in the Browse column for the original folder that includes the legacy folder at the end of the path In the PDB Generator dialog box, navigate to the lab s Source\Repository folder and click Select Folder With the manual folder mapping in place, the original filenames from the selected PDB file should automatically be resolved by name to their selected location.

32 Click the Finish button In the Save As dialog box, click Save to save the project file The new project should now be opened in Visual Studio Although it will not build as-is, you can now navigate the source and use some of the IDE features like IntelliSense. Open Lecacy.cpp and then hold the mouse over the call to Function().

33 To continue learning about all of the improvements and updates made in 2013 for C++ developers, please see this MSDN article. This article highlights all of the compiler and language improvements, breaking changes to be aware of, library enhancements, C++ application performance improvements, diagnostics enhancements, and more.