Netflix Movie Explorer a Metro Application: Creating Step by Step

Download source code of this article from here

In this article we will follow step by step approach to create Netflix Movie Explorer Metro Application. We will use HTML and WinJS to create this application. See the video to understand expected behavior of the application.

Some of the features of application are as following

  • Browse movies from Netflix
  • Rate the Movies
  • Browse movies in Semantic views
  • Share the Rating of a particular movie with social media or via mail

To get it started, launch Visual Studio and create a new project by choosing Blank App Project template from Windows Metro Style tab. You need VS12 to create this application.

image

After creating project in default.html change “content goes here “with following

clip_image001

After that follow the steps as below,

Step 1: Create Data Source

Very first we need to create data source by reading JSON data from OData feed of Netflix movie database. That can be done using WinJS.xhr function

image

In above code snippet, we are performing following tasks

  • Making a call to Netflix OData using WinJS .xhr function
  • As input parameter to xhr function, we are passing exact url of OData Endpoint.
  • We are applying projection and providing JSON format information in URL itself.
  • Once JSON data is fetched form Netflix server data is being parsed and pushed as individual items in the WinJS list.

After fetching, data is being parsed using JSON Parser and individual items are pushed to movieArray. movieArray is defined as following

image

Step 2: Create ListView

After creating data source we need put WinJS ListView control on the page.

image

A HTML div can be converted to WinJS ListView by setting data-win-control attribute to WinJS.UI.ListView. Other options can be set like layout of the ListView. In this case we have set it to GridLayout, so data will be displayed horizontally. ListView needs data source to display data. Data source can be set either in HTML or in code behind. Let us set data source of movieListView to the movieArray.

image

Make sure that you are setting data source of ListView after the WinJS.xhr function call. At this point of time if you go ahead and run the application, you should be getting following output.

image

Step 3: Create ListView Template

In above output, data is in raw form. To make data more immersive and to show the way we want, we need to create template out of data. After creating template, it needs to be set as attribute of ListView. Template can be created as following

image

Template can be created by setting data-win-control attribute of HTML div as WinJS.Binding.Template . Inside div element

  • Binding image to Picture property of WinJS List or Array
  • Binding inner text of h4 element to Title property of WinJS List or Array

Once Template is created, it needs to be attached to the ListView. After attaching Template, ListView will be as following

image

No go ahead and run the application, you should be getting following shape of the application

image

Before we move ahead, let us put some CSS on ListView to make it more immersive

image

After applying styles on List View, your application should be in following shape.

image

Step 4: Grouping of DataSource

Next we want to group the movies as per first character of their title. For that create group functions as following.

image

After creating grouped functions, we need to create grouped item list and set it as itemDataSource of List View. Modify setting of ListView data source as following

image

Let us go ahead and run the application. At this point shape of the application should be as following

image

Step 5: Creating Header Template

Above we can see the header data is in raw form. So to make header information more immersive, you need to create template for header and then attach that to ListView

A header template can be created in same way as of item template. Header template is created as following

image

After creating Header Template, we need to attach this to ListView. So ListView will be modified as following

image

Let us go ahead and run the application. At this point shape of the application should be as following

image

Step 6: Adding Semantic Zoom

Next we need to add sematic zoom to the ListView. For that very first let us create a Semantic Zoom Template. We want to display movies with first letter of title in semantic zoom view.

image

After creating Semantic Zoom View template, we need to add a SemanticZoom WinJS control. Inside the Semantic Zoom control we need to put ListView (created in previous steps) and a Semantic Zoom View. We can put that as following.

image

After adding Semantic Zoom view we need to set data source of it. This can be set as following.

image

Last work we need to do in Semantiz Zoom is to apply styles.

image

Let us go ahead and run the application. At this point shape of the application should be as following

image

image

Step 7: Adding Output DIV

Now we need to add code to add output div. When user will select a particular movie detail of that movie will be displayed in the output div for rating.

image

And in code behind on the touch of a particular ListView item, we need to display that information in output div. For that add the following code in code behind

image

In above code snippet

  • Iteminvoked event is attached to the ListView
  • When item is invoked then itemPromise function is being called with parameter invokedItem
  • On the invokeditem data we can fetch attributes of ListView items
  • In last set the vales of HTML elements from selected items data.

Let us go ahead and run the application. At this point shape of the application should be as following

image

Step 8: Adding Rating control

To allow user for Rating, let us go ahead and add a WinJS Rating control. Rating control can be added as following

image

We can create a Rating control by setting data-win-control attribute of a div as WinJS.UI.Rating. Other data options like maxRating and averageRating can be set in data-win-options attribute.

After adding Rating control, we need to write code to allow users to perform rating.

image

Let us go ahead and run the application. At this point shape of the application should be as following

image

Step 9: Adding Code to Share Contract

We want our user should able to share the rating of movie on other applications like Mail, Twitter, Facebook. For that we will have to use ShareContract.

image

In above code we are getting the request and setting the title and description in data property. After that creating text to share and setting it in the data request. Above is the code to simple text sharing via ShareContract feature of Windows 8. Once we have share function is ready, we need to get the current view of application using DataTransferManager.getForCurrentView () and attach and event handler datarequested on same. When datarequested event will be fired ShowandShareContract function (created above) will be called and user will able to share using Share Charm.

image

Put above code just before ProcessAll() function and do not forget to declare following variable globally

image

Let us go ahead and run the application. At this point shape of the application should be as following. This is our final application.

image

In this application user can browse the movies, rate a particular movie and then share the rating with the friends on social media or mail.

Conclusion

In this post we learnt to create a Metro Application from scratch. Even though you can download source code of this article from here , I am sharing the codes below . Feel free to use them as you required.

default.html


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

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

<!-- testdemo references -->
 <link href="/css/default.css" rel="stylesheet" />
 <script src="/js/default.js"></script>
</head>
<body>
 <h1>Netflix Movie Application</h1>
 <div id="moviesTemplate"
 data-win-control="WinJS.Binding.Template">
 <div style="width: 150px; height: 130px;">
 <img src="#" style="width: 100px; height: 100px;"
 data-win-bind="alt: title; src: picture" />
 <div>
 <h4 data-win-bind="innerText:title"></h4>
 </div>
 </div>
 </div>

<div id="headerTemplate"
 data-win-control="WinJS.Binding.Template"
 style="display: none">
 <div class="simpleHeaderItem">
 <h1 data-win-bind="innerText: title1"></h1>
 </div>
 </div>

<div id="semanticZoomTemplate" data-win-control="WinJS.Binding.Template"
 style="display: none">
 <div class="semanticZoomItem">
 <h1 class="semanticZoomItem-Text"
 data-win-bind="innerText: title1">
 </h1>
 </div>
 </div>
 <div id="semanticZoomDiv" data-win-control="WinJS.UI.SemanticZoom">
 <div id="movieListView"
 data-win-control="WinJS.UI.ListView"
 data-win-options="{itemTemplate:moviesTemplate,
 groupHeaderTemplate: headerTemplate
 ,layout: {type: WinJS.UI.GridLayout} }">
 </div>
 <div id="zoomedOutListView"
 data-win-control="WinJS.UI.ListView"
 data-win-options="{itemTemplate: semanticZoomTemplate,
 selectionMode: 'none',
 tapBehavior: 'invoke',
 swipeBehavior: 'none' }">

</div>
 </div>
 <table>
 <tr>
 <td>
 <img id="selectedPlayerImg"
 style="width:250px;height:250px;"/>
 </td>
 <td>
 <h3>You are rating movie</h3><br />
 <span id="selectedPlayer"></span> <br />
 <span id="ratingPlayer"></span> <br />

<div id="ratingcontrol"
 data-win-control="WinJS.UI.Rating"
 data-win-options="{maxRating:10,avrageRating:4}" />

 </td>
 </tr>
</table>

&nbsp;

</body>
</html>

default.js


// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
 "use strict";

 var app = WinJS.Application;
 var activation = Windows.ApplicationModel.Activation;
 WinJS.strictProcessing();
 var movieArray = new WinJS.Binding.List();
 var dataTransferManager;
 var movieName;
 var selectRating;
 app.onactivated = function (args) {

 if (args.detail.kind === activation.ActivationKind.launch) {
 if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
 // TODO: This application has been newly launched. Initialize
 // your application here.
 } else {
 // TODO: This application has been reactivated from suspension.
 // Restore application state here.
 }

 dataTransferManager = Windows.ApplicationModel.
 DataTransfer.
 DataTransferManager.getForCurrentView();
 dataTransferManager.addEventListener("datarequested", ShowandShareContract);
 args.setPromise(WinJS.UI.processAll());

 WinJS.xhr({
 url: "http://odata.netflix.com/Catalog/Titles" +
 "?$format=json&$select=ShortName,BoxArt&$top=300"
 }).then(function (xhr) {
 var movies = JSON.parse(xhr.response).d;
 movies.forEach(function (i) {
 movieArray.push({
 title: i.ShortName,
 picture: i.BoxArt.MediumUrl
 });
 });
 });

var lstMovies = document.getElementById("movieListView").winControl;
 var groupedItemsList = movieArray.createGrouped(getGroupKey, getGroupData, compareGroups);
 lstMovies.itemDataSource = groupedItemsList.dataSource;
 lstMovies.groupDataSource = groupedItemsList.groups.dataSource;
 var lstMoviesZoom = document.getElementById("zoomedOutListView").winControl;
 lstMoviesZoom.itemDataSource = groupedItemsList.groups.dataSource;
 lstMovies.addEventListener("iteminvoked", function (eventObject) {
 eventObject.detail.itemPromise.then(function (invokedItem) {
 var selecteplayer = document.getElementById('selectedPlayer');
 selecteplayer.innerHTML = "<h2>" + invokedItem.data.title + "</h2>";
 movieName = invokedItem.data.title;

var selecteplayerImg = document.getElementById('selectedPlayerImg');
 selecteplayerImg.src = invokedItem.data.picture;

var ratingcontrolc = document.getElementById("ratingcontrol").winControl;
 ratingcontrolc.addEventListener("change", function () {
 selectRating = ratingcontrolc.userRating;
 document.getElementById('ratingPlayer').innerHTML = "<h3> as "
 + selectRating +
 " on scale of 10 <h3>";

});

});
 }, false);

&nbsp;
 }
 };

function compareGroups(left, right) {
 return left.charCodeAt(0) - right.charCodeAt(0);
 }

function getGroupKey(dataItem) {
 return dataItem.title.toUpperCase().charAt(0);
 }

function getGroupData(dataItem) {
 return {
 title1: dataItem.title.toUpperCase().charAt(0)
 };
 }

function ShowandShareContract(e) {

var request = e.request;
 request.data.properties.title = "Netflix Movie Explorer Application";
 request.data.properties.description = "Sharing from Netflix Movie Explorer Application";
 var textToShare = movieName + " has been rated " + selectRating + " out of 10 ";
 request.data.setText(textToShare);

}

app.oncheckpoint = function (args) {

 };

app.start();
})();

default.css

body {
}

@media screen and (-ms-view-state: fullscreen-landscape) {
}

@media screen and (-ms-view-state: filled) {
}

@media screen and (-ms-view-state: snapped) {
}

@media screen and (-ms-view-state: fullscreen-portrait) {
}
.win-listview
 {
 height: 500px;
 width: auto;
 border: 1px solid gray;
 }

.win-listview .win-container {
 margin: 10px;
 }
 .win-listview .win-container:hover {
 background-color: red;
 border-color: red;
 }

.semanticZoomItem
{
 width: 130px;
 height: 130px;
 background-color: rgba(38, 160, 218, 1.0);
}

.semanticZoomItem .semanticZoomItem-Text
 {
 padding: 10px;
 line-height: 150px;
 white-space: nowrap;
 color: white;
 }

&nbsp;

&nbsp;

I hope you find this post useful. Thanks for reading

Working with OData and WinJS ListView in Metro Application

In this post we will see how to consume Netflix OData feed in HTML based Metro Application. Movies information will be displayed as following. At the end of this post, we should have output as below,

image

Netflix exposed all movies information as OData and that is publicly available to use. Netflix OData feed of movies are available at following location

http://odata.netflix.com/Catalog/

Essentially we will pull movies information from Netflix and bind it to ListView Control of WinJS. We will start with creating a blank application.

image

In the code behind (default.js) define a variable of type WinJS List.

image

Now we need to fetch the movies detail from Netflix. For this we will use xhr function of WinJS. As the parameter of function, we will have to provide URL of the OData feed.

image

In above code snippet, we are performing following tasks

  • Making a call to Netflix OData using WinJS .xhr function
  • As input parameter to xhr function, we are passing exact url of OData endpoint.
  • We are applying projection and providing JSON format information in URL itself.
  • Once JSON data is fetched form Netflix server data is being parsed and pushed as individual items in the WinJS list.

As of now we do have data with us. Now let us go ahead and create a ListView control. You can create WinJS ListView as following. Put below code on the default.html

clip_image002

In above code we are simply creating a WinJS ListView and setting up some basic attributes like layout and itemTemplate. Now we need to create Item Template. Template is used to format data and controls how data will be displayed. Template can be created as following

image

In above code, we are binding data from the data source to different HTML element controls. At last in code behind we need to set the data source of ListView

image

Before you go ahead and run the application just put some CSS to make ListView more immersive. Put below CSS in default.css

image

Now go ahead and run the application. You should be getting the expected output as following

image

Let us consolidate all the codes from discussion.

Default.html

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

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

<!-- testdemo references -->
 <link href="/css/default.css" rel="stylesheet" />
 <script src="/js/default.js"></script>
</head>
<body>
 <h1>Netflix Movie Application</h1>
 <div id="moviesTemplate"
 data-win-control="WinJS.Binding.Template">
 <div style="width: 150px; height: 130px;">
 <img src="#" style="width: 100px; height: 100px;"
 data-win-bind="alt: title; src: picture" />
 <div>
 <h4 data-win-bind="innerText:title"></h4>
 </div>
 </div>
 </div>

<div id="movieListView"
 data-win-control="WinJS.UI.ListView"
 data-win-options="{itemTemplate : moviesTemplate,
 layout: {type: WinJS.UI.GridLayout} }">
 </div>

</body>
</html>

Code behind will have following codes

Default.js


// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
 "use strict";

 var app = WinJS.Application;
 var activation = Windows.ApplicationModel.Activation;
 WinJS.strictProcessing();
 var movieArray = new WinJS.Binding.List();
 app.onactivated = function (args) {

 if (args.detail.kind === activation.ActivationKind.launch) {
 if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
 // TODO: This application has been newly launched. Initialize
 // your application here.
 } else {
 // TODO: This application has been reactivated from suspension.
 // Restore application state here.
 }
 args.setPromise(WinJS.UI.processAll());

 WinJS.xhr({
 url: "http://odata.netflix.com/Catalog/Titles" +
 "?$format=json&$select=ShortName,BoxArt&$top=300"
 }).then(function (xhr) {
 var movies = JSON.parse(xhr.response).d;
 movies.forEach(function (i) {
 movieArray.push({
 title: i.ShortName,
 picture: i.BoxArt.MediumUrl
 });
 });
 });
 var lstMovies = document.getElementById("movieListView").winControl;
 lstMovies.itemDataSource = movieArray.dataSource;

 }
 };

app.oncheckpoint = function (args) {

 };

app.start();
})();

And CSS will be as following

default.css


body {
}

@media screen and (-ms-view-state: fullscreen-landscape) {
}

@media screen and (-ms-view-state: filled) {
}

@media screen and (-ms-view-state: snapped) {
}

@media screen and (-ms-view-state: fullscreen-portrait) {
}
.win-listview
 {
 height: 100%;
 width: auto;

 }
 .win-listview .win-container {
 margin: 10px;
 }
 .win-listview .win-container:hover {
 background-color: red;
 border-color: red;
 }
 .semanticZoomItem
{
 width: 130px;
 height: 130px;
 background-color: rgba(38, 160, 218, 1.0);
}

.semanticZoomItem .semanticZoomItem-Text
 {
 padding: 10px;
 line-height: 150px;
 white-space: nowrap;
 color: white;
 }

In this way we can work with OData and winJS ListView. I hope you find this post useful. Thanks for reading.

First look of Telerik India office

image

Telerik  is a recognized name in the space of developer tools. We make controls that deliver popping user experience and tools to make a normal developer a Ninja!

Once we wondered – where do we find the most Developer Ninja’s in the world? The answer didn’t really require us to be enlightened. So, Telerik India came into being!

I am here with some snaps of Telerik India office. Our office is on Sohna Road, Gurgaon. It is on the 5th floor of Shopper Stop building.

image

image

image

image

image

image

On behalf of Telerik India, I invite you to visit our office and have a technological chit chat over coffee. Trust me our coffee machine‘s coffee is worth trying once

Create Windows Azure Website in 6 Steps

In this post we will create a Windows Azure Website in 6 simple steps. Windows Azure Website is a new feature of Windows Azure and got introduced on 7th June.

Step 1

Very first you need to Login to Windows Azure Management Portal. After successful login from the left panel, click on WEB SITES.

clip_image001

Step 2

Next click on CREATE A WEBSITE

clip_image003

Step 3

You can create a WebSite in three ways

  1. Quick Create
  2. Create with DataBase
  3. From Gallery

In this post we are creating Site using Quick Create WebSite option.

clip_image005

We have provided URL and selected the region to host the website.

clip_image007

Step 4

After successfully creating website click on Name of the website.

clip_image009

On clicking DASHBOARD will be open. On Dashboard you can see all the details about the website. From quick glance section select option of Download publish profile.

clip_image011

Make sure in the Configure tab .Net Framework version is selected to V4.0

clip_image013

Step 5

Open Visual Studio and create a new ASP.Net MVC 4.0 Application.

clip_image015

Choose project template as Internet Application.

clip_image017

Step 6

You can edit website per your requirement. In this post our purpose is to learn publishing the ASP.NET MVC Internet Application in Windows Azure website. For that right click on the project and choose publish

clip_image018

Next we need to import publish file. Click on import button and choose file we downloaded previously in step 4.

clip_image020

Select publish file to import.

clip_image021

You will notice all the settings have been imported. Click on Publish to publish ASP.Net MVC Application to Windows Azure website.

clip_image023

After successful publish operation Windows Azure website will be open in default browser.

Working with KendoUI Mobile Switch in Four steps

In this post we will learn how to work with KendoUI Mobile ActionSheet in four steps. You can learn more about this here

Switch is in action as following

clip_image001 clip_image002

Let us follow below steps to work with switch.

Step 1

Add all the required references to work with Kendo UI on your page .Make sure you are adding references in Head section of the page


<head>
 <title>
 Working with Switch
 </title>
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css" rel="stylesheet" />
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css" rel="stylesheet" />
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.mobile.all.min.css" rel="stylesheet" />
 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 <!-- Kendo UI Scripts -->
 <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js" type="text/javascript"></script>
 <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.mobile.min.js" type="text/javascript"></script>

</head>

Step 2

Next we need to create a main view on the page and initialize the page to be used as page of mobile application. For this just above closing body tag add following script

<script>
var app = new kendo.mobile.Application($(document.body), {
initial: "mainview"
});
</script>
</body>

You will notice that we have set initial view property. So let us go ahead and create a view with the id mainview

<div data-role="view" id="mainview" >

</div>

By this step we have added all the required references and created the main view to put Switch inside that.

Step 3

Now we can put a Mobile Switch as following


<div data-role="view" id="mainview" >
<input type="checkbox" data-role="switch" />
</div>

Only you need to provide value of data-role attribute as switch of checkbox element. Suppose we want to check this on click event of a button. For that let us put a button in the maindiv . On click of button we will check whether switch is on or off.

After adding button div will be as following


<div data-role="view" id="mainview" >
<input type="checkbox" data-role="switch" id="onoffswitch" />
 <a data-role="button" data-click="checkSwitchState">Check Switch State</a>
</div>

And on click of button function checkSwitchState is being called. See the data-role property of button. Now let us write checkSwitchState function.


<script>
 function checkSwitchState() {
 var switch1 = $("#onoffswitch").data("kendoMobileSwitch");
 var checked = switch1.check();
 alert(checked);
}
</script>

You can Toggle the button as following,


<script>
 function checkSwitchState() {
 var switch1 = $("#onoffswitch").data("kendoMobileSwitch");

 switch1.toggle();

}
</script>

Now let us stop for a moment and run the page to see how it works

image

image

On click event of the button, switch will be toggled and we will get alert on the state of the switch.

image

And on clicking Ok switch will be toggled.

image

Below you can find full source code of above discussions.

<!DOCTYPE html>
<html>
<head>
 <title>
 Sharing on Social Media
 </title>
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css" rel="stylesheet" />
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css" rel="stylesheet" />
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.mobile.all.min.css" rel="stylesheet" />
 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 <!-- Kendo UI Scripts -->
 <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js" type="text/javascript"></script>
 <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.mobile.min.js" type="text/javascript"></script>

</head>
<script>
 function checkSwitchState() {
 var switch1 = $("#onoffswitch").data("kendoMobileSwitch");
 var checked = switch1.check();
 alert(checked);
 switch1.toggle();
 }
</script>

<body>
<div data-role="view" id="mainview" >
<input type="checkbox" data-role="switch" id="onoffswitch" />
 <a data-role="button" data-click="checkSwitchState">Check Switch State</a>
</div>
<script>
 var app = new kendo.mobile.Application($(document.body), {
 initial: "mainview"
 });
</script>
</body>
</html>

Step 4

Sometime you may want to fire an event when user is changing state of the switch. You can do that as following


$("#onoffswitch").data("kendoMobileSwitch").bind("change", function (e) {
 console.log(e.checked); // true or false
 alert(e.checked);
 });

In this way we can work with Switch in KendoUI Mobile in four steps. I hope you find this post useful. Any comment is welcome.

Working with KendoUI Mobile ActionSheet in Four steps

In this post we will learn how to work with KendoUI Mobile ActionSheet in four steps. You can learn more about this here

ActionSheet in action as below,

image

Let us start creating it by following below steps.

Step 1

Add all the required references to work with Kendo UI on your page .Make sure you are adding references in Head section of the page


<head>
 <title>
 Sharing on Social Media
 </title>
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css" rel="stylesheet" />
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css" rel="stylesheet" />
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.mobile.all.min.css" rel="stylesheet" />
 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 <!-- Kendo UI Scripts -->
 <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js" type="text/javascript"></script>
 <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.mobile.min.js" type="text/javascript"></script>

</head>

Step 2

Next we need to create a main view on the page and initialize the page to be used as page of mobile application. For this just above closing body tag add following script


<script>
 var app = new kendo.mobile.Application($(document.body), {
 initial: "mainview"
 });
</script>
</body>

You will notice that we have set initial view property. So let us go ahead and create a view with the id mainview


<div data-role="view" id="mainview" >

</div>

By this step we have added all the required references and created the main view to put Action Sheet inside that.

Step 3

Now we will add a button. On touch of this event ActionSheet will be open. Let us add button inside the view as following


<div data-role="view" id="mainview" >
 <a data-role="button" data-rel="actionsheet" href="#shareonSocialMediaActionSheet
">Share on Social Media</a>

</div>

If you notice in button attributes we are setting

clip_image002

Step 4

Now we need to add actionsheet on the page. ActionSheet can be created by setting data-role property of <ul> as actionsheet . To create actionsheet there must be at-least one <li> inside <ul>. shareOnsocialmedia actionsheet can be created as following


<ul data-role="actionsheet" id="shareonSocialMediaActionSheet">
 <li><a data-action="functionToShareOnFacebook">Facebook</a></li>
 <li><a data-action="functionToShareOnTwitter">Twitter</a></li>
 <li><a data-action="functionToShareOnLinkedin">Linkedin</a></li>
 <li><a data-action="functionToShareOnFlickr">Flickr</a></li>
</ul>

Some points about above code is as following

  • There are links <a> inside <li>. data-action attribute of <a> is set to JavaScript function we want call on the tap of the item in actionsheet
  • After execution of the function set in data-action control will returned to calling DOM element.
  • By default a cancel item will get added to the ActionSheet.

Running Application

Let us go ahead and run the application to see ActionSheet in the action.

clip_image001

On touch of this button ActionSheet will open as following

clip_image003

You can see that Cancel item has been added by the framework itself. On tap of cancel control will return to calling DOM element.

Below you can find full source code of above discussion


<!DOCTYPE html>
<html>
<head>
 <title>
 Sharing on Social Media
 </title>
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css" rel="stylesheet" />
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css" rel="stylesheet" />
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.mobile.all.min.css" rel="stylesheet" />
 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 <!-- Kendo UI Scripts -->
 <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js" type="text/javascript"></script>
 <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.mobile.min.js" type="text/javascript"></script>

 <script>
 function functionToShareOnFacebook(e) {

 console.log("share on FB");
 }

function functionToShareOnTwitter(e) {
 console.log("share on Twitter");
 }
 function functionToShareOnLinkedin(e) {
 console.log("share on Linkedin");
 }

function functionToShareOnFlickr(e) {
 console.log("share on Flickr");
 }

 </script>

</head>

<body>

<div data-role="view" id="mainview" >
 <a data-role="button" data-rel="actionsheet" href="#shareonSocialMediaActionSheet">Share on Social Media</a>
<ul data-role="actionsheet" id="shareonSocialMediaActionSheet" cancel="hello" >
 <li><a data-action="functionToShareOnFacebook">Facebook</a></li>
 <li><a data-action="functionToShareOnTwitter">Twitter</a></li>
 <li><a data-action="functionToShareOnLinkedin">Linkedin</a></li>
 <li><a data-action="functionToShareOnFlickr">Flickr</a></li>
</ul>
</div>
<script>
 var app = new kendo.mobile.Application($(document.body), {
 initial: "mainview"
 });
</script>
</body>
</html>

In this way you can work with KendoUI Mobile ActionSheet in four steps. I hope you find this post useful. Thanks for reading.

Joined Telerik India as Customer Advocate

Before I start this post a special thanks to Julie Lerman and Chris Eargle , for all their support in chasing my aspiration of Telerik.

I am excited to share with you that I have joined Telerik India as Customer Advocate. I will be working from Delhi/NCR region. And I will be reporting to Abhishek Kant (Country Manager, Telerik India).  I thank Abhishek Kant , John Bristowe and Stephen Forte for their confidence in me for this job.

image

As Customer Advocate I will be working very closely with Developers and Customers using Telerik products. I will take developers input on products and convey that to development team to make products better and more useful.

For illustration some of my work will be as following,

  • I will work with customers closely to understand their development eco system and help them solving their problems.
  • I will create awareness in Developer community about Telerik Products by creating demos, samples etc
  • I will be authoring whitepapers, blogs, articles etc.
  • I will be conducting trainings, sessions etc. on Telerik products.
  • I will convey information about any new or existing Telerik Product to bloggers, Tech Writers and Community leaders.

In nutshell, I will be responsible for educating developers, customers about Telerik products and helping development team to understand more about developer community and market trend on the products.

I am very happy and excited for this role since I have been aspired for this type of work from very beginning of my career. I cannot imagine this progress in my career without help of many people, who have been helping me as mentor and friend. I would take this opportunity to  thank following people for their consistent help and motivation [In no particular order ]

Finally I am very excited to work closely with customers, community and developers.

Feel free to reach me at

image

Keep reading my blog and wish me good luck for my new journey.