Blog Archives

How I Spent My Summit: The Microsoft MVP Summit 2013

By Don Burnett-Microsoft Expression Blend MVP 2012-2013

mvpboxThe Microsoft MVP Summit is always a fun event with exciting people and fun happenings. Much of the session content is under NDA so I cannot speak to most of it more than to say that I had a great time conversing with some of the brightest and best thought leaders out there. I have been totally blessed to have this experience for five years. I wanted to thank Microsoft for the great time and allowing us to have this experience.

This summit was a great opportunity to network about issues affecting the user community and explore solutions that are possible and very community grounded.  I was very excited by this summit because there were many people interested in working with each other and a sense of new togetherness that there are again exciting times ahead for technology engagement in an open inclusive for all methodology. I saw a lot of change from within especially from Microsoft that has completely changed my over all outlook and direction for the future.

Prolific Technology Releases Ahead

There were a few releases out there this week that show us some exciting things that are ahead. Here are a few of the public announcements this week that were exciting that gives us a glimpse into the direction for the coming year..

Blend is Back

Quoted from the Blend Insider:  http://blendinsider.com/technical/announcing-visual-studio-2012-update-2-ctp-2013-01-30/

“The CTP of Visual Studio 2012 Update 2, as it bring forwards a number of improvements for the XAML developer. The following are some of the key improvements you will find in this release:

WPF, Silverlight and SketchFlow support in Blend

Blend for Visual Studio now support WPF, Silverlight and SketchFlow projects in the same version of Blend (support for these was previously available only as a standalone Preview release of Blend). With this CTP release, Blend now supports developing Windows Store, Windows Phone, WPF and Silverlight apps without needing to have multiple versions of Blend on the same machine. The table below highlights the various platforms that are now supported in Blend for Visual Studio 2012:

image

 

VS 2012 new project

Illustrator and Photoshop import support for Windows Store XAML apps

Blend now allows you to import Adobe Illustrator and Photoshop files into Windows Store XAML apps, using the same workflows that you have been familiar with in WPF, Silverlight and Windows Phone. In addition, we have also enabled copying and pasting graphics from Illustrator directly into your XAML design surface.

Performance and Reliability

We have been actively working on improving the performance and reliability of using the XAML design surfaces in Visual Studio and Blend, as well as the XAML editor in VS. While our work is not yet complete, we have addressed a significant amount of feedback that we received in this release – particularly in areas where the XAML designer would take a long time to load for large projects. The following is a quick sampling of areas where you might see improvements in this release.

 

image

In addition to this, we also fixed approximately 30% of all issues that were submitted by you via Microsoft Connect. We continue to make progress on addressing more issues as fast as we can. “

ASP.NET and Web Tools 2012.2 Update

From John Galloway’s Blog:   http://weblogs.asp.net/jgalloway/archive/2013/02/18/announcing-the-asp-net-and-web-tools-2012-2-release.aspx

From Scott Gu’s Blog:  http://weblogs.asp.net/scottgu/archive/2013/02/18/announcing-release-of-asp-net-and-web-tools-2012-2-update.aspx


Visual Studio Web Tooling Enhancements

Video:  http://media.ch9.ms/ch9/9496/92341e4a-2951-4420-bfb1-a0903d9b9496/ASPNETandWebTools2012dot2.wmv

With today’s release, all of the ASP.NET templates have updated versions of jQuery, jQuery UI, jQuery Validation, Modernizr, Knockout, and other open source NuGet packages. Note: your existing projects will continue to use the older packages unless you update them.

Web site projects now have the same publish experience as web application projects, including new support for publishing to Windows Azure Web Sites. You can selectively publish files, update local to remote files or vice versa, and see the differences between local and remote files.

Visual Studio 2012 Page Inspector enhancements include JavaScript selection mapping and CSS live updates as you type. The JavaScript selection mapping enables Page Inspector to map items that were dynamically added to the page back to the corresponding JavaScript code. For more information, read CSS Auto-Sync and JavaScript Selection Mapping in Page Inspector.

The Visual Studio 2012 editor has several improvements. With today’s update VS now supports syntax highlighting for:

  • CoffeeScript
  • Mustache
  • Handlebars
  • JsRender

The HTML editor provides Intellisense for Knockout bindings. There is even first-class support for editing LESS files, complete with syntax highlighting, Intellisense, and validation. The editor also supports pasting JSON as a .NET class.

Copy any JSON data into the clipboard, use a Paste Special command to paste it into a C# or VB.NET code file, and Visual Studio will automatically generate .NET classes inferred from the JSON.

Mobile Emulator support adds extensibility hooks so that third-party emulators can be installed as a VSIX. The installed emulators will show up in the F5 dropdown, so that developers can preview their websites on a variety of mobile devices. Read more about this feature in Scott Hanselman’s blog entry on the new BrowserStack integration with Visual Studio.

ASP.NET Web API Enhancements

With today’s release, ASP.NET Web API now provides support for OData endpoints that support both ATOM and JSON-light formats. With OData you get support for rich query semantics, paging, $metadata, CRUD operations, and custom actions over any data source. Read more about ASP.NET Web API OData support at http://www.asp.net/web-api/overview/odata-support-in-aspnet-web-api.

New built-in tracing functionality now lets you easily diagnose problems with Web API whether you’re running in Visual Studio or on Windows Azure. Tracing output from Web API is automatically written to the Visual Studio output window, IntelliTrace, and any other trace listener that you would like, including Windows Azure Diagnostics. The output shows the full Web API pipeline for all requests, including any exceptions or errors that occur, what controller and action were selected, model binding, the format that was negotiated, and the response.

Updated Web API projects now contain a link to an automatically generated help page that shows how to call your web API. The help page shows all of your API endpoints, the HTTP verbs they support, parameters, and sample request and response messages. You can customize the help page as you like, including adding documentation and test client functionality.  This makes it really easy to create documentation pages for developers calling your services.

image

ASP.NET SignalR

ASP.NET SignalR is a new library for ASP.NET developers that simplifies the process of adding real-time web functionality to your applications. Real-time web functionality is the ability to have server-side code push content to connected clients instantly as it becomes available.

You may have heard of the HTML5 WebSocket API that enables efficient bidirectional communication between the browser and server. SignalR uses Websockets when it is supported by the browser and the server, and gracefully falls back to other techniques and technologies when it is not (best of all your application code can stay the same regardless of which is being used).

SignalR provides a simple API for creating server-to-client remote procedure calls (RPC) that call JavaScript functions in client browsers from server-side .NET code. SignalR also includes API for connection management (for instance, connect and disconnect events), grouping connections, and authorization.

Included in today’s release is Visual Studio 2012 template support for creating SignalR projects as well as adding SignalR support to existing Web Forms and MVC applications:

image

Read more about SignalR at http://www.asp.net/signalr

ASP.NET Web Forms Enhancements

ASP.NET Friendly URLs enable you to remove the .aspx extension from your Web Forms pages, making your sites’ URLs look cleaner. You can also pass parameters to pages as segments of the URL. For example, instead of ProductDetails.aspx?id=5 you can have ProductsDetails/5. With Friendly URLs you can also easily support mobile devices by creating mobile versions of pages:

  • YourPage.aspx – This is the page that will be rendered by default on a browser.
  • YourPage.Mobile.aspx – This is the version of the page that will be rendered by default on a mobile browser.
  • YourPage.Device.aspx – You can write your own code to map a user-agent string to a specific device name. For example, you could have pages for Windows Phone, iPhone, and Android devices.

ASP.NET MVC Enhancements

A new Facebook Application template makes writing Facebook Canvas applications using ASP.NET MVC really easy. In a few simple steps, you can create a Facebook application that gets data from a logged in user and integrates with their friends. The template includes a new library to take care of all the plumbing involved in building a Facebook app, including authentication, permissions, accessing Facebook data and more. This lets you focus on building the business logic in your app. The Facebook apps you can build with this new template are hosted on the web and displayed inside the Facebook chrome via an iframe.

image

Single Page Applications

A new Single Page Application template for ASP.NET MVC is also now included and allows developers to build interactive client-side web apps using HTML 5, CSS 3, and the popular Knockout and jQuery JavaScript libraries – all on on top of ASP.NET Web API.

The default template creates a “todo” list application that demonstrates common practices for building a JavaScript HTML5 application that uses a RESTful server API. You can read more at http://www.asp.net/single-page-application.

If you don’t want to use the new Knockout template there are 4 new community-created templates. These templates were built using the improved Custom MVC Template support:

  • BreezeJS template that uses BreezeJS and Knockout for data binding and templating
  • Ember template uses the latest version of Ember and Handlebars
  • DurandalJS template is built using the new MVVM library DurandalJS as well as Knockout
  • Hot Towel uses BreezeJS, DurandalJS, Knockout, require.js and Bootstrap

You’ll see even more templates in the months ahead.

Windows Azure Authentication Enhancements

A new pre-release of Windows Azure Authentication is also now available for MVC, Web Pages, and Web Forms. This feature enables your application to authenticate Office 365 users from your organization, corporate accounts synced from your on-premise Active Directory, or users created in your own custom Windows Azure Active Directory domain. For more information, see the Windows Azure Authentication tutorial. “

What does all of this bring to the Microsoft Web Platform ?

All of this integration and new functionality is a total productivity bombshell for designers, developers and anyone looking for streamlined development solutions. Did I mention that the ASP.NET Web Platform has went open source under the ONE ASP.NET banner ? It’s an exciting time for their platform as it moves forward with real-time updating via SignalR, Facebook at the Template level, and things like Classes from a JSON data paste..

Towards a more connected world and an internet of things..  Go! Go! Gadgeteer..

Let’s Build Something..

GoGoGadgeteer

Does anyone remember Microsoft’s SPOT watches A.K.A.
Smart Personal Object Technology) ?

Well that was how Microsoft’s .NET Micro Framework and that platform came to life, and is now exploding in the do-it yourself electronics sector is exploding.. From Robotics, to Weather, to do-it yourself medical monitoring devices, this is the platform to do it with and the best thing about it is the fact that it is Free and Open Source and you probably have it already in devices (including your cable set top box) and don’t even know it..

.NET Micro Framework is an open source platform that expands the power and versatility of .NET to the world of small embedded applications. Desktop programmers can harness their existing .NET knowledge base to bring complex embedded concepts to market on time (and under budget). Embedded Developers can tap into the massive productivity gains that have been seen on the Desktop.

Choosing Hardware

Browse the Product Showcase to see what’s available. Choose from a variety of starter kits or build your own assortment.  At a minimum, you’ll need:

  • A mainboard, such as GHI Electronics Fez Spider or Fez Hydra, or the Sytech NANO
  • A red USB module, to connect to your computer and power the mainboard.

Don’t forget to check out the very cool array of Gadgeteer-compatible Seed Studio modules, including accelerometer, GPS, gyro, moisture sensor and more!

Up to now, embedded devices have been quite effectively created using mostly C and C++, why do we need C#?  Certainly there will remain applications for which C and C++ are the right technology to use but there are two reasons to consider using a managed environment for these devices. 

The first is the efficiency of creating and maintaining devices in managed code.  Desktop developers who have made  the move to managed code are typically converted by the productivity increases that they experience.  With the increase in 32 bit processors and the need to support higher level functionality like a TCP/IP stacks, an environment like NETMF can make development much less expensive and risky.

This is related to the other reason for .NET on small devices.  More and more the devices that we are making are not isolated implementations but parts of much larger solutions that stretch to services and web sites and the cloud.  With .NET, you have a programming model and tool chain that spans that entire solution space.  There is less need to hire different staff and support different tools and operating systems for the various parts of the solutions. 

 

Summit Project Weather Station in the Cloud

Gadget4

At the Summit I put together a weather station, just about the only NON-NDA activity that I can talk about and boy it was fun.. After assembling the hardware and connecting it to USB for power and debugging I was excited to see my first foray into electronics projects was a success..

Gadget1

Gadget2

Gadget3

Introducing Expression Blend for Visual Studio Part 1

image
Introducing Expression Blend for Visual Studio using XAML Part 1

By Don Burnett Expression Blend MVP 2011-2012

Just what is Expression Blend for Visual Studio ? Why is Expression Blend now a Visual Studio product ? Well as most folks familiar with Windows development know, the process is not just about the programmer but it is also about incorporating good design for your user. About six years ago Microsoft Expression Blend was introduced as a what you see is what you get interface design tool and versions of this program have appeared to support not just WPF (Windows Presentation Foundation) tools but also support platforms as Silverlight (for .NET web browser based applications), Phone 7, and Sketchflow prototyping. All of these tools (while containing it’s own code editor) always allowed you to integrate directly with the Visual Studio code IDE (Integrated Development Environment).

Blend Should Be Everywhere!

Late last year when Microsoft decided that it was going to start focusing on putting together a next generation Windows environment that became Windows 8, they decided to promote better synergy between all platform product groups. Blend has always been directly part of that and it made sense that Microsoft could start integrating all of these environments together. Developers find themselves in Blend too.  Out of this (and the fact that Expression Blend and Expression Encoder were tightly part of the same workflow for many users out there and Expression Design had been supplanted by Adobe Photoshop and Adobe Illustrator Importing directly from Blend it made sense that in a revamped environment that Blend would make sense to be part of Visual Studio and a version would come with or be available to every version of Visual Studio available out there including Express Editions. 

When the product groups inside Microsoft were re-organized and integrated Microsoft also began sharing code between the Visual Studio XAML designer group and the Blend Group to make a more consistent environment between Blend and Visual Studio. This has produced some spectacular results. It also meant a version of Blend should make it to all development platforms Microsoft supports.

With the announcement of Windows 8 Microsoft has also integrated HTML 5 designer capabilities optionally instead of XAML, into the mix, for Windows 8 METRO applications (which work much like apps do in Windows Phone 7)

A Tour of The New Blend Beta

image

From the first glance we see that the New Blend is not a METRO app itself, but looks familiar and runs in the “classic desktop” environment for now.. In fact, besides some better more readable icons, it looks very much like the same old Blend we all know and love. However, there are a FEW additions to support HTML 5 and CSS 3.  And yes Virginia there is support for CSS 3 Media Queries before you ask..

The Project Menu

image

The project menu has been re-designed.. In a WinRT/ Metro app you will notice some difference to your “Solution”. There is now a “Common” folder with some new files that MUST be present to make the application work, these include BindableBase.cs, a set of standard XAML styles for the application called “StandardStyles.xaml”, RichText Column support, and LayoutAwarePage.cs. There are also two default converters files present for all metro apps called a BooleanNegation converter and a BooleantoVisibility converter. They help you convert datatypes from the ones you use in code to the types that are required for on-screen manipulation.

Also present in this beta (though creating a sample datasource thus far isn’t present in this beta) is a sample datasource so you do have a template for creating and working with Sample Data. It can be easily modified to support your own data (more on this later).

There is also a package.appxmanifest  file that is required for metro apps. Much like windows phone apps the manifest allows the app to be identified and signed with the appropriate identity information and developer “signatures”.

The package.appxmanifest file

As you can see below the sample app manifest contains identity information, pre-requisites for OS Versioning, a resources section to provide Windows the basic information to hook the application into the METRO environment and a capabilities section much like Windows Phone to identify things like if the application can access the internet or not.

<?xml version=”1.0″ encoding=”utf-8″?>
<Package xmlns=”
http://schemas.microsoft.com/appx/2010/manifest”>

  <Identity Name=”5274dfe2-c8a0-408e-833c-f887ff6a9f1c”
            Publisher=”CN=don”
            Version=”1.0.0.0″ />

  <Properties>
    <DisplayName>GridExampleXAML</DisplayName>
    <PublisherDisplayName>don</PublisherDisplayName>
    <Logo>Assets\StoreLogo.png</Logo>
    <Description>GridExampleXAML</Description>
  </Properties>

  <Prerequisites>
    <OSMinVersion>6.2</OSMinVersion>
    <OSMaxVersionTested>6.2</OSMaxVersionTested>
  </Prerequisites>

  <Resources>
    <Resource Language=”x-generate”/>
  </Resources>

  <Applications>
    <Application Id=”App”
        Executable=”$targetnametoken$.exe”
        EntryPoint=”GridExampleXAML.App”>
        <VisualElements
            DisplayName=”GridExampleXAML”
            Logo=”Assets\Logo.png”
            SmallLogo=”Assets\SmallLogo.png”
            Description=”GridExampleXAML”
            ForegroundText=”light”
            BackgroundColor=”#222222″>
            <DefaultTile ShowName=”allLogos” />
            <SplashScreen Image=”Assets\SplashScreen.png” />
        </VisualElements>
    </Application>
  </Applications>
  <Capabilities>
    <Capability Name=”internetClient” />
  </Capabilities>
</Package>

For more information about setting up these capabilities, check out Microsoft’s information at:

http://msdn.microsoft.com/en-us/library/windows/apps/br211380.aspx

Creating a New Project

Upfront we notice that there are METRO style monochrome icons that are much more readable.. If we go to create a “New Project” we will notice a few new project types and templates.  There is HTML and XAML available for Creating a Windows 8/WinRT  Metro Style Application.

image

 

There are in-built templates for Blank, Grid, Split, Fixed Layout, and Navigation Style Apps.. But more on this a bit later.. Notice the Javascript support above for creating a METRO style app as well..

image

XAML support isn’t forgotten either with it’s own sets of templates.

Grid Applications

image


If you select a “Grid Application”, Blend will provide you with a “Single Page Project that navigates betwee groups of items and has dedicated “Master-Detail” pages to display Items.. Here is a view of the template’s master-detail pages in action.

image

GroupDetailPage.xaml

image

ItemDetailPage.XAML

image

We can deploy this skeleton code either directly to the environment or test it on a Windows Tablet Device Simulator..  We can set this up through a panel in the “Platform”  panel in Blend..

image

You can set the screen size to match a particular on market device’s resolution and DPI when previewing and check your layouts with Horizontal and Vertical functionality (portrait/landscape) as well as scaling.. You can set the deploy target also to your local machine instead of the Emulator/Simulator as shown in the graphic above..

Deployed Locally

image

Deployed to the Simulator

image

Other Blend Features In XAML

The Visual State Manager

In the past if you were not a Silverlight designer you will not notice any default states or defined states in the visual state manager. In a WPF application you had to define all of these yourself..  For METRO apps there are are few already defined states that accommodate different screen modes..

image

These including Landscape (full screen) mode, Filled Mode, Portrait mode, and Snapped mode. I highly recommend you do not delete any of these unless your “METRO” app is only supporting one of these modes which again is HIGHLY NOT recommended..

You can use the state manager to create and handle state management of your own on-screen items, controls and their transitions, by creating more visual state groups for your own elements in XAML

Timeline Animation

You can also create complex animations with the OBJECTS and TIMELINE storyboard option.. In this example I am creating a new storyboard on one of the new METRO “FlipView” controls..

image

image

 

Collections

Collections in XAML for “Metro Apps” have been improved over other versions of XAML you can now create a CollectionView for items that are grouped on to your page.. Setting the source for a Collection of elements to be used on a page is now quite easy in XAML. In our UserControl Resources we just add a CollectionViewSource Element as seen in the XAML  below…

<common:LayoutAwarePage
    x:Name=”pageRoot”
    x:Class=”GridExampleXAML.GroupedItemsPage”
    xmlns=”
http://schemas.microsoft.com/winfx/2006/xaml/presentation”
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
    xmlns:local=”using:GridExampleXAML”
    xmlns:data=”using:GridExampleXAML.Data”
    xmlns:common=”using:GridExampleXAML.Common”
    xmlns:d=”
http://schemas.microsoft.com/expression/blend/2008″
    xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″
    mc:Ignorable=”d”>

    <UserControl.Resources>

        <!– Collection of grouped items displayed by this page –>
       
<CollectionViewSource
            x:Name=”groupedItemsViewSource”
            Source=”{Binding Groups}”
            IsSourceGrouped=”true”
            ItemsPath=”Items”
            d:Source=”{Binding ItemGroups, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}”/>
    </UserControl.Resources>


Blend Goes Native with C++ Project Supportimage

Many programmers were shocked to hear that you could create a Windows Metro App UI now in HTML and JavaScript, but may the most exciting and OVERLOOKED support in Blend for Visual Studio is now the ability to create Windows apps directly in Windows own Native C++ environment.. Before Native Code in XAML was impossible unless you had created an App for Windows Embedded with Visual Studio 8 and the “WEST” Toolkit using Silverlight with C++.. Now because of the merge of product groups Microsoft has now enabled non .NET coding. They have also taken most of the pain away of trying to write a SKELETON “metro” app for those new to Native code development with Windows. Microsoft also has documented these templates well for new users.. Here is a link for you:     http://go.microsoft.com/fwlink/?LinkId=234232

Lets take a look at our ItemDetailPage.xaml’s C plus plus (.CPP) and header (.h) files..

ItemDetailPage.xaml.h

//
// ItemDetailPage.xaml.h
// Declaration of the ItemDetailPage class
//

#pragma once

#include “pch.h”
#include “Common\LayoutAwarePage.h” // Required by generated header
#include “Common\RichTextColumns.h” // Required by generated header
#include “ItemDetailPage.g.h”

#include <collection.h>

namespace Application13
{
    /// <summary>
    /// A page that displays details for a single item within a group while allowing gestures to
    /// flip through other items belonging to the same group.
    /// </summary>
    public ref class ItemDetailPage sealed
    {
    public:
        ItemDetailPage();

    protected:
        virtual void OnNavigatedTo(Windows::UI::Xaml::Navigation::NavigationEventArgs^ e) override;
    };
}

ItemDetailPage.xaml.cpp

//
// ItemDetailPage.xaml.cpp
// Implementation of the ItemDetailPage class
//

#include “pch.h”
#include “ItemDetailPage.xaml.h”
#include “DataModel\SampleDataSource.h”

using namespace Application13;
using namespace Application13::Data;

using namespace Platform;
using namespace Windows::Foundation;
using namespace Windows::Foundation::Collections;
using namespace Windows::Graphics::Display;
using namespace Windows::UI::ViewManagement;
using namespace Windows::UI::Xaml;
using namespace Windows::UI::Xaml::Controls;
using namespace Windows::UI::Xaml::Controls::Primitives;
using namespace Windows::UI::Xaml::Data;
using namespace Windows::UI::Xaml::Input;
using namespace Windows::UI::Xaml::Media;
using namespace Windows::UI::Xaml::Navigation;

// The Item Detail Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234232

ItemDetailPage::ItemDetailPage()
{
    InitializeComponent();
}

/// <summary>
/// Invoked when this page is about to be displayed in a Frame.
/// </summary>
/// <param name=”e”>Event data that describes how this page was reached.  The
/// Parameter property provides the initial item to be displayed.</param>
void ItemDetailPage::OnNavigatedTo(NavigationEventArgs^ e)
{
    auto item = safe_cast<SampleDataItem^>(e->Parameter);
    DefaultViewModel->Insert(“Group”, item->Group);
    DefaultViewModel->Insert(“Items”, item->Group->Items);
    flipView->SelectedItem = item;
}

The code isn’t that much different than .NET code for the skeleton and the new templates take much of the guess workout and make doing a C++ native app even for beginning programmers a doable thing.

One of the first things I noticed about C++ apps is that they are already nicely touch enabled and on the properties panel there are some new options..

image

To Be Continued…

Part two will continue our look at Blend for Visual Studio and what’s missing from Blend Ultimate and will look at Visual Studio 11 Integration and HTML 5/CSS 3 layout based applications for Windows 8..