Blog

Blog posts made in December 2011
31Dec
2011
Flex Accepted As Apache Incubation Product

Title says it all, see this message.

Read More ›

30Dec
2011
Displaying A Loading Indicator In jQuery Apps

The following is based on a jQuery Mobile app I am working on. But, the code and details apply to jQuery, too.

The app I am working on makes frequent Ajax calls to back-end services, and so I want a busy indicator that shows the user that activity is occurring. This is actually really easy to do, once you have a few steps in place. So ...

First you'll need the indicator itself. The simplest way to do this is with an animated GIF (and, yes, that means that the indicator won't reflect the relative wait time like a progress bar would). For great free animated GIF loading indicators, go to ajaxload.info. Once you have the image, embed it in your page using an <img> tag:

view plain print about
1<img id="imgAjaxLoader" class="ajaxLoader" src="images/ajax-loader.gif" />

I want the image centered on the page, accomplished using this CSS:

view plain print about
1.ajaxLoader {
2    position: fixed;
3    top: 50%;
4    left: 50%;
5    margin-top: -24px;
6    margin-left: -24px;
7    z-index: 100;
8    display: none;
9}

The GIF I used was 48px x 48px, so the margins are set to -half that size. That, combined with 50% for top and left ensures that the image is centered in the page. z-index is set to 100 to ensure that the image is in the foreground, and display:none prevents the image from being displayed.

Now there is an invisible animated GIF on the page. The next step is to show the image when an Ajax call starts and hide it when the call completes. jQuery makes this incredibly simple to do via the ajaxSetup() function. Here's the code:

view plain print about
1$.ajaxSetup({
2    beforeSend:function(){
3        $("#imgAjaxLoader").show();
4    },
5    complete:function(){
6        $("#imgAjaxLoader").hide();
7    }
8});

When an Ajax call is initiated, beforeSend calls .show() to display the animated GIF, and when complete, .hide() hides the image. Simple.

My own jQuery Mobile app makes Ajax calls on multiple pages, and so I embedded the same animated GIF on each page, all using the same style. Rather than bothering to track which page is displayed to show / hide just that animated GIF, I use jQuery to show / hide all of them, like this:

view plain print about
1$.ajaxSetup({
2    beforeSend:function(){
3        $(".ajaxLoader").show();
4    },
5    complete:function(){
6        $(".ajaxLoader").hide();
7    }
8});

.ajaxLoader finds every tag styled as ajaxLoader, so $(".ajaxLoader").show() shows all of the loader GIFs and $(".ajaxLoader").hide() hides them all.

Nice and simple!

Read More ›

29Dec
2011
jQuery Mobile Collapsible Control Refresh Gotcha

jQuery lets you manipulate control contents at runtime, for example, you can add and items to an ordered or unordered list using code like this:

view plain print about
1$('#myList').append('<li>Some text</li>');

If you do this in jQuery Mobile, you must then force the control to refresh so that formatting and styles are reapplied, like this:

view plain print about
1$('#myList').listview('refresh');

Simple, right? Well, not always. One of my lists contains collapsible items created using data-role="collapsible". And for some reason that I have yet to determine, when listview('refresh') refreshed the control it did not refresh the collapsible data-role, so all data was displayed, head and collapsible content, in one mess.

The solution? I had to call the collapsible() method on each list item that needed to be collapsible in addition to doing the refresh. I used jQuery .find() to find all <li> controls with a data-role of "collapsible", and then called .collapsible({refresh:true}) for each, like this:

view plain print about
1$('#myList').listview('refresh');
2$('#myList').find('li[data-role=collapsible]').collapsible({refresh:true});

Obviously, to use this code with other controls you'd need to change 'li[data-role=collapsible]' to reflect the HTML control you are using.

Again, I have yet to figure out why this is necessary. But, it is, and it works.

Read More ›

27Dec
2011
Flex Joining Apache Incubator Voting

Bertrand Delacretaz has announced that the proposal to have Flex join the Apache Incubator is now open for voting.

Read More ›

21Dec
2011
EchoSign eSignature App For iOS

Need legally-binding electronically signed documents on the go? Check out the free Adobe EchoSign app. Details here

Read More ›

16Dec
2011
Adam Flater On The Future Of Flex

Earlier this week we hosted a summit to discuss our plans for Flex and the partnership with Apache Software Foundation. In attendance was Roundrach's Adam Flater who has shared his thoughts on the subject. This one is worth the read, both the post and the comments.

Read More ›

16Dec
2011
ColdFusion Positions In NY, MN

Two this week:

  • Nature Publishing Group (New York, NY) is looking for a senior ColdFusion developer. Requirements include minimum of 5 years programming experience for customer facing websites, and experience with ColdFusion 8 or 9, e-commerce integration, and mobile development. Details posted online.
  • InfoComm International (Minneapolis, MN) is looking to hire a ColdFusion 6-9 month contractor with the possibility of full time hire. Requirements include experiance with ColdFusion and SQL Server. Frontend experience such as JQuery preferred. Details posted online.

Read More ›

15Dec
2011
FusionReactor Mobile Released For iOS

Intergral has announced a free iOS client for their FusionReactor Enterprise Pro - Active Server Monitor. FusionReactor Mobile provides a feature rich monitoring dashboard which gives you instant notifications of your current server status. It is the ideal way to keep track and monitor your Adobe ColdFusion Servers, Flex and J2EE applications directly from your mobile device. An Android version is on the way.

Read More ›

13Dec
2011
Trapping jQuery Mobile Dialog Open And Close

I needed to trap the events triggered when a dialog is opened and closed in a jQuery Mobile app. After trying all sorts of combinations of open, close, and dialog events, I found that these will do the trick:

view plain print about
1// Dialog opened
2$('#myDialog').on("pageshow", function() {
3    alert("Opened");
4});
5
6// Dialog closed
7$('#myDialog').on("pagehide", function() {
8    alert("Closed");
9});

Read More ›

13Dec
2011
ColdFusion Security Hotfix Posted

The ColdFusion team has just posted a security hotfix to address a potential cross-site scripting vulnerability in ColdFusion 8.x and 9.x (Windows, Macintosh and Unix).

Read More ›