KWWidgets/Projects/UIDesigner/Application/PreviousWork/VisualStudioStudyResults

From KitwarePublic
Jump to: navigation, search

Visual Studio(¹)

Visual Studio 2005 Professional Edition Design Editor for C#
New tools tailored to help you take on your software development challenges.
Visual Studio 2005 provides a range of tools that offer many benefits for individual developers and software development teams:
  • Be more productive and obtain faster results
  • Build dynamic Windows, Web, mobile, and Office-based solutions
  • Communicate and collaborate more effectively within your software teams
  • Ensure quality early and often throughout the development process

Quote taken from the Visual Studio 2005 portal site.

The version used for this study is Visual Studio 2005 Professional Edition version 8.0.50727.42, using Microsoft .NET framework version 2.50727.

Important Note

Taking in account that Visual Studio is an extremely robust IDE, used for several different programming languages, describing every single of its features for every single supported programming language is way beyond the scope of this study. So, the next sections will maintain its focus on the comparison criteria list and will try to remain as concise as possible, without overseeing what is relevant to UI designers.


List of widgets

    Just like Qt Designer, Visual Studio 2005 lists all of its widgets in a single window, the 'Toolbox' window. Widgets are listed in separate categories and, just like Qt Designer, these categories can be hidden by left-clicking on their title; each item on the list is assigned a tooltip, which is a plus compared to Qt Designer.

    The following screen-shot shows the available widgets in the 'Toolbox' window and its categories for a C# project.

Visual Studio 2005 'Toolbox' window showing all the available widgets, divided into categories, for C# projects.


    Having all the widgets listed the Visual Studio way, i.e. ALL widgets listed at the same time in ONE single panel/window, widgets separated into categories, categories which can be hidden, list-items ALL having tool-tips, is what our application should aim for, thus a big WANTED feature.

Disposition of tools in the environment and the environment itself

    As explained above, Visual Studio 2005 is a robust and extremely complexe and complete IDE for many programming languages. This section will describe only certain aspects of this IDE which *stricly* relate to the design of user interfaces.

    The IDE presents itself as a MDI environment, windows being separated in tabs. Windows can be defined as being 'floating', 'dockable' or attached to another window as a child tab. They can also be automatically hidden. Defining all those possibilities for windowing management is a cool feature; when more information about TK will be acquired, a decision will be taken if to mimic or not these features.

Visual Studio 2005 showing the different modes a window can be treated as : 'floating' window, 'dockable' window or 'tabbed' document. There is support to automatically hide windows.
Visual Studio 2005 showing what happens when a 'dockable' window is dragged about. Notice to the center of the panel you have the 4 cardinal points plus in the middle a 'tabbed window' if you want to convert the 'dockable' window into a 'tabbed' document


    No support for multiple-detached-top-level windows seems to exists. Regarding this feature Qt Designer 4 seems to be more adapted, as it offers both MDI and multiple-detached-top-level windows environments. Our application should offer such a feature, taking notice that for multiple-detached-top-level windows environments clicking on any of its top-level windows should bring the focus to ALL of its siblings.

    The user can create entire new applications using wizards, which are based on local or online template files, thus each wizard has a different look, letting you fine-tune in different ways and different aspects of the resulting applications. To know more about templates in Visual Studio take a surf on the internet or have a quick glimpse here.
    Just like Qt Designer you can export your designed applications (forms in C# terms): you can either export them as project templates or as element templates. Either export processes speed up the production time, and is much more robust as the 'single form into template' export process provided by Qt Designer.
    Our application should allow the user to export single "forms" or whole packs of them and define what is exported as a template. An interesting feature will be to append user defined templates into the widgets lists and not restraint its use in the dialog-boxes of wizards while generating new "forms".

Visual Studio 2005 showing some of the vast range of template-based applications you can generate via the 'New project' dialog-box

    There is a good support for working with different projects at the same time. You can even define the order of the compilation of projects. Our application should as well provide a way to work with multiple projects at the same time.

    The "working canvas" appears only when working in the 'Designer' view mode. This view mode is not available for all items in a project, only for those who define an interface. The "working canvas" is displayed in a child-tab-panel on the center area of the IDE, below menus and tool-bar buttons. In the "working canvas" you find a single form where you will add widgets to. The "working canvas" is not limited in size as it redimensions itself to fit the dimensions of a given "form".
    Though you can work with multiple projects and those projects can englobe multiple forms at the same time, you cannot "design" multiple forms at the same time. Each form has to be loaded into a separate "working canvas" as a new tab-panel. This is a NOT WANTED feature. We want it more like Qt Designer, where you can interact with multiple forms at the same time.

    All the available widgets are displayed into the 'Toolbox' window. By default this window is positioned to the left side of the IDE, and it hides automatically. So in order to display it you will either have to look for it on the left side of the IDE, or you can use the 'View->Toolbox' menu entry, or you can use the key short-cut 'CTRL+ALT+x' to display it.
    The widgets are grouped into different categories, each category having the possibility to be hidden by left-clicking on its title. Each widget is displayed as an icon followed by a label and having a descriptive tool-tip assigned to it.
    To add a widget into a given form you have to select it from the 'Toolbox' window by left-clicking on it, then you either drag-and-drop it to the form or you left-click on the form. Once the widget is added, it gains the focus. A pretty cool feature while placing, or moving around, widgets into forms, is the fact that coloured lines are displayed defining vertical and/or horizontal alignments relative to other added widgets.
    Our application should offer a way to select and place widgets by left-click-on-widget and drag-and-drop-into-form or left-click-on-form, like Visual Studio. A big plus would be a preview of the selected widget, like Qt Designer, and the display of visual aids for the alignment relative to other added widgets.

Visual Studio 2005 while placing a widget into a C# form. Notice how blue lines indicate horizontal and/or vertical alignment relative to already added widgets in the form


    There is support for selection of multiple widgets, copy, paste, delete, drag-and-drop, undo, redo and keyboard short-cuts (+menu entries) to perform all of these actions. These are big WANTED features for our application.

    You cannot copy specific attributes from one widget to another, but when you cut/copy and paste a widget, into the same form or into another one, ALL its attributes remain intact (to the exception of event call-backs). Another WANTED feature.

    Visual Studio lacks the well-defined division of edit modes (while working in the 'Designer' view) like the ones proposed by Qt Designer, but this doesn't mean they don't exist. You have two "edit modes": one when you interact with the widgets, another one when you set the tab order of widgets.
    When you interact with widgets you can add them to a form, set/reset their attributes, like their name, their position, their size, among others, and assign event call-backs. Among the attributes you can specify is the tab order, this is why we say edit modes are not "divided". Though this might be seen as a minus, it is indeed a big plus as you can specify tab order by hand and not just by left-clicking and hopping for the best, like in Qt Designer. Having both ways to specify tab order is a WANTED feature in our application.
    While interacting with widgets you can specify certain format properties, like alignment, size, horizontal/vertical spacing, centering, layers order, and you can also 'lock' widgets preventing changes on size and position via the mouse --notice you can still change these properties from the 'Properties' window, this 'lock' only applies for manipulations through mouse interaction--. All the previous actions can be performed using the sub-menu entries of the 'Format' menu entry.
    While working in the 'tab order' "edit mode" you left-click on numbered squares that appear on top of the widgets’ left corner. A step forward compared to Qt Designer is the fact that altering the tab order for one widget doesn't simultaneously alter the order of the others. This is the way we want our application to behave.

Visual Studio 2005 'Format' menu showing all its sub-menu entries. Notice that most of these sub-entries are available only while selecting groups of widgets
Visual Studio 2005 while editing tab order of a components in a C# form. Notice how widgets grouped inside containers, like panels or group-boxes, are assigned a sub-level order


    The is no real-time preview, you will have to compile the project and launch it to preview a form. This is not necessarily a minus, as the 'Designer' view is entirely and truly WYSIWYG, meaning that each visual aspect of widgets is honoured by the windowing manager as stipulated by the 'Designer', i.e. their color,font,size etc, with the exception of cursor, and no 'default packing' is performed like in Glade.
    This being said our application should propose BOTH a real-time preview and a full and robust WYSIWYG edit mode as Qt Designer does.

    The 'Properties' window lets you change the attributes of widgets. By default this window is located to the right side of the IDE. If you don't see it you can use the 'View->Properties Window' menu entry or the 'F4' keyboard short-cut. This window 'smells' like our old 'Properties' window in Glade: it englobes both widgets attributes and event call-backs --properties changes are considered as events-- under the same roof and refreshes its content dynamically based on which widget is selected. To display the attributes or the events you use buttons and not tabbed pages like in Glade. A big minus is that no tool-tip is assigned to any of the entries; even-though you get information about these property-entries on a 'status' bar, the information is 'à la Microsoft', meaning that either is not there or is frugal and redundant. This is a big NOT WANTED feature, we MUST have our users well informed about EVERY SINGLE aspect of the designer.
    A cool feature implemented in this window is the fact that you can sort attributes alphabetically or into categories. This could be a nice goodie feature to incorporate into our application.

Visual Studio 2005 'Properties' window. To the left the list of properties, sorted alphabetically, for a given widget. To the right the list of events, sorted into category, for a given widget.


    Taking in account that Visual Studio is a complete IDE and not just an UI designer, besides having the possibility to specify the name of event call-backs, which is done from within the 'Properties' window, you can specify the code of those call-backs. To do so you double-click on the corresponding event entry in the 'Properties' window, the 'Code' view will appear and you can edit the code at your will. This is a really interesting feature, which could be consider as a potential goodie for our application, BUT first we have to decide whether our designer will only generate XML descriptions of interfaces or become a potential IDE.

    There is support for localizing and globalizing applications. More information about these processes can be found here.

    Project resources can be specified as local to the file-system, or imported into the 'resource' file of the project. In the later case imported resources are copied to a sub-directory of the project's hierarchy, just like Glade, or serialized into the ‘resource’ file, like Qt Designer, if it is a small-sized resource, but there doesn't seem to be a way to 'un-import' resources. Big big minus. Our application should offer a way to 'import' --and obviously 'un-import'-- resources, like in Glade by copying resources to a sub-folder, as a minimum and/or like Qt Designer by 'serializing' data into the project, as a goodie, --this assertion is not final--.

    The convention used for naming variables is pretty much the same used in Glade and Qt Designer, but closer to Qt Designer: variables are named as the name of the class they belong to, the first character being in lower-cased appended with a suffix corresponding to the count of existing elements. Just like Qt Designer 'empty spots' are prioritized to 'new spots', meaning that for example if you have 5 labels in your form and you delete 'label4' the next one you add will be named 'label4', like in Qt Designer, and not 'label6' as in Glade.

    The is no 'direct' way to vision the widgets' tree. This is a big lack for such a robust IDE. You can use a drop-down combo-box located on the top side of the 'Properties' window to select one widget at a time, but the full widgets' tree is not available, like in Qt Designer or Glade. Big NOT WANTED feature, our application SHOULD display the widgets' tree.

    The are visual aids, like tool-tips, status-bar, off-line documentation, but once again seasoned 'à la Microsoft', so they are either frugal, redundant, not self-explanatory, not oriented for first-time users or in some cases inexistent at all. This is a big NOT WANTED feature, we NEED our application and its users to 'speak' to each other. An intensive use of tool-tips, status bar and other visual aids is a BIG MUST for our application.

    Obviously generation of code is possible with Visual Studio, after all it is one of its main goals, but no XML description of the interface is generated. No comments

Using the designer

    Time spent : around 25 minutes. This was the first time I was using Visual Studio 2005 Professional Edition. The results, stripping out my Linux gtk+ theme characteristics, are closer to the ones gotten with Glade, though certain gtk+ widgets where not found in Visual Studio, like horizontal/vertical line separators and horizontal/vertical container boxes.

Dummy application designed using Visual Studio 2005


    Adding widgets to the form was really easy, either by left-clicking on the widgets in the 'Toolbox' window and then by left-clicking on the form, or by left-clicking+dragging the widgets from the 'Toolbox' window into the form. Even though no horizontal/vertical container boxes are available, you can conveniently use the 'Forms' sub-menu entries, to space a group of widgets to fit almost all needs.
    Changing their attributes was a child's game using the 'Properties' window.
    Adding a menu and its entries was really simple: add a 'MenuStrip' widget and type text for the menu entries; in order to create a separator line you need to right-click on an entry and convert it into a separator, not quite evident for first-time users.
    Adding a tool-bar was also easy: you add a 'ToolStrip' widget into the form, then you use a drop-down combo-box to select tool-bar items. This is really handy, and should be consider as a goodie feature for our application.

Tool-bar items are conveniently selected from a drop-down combo-box in Visual Studio 2005


    For the moment being there doesn't seem to be text-length limitations or windowing/user-triggered events not supported, the big minus noticed being it only runs under Windows and is neither open-source nor free, you can only work on one form at a time and no XML description is generated.


    In conclusion designing UIs with Visual Studio 2005 is simple. Many common features are found, some more advanced, like the selection of tool-bar items via a drop-down combo-box, displaying visual means to define alignment of widgets, some more "archaic" or lacking like the working on one single form at a time, a robust-for-all-level-users documentation or the generation of an XML description of forms/interfaces.
    Visual Studio 2005 presents itself as a robust and complete IDE saving lots of time in productivity terms.



(¹)
This study was undertook by a software engineering student and not an expert in the Visual Studio field; even though rigorousness was a key element certain assertions might still be wrong.




KWWidgets: [Welcome | Site Map]