/==================================\ | WEBDESK XP | | by | | Frans-Willem Hardijzer (3173690) | | and | | Sandra Ruth (3154041) | \==================================/ URL ==================================== The running WebDesk XP can be found at: http://tricolor.students.cs.uu.nl/~fhardijz/ajax/ FEATURES ==================================== Applications ------------------------------------ Notepad Shareable FeedReader Shareable Bookmarks Shareable Todo Shareable Run Share (Most applications can be launched from the start menu, all other applications can optionally be ran from the "Run" application) Sharing ------------------------------------ Some applications, like Notepad, can be shared. To share an application, simply click the 'Share'-button in the top-bar of the application (it's the button with the four arrows pointing in circles), And follow the instructions :) Security ------------------------------------ For security reasons, your password is *never* sent in plain-text over the wire :) Every password entered in the login dialog is first hashed using SHA1 before being sent to the server, and on the server that is MD5 hashed again before it's stored in the database. The result? Your password can never be obtained by someone listening on the wire, and if anyone would hijack the database they still wouldn't be able to log in as you :) NOTES ==================================== Database ------------------------------------ The table definitions of the database can be found in database.txt. An ER-diagram can be found at database.png, although I highly doubt if you'll need it ;) Flowchart ------------------------------------ As I've used almost no external libraries, some things might be a bit chaotic. This is why I made a simple flowchart of some of the basic elements, describing how they interact with eachother :) This can be found in flowchart.png Data retention ------------------------------------ Data is saved per running application, not per application type. This means that if you close the bookmarks application, you will lose all bookmarks! However, this also means that you can have multiple bookmark applications open, and have different bookmarks in each :) So basically some may see this as a limitation, others may see this as a feature. We think of it as a feature, and that's why we keep it this way ;) All applications, and what happens if you close them: - FeedReader, when closed all information on what items you have read will be lost. - Notepad, all your text will be lost. - Bookmarks, all your bookmarks will be lost. - Todo, you will lose all todo-items. Logins to test ------------------------------------ For testing purposes, you can use these login/password combinations: lherlaar/cslennart jvreeken/csjilles FeedReader notes ------------------------------------ Although not explicitly mentioned on the page, the feedreader does in fact regularly attempt to refresh the feed :) It does so every 5 minutes. KNOWN GLITCHES ==================================== Dragging in FF ------------------------------------ In firefox moving (dragging) a window behind something else (e.g. the taskbar) will make the windows in front of it flicker a lot. This is a glitch in FF's rendering, so we can't really fix that :/ Luckily windows which are dragged normally have or get focus, so you can't easily drag a window behind another one :) Failing sometimes ------------------------------------ While testing a proxy was set up from my PC to the tricolor server to show my work to others and to receive feedback. On most computers, everything worked smoothless. However on some (about 2) it failed to load. The Scripting errors displayed weren't of much help: they usually pointed to lines not existing, or "made up" an error that did not exist on or near that line (e.g. missing semi-colons) If the errors occur, they seem to occur on both FF and IE. We tested on the university network, and there the application appears to work correctly, in both IE and FF. So if you encounter any serious problems during loading, try a CS PC :) Loading failures ------------------------------------ On both Firefox and IE scripts or stylesheets are sometimes not completely loaded. This results in all sorts of weird errors, like unterminated string literals and stuff like that :( Unfortunately this seems to be the browsers fault, so we can't really fix that... Luckily on most occassions, hitting "Refresh" will fix this :) And once the enviroment is loaded, there are all sorts of fallback/retry/protection mechanisms to ensure everything works smoothly. IE not quite getting what "read-only" means ------------------------------- Despite setting readonly on the textarea in the share dialog, IE will still let you edit the contents :/ The only way to make it really read-only, was to set it to disabled, but this would mean that in FF you could no longer select it. So we decided to just keep it editable in IE, as it's just a minor glitch. ENCOUNTERED PROBLEMS ==================================== Resizing ------------------------------------ Sometimes you want to have element scale evenly, or have one element scale while the others stay the same size. This can ofcourse be done using div's and javascript, but it's a pain re-adjusting each client div on resizing. Furthermore, sometimes you want the total to stretch 100% of another element, and that's not possible in JavaScript nor CSS. That's why for most of those things (caption bars, taskbar buttons, taskbar itself, etc) we used tables. It's not 100% nice CSS, but it works, and that's what counts :) Resizing with tables, definitive size ------------------------------------ Sometimes if there is not enough room for all cells in a table. In that case IE and FF just scale down all cells. However, in most cases certain cells (like caption borders, taskbar borders, taskbar icons, etc) should not be scaled down under any circumstance. To give a cell a definitive size, that could not change at any cost we: Set the width and height attribute of the cell Set overflow: hidden on the cell Added a child div Set the width and height of that div to the same width and height Set overflow to hidden, to make sure it doesn't take a default minimum (IE sometimes does that). The width and height on the cell ensure the maximum size, as it won't stretch beyond that, and the width and height on the child-div ensure the minimum size, as it won't ever resize that div :) Resizing with tables, proper wrapping ------------------------------------ (examples: Taskbar captions, window captions, etc) (Only works when using FF :@) During other times, you want to ensure the text in a cell doesn't wrap to a new line, and if there is not enough space, nicely cut it off (and keep it on one line!) To ensure this we added a div with width: 100%, overflow: hidden, and white-space: nowrap as a wrapper around the text. the div would then gracefully scale to the table-cell width, and cut off the text if needed :) Annoying createElement, appendChild, etc -------------------------------- After having typed a *lot* of document.createElement and blaat.appendChild, I got sick and tired of the unreadable syntax. That's why in common.js I wrote a nice function 'common_createElementFromArray'. Basically it takes an object with properties tagName, and possibly children, and creates the element for it :) It even stores certain elements if you set the saveName property. A nice example can be seen in RunApplication.js It's a bit longer than the normal techniques, but at least it's readable and easily editable :D EXPLANATION OF TECHNIQUES =============================== Scripting 'modules' ------------------------------- As the project got quite large, we decided to split up the files into 'modules'. The modules (and css files) are loaded by the main preloader in main.js. Each script file or module contains a set of functions or objects that relate to eachother. also by calling addInitFunction it is registered as a module, and the main preloader will then call the initialize function for it. Furthermore modules can depend on other modules, and the main preloader will make sure that the depencies are loaded before loading that module :) USED LIBRARIES =============================== SHA1 by Paul Johnston ------------------------------- For password hashing on the client, we used the SHA1 algorithm. Because there is no standard function for SHA1 in JS, and because the implementation of SHA1 is far too much work for the time we have, we used an external library. All original credits can be found in the file (scripts/sha1.js)