Cordova calendar plugin for Windows Phone 8

If you worked with Cordova/Phonegap and came across calendar plugin for Windows Phone 8 you must be knowing that Windows Phone 8 does not support calendar plugin officially and there is no plugin in Cordova plugin registry. As a workaround I wrote native plugin to add appointments to device calendar and thought to share it with my readers in quickie blog. 🙂

Create a new cs file in plugins directory named AddCalendarEvents.cs and add following code-

using Microsoft.Phone.Tasks;
using Microsoft.Phone.UserData;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using WPCordovaClassLib.Cordova;
using WPCordovaClassLib.Cordova.Commands;
using WPCordovaClassLib.Cordova.JSON;

namespace Cordova.Extension.Commands {
	public class AddCalendarEvents: BaseCommand {
		public void addCalendarEvents(String str) {
			string[] calendarValues = str.Split('|');

			SaveAppointmentTask saveAppointmentTask = new SaveAppointmentTask();

			int appointmentYear = Int32.Parse(calendarValues[3]);
			int appointmentMonth = Int32.Parse(calendarValues[4]);
			int appointmentDate = Int32.Parse(calendarValues[5]);
			float appointmentTime = float.Parse(calendarValues[6]);

			DateTime scheduleApptDateStart = (new DateTime(appointmentYear, appointmentMonth, appointmentDate, 7, 0, 0)).AddHours(appointmentTime);
			DateTime scheduleApptDateEnd = (new DateTime(appointmentYear, appointmentMonth, appointmentDate, 7, 30, 0)).AddHours(appointmentTime);
			saveAppointmentTask.StartTime = scheduleApptDateStart;
			saveAppointmentTask.EndTime = scheduleApptDateEnd;
			saveAppointmentTask.Subject = calendarValues[1];
			saveAppointmentTask.Location = calendarValues[2];
			saveAppointmentTask.Details = "";
			saveAppointmentTask.IsAllDayEvent = false;
			saveAppointmentTask.Reminder = Reminder.FifteenMinutes;
			saveAppointmentTask.AppointmentStatus = Microsoft.Phone.UserData.AppointmentStatus.Busy;
			saveAppointmentTask.Show();
		}

		public void getCalendarEventData(String str) {
			ButtonAppointments_Click();
		}

		private void ButtonAppointments_Click() {
			Appointments appts = new Appointments();

			//Identify the method that runs after the asynchronous search completes.
			appts.SearchCompleted += new EventHandler < AppointmentsSearchEventArgs > (Appointments_SearchCompleted);

			DateTime start = DateTime.Now;
			DateTime end = start.AddDays(7);
			int max = 20;

			//Start the asynchronous search.
			appts.SearchAsync(start, end, max, "Appointments Test #1");
		}

		void Appointments_SearchCompleted(object sender, AppointmentsSearchEventArgs e) {
			//Do something with the results.
			//MessageBox.Show(e.Results.Count().ToString());
			try {
				e.Results.ToList();
				MessageBox.Show("Success");
			} catch (System.Exception) {}

		}
	}
}

Refer plugin in config.xml-

<feature name="AddCalendarEvents">
        <param name="wp-package" value="AddCalendarEvents" />
        <param name="onload" value="true" />
    </feature>

 

If you have basic knowledge of Cordova it should not be tough.

You can call it using

var inputCalendarString = notes + '|' + title + '|' + location + '|' + appointmentDate.getFullYear() + '|' + (appointmentDate.getMonth() + 1) + '|' + appointmentDate.getDate() + '|' + '1.0' + '|' + ' ';
cordova.exec(null, null, "AddCalendarEvents", "addCalendarEvents", inputCalendarString);

It works for one event but if you have loop of events it will not work. To support multiple events, you can maintain Localstorage flag & data with current index of events data. Use resume callback to add rest of the events using custom appointment plugin that you wrote. Each time your app resumes you increment index and add events data from next index.

document.addEventListener('resume', this.resumeApp, false)
resumeApp: function () {
if (localStorage.getItem('updatecalendar') == 'false') {
syncUpdatedCalendarWP8();
      }
}

Happy Coding!

Advertisements

The great framework battle: PhoneGap vs Titanium

One of the most common discussion topic among developers when planning to develop any mobile/web app is selection of right framework. There are various HTML5 frameworks that help developers by providing CSS styling and APIs to cut short the pain of dealing with HTML5. When it comes to development of mobile apps, there are two famous solutions for cross platform development, PhoneGap and Appcelerator Titanium.

Architecture
PhoneGap is HTML/JS/CSS. PhoneGap is not just a native wrapper of a web app. Apps developed using PhoneGap are web apps running inside a UIWebView control. Through PhoneGap API, the “web app” has access to the mobile functions such as geolocation, camera etc. On the other hand Titanium doesn’t compile your HTML, CSS or Javascript code into “native bits”. They are packaged to resources as executive bundles much like an embedded image file. When an application runs, these resources are loaded into a UIWebView control and run there as Javascript code. From architectural standpoint these two frameworks are very similar.

Flexibility
Apps build using Titanium are native and they can’t be reused among different platforms. Code once, deploy everywhere. PhoneGap promotes code reusability and portability so that same code can be deployed among different various mobiles, tablets and TV with minimal change.

Performance
One advantage of Titanium over Phonegap is that Titanium provides access to device native UI functionalities, which means Titanium apps are native apps developed using web technologies. PhoneGap does not expose many UI components to the JavaScript. Apps developed using PhoneGap are web apps running inside a UIWebView control. Titanium Apps become native apps whereas PhoneGap apps start their life as WebApps and die as web apps.

Licensing
Phonegap is MIT licensed and Titanium is Apache licensed. How that help in selecting a framework from technical perspective.

PhoneGap Build
One more cool thing with using PhoneGap is their PhoneGap Build services, which lets you package mobile apps in the cloud. Upload your HTML, CSS & JavaScript assets to PhoneGap Build and they will compile it for you.

Summary
If you are looking to create an app with native look and feel using your existing web development skills Titanium is the right choice, but If you want to be able to “port” your app to various platforms and devices more easily, PhoneGap is the right choice. There are more than 80,000 apps developed using PhoneGap as of July 2012.

New PhoneGap build- quick walkthrough

I got a call from one of my friend that new PhoneGap build is not working, so I thought I will give it a try and write some technical tutorial after a long time. I checked PhoneGap build and figured out that it was working fine and it didn’t ask for any password(Someone told me it was asking for password?). So here is quick tutorial on Adobe’s new PhoneGap build. Lets count least number of steps it takes to build an App using PhoneGap-

  1. Go to PhoneGap build an sign in to your account. I am using my GIT credentials.
    1

    2

  2. Create a new App and upload zip file i.e. www folder your app.

    3

    4

  3. After that click on App and you will have build for Android ready, you can download APK file by clicking on Android icon
    6
  4. To create custom build for iOS you will need to upload and select your key from menu. To do that, click on App from main menu, click on builds and select key from the dropdown. If you have not added a key yet, you will need to add it manually.
    6

So that’s it, 4 simple steps to build apps using PhoneGap. Please don’t forget to add config.xml in your app. As PhoneGap says, ‘Make your life easier by including config.xml in your project’. Do post your comments for any queries.

Book Review- WordPress Mobile Applications with PhoneGap

WordPress Mobile applications with PhoneGap
Title: WordPress Mobile Applications with PhoneGap
Author: Yuxian Eugene Liang
Publisher: Packt Publishing
Language: English
ISBN: 978-1849519861
Paperback: 96 pages
Publishing Date: December 21, 2012
Rating: 4
Reviewed by: Nikhil Mishra

Topics Covered:

  • WordPress environment setup
  • WordPress themes and plugins installation
  • Google Maps API with GeoPlaces theme to provide geographic capabilities to the theme
  • WordPress JSON API to GET, POST and UPDATE blog content
  • Theming content using jQuery Mobile
  • Deploying application on Android using PhoneGap

My Thoughts
I was somewhat confused when I got to review a book which weighs in at just over 50 pages plus index but I have to say I was pretty much impressed by its contents. The book covers the use of the WordPress JSON API plugin for embedding WordPress blog in mobile applications. The author spends time in explaining basics of WordPress installation, installing WordPress themes and plugins, theming using jQuery Mobile, and building applications for Android using Eclipse and PhoneGap. Could have been better if Yuxian explained iOS deployment and used some open source theme to explain GeoPlaces. Overall, a great guide for beginners.

To read more about this book visit link.