File Drag-and-Drop
Enabling widgets to handle file or text drag-and-drop only involves defining a new event handler that's triggered on a drag-and-drop event. In Listing Two, the event handler function handleDrop is executed when a file (or some text) is dragged and dropped in the text area. Although not required for basic drag-and-drop, the widget calls the related handleTypedNote function when users press a key in the dropBox text area. This is done by these elements from lines 12-13 of Listing Two:
<textarea name="dropBox" ...>
...
<onKeyPress function=
"handleTypedNote"/>
<onDragDrop function=
"handleDrop"/>
...
The functions that handle the drag-and-drop and key press events are defined in the external JavaScript file ClipNotes.js and in Listing Four. The most interesting function is handleDrop in lines 3-15. It shows you the basics for capturing text or files dropped into an area. The system.event property is a global property that contains details about the most recent event, such as drag-and-drop or mouse-click events. In this case, the event is an onDragDrop event, and includes the array, system.event.data, with two pertinent properties. Index zero of the array contains the type of element that was dropped (a collection of files, or bit of text), and is used in line 10 to establish the type of upload to perform (either a file upload, or note upload). Index one of the array contains the details of the element dropped (the name and path of the dropped file, or text dropped), and on line 8 becomes the new text displayed in the text area.
The other two functions in Listing Four serve to support drag-and-drop handling. Since the Clip Note widget should only upload image files, it uses the validateFile function (line 23-25) to check the filename on line 10. If the file is not an image, it's treated as text.
The final function handleTypedNote in lines 17-21 is executed when users type into the text area, and simply changes the type of upload back to note. This is necessary when users drag images into the text area, then modify the text in the area.
Interacting with the RIA to Upload Files
Finally, we examine how to upload the note or text file to a server. Before looking at the JavaScript, recall the specification of the event handlers for the Upload button image in Listing Two:
<image name="uploadButtonImg" ...>
<onMouseDown function=
"handleUploadPress"/>
<onMouseUp function=
"handleUploadRelease"/>
</image>
The Upload button image has two associated event handlers. The handleUploadPress function, invoked when the mouse button is pressed, replaces the source of the upload image to give the visual effect of a button press. The handleUploadRelease function, invoked when users release the mouse button, sends the contents of the text area to a PHP script that stores the data in the database.
The primary responsibility of handleUploadRelease is to use a URL object to make the request to servers. The URL is created in line 9 and given the location of the PHP script on line 10. When uploading images, addPostFile sends the image file with the request (line 12). When uploading text or a URL, the data is associated with an argument (theNote) on line 15, and sent as normal post data. An asynchronous request to the server is finally made on line 18, and associated with a callback function uploadCallback. Just before sending the request, users are notified that a request is being made with an update to the status label (lines 13 and 16).
After the PHP script finishes updating the database and downloading the image, it generates a response that contains the string "success" or a failure message. This response causes the callback function to be executed, which updates the status label to indicate the server's response: server error (line 25), upload success (line 31), or upload failure (line 33).
Conclusion
The RIA model is a powerful model for developing applications. Integrating a RIA with small desktop applications can greatly enhance the overall user experience, but it is often impractical to develop a fully functional utility program from scratch. A desktop widget can alleviate these concerns by providing a low-cost approach to developing small effective desktop utilities that bridge the gap between the RIA and the desktop.
