Twitter: raymondcamden


Address: Lafayette, LA, USA

My first jQuery/AIR Application: Selecter Tester

04-16-2009 6,774 views jQuery 10 Comments

A few days ago I was speaking with Ben Nadel and Rey Bango about a problem I had with jQuery Selectors. I've only recently become a bit comfortable with them, but they can still be a bit confusing to use. I wondered if there was a way to create a test script. Currently I'll write my selector and do hide() (for those of you who don't use jQuery, you can probably guess that will hide the matched items) or apply a class that adds a border. I'll do a bunch of "edit/save/alt-tab/reload" tests which isn't always fun.

With that in mind, I built a simple testing application with jQuery and AIR. When it launches, you are presented with a simple UI:

You can then enter some code:

and switch to the render tab:

Now comes the fun part. You can type a selector value in the form above. As you do, jQuery will attempt to find, and match, the items in your page.

For example, I knew I could match li:first, but wasn't sure about li:last. Yep, it works:

You can install it here - and hopefully this badge thing will work.

Please upgrade your Flash Player This is the content that would be shown if the user does not have Flash Player 6.0.65 or higher installed.

(The badge isn't working on my blog preview. Folks, if you read this entry immediately after I post it, give me a few if the badge is broken. FYI - badge is definitely wonkey. Use the download link below. Update 7:39PM - badge works now.)

I used Aptana's AIR support plugin. It is nice, but has a few issues. I was never able to get it to run the AIR application. It wouldn't error - it just refused to do anything. I used the command line so it wasn't too bad. It did do a real nice job of laying down the files for a new project. I really appreciate that. It also handled creating the certs/.air file nicely as well.

I'm planning another modification to this soon, based on a suggestion Ben had. I'd also like to allow people to change the 'highlight' CSS in case a red border doesn't make sense.

Shoot, I don't know if this is useful or not, but, enjoy. :)

p.s. Download the app using the link below. It is a zipped version of the air file. The badge is just not working. Maybe I need to bug the Aptana folks more. :)

Download attached file

10 Comments

  • Commented on 04-16-2009 at 4:58 PM
    Yippee! First comment.

    This looks really cool Ray. Could be super useful for testing. Great job.
  • Commented on 04-16-2009 at 5:05 PM
    I'll Be adding this to my Ray and(Ben) Rocks collection ... ;)
  • Rey Bango #
    Commented on 04-16-2009 at 6:19 PM
    And that would be "Bango" with an "a", Mr. Camden!
  • Commented on 04-16-2009 at 6:37 PM
    This is pretty cool. Have you thought about making an option to change the selector engine? Then one could use this for Prototype, MooTools or any other selector engine.
  • dave #
    Commented on 04-16-2009 at 6:58 PM
    this is pretty cool...
    while not an air app I will use fluidapp http://fluidapp.com/
    to make lil test areas to try stuff nd it works pretty good.
  • Commented on 04-16-2009 at 7:20 PM
    fixed rey - sorry

    signed, the other ray
  • Nando #
    Commented on 04-17-2009 at 9:30 AM
    Hey Ray,

    This looks pretty cool. I'm in the middle of trying to figure out how to do something like this with selectors:

    var author = $("#author").val()
    $("#refSelectBox option[text^=author]").attr("selected","selected");

    Essentially selecting the author I've just inserted into a select box ... using a combination of $.post() and firing a custom event to refresh the options on the callback ... and setting it to the selected option. The deal here is that author is a variable and I'm not sure if that can be made to work somehow.

    Anyway, long story short, as you may already know, the CSS styling doesn't seem to work with select boxes:

    <select id="test">

    <option value="1">Kitty Cat</option>
    <option value="2">Cat</option>
    <option value="3">Tom Cat</option>
    <option value="4" selected>Bob Cat</option>

    </select>

    even with a simple #test selector entered.
  • Commented on 04-17-2009 at 9:47 AM
    ah. this is pretty nifty. i use this same technique for selector testing as well. the red border around matching elements is becoming a familiar technique. the web developer toolbar on firefox even uses it to highlight elements
  • Commented on 04-17-2009 at 10:12 AM
    This is super cool. I've been putting off learning how to build AIR apps. I had no idea you could run JavaScript within AIR. This is a big win for me. I've been trying to dabble in Flash/ActionScript a little and have had a difficult time remembering ActionScript's syntax. Being a jQuery lover, this is a huge incentive for me to learn to build AIR apps.
  • Commented on 04-17-2009 at 12:49 PM
    @Anthony: You mean there are other JS frameworks? ;) Seriously, um, I would assume the code would get a bit hairy. FYI, I promise to post the code too, maybe tonight.

    @Nando: Yeah, I'd assume my thing wouldn't work on items that can't be marked up. Good point there.

    @Joshua: Yeah, HTML AIR apps can be pretty powerful. AIR is a wonderful, kick ass, framework, whether you use Flex or HTML. I think it is the best thing Adobe has... after ColdFusion. ;)

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty