The core of this article is to hopefully teach you how to get started in Mobile Development. You will need an installation of Visual Studio 2012 Ultimate to get started. You will also want to download the KendoUI frame here:
http://www.kendoui.com/download.aspx
In this blog you will learn how a mobile page is developed. I also explain how each part works in code to get a more indepth viewpoint. Finally you will learn what a ListView is and how to navigate to a new page.
Each of my blogs are itemized to break down the code section by section for clarity.
Here are some example KendoUI Mobile videos from my channel:
Here is an example program I created from my YouTube channel:
<html>
<head>
<title>Basic usage</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="../../../js/jquery.min.js"></script>
<script src="../../../js/kendo.mobile.min.js"></script>
<script src="../../content/shared/js/console.js"></script>
<link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
<link href="../../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
<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">Page 2</a>
<a class="nav-button" data-align="center">Atari</a>
<span data-role="view-title"></span>
</div>
</header>
<ul data-role="listview" class="inboxList" data-style="inset">
<li id="test1"><a data-rel="external">LDA</a></li>
<li id="test2" ><a data-rel="external">STA</a></li>
<li id="test3"><a>LDX</a></li>
<li id="test4"><a>LDY</a></li>
<li id="test5"><a>INX</a></li>
<li id="test6"><a>INY</a></li>
</ul>
</div>
When you are looking at a mobile application (such as on your cell phone) you are really only looking at HTML code. Now the code is utilized together with JavaScript, jQuery, C#, etc to create the activity that you experience when using your device.
In the first example above the html creates a "view" data-role="view". Think of a view as a mobile page and the rest should make sense. Inside the "view" you will make use of data tags that construct the framework of your application.
Look at the example above where you see data-title="Atari 800/XL/XE Programming". This section displays the title inside the mobile view. The ID tag id="mobilehome" is the identifier for that
Next you will see header data-role="header". This area contains the header information for the title. In this section is contained a "navbar" or "navigational bar" indicated by class="nav-button". This area can often be filled with buttons. So in the next section you will see data-align="right" data-role="button". This displays a button to the far left in the "navbar" area. The data-align is used to align the button to the "right". You can also use data-align="left" to do the opposite.
The following section shows span data-role="view-title". This section is where the title is first displayed in the "navbar" area.
After this the div tag and header tag are closed. Always be sure to close any matching tags.
Now we are onto displaying a "ListView" as see in data-role="listview". A ListView displays a horizontal bar across the screen from left to right. A ListView is most commonly used to link from one page to another. Here is an example of a complete ListView as seen above:
<li id="test1"><a data-rel="external">LDA</a></li>
This section shows a horizontal bar with the name "LDA" on it. When the user clicks it an event is activated by jQuery code as seen here:
$("#test1").click(function () {
var name1 = "LDA Test";
alert(name1);
kendo.mobile.application.navigate("app_pageA");
location.reload();});
The code above will look for an ID tag called "test1" and attach it to a click event. An alert displays the variable string "LDA Test". After the alert is closed, the application will navigate to a new view called "app_pageA". Finally the location.reload() will refresh the page.
This was a simple example to show how to create a simple application that responds to a ListView event. Next time we will learn about how Button click events work.
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.
No comments:
Post a Comment