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);
 }
 }
}

 

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.

Advertisements

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

Automating Mouse Actions Test in Test Studio

Learn more about Test Studio here

When you automate a test, working with various mouse actions as desktop commands are essential. Mouse actions could be as following,

  • Single Click
  • Double Click
  • Right Click
  • Mouse Hover etc.

When I talk to customers who are coming from manual testing background or working with other automated testing tools they complain about automation of mouse actions like hover etc. They say it is tough in their existing tools to automate Mouse Actions. They require them to write some amount of scripts to achieve automation of mouse actions.

In Test Studio automating mouse actions are super simple. In this post we will take a look on how to do that.

Let us consider you are recording a test and Test Studio is connected to recording browser (IE in this case) . From Test Studio control panel docked on browser select second option. It will allow to select an element on the DOM

image

When you move mouse on page elements would be getting selected. There would be a red rectangle around selected element. Keep mouse for some time and you will get a blue bubble.

image

Next you need to click on blue bubble. You will get various options. In options select Mouse Actions options.

clip_image001

On selecting Mouse Actions option , you will get available mouse actions to automate.

clip_image002

For example if you want to add Mouse Hover action in your test just double click on Mouse Hover and a step will get added in the test. Next Test Studio will ask you further options like Centre and Specific Point.

clip_image003

You will find mouse actions are added in test as follows

clip_image005

We just witnessed how easy it is to automate various desktop mouse actions command using Test Studio. We did not have to write any script and automation can be done while recording test. I hope you find this post useful. Thanks for reading.

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.

Resources for Webinar “Make Windows Forms speak the Windows 8 Modern UI design”

On September 5th we conducted a webinar on our RadControls for WinForms suite. The webinar was titled “Make Windows Forms speak the Windows 8 Modern UI design”. 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/07/29/telerik-india-webinarsmonsoon-edition/

image

You can know more about our RadControls for WinForms suite here: http://www.telerik.com/products/winforms.aspx

About RadPanorama:

Telerik RadPanorama is a control that displays elements of type RadTileElement in a mosaic manner. Basically, this control allows you to represent a small amount of data in the form of tiles that the end-user is able to smoothly scroll left or right with a gesture, just like in Windows 8, and to reorder the tiles with drag and drop. With its help, in just a few minutes you can achieve Modern Style UI for your WinForms applications, similar to the Start Menu screen of Windows 8.

In the webinar I just showcased how you get started with the Panorama control. We looked at created groups, creating tiles within the group and also how to create live tiles. If you want to know more about the Panorama control, have a look at the control page here: http://www.telerik.com/products/winforms/panorama.aspx

Slide Deck:

Here is the slide deck used for the webinar:

Video Recording:
Here is the link to video recording of the webinar:

Questions & Answers:

As with every webinar, we might not have been able to answer all the questions that were asked during the webinar. We make it a practice to collate all questions asked during webinar and answer them in these recap blog posts. So here are the questions and answers from this webinar:

Q: Does this control work with windows form & even WPF i.e. xaml?
A: This webinar talks about our Panorama control for WinForms. We have a separate suite for WPF and it contains a similar control on XAML.

Q: Is there any limit for tiles in panorama?
A: No

Q: Will this work with Visual Studio2010?
A: Yes. It is supported on VS2010 environment also.

Q: Can we place tiles of one group to another group?
A: Yes. Control will automatically do that out of the box without any special coding.

Q: Can we do resizing of Tile?
A: At the moment we don’t have the capability to resize the tile similar to what Windows 8 OS provides. However during design time you can set the size of the tiles.

Q: Is it necessary to have .png format or any photo format like.jpeg or .gif will work?
A: Any image format will work. But PNG is preferred.

Q: Can we rotate the tiles ?
A: No. Moreover if you rotate you are violating the Modern UI design philosophy.

Q: If we have more tiles in a window will the scroll bar appears?
A: Yes. Panorama will automatically provide the horizontal scroll bar.

Q: The Tiles added can be independent of RadPanorama or it should be contained in it?
A: Tiles can be added directly to Panorama or can be added to the groups.

Ninja T-Shirt Giveaway:

In each of our webinars we give away 2 of our very popular .NET Ninja T-Shirts. We have picked the following 2 people from the webinar audience as the winners of our T-Shirts:

  • Farjana Parveen
  • Upendra M

Congratulations to the winners. We will get in touch with you to get your details and we will ship your T-Shirt. Rest of you folks, don’t worry – attend our future webinars to win a T-Shirt. We look forward to your presence in our future webinars.

Till next time – Happy Coding!

RadGrid

RadGrid and SqlDataSource control – Be Careful with your DataSource choice

Overview:

This blog post is in response to one of the customer queries we received a couple of days back. One of our India customer called us up and said that they are seeing slowness in couple of pages where they are using RadGrid. Problem statement was – when they click on “Add New Row” button it takes nearly 1.5 minutes for the row to appear on the grid. This made it even scary for them as they had moved the code to production. Through this blog post I will try to outline what I found out and what could have been done better to resolve the problem.

Analysis:

I went in to a call with the customer and took a look at their code. There were couple of things they were doing. Let me list them down:

  • DataSource for the RadGrid was a SqlDataSource control defined in the .ASPX page
  • They were handling OnItemCommand and OnItemDataBound. They had some logic in this method which would execute on every data bound and every item command
  • The new item template had lot of drop down lists and each of them were bound to SqlDataSource control as their data source.

Now, next thing I did was to take look at the timing. We used IE Developer Tools and captured the network traffic when Add New button was clicked. What I found out was, server was taking close to 10 seconds to finish its server side processing. That’s a lot of time if you ask me. What was surprising for them was, they had paging enabled on the grid. So they were thinking that paging is happening correctly but still why is the add new row scenario slow.

So this made me to delve little bit deeper into what exactly is happening in this scenario. So rest of this blog post is all about my observation. Read on if you have faced a similar problem.

Observations:

Did two experiments to figure out what was happening. First I use a RadGrid and bind it to SqlDataSource control and look at the query executed at the DB side. Second was to use entity data source instead of SQL data source and look at the query executed at the DB.

For my experiments I am using Northwind Database and in particular Order Details table. Order Details table contains nearly 2155 records. So this makes a good candidate to mimic a scenario where you are paging the RadGrid lets say 10 records per page.

I assume that you have RadControls for ASP.NET AJAX suite installed on your system. If not, you can always download from our products page – www.telerik.com/products/aspnet-ajax.aspx. You will need that if you want to follow along with this post. Also in order to trace the SQL Queries executed, I am making use of a open source tool called “Express Profiler” which is available at CodePlex here: http://expressprofiler.codeplex.com/. I had to use this as I have a SQL Server 2012 express edition and express edition does not come with Profiler option. You need a full blown SQL server to get the profiler.

I have created a RadControls Web Application for my experiments. When you install the RadControls for ASP.NET AJAX suite, you will get project templates in Visual Studio, using which you can create a web application.

SNAGHTML47a123f

Fig 1: RadControls Web Application Project Template

DataBinding with SqlDataSource control:

First experiment was placing a RadGrid and bind it to SqlDataSource control. I placed a RadGrid and set its basic properties.  Then added a SqlDataSource control to the page and set its connection string and provided a select command. Here is the code snippet for grid and SQL data source control:

 
    <telerik:RadGrid ID="RadGrid1" runat="server" 
                     DataSourceID="SqlDataSource1" 
                     AllowPaging="true" AllowSorting="true" 
                     AllowFilteringByColumn="true" AllowAutomaticInserts="True"
                     MasterTableView-EditMode="InPlace"  
                     MasterTableView-CommandItemDisplay="TopAndBottom" />
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
                       ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                       ProviderName="System.Data.SqlClient" 
                       SelectCommand="SELECT * FROM [Order Details]" />

Analyzing the queries:

Now, before you run the application, lets get ready to trace the SQL queries that get executed. You should have downloaded the Express Profiler. Start the express profiler – Set the server details, select the authentication mechanism and finally select the events you want to trace. Here is the screen shot:

SNAGHTML4aaebbd

Fig 2: Express Profiler Settings

Run the web application. Notice that if we just set AllowPaging=true on RadGrid and do not provide a page size, by default RadGrid puts 10 as the PageSize. So in my case I should see only 10 rows on my first page of the RadGrid. Here is the Grid output:

image

Fig 3: RadGrid output

When I ran the app and looked at the trace, here is what I get:

SNAGHTML4af9b0f

Fig 4: SQL Query Trace for SQL Data Source Control bound to RadGrid

What you see here is a call to retrieve all the records from the table. You may be asking but the page size is set to 10. That is correct but what really happens is this: RadGrid will go ahead and ask SQL Data Source to get the data. SQL Data Source will blindly execute the query that has been set for the select command. RadGrid will not be able to do any tinkering with query because the SQL Data Source does not provide us a chance to put paging related statements.

Now lets do a page change on the grid. I will go ahead and click on Page 2.  RadGrid will now navigate to Page 2. Here is the trace that is generated for this:

SNAGHTML4c8b053

Fig 5: SQL Trace for Page Change Event

What you notice is, the SQL Data Source goes ahead and brings all the records from the table. RadGrid will then pick up only the second page rows and displays it.

Now lets go ahead and click on the Add New Row button and trace the query executed:

SNAGHTML4cdbf80

Fig 6: SQL Trace for Add New Record Event

As you can see it again retrieves all the records from the table.

What this tells us is the time taken is due to the fact that its going and getting all the table records no matter whatever is the situation we have. Now hitting DB and getting everything does call for some time although small but it till takes up time on the server.

Now lets do the same experiment but with Entity Data Source.

DataBinding with Entity Data Source:

I will use the same data grid but instead of SQL Data Source I will use a Entity Data Source. In order to work with Entity Data Source, you need a Entity Data Model. I will not get into how to create a Entity Data Model but assume that you know how to do it. Just create a ADO.NET Entity Data Model and generate the models from the database and use the same Northwind database. Once you have the ADO.NET Entity Data Model created, create a Entity Data Source on the page. Here is the Entity Data Source code snippet that I have:

 
<asp:EntityDataSource ID="EntityDataSource1" runat="server" 
                          OnContextCreating="EDS_ContextCreating" 
                          EntitySetName="Order_Details" />

I am making use of the OnContextCreating event to set the DbContext of ADO.NET Data Model to Entity Data Source ObjectContext. Here is the code for the event handler of OnContextCreating:

 
protected void EDS_ContextCreating(object sender, EntityDataSourceContextCreatingEventArgs e)
{
    var db = new NORTHWINDEntities();
    e.Context = (db as IObjectContextAdapter).ObjectContext;
}

Here NORTHWINDEntities is my Entity Data Model context. I am just casting it to ObjectContext since Entity Data Source works with ObjectContext. I set this entity data source as the data source of the RadGrid.

Analyzing the Queries:

Now lets run the app and trace SQL queries for the same set of actions we did with SQL Data Source control.

First, on page load:

SNAGHTML509e74c

Fig 7: Entity Data Source – Page Load – Query Trace

As you can see we have put in a “SELECT TOP 10” statement in the query. So its not bringing all 2155 records rather only 10 records. So time spent to do this will be very negligible. We also execute one additional query to get the total record count.

Now lets see what happens when we do a paging:

SNAGHTML50e4016

Fig 8: Entity Data Source – Paging – Query Trace

Now, lets trace the query when we do ‘’Add new record” scenario:

SNAGHTML50fd88d

Fig 9: Entity Data Source – Add New Record – Query Trace

Notice that, in this scenario, we automatically page to the last row and add a blank record.

As you can see from the above experiments, RadGrid is intelligent enough to optimize the queries based on the scenario you are dealing with.

Conclusion:

It was very evident from the experiments that if you are using SQL Data Source as your data source choice, there is not much RadGrid can do to optimize the query before it gets executed. Where as with Entity Data Source, RadGrid is smart enough to optimize the query and always have a optimized data fetch. I personally recommend using an ORM in the project for the data access scenarios and use the Entity Data Source as your data source choice. We i.e at Telerik have a free ORM called OpenAccess. Its free for life so you can pretty much use this in your production without any hassle at all. Do give it a try and let us know how you feel about it.

I hope this blog post does give you information on things you need to take care while doing data binding to Grids. This is just not in particular to RadGrid, this is mostly about any data binding scenario. Trace your queries and be sure that write and optimized queries are getting executed in your apps.

Till next time, Happy Coding.

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 fix ButtonGroup at the top in KendoUI Mobile View

Learn more about Kendo UI here

Recently, I was working on one of the requirement in which I had following widgets in same mobile view.

  1. Kendo UI Mobile ListView
  2. Kendo UI Mobile ButtonGroup

I had to fix position of ButtonGroup always on the top. To explain it more let us suppose there are a ListView and ButtonGroup as given in below image,

image

I have created above view with following code


<div data-role="view" data-title="Sessions" id="sessionview" data-show="getSessions">

 <ul data-role="buttongroup" data-index="1" data-select="onSelect">
 <li>Day 1</li>
 <li>Day 2</li>
 <li>Day 3</li>
 </ul>

 <ul id="sessionList"
 data-source="sessionDataSource"
 data-endlessscroll="true"
 data-template="sessionTemplate"
 data-role="listview"
 data-style="inset">
 </ul>

</div>

Only problem in above implementation is that, ButtonGroup is not fixed and when you scroll ListView it will scroll with ListView.

Fixing this or rather achieving this is quite simpler, what all you need to do is to put ButtonGroup inside a header. Essentially you need to do following,

image

Now I have modified implementation as below to achieve ButtonGroup at fixed position


<div data-role="view" data-title="Sessions" id="sessionview" data-show="getSessions">

 <div data-role="header">
 <ul data-role="buttongroup" data-index="1" data-select="onSelect">
 <li>Day 1</li>
 <li>Day 2</li>
 <li>Day 3</li>
 </ul>
 </div>
 <ul id="sessionList"
 data-source="sessionDataSource"
 data-endlessscroll="true"
 data-template="sessionTemplate"
 data-role="listview"
 data-style="inset">
 </ul>

</div>

On running application ButtonGroup is fixed at the top.

clip_image002

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

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.