The TSW Blog

With WebPad.NET, we introduced a new way of using the internal preview of the editor. For the first time the good old "Edit - Preview - QuickEdit" tabs were gone, and replaced with a more flexible model, where the preview windows could be anywhere, and visible while editing. I think that this worked out well for a lot of people, and I also think that WebPad.NET was the right place to introduce this. However, WebCoder is an "old" application, with lots of users and traditions, and to be honest, I was afraid to make this change for "WebCoder.NET" too :). The obvious choice seemed to be to make this as an option, so that's what I did. On the first screenshot, you saw the WebPad.NET inspired interface which is default, with the preview browsers placed in tool windows. I promised you some more screenshots, so here is one with the "old style" interface, and just for fun, on Windows Vista, so you can see how it looks there as well :)

As always, enjoy, and let me know what you think. Do you guys want more screenshots? Any specific parts or functionality? Requests are welcome :)

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.

As I'm working with next version of WebCoder intensely, I realized that there were a couple of things with WebPad.NET which I would like to change. They are mostly minor annoyances, from the Code Inspectors not looking exactly like I want them to, to the Project view flickering when using the Open/Save dialog. While this will mostly be minor changes, I'm open to suggestions, if there's something that the users are really missing, e.g. a feature which is already present in WebCoder. For instance, I've heard that some people are missing the Files tab, with the Explorer-like file interface. However, as you know, this is a light version, so there are limits to what I wish to implement in WebPad.NET, but if you have suggestions, be sure to let me know :). I'm planning to release a beta version of the update first, to make sure that no new bugs have been introduced, so stay tuned for more information :)

So, what would you like to see changed/fixed/added in a WebPad.NET update? Post some feedback here or in the forums :)

 One of the features I really like in WebCoder, which might not be used as much as I could hope, is the CSS overview tree. It can be found on the "CSS" tab, and it can give you a good overview of a CSS document. However, the really cool part about it is that it can give you an overview of the CSS code in your HTML files as well! It looks for a <link> reference to an external stylesheet, or a <style> block, and then parses the CSS code it finds and shows it in the tree structure. This allows you to see which CSS selectors you can use while you actually need them, in the markup. However, the feature goes beyond that, and allows you to doubleclick the selectors to edit the CSS code - again, without leaving your HTML code. They can even be previewed, and if you're using the QuickPreview feature, it will be updated whenever you edit a CSS selector. In other words, you can do almost anything with the CSS code, without leaving the HTML. Very cool, if you ask me :). In case you've missed this feature, then be sure to have a look at the description, screenshot and demo video at the TSW WebCoder page.

Anyway, for those of you who use this feature a lot, I'm happy to tell you that it will be in the next version of WebCoder as well, in a new and improved version. In previous versions, this feature would only show CSS from one source, but in the coming version of WebCoder, multiple sources of CSS code is not a problem. It can be from several <link> sources and/or several <style> blocks. You can also attach multiple stylesheet files to your project, and WebCoder will look for CSS code for project files in these instead of having to search for them in your documents. Have a look at the screenshot, which will show the CSS overview tree with selectors from both a linked .css file as well as an internal <style> block from the current document.

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