AJAX: Online-Editor

in today's article i would like to introduce the reader to the AJAX: Online-Editor which i mentioned in yesterday's post referring to the book Praxiswissen Ajax.

since the book and the source code are in german i translated it (hopefully all of it) into english and made it available for download at http://www.downintheflood.com/download/ajax-online-editor.zip

you can see it also online at: http://www.downintheflood.com/source/ajax/

however, in order to avoid people entering or deleting any code or files, or adding files with content that i wouldn't want there i have removed the [New File]   [Save File]   [Save As ...]   [Delete File] buttons from my online application. furthermore i have set the textarea field on the right to readonly. just the [update] button works.

but i won't leave you that much in the dark here, i have created a few screenshots so you can roughly see what it looks like. if you are going to use it online you should, however, keep the folder contents in a password protected area where those users whom you'd grant access to the application will have the liberty to create, alter or delete files.

the first screen shot shows the layout of the page as it comes up on the screen the first time, that is, when you load the index.html into your browser (the application requires PHP4).



once you have clicked on a file name on the left side of the screen, the content of that file shows up in the textarea element on the right side of the screen as seen below:



if you want to delete a file an alert message asks you if you really want to delete this file:



if you confirm the O.K. the contents will be removed from the screen, the file will be removed from the file list on the left and a message appears in the status bar at the bottom of the editor that the file has been deleted:



with the last screenshot i wanted to display the error message that comes up when the client (browser) is unable to load the list from the server. the browsers behave differently, Firefox pops up an alert window while Internet Explorer will show the yellow warning triangle on the bottom left of the screen. here is the screenshot with the blank editor unable to load the files:



i changed the layout somewhat from the original layout. the original is smaller. i also changed the color setting of the original layout. if you want to use the smaller version you can download the stylesheet at this link.

now i hope you'll enjoy this little toy and learn about AJAX by studying the code in greater detail and using it perhaps in other applications.

until then.

tom.paine

---