Friday, October 4, 2013

How to Create Custom Binding in KnocoutJS


Why Custom Binding?

This question might be raised when you read the title of this article. Well, you need to go for custom binding when you want more control and flexibility over elements and observables used. If you want to create your own interactive controls then the right way is to go for custom binding. Here is the goodexample for custom binding provided by KnockoutJS.

All the bindings available in the KnockoutJS are the sub properties of a "ko.bindingHandlers" object.
 
Creating Custom Binding

In order to create the custom binding, we need to add a property with your custom binding name and assign an object with two callback functions.
 
ko.bindingHandlers.myCustomBindingName = {
        init:
function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        },

        update:
function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        }

    }
 

Here you can see that we have added a property myCustomBindingName assigned with an object that has init and update callbacks. Let us see the callbacks in detail.
 
The init callback

The init callback function will be executed when the binding is applied the very first time. In this callback, we can have the initial setup necessary for the custom binding such as attaching events, setting up the initial state for variables and so on.

Note: the init callback function will be called only one when the binding is applied.

The update callback

The update callback function will be called whenever the associated observable is changed. While binding your custom binding handler with the element, if you have associated/assigned an observable to your custom binding handler then the update callback will be executed whenever you change the associated/assigned observable.

For example, you have a custom binding handler, say "animateItem" that does some animation whenever an item is added to the collection. The animateItem binding handler accepts an observable that decides whether the added item should be animated on the screen or not based on the observable true/false value.
 
Whenever you update the observable, the update callback of your binding callback will be called with the updated value.
 
The parameters of callback functions
 
These init and update callback functions have the same set of parameters. They are element, valueAccessor, allBindingsAccessor, viewModel and bindingContext. Let us discuss these one by one.
 
element The DOM element on which our custom binding is applied.
valueAccessor The JavaScript function that will return the value assigned/associated with the binding.
You can use the "ko.unwrap" utility function to get the value assigned
allBindingAccessor The JavaScript function that will return all the values assigned/associated with
all the bindings bound with the current DOM. Suppose you have some other KO bindings say
value, visible
then the allBindingAccessor will give you those values and visible binding values also.
viewModel The viewmodel object that is bound to the entire page using "ko.applyBindings()". But when your
binding is within the with binding or foreach binding then the viewModel parameter will have
the $data context instead of the main viewModel.
bindingContext The binding context available for the DOM element. This parameter will have all other bindings
($parent, $parents and $root...)
as a special property.

Example
 
We will discuss the custom binding with an example. We will create a custom binding where we can display the change log for an input box.
 
<p>Change this value: <input data-bind="value: logEntry, valueUpdate: 'keyup'" /> </p>
<div data-bind="yourBindingName: logEntry">
    <ul>
    </ul>
</
div>

In this example view, we have an input element bound to the logEntry observable assigned/associated with the value binding. And we have a div to which we have bound our custom binding "yourCoustomBinding". Since we have associated the logEntry observable with our custom bidning, the update callback function will be executed whenever the text in the input box is changed.
ko.bindingHandlers.yourBindingName = {
        init:
function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
// Setup the events, variables..
$(element).css(
"background-color", "rgb(228, 222, 222)");
         },
        update:
function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
           
var text = ko.unwrap(valueAccessor()); // Getting the update log text
            $(
'ul').append('<il> The new text is : ' + text + '</il>');// Adding into the ul as il.
        }
    }
     
var viewModel = { logChange: ko.observable("Type some thing") };
     ko.applyBindings(viewModel);

 
In the init callback function, as an initial setup, we are setting the background color for the change log container. When you start changing the text, the update callback will be called. In the update callback, we are unwrapping the valueAccessor to get the value passed to our custom binding. Then we are appending the changed text to the ul element as an il item.

Creating a Bootstrapper For Prism Application


Introduction
This article shows how to create a bootstrapper for your Prism application using WPF with a short explanation of what a bootstrapper is, such as definition, how it works and so on. Let's start with the definition of what the bootstapper is, how it works and its relation with Prism.

Bootstrapper
A bootstrapper is a class responsible for the initialization of an application built using the Prism Library. By using a bootstrapper, you have more control of how the Prism Library components are wired to your application.

The Prism Library includes a default abstract Bootstrapper base class that can be specialized for use with any container. Many of the methods on the bootstrapper classes are virtual methods. You can override these methods as appropriate in your own custom bootstrapper implementation.

Basic stages of the bootstrapping process

  1. Createa LoggerFacade.
  2. Createand Configure a module catalog
  3. Createand Configure the container
  4. Configuredefault region adapter mappings
  5. Configuredefault region behaviors.
  6. Registerframework exception types.
  7. Createthe Shells.
  8. Initializethe shell
  9. Initializethe module
Creating and Configuring the Module Catalog
If you are building a module application then you will need to create and configure a module catalog. Prism uses a concrete IModuleCatalog instance to track what modules are available to the application, which modules may need to be downloaded, and where the modules reside.

The Bootstrapper provides a protected ModuleCatalog property to reference the catalog as well as a base implementation of the virtual CreateModuleCatalog method. The base implementation returns a new ModuleCatalog; however, this method can be overridden to provide a different IModuleCatalog instance instead, as shown in the following code from the QuickStartBootstrapper in the Modularity with MEF for Silverlight QuickStart.

C# Copy Code

protected override IModuleCatalog CreateModuleCatalog()
{
    // When using MEF, the existing Prism ModuleCatalog is still
    // the place to configure modules via configuration files.
    return ModuleCatalog.CreateFromXaml(new Uri(
   "/ModularityWithMef.Silverlight;component/ModulesCatalog.xaml",
    UriKind.Relative));
}

In both the UnityBootstrapper and MefBootstrapper classes, the Run method calls the CreateModuleCatalog method and then sets the class's ModuleCatalog property using the returned value. If you override this method then it is not necessary to call the base class's implementation because you will replace the provided functionality.

Creating and Configuring the Container
Containers play a key role in an application created with the Prism Library. Both the Prism Library and the applications built on top of it depend on a container for injecting required dependencies and services. During the container configuration phase, several core services are registered. In addition to these core services, you may have application-specific services that provide additional functionality as it relates to composition.

Note

Dependency Injection
Applications built with the Prism Library rely on dependency injection provided by a container. The library provides assemblies that work with the Unity Application Block (Unity) or Managed Extensibility Framework (MEF), and it allows you to use other dependency injection containers. Part of the bootstrapping process is to configure this container and register types with the container.

The Prism Library includes the UnityBootstrapper and MefBootstrapper classes, that implement most of the functionality necessary to use either Unity or MEF as the dependency injection container in your application. In addition to the stages shown in the previous illustration, each bootstrapper adds some steps specific to its container.

Creating and Configuring the Container
Containers play a key role in an application created with the Prism Library. Both the Prism Library and the applications built on top of it depend on a container for injecting required dependencies and services. During the container configuration phase, several core services are registered. In addition to these core services, you may have application-specific services that provide additional functionality as it relates to composition.

Core Services
The following details lists the core non-application specific services in the Prism Library.
  1. IModuleManager: Defines the interface for the service that will retrieve and initialize the application's modules.
  2. IModuleCatalog: Contains the metadata about the modules in the application. The Prism Library provides several different catalogs.
  3. IModuleInitializer: Initializes the modules.
  4. IRegionManager: Registers and retrieves regions, that are visual containers for layout.
  5. IEventAggregator: A collection of events that are loosely coupled between the publisher and the subscriber.
  6. ILoggerFacade: A wrapper for a logging mechanism, so you can choose your own logging mechanism. The Stock Trader Reference Implementation (StockTrader RI) uses the Enterprise Library Logging Application Block,via the EnterpriseLibraryLoggerAdapter class, as an example of how you can use your own logger. The logging service is registered with the container by the bootstrapper's Run method, using the value returned by the CreateLogger method. Registering another logger with the container will not work; instead override the CreateLogger method on the bootstrapper.
  7. IServiceLocator: Allows the Prism Library to access the container. If you want to customize or extend the library, this may be useful.
Application-Specific Services
The following details lists the application-specific services used in the Stock Trader RI. This can be used as an example to understand the types of services your application may provide.

  1. IMarketFeedService: Provides real-time (mocked) market data. The PositionSummaryPresentationModel updates the position screen based on notifications it receives from this service.
  2. IMarketHistoryService: Provides historical market data used for displaying the trendline for the selected fund.
  3. IAccountPositionService: Provides the list of funds in the portfolio.
  4. IOrdersService: Persists submitted buy/sell orders.
  5. INewsFeedService: Provides a list of news items for the selected fund.
  6. IWatchListService: Handles when new watch items are added to the watch list.
There are two Bootstrapper-derived classes available in Prism, the UnityBootstrapper and the MefBootstrapper. Creating and configuring the various containers involve similar concepts that are implemented differently.

Creating and Configuring the Container in the UnityBootstrapper
The UnityBootstrapper class's CreateContainer method simply creates and returns a new instance of a UnityContainer. In most cases, you will not need to change this functionality; however, the method is virtual, thereby allowing that flexibility.

After the container is created, it probably needs to be configured for your application. The ConfigureContainer implementation in the UnityBootstrapper registers a number of core Prism services by default, as shown here.

An example of this is when a module registers module-level services in its Initialize method.

protected virtual void ConfigureContainer()
{
   ...
   if (useDefaultConfiguration)
   {
         RegisterTypeIfMissing(typeof(IServiceLocator), typeof(UnityServiceLocatorAdapter), true);
         RegisterTypeIfMissing(typeof(IModuleInitializer), typeof(ModuleInitializer), true);
         RegisterTypeIfMissing(typeof(IModuleManager), typeof(ModuleManager), true);
         RegisterTypeIfMissing(typeof(RegionAdapterMappings), typeof(RegionAdapterMappings), true);
         RegisterTypeIfMissing(typeof(IRegionManager), typeof(RegionManager), true);
         RegisterTypeIfMissing(typeof(IEventAggregator), typeof(EventAggregator), true);
         RegisterTypeIfMissing(typeof(IRegionViewRegistry), typeof(RegionViewRegistry), true);
         RegisterTypeIfMissing(typeof(IRegionBehaviorFactory), typeof(RegionBehaviorFactory), true);
    }
}

The bootstrapper's RegisterTypeIfMissing method determines whether a service has already been registered, it will not register it twice. This allows you to override the default registration through configuration. You can also turn off registering any services by default; to do this, use the overloaded Bootstrapper.Run method passing in false. You can also override the ConfigureContainer method and disable services that you do not want to use, such as the event aggregator.

If you turn off the default registration then you will need to manually register the required services. To extend the default behavior of ConfigureContainer, simply add an override to your application's bootstrapper and optionally call the base implementation, as shown in the following code from the QuickStartBootstrapper from the Modularity for WPF (with Unity) QuickStart. This implementation calls the base class's implementation, registers the ModuleTracker type as the concrete implementation of IModuleTracker, and registers the callbackLogger as a singleton instance of CallbackLogger with Unity.
protected override void ConfigureContainer()
{
   base.ConfigureContainer();
   this.RegisterTypeIfMissing(typeof(IModuleTracker), typeof(ModuleTracker), true);
   this.Container.RegisterInstance<CallbackLogger>(this.callbackLogger);
}

Creating and Configuring the Container in the MefBootstrapper
The MefBootstrapper class's CreateContainer method does several things. First, it creates an AssemblyCatalog and a CatalogExportProvider. The CatalogExportProvider allows the MefExtensions assembly to provide default exports for a number of Prism types and still allows you to override the default type registration. Then CreateContainer creates and returns a new instance of a CompositionContainer using the CatalogExportProvider. In most cases, you will not need to change this functionality; however, the method is virtual, thereby allowing that flexibility.

After the container is created, it needs to be configured for your application. The ConfigureContainer implementation in the MefBootstrapper registers a number of core Prism services by default, as shown in the following code example. If you override this method, consider carefully whether you should invoke the base class's implementation to register the core Prism services, or if you will provide these services in your implementation.
 
protected virtual void ConfigureContainer()
{
   this.RegisterBootstrapperProvidedTypes();
}

protected virtual void RegisterBootstrapperProvidedTypes()
{
     this.Container.ComposeExportedValue<ILoggerFacade>(this.Logger);
     this.Container.ComposeExportedValue<IModuleCatalog>(this.ModuleCatalog);
     this.Container.ComposeExportedValue<IServiceLocator>(new MefServiceLocatorAdapter(this.Container));
     this.Container.ComposeExportedValue<AggregateCatalog>(this.AggregateCatalog);
}

In the MefBootstrapper, the core services of Prism are added to the container as singletons so they can be located through the container throughout the application. In addition to providing the CreateContainer and ConfigureContainer methods, the MefBootstrapper also provides two methods to create and configure the AggregateCatalog used by MEF. The CreateAggregateCatalog method simply creates and returns an AggregateCatalog object. Like the other methods in the MefBootstrapper, CreateAggregateCatalog is virtual and can be overridden if necessary.

The ConfigureAggregateCatalog method allows you to add type registrations to the AggregateCatalog imperatively. For example, the QuickStartBootstrapper from the Modularity with MEF for Silverlight QuickStart explicitly adds ModuleA and ModuleC to the AggregateCatalog, as shown here.
protected override void ConfigureAggregateCatalog()
{
    base.ConfigureAggregateCatalog();
    // Add this assembly to export ModuleTracker
    this.AggregateCatalog.Catalogs.Add(
    new AssemblyCatalog(typeof(QuickStartBootstrapper).Assembly));
    // Module A is referenced in in the project and directly in code.
    this.AggregateCatalog.Catalogs.Add(
     new AssemblyCatalog(typeof(ModuleA.ModuleA).Assembly));

      // Module C is referenced in in the project and directly in code.
      this.AggregateCatalog.Catalogs.Add(
      new AssemblyCatalog(typeof(ModuleC.ModuleC).Assembly));
}

Creating the Shell
In a traditional Windows Presentation Foundation (WPF) application, a startup Uniform Resource Identifier (URI) is specified in the App.xaml file that launches the main window. In an application created with the Prism Library, it is the bootstrapper's responsibility to create the shell or the main window. This is because the shell relies on services, such as the Region Manager, that need to be registered before the shell can be displayed.

The CreateShell method allows a developer to specify the top-level window for a Prism application. The shell is usually the MainWindow or MainPage. Implement this method by returning an instance of your application's shell class. In a Prism application, you can create the shell object, or resolve it from the container, depending on your application's requirements.

An example of using the ServiceLocator to resolve the shell object is shown in the following code example.

protected override DependencyObject CreateShell()
{
return ServiceLocator.Current.GetInstance<Shell>();
}

You will often see the ServiceLocator being used to resolve instances of types instead of the specific dependency injection container. The ServiceLocator is implemented by calling the container, so it makes a good choice for container agnostic code. You can also directly reference and use the container instead of the ServiceLocator.

InitializeShell Method
After you create a shell, you may need to run initialization steps to ensure that the shell is ready to be displayed. Depending on whether you are writing a WPF or Silverlight application, the InitializeShell method implementations will vary. For Silverlight applications, you will set the shell as the application's visual root, as shown here.

protected override void InitializeShell()
{
Application.Current.RootVisual = Shell;
}

For WPF applications, you will create the shell application object and set it as the application's main window, as shown here (from the Modularity QuickStarts for WPF).
protected override void InitializeShell()
{
    Application.Current.MainWindow = Shell;
    Application.Current.MainWindow.Show();
}

The base implementation of InitializeShell does nothing. It is safe to not call the base class implementation.

New Conversion Function in SQL server 2012







Introduction

SQL Server 2012 introduced the four new conversion functions: TRY_CAST, TRY_CONVERT, PARSE and TRY_PARSE.

TRY_CAST

TRY_CAST function returns a value cast to the specific data type if cast operation done successfully otherwise it returns NULL.

Syntax

TRY_CAST (Expression AS Data type(optional Length)

Argument / parameter

  • Expression - Expression is any valid expression that to be cast.
  • Data Type - This is a Data Type which expression to be cast. Here we can also specify optional length of target data type.
TRY_CAST takes the value and tries to convert it to the given data type. TRY_CAST returns the value to the specified data type if cast is successes otherwise it return NULL. This means any error is occurs during the casting this function return null value.

Example

--Simple TRY_CAST example
SELECT TRY_CAST('10.25' AS FLOAT)
--output
--10.25
-- TRY_CAST example with NULL value return
SELECT TRY_CAST ('This my test' AS INT) AS output;
--Output
-- NULL
SELECT CASE WHENTRY_CAST ('This my test' AS INT)  IS NULL
THEN 'Cast is not valid'
ELSE 'Cast Valid'
END;
--Output
-- Cast is not Valid

The TRY_CAST function returns an error when the cast is not permitted explicitly.
--Simple TRY_CAST with error
SELECT TRY_CAST( 15.34 AS XML)
--output
--Explicit conversion from data type float to xml is not allowed.
  TRY_CONVERT
TRY_CONVERT function returns a value in to given data type if cast is done successfully otherwise this function returns NULL. TRY_CONVERT function is threw exception if explicitly conversion is not permitted.

Syntax

TRY_CONVERT (Data type (optional Length), Expression [, optional style])

Argument / parameter
  • Expression:  Expression is any valid expression that to be cast.
  • Data Type:  This is a Data Type which expression to be cast. Here we can also specify optional length of target data type.
  • Style: Style is optional integer expression that specifies this function is to translate the given expression.
Example
--Simple TRY_CONVERT example
SELECT TRY_CONVERT(FLOAT , '10.25')
--output
--10.25
-- TRY_CONVERT example with NULL value return
SELECT TRY_CONVERT (INT , 'This my test') AS output;
--Output
-- NULL
SELECT CASE WHENTRY_CONVERT (INT, 'This my test')  IS NULL
THEN 'Cast is not valid'
ELSE 'Cast Valid'
END;
--Output
-- Cast is not Valid
--Simple TRY_CONVERT with error
SELECT TRY_CONVERT(XML , 15.34)
--output
--Explicit conversion from data type float to xml is not allowed.
  PARSE
PARSE function translates expression in to requested data type.

Syntax

PARSE ( string value AS data type [ USING culture ] )

Argument / parameter
  • String value: this is nvarchar (4000) value representing the expression to be parsing in to specified data type. This must be a valid representation of the requested data type otherwise PARSE raises an error.
  • Data Type: any valid data type supported by SQL server and this is result's data type.
  • Culture: Optional string value that specifies the culture in which given string value is formatted.
A culture argument is optional, if we are not providing the culture value then the language of current session is used. The language can be set implicitly or explicitly (using a SET LANGUAGE statement). The culture argument accepts all cultures supported by the .NET Framework. It is not limited to the languages supported by SQL Server. If the culture argument is invalid then this function throws an error.

Use PARSE function for converting string value into data/time and number types. For the other conversions uses CAST or CONVERT function. Note that PARSE function is depending on .NET framework CLR (Common Language Runtime).

Example

--Simple PARSE example with Date time
SELECT PARSE('Monday, 3 Octomber 2013' AS datetime2 USING 'en-US)
--output
-- 2013-10-03 00:00:00.0000000
-- PARSE example with currency symbol
SELECT PARSE('$128.34' AS FLOAT USING 'en-US)
--Output
-- 128.34
 
TRY_PARSE

TRY_PARSE function is similar to PARSE function except TRY_PARSE function does not threw an error, if conversion is failed instead of this function return NULL value.

Syntax

TRY_PARSE ( string value AS data type [ USING culture ] )

Argument / parameter

All parameters are same as PARSE function.

Example
--Simple PARSE example with Date time
SELECT TRY_PARSE('Monday, 3 Octomber 2013' AS datetime2 USING 'en-US)
--output
-- 2013-10-03 00:00:00.0000000
-- PARSE example with currency symbol
SELECT TRY_PARSE('$128.34' AS FLOAT USING 'en-US)
--Output
-- 128.34
SELECT TRY_PARSE('Test Data' AS datetime2 USING 'en-US)
--output
-- NULL