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

Lessons In Designing Great Enterprise Software

hub-and-spoke model

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.

Step by step guide to create Android build using Eclipse

This post is ‘on request’. In my earlier post on PhoneGap build, I explained steps to generate ipa files and install test apps on iOS without a MAC. In this post I will explain about Android build using Eclipse and Phonegap. For the first time users, make sure you have installed the following:

  1. Eclipse Classic
  2. Android SDK
  3. ADT Plugin
  4. Latest copy of Cordova

STEPS TO CREATE ANDROID BUILD

  1. Assuming you have already installed Eclipse, Android SDK, ADT plugin and Cordova. Let’s create a new PhoneGap project using Eclipse.
  2. Select Phonegap for Android project from menu.
  3. Select your installed PhoneGap version. You can also include latest Sencha Touch or Jquery Mobile library if you are using these frameworks for your project.
  4. Specify a project name.
  5. Select build target based on your device. You can change build settings based on your device from android properties menu. Android 2.3 or 2.2 works best for me.
  6. Specify application name and package name. Keep in mind that package name is written ulta.
  7. After successful creation of project, the project structure looks like this. www is main folder for your project which contains assets folder. index.html is main file for mobile apps.
  8. You can right click on project and select build for android. If your android device is connected, it will successfully install app in your android device.

Additional useful information:
The android apk is typically saved in

/bin

folder of your application.

To check if Android device and SDK is installed successfully you can use

adb devices

from command prompt. If your device is connected, it will show list of devices connected to your PC. If your device is connected and it doesn’t show any device there’s something wrong. Come back from step 1.

List PackageManager.getInstalledApplications()

will give you a list of the installed applications, and ApplicationInfo.sourceDir is the path to the .apk file.

Happy Android Building

Skeuomorphs and Metros: Best design practices for iPhone and Windows 8

From last few months I am researching on best practices for designing mobile applications. iPhone apps leading in all aspects cause of their skeumorphic designs but maybe that’s temprorary.

Skeumorphic Design iPhone A skeumorph is an element of design or structure that serves little or no purpose in the artifact fashioned from the new material but was essential to the object made from the original material. A very good example is what you might be wearing right now, your jeans. The age of your jeans serve no purpose whatsoever – they’re just an aesthetic hangover from a time when denim was too thick to be held together just be stitching, purely to make you feel comfortable.

The age and ruggedness in case of jeans is skeumorphic. You don’t think much about them, but it makes you feel good.



apple skeumorphic design

Apple’s Skeumorphic Design

Apple’s uses Skeumorphic design patterns for their apps. Check the notes, voice memos, organizers. We are full of Skeumorphs all around us. Our old jackets, our cars, bikes all are good example of skeumorphs. No matter how old they get or how many scratches they have we love them and we don’t want to replace them just cause of scratches or age. People even say that Apple’s overdoing their Skeumorphic designs but who cares? They lead the market as of now.

A question comes, are skeumorphic designs forever? Can’t there be better designs than that? Microsoft answered that question well by launching Metro Style apps for Windows 8 against Skeumorphic apps.

metro style apps

Microsoft Metro Style Apps

Microsoft recently introduced metro style apps when skeumorphic apps are already in the market. You can experience them on Windows Phone, Windows 8, XBOX. Windows 8 is build on Metro design language. The UI looks clean, elegant and fast. After trying few apps, I thought it will give a stiff competition to Apple’s Skeumorphic design patterns.

It’s really hard to design products by focus groups. A lot of times, people don’t know what they want until you show it to them. -Steve Jobs