Monday, September 04, 2006

New pet project

I have started work on an online coding/collaboration tool written in c# 2005 and using atlas.
I started thinking about this after reading thru wilco's code for a multi language syntax highlighter
(see last blog post for link).

My idea is to have a pane in which you write your code "MyCode" , a pane displaying people who are watching you code "Watchers" and another pane which will display a Watcher's code that you have selected from the "Watchers" pane.

The idea is that you can write code, click a button to get the syntax highlighted, other people can see your code as you submit it to be higlighted, the watchers can comment on your code, you can see their suggestions in near realtime (the time it takes to save their code to the database and for a the javascript timer to call a webservice to retrieve and display the results from the database)

I think this could be sueful in a distributed team environment, if one of your team are stuck on a problem.

So far i've got the basic layout that i want (using tables i know i should use css for positioning but it is a mock up). I've also got the basic javascript calls to the main webservices sorted (they just return strings at the moment). One thing that i compleletly didn't think about, that i've now sorted is how i'm going to display the code. the syntax higlighting code i will be using returns strings of code with html formatting, i was originally going to use a textarea to allow the display and editing of code until i realised that you can't display html within a textarea doh!

a few hours googling and i've come up with http://www.fckeditor.net
a really nice, very customizable, open source, rich text box.
I've managed to get rid of all the unwanted toolbars (i want it to look just like a textarea)
and worked out how to programmatically (in javascript cos this apps all ajax'd up the wazoo) add text, return the html and return the content without the html using the browser's dom,
this last one is really important as the syntax highlighting will be carried out in the following way:

1-user types in some code

2-user clicks button (or keyboard shortcut, i might add this in as a nice to have) to get syntax highlighted.

3-button click fires javascript function

4-javascript function passes contents of textbox to asp.net webservice (registered vioa atlas scriptmanager control)

5-webservice parses code and returns a string of html (the formatted code)

If the string of code contains html then i would have to write something to enable the webservice to remove the html from the string before i could highlight the syntax. yeah this is doable, with a bit of regex, but all the regex examples i've seen never work 100% on html
so its nice to know i don't have to worry about it and that a simple function call to the fckeditor gets me exactly what i want.

Next up is to integrate the fckeditor fully into my ui then i can start work on a simple database model (i've sketched the basic concepts and relationships out, i just need to decide on the datatypes), after the db design is done i can then start writing the stored procedures and data access code, then code the fully functioning webservices that will be called by the ajax client.

its probably at that point that i'll realise how much this app canes the database when you've got
several coder hacking away, expecting near realtime updates on what the other coders are doing. For now i'm happy to use this project as an excuse to fiddle around more with the atlas controls (i've alerady decided the timer control is shite because it only seems to fire server side events (involving a postback) and i can't get it to call a javascript function, so i've stopped using it in favour of the bog standard javascript timer, which does the job perfectly.

No comments: