KendoUI Mobile Development Part 2

KendoUI Mobile Development Simplified Part II

In this example you will learn how to setup a button click event. You will also learn what TabStrips are and how to setup click events with them.

Each of my blogs are itemized to break down the code section by section for clarity.

Now that you have the basics down for creating a simple page, I will explain how to setup your own button click events. Look at this code below:

<div data-role="view" data-title="Atari 800/XL/XE Programming" id="mobilehome">
<header data-role="header">
<div data-role="navbar" data-align="left">
<a class="button" data-align="right" data-role="button" data-click="Page2">Page 2</a>
<a class="nav-button" data-align="center">Atari</a>
<span data-role="view-title"></span>
</div>
</header>

Look at the section that says data-role="button". That data tag creates the button you see below:

 

 

The next part that says data-click="Page2" is a reference to a JavaScript button click. Look at this code below:

<script>
function Page2() {
alert("Button click test");
</script>
}

This generates a button click event called "Page2" that references the "data-click" tag above. So anytime you add a "data-click" tag it communicates to that JavaScript function by name. In the example above, I just used a simple alert to show that it works.


TabStrips:
Next I want to focus on KendoUI widgets known as TabStrips. A TabStrip allows the user to click on an icon at the bottom of the Mobile page view to display a new page. They are contained in a section known as the "footer". Here is an example of some TabStrips I developed:

<div data-role="footer">
<div data-role="tabstrip">
<a href="#graphics" data-icon="contacts">Display/Counter
</a><a href="#memory" data-icon="history">Memory
</a><a href="#conditions" data-icon="favorites">Conditions</a>
</a><a href="#randomnumber" data-icon="favorites">Random Number</a>
</div>
</div>

A footer is initialized with a tag such as <div data-role="footer">. This verifies that the footer section begins here.

A KendoUI TabStrip is initialized with a tag such as <div data-role="tabstrip">. This indicates that this area will be used to setup TabStrips.
In this example you see TabStrips called "Display/Counter", "Memory", "Conditions", and "Random Number". These are actually references to Atari Basic view (pages) I am developing currently. Each TabStrip can correspond to a link referenced by an "href". In the example above look at the section that shows href="#graphics". This creates a hyperlink to a view called "graphics", which in essence is just another aspx page.

The part that shows data-icon="contacts" creates the image you see at the top of each TabStrip. The images show here are a person, a arrow curved to the left, and two stars.

Event Clicks:

Now when the user clicks on any TabStrip an event is tied to that image. In the above example you see the section for <a href="#memory" data-icon="history">Memory</a>. This is known in HTML as an "anchor" tag which can be used to reference a new web page. You can also use jQuery code to create a function event. In the example code below, I setup a simple alert and changed the code a little to show how this is accomplished.

Here is the modified code:
<div data-role="footer">
<div data-role="tabstrip">
<a href="#graphics" data-icon="contacts">Display/Counter
</a><a href="#memory" data-icon="history" id="memory">Memory
</a><a href="#conditions" data-icon="favorites">Conditions</a>
</a><a href="#randomnumber" data-icon="favorites">Random Number</a>
</div>
</div>

Notice that the Tabstrip named "Memory" now shows id="memory". This is linked to the following JavaScript code below:

<script>
$("#memory").click(function () {
alert("You clicked the second Memory TabStrip");
});
</script>

Like the above button click event this will pop up an alert that says "You clicked the second Memory TabStrip".
 
Conclusion:
I hope this blog sheds some light on how to use simple KendoUI scripts in your application. In the next blog I will be explaining how to use jQuery to achieve simple tricks such as transferring text to a new view and other things.

I appreciate any feedback and welcome your questions to this blog.