Creating PostY Notes
Thursday February 2nd "Groundhog Day!" 10:01 AM
I've decided to create a little log for an experiment. I just read on Ajaxian about an IBM howto to create a 'sticky note' application. I didn't read the article, but something the poster said struck me, "way too complicated javascript for the casual user" and it got me thinking. How fast / easily could I make a sticky note application in YAJAF? I'll call it stickY! So I'm going to fire up my environment and see what I can do.
10:05 - copied my template application, simple empty index.html and links to the library.
10:07 - Decided that perhaps I'll just use a simple "double click to edit" meme for each note. Fancy formatting probably isn't necessary, especially for a first iteration. I need a couple of widgets a "pad" to take new stickies off of, and the actual notes. Those will be separate objects.
10:17 - Decided to change the name of the application stickY sounds a little off-putting, changed to PostY. Each sticky note is going to extend a Yajaf frame object.
10:21 - lifted a little code from my "shell" application for key checking. about 10 lines, but I know it works. Makes me think I should add it as a specialized key even object to the library.
10:23 - I think I'm going to want to create a PostY manager object to handle position, access to the data pipe (XHR). I'll either extend my window manager object, or maybe a new more fundamental Manager object.
10:32 - tried a quick application with the object. 3 Syntax errors. No postit on the screen... checking for logic error.
10:33 - Forgot to "add" the content to the PostY. Way too small. Kind of a sickly yellow, but moving it around works.
10:36 - my "edit" method doesn't seem to be working.
10:37 - Aha I accidently used "ondoubleclick" rather than "ondblclick". No error since it just made a new property.
10:47 - imporant e-mail, distracted by RSS reader. Back to the application. Just made a change to the way it works so that I'm altering the innerHTML property. This would allow HTML in the PostY note if you want. I may change this later as raw HTML could be dangerous (img tags in postit note, javascript, danger will robinson!) pic 3 then 2
10:55 - added a margin to the sticky note, basically by adding a new content panel and putitng a margin around it. fixed some of the events (setting focus on the text entry). Fixed some of the look of it during edit.
11:05 - Pegged the sticky note during editing. Before trying to select text moved the sticky, now while in "edit mode" the sticky stays put.
11:15 - created the postit "pad" (which basically looks like a postY) and can generate new postits. When I overlap them though they get blurred... a shadow or border is needed.
11:22 - added a border and a shadow to each note. Found another funcitonal bug. If I click to edit another note, while editing a current note I lose the contents (if I don't hit enter first). Will add a "document click" to commit changes on everything except the note itself. Should prevent this problem.
11:32 - spent some time uploading progress screenshots and formatting the text of the log. Will continue to add a postY manager, and hack together a little Perl State manager on the back end.
11:40 - noticed the shadows make the notes look more like 'pads' then notes. Need to shrink the shadow size.
11:43 - The test was to put stickies on top of a regular HTML web page. Will download something to use as the base page to add the PostY layer on top of.
11:55 - Bogged down a bit in removing the innerHTML use. Switched to a text node to avoid any dangerous HTML being added to the PostY note.
12:02 PM - fixed the error with clicking on another note cause losing the note edit changes to be lost.
12:07 - Decided that I'll make the PostY pad be the postY manager. Basically keep track of all postY's. I may add a couple of buttons to the pad to allow showing/hiding of the postY's.
12:15 - downloaded a static version of my blogspot Yajaf blog. Overlaid my PostY application on top. Looks nice. I seem to be picking up some kind of CSS formatting from the stylesheet though. Interesting.
12:17 - so the Perl back end will accept two commands. getNotes, and addNote along with a URL. Each note has five properties, text, xpos, ypos, zpos, and type (something I'm thinking of for later).
12:36 - Tried Safari, doh! I guess textNodes are missing the 'data' value in Safari. I'll have to probe to find out more.
12:40 - stopping to eat some lunch.
1:15 - Reheated leftover pasta, paid some bills, read a little news... oh sorry I'm in the logging mindset now. Back to the project!
1:27 - started hacking my back end. Perl skillz a little rusty.
2:12 - sad to say I'm still fighting my rinky-dink perl back end. I'm going to argue that the back end time shouldn't count against YAJAF. :)
2:20 - Had to tweak my file permissions on my notefiles. Well now that that's fixed we should be on to bigger and better things! I've learned something though, need to log to my console DataPipe Errors that are responded through the XHR.responseText . You still get a completion from the web server (code 200) but the error that something went wrong in the Perl module gets lost (it's an html page response).
2:55 - working out how to save the sticky state. window.onunload will check for any changes and will save them to the server.
3:22 - As is usually the case, I've been adding features to the back end. The state is held on the server and only alterations to the "stickies state" movement or editing will be saved on window unload. Essentially the Gui code was coompleted at around noon, making the 'hard javascript' part of this project take 2 hours. If I hadn't forgotten so many of my perl skills (I used to be good), the back end wouldn't have taken me so long. I may tweak on it some more, but for now I'm calling it finished.
PostY verison 0.1
New javascript code = 172 lines (with comments) using the YAJAF library
Perl code = 112 lines (with comments)
Behavior:
- Ability to position sticky notes anywhere on the web page.
- Each sticky note is fully editable.
- Ability to create any number of sticky notes.
- Perl module saves XML representation of sticky notes to a file based on the url location (not specific to user but could be added).
- "sticky pad" tracks all sticky changes and only updates the server for notes that are altered.
Future for v 0.2:
- click to show/hide sticky notes possibly animated
- user tracking of notes (only specific users see their own notes)
- cooler looking PostY's (maybe a graphical representation)
- resizable notes
- colorable stickies
Conclusion
The YAJAF library allowed me to create a reasonable annotation interface in a little over two hours, with debugging. Two custom GUI objects both extending the YAJAF frame object, with one also inheriting from a manager object. The two objects included event handling, widget movement and mouse tracking, error logging and display, simplified XHR DataPipe interface, and widget management. Additionally, behind the scenes, IE memory leak protection was being performed on the widgets as well. So with very little code, and in little time, I was able to make a fairly compelling UI/mini app using YAJAF. I think for the future I'm going to make a little skeletal perl data handler so I don't have to hack on it so much. With the XML interface the back end could be written in anything. Maybe I'll investigate one of the popular server side design methdologies and try my hand at ruby.