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.
(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. :)
Archived Comments
Yippee! First comment.
This looks really cool Ray. Could be super useful for testing. Great job.
I'll Be adding this to my Ray and(Ben) Rocks collection ... ;)
And that would be "Bango" with an "a", Mr. Camden!
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.
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.
fixed rey - sorry
signed, the other ray
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.
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
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.
@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. ;)