Telerik blogs

Visual Studio is quite possibly the most beloved IDE of all time. It's frequently hailed as one of the primary reasons that the .NET platform was so successful. What it once did so well with Windows Applications, it carried into the world of web development with ASP.NET WebForms, web services, and eventually MVC. But it stopped just short of being the be all end all when the mobile revolution hit. And this was through no fault of it's own.

For this first time, nearly everyone had an Apple device of some sort. If they didn't have an Apple phone, it was most certainly Android. We had standardized on PC's for so long, and the mobile landscape changed this both immediately and drastically.

So how do we create apps for these wonderful new platforms?

Well, iOS was previously out of the question unless you owned a Mac and didn't mind spending some time learning not only Objective-C (which for C# developers feels like a step backwards in terms of language innovation), but also the Cocoa framework. This was a daunting task. I know because I tried to do it with some amount of success, and much gnashing of teeth. Although it has come a long way, XCode is just not even close to being the IDE that Visual Studio is. Android development was a bit more accessible, but still required an Eclipse download, a plugin install and then Java/XML development. Neither the iOS nor Android native options were terribly appealing to those of use who had spent our formative years mastering Visual Studio and the .NET platform. I was terribly frustrated that virtually non of my skills from the previous 5 years of development carried me into the mobile world. What's worse is that I was being asked to give up Visual Studio.

What if there was a way to use the skills I already have, and the tools I'm already familiar with to build iOS and Android apps? Where do I sign up for that?

Actually, you do it by grabbing a subscription to Icenium and installing the Visual Studio extension. In an unprecedented move, you can for the first time build mobile apps for install on iOS and Android with only a lightweight plugin for Visual Studio.

OMG! Please Tell Me This Is For Real!

It is. So the first thing you are going to need to do is release some of your excitement that you are actually about to build an iOS/Android app using Visual Studio and nothing else. Might I suggest a fist pump when nobody is looking.

Ready? Lets do this.

Getting Started

All you need to get started is an installed copy of Visual Studio 2012. Really. That's it.

Here is a screenshot of the app we are going to be building. It's called "The Facts", and it displays random Chuck Norris facts from a SQL Server database.

Step 1: Register For Icenium

The first thing that you will need to do is head over to Icenium.com an grab a trial subscription to the service.  If you're a DevCraft Ultimate customer, you've already got it.  Just check your control panel after you login to your account at Telerik.com

All signed up? Great; you may proceed to step two.

Step 2: Download Visual Studio Extension

Download the Icenium Visual Studio Extension installer file. Double-click and install it. It's pretty light-weight so don't be alarmed when it installs nearly instantly. I know you might have been hoping for a 1 gigabyte disk image file, but thanks to the magic of cloud services, all you need is this small installer. No whacky configuration. No altering path variables. Just a double-click.

Step 3: Create The App

Fire up Visual Studio and notice that you have some new project templates under "Icenium".

You have four project templates. Let me explain the differences.

  1. Blank - just an empty project containing the minimum amount of files to run.
  2. jQuery Mobile - A project template that contains the jQuery Mobile UI library with some samples.
  3. Kendo UI Mobile - A project template that contains the Telerik Kendo UI Mobile framework, which is designed specifically for the kind of app we are going to be building today.
  4. Kendo UI DataViz - A project template that contains Telerik Kendo UI Mobile, plus Telerik Kendo UI DataViz, which is for advanced charting and data visualization.

We are going to be using the Kendo UI DataViz Project Template today. Name the app 'the-facts', since we're going to be creating an application that displays random Chuck Norris facts. This is the next billion dollar app. We'll split the money.

Once the project is loaded, you may notice that there is an index.html page that loads up. Your first reaction may be, OK, where do I add my class files? You don't.

C# and VB class files get compiled into a dll which runs on the .NET framework. Neither iOS or Android supports the .NET platform, which means that you won't be writing any .NET in terms of the visual portion of the app. That's OK though! If you think about it, what would you be using anyway? Windows Forms? WPF? Those are Windows only technologies. There is only one technology that works the same everywhere; the web.

Wait! We are building a website!?! - Yes and no. We are going to be building our app like a website, but it's going to run on the device like an application. What happens is that the code is compiled into a an application that will display our site as if we were running it from a web server, but it's being served up locally from the device. Since we are running inside of a compiled app, we have access to the device capabilities through JavaScript.

You are still going to use your .NET skills for building the service portion of the app, and we are going to walk you through building the interface. Icenium apps are built using just HTML, JavaScript and CSS. As you will see, it's mostly just markup. HTML is quite simple and you will get the hang of this very quickly.

Now that we have the project loaded, lets take a minute to familiarize ourselves with it's structure.

  • Plugins
    • Used to add Plugins which provide you more access to more device features. This is not important for getting started. For now, just know why it's there.
  • Properties
    • Just a shortcut to your project's properties. Don't open them yet as it's a bit premature until we understand more about how this works.
  • App_Resources
    • Contains all of the image resources your app will need in two OS specific sub folders. These are images that will be the splash screen when your app is first launched, as well as the icon that is displayed by the device when the app is installed. Be default, we give you an Icenium image set, but we'll swap that out in a bit to customize it.
  • data
    • This folder is part of the demo. Go ahead and delete it.
  • kendo
    • This is where the source for Kendo UI lives. This is the UI framework we will be using to build the visual portion of the application, commonly referred to as the UI.
  • scripts
    • Where you put your application code will live. There are some files in there already. Go ahead and delete them all.
  • styles
    • Where your CSS goes for styling your application. You won't have to do much, if any styling thanks to Kendo UI Mobile handling most of this for you.
  • cordova.js
    • This little file is the platform that makes all of this possible. You don't need to open it, just know that it's the engine that's going to help us get access to device features.
  • index.html
    • HTML files are the visual portion of the application. You can have as many as you like, and you link them together the same way you would a website. We are only going to be using one file for this project, so the index.html will be all we will be using in terms of HTML

Step 4: Hello World!

Let's experiment with altering the visual portion of the application. Open up the index.html file. First delete all of the script files that we aren't referencing anymore because you deleted them in the steps above.

Delete Template Scripts

<!-- delete all of these files -->
<script src="scripts/app.js"></script>
<script src="scripts/pie-chart.js"></script>
<script src="scripts/gauge.js"></script>
<script src="scripts/qr-code.js"></script>
<script src="scripts/stock-chart.js"></script>
<!-- end of files to delete --> 

Now delete all of the content between the opening and closing <body> tags. This is demo code and we aren't going to need it since we're starting from scratch.

What we're left with is an empty page which has a bunch of JavaScript and CSS files referenced at the top. Let's go ahead and add some content. We'll start with the trite "Hello World" example.

Hello World Example

<h1>Hello World!</h1>

You can now hit the all mighty green play button in the Visual Studio toolbar and launch this application. It will launch in the Icenium Simulator.

Congratulations! You are up and running. Now that we have the simulator open, lets talk about it for a minute.

The Icenium Simulator

The simulator is not a mobile device. It's sole purpose is to provide you with a preview of what your application will look like along with some handy debugging tools. You can change the type of the device with the left most button. For now, this has no effect other than making the device look different. The OS version button also currently has no effect. The next few buttons allow you to rotate the device to landscape mode and back again. You can also refresh the application, or completely reload it. The last button is probably the one you will hit the most; Debug.

Debugging Your App

If you hit the "Debug" button, you will see the debugging tools popup from the bottom. If you recognize these tools, it's because they are the Chrome developer tools. We embedded them right in the simulator. If you know how to use the Chrome Developer Tools, you already know how to debug your applications.

Just for fun, double-click the "Hello World" text and change it to "Greetings World!", then press enter. Notice how the text changes in the simulator? Your changes are live and immediate. You could make the text a more impressive green color by styling it using the right-side "styles" panel.

tip: If you want to make the text bigger in the debugging tools, use Ctrl and +/-. This will increase/decrease the font size.

Step 5: Build The App

This is a mobile app, but it hardly looks like one. Let's fix that.

Using Kendo UI Mobile

Kendo UI Mobile is the UI toolkit that makes this all possible. It uses HTML to construct a mobile application. To begin, we need to define a "view" for the application.

Kendo UI Mobile Views

A "view" is just one of the many "screens" that our application will have. You can have one or many "views" in a single HTML file. Let's just start with a single one. Since our home view will display all the nerdy Chuck Norris facts, we'll call it "nerdy".

Creating A Kendo UI Mobile View

<!-- the nerdy jokes -->
<div data-role="view" id="nerdy">
    <p>Nerdy Chuck Norris facts will go here.</p>
</div>

This HTML defines a new "view", using HTML5 data attributes. Data attributes by themselves are not magic. They are just arbitrary attributes that you can add to elements containing whatever data you like.

To actually make this a mobile application, we need to tell Kendo UI Mobile that's what we want. Open up a script tag just before the closing </body> tag, but after the view. In that <script> block, you are going to create a new Kendo UI Mobile Application, specifying the entire page (document.body) as the content of the app.

Initialize The HTML As A Mobile Application

<!-- the nerdy jokes -->
<div data-role="view" id="nerdy">
  <p>Nerdy Chuck Norris facts will go here.</p>
</div>

<script>
  // create a new kendo ui mobile app using the whole page
  new kendo.mobile.Application(document.body);
</script>

This index.html page is then transformed into a mobile application. Run this in the simulator. It looks plain right now, and still not much like an app. However, switch to an Android device in the simulator and notice that the background turns black and the text turns white. That's Kendo UI Mobile adjusting this to look more like an Android app.



Add two more views. One view for the explicit jokes, and one for the dashboard, which will eventually hold a chart.

Add Kendo UI Mobile Views

<!-- the nerdy jokes -->
<div data-role="view" id="nerdy">
  <p>Nerdy Chuck Norris facts will go here.</p>
</div>

<!-- the explicit jokes -->
<div data-role="view" id="explicit">
  <p>Explicit Chuck Norris facts will go here.</p>
</div>

<!-- the dashboard -->
<div data-role="view" id="dashboard">
  <p>Chuck Norris charts will go here.</p>
</div>

<script>
  // create a new kendo ui mobile app using the whole page
  new kendo.mobile.Application(document.body);
</script>

By the way, chances are that as you copy and paste this HTML into Visual Studio, the code is not formatted which leaves your page looking sloppy. You can make Visual Studio format your HTML nicely by pressing Ctrl+e and then Ctrl+d.

Run this in the simulator. If you have the simulator open already, just save the page Ctrl+s and the simulator will update automatically for you.

However, it looks exactly the same. Where are the other views?

They are there, but Kendo UI Mobile is showing the first view by default. We just need a way to navigate to these other views. This is frequently done on mobile applications using a strip of buttons along the bottom of the screen that we call a "Tabstrip".

We could create a tabstrip in the "nerdy" view, but then it wouldn't be visible in the "explicit" and "dashboard" views. We certainly don't want to create three tabstrips. Kendo UI solves this problem with the concept of Layouts.

Kendo UI Mobile Layouts

Layouts are "Master Pages" for your views. They define a common layout for any view that references them. Your application will generally have one layout that defines common header and footer components that should be visible across all views.

Lets add a layout and put a Kendo UI Mobile Tabstrip in it.

Create A Kendo UI Mobile Layout

<!-- the nerdy jokes -->
<div data-role="view" id="nerdy" data-layout="main">
    <p>Nerdy Chuck Norris facts will go here.</p>
</div>

<!-- the explicit jokes -->
<div data-role="view" id="explicit" data-layout="main">
    <p>Explicit Chuck Norris facts will go here.</p>
</div>

<!-- the dashboard -->
<div data-role="view" id="dashboard" data-layout="main">
    <p>Chuck Norris charts will go here.</p>
</div>

<!-- the common layout for all views -->
<div data-role="layout" data-id="main">
  <!-- the footer widget pins the content to the bottom of the screen -->
  <div data-role="footer">
    <!-- the tabstrip widget creates the familiar mobile tabstrip -->
    <div data-role="tabstrip">
      <!-- each tabstrip button is an anchor. It's href attribute points
           to the id of the view that should be shown when that items is tapped. -->
      <a href="nerdy" data-icon="home">Clean</a>
      <a href="explicit" data-icon="delete">Explicit</a>
      <a href="dashboard" data-icon="more">Dashboard</a>
    </div>
  </div>
</div>

<script>
    // create a new kendo ui mobile app using the whole page
    new kendo.mobile.Application(document.body);
</script>

It's important to take note of a few concepts here...

  1. The layout has a data-id attribute. This value is what the views use to specify which layout they use via the data-layout attribute.
  2. The Tabstrip is contained in a footer widget. The footer widget is what's known as a "layout widget". It simply pins whatever content you put in it at the bottom of the device.
  3. The Tabstrip itself uses the data-role='tabstrip' designation.
  4. Each Tabstrip item has an href attribute that takes you to the view with that id when the user taps that tabstrip item.
  5. Each Tabstrip item has an icon specified by the data-icon attribute. Kendo UI Mobile includes a set of icons out of the box for you to use. If you need more, you just need to add them in. Read this article for precise information on how to do that.

Check the application now in the simulator. It's starting to look like an app!

Change to Android and notice that it puts the Tabstrip at the top and changes the look and feel of the application to be very Android specific. We call this "Adaptive Rendering". It's what enables you to write cross platform applications that look like they belong on the platform where they run.

All of this works, but as you go between views, the navigation is quite plain. Usually, the phone animates transitions between different screens. Kendo UI Mobile does that too! Let's add it in.

View Transitions

You can define a global transition to apply to all views by specifying it when the application is created.

Using A Slide Animation

<script>
  // create a new kendo ui mobile app using the whole page
  new kendo.mobile.Application(document.body, { transition: "slide" });
</script>

Now the views slide in. Nice! You can use other transitions too.

Try using one of the following instead of slide...

  • fade
  • zoom
  • overlay (similar to slide but moves the whole screen including the tabstrip)

If you want one view to animate differently than any of the other views, add a data-transition attribute to the view.

It would be great if we had a title bar for the application. It could tell us what view we're on and also be a place to put some buttons that perform additional actions.

Kendo UI Mobile Navbar

We call this component the "Navbar". To create a Navbar, use data attributes and place it inside a "header" layout widget. The "header" widget, as you might have guessed, pins content to the top of the screen. All of this goes inside the common "Layout" widget.

A Kendo UI Mobile Navbar

<!-- the common layout for all views -->
<div data-role="layout" data-id="main">
    <!-- the footer widget pins content to the top of the screen -->
    <div data-role="header">
        <!-- the navbar widget creates a title bar which can also hold buttons -->
        <div data-role="navbar">The Facts</div>
    </div>
    <!-- the footer widget pins the content to the bottom of the screen -->
    <div data-role="footer">
        <!-- the tabstrip widget creates the familiar mobile tabstrip -->
        <div data-role="tabstrip">
            <!-- each tabstrip button is an anchor. It's href attribute points
                 to the id of the view that should be shown when that items is tapped. -->
            <a href="nerdy" data-icon="home">Clean</a>
            <a href="explicit" data-icon="delete">Explicit</a>
            <a href="dashboard" data-icon="more">Dashboard</a>
        </div>
    </div>
</div>

Now the application has a Navbar.

The only problem with our Navbar is that it currently displays the static text "The Facts". What would be nice is if we could change the text in the header depending on which view we're in. We can do that by using the view-title widget in the layout.

Dynamically Change Navbar Title

<!-- the common layout for all views -->
<div data-role="layout" data-id="main">
    <!-- the footer widget pins content to the top of the screen -->
    <div data-role="header">
        <!-- the navbar widget creates a title bar which can also hold buttons -->
        <div data-role="navbar">
          <!-- the view-title widget displays the value of the view data-title attribute as the text -->
          <span data-role="view-title"></span>
        </div>
    </div>
    <!-- the footer widget pins the content to the bottom of the screen -->
    <div data-role="footer">
        <!-- the tabstrip widget creates the familiar mobile tabstrip -->
        <div data-role="tabstrip">
            <!-- each tabstrip button is an anchor. It's href attribute points
                 to the id of the view that should be shown when that items is tapped. -->
            <a href="nerdy" data-icon="home">Clean</a>
            <a href="explicit" data-icon="delete">Explicit</a>
            <a href="dashboard" data-icon="more">Dashboard</a>
        </div>
    </div>
</div>

Now we put whatever text we want to show in the "view-title" widget in the data-title attribute on each view. Here is what we have so far.

Complete Code

<!-- the nerdy jokes -->
<div data-role="view" id="nerdy" data-layout="main" data-title="The Facts: Clean">
    <p>Nerdy Chuck Norris facts will go here.</p>
</div>

<!-- the explicit jokes -->
<div data-role="view" id="explicit" data-layout="main" data-title="The Facts: Explicit">
    <p>Explicit Chuck Norris facts will go here.</p>
</div>

<!-- the dashboard -->
<div data-role="view" id="dashboard" data-layout="main" data-title="Dashboard">
    <p>Chuck Norris charts will go here.</p>
</div>

<!-- the common layout for all views -->
<div data-role="layout" data-id="main">
    <!-- the footer widget pins content to the top of the screen -->
    <div data-role="header">
        <!-- the navbar widget creates a title bar which can also hold buttons -->
        <div data-role="navbar">
          <!-- the view-title widget displays the value of whatever is in the 'data-title' attribute on the current view -->
          <span data-role="view-title"></span>
        </div>
    </div>
    <!-- the footer widget pins the content to the bottom of the screen -->
    <div data-role="footer">
        <!-- the tabstrip widget creates the familiar mobile tabstrip -->
        <div data-role="tabstrip">
            <!-- each tabstrip button is an anchor. It's href attribute points
                 to the id of the view that should be shown when that items is tapped. -->
            <a href="nerdy" data-icon="home">Clean</a>
            <a href="explicit" data-icon="delete">Explicit</a>
            <a href="dashboard" data-icon="more">Dashboard</a>
        </div>
    </div>
</div>

<script>
   // create a new kendo ui mobile app using the whole page
   new kendo.mobile.Application(document.body, { transition: "slide" });
</script>

Wow! You created an application and have only written one line of JavaScript. I told you this was easy!

Now that you know how a mobile application is structured and how to build different views, lets really start to add some functionality to the application.

Now you're ready to move on to part 2 where we connect this application to some database data and actually build it so that we can deploy it out to the device.


Burke Holland is the Director of Developer Relations at Telerik
About the Author

Burke Holland

Burke Holland is a web developer living in Nashville, TN and was the Director of Developer Relations at Progress. He enjoys working with and meeting developers who are building mobile apps with jQuery / HTML5 and loves to hack on social API's. Burke worked for Progress as a Developer Advocate focusing on Kendo UI.

Comments

Comments are disabled in preview mode.