Tearch: Creating Twitter Search Application using Kendo UI Mobile

In this post, we will create Twitter Search Application using Kendo UI Mobile. In order to create this application, we will learn about

  • Kendo UI Mobile View
  • Kendo UI Mobile ListView
  • Kendo UI DataSource
  • Kendo UI Template
  • Kendo UI ModalView
  • Working with HTML5 localstorage

Idea behind application is that we will search tweets using Twitter API returning JSON. Application will look like as following

On iPhone

image

On Android

image

Step 1 : Add References

Before we start creating application, we need to add the references of required css and js files.

image

After adding references we need to initlaize the Kendo Mobile Application. Put following code just before closing body tag.

image

Step 2: Create Layout

We will start with creating layout of the application. In header we want title of the application and in footer we want two buttons. Search button and Setting button. Layout can be created as following

image

Step 3: Create Setting View

In setting view, we are going to put input box and a button.

image

On click event of the button, text from input box will be saved in local storage. Twitter search will be performed on the text saved in local storage. We are going to use HTML5 localstorage API to save data locally. If you notice that data-click attribute of button is set to javascript function savesettings. Savesettings function is as following

image

When user will navigate to Settings view, saved search term should be displayed to user. For that we are setting data-show attribute of settings view to javascript function readsetting. Readsetting function is as following. In this function, we are checking that if there is any setting saved. If not then we are displaying default text “#KendoUI”.

image

Once setting is saved successfully, we want to show a message to user. We will use kendo UI Mobile ModelView widget to display confirmation message to user. To work with Kendo UI Mobile Model View, we need to put following div inside settings view

image

After putting model view we need to open this confirmation box once data is saved successfully. We can do that by modifying savesettings function. After modification function is as following. In below function we are getting reference of Kendo UI Mobile Modal View and calling Open method of that.

image

There is a close button in confirmation box. closeModalView javascript function is called on click event of this button to close the confirmation box.

image

Step 4 : Create Search View

Now we need to create view in which we will show the tweets on basis of the search term. Let us create Kendo UI Mobile View and put a Kendo UI Mobile ListView inside that view. ListView is KendoUI widgets used to show data. Fetched Tweets from Twitter Server will be displayed in the ListView.

image

In above code, we are performing the following operations.

  • Creating KendoUI Mobile view by setting data-role property of HTML div element as view
  • Setting data-show attribute of view to javascript function showTweets
  • Creating ListView inside mobile view.
  • ListView is being created by setting data-role attribute of HTML ul element as listview

Data-Template defines how data should be displayed. Template can be created as following

image

After creating Data-Template, we need to fetch tweets from Twitter on basis of search term and create Data Source. This can be done as following

image

The value of q is the search criteria in while creating transport to fetch tweets. We have created Data-Source and Data-Template. Next we need to set Data-Source and Data-Template of ListView. That can be done as following

image

After setting DataSource and DataTemplate our application is ready. To make application more immersive we have put some styling. You can find those CSS in code section of the article. For your reference source code of the application is as following

Default.html


<!DOCTYPE html>
<html>
 <head>
 <title></title>
 <meta charset="utf-8" />
 <script src="kendo/js/jquery.min.js"></script>
 <script src="kendo/js/kendo.mobile.min.js"></script>
 <script src="scripts/hello-world.js"></script>
 <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
 <link href="styles/main.css" rel="stylesheet" />
 </head>
 <body>

 <div data-role="view" id="searchview" data-title="Search" data-show="showTweets" >
 <ul id="tweetList"
 data-endlessScroll="true"
 data-role="listview"
 data-style="inset">

 </ul>
 </div>

<div data-role="view" id="settingview" data-title="Settings" data-show="readsettings">
 <input type="text" id="searchterm" class="searchterm"/>
 <a data-role="button" type="button" id="savebutton" data-click="savesettings">Save</a>
 <div id="status" data-role="modalview" data-title="Confirmation">
 <header data-role="header">
 <div data-role="navbar">
 <span data-role="view-title">Confirmation</span>
 </div>
 </header>
 <h2> Settings Saved.</h2>
 <div data-role="footer">
 <a id="closebutton" data-align="right" data-click="closeModalView" data-role="button">Close</a>
 </div>
 </div>
 </div>

 <div data-role="layout" data-id="mobile-tabstrip">
 <header data-role="header">
 <div data-role="navbar">
 <span data-role="view-title"></span>
 </div>
 </header>
 <div data-role="footer">
 <div data-role="tabstrip">
 <a href="#searchview" data-icon="search">Search</a>
 <a href="#settingview" data-icon="settings">Settings</a>
 </div>
 </div>
 </div>

 <script id="tweetTemplate" type="text/x-kendo-template">
 <img class="profileImage" src=#= profile_image_url# />
 <h4><a href="http://twitter.com/${from_user}">@#=data.from_user#</a></h4>
 <h5>#=text#</h5>
 </script>

 <script>
 var app = new kendo.mobile.Application(document.body,
 { transition: "slide",
 layout: "mobile-tabstrip",
 initial : "searchview"});

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

 

<pre> <style scoped>
 #searchterm {
 height:25px;
 width: 310px;
 margin-left: 03px;
 margin-top: 40px;
 margin-right: 03px;

 }
 #savebutton{
 display: block;
 text-align: center;
 margin: .7em .12em 0;
 font-size: 1.2em;
 }
 #closebutton{
 display: block;
 text-align: center;
 margin: .7em .12em 0;
 font-size: 1.2em;
 }

 #searchview
 h4 {
 display: inline-block;
 font-size: 1.2em;
 margin: 0.9em;
 }
 h5 {
 display: inline-block;
 font-size: 0.9em;
 margin-left: 5px;
 margin-top:0px
 }

 #searchview
 img {
 float: left;
 width: 4em;
 height: 4em;
 margin: 0;
 -webkit-box-shadow: 0 1px 3px #333;
 box-shadow: 0 1px 3px #333;
 -webkit-border-radius: 8px;
 border-radius: 8px;
 }

 </style></pre>

HelloWord.js


// JavaScript Document

// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);

// PhoneGap is ready
var termtosearch="#kendoui";
function onDeviceReady() {

}

function savesettings()
{
 localStorage["searchterm"]= $("#searchterm").val()
 var modalView = $("#status").data("kendoMobileModalView");
 modalView.open();

}

function readsettings()
{
 if(localStorage.searchterm)
 {
 $('#searchterm').val(localStorage["searchterm"]);
 termtosearch = localStorage["searchterm"];
 //console.log(termtosearch);
 }
 else
 {
 $('#searchterm').val("#kendoui");
 termtosearch = "#kendoui";
 //console.log(termtosearch);
 }
}

function closeModalView(e) {
 // find the closest modal view, relative to the button element.
 var modalView = e.sender.element.closest("[data-role=modalview]").data("kendoMobileModalView");
 modalView.close();
 }

&nbsp;
function showTweets(e) {

 if(localStorage.searchterm)
 {
 $('#searchterm').val(localStorage["searchterm"]);
 termtosearch = localStorage["searchterm"];
 //console.log(termtosearch);
 }
 else
 {
 $('#searchterm').val("#kendoui");
 termtosearch = "#kendoui";
 //console.log(termtosearch);
 }

var tweets = new kendo.data.DataSource(
 {

transport: {
 read: {
 url: "http://search.twitter.com/search.json",
 contentType: "application/json; charset=utf-8",
 type: "GET",
 dataType: "jsonp",
 data: {
 q: termtosearch
 }
 }
 },
 schema: {
 data: "results",
 total: "results_per_page"
 }

});

 tweets.fetch();
 var template1 = kendo.template($("#tweetTemplate").text());
 $("#tweetList").kendoMobileListView({
 dataSource: tweets,
 template:template1

 });

}

I hope you find this post useful. Thanks for reading

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s