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
On Android
Step 1 : Add References
Before we start creating application, we need to add the references of required css and js files.
After adding references we need to initlaize the Kendo Mobile Application. Put following code just before closing body tag.
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
Step 3: Create Setting View
In setting view, we are going to put input box and a button.
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
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”.
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
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.
There is a close button in confirmation box. closeModalView javascript function is called on click event of this button to close the confirmation box.
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.
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
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
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
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();
}
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
Follow @debug_mode
Helping Ninja Technologists 