Typescript - Update the TodoMVC sample to use with the backbone and the jquery DefinitelyTypes

Typescript 0.9.1.1 - Update the TodoMVC sample to use the backbone and the jquery DefinitelyTypes 

This blog I will explain how to update the TodoMVC to use with the backbone 0.2.6 and the jquery 0.3.6 DefinitelyTypes.
Since you've come this blog. I very sure that are new to typescript therefore I will go through step by step from the download to the modification of the  typescript and run it.

1. Install TypeScript for the Visual Studio 2012.

You can download the TypeScript for the VS Studio 2012 and 2013 here. It's about 11.9 M and it's a self setup file.  Once it downloaded, double click on the TypeScriptSetup0.9.1.1.exe to install it.

2. Create the TodoMVC TypeScript Project 

Open the the VS 2012 and select from the main menu File -> New-> Project ... The popup below appears and the project Name TSTodoMVC.  Then click the OK button.

By default, it creates a simple runnable sample project. you can run the sample by clicking on the

 play button to run it in the IExplorer browser. You could run it in a different browser by right click on the default.htm file then select the Browse With ... on the context menu.

3. Update the solution with original TodoMVC source code that you can find it here 

• Delete App.ts, the App.css and default.htm
• Create the css and  the js folfers.
• Copy the destroy.png and todos.css to the css folder.
• Copy the todos.ts to the js folder
• Copy the index.html

At this point you may have 2 CSS 3.0 errors

To fix the 1st error, change the cursor:normal to cursor:default. To fix the 2nd error, comment out 

 /* -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#555555,EndColorStr=#222222); */

You can download the entire solution 

 Here 

4. Install the Backbone and the JQuery DefinitelyTypes

In the steps in the following links :

• Install the Backbone.DefinitelyTypes 
• Run the following command in the Package Manager Console
• PM> Install-Package backbone.TypeScript.DefinitelyTyped
• Install the JQuery.DefinitelyTypes
• Run the following command in the Package Manager Console
• PM> Install-Package jquery.TypeScript.DefinitelyTyped

5. Modify the Todos.ts to use the Backbone and the JQuery DefinitelyTypes

Add the Backbone and the JQuery references at the beginning at the file.

/// <reference path="Scripts\typings\backbone\backbone.d.ts"/>
/// <reference path="Scripts\typings\jquery\jquery.d.ts"/>

Since we refer the above DefinitelyTypes, we shall remove the Backbone and the JQuery in the Todos.ts code.

There are few more modifications, however you can download the entire solution here.

Note: Type cast in the TypeScript is < casting type >

Example:
 this.allCheckbox = <HTMLInputElement> this.$(".mark-all-done")[0]; //casting

WCF - Inject the Unity Container into the per call self host service

WCF - Inject the Unity Container into the per call self host service

Sometime you don't want use a singleton for sharing the transient data between per call services.  Therefore you need to use the Unit Container to inject the dependencies to your service. Here is the sample of how to do it.


Main Code :

      UnityServiceHostFactory wFactory = new UnityServiceHostFactory();
 
      try
      {
        ServiceHost wIosServiceHost = wFactory.CreateServiceHostWithType(typeof(DataAccessService));
        wIosServiceHost.Open();
        Console.WriteLine("running on endpoints:");
        foreach (var wServiceEndpoint in wIosServiceHost.Description.Endpoints)
        {
          Console.WriteLine(wServiceEndpoint.Address.ToString());
          Console.WriteLine("running");
        }
      }
 
      catch (Exception ex)
      {
        ... 

     }

UnityServiceHostFactory :

  public class UnityServiceHostFactory : ServiceHostFactory
  {
    private static IUnityContainer mContainer;

    public UnityServiceHostFactory()
    {

// create you container and register all the types

      mContainer = new UnityContainer();
      mContainer.RegisterType<DataAccess>();
     ... 
    }
 
    protected override ServiceHost CreateServiceHost(Type serviceType, Uri[] baseAddresses)
    {
      return new UnityServiceHost(mContainer, serviceType, baseAddresses);
    }

 
    public ServiceHost CreateServiceHostWithType(Type serviceType, Uri[] baseAddresses)
    {
      return new UnityServiceHost(mContainer, serviceType, baseAddresses);
    }
 
    public ServiceHost CreateServiceHostWithType(Type serviceType)
    {
      return new UnityServiceHost(mContainer, serviceType);
    }

 }

UnityServiceHost :

 public partial class UnityServiceHost : ServiceHost
  {
    public UnityServiceHost(IUnityContainer container, Type serviceType, params Uri[] baseAddresses)
      : base(container.Resolve(serviceType), baseAddresses)
    {
    }
 
    public UnityServiceHost(IUnityContainer container, Type serviceType)
      : base(container.Resolve(serviceType))
    {
    }
  }

WCF – Configure the entire self host service via the app.config only

WCF – Configure the entire self host service via the app.config only

Most the self host samples that your find on the web,  it shows you how to configure the service programmatically.

App.config:

  - The metadata can be access via the http://localhost:8080/DataAccessService/Mex.
  - The service can be access via the net.tcp://localhost:8081/DataAccessService

  <system.serviceModel>
    <behaviors>
      <serviceBehaviors>
        <behavior>
          <serviceMetadata httpGetEnabled="true" />
          <serviceDebug includeExceptionDetailInFaults="true" />
          <dataContractSerializer maxItemsInObjectGraph="2147483647" />
        </behavior>
      </serviceBehaviors>
    </behaviors>
    <bindings>
      
      <netTcpBinding>
        <binding   name="IosService_netTcpBinding"  maxReceivedMessageSize="2147483647" receiveTimeout="23:10:00">
          <readerQuotas maxArrayLength="2147483647" maxBytesPerRead="2147483647" />
          <security mode="None" />
        </binding>
      </netTcpBinding>
      
      <wsHttpBinding>
        <binding name="IosService_wsHttpBinding"  maxReceivedMessageSize="2147483647" receiveTimeout="23:10:00">
          <readerQuotas maxArrayLength="2147483647" maxBytesPerRead="2147483647" />
          <security mode="None" />
        </binding>
      </wsHttpBinding>   
      
    </bindings>
    <serviceHostingEnvironment multipleSiteBindingsEnabled="true" />
    <services>
      <service name="com_cae.Miss.ProductAdapter.CdbAdapter.DataAccess.DataAccessService">
        <endpoint address ="" binding="netTcpBinding"  
                  bindingConfiguration="IosService_netTcpBinding" 
                  name="Endpoint"
                  listenUriMode="Explicit"
                  contract="com_cae.Miss.ProductAdapter.CdbAdapter.ClientServer.IDataAccessService" />
 
        <endpoint address="mex" binding="mexHttpBinding"  name="MexEndpoint" contract="IMetadataExchange" />
        <host>
          <baseAddresses>
            <!-- For the metadata -->
            <add baseAddress="http://localhost:8080/DataAccessService/" />
            <!--- For service -->
            <add baseAddress="net.tcp://localhost:8081/DataAccessService/" />
          </baseAddresses>
        </host>
      </service>
    </services>
  </system.serviceModel>

Main Code :

      try
      {
        ServiceHost wIosServiceHost = wFactory.CreateServiceHostWithType(typeof(DataAccessService));
        wIosServiceHost.Open();
        Console.WriteLine("running on endpoints:");
        foreach (var wServiceEndpoint in wIosServiceHost.Description.Endpoints)
        {
          Console.WriteLine(wServiceEndpoint.Address.ToString());
          Console.WriteLine("running");
        }
      }
 
       catch (Exception ex)
       {
         ...

       }