canvas-charts

I just committed my first open source project on GitHub. You check it out here.

Here’s the example client with graphs:

Horizontal Bar Graph

 

Line graph

Very neat!

CSS3 Wizardry

Recreating the iOS 5 Switch Control with HTML5, CSS3 and a Bit of ECMAScript 5

The final result of this post will run in iOS 5, Safari 5.1, as well as the latest versions of Chrome, Firefox and Opera.

Previously I had created a version of the switch control in iOS. With the launch of iOS5 Apple complete updated the look of the switch control. They went with a rounded style, which they also did with most controls in their desktop operating system, Lion.

After playing around with the early betas of iOS 5, I came up with the following reproduction of the new switch control look using just HTML5, CSS3 and some JavaScript for the interactive part. Functionally the switch control is nothing more than a fancier way of presenting a checkbox. So, for our purposes we are going to use a checkbox. Except that we need a couple…

View original post 1,309 more words

Android NetworkOnMainThreadException

Android has been lenient about network access on the main thread in prior versions and now with ICS, they are cracking down on us.

It is bad practice however to have operations that are intensive and for a network operation it is even more sensitive since the network speed is a varying factor that can block the UI for an unknown amount of time. Although it is annoying to have your app crash all of a sudden in new Android versions because you (and by that I mean, I) made a bad programming mistake, it is for your own good to consider porting your network access code to an AsyncTask. Writing an AsyncTask is shit easy.

private class SomeTask extends AsyncTask<Void, Void, Void>{

@Override

protected Void doInBackground(Void…params){

//your network access code goes here

}

}

and then in your UI thread or main thread, just instantiate this task and execute it and you’re done. Obviously, I have simplified the AsyncTask by not going into much details about the arguments and result codes etc..You can read all about that here. I can’t tell you how much I love the Android documentation. Say what you want about their fragmentation problem; I just love their documentation. Just amazing. There’s nothing you can’t find in there unlike Apple’s. I spent a whole day trying to figure out how to create those provisioning and distribution certificates and there’s not an article on the internet that ties it all together!

Squiggly – Android app

Squiggly

Squiggly is a calendar and location based app that can silence your phone. You know what the best part is? It knows where to silence your phone even without you telling it. Developed by my.app.factory.

Update: Squiggly just went live. Get it now for your Android here.

Update: An updated version (1.4) with much better location awareness and calendars functionality has been released to the Play store. Get it now! Don’t forget to look at the location types available for you to choose in Location Sentry.

Update: v1.4.2 coming soon with local calendar access for ICS and above devices. Watch out for the update on the Play store in the next few days.

Simple validation of required fields in html5 mobile apps

I am working on an html5 mobile app and wanted a simple validation of required fields. Nothing fancy. Just a simple validation that would let the user know they left something blank. Since I was not interested in checking the format of the values entered in these fields, I felt that I should create something very generic that can be reused across platforms especially by using html5 features. A micro validation script, if I may.

So the setup is pretty easy. You need to mark your required input tags with the required attribute. Now, remember that this is an html5 attribute, so while older browsers won’t understand this it shouldn’t break anything. The next, optional, attribute to set is the data-tab-id, which when set tells validating function that it needs to mark that tab with an indication that it contains errors. This will be useful when you have data entry in multiple tabs.

<input id=”name” type=”text” placeholder=”name” maxlength=”25″ required=”required” data-tab-id=”#tab1″/>

Next is the CSS, simple, nothing extreme:

input.inputrequired{
border: 1px solid #ff0000;
}

a.haserrors{
color: #ff0000;
font-weight: bold;
}

The haserrors class is for the tab. You can change the selector for this class to match whatever tag you would have used with your tabs. Again, this is optional, you do not need to set the data-tab-id in the first place, if don’t need this and you will, in a moment, see why.

Finally, the script:

var _validateInput = function(e){
var currentTarget = e.currentTarget;
var tabId = currentTarget.dataset[“tabId”];
var tab = $(tabId);
var result = false;
if(currentTarget.required && currentTarget.value == “” && tab != null && typeof tab !== “undefined”){
$(“#” + currentTarget.id).css(“class”, “inputrequired”);
tab.addClass(“haserrors”);
}
else {
currentTarget.setAttribute(“class”, “”);
//before removing the haserrors from the tab class check if any other siblings are in error
if($(“#” + currentTarget.id).siblings(“.inputrequired”).length <= 0 && tab != null && typeof tab !== “undefined”){
tab.removeClass(“haserrors”);
}
//set result to true since this input is fine
result = true;
}
tab = null;
currentTarget = null;
return result;
};

The actual event trigger:

//validates onblur the inputs that have required attribute
$(“input”).on(“blur”, function(e){
validateInput(e);
}, false);

Although the required attribute is backward compatible, meaning no existing functionality would break, there is no need to worry about old browsers for mobile anyway. The data- attributes are an html5 addition as well. They won’t be recognized by older browsers and you cannot access the DOM string map dataset from an element in older browsers. And again, there is no need to worry about these things unless you are planning to use this for the desktop in which case you will need to replace the use of dataset with a JS framework’s data() method which provides cross-browser support.

One nice thing about the “required” attribute is that when you place fields with required attributes inside a <form> element, when the form is submitted, the browser automatically validates them and shows a nice tooltip that the a value is required for the element. I wrote this script because I wasn’t using a <form> element and don’t think the required attribute validation is supported in mobile webview at least it is not widely supported.