Mobile Zone is brought to you in partnership with:

Pro Direct Delivery Manager on Windows Azure Platform of Microsoft & Senior System Analyst in Sonata Software North America Inc. Anindita is a DZone MVB and is not an employee of DZone and has posted 6 posts at DZone. You can read more from them at their website. View Full User Profile

New Features of the Visual Studio Icenium Extension

09.24.2013
| 1412 views |
  • submit to reddit

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.

Kendo

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

Run

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

PieChart

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

geolocation

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>
    <html>
    <head>
    <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>
    </head>

    <body>
    <!–Pie chart–>
    <div id=”tabstrip-pie-chart”
    data-role=”view”
    data-title=”Pie Chart”
    data-show=”app.pieChart.createPieChart”
    data-hide=”app.pieChart.unbindResizeEvent”
    data-stretch=”true”>

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

    </div>

    <!–Gauge–>
    <div id=”tabstrip-gauge”
    data-role=”view”
    data-title=”Gauge”
    data-show=”app.gauge.createGauge”
    data-hide=”app.gauge.unbindResizeEvent”
    data-stretch=”true”>

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

    </div>

    <!–QR code–>
    <div id=”tabstrip-qrcode”
    data-role=”view”
    data-title=”QR Code”
    data-show=”app.qrcode.createQRCode”>

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

    </div>

    <!–Stock chart–>
    <div id=”tabstrip-stock-chart”
    data-role=”view”
    data-title=”Stock Chart”
    data-show=”app.stockChart.createStockChart”
    data-hide=”app.stockChart.unbindResizeEvent”
    data-stretch=”true”>

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

    </div>

    <!–Layout–>
    <div data-role=”layout”
    data-id=”mobile-tabstrip”>

    <!–Header–>
    <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>
    </div>

    <!–Footer–>
    <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>
    </div>
    </div>

    </div>
    </body>
    </html>

Android chart


Published at DZone with permission of Anindita Basak, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)