KendoUI Mobile Development Part 3

KendoUI Mobile Development Simplified:

In this next example, I am going to instruct how to use jQuery to read text from the screen and transfer it to a new page.

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

We will be a different example program this time. Take a look at the code snippet below:

<div data-role="view" id="graphics" data-title="Graphics/Counter" data-layout="mobile-tabstrip">
<ul data-role="listview" data-style="inset" data-type="group">
<li>Atari Basic
<ul>
<li id="graphicsLV">
<h1>Graphics X</h1>
<span class="sales-up">
<p class="buttoncolorRed" align="right">x=0-16 (+16 no text window)</p>
</span></li>
<li>COLOR C<span class="sales-up">- C=0-3</span></li>
<li>PLOT X,Y<span class="sales-up"><p class="buttoncolorRed" align="right">X - horizontal Y - vertical</p>
</span></li>
<li>DRAWTO X,Y<span class="sales-up"><p class="buttoncolorRed" align="right">X - horizontal Y - vertical</p>
</span></li>
</ul>
</li>

The area that shows "Graphics X x=0-16 (+16 no text window)" will be transferred to a new page (view) once that ListView is clicked. This works by capturing the text image on the page with jQuery, navigating to a new view, and then showing the results from the previous page.

Take a look at the jQuery code below:

$("#graphicsLV").click(function () {
var lv1 = $("#graphicsLV").text();
alert(lv1);  alert("You clicked the first ListView");
kendo.mobile.application.navigate("#app_pageA");
$("#listviewTest").text("Text:" + lv1);
});

The script searches the tags above for the ID name of "graphicsLV" and connects this to a jQuery click event. Then a variable called lv1 is initialized that contains the text "Graphics X x=0-16 (+16 no text window)".

The alert message recalls the variable name of lv1 which is now loaded with the text that was displayed using <h1>Graphics X</h1> and <p class="buttoncolorRed" align="right">x=0-16 (+16 no text window)</p>.

Then the code navigates to a new page with "kendo.mobile.application.navigate("#app_pageA"). The section "app_pageA" is the new web page name.

After this the section "$("#listviewTest").text("Text:" + lv1)" searches for the new listview name "listviewTest" on the second page. Then it remembers the text contained in the variable lv1. The "Text:" is concatenated together with the text.

Take a look at the code on the new page (view) below:

<div data-role="view" id="app_pageA" data-init="mobileListViewHeadersInit" data-title="Atari 800 Programming" data-layout="databinding">
<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>   
<ul data-role="listview" data-style="inset">
<li id="listviewTest"><a data-rel="external"></a></li>
</ul>

In the code above the section that shows id="app_pageA" is the page name. The part that shows data-init="mobileListViewHeadersInit" can be ignored for now. I will explain that later. Just know that it communicates with a function called "mobileListViewHeadersInit". A "data-init" is a way to refresh ListView data. This is commonly seen on Facebook when you try to scroll to a page that contains more postings.

The part that shows data-layout="databinding" is a way of reproducing code over in a page. In the example above it is used to show the button much later.

The important part to pay attention to for now is the ListView section that shows <ul data-role="listview" data-style="inset">. This area identifies the ListView with the name of "listview". The data-style="inset" is used to format the ListView display style.

The new ListView name shows <li id="listviewTest"><a data-rel="external"></a></li>.

Once the user has navigated to the new page you will see the ListView filled with text:

Now recall the code earlier that showed $("#listviewTest").text("Text:" + lv1). This code recalls the text that was on the previous view and can now paste it in the new ListView found here called "listviewTest".

Conclusion:
jQuery can be used for a lot of different purposes. In this blog you learned how to capture the text on a ListView and transfer it to a new page.


About the author:
I received my Bachelor of Computer Science from Devry University in 2011. Shortly after I left a job of 8 years in banking to begin my adventure as a Web Developer and have been in the field to date.

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.