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.
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.
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.
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.
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.
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.
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.
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 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.
<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 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.
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.
This is a mobile app, but it hardly looks like one. Let's fix that.
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.
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".
<!-- 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.
<!-- 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.
<!-- 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 thenCtrl
+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.
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.
<!-- 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...
data-id
attribute. This value is what the views use to specify which layout they use via the data-layout
attribute.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.data-role='tabstrip'
designation. href
attribute that takes you to the view with that id
when the user taps that tabstrip item.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.
You can define a global transition to apply to all views by specifying it when the application is created.
<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...
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.
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.
<!-- 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.
<!-- 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.
<!-- 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 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.