Tuesday, March 11, 2008

Problem: No Drag-and-Drop On The iPhone/iPod Touch. Solution: Click-To-Click Move

As I mentioned in an earlier blog post, the drag-and-drop functions provided by various JavaScript libraries (jQuery, YUI, etc.) won't work in the iPhone/iPod Touch Safari web browser because the dragging gesture is used for scrolling around the web page.

That's a big problem for those of us who use drag-and-drop in our web applications to allow our users to reorder the items in a list, but I've come up with an alternative method for rearranging items using the jQuery JavaScript library that works on the iPhone/iPod browser as well as regular browsers. I call it the "Click-to-Click Move" method (CTCM).

The method involves the user making two clicks (or taps if they're using an iPhone/iPod). The first click is when the user clicks/taps on an HTML element (like an icon or hyperlink) within the item they want to move. That click fires off a jQuery-powered JavaScript function that creates target elements above each item in the list and a target below the last item in the list.

The second click/tap is when the user selects one of those targets as the new location for the item. That click/tap fires another jQuery-powered function that:

  • makes a copy of the item associated with the first click
  • deletes the original item
  • places the copied item beneath the target associated with the second click
  • deletes all the targets

The end result: the item has been repositioned within the DOM structure of the page. You can capture the new item order and save it via a form submit or an AJAX call.

I've put together a "to-do list" application to demonstrate the method. It's designed/optimized for viewing on an iPhone/iPod Touch Safari browser, but you can view it in a regular browser:


(Note: Non-iPhone/iPod users can also view it using the iPhone tester site http://www.iphonetester.com, which simulates the iPhone/iPod view minus the touch screen capability).

The demo includes a link to the GitHub repo where the code is hosted.

Finally, here are some screenshots from the "to-do list" demo:

The original list of items:

An item has been clicked, revealing the move, edit, and delete icons for the item:

The move icon has been clicked, and the target elements have been created:

The user clicked on the first target. The item is moved, the targets are deleted, and the list order has been changed:

Monday, March 10, 2008

BlueDragon Goes Open-Source: A Good Thing, But How Good?

Given all the other blog posts I've seen coming through my RSS feeds, this is hardly news at this point, but New Atlanta has decided to open-source their J2EE version of BlueDragon, a web application server package that runs/executes CFML (ColdFusion Markup Language, the language of ColdFusion):

New Atlanta announces free open source BlueDragon edition

I'm certainly happy about this development (as are many ColdFusion developers) because that means that anyone who wants to develop with ColdFusion will now have access to a robust CFML application server without having to spend money for the server software: money is no longer an excuse for avoiding ColdFusion.

But whether or not this announcement will have a significant impact on the prevalence of CFML as a development language in the marketplace remains to be seen. If New Atlanta makes an effort to market BlueDragon to web hosting companies who currently don't offer any ColdFusion development packages, we might see an increase in ColdFusion adoption simply because it's available as an option for developers whose clients rely on 3rd-party web hosting. They will also have to increase awareness of BlueDragon amongst the non-ColdFusion developer community and make it clear to those developers that BlueDragon is a serious, enterprise-class alternative to Adobe's ColdFusion server.

If New Atlanta does all that, perhaps we'll see that surge in ColdFusion adoption we thought would come when price was no longer an issue. But what if that surge never comes? What if price wasn't the big issue after all?

Then what?

Wednesday, March 5, 2008

Internet Explorer 8's Webslices Feature: Widgetizing Pieces of Web Pages?

The first public beta of Internet Explorer 8 was released today. In addition to supposedly being fully web standards-compliant, IE 8 comes with two new...well, capabilites: Activities and Webslices.

Curious (and admittedly a bit bored with what I was currently doing), I did a Google search and came up with a page that does a pretty good job of explaining Activities and Webslices:

IE8 Beta Is Out And With It Some Slices & Activities

The Activities capability allows web developers to provide XML code that will add contextual menu options to certain page content when you right-click on that content, allowing you to send that content to another web page or service, like sending an address on the page to a mapping service like Google Maps.

The Webslices capability is even more interesting (if I understand it correctly): using CSS, web developers can tag a piece of the web page as being a slice. End-users can then save this slice in IE, and IE will periodically check that slice for any changes. If the content is changed, the end-user is notified and they can pull up just that part of that web page as a pop-up widget in the browser.

I don't quite know what to make of it...it's like they've made it possible to send a request to a webservice from the page (Activities) and to make part of the page a webservice (Webslices).

It's an interesting idea, but what will the other browsers do with this stuff?