Your First Mobile Application in Icenium and Web API

Icenium Graphite is a new product from Telerik.  It is a part of a larger offering, Icenium.  You can download it now for free from Icenium web site.  The idea behind the tooling is simple.  It provides an environment for developers to create mobile applications using HTML and JavaScript that can be deployed to iOS and Android.  A key part of such solution is Kendo Mobile framework that is smart enough to adjust look and feel to match target platforms.  Telerik also provides build service.  With that you can develop applications for iOS on Windows.  You do not need Mac machine at all.  On the other hand, you get to reuse all your code between all platforms.  Windows Phone 8 is on the product road map already as well.  In this post I will walk through the steps of creating a mobile app in Icenium and consume Web Api service to show a list of items in your app.

Once you download and open Icenium, you will see a very simple user interface.  Just click on New button and pick project template.  I recommend you would start with Kendo UI template to save yourself trouble of downloading a number of JavaScript frameworks.  Once the project is created, you can immediately run it in simulator and see the results of your hard work.  I am now going to replace home tab with a list of artists from Chinook database.

First, let’s create Web Api project.  To do that simply create new project in Visual Studio, select ASP.NET MVC 4 template, then pick Web Api on the last page.  Now, add new item to the project’s Model folder, select Entity Framework Model template, select Generate From Database option and point to Chinook database.  Voila.  You now have model with appropriate connection string injected into web.config.  Now rename ValuesController to ChinooksController, delete all the methods, and add new method to get the list of artists.  In the method below I am returning two things – list of artists and total count.  Total count will be necessary to utilize a cool feature of Kendo mobile  – endless scrolling list.

    public class ChinooksController : ApiController
    {
        public object GetArtists(int page = 1, int pageSize = 20)
        {
            IEnumerable<Artist> returnValue;
            int count;
            using (var context = new ChinookEntities())
            {
                context.Configuration.ProxyCreationEnabled = false;
                returnValue =
                    context.Artists.OrderBy(one => one.Name).Skip((page - 1)*pageSize).Take(pageSize).ToList();
                count = context.Artists.Count();
            }
            return new
                {
                    Count = count,
                    Data = returnValue
                };

        }


    }

 

I am a fan of explicit routes, so I am going to add a new route to Web Api routes configuration (WebApiConfog in App_Start folder) as follows.

    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {

            config.Routes.MapHttpRoute(
                name: "ExplicitApi",
                routeTemplate: "api/{controller}/{action}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{action}",
                defaults: new { id = RouteParameter.Optional }
            );

        }
    }

Test this in Fiddler now.  I just navigated to http://localhost/ChinookAPIApp/api/chinooks/getartists in my case.  I did change project configuration to run in IIS instead of Express.  I just like to be able to run my app at any time, whether or not Visual Studio is running.

Now, let’s get back to mobile application.  First of all, I am going to use Kendo data source to get the data. To do this, right click on scripts folder in Icenium, click Add->New Item->JavaScript file.  I named mine data.js.

var data = (function()
{
    return {
      artists:  new kendo.data.DataSource({
            pageSize: 20,
            page:1, 
            serverPaging: true,
            transport: {
                read: {
                  url: "http://localhost/ChinookAPIApp/api/chinooks/getartists",
                  dataType: "json"
                },
                parameterMap: function(options) {
                    var parameters = {
                        pageSize: options.pageSize,
                        page: options.page,
                    };
                
                    return parameters;
                }
            },
            schema: {
                data: function (data) {
                    return data.Data;
                    
                },
                total: function (data) {
                    return data.Count;
                }
            }
          })
    };
})();

 

As you can see from above, the code is fairly simple.  I am pointing to my endpoint you saw above.  I am getting json formatted list of artists, I am adding parameters for my method to control page and page size.  I also configure server size paging to tell Kendo framework to call the service for the next page instead of doing the same on the client.  I also inform Kendo UI about the schema of my result – list of artists and total count.  Now, I am going to add a list view to my HTML.  I am going to delete everything from home tab and add a <ul> tag for my list view.

    <body>
        <div data-role="view" id="tabstrip-home" data-title="Artists">
             <ul id="artistsListView" data-role="listview"  data-style="inset"></ul>
        </div>

Now I need to configure my view.  I am going to do it in jQuery ready function call in the bottom of the home page.

        <script>
           
            var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
            $(function(){
                
              $("#artistsListView").kendoMobileListView({
                    endlessScroll: true,
                    dataSource: data.artists,
                    template: $("#artists-list-template").text(),
                    scrollTreshold: 10
                });
             
                
            });
            
        </script>

As you can see I am just using Kendo mobile API to give my list view a data source and indicate that it needs to support endless scrolling.  Endless scrolling will make calls to the server for more data as the user scrolls down my list.  The last piece of the puzzle is the template, which simply includes the name of the artist

        <script id="artists-list-template" type="text/x-kendo-template">
            <span style="display: inline-block;white-space: nowrap;">#=Name#</span>
        </script>

Nothing fancy, but does illustrate the point.  Here is how my app looks at the end

 

image_thumb  image_thumb1

You can download this project here.

Personally, I really like the idea of Icenium.  The IDE itself is decent enough.  I had a number of hiccups in it, but nothing too bad.  I do not have a key combination to format my code, like Visual Studio.  My JavaScript breakpoints sometimes are not hit as well.  Overall though, I can develop an iOS and Android app on Windows, which is really cool.  Read more about the technology on Icenium web site and Kendo Mobile site.

Enjoy.

4 Comments

  1. Hello Sergey

    Thanks for this nice articel. I’m also looking for a way to make crossplatform apps and Icenium looks promising.

    Can you give me an example how the output from the created json file is looking?

    Regards,

    Aren

Leave a Reply

Your email address will not be published. Required fields are marked *