redbullmarky Posted March 26, 2007 Share Posted March 26, 2007 Hi all I'm attempting something fairly ambitious in my spare time, mainly to brush up on my JS/AJAX skills which I admit are pretty dire in comparison. Anyway. I'm trying to build a fairly simple browser based desktop system (windows/icons) but am having trouble at the first hurdle. I have some scripts i'll be using for now (that use the DOM to draw draggable windows/icons). Firstly, every user has their own directory. Within these directories are files (both normal files and 'application launchers') and other directories. My problems: - storing the positional data for icons/windows - the best way to do it. I've considered a mysql database but have decided on using ini-like files. possibly something like: [test.doc] x=50 y=50 wx=20 wy=20 wsx=400 wsy=200 would tell the sysem to draw an icon at 50px,50px and if clicked to open a window at 20px,20px with width/height of 400/200. on double click, an AJAX call is made to the server which replies with the window dimensions, and my AJAX callback then parses and opens the window. The server can recognise whether to open a window of icons or a specific app based on the file. my problem comes when I introduce drag/drop to re-position windows or icons, as I need the server to be able to recognise what 'info' ini file to open to store the data. The whole "should I do this bit in JS, this bit in PHP, etc" is what confuses me the most about this whole project. my question really - has anyone got any experience of designing Desktop-like systems (ideally web based), and what would be the best way to handle/store my data and pass the right stuff back and forwards to the server? ie, how could I make it easier for the server to know exactly what window/icon was resized/moved? Using Scriptaculous/Prototype and a few little bits i've made myself to draw the window/icon elements. any thoughts/ideas on a better structure+interface between client+server welcome. Cheers Mark Quote Link to comment Share on other sites More sharing options...
roopurt18 Posted March 26, 2007 Share Posted March 26, 2007 I find generating and editing HTML is more easily done from PHP than from Javascript. I'd suggest hiding small snippets of very common window elements within the page output. Something like: <html> <head><title>Test</title></head> <body> <!-- Empty GUI Elements --> <div id="blank_Icon" class="icon"> <!-- BLANK ICON --> <!-- Whatever HTML is common to all icons --> </div> <div id="blank_Window" class="window"> <!-- BLANK WINDOW --> <!-- Whatever HTML is common to all windows --> </div> <div id="blank_Menu" class="menu"> <!-- BLANK POPUP MENU --> <!-- Whatever HTML is common to all popup windows --> </div> <!-- Rest of page follows --> </body> </html> Now let's say your user clicks on an element that should cause a new window to appear. First you'd request the window's contents via AJAX from the server. In the AJAX callback, you grab the DOM node for the blank_Window, clone it, insert whatever was returned from the server into the duplicated node, insert the duplicated node into the document, position it, and finally display it. As for dragging and resizing windows with persistence, the only data you need to send back to the server is the DOM node's final position (x,y) and size (w,h). In order to achieve this, I'd just the mouseup event for the DOM node to send those values to the server via AJAX. Finally there are some GUI elements that you'll want to display frequently and forcing the user to repeatedly wait for AJAX calls to return could potentially be frustrating. To combat this, you can go about it a few ways: 1) Place all of these elements into a Javascript file included with all pages 2) Use a caching mechanism where you only retrieve the element from the server the first time 3) As the final part of the page load, fetch these elements from the server using AJAX To accomplish #1, I'd probably generate the Javascript file using PHP since, as I previously stated, I find editing HTML is more easily done from within PHP. Another approach would be to use a combination of #2 & #3; keep a record of which GUI elements the user always seems to use and pre-load only those elements. That way you keep the final page size down but still prevent most of the user's wait time. Sounds like an interesting project. Quote Link to comment Share on other sites More sharing options...
redbullmarky Posted March 26, 2007 Author Share Posted March 26, 2007 definitely a few points there i can take away - cheers. might be easier to let you know where i'm at now, since i first posted: 1, Both windows and icons are generated by document.createElement calls. these are then passed to a window function, looslely based on work here: http://www.brainjar.com/dhtml/windows/default2.asp. At the moment, this is instead of any cloning, though i'm kinda guessing that cloning would be quicker? 2, i have a regular directory structure, which is used to construct the layout, etc. ie, the root directory = the desktop, the subdirectories = the windows, the files within these directories = the normal icons. 3, a double click on an icon sends a path to the server (specifically a class method called 'open') via an AJAX (specifically JSON, but you know what i mean) call, and says 'here, open this'. the 'path' is registered in a $_SESSION for checks later on to prevent further re-opening of same thing. in return, instructions are sent back such as 'var thewin = drawWindow('test window', 50, 50,400, 300); and 'drawIcon('test', 'test.gif', 50, 50, thewin); which I then handle via an 'eval' call client side. the result is an open window with all its folders/files in it. 4, in a similar way as opening a window, callbacks are used when resizing/moving windows, and dragging icons. and 'close' - to free up the $_SESSION var so that the window can be re-opened if required. So really I reckon I've done fairly ok so far, but I can see problems which all fall back on the way I store the info (ie, a file called 'info' kept in each directory stores the icon positions/labels, etc, and also the size of the resulting window should they be launched). But later I'm gonna want to introduce dragging between windows, etc - which maybe an issue. Also, whether I'd be better to store REAL files (ie, DOC's , etc) in a single, central place and each icon would be like a 'pointer' to the real files. I dunno. I guess I'm toying with all the options at the moment, but the structure, etc is pretty confusing. Javascript not as easy to debug as PHP... Cheers Mark Quote Link to comment Share on other sites More sharing options...
roopurt18 Posted March 26, 2007 Share Posted March 26, 2007 Javascript not as easy to debug as PHP... Do you have Firebug for Firefox and the MS Script Editor for IE? Quote Link to comment Share on other sites More sharing options...
redbullmarky Posted March 26, 2007 Author Share Posted March 26, 2007 Do you have Firebug for Firefox and the MS Script Editor for IE? i do now. cheers Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.