Introduction

This is an old application that I made about half a year ago. It is an Active Desktop Item that allows you to write down small notes and then save this so that it will be there the next time you boot. I also added an option dialog and support for skins just before releasing this.

I'm not going to cover all the steps needed for this application but I'll just give a short walk through.

User Interface

The main application consists of a frameset with a tool bar at the top and a rich text editor below. The editor can be set into edit mode by pressing a button on the tool bar. The tool bar consists of 5 buttons. These buttons are just plain cool buttons (behavior version).

The tool bar is set to auto hide. This is achieved by listening for mousemove and mouseout. When the mouse enters a timer is started and after a short time the toolbar is made visible (dynamic frameset). There is one small thing here. Once the editMode is changed for the editor document the event listeners needs to reattached.

Options Dialog

The options dialog is implemented using a standard window. It consists of Emil's Tab Strip Control and one of the pages contains the Skins options.

File Management

The file management is done using the FileSystem object. The file system is used to save the text and to find what skins are installed. The file management only works on local copies of the application.

Skins

Each note in the Todo application is a table with one cell. The page containing these notes is a very simple html page with one link tag used to define the styles of the notes.

The options dialog looks through all sub directories of the application and if it finds a file called todo.css it adds the name of the directory to the list of all skins. When the skin changes, the link element in the editor document is updated to use the css file of the selected skin. (Notice that you have to resave the document to make the skin be loaded the next time the application is started.

The selected css file can contain any css that IE5 understands, including behaviors. At the time of writing this, there are four skins included in the distribution. One of these uses the genmove behavior and three of these uses background images. A trick to achieve a window look on your notes is to use a background image on the table and one on the table cell. Using background position and no-repeat allows you to have one image for the upper part and one for the lower part.

Demo

You can try the application online but the save and skin features are disabled.

Try it

Installation

Download the zip file and extract it to any directory. Then turn on your Active Desktop (or run it as a normal html file inside IE) and add a new desktop item. Browse to the directory where you extracted the files and select the file todo.html.

Related Material and Information

More skins can rather easily be ported from other skins. A lot of skins can be found at Skinz.org and other skin sites. You should probably ask the author of the original skin that you are porting for permission (oops I forgot to do that).

One might also want to disable the security warnings that happens all the time when trying to access the file system in local html files. I have a solution for this but I do not recommend that you use it unless you really know what you are doing. You will have to start thinking that all local html files are potential trojan horses. However the security changes do not effect your email settings (I thought it might so I tested). It will not open up Outlook (Express) to those dangerous script attachments. If you really want to know how to do this click this link. Don't say I didn't warn you.

What's Next?

I would really like to use the background image that is used for the desktop. I though I would be able to use transparent frames but somehow transparent iframes did not work on the desktop (MS: Is this a known bug?). The other solution is just to read what image is being used and set the same image as background. This is possible but it is a bit cumbersome.

Fix remove button for IE5.5. The problem is that the selection (and cursor) is lost when you click in another frame. This is a known IE5.5 issue and one solution could be to always keep track of the selection/cursor.

Author: Erik Arvidsson