experience .net: 2014

13 January 2014

Ignite UI Code Sample

This article is an attempt to learn Infragistics Ignite UI [which itself built on jQuery], How powerful features it has and how easily it can be used to achieve many of our UI requirements. Best part of Ignite UI Grid is that it has built in support for Filtering, Column Hiding, Sorting, Column Rearrange, etc with just few lines of code. Including pagination!
Infragistics Ignite UI (formerly Net Advantage for jQuery) includes high-performance ASP.NET MVC and jQuery controls based on CSS3 and HTML5 for Web Developers who need to deliver the best cross-platform user experiences.
The below sample code is to demonstrate few of features and properties:

   1:  <!DOCTYPE html>

   2:  <html>

   3:  <head>

   4:      <title>Ignite Grid Sample</title>

   5:      <!-- Ignite UI Required Combined CSS Files -->

   6:      <link href="http://cdn-na.infragistics.com/jquery/20132/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />

   7:      <link href="http://cdn-na.infragistics.com/jquery/20132/latest/css/structure/infragistics.css" rel="stylesheet" />

   8:      <script src="http://modernizr.com/igsb-highlights/modernizr-latest.js"></script>

   9:      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

  10:      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

11:

  12:      <!-- Ignite UI Required Combined JavaScript Files -->

  13:      <script src="http://cdn-na.infragistics.com/jquery/20132/latest/js/infragistics.core.js"></script>

  14:      <script src="http://cdn-na.infragistics.com/jquery/20132/latest/js/infragistics.lob.js"></script>

  15:  </head>

16:

  17:  <body>

  18:    <div class="content-wrapper">

  19:          <!-- the igGrid target element-->

  20:          <table id="grdIgnite" style="width: auto;"></table>

  21:    </div>

  22:  <script type="text/javascript">

  23:      $(function () {

  24:          var data = [

  25:          { "Charactor": "Rajesh koothrappali", "Portrayed by": "Kunal Nayyar", "TV series": "Big Bang Theory" },

  26:          { "Charactor": "Leonard Hofstadter", "Portrayed by": "Johnny Galecki", "TV series": "Big Bang Theory" },

  27:          { "Charactor": "Sheldon Cooper", "Portrayed by": "Jim Parsons", "TV series": "Big Bang Theory" },

  28:          { "Charactor": "Neal Caffrey", "Portrayed by": "Matt Bomer", "TV series": "White Collar" },

  29:          { "Charactor": "Peater Burke", "Portrayed by": "Tim DeKay", "TV series": "White Collar"},

  30:          { "Charactor": "Seeley Booth", "Portrayed by": "David Boreanaz", "TV series": "Bones"},

  31:          { "Charactor": "Brennan Bones", "Portrayed by": "Emily Deschanel", "TV series": "Bones"},

  32:          { "Charactor": "Ted Mosby", "Portrayed by": "Josh Radnor", "TV series": "How I Met Your Mother" },

  33:      { "Charactor": "Barney Stinson", "Portrayed by": "Neil Patrick Harris ", "TV series":"How I Met Your Mother" },

  34:      { "Charactor": "Jake Peralta", "Portrayed by": "Andy Samberg", "TV series": "Brooklyn Nine-Nine" },

  35:          { "Charactor": "Jessica ", "Portrayed by": "Zooey Deschanel ", "TV series": "New Girl"},

  36:          { "Charactor": "Nicholas Miller", "Portrayed by": "Jake Johnson", "TV series": "New Girl" },

  37:          { "Charactor": "Leslie Knope", "Portrayed by": "Amy Poehler", "TV series": "Parks and Recreation" },

  38:          { "Charactor": "Tom Haverford", "Portrayed by": "Aziz Ansari", "TV series": "Parks and Recreation" },

  39:          { "Charactor": "Andy Dwyer", "Portrayed by": "Chris Pratt", "TV series": "Parks and Recreation" },

  40:          { "Charactor": "Ron Swanson", "Portrayed by": "Nick Offerman", "TV series": "Parks and Recreation" }

  41:                  ];

  42:          $("#grdIgnite").igGrid({

  43:              caption: 'TV Shows',

  44:              height: "550px",

  45:              width: "900px",

  46:              dataSource: data, //JSON Array

  47:              features: [

  48:                      {

  49:                          name: 'Filtering'

  50:                      },

  51:                      {

  52:                          name: 'GroupBy'

  53:                      },

  54:                      {

  55:                          name: 'Hiding'

  56:                      },

  57:                      {

  58:                          name: 'Paging',

  59:                          type: 'local',

  60:                          pageSize: 6

  61:                      },

  62:                      {

  63:                          name: "ColumnMoving",

  64:                          mode: "immediate",

  65:                          addMovingDropdown: true,

  66:                          mode: "deferred",

  67:                          type: "render"

  68:                      }

  69:                  ]

70:

  71:          });

  72:      });

  73:      </script>

  74:  </body>

  75:  </html>

03 January 2014

AngularJS Code Samples

AngularJS, a JavaScript framework developed by a Google and supported by Google. As the technology grows we have lost the patience to wait for a search results on web and wanted faster results. We do not want to render a HTML page on server side and the concept of Single page Application (SPA) started which leads to many front-end frameworks like Knockout, Ember, Angular, backbone what not!
Briefly: AngularJS is focused on maintaining data models for objects, and how they are viewed on the front end. It assists with running single-page applications (SPA).
AngularJS uses a Model-View-Controller programming concept. This involves separating the:
– Model (the data objects represented in your application), from the
– View (all the stuff the user sees — for example, all the differently tweaked screens and sub screens in Android vs iOS vs desktop browser versions of Chrome/Firefox/IE/Safari, etc), from the
– Controller (the glue code that manages the Model and connects it with the various Views).
Before we get into any theory, let us get our hands dirty with some actual Angular code. Thanks to Viral Patel (http://viralpatel.net/blogs/ ) for a nice sample application this was really helpful to understand the concepts.

Let us see a small Hello World application and we will try to see what the new terminologies it brings up. In above demo, just write something in the textbox and press Add button. This will adds whatever you type in text box in an array. The content of array is displayed below in a list.

   1:  <!DOCTYPE html>

   2:  <html ng-app id="ng-app">

   3:  <title>Hello World, AngularJS</title>

   4:  <script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js">

   5:  </script>

   6:  </head>

   7:  <body>

   8:  <div ng-controller="ContactController">

   9:          Email:<input type="text" ng-model="newcontact"/>

  10:      <button ng-click="add()">Add</button>

  11:      <h2>Contacts</h2>

  12:          <ul>

  13:              <li ng-repeat="contact in contacts"> {{ contact }} </li>

  14:          </ul>

  15:  </div>

  16:  <script type="text/javascript">

  17:      function ContactController($scope) {

  18:          $scope.contacts = ["Jijo.Venginikkadan@mail.com", "vgjijo@maildomain.com", "vgjijo@somedomain.com"];

19:

  20:          $scope.add = function () {

  21:              $scope.contacts.push($scope.newcontact);

  22:              $scope.newcontact = "";

  23:           }

  24:          }

  25:  </script>

  26:  </body>

  27:  </html>

28:

Scope is nothing but an object that Glues the View with Controller. They hold the Model data that we need to pass to view. Scope uses Angular’s two-way data binding to bind model data to view.

ng-controller defines a Controller to be bound with the view. In this case we defined a controller called ContactController in DIV using ng-controller attribute.

ContactController is nothing but a plain vanilla JavaScript function. In the demo we defined it as function. Also see the definition of ContactController function. There is an object $scope which we pass as an argument. This object is used to bind the controller with view. When AngularJS initialize this controller, it automatically creates and injects the $scope object to this function using dependency injection

ngRepeat is one of the most used AngularJS attribute. It iterate through an array and bind the view with each element. So in our example it creates tag for each item within contacts array. ngRepeat takes expression as argument. In our case “contact in contacts” where contact is user defined variable and contacts is an array within $scope.

The function add() is bound to Add button using an attribute ng-click. ng-click binds the click event on the button or link or any clickable element with the function that is defined within $scope. So in this case, whenever Add button is clicked, the add() method on $scope will be called. In add() method we add (or push) a string in contacts array. This is the string that user types in text box