Platinum Partner
mobile,visual studio,tips and tricks,html & xhtml,icenium

New Features of the Visual Studio Icenium Extension

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 {{ articles[0].authors[0].realName }}, DZone MVB. (source)

Opinions expressed by DZone contributors are their own.

{{ tag }}, {{tag}},

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

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks
Tweet

{{parent.nComments}}