I’ve been hard at work on a few projects in my spare time, but no excuses for the lack of recent posts.  I’ve been concurrently reading both No More Mondays by Dan Miller and Atlus Shrugged by Ayn Rand.  While one is fiction and the other is not, they both ironically (and unintentionally) share a theme – that one must take accountability of their own actions in order to accomplish any worthwhile goals.  Otherwise, complaining and shifting responsibilities and blame is the path to unhappiness and a life filled with woes. Of course, Any Rand doesn’t start really getting into this concept until around 450 pages into the book while No More Mondays isn’t even 1/4 the length of Atlus Shrugged.  Regardless, I’ve been enjoying both books (although this isn’t my first read of Atlus Shrugged, possibly my favorite novel).

I have some big plans to get through 3 books per month in 2011.  At the current rate, it looks like I’ll have to make up time in February, but I’m not at all jaded by the slow progress so far.  Onward and upward, so they say.

Life in project land has been moving at a quick pace.  Earlier this month I released a new website, Automated Web Design, which flaunts a simple web development technique for bloggers and Internet marketers.  www.automated-web-design.com provides a number of tutorial videos chronicling my creation of the site using Artisteer – a brilliant web theme template creator. It is possibly one of my favorite programs that allows me to build WordPress or Joomla themes in minutes (dead serious).

I’m also hard at work on a PlayBook app. My first frontier into PlayBook application development has been a fortunately smooth process.  Actionscript is an awesome language and Air is a great framework to be working in.  The fact that RIM chose Air as a main SDK for the PlayBook was a smart move IMO.

Along with the app development, I’ve found myself building tools to supplement the BlackBerry PlayBook Air SDK.  Some of those tools I’m hoping to release to the community soon.

As a result of all this PlayBook stuff, something that I’ve found myself looking into without much success in the last week has been Adobe’s FXG vector file format.  For whatever reason, in the latest Air/Flex SDK, Adobe has decided to deprecate the far more common SVG vector image file type in favor of their own markup that they call FXG.  It’s not that the schema or documentation is not available – as always, Adobe provides a good dish of documentation on their website.  The problem is that Adobe Illustrator is one of the very few programs capable of writing to this format and I’m not at all interested in purchasing Illustrator. Apparently Illustrator does a somewhat lousy job of converting from SVG to FXG anyway.

So in my quest to find more FXG related resources, I’ve put this tiny list together:

fxgeditor.7jigen.net

fxgeditor is a simple Flash based FXG online vector graphics editor.  It supports shapes, paths, lines and some effects but doesn’t seem to do gradients very well – at least from what I saw.  But like I said – it’s simple and free.  Certainly no Illustrator, but often Illustrator is unnecessary.
Project ROME by Adobe

This is interesting.  In an attempt to create creative software tools as a service, Adobe released “Project ROME”.  This app is available in both an online version and Air desktop application.  The application allows you to create documents in a variety of ways.  The documents can then be exported in a number of formats including FXG files.  Despite the potential that Project ROME seems to have, Adobe decided to stop development on it and released the application for free.  This, of course, works in our favor.
InkScape SVG to FXG xslt plugin

An extension was recently committed to the InkScape trunk for FXG exporting from the fantastic InkScape vector editor.  Post #24 in the link above describes how to install it.  Further down in the buglog (link above) there is a link to the updated xslt transform that is used to transform the SVG document to FXG.

Fortunately there is a difference between “deprecated” and “not supported” and SVG files can still be embedded into swf files. I can’t see that changing any time soon. In fact, I’d be seriously surprised if Adobe fully removed support for SVG.  It would be like (although arguably opposite) Google removing support for h264 video in Chrome… oh wait….

Last night I tried my hand with Google’s app engine.  In short, I totally   dig it.  I figured I’d try to make a very simple app that turned recent   Twitter stream posts from a user into a PDF file.  It was fun, it was   stunningly easy and the Python MVC framework that the Google Apps Engine uses is very nice.

The app performs a jquery JSONp lookup on the entered user screen name to  first make sure it’s valid and verify that the Twitter API isn’t “Fail  Whale”.  Then it submits the user screen name to a POST handler.  The POST  handler uses a Google App Engine URL fetch() to retrieve the top 100  tweets from the user’s Twitter feed and uses ReportLab’s Open Source PDF  generation toolkit to generate the PDF file.

Given that it simply uses the Twitter public API to retrieve the Twitter  feed, private users won’t be able to use this to turn their tweets into a  PDF file.  But if your Twitter account isn’t private, rejoice and click  here to turn your Twitter feed into a PDF!

1. Flex Builder 4.0 isn’t going to cut it.  You need to download the 4.1 update in order to avoid a very vague error when trying to deploy to the PlayBook simulator.
2. FlexBuilder is absolutely not required to build a PlayBook application.  I haven’t been using it.  Instead, I’ve turned to trusty Notepad++ on Windows.  If you plan on doing the same, make sure to remove the .as extension from the langs.xml file for the haskell language type.  Actionscript is already defined as a language with the .as extension, but by default, Notepad++ sets the language type to haskell when the .as extension is used.
3. You need the 32bit java runtime installed.  If using Windows 7 or Vista, you might have the 64bit version installed.  You can have both on your machine at the same time.  I downloaded the 32 bit JDK and unzipped it into c:\Java.  I then created a shortcut to the command line that also sets the JAVA_HOME path and adds the Playbook SDK bin folder to my PATH environment variable.
4. If you’re using the command line tools to build and deploy, you will find that packaging a number of large assets into a bar file will cause an error when deploying the bar file to the PlayBook when using the blackberry-airpackager batch file for install and launch.   Instead, break the packaging and deployment into two separate steps.  Step 1, package with blackberry-airpackager.  Step 2: Use blackberry-deploy to deploy the app to the PlayBook simulator.
5. If you’re building and deploying with the command line tools, use Ant.  It will make your life a billion times easier by allowing you to bundle your command line arguments into build targets using the exec command.  For example:
   
<target name="build-debug">
<exec executable="amxmlc.bat">
<arg value="-compiler.debug"/>
<arg value="HelloWorld.as"/>
</exec>
</target>
6. MXML isn’t optimized for the PlayBook yet.  Write it all out in action script.  ActionScript is a great language anyway  (best implementation of ECMAScript in my opinion) and the more you have to write in it, the better programmer you become.
7. Many of the PlayBook functions don’t have anything written for them in the QNX API yet.  So don’t search too hard online for geolocation methods.  I suspect that these hooks will be available in an upcoming SDK package.  By the way – RIM is hoping to release an updated SDK at least once per month (according to the first developer webinar).
8. I wasn’t able to get the debugger working with an app if it was deployed with the blackberry-deploy tool.  This is unfortunate, given point 4 above.  However, adl seems to work fine so in theory, you probably don’t even need to test in the PlayBook simulator for the majority of the time.  Just use adl and run as if it were a regular Air app.
9. Blitting BitmapData objects with CopyPixels is wicked fast for Bitmap based animation.
10. There is no way currently to change the opening BlackBerry splash for an app.  Ask RIM to change this via the developer forum or via email to pressure them to make this change.

The solution came easily and with nearly zero effort.

Step 1: Register at Dropbox for a new account.  New accounts come with a couple of gigs of storage space.  If this new account is simply for hosting large files for  your website, then don’t bother installing the Dropbox software.  Instead, click on the login button without entering any credentials. You will be brought to another login page that also has a “Create an Account” tab.  Use that to create a new account.

Step 2: Login to your new account through the website.  Navigate to your public folder and upload the audio clips there.  Your public folder is automatically shared and publicly visible.

Step 3: Install the WordPress Audio Player plugin.  This thing has a swanky minimalist design.  Login to your WordPress account and navigate to the Plugins menu on the left and click “Add New”.  In the search box, type in “Audio Player” and click search.  I’m fairly confident that the first or second plugin will be the one we’re after. It’s the one by Martin Laine.  Select the plugin and click the Install Now button. Activate the plugin after installed.  Even if the plugin installation warns that it doesn’t support WP 3 (and you’re using version 3, right??) it does. The WordPress plugin installation process is awesome. WordPress is awesome.

Step 4: Back in Dropbox, click the arrow to the right of the mp3 you’d like to use in your post.  A menu will show with a link to “Copy public URL”.  Click that and copy the public URL (CTRL-C or click the copy to clipboard button).

Step 5: In a WordPress post, use the following, where <url> is the copied url of the file and <sound file title> is the name or title that you would like to use for the audio clip.

[audio:<url>|titles=<audio clip title>]

And that’s it!

You can further customize the FLASH mp3 player via WordPress under the plugins menu, but personally I like the basic slick version that’s available by default.

I came across this article about how to use Twitter oAuth with .Net (via Twitter API documentation) and used the extended oAuth code for my own project.

Unfortunately in all examples of desktop apps that I can find, they all involve opening up Twitter.com in a web browser control to get the user’s PIN for the app. Of course, this makes sense, but I wanted to short circuit this process. I wanted to be able to enter a userid and password and go straight into my account.

Here’s a quick snip of my code in case you’re interested in doing the same. The code uses HTTPWebRequest and HTTPWebResponse to automate the PIN request procedure so a web browser control is not needed.

This code uses Twitter oAuth for .Net from here, which itself extends .Net oAuth from here. The code is probably not complete as I simply took the code snippets from a larger project and as such, some variables may not be declared or initialized properly.

//Assumes these vars are populated before below code.
private string _consumerKey = "";
private string _consumerSecret = "";
private string _userid = "";
private string _password = "";

//These get populated by below code
private string _token="";
private Uri AuthUri = null;
private oAuthTwitter oAuth;
private string _pin = "";

public void authenticate()
{
    oAuth = new oAuthTwitter();
    oAuth.ConsumerKey = _consumerKey;
    oAuth.ConsumerSecret = _consumerSecret;

    Uri AuthUri = new Uri(oAuth.AuthorizationLinkGet());
    _token = HttpUtility.ParseQueryString(AuthUri.Query)["oauth_token"];
    CookieContainer cookies = null;
    string content = getContent(AuthUri.ToString(), null, "", null, ref cookies);
    string authenticity_token = Regex.Match(content, "twttr\\.form_authenticity_token = '([^']+)';", RegexOptions.IgnoreCase).Groups[1].Value;

    string post = ue("authenticity_token", authenticity_token) +
                    "&" + ue("oauth_token", _token) +
                    "&" + ue("session[username_or_email]", _userid) +
                    "&" + ue("session[password]", _password) + "&Allow=allow";

    content = getContent(oAuthTwitter.AUTHORIZE, post, "https://www.twitter.com/", cookies, ref cookies);
    Match m = Regex.Match(content, "oauth_pin\\\">\\s*([0-9]+)", RegexOptions.IgnoreCase);
    _pin = "";
    if (m != null)
    {
        _pin = m.Groups[1].Value;
    }

    oAuth.Token = _token;
    oAuth.AccessTokenGet(_token, _pin);
    if (oAuth.TokenSecret.Length > 0)
    {
        string xml = oAuth.oAuthWebRequest(oAuthTwitter.Method.GET, "http://twitter.com/account/verify_credentials.xml", String.Empty);
    }
}
private string ue(string parm, string val)
{
    return HttpUtility.UrlEncode(parm) + "=" + HttpUtility.UrlEncode(val);
}

public static string getContent(string url, string requestBody, string referrer, CookieContainer cookies, ref CookieContainer retCookies)
{
    ServicePointManager.CertificatePolicy = new trustedCertificatePolicy();
    HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(url);
    request.Method = (requestBody == null) ? "GET" : "POST";
    request.UserAgent = "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6 (.NET CLR 3.5.30729)";
    request.Accept = "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8";
    request.Referer = referrer;
    request.CookieContainer = cookies;

    if (requestBody != null)
    {
        request.ContentType = "application/x-www-form-urlencoded";
        request.ContentLength = System.Text.Encoding.UTF8.GetByteCount(requestBody);
        Stream requestStream = request.GetRequestStream();
        StreamWriter writer = new StreamWriter(requestStream);
        writer.Write(requestBody);
        writer.Flush();
    }
    HttpWebResponse response = (HttpWebResponse)request.GetResponse();
    Stream stream = response.GetResponseStream();
    StreamReader reader = new StreamReader(stream);
    string content = reader.ReadToEnd();

    CookieContainer rc = new CookieContainer();

    UriBuilder ubuilder = new UriBuilder();
    Uri u = new Uri("https://www.twitter.com");

    rc.SetCookies(u, response.Headers["Set-Cookie"]);
    rc.Add(response.Cookies);
    retCookies = rc;

    return content;
}

In exchange, reCAPTCHA is putting the user challenge responses to good use. The service uses scanned in text for the CAPTCHA. The idea is that all the time spent “solving” CAPTCHA’s online can be channeled into assisting optical character recognition programs in decoding the hard to decode scanned in words. Neat, eh?

I put together the following reCAPTCHA in literally 3 minutes. For more information and to put your own reCAPTCHA into action, check out the site here: http://recaptcha.net/

You are likely registering the keyboard listener too early. It’s likely that you are calling an init() method where you register the keyboard event on creationComplete. Instead, call the init function later on. Try registering the event in the applicationComplete event handler.

More info here:
http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=304

Loading XML Asynchronously

In the past, I’ve implemented Ajaxiness by creating XMLHttpRequest objects (or Microsoft.XMLHTTP objects fo IE):

var request = (document.all)?new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest();
request.onreadystatechange = function(){
	if(request.readyState == 4)
		alert("Document loaded");
};
request.open("GET", "test.xml", true);
request.send("");

The above code just loads an xml file, test.xml, and alerts the user when the load is finished. It’s as simple an Ajax example as it gets. Fully cross-browser compliant (as much as necessary anyway). From there, you could use your browser’s ridiculous XML parsing capabilities which isn’t the same between browsers and with much trial and error and a whack of frustration, implement some client-server Ajax and maybe pull data into a grid or something.

As I’ve said, I’ve done it this way. But it’s insane. In this day and age of the wheel already having been invented over and over, the time needed to implement the core cross-browser Ajax functions should be zero. In fact, the addition of a particular library to your script can not only make cross browser Ajax and DOM\XML processing worry free, it can make your scripting days a hell of a lot easier in general.

That incredible library is… jQuery.

With jQuery, the above code becomes a one liner (sorta anyway):

$.ajax({
  url: "test.xml",
  success: function(retxml){
    alert("Document loaded");
  }
});

ECMAScript for XML (E4X)

ECMAScript is javascript. They’re one and the same. In 2004, a standardized extended version of ECMAScript was published that elegantly treated xml as a primitive data type. Doing so makes traversing an XML or DOM document a breeze. Firefox and Safari both support this standard. So does Adobe Flash\Flex actionscript. Unfortunately (and unsurprisingly) IE doesn’t and from what I’ve read, MS doesn’t intend to change that. This being the case, combined with the utterly depressing fact that IE is so incredibly popular, means that using E4X in any script is likely a poor choice for the time being (unless, of course, you choose not to support IE – good luck with that).

jQuery – the E4X Alternative

So for now, until either Dell’s stop being shipped with IE as the default browser or Microsoft decides to incorporate more of the browser standards, we’re squeezed out from using xml as a primitive data type. While this no doubt sucks, jQuery again comes to the rescue.

Suppose the following XML file named test.xml :

<Provinces>
	<Province name="Ontario">
		<Cities>
			<City>Kitchener</City>
			<City>Guelph</City>
			<City>Toronto</City>
		</Cities>
	</Province>
</Provinces>

We can easily load the file and traverse all City elements as follows:

$.ajax({
  url: "test.xml",
  success: function(retxml){
    $(retxml).find("City").each(function(){
    	alert("City: " + $(this).text());
    })
  }
});

Easy peasy…

jQuery not only enables easy Ajax, it also has many other cool features like fading and sliding elements and animation support that would certainly feed management’s buzz word frenzy.

For more information about jQuery, check out the homepage, http://jquery.com/.

Creating custom types with regular expressions is an extremely powerful tool:

The GUID type:

	<xsd:simpleType name="GUIDType">
		<xsd:restriction base="xsd:string">
			<xsd:pattern value="\{[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}\}"/>
		</xsd:restriction>
	</xsd:simpleType>

Phone Number:

	<xsd:simpleType name="PhoneNumberType">
		<xsd:restriction base="xsd:string">
			<xsd:pattern value="[0-9][0-9][0-9]-[0-9][0-9][0-9]-[0-9][0-9][0-9][0-9]"/>
		</xsd:restriction>
	</xsd:simpleType>

Postal Code:

	<xsd:simpleType name="PostalCodeType">
		<xsd:restriction base="xsd:string">
			<xsd:pattern value="[A-CEGHJ-NPR-TVXY]\d[A-Z] \d[A-Z]\d"/>
		</xsd:restriction>
	</xsd:simpleType>

SIN:

	<xsd:simpleType name="SINType">
		<xsd:restriction base="xsd:string">
			<xsd:pattern value="\d{3} \d{3} \d{3}"/>
		</xsd:restriction>
	</xsd:simpleType>