Friday, June 15, 2012

How to detect page refresh using Javascript

Today I'm going talk about how to detect a page reload/refresh using Javascript. It can be done using server side scripts, but I find that Javascript is the easiest method to do this. This is how I go about it:

First, we need a form to detect the page reload. If you have a form in your page, you can use the same, or in case that you don't have/use a form on your page, you can simply create one and set its CSS visibility to hidden, so that it doesn't unnecessarily show up on the page.

This is what you need to add to your HTML:

<body onLoad="refreshCheck()">
 Your website content here
 
</body> 

The necessary Javascript that is to be added is:

function refreshCheck()
{
 if( document.refresh.visited.value == "" )
 {
  // Page loaded for first time
  document.refresh.visited.value = "1";
  alert("Fresh!!");
 }
 else
 {
  // On page refresh
  alert("Refresh!!");
 }
}

That's it! You can handle the events as you want instead of the alerts ;)

Saturday, June 2, 2012

How to set up Apache Cordova (PhoneGap) in Visual Studio Express Edition for Windows Phone

Introduction:

In the previous post, I had talked about the PhoneGap (Apache Cordova) platform and it's features. It's now time to advance a step further and set up an environment to start working on PhoneGap. You can set up an environment on the SDK of any platform supported by PhoneGap to start coding on the PhoneGap standards. As I use Microsoft Windows to develop applications for Windows Phone using the Visual Studio 2010 Express edition for Windows Phone (the Windows Phone SDK provided by Microsoft), I found it easier to start working on the same for PhoneGap too. Alternatively, you can set up PhoneGap on Eclipse too, if you are already developing for Android. If you don't have Eclipse or Android SDK or AVD installed, I would recommend you to set it up on Windows Phone SDK as it takes very few steps to set up and doesn't demand much of your time or knowledge to setup the platform. I have come across many websites that talk about how to start working on PhoneGap using Visual Studio 2010 Express Edition for Windows Phone. The authors of such articles say that just the installation of Visual Studio 2010 Express enables you to work on PhoneGap by directly starting a new PhoneGap project in Visual Studio itself. But when I installed my copy of the same Visual Studio, I couldn't find the pre-installed PhoneGap templates. When I searched on the web for the solution for this problem, I found that many users seem to face the same problem as well. I'm still trying to figure out which version of Visual Studio does or does not have the templates pre-installed. However, this article can be the starting point for either cases.

Requirements:

  • Download the Windows Phone SDK from here: http://www.microsoft.com/en-us/download/details.aspx?id=27570 It includes Visual Studio Express for Windows Phone and the Windows Phone Emulator to test your app on the emulator. It also installs other packages like Silverlight and XNA Game Studio, which we won't be interested in.


Procedure:

  • Install the Windows Phone SDK and after the installation is complete, run Visual Studio Express for Windows Phone (You can find it in Start > All Programs > Microsoft Visual Studio 2010 Express > Microsoft Visual Studio 2010 Express for Windows Phone.exe)

  • Once you have started the Visual Studio, create a new project. If you have a PhoneGap template already installed, you can see it in the list of installed templates when you start a new project. If you see the following screen, it means that you have completed setting up PhoneGap on Visual Studio Express.






















  • If you see the above screen already, you are done with the installation of PhoneGap and that brings us to the end of this post. However, if you don't see the PhoneGap Starter template, read on and follow the instructions to set it up.

  • Extract the ZIP archive that you downloaded from the PhoneGap website in the step two of requirements mentioned above. Navigate to the extracted folder and look for the "Windows" or "Windows Phone" directory and find the following ZIP archives inside it: Cordova-(Version Number)-Starter.zip and Cordova-(Version Number)-Custom.zip. 

  • Copy these zip files from the folder to the templates folder of Visual Studio 2010. The target folder is located in your system at C:\Users\[USERNAME]\Documents\Visual Studio 2010\Templates\ProjectTemplates\

  • Now, start Visual Studio 2010 Express (Close and restart if it is already running) and create a new project. You will now find the Cordova template(s) in the list of installed templates: 




That's it! You have set up PhoneGap on Visual Studio for Windows Phone! In the next post, I shall talk about creating a simple Hello World application using PhoneGap on Visual Studio.

Friday, June 1, 2012

Getting started with PhoneGap


What is PhoneGap? PhoneGap (now known as Apache Cordova) is an open-source mobile development framework originally created by Nitobi, purchased by Adobe Systems. It enables developers to build applications for mobile devices using JavaScript, HTML5 and CSS3, instead of platform specific languages such as C#, XAML, Java, XML, Objective-C etc. The resulting applications are hybrid, meaning that they are neither truly native (all layout rendering is done via the webview instead of the platform's native UI framework) nor purely web based (they are not just web apps but packed for appstore distribution, and have access to part of the device API).

The following are the features of PhoneGap :

 
 
Building applications for each device like iPhone, Android, Windows Mobile etc. requires different frameworks and languages. PhoneGap uses standards-based web technologies to bridge web applications and mobile devices. Plus, because PhoneGap apps are standards compliant, they’re future-proofed to work with browsers as they evolve.

PhoneGap is an open source implementation of open standards. That means developers and companies can use PhoneGap for mobile applications that are free, commercial, open source, or any combination of these. The PhoneGap SDK provides an API that is an abstraction layer providing the developer with access to hardware and platform specific features. As PhoneGap abstracts the native mobile platform, the same code can be used on multiple mobile platform with little or no change, making your application available to a wider audience. By default, PhoneGap provides access to the device camera, accelerometer, file system, GPS location, and media playback among other capabilities. However, PhoneGap does not expose every native API for use within your JavaScript applications. If you want PhoneGap to do more than its default feature set, you can use the PhoneGap native plugin model to extend the capabilities of the core PhoneGap API. Native plugins in PhoneGap are not like plugins in desktop browsers; rather they provide a way for you to plug in custom code to add to what the PhoneGap application framework can do. PhoneGap native plugins enable you to create completely new, custom functionality in native code, and expose that to your PhoneGap applications via PhoneGap's native-to-JavaScript bridge. This means that you can expose any native library or framework for use within your JavaScript-based PhoneGap applications.

Official PhoneGap website: http://www.phonegap.com

You can take a look at the apps that have been previously made using PhoneGap : http://phonegap.com/apps

PhoneGap allows you to build the apps for different platforms using a single code base. Having said that, you still have to install the SDK of every supported platform for which you want an app to be built. For instance, if you are working on PhoneGap using Visual Studio Express Edition 2010 for Windows Phone, and you want an Android build, you have to port the same code to Eclipse, and the Android and PhoneGap plugins need to be installed in Eclipse beforehand. So if you are targeting 6 platforms, you need to have six SDKs installed and manually generate the builds for each platform. Feeling too lazy already? Here's a workaround that the PhoneGap developers have come up with - the PhoneGap Build. Forget all the pain with the SDKs, code once and compile on the cloud. It automatically generates builds for all the supported platforms! That's like a charm!

You can read more about compiling on the cloud here : https://build.phonegap.com/

All the public apps are free and are hosted on Github. You get to host one free private app and you have to pay for any subsequent private apps. The plans are as given below:
















On the whole, PhoneGap is simple, fun and saves a lot of time by just writing a single code. I have just started working on PhoneGap and hope to learn a lot in the process :)