Building Cross-Platform Mobile apps with Icenium for iOS,Android on Visual Studio 2012

September 22, 2013 1 Comment


Recently announced, the visual studio ultimate 2012 extension of Icenium (Kendo UI for Mobile) by telerik , a cross- platform mobile app framework based on PhoneGap, jQuery Mobile for iOS & Android. The Visual Studio 2012 ultimate extension can be downloaded from here.

Lets start , what’s new in this version of Icenium template. So, open Visual Studio 2012 ultimate & select Icenium template from Project templates.

Kendo

The latest release contains the following updates :

  • Icenium extension for Visual Studio (Beta): .NET developers can fully leverage 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 plugin on its own-and Icenium can now take advantage of this new architecture. Users will be able to selectively turn on or off any core plugin. The same option will be available for all out-of-the-box advanced custom plugins 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 2012 & select the option ‘Run Project(Specified in Project Name) in simulator‘.

Run

 

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

PieChart

  • The simulator even specifies the geolocation & network connection feasibility options(viz. wifi, cell2G, cell3G,cell4G, limited) connectivity options.

geolocation

  • The Icenium DataViz project template contains default JSON data for populating charts, gauges along with ‘Cordova‘ framework support for iOS & Android.
  • The source code for these controls looks fairly simple by using jQuery Mobile & Cordova scripts using native html5 & 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/”&gt;
<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

In next article, we will cover the PhoneGap / Cordova  3.0 framework to built native apps on HTML5, CSS3 & jQuery for Windows Store & Windows Phone apps using Windows Azure Mobile Services(WAMS).

 

Filed under OData/Code First-Entity Framework/MVC/jQuery Mobile, PhoneGap, Responsive Design, Windows Phone 8, Windows Phone 8.x/7.x, Windows Store Universal Apps Tagged with , , , ,

Enabling Auto Scaling in Windows Azure Virtual Machine & adding Linked Resources

September 15, 2013 3 Comments


Recently faced few scenarios about handling auto scaling strategies in Windows Azure Virtual Machines. This demo will lap around the autoscaling establishment in virtual machines containing SharePoint 2013 VM/ SQL Server 2012/2014 CTP1 VM/Linux VM.

In this demo , I have selected a SQL Server 2014 CTP1 VM with Windows Server 2012 R2 edition in order to made effective auto scaling which contains  hdinsight clusters as proof-of concept of SQL server 2014 CTP1 (Big Data Lambda Architecture).

Lets first create the VM , selected from Azure Management portal itself.

SQLVM

  • Add Configuration to your name , including choosing availability set.

VM

  • Add Cloud service & associated Storage Account for storing VHD /s

Service

  • alternatively, you can specify the endpoint of your virtual machine on azure for HTTP/HTTPS/MSSQL etc .

vmendpoint

  • After configuring the VM, open the Dashboard from the management portal , select ‘Scale’ tab & specify your schedule settings for Constraints rules.

ScheduletimeVM

  • Configure the scale settings based on schedule time Weekday/Weeknight/Weekend based on timezones , by selecting scale metrics (CPU, Queues) & scale up .

scalesettings

  • Save your configuration rules in VM availability set.
  • Next, open the dashboard , select the ‘Linked Resources‘ tab , in order to add additional storage account/ SQL database configured for VM.

Linked

 

Storage

 

  • Specify , your storage credential , since it’s always advisable to keep your diagnostic storage account separate from other storage accounts.

Storageresource

 

  • Next , connect to the SQL Server 2014 CTP 1 VM on Windows Server 2012 R2 , Open SSMS 2014 .

SQL

 

SSMS

Filed under Azure SQL Database / SQL Server, Microsoft Azure Tagged with , , , , , ,

Auto scaling in Windows Azure & configuring Management Services from Management Portal

September 2, 2013 Leave a comment


Recently announced the availability of auto scaling rules from Azure Management portal  instead of using the existing Enterprise Library block for Autoscaling(WASABi) app blocks. Auto scaling is now inbuilt for every hosted services (aka Cloud service, Virtual Machine, Website, Mobile service) .

Auto scaling rule as specifies executes based on following rules:

  • Constraint Rule : Constraint rules consist of one or more actions to set minimum and maximum values for the number of instances of a target, a rank, and optionally a timetable that defines when the rule is in effect. If there is no timetable, the rule is always in effect.
  • Reactive Rule : The rule based on varied metrics or constraints.
  • Importantly, constraint rules always take precedence over reactive rules, to ensure that these reactive rules cannot continue to add new role instances above a maximum value or remove role instances below a minimum level.

Lets check about the latest improvement on auto scaling improvements integrated from Azure Management Portal.

First , lets create a new cloud service & deploy asp.net webrole package.

cloud

  • Specify the settings for the role, add custom diagnostics  plan from settings (support from Azure SDK 2.0) configured with your storage account.

diagnostics

autoscaleDiag

  • Lets publish the cloud service & start monitoring the configuration dashboard.

Publish

  • Lets open the scale tab from Cloud service details pane. Check the scaling settings by schedule , setting by metric (none, cpu, queue length).

autoscale

  • Lets set up the schedule time span for adding / removing role instance setting.

schedule

  • Specify the setting rules for autoscaling metrics , in this demo , I have set up schedule rules for daytime of our cloud service.

scalesetting

  • You can configure the notification alerts from Azure Management Portal itself using Management Service tab.

Managementservice

  • To create a notification alert for autoscale, Click on Add Rule icon & specify the rule settings.

alert

rulesetting

  • After creating the rule , check the dashboard of rule alert to monitor the activated notifications.

ruledashboard

  • From latest add- on s of Auto scaling improvements in hosted services, an updated preview of web endpoints is also available. Click on Web endpoint preview section of your cloud service. For this demo, I have configured two web endpoints for monitoring the scale metric & log the throttling information (minimal) in the selected storage. Similarly an option of Linked Resource(SQL database, Storage Account) is also available now from the Azure Management portal itself.

webendpoint

Filed under Azure SQL Database / SQL Server, Microsoft Azure Tagged with , , , , , , , ,