Creating Netflix Movie Explorer Application Using KendoUI and OData

Dhananjay Kumar
Jun 26, 2012
10.2k
0
0
Article

Objective

In this article series we are going to make a Netflix Movie Explorer application. We will use the Kendo UI OData feed of Netflix to create the application. The final application (after this article) will look as in the following:

And when a movie is recorded, we will be navigated to:

In order to create this application we will explore the following in this article:

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 begin, we need to add the following reference in a HTML page:

After adding all the required references let us try to create a Mobile View. A Mobile view contains a 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 in the following:

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

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

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

Create a <div> element.
Set data-role property as "layout"

Hence the layout can be created as in the following:

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

Let us include a back button in the header. A back button can be included as in the following:

We have used a nav bar and inside that a back button as the header. A nav bar can be created as in the following:

Create a <div> element.
Set data-role property to "navbar".

Inside the navigation bar we are using a back button. That can be done using an <a> link with setting the data-role as "backbutton".

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

A TabStrip can be created as in the following,:

Create a <div> element
Set data-role property to "tabstrip"

Within the "tabstrip" we can have buttons to navigate among the pages. We are using three buttons to navigate. We can specify the view to navigate in the 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>

</head>

<body>

<div data-role="header">Header</div>

Hello world!

<div data-role="footer">Footer</div>

</div>

<h1>This is a Login View </h1>

</div>

</div>

<h1>This is a About View </h1>

</div>

Back

</a>

Test Application

</div>

<a href="#LoginView" data-icon="settings">Login</a>

<a href="#AboutView" data-icon="home">About</a>

</div>

var app = new kendo.mobile.Application($(document.body), {

initial: "LoginView",

}

);

</script>

</body>

</html>

Now run the application. In the mobile browser you should be getting output as in the following:

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

Create a specific layout for DataView as in the following:

We can set the layout for the DataView as in the following:

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

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

Now let us try to show some data from the service. In this case we will be displaying Movie details from the OData feed of Netflix.
You can get the titles of all the movies from Netflix ODATA from the following link:

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

First we need to create a DataSource for reading the data from the ODATA feed. We can create a KendoUI Datasource as in the following:

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

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

In the template we set the property of the DOM elements to the property of the datasource. For example we want to display the name of the movie. We are setting that with the datasource property data.Name. Here the data is the name of the datasource and the Name is a property. A very important point to be noted here is the href value of the <a> DOM element. We are setting that to DataDetailView. On a tap the user will be navigated to this view. As of now we have created a datasource and a template. Now let us create a listview. To create a listview, modify the data div as in the following:

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

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

<html>

<head>

<title>

Test Application

</title>

</head>

<body>

<div data-role="header">Header</div>

Hello world!

<div data-role="footer">Footer</div>

</div>

<h1>This is a Login View </h1>

</div>

</div>

<h1>This is a About View </h1>

</div>

Back

</a>

Test Application

</div>

<a href="#LoginView" data-icon="settings">Login</a>

<a href="#AboutView" data-icon="home">About</a>

</div>

var app = new kendo.mobile.Application($(document.body), {

initial: "LoginView",

}

);

</script>

<div>

</div>

</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(

{

endlessScroll: true,

scrollTreshold: 30,

dataSource: data

});

};

</script>

</body>

</html>

On running we should be getting output as in the following

On tap of the Data button we should get results as shown in the following output:

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

Here we are setting a different layout to the DataDetailView. Let us create the layout as below:

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

This function is quite simple. First we read the query parameter as in the following:

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

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 the movie detail page.

We need to write MovieDetailtemplate as in the following:

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

<html>

<head>

<title>

Test Application

</title>

</head>

<body>

<div data-role="header">Header</div>

Hello world!

<div data-role="footer">Footer</div>

</div>

<h1>This is a Login View </h1>

</div>

</div>

<h1>This is a About View </h1>

</div>

Back

</a>

Test Application

</div>

<a href="#LoginView" data-icon="settings">Login</a>

<a href="#AboutView" data-icon="home">About</a>

</div>

Back

</a>

Data

</div>

</div>

<div data-role="view" id="DataDetailView"

data-layout="TestAppDataLayout"

data-show="showDetailsView">

<h1>This is a Data Detail View </h1>

</div>

var app = new kendo.mobile.Application($(document.body), {

initial: "LoginView",

}

);

</script>

<div>

</div>

</script>

<div>

<br/>

Movie Name : <strong>${data.Name}</strong>

<br/>

${data.Synopsis}

</div>

</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(

{

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 the application:

Now when we select a movie, we will go into the details of that movie:

Conclusion

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