Reader Level:
TUTORIAL

Creating Netflix Movie Explorer Application Using KendoUI and OData

Posted by dj Tutorials | HTML 5 June 25, 2012
This article demonstrates how to create a Netflix Movie Explorer application using KendoUI and OData in HTML 5 and C#.
  • 0
  • 0
  • 5273

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:

Netflix1.jpg

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

Netflix2.jpg

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

  1. Working with KendoUI Mobile ListView
  2. Working with KendoUI Mobile View
  3. Working with kendoUI Mobile View Layout
  4. Working with Navigation between views
  5. Working with creating datasource and OData.

To begin, we need to add the following reference in a HTML page:

Netflix3.jpg

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:

Netflix4.jpg

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:

Netflix5.jpg

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:

Netflix6.jpg

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:

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

Hence the layout can be created as in the following:

Netflix7.jpg

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

Netflix8.jpg

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

Netflix9.jpg

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:

  1. Create a <div> element.
  2. 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.

Netflix10.jpg

A TabStrip can be created as in the following,:

  1. Create a <div> element
  2. 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>.

  1. View to be navigated can be set by providing view id with hash tag as href property.
  2. 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 run the application. In the mobile browser you should be getting output as in the following:

Netflix11.jpg

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:

Netflix12.jpg

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

Netflix13.jpg

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:

Netflix14.jpg

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

Netflix15.jpg

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:
Netflix16.jpg

  1. An Instance of a kendo.data.DataSource is being created
  2. Since the data is being fetched from the ODATA feed, the type is set to odata
  3. The Pagesize property is set to tell the server how many records need to be fetched. In this case it is 5.
  4. 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:

Netflix17.jpg

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:

Netflix18.jpg

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.

Netflix19.jpg

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>

          <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 in the following


Netflix20.jpg

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

Netflix21.jpg

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.

Netflix22.jpg

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

Netflix23.jpg

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.

Netflix24.jpg

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

Netflix25.jpg

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.

Netflix26.jpg

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.

Netflix27.jpg

We need to write MovieDetailtemplate as in the following:

Netflix28.jpg

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>

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

Netflix29.jpg

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

Netflix30.jpg

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.

COMMENT USING

Trending up