How to do a Standalone Web Test using Test Studio

In this how to post we will see how to start Standalone Web Test using Test Studio.

Step 1

Open Test Studio and from New Test option in menu ribbon choose Web Test

clip_image001

You can see in the project files a Web Test has been added. If you want you can rename that by right clicking on the project and choosing the rename option.

clip_image002

Step 2

Double click on the Web Test project in the project files to open it on the StoryBoard. From menu ribbon select Record ->Launch a New Recording Browser. It will launch selected browser. You can select browser from the ribbon

clip_image004

Step 3

In browser perform some operations to test. After performing all the operation choose Run from the ribbon the run the test.

clip_image005

You will be asked to Save the Test.

clip_image006

Step 4

You can view all the steps with result.

clip_image008

On clicking of a step you can enable inline editing.

clip_image010

On the right you can see Property windows for a particular step.

clip_image012

You can view error log by clicking on View Log

clip_image014

You can see error log as following

clip_image016

Step 5

To see Step failure error detail click on step failure in the steps

clip_image018

Step failure detail is as following

clip_image020

You can view image of failure as following

clip_image022

You can examine Page DOM on clicking DOM tab as well.

clip_image024

Suggestion to resolve failure can be viewed on clicking on Resolve Failure

clip_image026

You can export result to file

clip_image028

On clicking of Export Result to file you will be asked to save the file.

clip_image029

A zip file will get saved at the given location. There will be following files inside the downloaded zipped file.

clip_image030

In this way you can perform standalone web testing

 

Getting Started with Kendo UI Mobile : Video

Add References


    Test Application
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
                <!-- Kendo UI Scripts --><script type="text/javascript" src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<script type="text/javascript" src="http://cdn.kendostatic.com/2012.1.515/js/kendo.mobile.min.js"></script>

Create View

</pre>
<div id="loginview" data-role="view">

<h1>This is Login View</h1>
</div>
<pre>

</pre>
<div id="detailview" data-role="view">

<h1>This is Detail View</h1>
</div>
<pre>

</pre>
<div id="settingview" data-role="view">

<h1>This is Setting View</h1>
</div>
<pre>

Initialize KendoUI

<script type="text/javascript">// <![CDATA[
        var app = new kendo.mobile.Application($(document.body),
            {
                initial: "loginview",
                layout: "defualtlayout"

            }
            );

// ]]></script>

Create Layout

</pre>
<div data-role="layout" data-id="defualtlayout">
<div data-role="header">
<div data-role="navbar"><a data-role="backbutton" data-align="left">
 Back
 </a>
 Test Application</div>
</div>
<div data-role="footer">
<div data-role="tabstrip"><a href="#loginview" data-icon="home">login</a>
 <a href="#detailview" data-icon="details">detail</a>
 <a href="#settingview" data-icon="settings">setting</a></div>
</div>
</div>
<pre>

Finally Full source code of Video is as following


    Test Application
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
                <!-- Kendo UI Scripts --><script type="text/javascript" src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<script type="text/javascript" src="http://cdn.kendostatic.com/2012.1.515/js/kendo.mobile.min.js"></script></pre>
<div data-role="layout" data-id="defualtlayout">
<div data-role="header">
<div data-role="navbar"><a data-role="backbutton" data-align="left"> Back </a> Test Application</div>
</div>
<div data-role="footer">
<div data-role="tabstrip"><a href="#loginview" data-icon="home">login</a> <a href="#detailview" data-icon="details">detail</a> <a href="#settingview" data-icon="settings">setting</a></div>
</div>
</div>
<pre>

</pre>
<div id="loginview" data-role="view">
<h1>This is Login View</h1>
</div>
<pre>

</pre>
<div id="detailview" data-role="view">
<h1>This is Detail View</h1>
</div>
<pre>

</pre>
<div id="settingview" data-role="view">
<h1>This is Setting View</h1>
</div>
<pre>
<script>
        var app = new kendo.mobile.Application($(document.body),
            {
                initial: "loginview",
                layout: "defualtlayout"

            }
            );
</script>

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.

Creating Netflix Movie Explorer Application using KendoUI and OData


Objective

In this post series we are going to make Netflix Movie Explorer App. We will use Kendo UI OData feed of Netflix to create application. Final application (after this post) will look like as following,

And on tapping of a movie, we will be navigated to

In order to create this application we will explore following in this post

  • Working with KendoUI Mobile ListView
  • Working with KendoUI Mobile View
  • Working with kendoUI Mobile View Layout
  • Working with Navigation between views
  • Working with creating datasource and OData.

To start with we need to add following reference on HTML page

After adding all the required references let us try to create a Mobile View. A Mobile view contains single HTML page with multiple mobile views on that. For example you can have LoginView, ShowDataView ,AboutView . All mobile views are a div element with data-role property set to view. A View can be created as following,

You can set default view of the application in Application Startup. Let us set default view of the application as LoginView. That can be set as following,

Additionally we can set layout of the mobile application as well. There are two ways we can set the layout. Either we can set on the application level or we can set on particular view level. Let us set layout on application level. This can be set as following,

We have set the layout of the application. Now we need to create application layout we set. A Layout can be created as following,

  • Create a <div> element.
  • Set data-role property as “layout”

Hence layout can be created as following,

A Layout can have a Header and Footer. We can define Header and Footer in layout as following,

Let us put a back button in the header. A back button can be put as following

image_thumb26

We have put nav bar and inside that a back button as header. A nav bar can be created as following

  • Create a <div> element.
  • Set data-role property to “navbar”

Inside the navigation bar we are putting a back button. That can be put as <a> link with setting data-role as “backbutton”

As of now we are done with navigation bar in header. Now let us create TabStrip in the footer.

image_thumb29

A TabStrip can be created as following,

  • Create a <div> element
  • Set data-role property to “tabstrip”

Inside “tabstrip” we can have buttons to navigate between the pages. We are putting three buttons to navigate. We can specify view to navigate in href property of <a>.

  • View to be navigated can be set by providing view id with hash tag as href property.
  • Data-icon can be set to provide a specific look to button.

Putting all the codes together,

<html>
 <head>
 <title>
 Test Application
 </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="js/jquery.min.js" type="text/javascript"></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>
 <body>
 <div data-role="view">
 <div data-role="header">Header</div>
 Hello world!
 <div data-role="footer">Footer</div>
 </div>

<div data-role="view" id="LoginView" >
 <h1>This is a Login View </h1>
 </div>
 <div data-role="view" id="DataView" >
 <h1>This is a Data View </h1>
 </div>
 <div data-role="view" id="AboutView" >
 <h1>This is a About View </h1>
 </div>
 <div data-role="layout" data-id="TestAppLayout">
 <div data-role="header">
 <div data-role="navbar">
 <a data-role="backbutton" data-align="left">
 Back
 </a>
 Test Application
 </div>
 </div>
 <div data-role="footer">
 <div data-role="tabstrip">
 <a href="#LoginView" data-icon="settings">Login</a>
 <a href="#DataView" data-icon="download">Data</a>
 <a href="#AboutView" data-icon="home">About</a>
 </div>
 </div>
 </div>

<script type="text/javascript">
 var app = new kendo.mobile.Application($(document.body), {
 initial: "LoginView",
 layout: "TestAppLayout"
 }
 );
 </script>

 </body>
</html>
</html>

Now go ahead and run the application. In mobile browser you should be getting output as following

image_thumb32

As of now we have set layout at the application level. If we want we can have different layout for different view. Let us try that by giving different layout to DataView.

Create specific layout for DataView as following,

image_thumb35

We can set layout for DataView as following,

image_thumb38

If you notice here we have set layout at application level as well as view level. When layout is set at both levels then view level layout takes precedence over application level layout. After doing above modifications we should be getting following output,

image_thumb41

On clicking of Data, you should be getting below output. If you notice Back button from header is working as expected.

image_thumb44

Now let us try to show some data from service. In this case we will be displaying Movie details from OData feed of Netflix.

You can find Title of all the Movies from Netflix ODATA from below link.

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

Very first we need to create DataSource reading data from ODATA feed. We can create KendoUI Datasource as following

image_thumb47

  • Instance of kendo.data.DataSource being created
  • Since data being fetched from ODATA feed so type is set to odata
  • Pagesize property is set to tell server how many records need to be fetched. In this case it is 5.
  • In Trasnport property we need to provide URL of ODATA feed.

Once we created datasource we need to create Template. In template we say how we want to show data in listview. A template can be created as following

image_thumb50

In template we set property of DOM elements with the property of datasource. For example we want to display name of the movie. We are setting that with datasource property data.Name. Here data is name of the datasource and Name is property. A very important point need to be noticed is href value of <a> DOM element. We are setting that to DataDetailView. On tap user will be navigated to this view.

As of now we have created datasource and temple. Now let us create listview. To create a listview modify data div as following,

image_thumb53

A listview can be created by setting data-role property of <ul> as listview. If you notice we are setting data-init property of view as getMovieDetails. In getMovieDetails function we are fetching data from OData feed and setting the template as following. We are setting template and datasource value in the property.

image_thumb56

Combining all the discussions together and putting all the codes together we should have following code in HTML file.

<html>
 <head>
 <title>
 Test Application
 </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="js/jquery.min.js" type="text/javascript"></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>
 <body>
 <div data-role="view">
 <div data-role="header">Header</div>
 Hello world!
 <div data-role="footer">Footer</div>
 </div>

<div data-role="view" id="LoginView" >
 <h1>This is a Login View </h1>
 </div>

<div data-role="view" id="DataView" data-init="getMovieDetails" >
 <ul id="movieTitleView" data-role="listview"></ul>
 </div>

 <div data-role="view" id="AboutView" >
 <h1>This is a About View </h1>
 </div>
 <div data-role="layout" data-id="TestAppLayout">
 <div data-role="header">
 <div data-role="navbar">
 <a data-role="backbutton" data-align="left">
 Back
 </a>
 Test Application
 </div>
 </div>
 <div data-role="footer">
 <div data-role="tabstrip">
 <a href="#LoginView" data-icon="settings">Login</a>
 <a href="#DataView" data-icon="download">Data</a>
 <a href="#AboutView" data-icon="home">About</a>
 </div>
 </div>
 <script type="text/javascript">
 var app = new kendo.mobile.Application($(document.body), {
 initial: "LoginView",
 layout: "TestAppLayout"

 }
 );
 </script>
<script id="movieTemplate" type="text/x-kendo-template">
 <div>
 <img src=${data.BoxArt.MediumUrl} height="50" width="50" />
 <strong>${data.Name}</strong>
 <a href="\#DataDetailView?Id=#:data.Id#"" data-role="detailbutton" data-style="detaildisclose"></a>
 </div>
 </script>
<script>
 var data;
 data = new kendo.data.DataSource(
 {
 type: "odata",
 pageSize: 5,
 endlessScroll: true,
 scrollTreshold: 30,
 transport:{
 read: {
 url: "http://odata.netflix.com/Catalog/Titles",
 dataType: "jsonp",

data: {
 Accept: "application/json"
 }
 }
 }

 });
 var getMovieDetails = function () {
 $("#movieTitleView").kendoMobileListView(
 {
 template: kendo.template($("#movieTemplate").html()),
 endlessScroll: true,
 scrollTreshold: 30,
 dataSource: data
 });
 };
</script>

 </body>
</html>

On running we should be getting output as following

image_thumb59

On tap of Data button we should get below output

image_thumb62

At this point of time of you tap on the detail button you will be getting an exception because we have not created detail view yet. Let us create detail view

image_thumb65

Here we are setting different layout to DataDetailView. Let us create layout as below,

image_thumb68

This layout structure is same as we discussed previously. Now we need to write function shwDeatilsView function. In this function we will fetch selected data from the server on basis of Movie selected in first view.

image_thumb71

This function is quiet simple. First we are reading query parameter as following,

image_thumb74

After that we are making a call to server to fetch specific detail of the movie. Server call is as following. We are setting filter to fetch specific record.

image_thumb77

Once data is being fetched from the server, we need to initialize downloaded data to Movie Detail template. This template will tell how we are going to show data in movie detail page.

image_thumb80

We need to write MovieDetailtemplate as following,

image_thumb84

Combining all the discussions together and putting all the codes together we should have following code in HTML file.


<html>
 <head>
 <title>
 Test Application
 </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="js/jquery.min.js" type="text/javascript"></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>
 <body>
 <div data-role="view">
 <div data-role="header">Header</div>
 Hello world!
 <div data-role="footer">Footer</div>
 </div>

<div data-role="view" id="LoginView" >
 <h1>This is a Login View </h1>
 </div>

<div data-role="view" id="DataView" data-init="getMovieDetails" >
 <ul id="movieTitleView" data-role="listview"></ul>
 </div>

 <div data-role="view" id="AboutView" >
 <h1>This is a About View </h1>
 </div>
 <div data-role="layout" data-id="TestAppLayout">
 <div data-role="header">
 <div data-role="navbar">
 <a data-role="backbutton" data-align="left">
 Back
 </a>
 Test Application
 </div>
 </div>
 <div data-role="footer">
 <div data-role="tabstrip">
 <a href="#LoginView" data-icon="settings">Login</a>
 <a href="#DataView" data-icon="download">Data</a>
 <a href="#AboutView" data-icon="home">About</a>
 </div>
 </div>
 </div>
 <div data-role="layout" data-id="TestAppDataLayout">
 <div data-role="header">
 <div data-role="navbar">
 <a data-role="backbutton" data-align="left">
 Back
 </a>
 Data
 </div>
 </div>
 <div data-role="footer">
 <div data-role="tabstrip">
 <a href="#DataView" data-icon="download">Save</a>
 </div>
 </div>
 </div>
 <div data-role="view" id="DataDetailView"
 data-layout="TestAppDataLayout"
 data-show="showDetailsView">
 <h1>This is a Data Detail View </h1>
 </div>

<script type="text/javascript">
 var app = new kendo.mobile.Application($(document.body), {
 initial: "LoginView",
 layout: "TestAppLayout"

 }
 );
 </script>

<script id="movieTemplate" type="text/x-kendo-template">
 <div>
 <img src=${data.BoxArt.MediumUrl} height="50" width="50" />
 <strong>${data.Name}</strong>
 <a href="\#DataDetailView?Id=#:data.Id#"" data-role="detailbutton" data-style="detaildisclose"></a>
 </div>
 </script>

<script id="movieDetailTemplate" type="text/x-kendo-template">
 <div>
 <img src=${data.BoxArt.MediumUrl} height="100" width="100"/>
 <br/>
 Movie Name : <strong>${data.Name}</strong>
 <br/>
 ${data.Synopsis}
 </div>
 </script>
 <script>
 var data;
 data = new kendo.data.DataSource(
 {
 type: "odata",
 pageSize: 5,
 endlessScroll: true,
 scrollTreshold: 30,

 transport:{
 read: {
 url: "http://odata.netflix.com/Catalog/Titles",
 dataType: "jsonp",

data: {
 Accept: "application/json"
 }
 }
 }

});

console.log(data);

 var getMovieDetails = function () {

$("#movieTitleView").kendoMobileListView(
 {
 template: kendo.template($("#movieTemplate").html()),
 endlessScroll: true,
 scrollTreshold: 30,
 dataSource: data
 });
 };
 var movieDetailTemplate = kendo.template($("#movieDetailTemplate").text());

function showDetailsView(e) {
 var view = e.view;
 console.log(view.params.Id);
 var query = view.params.Id.toString();
 var data1 = new kendo.data.DataSource(
 {
 type: "odata",
 serverPaging: true,
 serverFiltering: true,
 pageSize: 50,
 transport: {

 read: "http://odata.netflix.com/Catalog/Titles"
 },

filter: { filters: [{ field: "Id", operator: "eq", value: query}] }
 });
 data1.read();
 data1.fetch(function () {
 var item = data1.at(0);
 console.log(item);
 view.scrollerContent.html(movieDetailTemplate(item));
 kendo.mobile.init(view.content);
 });
 }

</script>

 </body>
</html>

Now let us go ahead and run application

image_thumb87

Now when we select a movie, we will go into detail of that movie

image_thumb90

Conclusion

Yes detail view is not that immersive. In second part of this post, we will make it more immersive and implement much more features. I hope you like this post. Thanks for reading.

Code Template in JustCode

Code Templates are reusable code snippets. Telerik Just Code helps to create reusable code templates for better developer productivity.

You can Free Trial of Telerik Just Code from here

There are three groups of Code Templates available

  1. Iteration
  2. Surrounding
  3. Conditional or basic statements

To insert code template you need to press ALT+END . You will get below popup

clip_image001

From popup you can choose code template to insert. If you are choosing

clip_image003

Now pressing tab will give you next variables to choose. In this way you can insert any code template by choosing it from popup.

You can insert a snippet using their acronym also. After the acronym press Shift+Space to insert code template.

You can also define your own code template. To create a code template click on JustCode->Option->CodeTemplate option from menu. Then click Add to add a new Code Template.

clip_image005

Basic syntax to create a template is as below,

$number[=function]$

Number is any natural number and function is any existing template function. If you want to create a basic template for If statement you can create it as below. I am giving acronym name as DJ.

clip_image007

In code after typing DJ when I press Shift and Space I get below code generated

clip_image008

In this way you can work with Code Template using Telerik Just Code. I hope this post is useful. Thanks for reading

 

Refactoring using JustCode

In this post we will see Refactoring techniques using Telerik JustCode. Telerik Just Code helps to perform following refactor operation.

You can perform many refactoring using Teleirk Just Code. Few of the refactoring can be performed are as below,

  • Convert Abstract class to Interface
  • Convert Interface to Abstract class
  • Convert Anonymous method to Lambda
  • Convert Anonymous method to Named Method
  • Convert Class selector to ID selector in CSS
  • Convert ID selector to Class selector in CSS
  • Convert Constructor to Factory method
  • Convert Extension method to Static method
  • Convert Method to Property
  • Convert Lambda to Named Method
  • Convert Lambda to Anonymous method and many more

Let us see few of the refactoring; we can perform using Telerik JustCode

Convert Abstract class to Interface

Let us s you have abstract class as below,

image

This class can be refactored to interface using Telerik Just Code.

  • Select class and press Alt+Insert
  • Choose R option
  • From R option choose convert to Interface

image

After converting resultant interface would be as below,

image

Convert Anonymous method to Lambda Expression

I have created a delegate as below,

image

And using delegate with anonymous function as below,

image

Above anonymous function can be converted to Lambda Expression as below,

  • Select anonymous function and press Alt+Insert
  • Choose R option
  • From R option choose convert to Interface

image

Resultant lambda expression would be as below,

image

Convert Anonymous method to Named Method

If you want to convert above anonymous method to named method, you can very much do that as below,

  • Select anonymous function and press Alt+Insert
  • Choose R option
  • From R option choose To Named Method

image

Resultant named method would be as below,

image

Convert Constructor to Factor Method

I have a class with constructor as below,

image

If you want to convert constructor to factory method, you can do that as below,

  • Select constructor and press Alt+Insert
  • Choose R option
  • From R option choose Convert Constructor to Factor method

image

Resultant factor method would be as below,

image

In similar way you can perform other refactoring operations using Telerik Just Code. I hope this post is useful. Thanks for reading

Code analysis using JustCode

Read Error Inspection using Telerik JustCode here

JustCode do on the fly analysis of the code. It does code analysis when you type the code and reports you and error or warning without any further delay.

image

You can download Telerik JustCode 60 days-trial version with dedicated support here

To have high lever perspective on Telerik JustCode, I have just console application and put no code so far.

image

JustCode does the analysis along with the visual studio inspection. It performs analysis using some custom inspection.

On the fly you can fix any error reported by pressing Alt+Enter. For example below Method2 is trying to pass parameter to Method1 whereas Method1 is defines without any input parameter. At the time of calling of Method1, on pressing Alt+Enter ,JustCode will suggest you the possible fixes.

image

JustCode performs below inspection on the Code,

For C#

  • Identical if and else clauses
  • Obsolete casts
  • Empty statements
  • Assignments with no effect
  • Unused private members
  • Unused parameters
  • Unused variables
  • Unused namespaces
  • Unreachable statements

For XAML

  • Missing object element type
  • Missing type of an attached property
  • Missing property that an attached property is referring to
  • Not found event handlers
  • Ambiguous property that an attached property is referring to

By default JustCode reports error in color red and warning in green.

Error in Red

clip_image002

If you want to change default color of reporting you can do it by navigating to

Tools->Options->Environment

clip_image004

I have changed error reporting color to blue and now error is reported in blue color as below,

clip_image006

Inspection of the code can be done in fours ways

Via a tooltip over a highlighted expression

clip_image001

Via a info popup

clip_image002

Via a tooltip in the Marker Bar

clip_image003

In the Error list Window

clip_image004

In this way you can perform analysis of code and fixing of any error reported using Telerik JustCode. I hope this post is useful. Thanks for reading

Code Navigation and Search with JustCode

Simply I cannot work without Telerik Just Code .It boost my productivity to next level. In this post, I am going to discuss on Code Navigation and Search feature of this amazing product. You may want to have a look on my previous post Error Inspection using Telerik Just Code

Advantages

  • Quickly navigate to different parts of code
  • Easily find definitions, errors, types, members etc.
  • Easily highlight found errors, types, members etc.
  • Quick navigation via Find Result Windows.
  • Camel case search : This searches capital letters of compound names

Go To options

There are four Go To Options available

clip_image002

clip_image003

In my sample console application I have created a class called Product. If I want to search that type (class in this case) then I can search like below,

clip_image004

Search Windows gives you information that class is internal class and its namespace name. if you press enter you will navigate to class definition.

Find Usage is another powerful feature . This can boost up productivity. This helps to navigate and search to different

  • Classes
  • Namespaces
  • Local variables
  • Methods
  • Fields

clip_image005

In Find Result windows you can see the usage of definitions or keywords. All different usage term would be open in different tabs. In below case type product and namespace usage is open.

clip_image006

In this way you can explore many other navigate options given by Telerik Just code option. I am very looking forward to explore more features of this amazing product. I will share my learning on the same  Smile

 

Working with RadDatePicker control for Windows Phone

In this post we will discuss about Telerik RadDatePicker control. You can download Telerik RadControl for Windows Phone from here

RadDatePicker control provides all the functionality of standard DatePicker control of Windows Phone 7 along with below added functionality

  1. Runtime validation
  2. Smoother animation
  3. Formatting of different special date in different style

To work with RadDatePicker control below references need to be added,

clip_image001

Working with RadDatePicker

To work with RadDatePicker, you need to add Telerik.Windows.Controls namespace on the xaml as below,

image

And you can create a Date Picker as below,

clip_image001[6]

If you want to change look, display and selector of control, you can very much do that using the formatter properties. You can apply two different types of formatting on the RadDatePicker.

clip_image003

DisplayValueFormat property of RadDatePicker controls allows you to format the selection of the date. It takes string input to format the display of the date. You can apply DisplayValueFormat as below,

clip_image002

After applying formatting you should get output as below,

clip_image003[6]

SelectorFormat property of RadDatePicker control allows you to remove any of the date components from selection. For example, if you only want to show day and month only you need to remove Y from the selectorformat . You can do remove year as below,

image

You should get expected date selection as below,

image

If you want to set maximum and minimum date for the selection, you can do that by setting value for MaxValue and MinValue property of RadDatePicker control.

clip_image002[6]

You can fetch selected value either as DateTime type or as String.

clip_image003[8]

RadDatePicker control comes with two buttons Ok and Cancel. By default images used in these buttons are taken from location

  • /Images/DateTimePickerOK.png
  • /Images/DateTimePickerCancel.png

There are three events exposed on RadDatePicker control.

image

By putting all together , you can use RadDatePicker control as below,


using System;
<phone:PhoneApplicationPage
x:Class="RadControlsWindowsPhoneApp3.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:telerikcontrols="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait"  Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<telerikcontrols:RadDatePicker  x:Name="datepicker"
DisplayValueFormat="{}{0:dd, MMMM, yyyy}"
SelectorFormat="d/m"
MaxValue="01/01/2020"
MinValue="11/11/2000"/>
</Grid>
</Grid>
</phone:PhoneApplicationPage>

In this way you can work with RadDatePicker control. I hope this post is useful. Thanks for reading

Working with AutoComplete Widget

To see how to work with Kendo UI widgets, let us see how to work with widget AutoComplete

Very first you write HTML as below,

image

Then you initialize HTML to provide Kendo UI functionality as below,

image

Now if you want to add event to AutoComplete then you can do in either ways,

image

Or you can add event in other way also. First get the AutoComplete widget

image

And then using bind method attach event as below,

image

You will get below codes on putting all the codes together for AutoComplete widget


<html >

<!--In the header of your page, paste the following for Kendo UI Web styles-->
<!--Then paste the following for Kendo UI Web scripts-->
<script type="text/javascript" src="Scripts/jquery.min.js"></script><script type="text/javascript" src="Scripts/kendo.all.min.js"></script>
<script type="text/javascript" src="Scripts/Test.js"></script>My Kendo UI Demo</pre>
<h1>Kendo UI Demo</h1>
<pre>
<input id="FruitsAutoComplete" type="text" /><script type="text/javascript">// <![CDATA[
var data = ["Mango",
"Banana",
"Apple",
"Grapes",
"Guava",
"Orange"];

$("#FruitsAutoComplete").kendoAutoComplete({
dataSource: data
});

var autoComplete = $("#FruitsAutoComplete").data("kendoAutoComplete");
autoComplete.bind("change", onChangeEvent);
function onChangeEvent() {
alert('Change event occurs');
}
// ]]></script>

On running you will get AutoComplete widget as below and on the change event an alert message.

image

In above sample, I have bound local data source to AutoCompleteBox. You can very much get data from external data source as well. You can create data source from ODATA service as below,

image

Above we are fetching Title of the movies from ODATA feed of NetFlix. In type we are specifying that service is retuning ODATA and at one time we are asking service to return 10 records.

Next you can set it as data source of AutoComplete as below,

image

For AutoComplete widget we are setting minimum length to get a suggestion is 3 and Name filed of data source will be used.

Putting all the codes together


<html >

<!--In the header of your page, paste the following for Kendo UI Web styles-->
<!--Then paste the following for Kendo UI Web scripts-->
<script type="text/javascript" src="Scripts/jquery.min.js"></script><script type="text/javascript" src="Scripts/kendo.all.min.js"></script>
<script type="text/javascript" src="Scripts/Test.js"></script>My Kendo UI Demo</pre>
<h1>Kendo UI Demo</h1>
<pre>
<input id="FruitsAutoComplete" type="text" /><script type="text/javascript">// <![CDATA[
var data = new kendo.data.DataSource({
type: "odata", // specifies data protocol
pageSize: 10, // limits result set
transport: {
read: "http://odata.netflix.com/Catalog/Titles"
}
});

$("#FruitsAutoComplete").kendoAutoComplete({
minLength: 3,
dataTextField: "Name",
dataSource: data
});
// ]]></script>

On running you should be getting AutoComplete widget as below,

image

In this way you can work with AutoComplete widget. I hope this post is useful. Thanks for reading.

Working with Calendar Widget

In this post we will explore Calendar Widget. This widget gives a graphical calendar as below,

image

This widget gives option to

  • Configure maximum date
  • Configure minimum date
  • Configure start view
  • Configure custom template for Month View.

You can create a Calendar widget as below,

First define a div in HTML with Id

clip_image001

And then in jQuery you need to convert HTML div in Kendo UI Calendar widget as below,

clip_image002

You can configure Calendar Behavior like maximum date and minimum date as below,

clip_image003

You can configure the start option with start JSON attribute as below,

clip_image004

You will get calendar widget in output as below,

clip_image005

You can get reference of calendar and set maximum date as below,

clip_image006

You can specify a selected date as below,

clip_image007

The various functions on Calendar widgets are as below,

  • Max to set and get maximum date.
  • Min to set and get minimum date.
  • Navigate to desire date
  • Value to set and get current date.
  • NavigateUp to navigate up
  • NavigateDown to navigate down
  • NavigateToPast to navigate past
  • NavigateToFuture to navigate future

If you want to navigate to past you can navigate as below,

clip_image001[6]

Various events associated with Calendar widgets are as below,

  • Change event to fetch selected date
  • Navigate event fired on navigation

You can work with Change event as below,

clip_image001[8]

In this way you can work with Telerik Kendo UI Calendar Widgets. I strongly recommend you to leverage goodness of Telerik Kendo UI in your web applications.

Introduction to Telerik Kendo UI

Kendo UI is HTML 5 and Jquery based framework and it helps you to create modern Web Applications. Kendo UI helps you

  • In Data Binding
  • In Animations
  • With UI widgets like Grid and Chart
  • With Drag and Drop API
  • In Touch support.

Download kendo UI from here

Once you download you get below folders

image

Navigate to example folder for examples on various widgets.

If you want to start developing web applications using KendoUI then you need to add required file in your project.

You need to add below files in Script folder

image

And you need to add below files in Style folder.

image

Even though I have added script files and css files in Script Folder and Style folder respectively, you are free to keep them anywhere as you want. After adding these files you need to link them in header of the HTML page. You can add reference as below,

image

In later post I will go in detail of Kendo UI and play around all other aspects. However working with any widgets is very intuitive. For example if you want to work with Kendo AutoComplete , you can do that as below,

image

And using Jquery you can assign value as below,

image

Putting all code HTML and Script together full code is as below,

Test.htm


<html >
<head>
<!--In the header of your page, paste the following for Kendo UI Web styles-->
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<!--Then paste the following for Kendo UI Web scripts-->
<script src="Scripts/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/kendo.all.min.js" type="text/javascript"></script>
<script src="Scripts/Test.js" type="text/javascript"></script>
<title>My Kendo UI Demo</title>
</head>
<body>
<h1>Kendo UI Demo</h1>
<input id="cricketerAutoComplete" />
</body>
<script type="text/javascript">
$("#cricketerAutoComplete").kendoAutoComplete(
["Sachin",
"Dhoni",
"Saurabh",
"Rahul"]);
</script>
</html>

When you run Test.htm in browser you should be getting below output.

image

In later post I will get into detail of all widgets. I hope this post is useful. Thanks for reading.