RSSThe TSW Blog

The making of TSW WebCoder 2013 part 11 – The Ribbon interface

October 24, 2012

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):

webcoder_ribbon

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):

webcoder_ribbon_smaller

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:

webcoder_ribbon_minimized

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! :)

Kasper (TSW) @ 9:24 am in TSW,WebCoder

The making of TSW WebCoder 2013 part 10 – Side-by-side editing

October 12, 2012

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:

 

multiple_documents_horz

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:

multiple_documents_menu

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

 

multiple_documents_complex

 

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 :)

Kasper (TSW) @ 1:37 pm in TSW,WebCoder

The making of… TSW WebCoder 2013

October 5, 2012

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! :)

Kasper (TSW) @ 1:44 pm in TSW,WebCoder