Creating RSS Reader App using Telerik Icenium in Three simple steps

Learn more about Icenium here

In this post we will learn to create RSS reader App in Telerik Icenium. While creating this app we will have learning on creating following topics,

  • Kendo DataSource
  • Kendo Template
  • Kendo ListView

In this post we will create RSS Reader of https://telerikhelper.net/. Final output should be as follows,

clip_image001

Step 1: Create DataSource

To start with we will use YML to read RSS feed. Let us configure URL of Yahoo Query and RSS feed of desired site. Below I have configured that for https://telerikhelper.net/.


var url = "https://telerikhelper.net/feed/";
var proxyUrl = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'" + encodeURIComponent(url) +"'";

Next we need to create Kendo DataSource. That can be created using proxyUrl. RSS feed returns XML and we need to configure that while creating DataSource.


var telerikHelperRSSDS = new kendo.data.DataSource({
 transport:{
 read:{
 url: proxyUrl,
 dataType: "xml"
 }
 },
 schema:{
 type:"xml",
 data:"query/results/rss/channel/item",
 model:{
 id:"guid",
 fields:{
 title: "title/text()",
 pubDate: "pubDate/text()",
 story: "description/text()",
 url: "link/text()",
 id: "guid/text()"
 }
 }
 }
});

 

There are couple of points worth discussing about above code snippet,

  • We are creating schema reading title , published date , story and url of the post
  • Id of model is set to guid
  • Setting up data type as xml
  • data is set as query/results/rss/channel/item

 

Step 2: Create Template

Once DataSource is created next we need to create Template. Kendo Template decide how data will be displayed. We are displaying title and publication date of post.

You can see that

</span>

<script id="telerikhelperrsstemplate" type="text/x-kendo-template">

 <p class="titlecs">#=title#</p>
 <p class="datecs">#=pubDate#</p>

 </script>

Step 3: Creating ListView

In last step we need to create ListView. ListView is the Kendo UI Widget in which we will display RSS feeds.

ListView can be created as follows,

 <div data-role="view" id="telerikhelperrssview" data-title="TelerikHelper">
 <ul id="telerikhelperview"
 data-source="telerikHelperRSSDS"
 data-endlessscroll="true"
 data-template="telerikhelperrsstemplate"
 data-role="listview"
 data-style="inset">
 </ul>
 </div>

In ListView we are setting

  • Data source
  • Data template
  • Data style

That’s it. We need to perfrom only these three steps to create RSS Reader App using Telerik Icenium

clip_image001[6]

I hope you find this post useful. Thanks for reading.

Advertisements

How to send Email using Telerik Everlive from Cross-Platform Mobile Application

Have you ever come across scenario in which you need to send an Email from your app? There are various ways you can do that. Some of them are as follows,

  1. Sending Email using PhoneGap API
  2. Sending Email using HTML5
  3. Delegate Send Email task to a server

In this post we will learn to send Email using Telerik Everlive. Everlive is a cloud based Backend as a Service. It provides you many functionalities using Email Services. You can send Email from your app using Telerik Everlive.

image

There are two components in Everlive Email Service.

  1. Email Template
  2. Send Email

Before sending Email, you need to create Email Template. You can create Email Template in two ways,

  1. Using code in your app
  2. At portal

You need id of Email Template to send Email. Okay so in this post we are going to create Email Template in portal. To create Email Template login to portal and you will get option to create Email Template.

image

As you see there are four default Email Templates already available in Telerik Everlive. To create new template click on Add an item and at right hand side you get option to create new Email Template. After successful creation of new Email Template you can view that in Template List. You need ID of the Email Template at code to send Email from App.

image

Make sure that you have copied API key and Account Key of application. You need this to send Email using code. You can get keys by clicking on API KEYS in left options.

Okay so we have done configuration at portal. We created Email Template. Next we need to send Email from app. We can send Email using REST API.

Very first you need to create recipients. You can create this as JavaScript object. In below code I am setting two Email addresses to send in TO.


var recipients = {
 "Recipients": [
 “Dhananjay.kumar@telerik.com”,
 “debugmode@outlook.com”
 ],
 "Context":{
 "SpecialOffer":"Happy New Year”
 }
 };

Once you have created recipients you need to make a AJAX post to send an Email using Telerik Email. You can send an Email using code below.


$.ajax({
 type: "POST",
 url: 'http://api.everlive.com/v1/Metadata/Applications/PUTYOURAPIKEY/EmailTemplates/PUTYOUREMAILTEMPLATEID/send',
 contentType: "application/json",
 headers: { "Authorization" : "Accountkey PUTYOURACCOUNTKEY" },
 data: JSON.stringify(recipients),
 success: function(data){
 alert("Email successfully sent.");
 },
 error: function(error){
 alert(JSON.stringify(error));
 }
});

Above code is very simple,

  • In URL you need to set API key and ID of Template
  • In headers put account key of application
  • In data set recipients
  • On success you can set a JavaScript function as callback
  • On error you can set a JavaScript function as callback

That’s it. You need to do only this much of work to send an Email using Telerik Everlive from Cross-platform application. I hope you find this post useful. Thanks for reading.

How to fetch Data from Telerik Everlive using REST API in a Web Application.

Learn more about Kendo UI here

Learn more about Icenium here

In this post we will take a look on fetching data from Telerik Everlive using REST API and use it in a web application. In web app we will be using Kendo UI DataSource to bind data to Kendo UI web ListView.

We are going to learn following,

  • Fetch data from Telerik Everlive using REST API
  • Create Kendo DataSource from returned data
  • Bind data to Kendo UI ListView

Okay so to keep it simple, I have created a simple Content Type Products in Everlive project as below. Permission of this Products content type is set as Public.

clip_image001

To fetch data from Telerik Everlive using REST API, Simply you can fetch data from Icenium Everlive using a AJAX call. You need to provide

  1. URL of the Everlive project with API key
  2. Content type name should be appended in URL. In this case we have appended Products (name of content type) in URL.
  3. Set type as GET
  4. You need to set two callback function. One Callback function will be called on success and another on error.

So data can be fetched using below code. You may want to notice that you need to replace yourapikey in URL with API key for your Everlive project.


$.ajax({
 url: 'http://api.everlive.com/v1/yourapikey/Products',
 type: "GET",
 headers: {
 "Authorization": "Bearer ${AccessToken}"
 },
 success: function (data) {
 BindDataToListView(data);
 },
 error: function (error) {
 alert(JSON.stringify(error));
 }
})

BindDataToListView is callback function and this function will be called on success fetching of data. In this function you need to create Kendo UI DataSource from returned data. Before we do that let us examine what value we get from Everlive server.

clip_image001[6]

You should get below output in browser console,

clip_image002

You can see that in output you are getting count and data in Result property of the returned Object. So you can create Kendo DataSource as follows,

function BindDataToListView(e)
{
 console.log(e);
 var dsource = new kendo.data.DataSource(
 {
 data: e.Result
 });

}

Again in Console log you can view that Kendo DataSource has been created from returned data.

clip_image001[8]

Next we need to create Kendo Template and Kendo ListView. We are going to create a very simple template as follows,


<script type="text/x-kendo-template" id="producttemplate">
 <div>
 <h2>#:ProductName# <br/>
 <h3>#=UnitInStock# #:UnitPrice#</h3>
 </div>
</script>

And to create Kendo ListView create a HTML div as follows,


<div id="listView"></div>

Again let us go back to callback function BindDataToListView() and convert div to Kendo ListView and bind already datasource

function BindDataToListView(e)
{
 console.log(e);
 var dsource = new kendo.data.DataSource(
 {
 data: e.Result
 });
 console.log(dsource);

$("#listView").kendoListView({
 dataSource: dsource,
 template: kendo.template($("#producttemplate").html())
 });

}

This is it. We are setting datasource and template after converting HTML div as Kendo ListView. When you run this web application you should get output as below,

clip_image002

In this way you can fetch data from Telerik Everlive using REST API and use in Kendo UI Web. I hope you find this post useful. Thanks for reading.

Resources for webinar “Build iOS and Android apps using Visual Studio”

On September 5th we conducted a webinar on our Icenium extension for Visual Studio. The webinar was titled “Building iOS and Android apps using Visual Studio”. This is part of the ongoing webinar series we here at Telerik India have been doing almost every Thursday of the month. If you want to know our webinar schedule, take a look at this blog post: https://telerikhelper.net/2013/10/04/technology-to-keep-you-company-in-the-holiday-season/

image

About Icenium:

Icenium is a product from Telerik which makes cross platform mobile development simplified. Icenium enables you to use HTML5, CSS and JavaScript to develop, test, and publish applications that run natively on the Apple iOS and Google Android mobile platforms. It combines the convenience of a local coding environment with cloud-based services powered by the Apache Cordova framework. Icenium also provides the seamless creation of a backend for your apps with data storage, user management, and email and push notifications.

Icenium also comes with Visual Studio extension, so that without leaving Visual Studio you can create cross platform mobile applications. Find out more about the extension here: http://www.icenium.com/blog/icenium-team-blog/2013/09/23/announcing-the-icenium-extension-for-visual-studio

Slide Deck:

Here is the slide deck used for the webinar:

Video Recording:

As promised, here is the video recording of the webinar:

Q & A:

We had a lot of questions asked during the webinar. Our team was able to answer as much as we can during the webinar. We normally do a recap of the questions and try to provide answers to all of them through this blog post. So here are the questions from the webinar along with the answers:

Q: Are these native apps we are talking about?
A: We are talking about a model of Mobile App development called Hybrid Application Model. In this model you develop app using HTML5/JavaScript/CSS. You package this and it runs on the device pretty muck like a native app.

Q: Can we use Express Edition to practice this?
A: Sorry. This needs a non-Express VS edition

Q: Can we practice it on any other ide other than VS or is it only for it?
A: The webinar featured a extension we have for Visual Studio. But Icenium comes as a stand alone IDE also. We have Windows Client called Icenium Graphite or you can use Icenium on the browser itself. Currently supported only on Chrome.

Q: For android development with visual studio can we do it without any explicit plugin?
A: Yes. It depends mostly on your application feature and design. If you are building a simple data entry application which does not require any custom plugin you can do it easily with just a HTML markup and a JavaScript code to handle service calls.

Q: How difficult/easy it is to design my app once, and create ios application and android application PARALLELY?
A: With Icenium and Kendo UI Mobile controls, you write your code only once. Icenium lets you build packages for Android and iOS right within Icenium. Kendo UI Mobile controls provide you the adaptive rendering capability i.e. Kendo UI Mobile controls adapt to platform they are running on and give you native look and feel.

Q: what is Icenium?
A: Icenium – Mobile application development tool from Telerik. More details: http://www.icenium.com

Q: Can the jQuery version file be changed at any time?
A: Yes you can.

Q: Is Icenium different from Kendo control set ?
A: Icenium = Cloud IDE + Build Services + Simulators + Debug Capabilitie + Mobile BaaS + Kendo Mobile

Q: Will Icenium Support design and development of Web Services or the same will have to be developed seperately in .NET?
A: This will need to be developed separately. We have a Visual Studio addin avaialble to do the same called OpenAccess. http://www.telerik.com/products/orm.aspx

Q: Is Icenium an opensource?
A: No. Icenium is licensed product. It is per developer subscription based.

Q: Since iOS 7 is released, how do we set the version to 7.0 in iOS simulator?
A:. Work is under way. We will update the simulator once we are ready. In fact we already have a flat theme in Kendo UI Mobile control set from past year or so. So you already have a flat theme to apply to your apps.

Q: Which Visual Studio version we are going to discuss to achieve this?
A: Icenium Extension for Visual Studio supports only Visual Studio 2012 at the moment.

Q: Can we run tis apps on windows phone 8 also?
A: Yes. But Icenium cannot make the package for you. You will need to copy the complete source code. use Windows Phone project template for HTML5 and dump your code. Then create the XAP file and put it to market place.

Q: this will be compatible with all device of Android and iPhone?
A: Yes. Icenium also provides adaptive rendering for individual platform.

Q: Only VS 2012 is enough or do we need to install any plugins?
A: You will need to install Icenium Extension for Visual Studio from Visual Studio Gallery.

Q: From where can we download Icenium Plugin? We already have a license of telerik, do we need to buy a separate one?
A: You can download the Icenium extension from Visual Studio Gallery. You can develop an app and test in Icenium simulator. But when it comes to packaging you will need to buy Icenium subscription which is per developer and on monthly basis.

Q: Can we deploy directly to physical phone if its connected ?
A: Yes, you will be able to. LiveSync enables immidiate sync to all devices attached to the machine.

Q: An application developed on Telerik Silverlight, can it be replicated to Icenium app
A: No direct migration from Silverlight to Icenium.

Q: Can we access hardware including Camera, GPS and other sensors?
A: Yes, via the cordova library. Part of Icenium.

Q: I have a Kendo app (browser app) can we migrate it to Icenium?
A: Kendo Browser Apps using Kendo UI Web controls which is meant for running on desktop browsers. For mobile, we recommend using Kendo UI Mobile controls.

Q: Can we use debugger on trial version of Icenium
A: Yes, the trials are fully featured trials.

Q: Does Icenium support windows mobile
A: WP is supported by a slightly different procedure. Please write to sales@telerikindia.com in case you would like to explore this further.

Q: Does the API has support to access device specific functionalities
A: Yes, via the plugin architecture.

Q: Can we create system apps via Icenium
A: Sorry, Icenium can only build mobile apps.

Q: Where is the div attributes coming from (like data-role, data-icon)
A: There are known as “data-“ attributes in HTML5 specification. HTML 5 makes provision for it. Icenium makes it functional.

Q: Can we get a trial version of Icenium?
A: Yes, one month trial of Icenium is available at: http://www.icenium.com

Q: The difference between Jquey Mobile / Cordova app & Kendo UI is nativeness
A: Yes. In addition, we have SPA framework + MVVM framework + Client side DataSource + Templates and more

Q: We need to know how to use ListView and how to bind a data to listview practically?
A: Please write to sales@telerikindia.com and we will help you specifically.

Q: Any support for Native mobile application?
A: Not in Icenium. It is a hybrid mobile app stack. Telerik has WP native controls: http://www.telerik.com/products/windows-phone.aspx

Q: Are you using any MVVM framework like backbone.js
A: Kendo UI framework has its own MVVM framework. This further reduces the size of the application by removing the need for adding more frameworks like backbone.js

Q: Is this a stand-alone or web based Mobille App?
A: This is being like a web based app. Upon compilation/ build it will become a stand alone app (apk/ipa) that can be put on respective app stores.

Q: What is kendo?
A: The Mobile UI control set using in Icenium: http://www.kendoui.com/

Q: Just to confirm the support for ODATA using these controls?
A: Yes, ODATA is supported. Use DataSource to connect to Odata services and controls can bind to this datasource

Q: Will a single code will work for both IOs and Android?
A: Yes, it will. that’s magical, isn’t it?

Q: Any ETA to remove this BETA ?
A: Icenium is a live app (not in BETA). The VS plugins is in BETA.

Q: Can we use VS2012 to write Objective C code using Icenium?
A: No. This is not possible.

Q: Will kendo ui mobile and jQuery mobile work together?
A: There is nothing that prevents jQuery Mobile from working with Kendo UI. However, it is needless as most capabilities are available in Kendo UI.

Q: is it support local database ie sqllite etc ?
A: Yes. Icenium has support for SQLite plugin which can be included in your project.

Q: How Icenium plugin is aligned with iphone/android/windowsPhone design elements ?
A: Icenium is just the IDE for developing Hybrid Mobile Apps. It’s the Kendo UI Mobile control set which adheres to design principles of the Mobile Platform and render the controls accordingly.

Q: do you have icenium extention for Eclipse/JBuilder/IntelliJ.?
A: Not immidiately. you can use the Windows client of Icenium: http://www.icenium.com/product/graphite

Q: How we can publish our app for iOS?
A: Publishing for Apple Store is directly supported from Icenium. No need for a Mac.

Q: To publish a app in Apple store, I need a mac device & Xcode?
A: You will be excited to know that Icenium supports deployment to Apple Store directly. so, you don’t need a Mac or XCode for publishing. You can develop and deploy completely without the need for a Mac.

Q: Who does the magic behind the scene from different phone sets? is it Kendo, which recognizes and builds the layout
A: Yes, Kendo is the magic behind support for different platforms/ form factors.

Q: Can you name any application developed using kendo UI and deployed in different markets for iOS,Android and Microsoft
A: SafeBridge, DevReach. Check out our showcase apps: http://www.icenium.com/resources/showcase

Q: How abt symbian apps
A: sorry not supported by Icenium.

Q: What is LiveSync – is it a part of kendo ui?
A: LiveSync. A dedicated video: http://www.icenium.com/resources/videos-demos/video/icenium-device-simulator-and-livesync This allows the apps to be updated automatically once the change is made to the code in Icenium. No deployment needed!

Q: An important question: What is % degrade in performance using Kendo UI v/s native html/css apps ?
A: It is quite the opposite. We have seen improvements of 200 – 300% in performance when using Kendo versus other HTML/ CSS apps (not native)

Q: Is there a support for Java IDE?
A: Not immidately. A standalone app is avialable – http://www.icenium.com/product/graphite

Q: How much is for Licenced Icenium?
A: http://www.icenium.com/pricing

Q: we have to write all the codes in one single page i.e. index.html
A: it is a Single Page app :). However, we support browsing to other pages and hence you can have code in another page as well.

Q: What is the part of ASP.Net MVC in kendo UI?
A: Kendo UI has components for ASP.NET MVC. http://www.kendoui.com/server-wrappers/mvc.aspx

Q: Did you develop the KENDO framework by your own?
A: Yes, Telerik developed it by itself 🙂

Q: Where can I get the help related to Kendo UI?
A: Extensive documentation available at: http://docs.kendoui.com

Q: Can We Use Web Services in Icenium?
A: Yes, we support REST/ OData services.

Q: Can I create ASP.NET MVC4 project, where I build views using cshtml files, however use the Kendo UI controls on views ?
A: Absolutely. You can use Kendo UI Web controls for serving to desktop browsers. You can develop .mobile.cshtml files and use Kendo UI Mobile controls.

Q: As you told like look and feel vary between android and iOS devices .. but if I want to make theme consistant across all platform what I will have to do?
A: You can use our Flat theme which gives consistent theme across all the platforms. Otherwise you can always use our Theme Builder and build your own theme.

Q: Can we write custom plugin to ICENIUM like we can do in Cordova?
A: Yes. Icenium allows you to import custom plugins too.

Q: Instead of using emulators, can we test the app on real mobile w/o submitting it to store?
A: Yes. it is fully supported. On Android the deployment is direct and on iOS you can use Icenium Ion: http://www.icenium.com/product/ion

Q: How we can use Kendo Ui for WP8 ?
A: Quickly, you got to use the PhoneGap template in VS. Insert the Kendo UI files in WWW folder. Compile the project to get WP8 app.

Webinar Giveaway:

In each of our webinars we pick random 2 people from the attendee list and they get out cool .NET Ninja T-Shirt. This webinar, we have picked the following folks:

  • Ajay Negi
  • Jaish Mathews

Congratulations to the winners. Our office will contact you for your details and we will ship your t-shirts.

For those of you who are felling sad about not winning, well try your luck next time by attending our next webinar on Oct 31.

Till next time, Happy coding!

How to share on Facebook from Cross Platform Mobile App created using Icenium

Find project on GitHub

On any kind of Apps sharing on Facebook could be a frequent task. Icenium a Cloud Based IDE allows you to create Cross Platform Apps. In this blog post we will take a look on sharing status on FaceBook from a Cross Platform App being created using Icenium.

To start with let us create view. I am putting an input text box and a button. On click of button text from input box will be shared on FB wall of user.

image

Very first we will create helper functions we need to post To start with let us create an identity provider. Identity Provider can be created as given in following code


var IdentityProvider = function (config) {
 var that = this;
 var ref;
 this.getAccessToken = function (callback) {

// Begin Authorization
 var authorize_url = config.endpoint
 + "?response_type=" + config.response_type
 + "&client_id=" + config.client_id
 + "&redirect_uri=" + config.redirect_uri
 + "&display=" + config.display
 + "&access_type=" + config.access_type
 + "&scope=" + config.scope

//CALL IN APP BROWSER WITH THE LINK
 ref = window.open(authorize_url, '_blank', 'location=no');

ref.addEventListener('loadstart', function (event) {
 that.locationChanged(event.url, callback);
 });

ref.addEventListener('loadstop', function (event) {
 that.locationChanged(event.url, callback);
 });
 }

this.locationChanged = function (loc, callback) {
 if (loc.indexOf("access_token=") != -1) {
 ref.close();
 var token = getParameterByName("access_token", loc);
 callback(token);
 }
 }
}

&nbsp;

We are using a function to get parameter by name. Below function is doing this task.


function getParameterByName(name, url) {
 name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
 var regexS = name + "=([^&#]*)";

console.log("Parameter name: " + name);
 console.log("Url: " + url);

var regex = new RegExp(regexS);
 var results = regex.exec(url);

console.log("Result: " + results);

if (results == null) {
 return false;
 }
 else
 return decodeURIComponent(results[1].replace(/\+/g, " "));
}

Once identity provider is being created, next you need to create instance of IdentityProvider. Important configuration you need to pass are as follows

  • Name of the app
  • In client id make sure to pass client if for your app. You will get client id while registering your app to Facebook.
  • In case of Cross Platform mobile App redirect Uri will be always as given in below setting
  • loginMethodName would be always loginWithFaceBook

var facebook = new IdentityProvider({
 name: "My Test App",
 loginMethodName: "loginWithFacebook",
 endpoint: "https://www.facebook.com/dialog/oauth",
 response_type: "token",
 client_id: fbClientID,
 redirect_uri: "https://www.facebook.com/connect/login_success.html",
 access_type: "online",
 scope: "email,publish_actions",
 display: "touch"
});

By this step we have created all the helper functions we need to post an update on Facebook. Now on click event of the button we will

  • get Access Token from helper function
  • pass that to Graph API to post on FaceBook

Below we are reading textbox value, fetching access token and calling a function to make a FB post.


function PostOnFb(e)
{
 var msgToPost = $('#msgTxt').val();
 alert(msgToPost)
 facebook.getAccessToken(function (token) {
 makefbPost(msgToPost, "http://debugmode.net", "DebugMode", token);
 });
}

We are passing

  • message to post
  • URL of application
  • Title of the post and
  • FB token to post status message

Last function we need to create to make a FB post. That function is as given below.


function makefbPost(FBmessage, FBLink, FBLinkName, fbToken) {
 var postURL = "https://graph.facebook.com/me/feed";
 var data = {};
 data.message = FBmessage;
 data.name = FBLinkName;
 data.link = FBLink;

data.access_token = fbToken;
 console.log("Token:" + fbToken);

$.post(postURL, data)
 .done(function (results) {
 navigator.notification.alert("Status Posted", function () { }, "DebugMode", "Done");

})
 .error(function (err)
 navigator.notification.alert("Error encountered. Details:" + err.message, function () { }, "Error", "Done");
 });
}

In above function important points are as follows

  • We are posting data to URL https://graph.facebook.com/me/feed. We are using Facebook Graph API to post status on Facebook
  • We are setting message, link, name and access token as property of data to be posted.

This is all what you need to do to post a Facebook status message from a Cross Platform Mobile Application being created using Icenium.

How to perform various tasks while navigating to/from KendoUI Mobile View in Cross Platform App

Learn more about Kendo UI here

Recently while conversing with one of the customers I came across some of the following queries,

  • How to do some tasks while navigating away from Mobile View
  • How to do some tasks while navigating to a Mobile View

Let us first simplify above queries. Essentially customer wants to call JavaScript functions while navigating to or navigating away from the Mobile View. There could be following combinations of scenarios like following,

  • Perform some task before Mobile View is visible
  • Perform some task after Mobile View is visible
  • Perform some task before Mobile View is hidden
  • Perform some task after Mobile View is hidden
  • Perform some task when Mobile View is visible
  • Perform some task when Mobile View is hidden

Kendo UI Mobile View provides events for all these scenario. As a developer what all you need to do is to call various events associated with Kendo UI Mobile View. Various events with their purpose is depicted in below image,

image

Now let us consider example that you need to perform a task before Kendo UI Mobile view is getting visible. You can do that by setting data-before-show attribute of Mobile View. In below image we are setting data-before-show property to a function with name myfunct.

image

Now each time before homeview (id of the view in example is set to homeview) will be navigated or get visible a function myfunct will be called. In the same way you can set other events as attributes to achieve a particular task while navigating to or away from view. Let us consider one more example that you want to achieve a task after view is hidden. In that scenario you need to set data-hide attribute of the view. We can achieve that as given in following image,

image

In this way you can set events as attributes to achieve any tasks while navigating to and from a Mobile View. Below I am putting codes from above discussion,


<div id="homeview"
 data-role="view"
 data-title="Mobile View"
 data-before-show="myfunct"
 data-hide="myfunct1" >

 <h1>Mobile View Contnet</h1>

 </div>

<script>
 function myfunct() {

alert("Called before View is Visible");
 console.log("Called before View is Visible");
 }
 function myfunct1() {

alert("Called after View is Hiden");
 console.log("Called after View is Hiden");
 }
 </script>

I hope you find this post useful. Thanks for reading.

Learn more about Kendo UI here

Create Android App in Visual Studio using Icenium

In this post we will take a step by step look on creating Android app using Visual Studio. To create Android or iPhone app you need Icenium Extension for Visual Studio.

Learn more about Icenium here

Let us start step by step from installation to creating Android APK package. Follow the steps below,

Step1: Download and Installation

Very first you need to install Icenium Extension for Visual Studio from here . After successful download close all running instances of Visual Studio and install Icenium Extension for Visual Studio.

image

After successful installation launch Visual Studio and you will get Icenium tab. There you can choose any project template as per your requirement.

clip_image002

Step2: Create project

After successful download and installation go ahead and create project for Cross Platform Mobile Application. You have four options to create application depending on library you want to use.

For example if you want to use your own library then go ahead and select Blank Project Template and start adding your own library to create apps.

To create app using jQuery Mobile select jQuery Mobile project template.

To create app using Kendo UI Mobile select Kendo UI Mobile project template. In this scenario I am going to create app using Kendo UI Mobile.

Here I have created a project selecting Kendo UI Mobile. On successful creation of project, you get a reference project created for you. You can use this as reference to build your app further. Project structure in solution explorer will look like following,

image 

In this post I am not going into much details of programming aspect so let us consider that we want to publish default created app to Google Play.

Step 3: Build and Test in Simulator

We are going to build default reference app got created. In menu you will find an option Icenium.

clip_image002[6]

To test application in simulator select Run in Simulator option. You will get application running in simulator. Icenium supports iPhone, iPad, Android, Android tab simulator. In Android phone simulator default created app will look like as given in below image,

clip_image003

We will talk in detail about simulator in later posts.

Next we need to build app for Android. You can do that by selecting Build App in Cloud option from Icenium menu in visual studio.

clip_image005

Here select Android Build option. After successful build you will get two options to run Android app on device.

image

Option one is to scan the QR code and option two is that you will find apk package in project’s bin->debug->android folder.

clip_image002[8]

You need to upload apk package in Google Play to publish your android app to Google Play.

We just learnt it is super easy to create Android app in Visual Studio using Icenium extension.

How to work with camera in Icenium

Learn more about Icenium here

In this post we will take a look on working with camera in Icenium. You can access camera in Icenium using Cordova or PhoneGap.

Let us say we want to capture a photo on touch of a button. I have designed view as below. On touch of button camera will be launched and then taken photo will get bind to image control.


<div id="home"
 data-role="view"
 data-title="Share">
 <button onclick="capturePhoto();">Capture Photo</button> <br>
 <img style="width:60px;height:60px;" id="smallImage" src="" />
 </div>

On touch of Capture Photo button we are calling function capturePhoto().


function capturePhoto() {

navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
 quality: 50,
 destinationType: destinationType.DATA_URL
 }
 );

}

In above function we are using cordova function navigator.camera.getPicture() to launch camera and click photo. You can pass many optional parameters to this function like quality, destinationType, sourceType, targetWidth , targetHeight etc.

On successful selection of photo onPhotoDataSucess function will be called. In this function you can access photo and use that as per your required. In this scenario we are binding that too an image control.


function onPhotoDataSuccess(imageData) {

 var smallImage = document.getElementById('smallImage');

&nbsp;

smallImage.src = "data:image/jpeg;base64," + imageData;
 }

As you see that we are reading image with data url and setting that as source of image. If there is error selecting photo then onFail() function will be called. We can simply display an error message in this function.


function onFail(message) {
 alert('Failed because: ' + message);
 }

In this way you can work with camera in Icenium. I hope you find this post useful. Thanks for reading.

How to insert data in Icenium Everlive using KendoUI DataSource

Read about Icenium here

Read more about Kendo UI DataSource here

Icenium Everlive is Backend as a Service offering from Telerik. In this post we will take a look on how easily KendoUI DataSource can be used to fetch data from Icenium Everlive.

Read : How to fetch data from Icenium Everlive using KendoUI DataSource

To start with, in Everlive I have created a content type with name Session. In Everlive Content type represents a data type or loosely I can say it represents a table. I have created content type with name Sessions. Now we need to insert and item in Sessions content type using Kendo UI DataSource.

Very first we need to add reference of Everlive as below,


<script src="scripts/everlive.all.min.js"></script>

After adding reference create instance of Everlive as below. You need to pass Everlive application key as parameter while creating instance of Everlive. You will find application key on Everlive portal.


var el = new Everlive('W1286lVOH0DXYZ');

Now you will be amazed seeing how easily you can insert item in Session content type using Kendo UI DataSource. Before creating an item or inserting an item, create Kendo UI DataSource as following.


var sessionDataSource = new kendo.data.DataSource({
 type: 'everlive',
 transport: {
 typeName: 'Sessions'
 },
 schema: {
 model: { id: Everlive.idField }
 }

});

While creating Kendo UI Data Source, we need to set following

  • type as everlive
  • In transport typeName as content type name. You need to provide name of the content type which data items you want to fetch. In this case we want items of Sessions content type so typeName is Sessions

Once Kendo UI DataSource is created, you need to create item to be inserted in Everlive . So let us go ahead and create item for Sessions content type as following,


var sessionItemToAdd = {
 'Name': 'Cloud',
 'Time': '09:00-10:00',
 'Level': '300',
 'SpeakerName': 'dj',
 'HallName': 'A',
 'Date': '3rd Oct',
 'Day': 'Day 1'

};

Now you have item to be inserted. Next add this item to DataSource using Add method. After adding that call sync() method on DataSource. You can achieve adding and syncing with Everlive server as given in below code,


sessionDataSource.add(sessionItemToAdd );
 sessionDataSource.sync();
 console.log("data inserted");

Putting above discussion all together, below function will add an item in Sessions content type.


function addSessions() {
 console.log("Entering");
 var sessionDataSource = new kendo.data.DataSource({
 type: 'everlive',
 transport: {
 typeName: 'Sessions'
 },
 schema: {
 model: { id: Everlive.idField }
 }

});
 var sessionItemToAdd = {
 'Name': 'Cloud',
 'Time': '09:00-10:00',
 'Level': '300',
 'SpeakerName': 'dj',
 'HallName': 'A',
 'Date': '3rd Oct',
 'Day': 'Day 1'
 };

sessionDataSource.add(sessionItemToAdd);
 sessionDataSource.sync();
 console.log("data inserted");
 }



This is the way you can add an item in Everlive content type. I hope you find this post useful. Thanks for reading.

How to change Build Settings in Icenium

Learn more about Icenium here

In Icenium you have two Build Settings, they are as follows

  1. Release
  2. Debug

While developing apps you should have Build Settings set to debug whereas before publishing it to store, you should set it to Release. In this post I will walk you through how to change Build Settings.

To change Build Settings, right click on project workspace and then select Build Settings option from context menu.

image

Next you get options to change Active build configuration. From drop down you can change Build Settings.

clip_image001

Just we learnt that it is very easy to work different Build Settings in Icenium. I hope you find this post useful. Thanks for reading.

Learn more about Icenium here

How to fetch data from Icenium Everlive using KendoUI DataSource

Read about Icenium here

Icenium Everlive is Backend as a Service offering from Telerik. In this post we will take a look on how easily KendoUI DataSource can be used to fetch data from Icenium Everlive.

Read more about Kendo UI DataSource here

To start with, in Everlive I have created a content type with name Session. In Everlive Content type represents a data type or loosely I can say a table. I have created content type with name Sessions. Now we need to fetch all the items from Sessions content type using Kendo UI DataSource.

Very first we need to add reference of Everlive as below,


<script src="scripts/everlive.all.min.js"></script>

After adding reference create instance of Everlive as below. You need to pass Everlive application key as parameter while creating instance of Everlive. You will find application key on Everlive portal.


var el = new Everlive('W1286lVOH0DXYZ');

Now you will be amazed seeing how easily you can fetch all the items from Session content type using Kendo UI DataSource. Only you need to provide type as everlive and in transport typeName as name of Everlive Content type.


var sessionDataSource = new kendo.data.DataSource({
 type: 'everlive',
 transport: {
 typeName: 'Sessions'
 },
 schema: {
 model: { id: Everlive.idField }
 }

});

While fetching data from Everlive using Kendo UI Data Source, we need to set following

  • type as everlive
  • In transport typeName as content type name. You need to provide name of the content type which data items you want to fetch. In this case we want items of Sessions content type so typeName is Sessions

You can verify in any debugger console that data is fetched from Everlive in Kendo UI DataSource.

clip_image002

Now once you have data at the client side you can use them as of your requirement. You can bind that ListView , GridView etc. I hope you find this post useful. Thanks for reading.

Icenium Workshop in Pune

View event photos here

Telerik India conducted a full day Icenium Day in Pune on 26th Aug 2013.

clip_image002

It was invite only event and 30 energetic developers attended full day workshop on Icenium. There was high energy discussions around native v/s hybrid, JavaScript or C# etc. It was great gathering of prominent and opinionated developers.

We started day with introduction of Icenium and setting up development environment on participant machines. Some of the participants preferred to work on Icenium MIST, so they did not need any installation.

clip_image004

Whole day we covered following topics,

  • Why Cross Platform Mobile Application
  • Getting started with Icenium
  • Creating your first Cross Platform App
  • Managing Certificates in Icenium
  • Debugging with Live Sync
  • Understanding version control and Github integration
  • Building and packaging App
  • Publishing Apps to store
  • Working with Kendo UI Framework elements like DataSource and Template
  • Consuming Services like OData
  • Understanding layout , transition etc
  • Working with Icenium Everlive

This was Hands on Lab workshop and all participants wrote codes for whole day with sheer passion.After successful completion of labs each participant got a participation certificate.

clip_image002[6]

It was energetic learning day. We loved developers from Pune and excited to visit city again with more sharing on goodness of Telerik.

clip_image004[6]

View event photos here

Telerik India at PUG DevCon 2013

It was 10th Anniversary of India’s one of the most prominent Microsoft User Group and as always Pune User Group did not disappoint. PUG delivered packed two days event with more than 300 attendees and 25 speakers.

More about event here

Telerik loves community and as part of our community engagement, Telerik India team participated in event.

image

We had a booth for both days and we had great interaction with Pune community. We loved the passion of community and discussion went on the topics ranging from Cross Platform Mobile Apps to Automate Testing. I and Telerik India country manager Abhishek Kant both presented in event.

Mr Kant presented on SPA with Kendo UI and I presented on Backend as a Service with Everlive. We gave away Ninja T-Shirts and one lucky winner got a Karbon Android tablet.

I loved passion being shown my developers around Kendo UI and Icenium .

image

If you were at the event and want any further discussion or demo, do not hesitate to reach us through our site or send us a mail on Dhananjay.kumar@telerik.com or abhishek.kant@telerik.com

Push Notification on Android device using Icenium Everlive

Download sample used in this blog post from Github

Learn more about Icenium

In this post we will walkthrough working with Icenium Everlive Push Notification on an Android device. This post is divided in three parts from creating Google project to writing JavaScript code to enable notification on device.

Let us follow following steps to get it started with push notification on android devices

Step 1: Configure or Create Google Project

You need to start with creating Google Project. You need Google project ID to enable Push Notification.

  • Navigate to https://code.google.com/apis/console
  • In drop down you get an option to create a new project. From there create a new project
  • After creating project, you will get project number. There are two ways you can find project number, either in URL or on dashboard

image

After creating Google project, from left hand options select API Access. In that go ahead and click on Create a New Android Key. We need Android key at Everlive server side to enable Push Notification

image

After getting Android key next step you need to do to enable Service. To enable that click on Services in left and On Google Cloud Messaging for Android.

image

As of now we have created Google Project.

Step 2: Create and Configure project in Icenium Everlive

To create Icenium Everlive project, navigate to https://www.everlive.com/ . To create new project click on Create New Project on the home page. After successful creation of project go to Settings

image

In Settings select Push Notification from left menu options. We are going to enable Push Notification for Android, so check the check box of Android and provide Android Key created in previous step.

image

Step 3: Create Application

In this step we will create application to work with push notification. We will us EverLive JavaScript SDK. You can download sample Sample App from GitHub here

To start with you need following JavaScript files in your application. You can get these files from downloaded sample.

image

Now to start with, you need EverLive API key of your project and android project number. You will find API key on EverLive portal and android project number which you configured in step1 of this post.

image

As of now we have created environment in application to work with EverLive SDK for PushNotification. Next we need to create pushSettings for Android. You may notice that we are passing androidProjectNumber to create push setting for android.

image

Next you can enable notification on device by calling enableNotifications function and passing setting for push notification as input parameter in that. On successful enabling we are returning registration of device.

image

After enabling notification on device you need to register device in Everlive portal. To do this call register function on instance of current device.

image

These are two operations you need to perform to get push notification on android device from Everlive push notification. I have created two buttons on app view to enable notification on device and then register device to get push notification. View with buttons are as follows,

 <div data-role="view" id="pushview" data-tile="Push" data-model="app.pushService.viewModel" >
 <a id="initializeButton" data-role="button" data-bind="click: enablePushNotifications" class="btn-big">Enable Notifications</a>
 <a id="registerButton" data-role="button" data-bind="events: { click: registerInEverlive }" class="btn-big">Register</a>

 </div>

Below find full code to enable and register device for push notification.


(function (global) {
 var everliveApiKey = 'I1eE4AuOaWv0Vp5y';
 var androidProjectNumber = '1088191728786';
 var emulatorMode = false;

var pushViewModel = kendo.data.ObservableObject.extend({

el: new Everlive({
 apiKey: everliveApiKey
 }),

message: function () {
 alert("dhananjay");
 },

onAndroidPushReceived: function (args) {
 alert('Android notification received: ' + JSON.stringify(args));
 },
 enablePushNotifications: function () {
 // Push Setting for Android
 var pushSettings = {
 android: {
 senderID: androidProjectNumber
 },
 notificationCallbackAndroid: this.onAndroidPushReceived,

};
 // Setting the current device
 var currentDevice = this.el.push.currentDevice(this.emulatorMode);
 currentDevice.enableNotifications(pushSettings)
 .then(
 function (initResult) { return currentDevice.getRegistration();
 },
 function (err) {
 alert("ERROR!<br /><br />An error occured while initializing the device for push notifications.<br/><br/>" + err.message);
 }
 );

&nbsp;
 },
 registerInEverlive: function () {
 var currentDevice = this.el.push.currentDevice();

if (!currentDevice.pushToken) currentDevice.pushToken = "some token";
 this.el.push.currentDevice()
 .register({ Age: 15 })
 .then(
 this.onDeviceIsRegistered,
 function (err) {
 alert('REGISTER ERROR: ' + JSON.stringify(err));
 }
 );
 },
 onDeviceIsRegistered: function () {

alert("device registered");
 }

&nbsp;
 });

app.pushService = {
 viewModel: new pushViewModel()
 };

})(window);

&nbsp;

After successful operations on device, you will find device is registered in Everlive portal as below. All device registered for application will be listed here.

image

Now you can send push notification to device from portal. Device is enabled and registered to receive push notification from the Icenium Everlive server. We just witnessed that it is so easy working with push notification on Android devices from Icenium Everlive server. I hope you find this post useful. Thanks for reading.

Download sample used in this blog post from Github

Learn more about Icenium