Developing a Content-Rich Media Application using Silverlight

Silverlight is a platform independent, cross browser and enterprise ready technology. Its capabilities such as Client-side processing, client-side local caching and asynchronous communication make Silverlight a good technology for multimedia and content rich websites. XAML based UI allows developers to build loosely coupled, customizable and modular applications. This web application called "My Nature Album" was developed to demonstrate desktop-like user experience and better media experience of Silverlight.

 
Features

1. High performing rich user interface for viewing images with image preview capabilities.

2. Ability to play and stop image presentation/show.

3. Easy navigation between categorized collections of images.

4. Full Screen view functionality.

5. Animation based on user actions.

 
Technologies/Tools used

Silverlight 5, .NET 4.0, LINQ to XML, Visual Studio 2010, Expression Blend 4.0 and MVVM Pattern.

 

•     For better user experience, please view it in full-screen mode by clicking the icon on upper right corner of the application.

•     You can play and stop presentation by toggling play/pause buttons.  

http://prasantha.com/projects/mynaturealbum/

Detecting HTML5 Feature Support of your browser

Modernizr is an open-source JavaScript library that allows developers to detect whether the user's browser support a given HTML5/CSS3 feature or not.

With this knowledge, the developer can gracefully fallback to the native behavior of the browser in case a given HTML5 or CSS3 feature is not able to handle by the user's browser.

The following website demonstrates using Modernizr JavaScript Library to detect HTML5/CSS3 feature support and can be used to test how well your browser support HTML5/CSS3.
http://prasantha.com/projects/html5featuresupport/

To learn more about Modernizr, please refer to my previous post or Modernizr website.

HTML5 - Details

The aim of the element is to provide native support for a feature common on the Web—a collapsible box that has a title, and more info or functionality hidden away.

The HTML5 details element can be used to expand the relevant addional information and hide the content when needed. <details> element is accompanied with optional <summary> element. <details> is the wrapper for all the content we want to show and hide, and <summary> contains the summary and title of the section.

Currently, this feature only available on Chrome.

<details>

<summary>My Summary</summary>

<UL>
<LI>Content 1</LI>
<LI>Content 2</LI>
<LI>Content 3</LI>
</UL>

</details>

WCF 4.0 new feature - Default Endpoints

WCF 3.x services required at least one endpoint or you'd get an exception.
WCF 4.0 comes with default endpoints. Windows Communication Foundation (WCF) looks at the configured mappings and decides on which binding to use for a particular based address.
If you have defined at least one endpoint, you won't get default endpoints.

WCF defines a default protocol mapping between transport protocol schemes (e.g., http, net.tcp, net.pipe, etc) and the built-in WCF bindings. The default protocol mapping is found in the .NET 4 machine.config.comments file and it looks like this:

<protocolMapping>
    <add scheme="http" binding="basicHttpBinding"/>
    <add scheme="net.tcp" binding="netTcpBinding"/>
    <add scheme="net.pipe" binding="netNamedPipeBinding"/>
    <add scheme="net.msmq" binding="netMsmqBinding"/>
</protocolMapping>

Code Review Workflow with TFS 2012 and VS 2012

Visual Studio 2012 and Team Foundation Server 2012 introduce the feature called code review workflow and allow developers to request and perform code reviews using Team Explorer. A code review task also behaves as a work item and can be assigned to one or more developers as a review request(s).

The reviewer can accept or decline the review, and respond to any messages or queries associated with the code review, add annotations and more.

Once the code reviewer finished reviewing the code, he can assign it back to the requester. Visual Studio 2012 displays the code by using a “Diff” format, showing the original code and the changes made by the developer requesting the review. This feature enables the reviewer to quickly understand the scope of the changes and work more efficiently.

HTML5 Feature Support Detection

None of the browsers currently fully supports HTML5. HTML5 browser support timeline for any given browser is also not clear. So, it is vital for HTML5 developers to know whether a specific HTML5 feature is supported on a given client’s browser or not.

Modernizr is a JavaScript library that can be leveraged by developers to detect whether a given HTML5 feature is supported on the client’s browser or not. So, Modernizr can be very useful in developing HTML5 applications.

These are few ways HTML5 developers can use Modernizr in their HTML5 development efforts.

1. Modernizr.[HTML5 feature name] returns true or false for a given HTML5 feature and developers can write program logics accordingly.

<!doctype html>

  <html>

   <head>

     <title>Modernizr Basics</title>

     <script src="scripts/modernizr-2.0.6.min.js"></script>

       <script>
          if (Modernizr.localstorage) {
              // Use Local Storage
          } else {
             // Do not use Local Storage
          }
         </script>

     </head>
  <body>
  </body>
</html>

2. Modernizr.load() allows developers to load different scripts based on whether a given HTML5 feature is supported in the client’s browser or not.

Modernizr.load({
     test: Modernizr.geolocation,
     yep : 'Script1.js',
     nope: 'Script2.js'
});

test: The Modernizr property you want to detect.
yep: The location of the script you want to load if the test succeeds. Use an array for multiple scripts.
nope: The location of the script you want to load if the test fails. Use an array for multiple scripts.
3. Modernizr.[HTML5 feature name]? can be used to implement fallback behavior if the browser does not support given HTML5 feature.
    var audio = new Audio();
    audio.src = Modernizr.audio.ogg ? 'background.ogg' :
    Modernizr.audio.mp3 ? 'background.mp3' :
    'background.m4a';
    audio.play();

Silverlight 5 - Double Click and N-Click Support Edit

Silverlight 5 has introduced the concept of a click count. This works for both the left and right mouse buttons. This can be accomplished by the ClickCount property of the MouseButtonEventArgs class. This property tells you how many times the user has rapidly clicked the mouse button. 

XAML

<Grid x:Name="LayoutRoot" Background="White">
<Rectangle x:Name="ClickRectangle" Height="85" Width="93"
   HorizontalAlignment="Left" VerticalAlignment="Top" Margin="30,40,0,0"
   Stroke="Black" StrokeThickness="1" Fill="#FFE82A2A"
   MouseLeftButtonDown="RectMouseLeftButtonDown" />
</Grid>

C# Source Code

private TimeSpan _clickDelay = TimeSpan.FromMilliseconds(300);
private int _clickCount = 0;
private DispatcherTimer _timer = new DispatcherTimer();

void RectMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
// This code would never allow for a triple click

//if (e.ClickCount == 2)

// MessageBox.Show("Double click!");

//else if (e.ClickCount == 3)

// MessageBox.Show("Triple click!");

_clickCount = e.ClickCount;

    if (e.ClickCount >= 2 && !_timer.IsEnabled)
   {
        // wait to see if we get a triple click
       _timer.Interval = _clickDelay;
       _timer.Tick += TimerTick;
       _timer.Start();

     }
else if (e.ClickCount < 2)
    {
      _timer.Stop();

    }
}

private void TimerTick(object sender, EventArgs e)
{
     _timer.Stop();
    _timer.Tick -= TimerTick;

      if (_clickCount == 2)
      OnRectDoubleClick();
      else if (_clickCount == 3)
      OnRectTripleClick();
}

private void OnRectDoubleClick()
{
    MessageBox.Show("Double Click!");
}

private void OnRectTripleClick()
{
    MessageBox.Show("Triple Click!");
}

HTML 5 async attribute

Async attribute can be used to load an external file and allows developers to load the file asynchronously. So, this means async attribute load the script in the background as soon as script is available without causing other page elements to delay while it loads.

<script async src="Script.js" onload="Init()"></script>

async attribute would benefit the user experience if the script is loaded as soon as possible, rather than after the page loads. So, this attribute will speed up the web by loading script asynchronously.

ASP.NET vNEXT - Strongly Typed Data Controls

The next release of ASP.NET provides the ability to have strongly-typed data templates on data controls and introduces new property called "ModelType". This property has two expressions: Item and BindItem. And, also provides full Intellisense and compile-time checking support.

This means developers who used Eval() and Bind() helper methods to bind data into a control,

First Name: <%# Eval("FirstName") %><br />

   <asp:TextBox ID="firstName" runat="server" Text='<%# Bind("FirstName") %>' />

can use the property called "ModelType" on data controls introduced in ASP.NET vNEXT as below:

   <asp:TextBox ID="firstName" Text='<%# BindItem.FirstName %>' runat="server" />

ASP.NET MVC 4 Developer Preview for Visual Studio 2010

Microsoft has released MVC 4 Developer Preview for Visual Studio 2010 and available to download from ASP.NET MVC 4 Developer Preview. ASP.NET MVC 4 can be installed and run with ASP.NET MVC 3 side-by-side.

Software Requirements:
1. .NET 4.o
2. Visual Studio 2010 SP1 or Visual Web Developer Express 2010

New features:
1. Enhanced ASP.NET MVC 4 project template allows you to create more modernized websites. The size of website is adjusted according to screen resolution.
2. Mobile project template - Develop web applications that can run on any phone. The MVC4 mobile template is based on JQuery Mobile framework.
3. Enhanced support for asynchronous methods.

HTML 5 Input Type - Number

HTML 5 Number Input type control allows user to increase or decrease the value of the textbox by clicking on up or down arrow buttons. As of today, only Chrome 13 and Safari 5 support this feature.

<!DOCTYPE html>
<html>
<head>     
    <title>Testing HTML 5 Number Input Type</title>
</head>
<body>
   <form>
        <label for="date">
            Please enter date:
            <input type="number" name="date" id="date"
                min="1" max="31" step="1" value="15">              
        </label>
    </form>
</body>
</html

Method Overloading in ASMX and WCF services

Both ASMX and WCF services do not support method overloading by default. However, it is possible to enable method overloading with ASMX or WCF service by decorating a ASMX web method or a WCF method as follows.

In ASMX:

[WebMethod (MessageName="HelloWorld")]
public string HelloWorld()
{
   return "HelloWorld";
}

[WebMethod (MessageName="HelloWorldWithName")]
public string HelloWorld(string name)
{
   return "HelloWorld " + name;
}

In WCF:

[ServiceContract]
public interface IMyCalculator
{
[OperationContract(Name="AddFloats")]
float Add(float operand1, float operand2);

[OperationContract(Name="AddIntegers")]
int Add(int operand1,int operand2);
}

Silverlight 5 Release Candidate is available to download.

Microsoft has published (8/31/2011) Silverlight 5 Release Candidate and available to download from the following link.
http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=27220

HTML 5 support in Visual Studio 2010

HTML 5 support in Visual Studio 2010 was something development community was asking for a long time. Web Standards Update for Microsoft Visual Studio 2010 SP1 adds support to Visual Studio and the editor for HTML5 and CSS3 and provides intellisense and validation according to W3C specification.
http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83

How to enable WCF Tracing?

Tracing is not enabled by default. Trace source should be defined in the assembly level. The System.ServiceModel and System.ServiceModel.MessageLogging are the most important and frequently used WCF trace sources.

For each trace source trace listener should be defined. You can configure tracing by editing the web.config for web-hosted applications, or Appname.exe.config for self-hosted applications.

<configuration>
  <system.diagnostics>
   <sources>
    <source name="System.ServiceModel" switchValue="Information, ActivityTracing" propagateActivity="true">
    <listeners>
   <add name="traceListener"
type="System.Diagnostics.XmlWriterTraceListener"
initializeData= "c:\log\Traces.svclog" />
    </listeners>
   </source>
  </sources>
</system.diagnostics>
</configuration>

You can also configure each trace source to use the same shared listener, as shown below.

<configuration>
  <system.diagnostics>
   <sources>
    <source name="System.ServiceModel"
switchValue="Information, ActivityTracing"
propagateActivity="true">
     <listeners>
      <add name="xml" />
       </listeners>
        </source>
         <source name="CardSpace">
       <listeners>
     <add name="xml" />
   </listeners>
</source>
<source name="System.IO.Log">
<listeners>
   <add name="xml" />
     </listeners>
      </source>
       <source name="System.Runtime.Serialization">
     <listeners>
    <add name="xml" />
</listeners>
   </source>
      <source name="System.IdentityModel">
       <listeners>
          <add name="xml" />
       </listeners>
   </source>
</sources>

<sharedListeners>
<add name="xml"
type="System.Diagnostics.XmlWriterTraceListener"
initializeData="c:\log\Traces.svclog" />
</sharedListeners>
</system.diagnostics>
</configuration>