gearsred

Resources for webinar “JavaScript Task Runners for Web – Gulp & Grunt”

On Jan 28 2016 we conducted yet another webinar and we focused on “JavaScript Task Runners for the Web” this time. Client side development has undergone tremendous changes and the workflow you use has also changed. You now use what are known as Task Runners which when run perform certain mundane tasks such as Minification, Concatenation, launching web server, reloading the rendered pages etc. These are made possible through certain client side build tools called as JavaScript Task Runners. In this webinar we took a lap around two popular frameworks namely “Gulp” & “Grunt”. This blog post is a recap of the webinar in case you missed attending live.

Continue reading

ES6

Resources for Webinar “10 Useful New Features of ECMAScript 6”

On Aug 20 2015 we did a webinar titled “10 Useful New Features of ECMAScript 6”. This blog post is a recap of the webinar. You will find the slide deck used in the webinar and the video recording of the webinar in this blog post.

ES6

ES6

Slide Deck:

Here is the slide deck used in the webinar:

Video Recording:

We record our webinars so that you can view them at your leisure time. So here is the video recording of this webinar:

Hope you like the webinar. Do let us know if you have any feedback/suggestion for us.

Telerik NativeScript

Resources for webinar “Build Truly Native Android & iOS Apps from Single JavaScript Codebase”

On Apr 30 2015, we conducted one more webinar titled “Build Truly Native Android & iOS Apps from Single JavaScript Codebase”. This blog post is a recap of the webinar. In this blog post you will be able to get hold of the slide deck & the video recording of the webinar.

About NativeScript:

NativeScript is a new technology that we i.e. Telerik have open sourced to the community. Using NativeScript you will be able to build truly native Android & iOS from a single code base with JavaScript as a language. You can know more about NativeScript from its home here: ww.nativescript.org.

Telerik NativeScript

Telerik NativeScript

Slide Deck:

Here is the slide deck used for the webinar:

Video Recording:

Here is the video recording of the webinar:

Additional Links:

Here are some more videos on NativeScript:

NativeScript Launch Keynote: https://www.youtube.com/watch?v=8hr4E9eodS4

How NativeScript Works: https://www.youtube.com/watch?v=I3_ZnWTj-NA

How to build Apps with NativeScript: https://www.youtube.com/watch?v=Glh927vSYKo

 

Till next time – Happy Coding.

Resources from webinar Node.js development using Visual Studio

On Jan 23 2014 we conducted the webinar on “Node.js development using Visual Studio”. This blog post will provide you some of the resources from the webinar like Slide Deck, Video recording of the webinar and source codes used in the demo.

Download source code and slide from webinar here

Node.js

Node.js is asynchronous event driven server side JavaScript. It is written in C++ and runs on Google V8 engine. Servers created using Node are high at performance and scalable. It perform File, DB and IO operations in non-blocking way.

Learn more about Node.js here

Slide Deck

Here is the slide deck from the webinar:

Video

As with every webinar, we have recorded this one too. Here is the video recording of the webinar for your leisure viewing

Download source code and slide from webinar here

T-Shirt Give Away

Every webinar we give away two .NET Ninja T-Shirts which have become quite popular among developers. In this webinar we have selected the following 2 persons to receive our t-shirt.

  • Ishitva Goel
  • Ramesh Pyru

Congratulations to the winners. We will contact you on the email address you have provided to us. We will ship the t-shirt to your address.

Thanks for attending webinar.

Download source code and slide from webinar here

clip_image002_thumb.jpg

MVVM using Kendo UI in three simple steps

Learn more about Kendo UI here

Find sample used in this blog on JSFiddle

Yes I know you love Kendo UI and you love MVVM as well. There are many libraries out there like Knockouts to help you creating HTML5 Apps adhering to MVVM pattern. In this post we will learn to create a simple application using MVVM.

Step 1: Create View Model

ViewModel can be created using Kendo.observable. Object of Kendo.observable will notify any changes to view. Let us create a studentViewModel as below.


var studentViewModel = kendo.observable({
                          name: "Dhananjay Kumar",
                          age : 30 ,
                          sayHello: function () {
                              var name = this.get("name");
                              var age = this.get("age");
                              alert("Hello, " + name + "You are" + age + "Years Old") ;
                                               }
                             });

studentViewModel contains two properties and one method sayHello.

Step 2: Create View

In second step let us go ahead and create View. You need to bind ViewModel to view.


<div id="studentview">
          <input data-bind="value: name" />
          <input data-bind="value: age" />
          <button data-bind="click: sayHello">Say Hello</button>
 </div>

Above in studentview , we are binding value of input types and click of button. There are many other HTML properties can be bind using Kendo UI MVVM like Text , Value , Visible , Html etc.

As you see we are using data-bind property to perform binding.

Step 3: Binding View and ViewModel

Third and final step you need to do is to bind View and ViewModel. Either you can bind ViewModel to a particular view (in this case div with id studentview) or you can bind ViewModel to any DOM element using body. Binding can be done as follows,

 kendo.bind($("#studentview"), studentViewModel);

This is all what you need to do to start creating HTML 5 Apps adhering MVVM pattern using Kendo UI. When you run app, you shall get expected output as below,

clip_image002

Last but not least do not forget to add references of KendoUI library in your project.

Find sample used in this blog on JSFiddle

I hope you find this post useful. Thanks for reading.

Learn more about Kendo UI here

image_thumb.png

JavaScript Objects and Inheritance using Kendo UI

Learn more about Kendo UI here

In this post we will take a look on JavaScript Inheritance using Kendo UI. To start with you create JavaScript object using Literals as following,


var Vehicle = {

model: "car",
 color: "red",
 sayGreeting: function () {

alert(this.model + this.color);
 }

};

There are other two ways to create JavaScript object also exists

  1. Using new operator
  2. Using Object.Create() static method.

Learn more about Objects in JavaScript here

Kendo UI gives you different syntax to create object and for inheritance.

image

Kendo UI gives you different syntax to create a JavaScript Object. You can create same Vehicle object using Kendo UI as below,

 var Vehicle = kendo.Class.extend({

model: "car",
 color: "red",
 sayGreeting: function () {

alert(this.model + this.color);
 }

});

You can use object created using Kendo UI as below,

var v = new Vehicle();
 v.sayGreeting();

You will get output as below,

clip_image001

In kendo UI , you can create object with Constructor as well. Using init method you can add a constructor to object. In below code snippet we are creating object with constructor.


var Vehicle = kendo.Class.extend({

model: "car",
 color: "red",
 init: function (model, color)
 {
 if(model) this.model = model;
 if(color) this.color = color;

},
 sayGreeting: function () {

alert(this.model +" "+this.color);
 }

});

Now you can create object passing with constructor as below,

 var v = new Vehicle("truck", "black");
 v.sayGreeting();

Above we are creating object passing argument to constructor and then calling sayGreeting() function as well. As output you will get alert message.

clip_image001[6]

Now we can extend object using extend method.


var luxuryVehicle = Vehicle.extend(
 {
 brand: "bmw",
 price : "23560$"

});

As you see that we added two more properties in child object. Let us go ahead and create a new instance of this object.


var a = new luxuryVehicle();
 a.color = "dark grey"
 a.sayGreeting();

Above we are overriding color property of parent class and calling method of parent class. As a output you will get overridden value of color and parents value for model.

clip_image001[8]

In this way you can work with object and inheritance in JavaScript using Kendo UI. I hope you find this post useful. Thanks for reading.

Learn more about Kendo UI here

image_thumb.png

How to work with RadChart in JavaScript based Application for Windows 8

In this post we will take a look on working with RadChart in JavaScript based Application for Windows Store. We will follow step by step approach in this blog post.

Step 1: Add References

Very first we will add Telerik JS and CSS files references in the project. If first time you are working with Rad Controls in Windows 8, I suggest you to read blog post to setup the environment

After adding the files in the project we need to refer them on the html file . Files can be referred as given in following code snippet.


<!--Telerik References -->
 <script src="/Telerik.UI/js/jquery.js"></script>
 <script src="/Telerik.UI/js/ui.js"></script>
 <link href="/Telerik.UI/css/dark.css" rel="stylesheet" />
 <link href="/Telerik.UI/css/common.css" rel="stylesheet" />

Step 2: Create a Chart

A chart can be created by setting data-win-control attribute of a div as Telerik.UI.RadChart.

image

At this point if we go ahead and run the application, we will get an output something like below

image

Step 3: Add Series

We can add series to a chart in two ways

  1. Declaratively in HTML
  2. Programmatically in JavaScript

Declaratively a series can be added by setting value of data-win-options. In following code snippet we are creating one series in the chart.


<div id="performancechart" data-win-control="Telerik.UI.RadChart"
 data-win-options="{
 series: [
 { type: 'column', name: 'Runs', data: [1000, 860,425,956,320]}

]
 }"
 />

&nbsp;

Series takes three parameters

  1. Type of the series
  2. Name of the series
  3. Data to be displayed in the series

In above code snippet, we are creating column type of series with name Runs and 5 data points. At this point if we go ahead and run the application, we should get a chart as following.

image

Programmatically chart series can be created as following,


var performancechart = document.getElementById("performancechart").winControl;
 var wicketcolumnseries = new Telerik.UI.Chart.ColumnSeries();
 wicketcolumnseries.data = [30,100,67,123,49];
 wicketcolumnseries.name = "Wicket";
 wicketcolumnseries.color = "green";
 wicketcolumnseries.visibleInLegend = true;
 performancechart.series.push(wicketcolumnseries);
 performancechart.refresh();

&nbsp;

In above code snippet following tasks has been performed

  1. Line 1: Getting reference of Chart as win control
  2. Line 2: Creating series of type Column
  3. Line 3: Setting data for the column series
  4. Line 4: Setting name of the column series
  5. Line 5: Setting colour of series
  6. Line 6: Making sure series is visible in Chart Legend
  7. Line 7: Pushing created column series to the series collection of chart
  8. Line 8: Refreshing the chart

Let us add one more series to chart declaratively in HTML.


<h1>Chart Demo</h1>
 <div id="performancechart" data-win-control="Telerik.UI.RadChart"
 data-win-options="{
 series: [
 { type: 'column', name: 'Match', data: [30, 25,22,28,25]},
 { type: 'column', name: 'Runs', data: [500, 360,125,456,320]}

],

 }"
 />

&nbsp;

So far we have added three series to chart. At this point of we go ahead and run the application then we should get a chart as following

image

There are many other types of series. We will explore them one by one in further posts.

Step 4: Add Category Axis

Category Axis can also be added in two ways,

  1. Declaratively in HTML
  2. Programmatically in JavaScript

In HTML we can add Category Axis as following


<div id="performancechart" data-win-control="Telerik.UI.RadChart"
 data-win-options="{
 series: [
 { type: 'column', name: 'Match', data: [30, 25,22,28,25]},
 { type: 'column', name: 'Runs', data: [500, 360,125,456,320]}

],
 categoryAxis: {
 categories: [2008, 2009, 2010, 2011, 2012]
 }

 }"
 />

&nbsp;

In JavaScript we can add Category Axis as following code snippet,

image

On running we will find chart with Category Axis as following,

image

Step 5: Working with Tooltip

We can configure tooltip at two levels

  1. At the chart level
  2. At the series level

Chart level tooltip can be configured as following snippet,

<div id="performancechart" data-win-control="Telerik.UI.RadChart"
 data-win-options="{
 series: [
 { type: 'column', name: 'Match', data: [30, 25,22,28,25]},
 { type: 'column', name: 'Runs', data: [500, 360,125,456,320]}

],
 categoryAxis: {
 categories: [2008, 2009, 2010, 2011, 2012]
 },
 tooltip: {
 visible: true
 }

 }",

 />

&nbsp;

At the series level we can configure tooltip as following

image

Now on running of the application we will find that when we move mouse on the chart values of the series are displayed as tooltip.

Final chart should look like as following,

image

For your reference full source code is given below,


<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>TestDemoJavaScript</title>

<!-- WinJS references -->
 <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
 <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
 <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

<!--Telerik References -->
 <script src="/Telerik.UI/js/jquery.js"></script>
 <script src="/Telerik.UI/js/ui.js"></script>
 <link href="/Telerik.UI/css/dark.css" rel="stylesheet" />
 <link href="/Telerik.UI/css/common.css" rel="stylesheet" />

 <!-- TestDemoJavaScript references -->
 <link href="/css/default.css" rel="stylesheet" />
 <script src="/js/default.js"></script>
</head>
<body>

 <h1>Chart Demo</h1>
 <div id="performancechart" data-win-control="Telerik.UI.RadChart"
 data-win-options="{
 series: [
 {
 type: 'column',
 name: 'Match',
 data: [30, 25,22,28,25],
 tooltip: {
 visible: true

 }
 },
 { type: 'column', name: 'Runs', data: [500, 360,125,456,320],}

],
 categoryAxis: {
 categories: [2008, 2009, 2010, 2011, 2012]
 }

 }",

 />

&nbsp;

</body>
</html>

&nbsp;

Future Post

In this post we learnt basics of working with Rad Chart. We focused on only one type of series. In further posts we will explore various series type and working with remote data in the Rad Chart. I hope you find this post useful. Thanks for reading.