Tearch: Creating Twitter Search Application Using Kendo UI Mobile

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

1. Kendo UI Mobile View
2. Kendo UI Mobile ListView
3. Kendo UI DataSource
4. Kendo UI Template
5. Kendo UI ModalView
6. Working with HTML5 localstorage

The idea behind this application is that we will search tweets using the Twitter API returning JSON. The application will look as in the following:

On iPhone

On Android



Step 1 : Add References

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



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



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



Step 3: Create Setting View

In the setting view, we will use an input box and a button.



On the click event of the button, text from the input box will be saved in local storage. The Twitter search will be performed on the text saved in local storage. We are going to use the HTML5 localstorage API to save data locally. Note that the data-click attribute of the button is set to the JavaScript function savesettings. The savesettings function is as follows:



When the user navigates to the Settings view, the saved search term should be displayed to the user. For that we are setting the data-show attribute of the settings view to the JavaScript function readsetting. The readsetting function is as follows. In this function, we are checking whether there is any setting saved. If not then we are displaying the default text "#KendoUI".



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



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



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



Step 4 : Create Search View

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



In the code above, we are performing the following operations:

1. Creating a KendoUI Mobile view by setting the data-role property of the HTML div element as view
2. Setting the data-show attribute of the view to the JavaScript function showTweets
3. Creating a ListView inside the mobile view.
4. ListView is being created by setting the data-role attribute of the HTML ul element to listview

The Data-Template defines how data should be displayed. The Template can be created as in the following:



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



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



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

Default.html

HelloWord.js

I hope you find this article useful. Thanks for reading.