roncli.com blog: May 2007

One of the things I am trying to do with OSMusic.Net's ASP.Net update is to make the user experience less of a chore and more fun. As I stated in a previous post, my goal was to load the presentation end with AJAX-like stuff, reserving JavaScript for mundane tasks.

Apparently, textboxes are mundane.

Microsoft provides no real way to manipulate textboxes using ASP.Net and its AJAX extensions. Thus, I had to use nothing but JavaScript to create the flashy addons that OSM's new textboxes are going to provide.

OSM's current textboxes are just unmodified textareas, with the occasional JavaScript to limit the input to a certain size. In some cases, you'd get a half-page long description of how the special codes for formatting text worked. It wasn't very intuitive and didn't get a whole lot of use.

So what I did was make a bunch of small 16x16 buttons, one for each possible tag, and two buttons specifically for the mass of smilies OSM uses. When a user clicks on a button that doesn't require anything, such as bold text, it adds a [b][/b] to the textbox, with the cursor in the middle so you can begin typing right away. If you have text highlighted, it puts the [b] in front and the [/b] at the end of the selection, so you don't have to place anything. You also get a reminder as to what the syntax is, so that if you want to type it in yourself, you can.

The other tags are a bit different. Instead of immediately inserting anything, you have to provide some information. In the case of an image, you need the URL and the alignment - left, right, or none - it will have on the page. When you click the Insert button, you get a properly constructed [img] tag at the cursor. Colors are similar, you get sliders for red, green, and blue, and the syntax updates with the color you've selected, along with a preview of what the color actually looks like.

There are two smiley pages. You just point your cursor in the box where you want to add it, click one of the two smiley page buttons, and select a smiley from the box below. No need to remember what the difference between :cheesy: and :laugh:, just select the one you want visually.

It's all packed into a control and three JavaScript source files that manage all of the textboxes on a page. I'm quite happy with how it turned out, and look forward to actually being able to use it. There's not too many sites out there that allow for such easy adding of markup text.

Labels: Coding, OSMusic.Net, Screenshot