Using WCF and Entity Framework with PhoneGap

I blogged before about using VS to edit PhoneGap applications and use chrome emulator to test it. Now we will use jQuery in PhoneGap application to access WCF services and return objects in JSON.

First we created a phonegap application

Then we hosted it on IIS and open in VS
File==>Open Website ==> Local IIS ==> create a new virtual directory
                                                                       Give Alias Name
                                                                         Browse to the project to the folder of the phonegap

Next we will create a new Website in another VS instance, to host the WCF service. It must be created on IIS to be tested on the emulator. So don't create it in the FileSystem must use HTTP.

No I have HelloService created on my IIS.
Delete the Service.svc created by default and then Add new Item to the project ==> Ajax Enabled WCF Service.

Now we have HelloService.svc

Now we will modify the DoWork function to return string

I added [WebGet] attribute to the method to be called using 'GET' method, so that we can test it in the browser. If it is not added and we typed the URL to the method in the browser we get "Method not allowed" error.

Now when tested it gets

The string is sent in a json format, in a member called d.

So now we need to call it from ajax function in PhoneGap app.

The following code does this

First, I used deviceready event from phonegap api. It fires once Cordova has fully loaded. After the device has fired, you can safely make calls to Cordova function.
In its call back function, I used jQuery.ajax method (don't forget to add jQuery library).

 In the url option, you put the url to your WCF service. Do not use localhost, you must use an IP. Since localhost to the emulator means itself.

Now when running the code on the emulator, You must also use IP in the URL to the application.
for example: http://192.168.1.103/Hello/assets/www/index.html

Now if we have an object we need to retrieve.
I created a simple book database and created a new ADO.Net Entity Data Model and called it BookModel.edmx

And used it to return to the application a list of books. Next is the code written in the service method and after it is shown the return when called in the browser.

Next is the javascript code added to the success callback of the ajax request. It took the returned array and created table rows to show the BookId and BookName

The result is

It is better to create light weight versions of the Model objects to send. Since I need only the ID and Name, it is a waste to send all the rest of the data to mobile application. In mobile applications, data send or received means money paid, so we need to be careful .

For example:

class LightBook{
                         int bookId{set; get;}
                         string bookName{set;get;}
}


Thanks,
Nerdy Geeky J!

Developing for Phone Gap using Visual Studio on TFS

Being used to visual studio development and starting with development for Phone Gap. I was successful to start working with eclipse and created my projects and loaded them to TFS.

It wasn't easy to work on eclipse and the emulator was too slow on my machine. The intelli-sense and editor of eclipse even after downloading Web Page Editor, wasn't comfortable to me.

After some trials and research, I found that we can use Visual Studio as an IDE and Ripple Emulator on Chrome browser.

So after creating your Phone Gap project and uploading it to TFS,you go to VS2012
==> Open website ==>Source Control

==> Select Source Control Project
then Choose your application from the Team Explorer

then choose a local folder to work in
and choose Run as IIS Web site
and choose the URL to host on IIS

Now you have 

Now to test your application on an emulator we need Google Chrome browser and Ripple Emulator 

after downloading them, you will have a ripple icon in the browser  toolbar as follows

Next after enabling Ripple, we can try by going to visual studio and choosing index.html and right-click ==> View in Browser(Chrome).

If Chrome is not default, use File ==> Browse With and choose Chrome (Set as Default), 

You will find a black page with multiple choice of platforms chooseApache Cordova 2.0,

And the you will find your page shown on the emulator which you can change and choose any device or platform as follows

Now you can edit and add you HTML, JS and CSS files in VS and test it in the chrome emulator.

Next I will write an article on accessing WCF webservices using jQuery in Phone Gap.

But to test the application on a device, we need eclipse and to finalize the application we need eclipse too. Take care that some PhoneGap features are not yet supported on Ripple. An example of such features is FileTransfer.

Thanks,

Nerdy Geeky J!

A simple solution when connecting to TFS everywhere from eclipse fails

To connect your eclipse project to TFS

http://msdn.microsoft.com/en-us/library/hh301122.aspx
http://msdn.microsoft.com/en-us/library/jj155782.aspx
http://msdn.microsoft.com/en-us/library/hh568708.aspx


Sometimes connecting to TFS fails, the authentication service is not accessible, a solution maybe 
Open Internet Browser ==> Tools ==> Internet Options ==> Delete Browsing History

Even if you are not using IE.

Link to Images in ASP.NET Theme folder

To link your image html tag to an image file in the asp.net theme folder, we need to create the image path. The variable part of the path is the theme name. This can be retrieved from the code in different ways:

If we have the following file organization:

App_Themes
      Default
           Images
               logo.jpg

In a class method,

namespace MyUtility
{
      class Utility
     {

                   public static string GetImageUrl(string relativeImageUrl)
                  {
                                 System.Web.UI.Page currentPage = HttpContext.Current.CurrentHandler as              System.Web.UI.Page;
                                 string url = relativeImageUrl;
                                 if (currentPage != null)
                                 {
                                      string pageTheme = currentPage.Theme;
                                      if (!String.IsNullOrEmpty(pageTheme))
                                                     url = "App_themes/" + pageTheme + "/" + relativeImageUrl;
                                 }
                                 return url;
                    }
        }
}

In ASPX
<img src="<%= MyUtility.Utility.GetImageUrl("Images/logo.jpg") %>"/>

Or simply we can do it directly in ASPX
<img src="App_Themes/<%=Page.Theme%>/Images/logo.jpg"/>

               


 Thanks,
Nerdy Geeky J!

Encrypting Connection strings in ASP.NET

 To secure your connection string you can easily encrypt your connectionStrings section of the web.config.

Open command prompt from visual studio tools menu in startup menu, Run as Administrator

Then print, if you use website on local IIS

aspnet_regiis -pe "connectionStrings" -app "/websitename"

Example:

Or if you are using a web application use
aspnet_regiis.exe -pef “connectionStrings”   "C:\path to application on local disk"

to decrypt use 

aspnet_regiis -pd "connectionStrings" -app "/websitename"

Or

aspnet_regiis.exe -pdf “connectionStrings”   "C:\path to application on local disk"

This can be applied to other sections of the web.config.

But note that if you will host your application on a shared host this will not be useful at all and it will not work.

You can use it on a dedicated server or your local server.


Thanks,
Nerdy Geeky J!