Recent posts








    The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

    Enrich VSTA 2010 Use case diagram with SketchFlow Screens

    A use case diagram visualizes the interaction of an external user with your system. So, you can say that in many situations [cases] that there is a need for an user interface, a screen.

    Not that strange that RUP connects the user interface designer to use cases. [see image below at the bottom]


    UML Type: Artifact

    Something every diagram has in VSTS 2010 is the UML type ‘Artifact’. With this type we can attach physical pieces of information to or diagrams.

    For example in this diagram below, I defined an artifact which points to a class file. [don’t think it very useful to associate C# class files with use cases.. but as an example]

    code file

    Some nice functionality of this ‘artifact’ shapes gives us the capability to double click the shape and jumps to this file. More useful, what you also can do is point to a Word document with some additional information according to this use case diagram, double clicking will open the file in Word [or you’re preferred text editor].

    Microsoft Expression Blend 3

    SketchFlow is a visual tool for prototyping desktop and web applications [WPF/ Silverlight].You can download the trail here. The image below, is a prototype of an application made with SketchFlow. A bit sketching, playing with colors real designers work... :-)


    Smashing Magazine had a nice overview of sketch techniques last week “35 Excellent Wireframing Resources” and I made some several weeks ago for this post Storyboard: Architectural Inspections - VSTA2010 – AppArchGuid.

    Now, the interesting piece is that SketchFlow, Blend solutions have the same structure as Visual Studio solutions. So, we can open or sketch in Visual Studio. as you can see in the image below, it’s just a normal Silverlight 3.0 project. [installing Expression Studio gives VSTS the ability to open Silverlight 3 projects].


    From this point it’s very easy to add the ‘XAML’ screens as an artifact link to our Use Case Diagrams.


    The small challenge at this point is that double clicking on the artifact opens the XAML file of your prototype in ‘your preferred XAML viewer’ your internet browser, showing nothing. A small tweak [replace the full path property value with a batch file with one command “devenv.exe /edit filetoopen.xaml”, the /edit opens the file in the current open environment] makes it possible to open the XAML file in the currently open Visual Studio edition.

    Finally the result is a Use Case Diagram with several artifacts referring to user interface screens. Which gives the user interface designer, the system specialist, the customer actually everybody who is involved in this software project an overview of the solution, which results in better understanding and the user interface designer still can work in SketchFlow.


    final note: there are still a few integration problems, but I do think this is a valuable scenario….

    Posted: Sep 03 2009, 09:59 by clemensreijnen | Comments (23) RSS comment feed |
    Filed under: ALM


    Comments are closed