Package Managers

We have several package managers. Each of these package managers are designed with specific needs in mind and they each handle specific tasks better than the others.  Because of their different strengths, it is common to use all three of them within the same .Net web application.

NuGet

What is it?   .Net developers are likely to be very familiar with this.  It is a package manager that mainly deals with .NET assemblies.

What it is good for?  It is nicely integrated within Visual Studio and great for loading .Net assemblies and libraries such as Entity Framework and ASP.NET Identity.

NPM (Node Package Manager)

What is it?  Designed specifically for node modules, but is also ideal for loading packages that are used during development time. Unlike Bower, NPM supports nested dependency trees. Meaning, NPM may actually load multiple versions of a component on your machine.

What it is good for?  Great for managing developer tools like Yeoman, Grunt, Gulp, and testing tools. Its nested dependency tree makes it great for avoiding dependency conflicts.

Bower

What is it?   Bower is optimized for front-end components. Bower uses a flat dependency tree, requiring only one version for each package, reducing page load to a minimum. So where NPM aims for stability, bower aims for a smaller/faster footprint.

What it is good for?  Created specifically for managing front-end components like javascript and css files.

Advertisements

DataGrid(1.0) vs GridView(2.0) vs ListView(3.5)

GridView, DataGrid and ListView Data-bound controls are used to display and modify data in your Asp.Net web application. These controls also contains others Asp.Net controls like as Label, TextBox, DropdownList etc. into a single layout. In this article, I am going to expose the difference among these three.

Difference between GridView and DataGrid

Data Grid GridView
It was introduced with Asp.Net 1.0. It was introduced with Asp.Net 2.0.
For sorting you need to handle SortCommand event and rebind grid required and for paging you need to handle the PageIndexChanged event and rebind grid required. Built-in supports for Paging and Sorting.
Need to write code for implementing Update and Delete operations. Built-in supports for Update and Delete operations.
This features is not supported. Supports auto format or style features.
Performance is fast as compared to GridView. Performance is slow as compared to DataGrid

 

GridView ListView
It was introduced with Asp.Net 2.0. It was introduced with Asp.Net 3.5.
Rendered as Table. Template driven.
Need to write custom code. Built-in supports for Data grouping.
Need to write custom code. Built-in supports for Insert operation.
Need to write custom code. Provides flexible layout to your data.
Performance is slow as compared to ListView. Performance is fast is compared to GridView.

 

Angular JS – Part 3

Validations in angular : 

Angular leverages HTML 5 validation attributes and new HTML 5 form elements. Now if we want Angular to handle validation we need first stop HTML 5 to do validation. So for that the first step is to specify “novalidate” attribute on the form tag.

AngularJS is constantly updating the state of both the form and the input fields.

Input fields have the following states:

  • $untouched The field has not been touched yet
  • $touched The field has been touched
  • $pristine The field has not been modified yet
  • $dirty The field has been modified
  • $invalid The field content is not valid
  • $valid The field content is valid

They are all properties of the input field, and are either true or false.

Forms have the following states:

  • $pristine No fields have been modified yet
  • $dirty One or more have been modified
  • $invalid The form content is not valid
  • $valid The form content is valid
  • $submitted The form is submitted

They are all properties of the form, and are either true or false.

Note :- “Name” is needed for the validations to work.

Case 1: required

<input name=”myName” ng-model=”myName” required>
<span ng-show=”myForm.myName.$touched && myForm.myName.$invalid”>The name is required.</span>

case 2 : type

<p>Email:<br>
<input type=”email” name=”email” ng-model=”email” required>
<span style=”color:red” ng-show=”myForm.email.$dirty && myForm.email.$invalid”>
<span ng-show=”myForm.email.$error.required”>Email is required.</span>
<span ng-show=”myForm.email.$error.email”>Invalid email address.</span>
</span>
</p>

CSS Classes

AngularJS adds CSS classes to forms and input fields depending on their states.

The following classes are added to, or removed from, input fields:

  • ng-untouched The field has not been touched yet
  • ng-touched The field has been touched
  • ng-pristine The field has not been  modified yet
  • ng-dirty The field has been modified
  • ng-valid The field content is valid
  • ng-invalid The field content is not valid
  • ng-valid-key One key for each validation. Example: ng-valid-required, useful when there are more than one thing that must be validated
  • ng-invalid-key Example: ng-invalid-required

The following classes are added to, or removed from, forms:

  • ng-pristine No fields has not been modified yet
  • ng-dirty One or more fields has been modified
  • ng-valid The form content is valid
  • ng-invalid The form content is not valid
  • ng-valid-key One key for each validation. Example: ng-valid-required, useful when there are more than one thing that must be validated
  • ng-invalid-key Example: ng-invalid-required
<!DOCTYPE html>

<html>

http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js

<style>

input.ng-invalid {

background-color:pink;

}

input.ng-valid {

background-color:lightgreen;

}

</style>

<body ng-app=””>

<p>Try writing in the input field:</p>

<form name=”myForm”>

<input name=”myName” ng-model=”myName” required>

</form>

<p>The input field requires content, and will therefore become green when you write in it.</p>

</body>

</html>

Custom Validation : 

Silverlight Part2 – DataBinding & Converters

In Silverlight, in built, it has two data binding provided built in MVVM.

What is DataBinding :

We have a UI Control (Target) & CLR Object (where data resides). Binding allows us to map them both together if either of them changes, the other gets reflected with the change.

Ie.. If the Object.property is set, Its reflected in UI Control. On the other way, If we edit the value of UI Control, the Object.Property gets updated.

This happens because of attribute of UIControl being a DependencyProperty(System.Windows). & CLR Object being inherited from INotifyPropertyChanged(System.ComponentModel)

Modes :

OneTime : From Object to UIControl for Onetime.

OneWay : From Object To UIControl whenever Object.Property changes(Default Mode)

TwoWay : From Object to UIControl & From UIControl to Object.Property

In Case of OneTime & OneWay, Object need not to inherit INotifyPropertyChanged.

For two way, it has to implement INotifyPropertyChanged.

For Instance binding TextBox to certain Object.Property…

How we gonna do it :

Declare the DataContext of the UserControl to Certain ViewModel(MainPageViewModel), which says all the child controls of UserControl has the same datacontext.

public partial class MainPage : UserControl

{

public MainPage()

{

InitializeComponent();

this.DataContext = new MainPageViewModel();

}

}

public partial class MainPageViewModel : INotifyPropertyChanged

{

private string _text = “Xyz Abc”;

public string MyText { get { return _text; } set { _text = value; } }

public event PropertyChangedEventHandler PropertyChanged;

public void OnPropertyChanged(string name)

{

if (PropertyChanged != null)

PropertyChanged(this, new PropertyChangedEventArgs(name));

}

}

In UI

<TextBox Text=”{Binding MyText, Mode=TwoWay,Converter={StaticResource UpperCaseConvertor}}” Margin=”100″/>

TextBox has a Dependency property as

public static readonly DependencyProperty TextProperty;

We can set Binding of any attribute of control. For Binding we can mention

    • Path is the name of the source property to get the data from.
    • Mode is the connection type (OneTime, OneWay, and TwoWay) between the source and the target.
    • Source is the standard CLR object that contains the data.
    • Converter is used to specify the converter object that is called by the binding engine to modify the data as it is passed between the source and the destination.
    • Converter Culture specifies a parameter that can be passed to the conversion of the data.
    • Conversion Parameter specifies a parameter that can be passed to the converter.

what happens internally is :

When Object.Property changes :

  • Setter is called. Inside setter, we shall invoke the event PropertyChanged by passing the property name.
  • Control have already subscribed to the PropertyChanged event & registered its own logic of setting the value of dependency property.

When Control is edited :

It know which property it got attached to. It just calls the setter of the property in its change event.

To work as said above, once the DataContext is set to ParentControl(here it is UserControl), it maintains the BindingGraph ie..list of Control – ControlProperty – ObjectProperty for all bindings.

————–

Converters : If we need to modify the data while being bound to control or modify the data from control while setting to Object, Binding property has property to assign a class that takes cares of this modification which are called converters. All converters should  be derived from IValueConverter (System.Windows.Data).

we need to register this converter class using

<UserControl.Resources>

<ResourceDictionary>

<local:UpperCaseConvertor x:Key=”UpperCaseConvertor”/>

</ResourceDictionary>

</UserControl.Resources>

where as local is    xmlns:local=”clr-namespace:TestSilver”

Below converter does :

It converts Object.Property to UPPERCASE before assigning it to UI

It converts UIControl Data to lowercase before assigning it to Object.Property.

  public class UpperCaseConvertor : IValueConverter

{

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

{

return value.ToString().ToUpper();

}

public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

{

return value.ToString().ToLower();

}

}

Silverlight Part 1

Silverlight : Rich UI graphics, advanced media applications

what : xaml, xap, web host, plugin

Plug in :

  • xaml parser,
  • PresentationEngine(Animation System, Drawing vector graphs etc)
  • Subset of the .NET Framework (CLR & .Net Base class libraries)
  • Media Features(download & streaming, audio/video decoders)
  • Browser interaction (HTML Bridge, mouse keyboard input & events)
  • Downloader

Steps for rendering Silverlight on a web page
Download XAP -> Launch CLR -> Extract xaml & dll -> Load .Net -> Create Silverlight

  • User opens a web page with Silverlight
  • The page has embedded code which refers to a XAML Application (.XAP) file
    The Silverlight Plug-in is installed in the browser, and then downloads the .XAP file
    Launch the embedded Common Language Runtime (CLR), the environment which executes and manages the Silverlight application
  • Extract the XAML Files and Assemblies from the XAML Application (.XAP) file
  • Load the .NET Assemblies
  • Create instances of the Silverlight Control that includes:
  •                                  Creating a User Interface Element Tree
  •                                  Managing the Layout of the User Interface
  •                                  Drawing the User Interface

Silverlight application is hosted on a web page using an HTML Object tag. We discuss how this works in the next section “Silverlight Host”.

Silverlight Host :
MSVS & expression blend allows to create the silverlight applications. These applications essentially create a XAML application file(.XAP) file, referenced by a link in the object tag.
There are 3 ways you can host the silverlight application File in web page
1) Hosting the Silverlight in any HTML Page using tag
2) Hosting it in an ASPX page using a silverlight COntrol
3) Hosting it in an ASPX page usign a mediaPlayer control

Using Object tag…we can do as follows

 

“;
Response.Write(param);
%>

Using Silverlight control which eventually gets converted to object
<asp:Silverlight ID=”Xaml1” runat=””server”” Source=”HelloWorld.xap” Minimum- Version=”4.0.50826.0” Width=”100%” Height=”100%” />
Silverlight Application File
It a single compressed zip file(.zip) that contains the xaml files, .net assemblies & other resources whose extension is changed to .XAP. When a silverlight application is built, the VS compresses all relevant files in this single file.

When a VS creates an Silverlight application, by default it adds App.xaml, App.Xaml.cs, Main.Xaml & Main.Xaml.cs. Where as App files(App_Start, App_Exit, App_Exception) are for application level properties and events. MainPage.xaml and .cs file are the files which contain the first visual of the application.

We have two folders created as Obj & Bin. both has Debug folders. Obj contain .g.cs files which are partials generated files that has InitializeComponent to load XAML etc

 

To deploy your Silverlight application, you upload the TestPage.html(where Object tag has reference to XAP) and HelloWorld.XAP file to a web server. The HelloWorld.XAP file has all the needed files. HelloWorld Application has the following files in the .XAP:

  • AppManifest.xaml
  • HelloWorld.dll
  • any configs
  • Images
  • .net dlls

When the Silverlight Plug-in loads a HelloWorld.zap file in a web browser, it reads the AppManifest file first to find out the entry point. The AppManifest contains EntryPointassembly & entrypointtype can be set to guide the loading process.

The Silverlight plug-in follows the following sequence of events:

  • The Xap file is extracted
  • AppManifest is consulted for entrypoint dll & class
  • Entrypoint dll is loaded & App entrypoint class is seeked first
  • InitialiseComponent method of App(App.g.cs) is called to load all resources
  • Then App_Start event sets the RootVisual to MainPage.
  • Silverlight User interface is rendered based on MainPage.xaml
  • Web page displays the content of MainPage.xaml

What makes MainPage.xaml rich is the vector quality of the interface markup language. Try changing the font size to 34, and notice how it scales without loss of quality. Thanks to eXtensible Application Markup Language (XAML), which we are going to discuss in the next section.

Silverlight XAML

It has two parts, one Silverlight XAML ie visual & code behind ie .Net for logic.

The visual part is an advanced HTML, and the code behind file brings the robustness of .NET type safe, managed environment. These two parts make XAML simple and a powerful language.

Extensible Markup Language files (Visual Part)

  • XAML is much more advanced than HTML, it lets you declare tags for objects, shapes and allows URL linking to jpg, png images and other multimedia files. While HTML parsing is done at run- time, XAML markup is compiled.The object and shapes you declare in XAML are vector images and can scale without loss of qual- ity. It also supports advanced Anti-alias features for sharp image borders and 2-D animations using story board tags. Animations in XAML are also declared-no programming is involved. XAML Markup files support:
    • Vector graphics
    • Tag based 2-D animations
    • Allow linking images and multimedia files
  • The second aspect of XAML is extensibility. XAML is based on XML, so apart from the tags available in the default xml namespace defined for objects and shapes, you can create your own namespace and use your own tags. In fact it’s the extensibility of the Silverlight XAML file which allows for defining a code behind file.

 

  • Let’s look at the MainPage.xaml we created in HelloWorld application.
    <UserControl x:class="”HelloWorld.MainPage”" xmlns="”http://schemas.microsoft.com/winfx/2006/xaml/presentation”" xmlns:x="”http://schemas.microsoft.com/winfx/2006/xaml”" xmlns:d="”http://schemas.microsoft.com/expression/blend/2008”" xmlns:mc="”http://schemas.openxmlformats.org/markup-compatibility/2006”" mc:ignorable="”d”" d:designheight="”300”" d:designwidth="”400”">
    
    <grid x:name="”LayoutRoot”" removed="”White”">
    <textblock x:name="”TextHello”" fontsize="”34”" margin="”80”"> Hello World !</textblock>
    </grid>
    </UserControl>
  • Note the following four elements:
    1. Root element UserControl
    2. The significance of x:Class
    3. Mapping (xmlns and xmlns:x) and XAML Namespace
    4. The Grid and TextBlock Object

    Let’s talk about each of these to have a better understanding of the embedded code.

  • Where Root Element is Usercontrol : we can create two types of XAML templates, one is Applicaiton & other is UserControl type. We use Applicaiton type to set Start, Exit process of Application. Where as UserControl is the visual element where we include our controls.
  • x:Class is the way we bind the codebehind to xaml. It includes namespace.CodeBehindClass.
  • xmlns is the default xml namespace where we have all tags or controls defined. xmlns:d is the place all language specific things exists attributes like x:Name.
  • Grid & TextBlock are similar to HTML table & Label using vector graphics.

XAML .Net `Files :

MainPage.xaml.cs is the place where we can include our .net code to deal with the events of xaml.

MainPage Class = MainPage.xaml + MainPage.xaml.cs becomes,
MainPage Class = MainPage.g.cs(partial class) + MainPage.xaml.cs(CodeBehind) + HelloWorld.g.resources(BAML)
BAML : Binary application mark up language : Which is an intermediate file which becomes a part of the Resources in the Assembly. It is a binary representation of the object hierarchy and properties defined in the source XAML file.