The TSW Blog

Post number 10 in the "WebCoder.NET" series - almost like an anniversary, huh? :). First of all, I would like to reveal the name of "WebCoder.NET", because yes, there is a reason for the quotes around the name. "WebCoder.NET" was simply a codename for the .NET version of WebCoder - the real name will be TSW WebCoder 2007. I really couldn't hold on to that piece of information any longer, since every part of WebCoder uses this name, and since I promised you the very first screenshot of the application in this post, it wouldn't be a secret for long :). So without further ado, here it is for the first time - TSW WebCoder 2007:

Please, let me know what you think :). I will try to post a couple of screenshots more soon!

Ever since the first version of WebCoder, a modified document has been indicated by a red cross. WebCoder has been using a tab or tab-looking interface ever since the beginning. Tabs were really made popular when the browsers began offering tabbed browsing, but they introduced another standard as well: The cross on each tab, used for closing the tab it self. Some people may have been confused that the cross in WebCoder and WebPad.NET showed the modification status instead of acting as a close button - I got at least one complaint about it with WebPad.NET. Therefore, I'm trying something different with "WebCoder.NET" - using the font color of the tab instead. It looks like this:

I have been working with it like this for months now, and I actually prefer it now. Hopefully you will like it as well, and hopefully less people will be confused about it :)

Okay, so this post was not as exciting as some of the other posts, but don't go away just yet - the next post will contain the first published screenshot of "WebCoder.NET" ever, along with another interesting piece of information. Stay tuned! :)

One thing that you learn when creating a web editor is the fact that every person has their own style when it comes to writing a HTML tag. As a person who spends of time writing way more strict programming languages, as well as writing code for parsing HTML tags, I'm not very fond of the lose nature of HTML. Fortunately, XHTML is more strict when it comes to how your tags should be written, which makes it easier to parse, but since people still write standard HTML as well, WebCoder needs to support this too. However, supporting it is not always enough. WebCoder can output HTML in all sorts of ways, but in previous versions, the output was styled the way I preferred it - tags and attributes in lowercase and doublequotes surrounding all values. That was the way the dialogs outputted HTML, the way the IntelliSense features would output it, and so on. 

With WebCoder.NET, this has all changed. You may now decide casing for tags and attributes, as well as the quotes you may or may not wish to use for values. Almost a 1.000 lines of code in "WebCoder.NET" has been dedicated to the handling, parsing and outputting of HTML tags, which will ensure a more consistent input and output. The really cool part is that the HtmlTag class is used in all XML/Scripting dialogs too, and you may use it in your own scripts as well! This means that you can write scripts which outputs tags just the way the user wants it. This make generating HTML tags much cleaner - just look at the following example where we build an HTML tag, and then insert it into the currently active document:

from TSW.WebCoder.Classes import HtmlTag

tag = HtmlTag("div")
tag.AddAttribute("class", "testClass")
tag.AddAttribute("style", "text-align: center;")

tag.PhpEscapeOutput = False

ScriptUtils.InsertCode(tag.GetMarkup(True))

It's all very simple and quite nice to look at, I think. Once the GetMarkup() method is called, WebCoder formats the tag according to your tag settings, and return the tag just the way you want it. It's one of those minor things which makes me love "WebCoder.NET" a lot more :)

As I talked about earlier on this blog, the XML/Scripted dialog system will be included in "WebCoder.NET" as well. Therefore, the dialogs will look almost the same as in WebCoder 2005, since they are based on the same (although more tidy) XML files :). I have added a small but pretty cool feature though. By using the "htmlAttribute" property of the controls in the XML file, you may make WebCoder aware of which HTML attribute the control is used for. Since WebCoder already knows which tag the dialog is registered for, it can now check the attribute by using the same datafiles used for the HTML Inspector and HTML IntelliSense, and tell you if there are anything you should be aware of when using the given attribute. Of course, this is based on the (X)HTML definition you are currently using for the active document. The dialogs will not be nagging you about these things, but using information icons, it will tell you about it in a subtle way. Have a look at this screenshot where you can see how the controls are marked with icons:

The green icon tells you that the attributes is required, the blue one will normally mean that the attribute has been deprecated. There is of course tooltips for the icons when hovering over them with the mouse. Now, let's try switching the document to XHTML and see the same dialog:

The blue icons have become red, because these attributes are simply not defined within the XHTML standard. If you make your own tag dialogs, they will be able to use this system as well, since it's entirely based on the information from the dialog XML file as well as information about tag and attributes from the active HTML definition, which you may edit as well.

In WebCoder 5, we went from the top tabcontrol with the tags and dialogs, to the right aligned "toolbox". Only a few people complained about this, and I personally think that it worked better this way. However, it did take up some extra space, and it couldn't be moved, which I didn't like that much.

In the next version of WebCoder, I have experimented a bit again, and converted the toolbox to a true tool window, just like the rest of the tool windows in WebCoder. This allows you to move it around, float it and position it just the way you want it. This also means that you can tab it along with the other tool windows, with the added benefit that the toolbox will no longer use an extra piece of space.

A different control is used for the toolbox as well, which means that you can now have more than one group visible at the same time. In fact, only your resolution sets the limit, as you can see on the screenshot. So, what do you think of the new toolbox? All feedback is appreciated.

Another part of "WebCoder.NET" I started working on pretty soon, was the good old Image Explorer :). The Image Explorer has been a part of WebCoder for many versions now, but hasn't been improved on a lot, since it did pretty much what you could expect from such a feature in a web editor. However, the next version of WebCoder comes with an improved version of the Image Explorer. First of all, the PictureBox control found in .NET brings new ways of showing images. With the Delphi version, the image could be either normal or stretched. In stretched mode, the image would be fitted into the control, no matter how wide or high it was. With the .NET PictureBox, the Zoom mode works much better by resizing the image to a thumbnail while still keeping the aspect ratio. Here is an example:

Image Explorer in WebCoder 2005:

Image Explorer in "WebCoder.NET":

Exploring images is likely to be a much better experience in next version of WebCoder. As you may have noticed, the new Image Explorer contains a "Create thumbnail" button. It allows you to insert a thumbnail of the selected image on your page instead of the original version - pretty cool, I think :)

One of the big questions I was facing when I started working on "WebCoder.NET", was the integrated scripting which has been a part of WebCoder for the last couple of versions. When switching from Delphi to .NET, I had to find replacements for the part of the applications which I can't or won't make my self. In the Delphi world, this is referred to as "3rd party components" or simply "Components". These components are like building blocks, allowing you to use the work of other people in certain places. For instance, creating a fully featured component for editing and syntax highlighting code would probably take a single person many months of really hard work. As you can see in WebPad.NET, I have found really good replacements for the components used in the Delphi version of WebCoder, but for the next version, I really needed a good component for handling scripting.

I searched a lot, but no real good alternatives turned up, and at one point, I was actually considering to skip the scripting support, partly because I wasn't sure how many people were actually using it. Fortunately, I finally found a solution that seems to be just right for WebCoder. IronPython is an implementation of Python for .NET, created by Microsoft actually. I didn't know anything about Python, but a couple of nerdy friends seemed to be very fond of it, so I gave it a try. It turned out to be a very nice implementation, allowing the scripter to interact with the entire .NET framework, and Python is actually a pretty nice language to work in. It's not that different from the scripting used in the current version of WebCoder, and people with experience from other programming languages will probably find it easy to use.

As I described earlier, one of my main concerns about missing a scripting engine, was the tag dialogs. As you may know, all the HTML tag dialogs of WebCoder 5 and 2005 is based on XML and scripting, instead of the usual approach of building them as a part of the application. This allows the user to change the existing dialogs and even create new ones. With the new scripting engine in place, it was really just about rewriting all the dialogs to use the new scripting language. I'm almost done, and so far everything has turned out pretty well. Looking at my old XML code, I decided to freshen it up a bit, to make it more readable, so I wrote a nice little utility to convert and change where I found it appropriate. Hopefully we will see more user created dialogs with next version of WebCoder :)

I will end this post with a small example of the scripting in "WebCoder.NET", to show you how easy it is. These few lines of code will replace < and > characters in the current document with their HTML entities:

code = Editor.Text
 
code = code.Replace("<", "&lt;")
code = code.Replace(">", "&gt;") 

Editor.Text = code

As I described in the last blog entry, the first thing I started working on, was the PHP IntelliSense feature. Actually, I started working on it before I had a "WebCoder.NET" project created and even before WebPad.NET was fully finished. My goal was pretty simple: To get at least the same level of PHP IntelliSense as in WebCoder 2005. I used a lot of the same ideas from WebCoder 2005, but I still had to write this from scratch, based on a new system. It took me less than half the time I originally used, to rewrite this. Now it mostly needs some polishing, and it already feels better than in WebCoder 2005. It's still not integrated into "WebCoder.NET", as you can see on the screenshot:

As I said, it's not completely done, but it's getting there, and soon I will be able to implement it into WebCoder. If you have any comments, based on how stuff works in WebCoder 2005, then please be sure to let me know - right now is the best time for me to look into any issues you might have with it :). Stay tuned for more information about "WebCoder.NET", I have several blog entries planned already :)

When starting on a new version, I usually do a lot of "demos". Small applications, showing a specific new feature. I'm not doing this to show it off, but simply to write as much code as possible in a less complicated environment. So I make these small applications, with no concern about design or anything. It's usually a form with a couple of non-aligned controls, all sorts of test output and buttons with their default captions - "button1", "button2" etc. While I do my very best to make WebCoder and WebPad.NET start as fast as possible, the couple of seconds it will take each time is simply too much, when I go into heavy write-compile-run-test-repeat mode :). The very first WebCoder-feature application I made was to see whether I could create the same PHP IntelliSense features that WebCoder 2005 has on the .NET platform. This was extremely important to me, since I find it to be a very important feature of WebCoder. Luckily, it turned out to be way easier than the first time I did, and the demo got to be pretty functional before I went to work on other things. I jump from demo to demo to make sure that all the really important things, the features that I simply wouldn't allow myself to release a new version of WebCoder without, is possible to do on this new platform.

This is a very exciting time, since I get to work on a bunch of interesting things. Once they get to the point where they simply need the last bit of polishing, which is usually the less-exciting part of making software, I move on to the next thing. When I'm satisfied, I start implementing these features into WebCoder, which is the best part. I get to see the hard work melt into WebCoder and the next version starts to take shape. I love it :)

As I stated in the first post of this blog, I would like to use it for more than the usual front page news. I have already posted a tip for WebPad.NET, and I hope to do more stuff like that in the future. Another thing that I wanted to use this blog for, is a diary for the development of future products, so you can check in to see how it's going with the "next big thing" from TSW :). This post marks the beginning of a series of posts which will tell you a bit about what I'm doing on the next version of WebCoder. I'm sure that you're not surprised to see that a new version of WebCoder is the next project, and you may start looking forward to it, because I think it's going to be really, really cool! However, as you can probably imagine, this won't be ready for release within the next couple of months. Building an application like WebCoder takes a lot of time, so please don't expect to see it finished tomorrow :)

Oh, and by the way: "WebCoder.NET" will work as a temporary name, since I'm not entirely sure what the exact name will be. I will be posting whenever I have some interesting news, so stay tuned for more information :)