The TSW Blog

With Microsoft pushing their Ribbon interface more and more, I decided to look into it for WebCoder 2013. I have used the Ribbon interface in the Office suite quite a bit, but I wasn't sure how it would work out for an application like WebCoder. However, after having implemented it and worked with it for many months, I'm actually very pleased! It has allowed me to get more of the features out in the open, instead of hiding them in the small menus, at the same time giving bigger buttons that are easier to spot and hit with the mouse. It obviously costs a few more pixels in the top of the screen, but it's not that much and of course you still have the option to go into full screen, where the Ribbon is hidden for the maximum amount of working space.

Here's a screenshot of the Home tab of the Ribbon in WebCoder 2013, which consists of all the things you will need the most (click for full version):

Please notice: The layout is not final - it might very well be changed during the beta phase, due to overall changes and user feedback.

Flexibility

One of the things I enjoy the most about the Ribbon, besides the great look and easy access, is it's flexibility. Here's the same Ribbon with the same buttons, but taking up 330 pixels less than the previous screenshot (click for full version):

And it can become even smaller than that, if your horizontal resolution is very low or if you just prefer to work in a small window.

It doesn't resize the same way in the height, but if you need the space there, the Ribbon can be minimized using the ^ button you see on the screenshot. It will then look like this:

In the minimized mode, you simply click the tab that you want access to and it will fold out and look like on the first two screenshots. When you click the desired button, it folds back in, giving you lots of workspace.

I hope this gives you a good impression of how WebCoder looks with the new Ribbon interface, but to get the full picture, you obviously need a full screenshot. I will finally include just that in the next post - stay tuned! :)

This is one of the blog posts I have been looking most forward to writing, because it's about one of the single most requested features for WebCoder through the last several versions: The ability to have more than one document visible, open and ready for editing at the same time. Here's a screenshot of this ability in action:

Documents in WebCoder 2012 works just like all the other Tool windows, which means that you can move them around and even have one or several documents open on a secondary monitor. Having multiple documents visible at the same time is as simple as dragging a document tab to the desired location, or right-clicking it and selecting the desired action:

You can even have several documents open in several directions, in case you have a high-resolution monitor (click for full-size image):

As you can see, the possibilities are pretty much endless - the above setup could be in the main area of WebCoder or as a floating, combined Tool window on my secondary monitor or both at the same time!

The ability to have multiple documents open simultaneously can be a big help, especially for people with high resolutions and/or multiple monitors, which is true for a lot of programmers these days. I hope you like what you see :)

Almost 10 months have passed since I first started telling you about what I referred to as TSW WebCoder 2012, but the truth is that my Visual Studio project for WebCoder has been called "TSW WebCoder 2013" all along. When I first started working on it in July 2011, I knew it was going to be a HUGE amount of work to re-built WebCoder with a new presentation framework (WPF), so when naming the project, I choose a version number that wouldn't put me under too much of a deadline pressure.

Half a year later, when I started these blog posts, I was pretty convinced that I could have it finished within 2012, so I used that that name for the blog posts while keeping 2013 internally. As it turns out, I was right in the first place. Even though we are getting very close to the first beta version, the fact is that once the final version is released, most of 2012 will have passed.

Therefore it doesn't make sense to keep the 2012 name. It will instead be called TSW WebCoder 2013, as the title suggests. Creating this version of WebCoder has taken a lot of time, but all of it has been spent making sure that this will be the absolutely most fantastic version EVER! Very soon I will post the first full-screen screenshots, and shortly thereafter I will have the first beta version ready for you, so you may experience this your self. Stay tuned! :)

I've made a new file properties dialog for WebCoder, which will show more relevant information for a code file. Here's an example of it in action:

I think that this is useful, and definitely pretty interesting, for your various project files, but getting statistics for the entire project will likely be even more interesting. Therefore I made a dialog for that as well:

So, what do you think? Pretty cool, right? :)

WebCoder has supported previewing your content internally in Firefox for several versions now. It relies on the so-called XulRunner components, which are a part of the Firefox browser. At one point, it was enough to simply have Firefox installed to use this feature, but because Firefox are being updated so rapidly these days, WebCoder can't rely on the user having a compatible version of Firefox installed. Therefore, previous WebCoder versions had a link to a compatible XulRunner package, exclusively for previewing in WebCoder - a simple zip file, that you could unpack and then enter the proper path into WebCoder.

However, this might have been a bit too technical and too big a bother for some users, judging by the support mails I got. I therefore decided to streamline the process quite a bit for WebCoder 2012, by presenting the user with a dedicated and informative dialog instead of the old Windows message box. Here's how it looks when you try to activate the Firefox preview without having the necessary XulRunner components:

Unless you have already downloaded the correct XulRunner package, you simply click the Download now button and WebCoder will download it for you directly through the dialog:

As soon as the download finishes, WebCoder will automatically unzip the package, place it within your WebCoder installation and fill out the path for you:

The only thing left to do for you is to click the Ok button and you're ready to start previewing in Firefox :)

This is yet another one of those small, nice-to-have improvements that I hope you will like!

In the previous blog post we talked about the new scripting support with JavaScript syntax, which allows you to extend the functionality of the upcoming WebCoder. Scripting is a really powerful tool, but unfortunately it has previously been a bit hard to learn and use, because you had to use an unfamiliar syntax AND use a class library (.NET) that you likely didn't know.

With WebCoder 2012, we hope to solve the first problem by changing the syntax to JavaScript and the second one with scripting IntelliSense. That's right, writing scripts in WebCoder 2012 just got a whole lot easier. Here's a couple of screenshots that will demonstrate just how cool it is.

The all-round IntelliSense, with JavaScript objects and methods, .NET namespaces and classes and WebCoder classes and methods.

Member IntelliSense, in this case for a .NET string, showing the available methods and properties.

Parameter hints, in this case for the Substring method on the .NET String class.

As you can see, you will now get a lot of help when you write scripts in WebCoder, making it a lot easier to use all the powerful features from the .NET class library as well as the internal functionality of WebCoder. Hope you like it :)

You have been able to extend the functionality of WebCoder with scripting for many versions, first with a Pascal syntax and later with a Python syntax, because IronPython worked so well with .NET. For WebCoder 2012 I would like to offer you something a bit closer to the Web-world though: Scripting with JavaScript syntax. Since a lot of you are already using JavaScript for your websites, I hope that this will make the scripting functionality useful to even more people.

As you can see from the following (admittedly silly) example, scripting will be a nice mix of JavaScript syntax and the .NET class library, combined with the useful classes used from WebCoder it self:

var tag = new TSW.WebCoder.Classes.Html.HtmlTag();
tag.Name = "div";

var sb = new System.Text.StringBuilder();
for(var i = 0; i < 3; i++)
{
	var rnd = Math.floor((Math.random() * 10) + 1);
	tag.SetAttribute("class", "test" + rnd);
	sb.Append(tag.GetMarkup(false) + "\n");
}

alert(sb.ToString());

We use the HtmlTag class from WebCoder to create a new HTML tag, we use the .NET StringBuilder class to hold the tags, we use the Math class and its floor() and random() methods for obtaining a random number between 1 and 10, and we use a regular JavaScript loop to add the tags to the StringBuilder. The alert() method is normally a part of the browser DOM and not core JavaScript, but has been implemented in WebCoder to make it easy for everyone to show a message box, just like in the browser. Here's the result when running the script:

Stay tuned for the next part, where I will show you some more cool stuff from the new scripting functionality in WebCoder 2012. I hope you like what you've seen so far. Let me know what you think :)

Today, exactly one year ago, I created the folder for the WebCoder 2012 source code. I wasn't really sure of the name, in fact I wasn't even sure that creating a brand new version of WebCoder based on the WPF framework was even possible! So, for the first 6 months, I simply coded like crazy, to get a working version of WebCoder, before telling you anything about it.

After the first couple of months, I was actually able to use what I had done so far for a PHP freelance project I was doing at that time - quite a milestone! The basic editor was working, along with a lot of the IntelliSense functionality that I use so much, as well as some very basic project management. Around the same time, I took the first manual copy of the source and put in its own folder.

So, to show you how much has happened during the development process, I will share the file/code statistics with you. I know that this is a bit geeky, but hopefully you will find it a bit interesting anyway :)

10 September 2011

The September 2011 version was the very minimum that I, as the developer, could live with. There was pretty much no dialogs for setting up stuff like projects and settings, so a lot had to be done with test code and manual editing of the data files, and I wrote at least 100 notes about stuff I wanted to change and improve during a couple of weeks of usage. Now, onto the current version, the one I'm using today, which is way more polished:

24 July 2012

So as you can tell, quite a bit has happened. I'm still working very hard to bring you the first beta version and I think that the amount of TODO items on my list is finally going the right way: down! :)

Most of the major features has been implemented and a lot of them are even ready for testing, but there's also some features that I still have to put some work into, to make it ready for your eyes. Stay tuned for more information!

For many versions of WebCoder, you have been able to change the HTML definition used by WebCoder from the Functions menu. Unfortunately, some users didn't realize this, and after validation was added, having the correct definition for your document became increasingly important.

During most of these years, CSS 2.1 was the dominant standard, so it didn't make a whole of sense to make this configurable. However, with the rise of HTML5 and especially CSS3, I felt that there was a need for more focus on which standard was used for your current document. At the same time, I wanted to put more focus on the built-in HTML and CSS validators, because it's very fast at detecting a lot of common errors and general problems.

At the same time, WebCoder 2010 introduced JavaScript frameworks, allowing you to have constant IntelliSense support for one or several JavaScript frameworks. This was also available from the Functions menu and I fear that some users overlooked it as well.

Now, in WebCoder 2010, you could always see the total amount of validation errors in the document in the statusbar. It looked like this:

But as I said, I wanted to do more with this for WebCoder 2012, so after some thinking, I combined the web standard information with the validation information and put it directly in the statusbar, so that you can always see and reach it. It looks like this:

• Validation errors are now shown separately (16 HTML and 1 CSS issue)
• The JavaScript framework selector has been included, showing you the active framework(s)
• Each item is a button which can be clicked for more options, like selecting the current definition

When clicking one of the buttons, you will be presented with options corresponding to the button you clicked. Here's how it currently looks when you click the CSS button:

As you can see, this gives you instant access to changing the currently used definition for the document you're working on.

For shortcuts, you can hold down Ctrl key and click on the button to navigate to the next validation issue. If you instead hold down the Shift key, the Tool window for showing validation messages will be activated.

This is all a part of my plan to make the important features easier available and give you a better overview of your work and I think that this is another step in the right direction. Hopefully you will agree :)

In WebCoder, there are quite a few Tool windows, which are the dockable/floatable areas to the left, the right and in the bottom of the screen. The most of them are pretty self-explanatory, like "FTP", which are for working with your FTP servers, "Projects" for dealing with your projects and so on. These have toolbars in the top that allows you to connect to an FTP server or create a new project. However, a couple of the Tool windows might not be that obvious, a good example being the "Database result" Tool window. It's connected to the "Database" Tool window, but that might not be obvious if you're new to WebCoder. Here's what it looks like in WebCoder 2010:

I got to thinking that if you meet this Tool window for the first time, it might not be very obvious what to do. Therefore, I decided to replace the grey area (where the results are shown once a query is executed) with a short but helpful introduction. It looks like this:

The blue links that you see are actually interactive - click them, and WebCoder will show you the area of interest using animations and arrows! Hopefully this will make it easier for new users to get started with some of the less-obvious, but very useful features of WebCoder.

Another example is the WebDebug Tool window, which is nothing but a toolbar and some empty windows until you actually activate the function - but how exactly is that even done? WebCoder 2012 will help you get started with this very powerful feature as soon as you gain an interest in that Tool window marked "WebDebug":

Hopefully this will help even more people get a great start with WebCoder. As always, let me know what you think and stay tuned for even more usability improvements :)

Disclaimer: WebCoder 2012 is still far from being done. These blog posts are merely to show you what this new version will be like and to give you an impression of the development process. I hope to have the final version of WebCoder 2012 ready in the third quarter of 2012, but nothing is certain yet!