Ici vous trouverez les dernières informations sur la famille de produits Visual Studio.
Improving HTML Accessibility with Visual Studio Extensions
As a step on the path of enabling software for all audiences and abilities, we’re happy to share a new Visual Studio extension that leverages Tenon’s HTML accessibility checker service. With this extension, we’ve made it easier for developers to detect and resolve common HTML-based user interface accessibility issues.
Unlike some other web-based accessibility checking services, Tenon’s service has a public API and is designed to be integrated with extensible tools like Visual Studio. We’d love for you to try it out by installing the extension Tenon HTML Accessibility Checker from the Visual Studio Gallery or from within Visual Studio.
(Note: We will publish the source code for the extension on GitHub in about a month so that you can improve upon or evolve the extension to support other accessibility checker services.)
Now, let’s go over this new extension in a little more detail.
Adding the Tenon HTML Accessibility Checker to Visual Studio
To get started, open a supported version of Visual Studio such as VS 2013, 2015 Preview or the free Visual Studio Community. Select the Tools menu, and then the Extensions and Updates option. Search for “accessibility” and select Install the Tenon HTML Accessibility Checker. Restart Visual Studio when prompted.
How to check your static HTML for common accessibility issues
First, register for a free key, which you will need later. (It only takes a few minutes.) Once you have installed the extension and registered for a key, open your project and right-click on any of the following code asset files in your solution (from Solution Explorer): *.htm, *.html, *.cshtml, *.xhtml, *.ascx, *.asp, or *.aspx file.
Select the Check Accessibility with Tenon option from the context menu to evaluate the content of the file. Enter your registration key, select the desired evaluation level, and indicate whether you want to see Errors and Warnings or only Errors in the results. Evaluation levels range from level A, which is the most conservative evaluation, through levels AA and AAA, which are broader evaluations. Choosing to display only Errors will minimize false positives but may omit valid warnings.
Click Validate on the Tenon HTML Accessibility Checker pop-up window to evaluate the static HTML. The results are written to the Error List within Visual Studio, under the Errors and Warnings tabs as appropriate. The description of each issue includes a brief description, and a link to Tenon’s best practices, which include instructions on how to address the issue. You can see what WCAG Success Criterion are tested by Tenon on its What Tenon Tests page.
Check your dynamic HTML too
In addition to HTML within a file, you can send the rendered content of dynamic pages to Tenon for evaluation. From the Solution Explorer, select the Project, then right-click and choose Debug > Start new instance. Your preferred browser will launch with the default page and the Tenon HTML Accessibility Checker pop-up window will be displayed. At this point, evaluate the default page, or navigate to another page and evaluate it by clicking Validate on the Tenon HTML Accessibility Checker pop up window.
Note: You can disable the Tenon HTML Accessibility Checker pop up window by unchecking the Enable Tenon Browser Extension option on the Browser Link drop down menu.
Finally, it is worth noting that static html files cannot be evaluated in the debug mode unless you take some additional steps. You must add code to your web.config file as seen here: Using Browser Link in Visual Studio.
Add the Tenon HTML Accessibility Checker to IE
In addition to checking HTML accessibility using the Tenon service from within Visual Studio, you can use a simple Internet Explorer add-on to check published web pages for common accessibility issues.
To install the add-on, go to http://www.iegallery.com, click on the Add-ons tab, choose the Tenon Accessibility Checker and click Add to Internet Explorer. Once the add-on is installed, you can send a URL to the Tenon service by right-clicking a page and choosing the Check Accessibility with Tenon option.
(Note: this option is only available for http:// pages; https:// is not supported.)
The Internet Explorer add-on does not require a free key, and is a good way to quickly check for common issues.
Help the community improve or re-implement the Visual Studio extension
We envision several new features for the Visual Studio extension, such as code highlights in each source file that is associated with a particular Error or Warning. Similarly, other accessibility checkers could implement this design pattern to make it easier for developers to create accessible apps--by incorporating their checks early in the software development lifecycle (in addition to checking solutions that are in production).
Please review and comment, update, or even re-implement this extension once the source code is published on GitHub.
Special thanks to Karl Groves at Tenon. Karl has been working in accessibility for years and is already known to many people in the accessibility community. Karl continues to be a strong advocate for giving developers tools to make it easier to create accessible software. And he is a Viking. (Really.)
And, thanks for providing feedback by rating this article, sharing the article on social media and/or by adding a comment below.
Connect(“Live”); – Debugging and Cloud Diagnostics Visual Studio Team Q&A
One of the best parts of my job as a Product Manager in the Visual Studio team is working on events for you, our community. Last year in November I worked on one such event called Connect(); where we announced a ton of releases such as Visual Studio 2015 and .NET 2015 preview, Visual Studio Community 2013, .NET open source and much more.
Today I am happy to announce a new series we are starting called Connect(“Live”);. With this new ongoing set of live stream sessions our goal is to give you more opportunities throughout the year to hear from, ask questions to, and engage with the product teams building the developer tools you love such as Visual Studio, .NET, Azure SDK, and many more.
Connect(“Live”); // Debugging & Cloud Diagnostics Visual Studio Team Q&A
The series begins Thursday February 26th, streaming live from 09:30am to 10:30am PDT on Channel9. The session will be hosted by Dan Fernandez and feature members of the Visual Studio debugging and cloud diagnostics product teams. Team members will talk about what’s new for developers in Visual Studio 2015, and Azure SDK 2.5 and take your questions.
Ready to join us this Thursday? Here are the important details:
- Save the Date: You can save the date using an ICS file by clicking here
- Watch it live starting Thursday at 9:30am PDT: The live stream will be available on http://channel9.msdn.com/
- Missed the session? No problem, you’ll have a chance to see the recording that will be posted on the session page here
While I hope you enjoy this first session, we have already started planning the next few Connect(“Live”); topics and will announce them using this blog, in our @visualstudio Twitter feed, and post them on the Connect(“Live”) Channel9 page.
We’d also love to hear what teams or topics you want in future sessions, and we'll do our best to make it happen. To give the feedback, you can post your comments here or contact me directly using Twitter @lyalindotcom
Thank you for reading.
|Dmitry Lyalin, Sr. Product Manager for Visual Studio (@lyalindotcom)
Dmitry has been at Microsoft for over 6 years, working first in Microsoft Consulting and Premier Support out of NYC before joining the Visual Studio Team and moving to Redmond, WA. In his spare time he loves to tinker with code, create apps, and is an avid PC gamer.
Introducing the UI debugging tools for XAML
One of the top requests from developers (reiterated at //BUILD last year) has been tools for inspecting the XAML at runtime. With Visual Studio 2015 CTP6 we’re pleased to introduce the new UI debugging tools for XAML. These tools enable you to inspect the visual tree of your running WPF application as well as the properties on any element in the tree, turning the difficult challenge of picking apart how properties override each other and figuring out winning behavior into a straightforward task that’s done at runtime, when everything is taken into account. Visual Studio integrates these UI debugging tools directly into the debugging experience so they fit seamlessly into the development cycle.
Today’s announcement brings support for WPF; we’ll release support for Windows Store apps in a future update.
Let’s take a closer look.
Meet the Live Visual Tree
You can use the Live Visual Tree to:
- See an “up-to-date” view of the application. As elements are added or removed from the visual tree, the Live Visual Tree updates in real time.
- Jump to the document and line of the definition with either the “Preview Source” command or in a context menu on appropriate elements when the XAML defines elements (as denoted by the source icon after many of the elements above).
- View descendant count, so you can understand complex UI structures and locate those nasty performance issues.
The Live Property Explorer
The Live Property Explorer:
- Shows every property set on the currently selected elements, even property setters that are overridden elsewhere.
- Breaks properties into scopes so you can quickly see if a property is being set by the element itself, a style or elsewhere.
- Enables you to change properties and push those changes to the running application, so you can see the effect immediately.
Selecting elements in the Visual Tree is easy when you know the structure of the app. When you don’t know the minutia of the layout, the Live Visual Tree also provides an in-app element selection tool. When enabled, mouse events are intercepted by the UI debugging tools, allowing direct selection of any element simply by clicking on them.
The In-App selection provides two feedback modes for selecting elements:
- Basic selection mode shows a red dotted outline around the element that is about to be selected when you hover over it. Then, on a click, the Live Visual Tree selects the element, loads its properties into the Live Property Explorer and, if you enabled the Preview Source option, locates and opens the XAML for the selected element.
- Layout adorner selection mode includes additional adorners that illustrate margins and the parent to which the margins are applied.
These tools, as part of Visual Studio 2015 CTP 6, give you an early glimpse into our new XAML debugging experience, but they’re not finished yet. Here’s a few things we’re hoping to add as development continues:
- Support for Windows Store apps.
- Source code persistence -- allowing users to change properties at debug time and push those changes into the source code.
Additionally, there are some known limitations in the CTP, including the lack of CLR properties and support for editing collections, but the team is working on including these in the RTM update. If you’re interested in the specifics about how these tools work, as well as the ways we’ve extended WPF to support the UI Debugging tools, you may find this article on Expanding WPF for UI Debugging interesting.
We’d love for folks to try these tools out. Tell us what you like, what you don’t like and what you think is missing. The product team is still eager to hear your feedback and we’re grateful for any comments that folks are willing to share. If you have feedback on the UI debugging tools, you can comment here, post suggestions on UserVoice, and report bugs on the Connect site. From here, it’s all up to you.
Visual Studio 2015 CTP 6 and Team Foundation Server 2015 CTP Released
Keeping with the quick cadence of releases, I’m happy to share Visual Studio 2015 CTP 6. Additionally, we are also announcing the release of Team Foundation Server 2015 CTP. You can download both these releases from the download center or from MSDN subscriber downloads. Don’t want to wait? Save time and try out this latest CTP on one of the public VMs hosted on Azure. Before you head off to try out the bits, I’d like to go over a few highlights from both of these releases, and to remind you to also check out Brian Harry’s blog post, Team Foundation Server 2015 CTP Release Notes, and Visual Studio 2015 CTP 6 Release Notes for more details.
Visual Studio 2015 CTP 6
First things first: after we shipped CTP 5 we saw a notable increase in “frowns” sent through Send-a-Smile as well as feedback from some of our top customers, and we quickly saw that CTP 5 had a handful of issues that made it pretty painful to use including an issue with PDB file locking that affected a lot of customers.
It’s true that for each CTP, we want to quickly share more new features so you can tell us what works and what doesn’t. Finding the right balance among all the factors (ship velocity, quality, and team capacity, to name a few) is energizing, to put it mildly. That said, we expect our CTPs to meet a “reasonable use” quality bar and, based on your feedback, CTP 5 didn’t achieve that bar.
I want to thank everyone who tried CTP 5 and gave us feedback. With CTP 6 we have addressed almost all the issues you’ve reported, and you should see a more stable release.
We’ve also added a lot of capabilities to the release (detailed in the Visual Studio 2015 CTP6 release notes), and I’ll call out a few of the more interesting ones here.
Single Sign in. One of the pieces of customer feedback we get consistently is that developers – particularly developers who use multiple Microsoft services such as Azure, the Windows Store, MSDN Subscriptions, and Visual Studio Online together – have to sign in many times in several places. We continue to work at addressing the problem. With CTP 6, we’ve taken the next step. Until now, each service you used while developing your application required a separate sign in, be it to a cloud backend data store, source code enlistment, or online store publishing dashboard. Each of these services not only required a separate sign in but also managed their individual sign in user state separately. With CTP 6, once you sign into the first cloud service, we will automatically sign you into the next one, which can significantly reduce the number of authentication prompts you will see.
ASP.NET Improvements. We continue to refine ASP.NET 5. With this release you’ll see performance improvements in the ASP.NET runtime as well as discoverability improvements to the New Web Project dialog, updates to IntelliSense for JSON configuration files, and updates to make package restore for bower, NPM, and NuGet simpler. To learn more about these updates check out this detailed blog post on ASP.NET updates.
Xamarin Integration Improvements. As of this CTP, Xamarin developers using Visual Studio can now reference, build, and debug C++ library projects from their Android projects directly by leveraging the Android targeting experience introduced by Visual C++. Check out the VC++ blog post for an upcoming post soon that will share details on how to develop Xamarin Android Native apps. Additionally, you can now directly install Xamarin during the Visual Studio installation process by selecting it from the list of 3rd party dependencies.
Visual Studio Tools for Apache Cordova. Over the last few releases, we listened to your feedback and broadened the number of devices you can debug to: Android 4.4, Android 4.3 and earlier with jsHybugger, iOS 6, 7, and 8, and Windows Store 8.1. With CTP6, we are broadening our debugging support further. You can now debug your Apache Cordova apps that target Windows Phone 8.1:
You can set breakpoints, inspect variables, use the console, and perform other debugging tasks on your Windows Phone 8.1 emulator or attached device. Learn more about the Visual Studio Tools for Apache Cordova.
Architecture Tools. In previous releases you told us that Code Maps were not reactive enough, were sometimes complex to use, and did not always produce a useful result. So, with this release, we've improved the tool responsiveness, simplified the Architecture menu, and reduced clutter through node filtering (which complements the link filtering we provided in VS 2015 Preview). We also made the initial maps of a solution far more useful by grouping nodes based on the solution folders, and by styling project/assembly nodes to indicate their type. Check out this blog post to learn about all the improvements to Code Maps in this CTP.
NuGet. NuGet receives a major face-lift in this release to help make it clearer how to search for the packages you need. This interface improvement also makes it easier to update and manage the versions of the packages you already have installed. We've also implemented a new v3 API with blazing fast search capabilities. Make sure you grab the NuGet extension from the ‘Extensions and Updates’ menu and check out the updates! Check out blog.nuget.org for more details.
XAML UI Debugging. Visual Studio has had a DOM inspector for HTML apps for several releases, and it’s a powerful tool for quickly finding and tweaking UI – it’s also one many customers asked us to create for XAML. Enter the Live Visual Tree and Live Property Explorer, which represent the first of the new UI Debugging tools for XAML, and are now available to try with your WPF projects. These tools let you inspect the visual tree of your application during a debug session. They also let you review and modify DependencyProperty objects on the elements in the tree. Read the post on new UI Debugging Tools for XAML to learn more.
These UI Debugging tools appear when you start debugging a WPF desktop application. Right now, this feature doesn't currently support Windows Store apps, but we are working hard to bring this to you soon.
.NET Debugging. CTP 6 improves .NET debugging in several ways. To start, we've made debugging .NET applications significantly faster when calling third party libraries that throw a large number of internal exceptions. For more details see Performance Improvement When Debugging .NET Code With Visual Studio 2015. We've also improved Edit & Continue, with support for new edit operations including adding and modifying post-2005 language features (such as iterators and async/await) and adding nested and top-level types (such as delegates, enums, and interfaces). To learn more check out the C# blog post on Edit and Continue and VB blog post on Edit and Continue.
The Make Object ID command from previous versions of Visual Studio is back in Visual Studio 2015 CTP6. If you hadn't heard, Object IDs let you tag an object instance and track it over the remainder of your debugging session even if you switch to a different context where there are no variables in scope referring to that instance. This lets you observe how a particular object's state may change over its lifetime. Now you can use the familiar $id syntax used with other debugger variables to refer back to those objects in the Watch and Immediate windows and conditional breakpoints.
Lastly, we've released the new Exception Settings tool window which provides an easy way to configure the debugger’s exception settings. You can access this new window from the Debug menu under Debug -> Windows -> Exception Settings. Read more about how to use the Exception Settings Tool Window.
Visual Studio Emulator for Android. We've updated with the Visual Studio Emulator for Android with new features, including Lollipop (API Level 21) debug targets. We've added OpenGL ES support, multi-touch input simulation, and advanced camera simulation. Read this post on the new features in Visual Studio Emulator for Android to learn more.
Team Foundation Server 2015 CTP
We also shipped TFS 2015 CTP today, but some of the changes may not be readily apparent because they’re about licensing and which capabilities are available in which TFS edition. In particular, we've made more features available with a “Basic” five- or fewer-member license, including web-based text execution, agile portfolio management, work item chart authoring, and team rooms.
Of course, we've also included capabilities you can see. We've improved merge performance especially for large repos, for example. And you can also now easily view the history of changes to a file by right clicking on any folder in Solution Explorer. We added JSON REST APIs to enable you to easily create and query work items, queue a build, or access source code from any device, platform, or technology stack, including Windows, Android, iOS, Node.js. And you can also use service hooks to get an instant notification for events in Team Foundation Server, directly in your app or service.
As always, please give us your feedback, suggestions, thoughts, and ideas on our UserVoice site, through the in-product Send-a-Smile and Send-a-Frown UI, or file a bug through the Visual Studio Connect site.
Using AngularJS in Visual Studio 2013
Today, Visual Studio provides IntelliSense suggestions for APIs directly off of the angular object.
For example, here’s the IntelliSense experience without the extension installed:
The icons in this screenshot mean that the editor is simply listing out any identifiers (variables, parameters, object members, etc.) in the file; I should be seeing APIs provided by the $routeProvider such as a .when() function.
After the extension is installed, I see a much better list:
APIs provided by the $routeProvider object are now shown.
Adding AngularJS to a project
If you’re interested in trying it with the upcoming Visual Studio 2015 release, you can also use this extension, starting with the Visual Studio 2015 CTP 5 release.
Next, I add AngularJS to my project in Visual Studio using the NuGet package manager (you could also download AngularJS directly from http://www.angularjs.org and place it into your own project alongside your other script files).
Editing with AngularJS
Let’s quickly walk through some examples of how the AngularJS extension improves the editing experience when used with AngularJS, I’ll show you how it provides time saving features like IntelliSense and code navigation.
Configuring your Angular application
Then, I reference it in my main HTML file:
After defining my project module, I want to configure the URLs of my application. To do this, I’ll use Angular’s routing feature, which lets me bind behavior with custom URLs for my application. Below, I’m starting to setup the routes for my app, using the built-in Angular ngRoute module and the $routeProvider API. I’m about to use the .when() function to define a URL; this function lets me configure the HTML I want to display and any app logic that I want to run when the URL is accessed:
Here’s what the final code looks like after I’ve configured a “/list” URL, which will load a listController when it’s accessed. The controller will be responsible for setting up the data/model and behavior that will be attached to a list.html page for this URL.
Defining a Controller
Now, I’ll define a controller named listController. Here you’ll see I’m using a $scope parameter, which is a special parameter defined by Angular that is accessible from my HTML view - any members I assign to the $scope will be available in my HTML.
IntelliSense shows me the JSDoc comments for the $scope APIs as I use them, this saves me a trip to the web browser to review API documentation.
Adding a Service
For the next step, I want to pass data from the controller to my HTML page. I could code all of my data into the listController, but I prefer to break up my application into smaller pieces that can be re-used and tested in isolation from other features. A common way to do this with Angular is to define a service, which I can then call from my controller. You can think of a service as a single-instance object that may be reused across other parts of your app.
Here I define a projects service that I can call in my controller to retrieve project data. To keep things simple while I’m getting started, I’m returning a hard-coded list of objects.
Now I’ll add a reference to the projects service in my listController; I can see IntelliSense is provided for the projects service when I call it, and the allProjects member is shown:
Building a directive
Now, I want to create a custom HTML component to list the names of projects from my projects service. I do this by building a directive: a self-contained component combining visual layout and behavior that I can attach to HTML DOM elements in my application.
Below, I’m defining a directive named “listProjects”. I’ve included an HTML template that will be used to generate the HTML for the directive. Next, I’ll write the controller for this directive. The AngularJS IntelliSense extension is providing suggestions as I work with the $elements parameter, which lets me access my directive’s DOM element.
After defining this directive, I use it in my HTML to render the list of projects.
Navigating Angular code
Finally, the Go To Definition feature allows me to navigate to the definitions for the APIs I’m using in my source by right-clicking on a function or variable defined in my application and selecting Go To Definition. In this example, choosing Go To Definition will take me to the allProjects member I defined on my projects service.
Using AngularJS with TypeScript
Looking ahead to AngularJS 2.0
The AngularJS extension supports AngularJS 1.2 and greater (at the time of writing, the extension has been tested through AngularJS 1.3). Looking ahead, AngularJS 2.0 will take a new approach to development from that used in AngularJS 1.x, and it’s likely that new AngularJS 2.0 coding patterns will require new Visual Studio support. We’re working with the Angular team to ensure a great Visual Studio experience for AngularJS 2.0.
Help the community improve the AngularJS extension
If you have any feedback about the extension or would like to assist the effort, please join us on the AngularJS IntelliSense project site.