Entries Tagged as 'RIAs'

Mozilla Announces Jetpack, an API For Writing FireFox Adds-On with jQuery, HTML, and CSS

CSS , JavaScript , jQuery , Miscellaneous , RIAs 3 Comments »

I found out about this last night from a tweet sent out by the jQuery Twitter account (which is probably a good indication that they like the idea).

The subject line pretty much says it all: Jetpack is designed to let current web developers use their existing skills with HTML, CSS, JavaScript, and jQuery to build Firefox add-ons/plugins without the need to mess with Firefox's XUL mark-up language. While JavaScript has always been part of the add-on development process, the inclusion of jQuery should make performing certain actions a whole lot easier.

You can learn more about Jetpack via the following URLs:

...the tutorials in the final link give you a good idea of the kinds of things Jetpack will allow you to do: the last example is a Jetpack add-on that will count and display the number of unread e-mails in your Gmail Inbox.

I want to give Jetpack a whirl, but I honestly can't think of any functionality I want to add to Firefox that I can't get from an existing plugin. Anyone have any suggestions for something to try with Jetpack?

It's interesting how web technologies keep being repurposed as a development option in other technologies (Adobe AIR, the upcoming Palm Pre's WebOS, and now Jetpack). Even though I'm not particularly interested in delving into all these different areas, I must say that I like the trend. :)

Initial Impressions of Adobe Durango

Adobe , AIR , Flex , RIAs No Comments »

In an earlier entry, I mentioned the announcement at MAX of Durango, a framework for allowing end-users to build AIR applications out of shared components. I took some time last night to check it out, and here's what I learned...

First off, the components that make Durango work are Flex-based, so if you like to create AIR applications using HTML/CSS/JavaScript, it doesn't look like you can make use of Durango.

Durango allows a developer to make the Flex components they build (whether visual or non-visual/service-based in nature) reusable in other AIR applications. The 10-page long PDF file on the Durango page on Adobe Labs explains how to add Durango functionality to components. It also explains how to configure your AIR application such that it can either donate Durango-enabled components, receive Durango-enabled components, or do both.

The installation package available on Adobe Labs lets you experience Durango in action. Once the install is complete, you are then able to create a blank AIR application (one set to receive Durango-enabled components) simply by choosing the "New AIR Application" option now enabled in your OS (on Windows, you can simply right-click on the desktop to get to that option). Then you can open one of 4 sample AIR apps included in the install (all of which are set to donate their Durango-enabled components) and put it in "reuse" mode. Once the sample app is in reuse mode, the Durango-enabled components can be clicked and dragged onto the window of the blank AIR app you created, and now that component also exists in your AIR app, and you can save the changes to the AIR app. Certain properties of the component can be coded in such a way that the user can change them in the new AIR app, allowing for some customization of the borrowed component.

All in all, it seems like a fairly straightforward idea for making components reusable. The big question is whether or not end-users will utilize this feature. Folks who use a lot of separate AIR applications may see some value in taking bits and pieces from multiple apps and combining them. And it remains to be seen how AIR developers will feel about allowing the components they worked so hard to build to be taken and repurposed by other developers.

CoCoMo Now Out on Adobe Labs

Flex , RIAs No Comments »

This morning I read on Ryan Stewart's blog that CoCoMo is now available as a beta on Adobe Labs.

CoCoMo is a set of Flex components (described by Ryan as a "framework") that lets you add real-time communication and collaboration features to Flex applications, functions such as VOIP, webcam videoconferencing, multi-user whiteboards, and file sharing.

I haven't touched Flex since dabbling with Flex 2, mainly because none of the apps I build involve rich media such as audio and video (an area where Flex has a clear advantage over HTML and JavaScript). CoCoMo gives me new reasons to look at Flex as a production development platform.

The North American session of Adobe's huge MAX conference begins today, so I expect that there will be more news and announcements regarding Flex, ColdFusion, and AIR coming this week. Could be an exciting week!

Leveraging the Ubiquity FireFox Plugin To Access CFQuickDocs Pages

JavaScript , jQuery , Miscellaneous , RIAs , Technology 3 Comments »

If you're a FireFox user and you haven't tried out the new Ubiquity plugin created by the folks at Mozilla Labs, you should.

What is Ubiquity? The short answer is it's a command-line interface for retrieving and re-purposing web content. For example, the "wikipedia" command built into the plugin takes the word you type in, retrieves data from the top 5 matches for that word (as you type it, no less) in Wikipedia using an API, and displays that data with clickable links to the Wikipedia pages in the command window:

You can see even more interesting uses for Ubiquity by watching the video clip in the Ubiquity blog post.

One of the things about Ubiquity that hasn't been talked about very much is that you can create your own Ubiquity commands using JavaScript and then share those commands with other Ubiquity users (note to jQuery users: Ubiquity commands can use jQuery functions as well as regular JavaScript functions). To that end, I created a very simple command that lets me call up a particular CFQuickDocs page by typing "cfquickdocs" and the name of the CFML tag or function I want to look up:

As Ubiquity commands go, it's not that impressive, but it does let me pull up a particular entry faster than I used to (which involved going into my bookmarks, clicking on the bookmark, waiting for the page to load, and then entering the tag or function I want to read about). And all it took was one function call with four parameters:

makeSearchCommand({
  name: "cfquickdocs",
  url: "http://www.cfquickdocs.com/?getDoc={QUERY}#{QUERY}",
  icon: "http://www.cfquickdocs.com/favicon.ico",
  description: "Searches the CFQuickDocs for the CFML tag or function you enter."
});

Sharing a Ubiquity command is simply a matter of putting the command in a JavaScript file and then creating an HTML page that calls that file. If you already have Ubiquity installed, you can install this CFQuickDocs command into your Ubiquity plugin by going to the following URL:

http://www.swartzfager.org/ubiquity/cfquickdocs.html

If you don't have Ubiquity installed but want to learn more about developing Ubiquity commands, there is an online tutorial that explains the basics. Once you have the plugin installed, you'll have access to a command editor that lets you try out your commands as you code them, and you can read the code for all of the functions that come built into the plugin.

Some updates on reordering items with jQuery

JavaScript , jQuery , RIAs 1 Comment »

If you follow my blog at all, you know I have a keen interest in being able to reorder items in a list and then record that change in order in a database using JavaScript, specifically with the jQuery UI Sortables component. Here's some things I've learned recently regarding the topic:

Reordering Nested Lists

In my last project, I created a tool that allowed my clients to rearrange nested lists of articles and article categories using the jQuery UI Sortables component and the techniques I demonstrated in an earlier blog post.

My clients were very excited about the tool when they saw it in the prototype, but they ran into some difficulty when they tried to use it themselves during the final testing. They found it hard to place an item at either end of a list block because there were no visual cues outlining the borders of the list.

It was also nearly impossible for them to move an item around in the top-most list: if they tried to place it in between sibling items or at the end of the list, the item would almost always get dropped at the end of whatever sublist came at the end of the sibling item above.

Finally, the scrollable <div> element containing the nested lists would not scroll to match the drag movement of the cursor, so if they needed to move an item from one end of the nested lists to the other, the item would have to moved in steps.

I solved all of these problems by abandoning the drag-and-drop technique and replacing it with a version of my "click-to-click move" technique. So now when they need to move an item, they click on an icon associated with each item (hidden until needed), and target <div>s are created above and below each item: Image of move targets in my last project

They then just click on the target for the place they want the item moved to, and the item is "moved" and the targets are removed (technically, the item is cloned, the clone is put in the new position, and the original item is deleted).

They like the "click-to-click move" version a lot better, so perhaps that's a better means of reordering items when using nested lists. But I recently discovered jTree, a brand-new jQuery plugin someone wrote specifically for sorting nested lists using drag-and-drop. I tried out the demo for it, and it has visual cues to help you position items in the right list, but it does flicker a bit at times. Still, I might play with it the next time I have to deal with nested lists again.

Reordering Table Rows

Lists are nice, but they don't cut it when each item is really a collection of separate items: that's when you need a table. In my current project, I needed a way to reorder the rows in my table as a means of letting the user reorder the data records. The jQuery UI Sortables component, however, does not work on table rows.

I tried to create a pseudo-table by using <div>s within each <li> item to evenly space the data fields in each row. I got it working and looking slightly less than ugly in FireFox, but it didn't fare so well in IE.

I then went browsing through the jQuery UI discussion board on Google Groups and found a post that mentioned a plugin for sorting/rearranging table rows.

It's called TableDnD, and it's a slightly different approach to the challenge. When you click on a row and drag it, there is no drag outline and no gradual movement: if you move up far enough, the content of the row you're dragging and the row above it quickly switch places, and vice-versa if you move downward. It highlights the moving row as you move it so you can keep track of what's happening. The movement is very smooth and you can go as fast as you like.

The only drawbacks I'm aware of so far is that the dragging action will not trigger the scroll bar if you're trying to drag the row beyond the visual limit of the window or scrollable container (much like my original nested list tool), and someone pointed out to me that if you fill all of the cells in a row with other DOM elements such that you cannot click on any of the cells themselves, you won't be able to grab the row and move it. That's not a problem your table cells just contain text, but it's something to keep in mind if you plan on formatting the text with <span> tags or providing input boxes for the user to edtit the cell data.