Cordova(Phonegap), jQueryMobile and making a popup

This may seem obvious to make a pop-up with jQuerymobile with its popup API, but its a little more than just calling the api.
The problem is closing the popup. When working in a single page application in jQuerymobile and phonegap, the closing of the popup will take you to different jQueryMobile pages depending upon your setup.
The solution is to make the popup ready to be open just at the current page and while closing it should not make the application go to different pages. The trick is to while initialising the popup widget, initialise it with "{history: false}", and thats all.
Here is a popup created with jQueryMobile API.

 
<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="b" data-dismissible="true" class="ui-corner-all">
	<div data-role="header" data-theme="a" class="ui-corner-top">
		<h1>My PopUp</h1>
	</div>
	<div data-role="content" data-theme="b" class="ui-corner-bottom ui-content">
		<h3 class="ui-title" id="myTitle">Title</h3>
		<input type="hidden" name="alertIdHidden" id="id_alert_hidden" value="" placeholder="alert id"  />
		<input type="text" name="idFName" id="id_FName" value="" placeholder="First Name" />
		<input type="text" name="idLName" id="id_LName" value="" placeholder="Last Name" />
		<a href="#" data-role="button" data-inline="true" data-theme="c" id="id_save">Save</a>
		<a href="#" data-role="button" data-inline="true" data-theme="b" id="id_cancel">Cancel</a>
	</div>
</div>
 

Here is the javascript code to initialise the widget and open it.

 
//making a popup which will not take you back to the previous page.
$('#popupDialog').popup({history: false});//awesomeness
$('#popupDialog').popup('open');
 

Happy coding :)

Fork me on GitHub

Settings Check for Apple Push Notification

While developing an iOS application with Push Notification, there might be a time, one comes across the following error message.

- no valid 'aps-environment' entitlement string found for application

Well, that means the APN (Apple Push Notification) server is denying to register your application. This situation arises when the signing certificate for the application differs from the one you generated for Push Notification.

The fix is to select the proper certificate in the settings for the project.
codeSigningCert

Happy coding.

Cordova (Phonegap) , alert message.

This might seem, very easy task. But then while making a customisable alert message, one need to think as to how to do it. While working on Cordova(phonegap), one can easily assume and which is true is the javascript alert script.

alert("Hello!");

The javascript alert will work. Then we do not have a customisation option except for the message. The solution Cordova provides is a function with the name as alert. The syntax is as below.

 
navigator.notification.alert(message, alertCallback, [title], [buttonName]);
 

In the very basic form, where one need to have a specific title, message and button name, the code I use is

 
navigator.notification.alert("My message", undefined,"My Alert", "ok");
 

Thats the simplest kind and if one need more generic, wrap the whole thing inside one of your own custom function as example below.

function showAlertWithTitle(title,message){
	navigator.notification.alert(message, undefined,title, "ok");
}

Hope coding.

iOS notifications from developer’s view

Notifications in iOS devices such as iPhone and iPad are a way to tell the user about some important thing has happened. From a users perspective it is just a message reminding thing.
For a developer, one must note the difference between the type of notifications. Well, to be at its simplest form, there re two kinds of notifications. One is local notification and one is push notification (think this as server is telling the iOS device to show the notification).
Well, why should I bother about these two as a developer ?! That might be the question if you are doing the notification programming in iOS for the first time. The answer is, iOS gives very certain instructions as to what and how to do the notification implementation.
Here is the official link to the Apple documentation.

There are only three types of UX for either of the notification (local or push). They are
1. Displaying an alert message
2. Badge the application icon
3. Play a sound

The settings to control these notification types are located in the global settings menu of iOS. Remember it, the settings of all the applications, which use notifications are at one place in all iOS devices and that is the "settings" menu.
Well, another subtle but important option is "notification center". Its the place, where all the notifications from all the applications reside. The settings, whether to keep the "notification" in "notification center" or not is also inside the global "settings" menu. Being a developer, the good thing about Apple and for that matter the iOS is, one does not code for adding settings item for notifications. It is done automatically for you by the OS (Operating System). All this magic happens, when you as a developer, makes a "certificate" for the application in Apple developer's portal for the application saying "this application used notification". Simple and elegant.

The major difference from developer's point, between local notification and push notification is local notification is scheduled. That means, we can not show a notification if certain things happen in the application. Once application goes to background, we lost power as a developer to do anything at all with that application. So local notifications can only be scheduled for a normal application (for music streaming applications we do get a little more control). If at all we have to notify the user on certain data change, we have to fall back to push notifications. This one is pushed by Apple Push Notification server. Though, there are third party services which can push data, but all of the data push to an users device route through Apple Push Notification server.
The last thing to note is Push notifications are created on the server and pushed to the device, at max, upon tapping the notification, the underlying application can be brought to foreground and thats all one can do as a developer.

Tips for phonegap developers :
1. There are two different official plugins (one for local and one push notification), but then these plugins are not always up to date or might not support your version of the phonegap(cordova), do some reading before you settle down with the plugins.
2. The third party service providers (for push notification) might have their own plugins (a lot of do have), its better to use their plugins if you are developing upon their infrastructure.

Tip for push notification :
Make sure you are creating proper certificate with "push notification service" enabled at "Apple developer portal" and then using a profile on XCode which uses that certificate.

Some push notification servers are
1. http://www.pushwoosh.com
2. http://www.xtify.com
3. https://pushwizard.com

Would like to know if anything I am missing here, I am putting things here as I am doing hands-on with this iOS "notifications" for the first time.

Java for iOS and Android

It seems that its a long wait for the Java developers. But the good news is the wait is over. finally we have an SDK which expects us to write in Java and deploy our application into iOS and Android.
Codename One is an opensource SDK, library, deployment system, all in all a platform to develop for mobile platforms.
The short story is I tried to put a simple helloworld application to put in my android phone and it took only 30 minutes to make my development environment ready to deploy to the phone.
Well, the whole of the SDK is just a plugin to Eclipse or Netbeans, depends upon your preferred IDE of choice. Thats all to it. What a developer gets, is a GUI builder, a simulator, the SDK and the complete framework. Now go straight into the IDE and start building the application you want to do with the Java skills. Finally decide where you want to put it, iOS or Android, select the option and push it to the cloud, so that Codename One cloud will make the build for you to deploy into the device. Thats a no brainer deployment and code migration.
What all that means is, one is very well ready to develop iOS applications in windows machine. A very nice and well thought of SDK and framework.

Happy Coding.

NME 3.2 is released

This seems to be one of the most active projects. The last beta release and this final release of NME 3.2 is a proof of that.
Well with this release it is now confirmed that NME supports SWF assets to publish to SWF and C++ targets. This is just one of the many advantages one get while using NME.

The new project file improvements are noted here.
Again I am putting the same here for a quick reference.

 
<?xml version="1.0" encoding="utf-8"?>
<project>
<meta title="Project" package="com.template.project" version="1.0.0" company="Example, Inc." />
<app main="Project" file="Project" path="Export" />
<window width="800" height="600" unless="mobile" />
<window fps="30" />
<source path="Source" />
<haxelib name="nme" />
<assets path="Assets" rename="assets" include="*" exclude="nme.svg" />
<icon path="Assets/nme.svg" />
<ndll name="std" />
<ndll name="regexp" />
<ndll name="zlib" />
<ndll name="nme" haxelib="nme" />
</project>
 

Happy haXe -ing

haXe : Conditional compiling

A nice and exciting feature about haXe is conditional compilation. That means one can specify which code to compile depending upon the target chosen at the compile time. Hah, that does not make sense ? Ya, I know. Let me explain again.
There is a compiler and while providing argument to it we have to specify which target we are compiling to. Like in case of haXe and NME we can compile it to a lot of different targets. The compiler argument for flash or swf output looks as below

haxelib run nme test app.nmml flash

Now we can compile the code to HTML5 with the following argument

haxelib run nme test app.nmml html5

Thats the beauty of the language. Most of the time its the same code, but then there are times when we need to write different codes for different targets (may be layout, view elements, can be anything). But then one does not need to keep a separate project for all the different cases. The solution is conditional compiling. What it does is depending upon the target type specified to compiler, it picks up the right code from the same file. Whoaa!! Magic :)
How does it do it or how we make it aware of this ?! You asked it. Lets see it.

#if flash
//Code for SWF output
#elseif js
//Code for HTML5/js output
#else
#end

Thats simple. Its one file, completely in itself, but when it comes to compiler it picks up the right code part depending upon the target type.

One thing to remember though, that when specifying HTML5 target, it picks up conditions from "js", it does not have a "html5" option. This particular thing took me sometime to figure out. Just thought would point out here saving someone's time out there.

Happy haxe -ing :)

NME 3.2 Beta is here

This is another exciting release of NME. And with this comes the support of SWF directly. Though its only for creating SWF and C++ targets but thats huge (Windows, Mac, Linux, Android, iOS, webOS), only thing not present is HTML5.

Now I am waiting to get my hands dirty with the new version.

The official blog entry.
A tutorial for the SWF support.

Happy haXe -ing :)

NME 3.1.1 is released

In between our learning time, the NMe team has updated the library to its latest version. The new NME version is 3.1.1. Go straight away to the download section and start playing in the new toy.

Happy haXe -ing

haXe : adding image to a project

Well, while its all well and good to create graphics and animations on runtime with code. We must agree that there are situations, when we need to external images in our project. This is done by defining a tag in our .nmml file. The exact thing looks as below.

<assets path="src/assets/" rename="assets/all/" include="*"></assets>

In the tag above we are defining that all the files inside "src/assets" folder will be copied over to our final project under folder "assets/all". Thats one part of the story. Now in our haXe code, we access the assets with their path as below.

import nme.Assets;//import the Class
var img:Bitmap = new Bitmap (Assets.getBitmapData ("assets/all/home.jpg"));//get the asset

The code above the pretty self explanatory. First we need to import the "nme.Assets" and then use it to get the asset into our project. Things to note, while providing path to access the resource, its the "renamed" path we define in the "XML" while adding the asset.
Happy haXe -ing