click tracking
Katrien's MSDN Blog - Site Home - MSDN Blogs
Posts
  • Katrien's MSDN Blog

    My favorite tools to optimize Visual Studio for webdev

    • 3 Comments

    How do we make Visual Studio play nicer with HTML5, CSS3, JavaScript, jQuery, in other words more of the front-end webdev stuff?

    Visual Studio 2010, be it the Ultimate, (free) Web Developer Express or other version, is not fully optimized for front-end web development out of the box. But don’t let the default VS2010 install fool you. There is a combination of community effort and tooling enhancements by Microsoft that make VS2010 play nicer to webdevs.

    In this post you can find a collection of my favorite extensions and tools to make Visual Studio handy for web devs. I’m focusing on the tools I have used and installed myself, knowing that there are others out there. Do you have any additions for the list? Please let me know so I can add them here!

    Most of the extensions I discuss can be installed using the Extension Manager (Tools > Extension Manager). You can also download extensions through the Visual Studio Gallery.

    Web Standards Update for Visual Studio

    Web Standards Update for Microsoft Visual Studio 2010 SP1

    Download Web Standards Update for Microsoft Visual Studio 2010 SP1

    This is the first tool I would recommend for introducing HTML5, CSS3 and JavaScript enhancements to the editor. Released by the Visual Web Developer team at Microsoft it includes HTML5 schema support, CSS3 and improved JavaScript IntelliSense.
    Although Visual Studio Service Pack 1 did bring some HTML5 schema support I advise installing this extension for improved support.

    More info at Mads Kristensen’s blog: Web Standards Update - behind the scenes

    JScript Editor Extensions

    Download JScript Editor Extensions

    You might have seen my previous quick tip on these extensions. JScript Editor Extensions are a welcome addition to the IDE.
    If you are used to having full fledged IDE optimized for C# development, things like word highlighting, outlining and brace matching are a given. Not so with JavaScript, until you install this extension.

    image
    (outlining functions example in some jQuery code)

    After installing JScript Editor Extensions you’ll get the option to Enable/Disable four different extensions: Brace Matching, JScript Intellisense <Para>, Outlining and Word Highlighter. Knowing that sometimes installing a specific extension conflicts with one of these it’s a nice option.

    image

    Make sure you check out the Channel9 video for a live demo of the extensions.

    Mindscape Web Workbench

    Download the Mindscape Web Workbench.

    Scott Hanselman has a great (as always) post on this new “Mindscape Web Workbench” extension for Visual Studio, adding support for CoffeeScript, SAAS and LESS.
    Too many new extensions for you? Don’t worry if you haven’t been doing front-end web dev lately it’s normal they sound crazy.

    • Coffeescript: CoffeeScript is a little language that compiles into JavaScript.
    • SAAS: Sass is an extension of CSS3, adding variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS. With the Visual Studio extension conversion into standard CSS is automated.
    • LESS: LESS is similar to SASS in that it also adds support for variables, mixins and more but instead of having a server side or plugin translate the code into standard CSS it runs via a JavaScript library on the client.

    JSLint.VS2010

    Download JSLint.VS2010

    This is an extension of JSLint for Visual Studio, as I’m sure you are aware of by reading the tool’s title. You probably can’t escape doing web front-end without using any JavaScript. But what about applying patterns and validating code? JSLint, a code quality tool is a solution for this.

    It will hurt your feelings, that’s the promise of JSLint. No, seriously that’s their tagline but it’s more of a warning on how JSLint will hurt your feelings at the beginning but in the end make you a much better JavaScript developer. Writing JavaScript without applying patterns and best practices leaves your code unmaintainable.
    JSLint will apply a set of rules to validate your code and report issues. It helps you enforce usage of patterns and overall code structure.

    2011-09-12_0525

    2011-09-12_0548
    (//note there is a lot wrong with this little script, although it does run it’s just for demo)

    You can also try the online version at http://jslint.com

    jQuery IntelliSense

    Getting IntelliSense support for jQuery in your ASP.NET MVC 3 projects is already be happening. The default template contains the -.vsdoc.js files which have been commented for Visual Studio IntelliSense. If you want to add this support to another project just install the NuGet package “jQuery.vsdoc”, however the vsdoc files are now included in the default jQuery package so you should get them by default (jQuery version 1.6 and up).

    2011-09-12_0601

    2011-09-12_0550

    Image Optimizer (by Mads Kristensen)

    Download Image Optimizer

    A nice little extension integrated into Vial Studio, which uses SmushIt and PunyPNG for optimizing the images. Run it on a folder of images in Visual Studio to have all the images optimized. Gains of 15% to 40% are not unusual with some files I tried out.

    image

    Other tools, not tested

    • JSEnhancements: Similar to JSscript Editor Extensions, it provides outlining and matching braces highlighting for JavaScript and CSS editor.
    • CSS 3 intellisense schema
    • Chirpy: VS Add In For Handling Js, Css, and DotLess Files
    • ReSharper 6, already used by lots of developers also has support for JavaScript and CSS (note this one is not free)

    ASP.NET MVC & HTML5 templates

    As I was working on this post a tweet by @maartenballiauw got my attention:

    image

    So I did just that in the Visual Studio (NuGet) Package Manager console for an ASP.NET MVC3 project. This package adds support to MVC EditorTemplates for new HTML5 input types such as E-mail, Tel and URL. Technically not a tool for my list but interesting to mention here anyway.
    2011-09-12_0627

    So that’s it for my current list. Don’t forget, add your favorite tools to the list by leaving a comment.

  • Katrien's MSDN Blog

    Live Framework – creating a Silverlight Mesh-enabled web application in 8 steps

    • 14 Comments

    After seeing what the new Mesh-enabled web applications can do during the last PDC in Los Angeles I couldn’t wait getting my hands on a token and creating something.

    First of all, if you have not yet been using Live Mesh signup for an account here: http://www.mesh.com/. This is the public beta so you can start using the client application and Live Desktop to synchronize and share data.

    In this post however, I’m talking about the developer Live Framework CTP which at this stage in on limited access. Read on… 

    In order to create your first Mesh-enabled project you need to install the Live Framework Tools CTP. You will be able to download this once you get your token.

    Silverlight Mesh-enabled web application

    1. I started by creating a new project of type “Silverlight Mesh-enabled Web Application”.

    image

    2. The Visual Studio template automatically generates two projects for this type of application:

    • A Mesh host project, this is the actual Mesh application (with a .meshproj extension for Visual Studio)
    • A Silverlight project, which will generate the XAP file to be included in the Mesh app.

     image

    At this moment the development experience is still not a fluent task: in order to debug your project you need to package it into a zip file and upload it to the cloud (manually). Once that is done the XAP file can be uploaded seamlessly by Visual Studio in order to debug remotely. Let’s review the steps to do this.

    Publishing the project in order to debug and test

    3. Developer portal, create the new project, choose “Mesh-enabled Web application”:

    image

    4. Once the project is created, keep the project details page open, you will need to get back to this page to upload the package and get the Application Self-Link further on.

    5. Back in Visual Studio, build your project. Building the project will generate a .zip file with the name of your project. The zip file contains the files from the host project (the .meshproj in Visual Studio) as well as the .xap file of the Silverlight project).
    Check the ProjectDir > Bin > Debug directory to retrieve the .zip file that was generated upon build. An easy way to get to the file system from within Visual Studio is by right-clicking on the project and choosing “Open Folder in Windows Explorer”.

    image

    6. Go back to the Developer portal and retrieve the project detail page. Click the Upload Package to upload your .zip file. This will deploy the Mesh-enabled web application and make it available on Live Mesh as well.

    image

    Once the package is uploaded you can click “Test Now” to try out your application on the Live Mesh site. Let’s not do that just yet.

    7. Uploading .xap file through Visual Studio.

    Back in Visual Studio, Press F5 to debug, this will launch the “Mesh publishing tool” from Visual Studio. Note: I’ve no idea if this is really called the Mesh Publishing tool, that’s just the name I’m giving to it. This popup will request you to upload the .zip file to the portal (which we have done in step 6). Copy and paste the “Application Self-Link” which can be found on the project’s properties page.

    image

    The XAP file will be published to the Mesh and once all these steps are completed your application will be launched in the browser. You may be required to login again.

    image

    8. Test your app and debug. The application will start launching the in on the Live Desktop, I set a breakpoint on the constructor and yes, my breakpoint is hit over the Mesh!

    image

    Breakpoint in Visual Studio:

    image

    The process of uploading the latest .xap to the Mesh happens at every time you debug the application. This is a good thing because it means you online need to go through the different steps once to upload the initial project. Visual Studio then does the work of uploading and deploying the new .xap file to the server every time you debug.

    image

    Note that throughout this post we are addressing the Developer CTP at developer.mesh-ctp.com, not Live Mesh in beta that is currently public.

    image

    This post does not yet use any Live Framework APIs or access any resources. That’s for another post where I will be saving some information to the Mesh and getting the offline and online experience.

    How can you get started?

    At his moment the CTP is limited, attendees of the PDC are one of the first to get tokens. But… I do have two tokens that I will give to the first two people replying on this post. Be quick and you might be able to start your own Live Fx & Mesh developments.

    And if you want to get ideas on all that’s possible with the Live Framework, there are several sessions worth watching from PDC: http://www.microsoftpdc.com/

    Start meshifying!

  • Katrien's MSDN Blog

    3’ on Blend 3 - #10: XML Sample Data and DataGrid

    • 1 Comments

    In this video we look at how to use an XML file as the basis for Sample Data in Expression Blend 3. We look at where the data gets imported, adapting it and binding it to a DataGrid control.

    Slide11

    3 minutes on Blend 3: #10 XML ample Data and DataGrid

     

    The 3 minutes on Blend 3 series:

  • Katrien's MSDN Blog

    3’ on Blend 3 - #7: SketchFlow Composition Screens and Navigation

    • 0 Comments

    In this video we look at how to add navigation from within a composition screen. We also take a look at the SketchFlow player and see how navigation from the composition screens affects the player’s navigation.

    #7 – SketchFlow Composition Screens, adding Navigation

    video - sketchflow navigation

    3 minutes on Blend 3: #7 SketchFlow Composition Screens & Navigation

    The 3 minutes on Blend 3 series:

  • Katrien's MSDN Blog

    Silverlight Drag & Drop Manager published on CodePlex

    • 1 Comments

    Great to see the community publishing new stuff for the community.

    Kevin Dockx, the Sivlerlight guru as they call him over at RealDolmen, has recently published the source code, documentation and even an online working sample of drag & drop controls for Silverlight 2.

    > Silverlight Drag Drop Manager on Codeplex

    Project Description (Codeplex)
    Silverlight Drag Drop Manager allows you to easily implement drag and drop behaviour in your Silverlight projects by providing a DragSource & DropTarget control, which act as a content container and can contain any SL user control. Highly configurable.

    Great work Kevin!

  • Katrien's MSDN Blog

    3’ on Blend 3 - #8: SketchFlow States

    • 0 Comments

    In this video we look at how to use States in a SketchFlow project in order to add interactivity to screens. By using screens you can give the prototype more real looking interaction. For example, having a state to show or hide a block of information upon a click event. You will also see that States are taken into account by the SketchFlow player giving reviewers direct links to the available states on a screen without any work from your side.

    #8 – SketchFlow States

    Video - SketchFlow States

    3 minutes on Blend 3: #8 SketchFlow States

    Recommended resources

    The 3 minutes on Blend 3 series:

  • Katrien's MSDN Blog

    Microsoft Expression 4 launched, what’s new and resources

    • 4 Comments

    Expression 4 was officially launched today at Internet Week New York. In this post you’ll find the main links to downloads, getting started and a concise overview of new features.

    Trials & downloads

    All the different versions of Expression Studio are available for download with 60-day trials. Download here.

    Upgrading from Expression 3
    If you have already installed Expression 3 on your machine and have a full license you will automatically have a registered version of Expression 4 when you install it on the same machine. More details can be found on the Expression site.

    Side note on Windows Phone 7 tools compatibility: don’t install Expression Blend 4 if you’re currently doing WP7 development. The WP7 tools are not compatible with the RTM version, do expect an update soon.

    What’s new

    imageExpression Blend 4

    Expression Blend adds support for Silverlight 4 and WPF 4 projects, still allowing you to continue developing your Silverlight 3 and WPF 3.5SP1 projects. Next to this multi-targeting support there are quite some new features of which I like to highlight the following:

    • New behaviors like CallMethodAction, DataStateBehavior, InvokeCommandAction, etc and Conditional behaviors. Conditional behaviors allow you to set conditions on any Action you want to execute. Checkout Silverlight TV 30 where Adam Kinney shows you how to use the new behaviors.
    • PathListbox, a feature that allows you to draw a path on the artboard and bind listbox elements to it.
    • New shapes like arrows, stars, callouts and more.
    • New pixel shader effects.
    • Lots more, check out Christian Schormann’s post and session from MIX.

    Expression Blend SketchFlow 4

    SketchFlow gets its second iteration with this release. There are quite a few noteworthy new features, of which the integration with SharePoint is the most important. This feature allows for publishing the SketchFlow project directly to a SharePoint library. The stakeholders can then use this to browse the prototype, add feedback and also save the feedback directly to SharePoint. Expression Blend Feedback also connects to the SharePoint library to load the comments.

    Some other new features in SketchFlow:

    • Feedback into work items in Team Foundation Server
    • General fixes like player artboad (scrolling)
    • New shapes
    • Default styles for controls when working with SketchFlow projects are Sketch Styles.

    Expression Web 4 – SuperPreview

    SuperPreview, part of Expression Web 4 allows you to debug your pages in multiple browsers on the same machine that you use for development. SuperPreview is a visual debugging tool that helps you visualize and understand how pages display on multiple browsers, including IE6 – 8, Macintosh Safari, and Windows Firefox. You can even overlay your page on top of your Photoshop comp to verify your coding. IE6 rendering engine is included in SuperPreview so you don’t to install it on your machine. In order to get IE7, 8, and FF, each of these must be installed on the machine.
    A new addition in this version is support for rendering on Macintosh Safari, which is supported via a remote (cloud) service technology preview. This is a beta service and you will need to sign-up for this.

    Expression Encoder

    Expression Encoder 4 Pro has support for a brand new H.264 encoding engine from Main Concept, which is more performant.
    Live Smooth Streaming: next to encoding for on-demand Smooth Streaming which was available in Expression Encode 3, the new version also has support for live stream encoding for from a range of video card and USB/Firewire devices.

    Expression Encoder Screen Capture
    The hidden feature I love in Expression Encoder is the Screen Capturing tool. Very easy to use and great for doing screencasts. New in this feature are zooming functions, capability to work with multiple clips in the new capture manager and registration of the codec on the host machine. In addition, free distribution of the codec allows for raw screen captures to be viewed outside of the application.

    Resources

    • .toolbox – This site does not yet have content that is specific to Expression 4 but it’s a great resource for learning how to take the most out of Expression Blend in several steps. Sign-up, create your avatar and go to school.
      [Update - .toolbox does have new Expression Blend 4 content, thanks Adam Kinney for pointing this out]
    • Project Rosetta – this learning resource has tutorials on how to go from Flash to Silverlight. Very useful if you are used to working on Flash and need to know how you can achieve the same things in Silverlight and Expression Blend.
    • Expression Blend OnRamp training – Learn Expression Blend in 5 days
  • Katrien's MSDN Blog

    IE8 Beta – Pointers for making your website compatible with IE8 standards rendering mode

    • 1 Comments

     

    IE8 Beta 1 has been out for several months now and we are closing in on the release of IE8 Beta 2, which has been announced for August 2008 by the IE team. Now is a good time to get started on ensuring site compatibility with this new release.

    Because IE8 will default to standards mode for displaying HTML pages, it is possible your site will not display as it is currently doing in IE7. How can you prevent problems and what do you need to do? Let’s review the different solutions going from an absolute minimum effort to major changes in the HTML.

    This post is intended to give you a quick overview of the solutions and pointers to more detailed white papers (find these at the bottom of the post).

    Major differences between IE7 and IE8 on rendering of HTML pages

    Why is compatibility so important? IE8 will offer 3 different ways of rendering content:

    1. “Quirks mode” (IE5) remains the same, and compatible with current content.
    2. “Quirk mode” (IE7) remains the same as IE7, and compatible with current content.
    3. “Standards mode” (IE8), this is the default mode in which pages are displayed

    As IE8 is planned to have full support for the CSS 2.1 standard and implement some CSS3 functionalities, the “Standards” mode is now the default rendering mode. But as many HTML developers have worked around some differences in HTML rendering in IE7 and before, this means your site may no longer display as desired in IE8.

    Solutions for site compatibility in IE8

    First of all you should test your site against the latest IE8 beta, to make sure there are any problems present. If you already have a site that follows standards closely and used conditional statement for example, you may not have to do any changes at all.

    However, in case your site is optimized for IE7, the solutions below explain what you may do to make sure the site still displays nicely in IE8.

    Solution 1: Add HTTP header in web server (effort: low)

    This is a low effort solution if you have administrative rights to the web server(s) on which your site is running. Add an HTTP header on the server:

    X-UA-Compatible: IE=EmulateIE7

    Solution 2: Add a meta tag per page (effort: medium)

    Add a HTTP-EQUIV meta tag after the <head> tag on the page:

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

    Solution 3: Adapting the HTML code to be standards compliant (effort: low to high depending on implementation)

    If you are making your website HTML code compliant with CSS 2.1 you might need to have changes done in the HTML. This effort however depends mostly on which workarounds or non-standards features have been implemented.

    You can also add conditional statements to keep serving non-standards CSS or content to previous browser versions.

    If you want to explicitly set that the site is IE8 standards compliant you can use the following tag:

    <meta http-equiv="X-UA-Compatible" content="IE=8" />

    Or you can choose to add a standards mode DOCTYPE.

    Why worry now?

    Beta 2, coming out in August 2008 will most probably be downloaded by a lot more end (power) users than the previous beta 1. You certainly don’t want your visitors to experience any hick-ups while visiting your site through IE8, so that’s why now is a very good time to start working on a solution.

    Extra resources and information

    Hans Le Roy’s blog in Dutch: if you are looking for information on IE8 in Dutch this is a very good resource. Hans is a Belgian MVP on IE and has posted over 30 posts on IE8 alone.

    IE Team Blog on MSDN
    This is the major resource for all news around IE8. The team posts very frequently on supported features.

    IE8 whitepapers
    This page on MSDN code gallery contains really good white papers on the different elements that are new in IE8. Going from solutions like the one discussed above to managing Add-Ons, performance improvements, CSS 2.1 compliance and much more. A fantastic reference.

    CSS Compatbility and Internet Explorer
    This document provides tables with CSS compliance indication starting from browser version IE 5.0 to IE8. A good reference to keep close by. This allows you to easily check if a certain feature of CSS 2.1 or CSS3 is supported, and in which version.
    image

     

    Technorati Tags: ,,,
  • Katrien's MSDN Blog

    IE8 Accelerator for MSDN Social Bookmarks

    • 7 Comments

    I’ve been using IE8 Beta 2 for a few weeks now and I’m getting quite used to do actions on text or links by using Accelerators. If you haven’t seen these, accelerators allow you to easily call a service on a link or a piece of selected text. For example, a standard Accelerator is “Map with Live Maps” which shows a map when selecting an address on a page.

    One service I use quite regularly is social bookmarking, lately I’ve been using the new MSDN Social Bookmarks one for work related bookmarks. Having IE8 I wanted to replace the bookmarklet from the Favorites toolbar by an accelerator.

    BTW, the folks at MSDN just did a nice redesign with all the social info gathered including your community contributions, forums threads etc. Nice job: http://social.msdn.microsoft.com

    Now back to the accelerator. For the description that goes with the bookmark I simply select an interesting sentence on a page and use the accelerator (if text is selected).

    Creating an Accelerator is very straightforward and easy, you just need to follow the OpenService specification, which is really just an XML file following a predefined schema. For the MSDN Bookmarks I enabled this on text selection, and on a right-click on a page:

    image

    Click to install the “Bookmark on MSDN Accelerator if you are using the IE8 Beta 2.
    And if you want to take a look at the few lines of XML needed to build it just download it directly from here.

    And if you’re looking for more Accelerators to share your bookmarks check out the gallery.

    Resources for creating your own Accelerator:

  • Katrien's MSDN Blog

    Silverlight 5 features, firestarter keynote and sessions resources

    • 0 Comments

    Last week folks from all around the world attended the online or in-person keynote during the Silverlight Firestarter event in Redmond. Scott Guthrie did the opening keynote in which Silverlight 5 was shown to the public for the first time. The rest of the Firestarter event were in-depth sessions about the current version of Silverlight.

    > You can read the overview of announced Silverlight 5 features in Scott Guthrie’s blog post: Announcing Silverlight 5

    In this post we’ll go through the main topics of the keynote and sessions, and highlight some of the shared information with resources that you can use today.
    Silverlight 5 Beta has been announced for H1 2011. As mentioned by Scott, there were more than 20.000 votes up on Silverlight feature request site (Uservoice). About 70% of those votes are addressed in the new features in Silverlight 5 beta.

    The keynote and Silverlight 5 highlights

    > Watch the full keynote on demand: Silverlight Firestarter Keynote with Scott Guthrie

    Media

    Something that is probably not shown enough is the support by IIS Media Services 4.0 released in November, to deliver high quality video to a series of clients and devices.
    During the keynote, Chris Knowlton showed how to use Microsoft Expression Encoder Pro and IIS Media Services to setup a live HD Smooth Streaming site serving up on Silverlight desktop, Windows Phone 7 and iPhone/iPad.
    Please note this is not Silverlight running on iOS but rather automated transmuxing of the video on the IIS server to be compatible with iOS. Chris Knowlton’s demo is fully on today’s technology of Silverlight 4, IIS Media Services and Microsoft Expression Encoder Pro. Chris showed only one unreleased version which is Expression Encoder Pro SP1.
    Scott Guthrie mentioned IIS Smooth Streaming capabilities are coming to Windows Azure in the future as well.

    image

    Note: Scott Hanselman has a great post up on his blog that runs through all the steps: Streaming Live or On-Demand Video from IIS7 to iOS Devices (iPhone/iPad) and Silverlight
    Start using today: IIS Media Services 4.0 and Microsoft Expression Encoder Pro.

    > Download IIS Media Services 4.0

    Announced Silverlight 5 media features include:

    • TrickPlay support with audio pitch correction
    • Hardware decode
    • Remote control support

    Business applications

    John Papa showed a few of his top features for Silverlight 5 business applications and also how to use coded UI testing, now available with Visual Studio 2010 Feature Pack 2 (available for Ultimate and Premium editions of Visual Studio).
    Tim Heuer has a video up on his blog on how to use the Test Manager and coded UI tests.

    > Download Visual Studio 2010 Feature Pack 2
    > Download WCF RIA Services Toolkit December 2010 (by the way, did you know the new Windows Azure Management Portal is built using Silverlight and WCF RIA Services?)

    Announced Silverlight 5 business app features include:

    • Model View ViewModel (MVVM) and Databinding enhancements like binding in style setters, ancestor RelativeSource, debugging support in XAML (yes!!), markup extensions, much more…
    • PostScript vector printing
    • WS-Trust support
    • Out of browser: child windows within app, P/Invoke (on Windows)
    • Enhanced in-browser trusted app: with group policy allow access to My Documents, COM and more
    • Microsoft Visual Studio profiling

    3D and Graphics

    To present some of the new low level 3D features announced for Silverlight 5, Luigi Rosso, Chief Technical Officer and and Guido Rosso, Chief Creative Officer from Archetype were invited on stage.
    You’ll have to watch the video to watch Scott Guthrie in 3D. The red polo shirt plays a role, not saying more than that…

    image

    Announced Silverlight 5 graphics features include:

    • GPU accelerated 3D API
    • Hardware acceleration with Internet Explorer 9

    The keynote was closed by a very interesting demo of how the SQL Server team is building new products on top of Silverlight.

    In-depth sessions

    In-depth sessions are about what you can use today (Silverlight 4), although some of the speakers throw in a few notes when something new in the future will easy a certain task.
    All sessions are available on Channel9 for on-demand viewing or download in different formats including MP3.

    Data Binding Strategies with Silverlight and WP7 by Jesse Liberty

    Did not yet have the chance to watch this session but according to Twitterserve it was pretty good to say the least.

    Building Compelling Apps with WCF using REST and LINQ by Yavor Georgiev

    Building Feature Rich Business Apps Today with RIA Services by Dan Wahlin

    Download the announced update: WCF RIA Services Toolkit December 2010

    MVVM: Why and How? Tips and Patterns using MVVM and Service Patterns with Silverlight and WP7 by John Papa

    John uses the Book Club example to go through the session material. He explain the most important aspects of implementing MVVM pattern and how to integrate with WCF RIA Services and others.

    Shout outs to some of the open source MVVM libraries available out there:

    Tips and Tricks for a Great Installation Experience by Tim Heuer

    Tim Heuer has written about the Silverlight installation subject earlier on his blog. 

    Tune Your Application: Profiling and Performance Tips by Mike Cook & Jossef Goldberg

    Performance Tips for Silverlight Phone 7 by Jaime Rodriguez

    You can find Jaime’s source code, presentation and a performance cheat-sheet (very useful!) in his blog post: http://blogs.msdn.com/b/jaimer/archive/2010/12/02/windows-phone-application-performance-at-silverlight-firestarter.aspx

    New Silverlight Labs

    A new set of labs was also released during the event. You can follow online or download the content for viewing offline.
    These labs are focused on Silverlight Line of Business (LOB) applications with practical, real-world samples.

    View Firestarter labs

  • Katrien's MSDN Blog

    Windows Azure – installing SDK, tools and creating a first cloud project

    • 2 Comments

    The Azure Services Platform was announced October of last year at the Professional Developers Conference (PDC). Part of the Azure Services Platform is hosting on the cloud with Windows Azure.

    If you want to test Windows Azure yourself you can already do a lot locally on your development machine. Deploying to the cloud however will require a token for which you can enroll for at https://www.microsoft.com/azure/register.mspx. When you receive the token via e-mail you will need to claim it at https://lx.azure.microsoft.com/Cloud/Billing/ResourceTokens.aspx.

    In this post you can follow the needed steps to locally install, create and test a Windows Azure hosted service. To finish I also deploy my test app to the cloud.

    Before going into the installation and sample application, let’s quickly recap what Windows Azure represents in the overall Azure Services Platform.

    image

    Windows Azure is the hosting and storage part of the platform. Windows Azure can be used to host services and manage this hosting on the cloud. This post does not address other elements of the Azure Services Platform like the .NET Services, Live Services or other.

    Here are more resources to learn more about Windows Azure and the Azure Services Platform:

    Windows Azure SDK and pre-requisites

    For developing locally you need the pre-requisites: Windows Vista or Windows Server 2008, Visual Studio 2008, .NET 3.5 SP1, IIS7, Microsoft SQL Server Express 2005 or 2008. 
    Note, you can use the Microsoft Web Platform Installer to get all the prerequisites.

    The downloads used in this post:

    Installing the SDK and tools

    1. Install Windows Azure SDK.

    image

    The SDK installs documentation, the Development Fabric and Development Storage, so that you can locally develop and test your apps. There are also some sample applications which are really worth checking out to get some insights into this new technology.

    2. Install Windows Azure Tools for Microsoft Visual Studio

    image

    The version 1.0 refers to the CTP of Windows Azure not Visual Studio version :-) This strikes me as funny actually it applies to Visual Studio 2008 of course.

    Creating a Cloud Web Role Service and debugging using Visual Studio

    New project templates are available in Visual Studio after installation of the Tools. For a Hosted Windows Azure project you have the possibility to create a Web Cloud Service or a Worker Cloud Service. A single project may contain one of each but no more.

    For now I’m going to create a Web Cloud Service which is an ASP.NET Forms application. You can also choose to use ASP.NET MVC application.

    image

    My web application will be hosted on the cloud but I can still develop pretty much as I’m used to in ASP.NET. The solution contains two projects: the ASP.NET application as you would expect along with the Cloud Service project. This project contains service configuration and service definition files.

    image 

    I’m creating a simple default.aspx page and running and then deploying to the cloud. First running locally, when I press F5 to debug the local environment starts up:

    • Development Fabric
    • Developmnet Storage (which I’m not using at the moment)

    image

    Test locally with the Development Fabric: I can see here that my Web Role is started:

    image

    Now that my website is running locally I can go and publish this to the cloud.

    Deploying the project on the cloud

    Creating the project on Azure Services Developer Portal

    Two types of projects can be configured at the portal for Windows Azure at https://lx.azure.microsoft.com/Cloud/Provisioning/Templates.aspx.

    • Storage Account
    • Hosted services

    Note: This portal also allows for the configuration and management of your Live Framework projects.

    image

    Because I want to host a Cloud Service I choose to create a new Hosted Services project. With the developer token you get just one of these projects.
    I choose to create a new project:

    image

    This creates my empty Hosted Services project. From here I need to grab the Application ID (not visible on the screenshot, it’s lower on the page). The Application ID will be needed in order to package and publish the application from Visual Studio.

    image

    Deploying to the cloud

    Back in Visual Studio open the properties window for the Web Cloud service project. There is a tab called Portal in which you need to paste the previously copied Application ID. This will make sure the correct web page on the Azure portal is opened.

    image

    Publish the application to the portal (and the cloud!)

    image

    This will package the application, choosing the Publish action opens up the folder in which the application has been packaged and opens up the browser with the application properties page.

    image

    You can locate your package file (.cspkg) and your configuration settings file (.cscfg)

    image

    The application is now uploaded and initialized.

    image

    Once the app is initialized you can test it on a staging environment by clicking the Web Site URL. Use the Configure button to change settings and for example increase the number of instances of your application to be running. At the moment the interface is well, non-existent, and you need to edit the XML file directly. You may expect this interface to become more user-friendly in the future.

    When the application is ready to be published to production just press the switch icon to move from staging to production.

    Hope this was an interesting walkthrough. If you want to read more and see some nice examples of using the Storage capabilities I recommend reading Maarten Balliauw’s 5 posts on Windows Azure.

  • Katrien's MSDN Blog

    Slides and sample code from my .NET RIA Services webcast

    • 0 Comments

    A few weeks back we had an MSDN Live Meeting around .NET RIA Services. During the webcast I was using a sample database with some restaurant (dummy) data and accessing that data.

    Update: 

    Sample code

    The sample is using a Silverlight Navigation Application, which itself can be used without the .NET RIA Services. There is a demo database, sample code for retrieving data into a datagrid, editing data through a DataForm, validation, using a new theme, etc.

    You can download the sample code and slides from the links below.

    Pre-requisites

    If you want to play around with this sample and get going with .NET RIA Services you will need the following on your machine:

    Session Q&A

    Here’s also some answers to questions that came after the session.

    French version of Silverlight 3 Tools for Visual Studio 2008
    The French version that allows to install on a French Visual Studio version is available since the end of July 2009. Download link here.
    At this stage there is not yet a French version of the .NET RIA services, and I don’t currently have a date for when this will be available.

    Accessing styles
    During the webcast I used one of the new skins available for Silverlight Navigation applications. You can find these in the Expression Gallery, see a sample of each in Tim Heuer’s blog post. After downloading the theme of your preference, copy the Styles.xaml file and save it to the /Assets folder of your Silverlight project. In my case I left the default Styles.xaml file and renamed the downloaded theme to Pink.xaml. Reference this resource file in the App.xaml file and you’ve got your theme change.

    Silverlight 3 features
    There were also some general questions around Silverlight 3 and out-of-browser applications. I recommend checking out the Silverlight 3 Overview page for a listing of features matrix on Silverlight 1, 2 and 3.

    Recommended resources

    And don’t miss REMIX Belgium 2009 where the one and only Brad Abrams himself will be giving a session on .NET RIA Services. Other speakers joining are Adam Kinney, August de los Reyes and Arturo Toledo. Register in time!

  • Katrien's MSDN Blog

    PDC 2008 Day 1 Keynote – the Windows Azure Platform

    • 1 Comments

    I arrived in Los Angeles on Saturday, with a warm and beatiful day welcoming me in California. It’s been quite a few years since I’ve been to L.A., being the first US city I visited it represents the typical America. But enough about this, let’s get to the PDC stuff.

    We have just had the keynote with Ray Ozzie announcing the Windows Azure, with interventions by Amitabh Srivastava, Bob Muglia and David Thompson.

    Windows Azure Platform announcement during keynote

    clip_image001Azure Platform

    Azure is the name for Microsoft’s Software + Services platform. With this announcement today we are talking about a platform that includes the following:

    Windows Azure: operating system in the cloud providing services for hosting, management, scalable storage with support for simple blobs, tables, and queues, as well as a management infrastructure for provisioning and geo-distribution of cloud-based services, and a development platform for the Azure Services layer. Today already Live Mesh and Live Meeting are already using Windows Azure.

    Azure Services Platform, developer services with support for familiar tools, languages, frameworks, such as ASP.NET, C#, LINQ, WCF, WF:

    • SQL Services for relational data storage, querying and reporting services
    • .NET Services for cloud-based access control, federated directory, service-connectivity, workflow, and messaging services
    • Live Services for application extension of the Windows Live platform (Windows Live ID, Live Mesh, Virtual Earth, etc)
    • SharePoint Services which provide extensibility for SharePoint Server (future)
    • Dynamics CRM Services which provide extensibility for Dynamics CRM (future)

    On top of that there is the finished services layer, with Windows Live, Office Live, SharePoint Online and Microsoft Dynamics CRM Online. All of these hosted in the cloud and commercially available today. We saw a few demos of these services with CRM and SharePoint online.

    Now ready for my first session “A Lap Around Cloud Services Part 1”, and tomorrow we’ll have yet more announcements!

    Watch tomorrow’s keynote that will be streamed live at www.microsoftpdc.com.

     

    Update: you can download the Windows Azure SDK from www.azure.com, play with it and test locally on your own machine. Access to the online hosted version is currently limited to PDC attendees but will probably be extended later this year.

  • Windows Azure SDK
  • Windows Azure Tools for Microsoft Visual Studio
  • Microsoft .NET Services SDK
  • Microsoft SQL Data Services SDK
  •  

  • Katrien's MSDN Blog

    3’ on Blend 3 - #9: Using Sample Data

    • 0 Comments

    In this video we take a look at a new feature in Expression Blend called Sample data. We create a new sample data source and edit some of the properties, next we create a ListBox with a binding to the collection of data. You will see that Blend also allows you to create a details view and binds to a ListBox selected item automatically.
    The fact that Blend does some of this stuff automatically for might be good but in case you need more control that’s also possible, check out the recommended link below for some more in-depth information.

    Sample data video

    3 minutes on Blend 3: #9 Sample Data (master-detail)

    Recommended resources

    The 3 minutes on Blend 3 series:

  • Katrien's MSDN Blog

    3’ on Blend 3 - #2: SketchFlow Introduction

    • 0 Comments

    SketchFlow is a new feature that is part of Expression Blend 3. I’ve had the chance to demo this new feature to quite some people over the last months, and this seems to make sense to quite an array of different profiles: information architects, designers, developers, project managers.

    Because just 3 minutes on SketchFlow is really too little to show SketchFlow I’m splitting this feature up into several videos.

    #2 – SketchFlow Introduction

    In this first video on SketchFlow we introduce the creation of a Silverlight application prototype. SketchFlow projects can be either Silverlight 3 or WPF (Windows Presentation Foundation), from there on you’ll be creating the flow of the application, giving the customer the chance to react on a more interactive form of prototype than you would generally deliver in the form of documents or images.

    A SkechtFlow screen is a Silverlight or WPF user control/window, so that means you can add interactivity to it, working some parts out and leaving others in a very “sketchy” way. Check out the below video to see how the application flow can be created using SketchFlow.

    Video
    3 minutes on Expression Blend 3 – SketchFlow Introduction

    Recommended resources

    The 3 minutes on Blend 3 series:

  • Page 2 of 27 (399 items) 12345»