Over a million developers have joined DZone.

New Features of the Visual Studio Icenium Extension

DZone's Guide to

New Features of the Visual Studio Icenium Extension

· Mobile Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

The recently announced Visual Studio Ultimate 2012 Icenium extension (Kendo UI for Mobile) by Telerik is a cross-platform mobile app framework based on PhoneGap and jQuery Mobile for iOS and Android. The Icenium extension can be downloaded here.

Let's start. What’s new in this version of the Icenium template? Open Visual Studio Ultimate 2012 and select the Icenium template from Project templates.


The latest release contains the following updates :

  • Icenium extension for Visual Studio (Beta): .NET developers can fully leverage the Icenium mobile development platform directly from Visual Studio! This allows for quick development of cross-platform apps for both iOS and Android. In addition, Team Foundation Server (TFS) and Subversion (SVN), for example, can now be used in addition to Icenium’s default support for GitHub, making it even easier to integrate Icenium into existing development workflows.
  • Apache Cordova 3.0 update: In Apache Cordova 3.0, every core API is taken apart into a plug-in on its own, and Icenium can now take advantage of this new architecture. Users will be able to selectively turn any core plug-in on or off. The same option will be available for all out-of-the-box advanced custom plug-ins, such as the Barcode Scanner, PushPlugin and SQLite.
  • Icenium Mist enhancements: Icenium Mist continues to mature with the inclusion of code analysis, code completion and its new integrated version control plugin, CodeMirror.
Run the project by selecting the tab ‘ICENIUM‘ from Visual Studio Ultimate 2012 and select the option ‘Run Project(Specified in Project Name) in simulator‘.


The device simulator launches with iPhone, iPhone 5S, iPad, Android Phone and Android Tablet simulators.


The simulator even specifies the geolocation and network connection feasibility options (wi-fi, cell2G, cell3G, cell4G and limited) connectivity options.


The Icenium DataViz project template contains default JSON data for populating charts and gauges, along with Cordova framework support for iOS and Android. The source code for these controls looks fairly simple by using jQuery Mobile and Cordova scripts using native HTML5 and minimized CSS3 :

    <!DOCTYPE html>
    <title>Kendo UI DataViz</title>
    <meta charset=”UTF-8″ />

    <link href=”kendo/styles/kendo.dataviz.mobile.min.css” rel=”stylesheet” />

    <!–Once the final theme is chosen the redundant css reference should removed–>
    <link href=”kendo/styles/kendo.dataviz.flat.min.css” rel=”stylesheet” />
    <link href=”kendo/styles/kendo.dataviz.silver.min.css” rel=”stylesheet” />

    <link href=”styles/main.css” rel=”stylesheet” />

    <script src=”cordova.js”></script>
    <script src=”kendo/js/jquery.min.js”></script>
    <script src=”kendo/js/kendo.dataviz.mobile.min.js”></script>

    <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>

    <!–Pie chart–>
    <div id=”tabstrip-pie-chart”
    data-title=”Pie Chart”

    <div data-role=”content” class=”view-content”>
    <div id=”pie-chart”></div>


    <div id=”tabstrip-gauge”

    <div id=”gauge-wrap” data-role=”content” class=”view-content”>
    <div id=”gauge”></div>
    <div class=”input-content”>
    <input id=”gauge-value” type=”range”>


    <!–QR code–>
    <div id=”tabstrip-qrcode”
    data-title=”QR Code”

    <div data-role=”content” class=”view-content”>
    <div id=”qrcode”></div>
    <div class=”input-content”>
    <input type=”text” id=”qrcode-value” value=”http://www.icenium.com/”>
    <a data-role=”button” id=”qrcode-generate”>Update QR</a>


    <!–Stock chart–>
    <div id=”tabstrip-stock-chart”
    data-title=”Stock Chart”

    <div data-role=”content” class=”view-content”>
    <div id=”stock-chart”></div>


    <div data-role=”layout”

    <div data-role=”header”>
    <div data-role=”navbar”>
    <a data-align=”right” data-role=”button” data-click=”app.changeSkin”>Flat</a>
    <span data-role=”view-title”></span>

    <div data-role=”footer”>
    <div data-role=”tabstrip”>
    <a href=”#tabstrip-pie-chart” data-icon=”globe”>Pie Chart</a>
    <a href=”#tabstrip-gauge” data-icon=”recents”>Gauge</a>
    <a href=”#tabstrip-qrcode” data-icon=”camera”>QR Code</a>
    <a href=”#tabstrip-stock-chart” data-icon=”featured”>Stock Chart</a>


Android chart

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda


Published at DZone with permission of Anindita Basak, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}