Friday, December 17, 2010

NetMonitor. Prototyping with Expression Blend 4

In the previous part I listed the requirements to the application. According to the good practice of program development, I’ve decided to start with UI and make a sketch of main application window.
Earlier I used to play with 2 superior mockup tools, Balsamiq Mockups and Evolus Pencil, but today I’ve decided to try Microsoft Expression Blend 4 because it was specifically designed for WPF-based application development. After several tryouts I’ve managed to make a sketch of the application. Main window has 2 buttons and a list with hosts, each of them contains 4 pieces of information (Host name, IP address, Response time and Health). The sketch looks as follows:
NetMonitor Sketch
I know that there are some troubles with text alignment and may be many others but don’t forget that this is only a sketch and the only purpose of it is to show how the application might look like without extra details.
Here is the main window of Expression Blend 4, as it was in the middle of the sketching process:
Expression Blend Full.
As you may notice, in the left lower corner is the structure of the application. I’ve put a DockPanel inside the LayoutRoot and inserted there a ToolBar with Docking=Top & a ListView, which automatically took the rest of space. After that I’ve created a sample data source and bound it to the ListView. That’s it, my sample data immediately appeared in the ListView. During these operations I saw nor XAML neither C# code.
The sketch is ready, it even can be run in special Sketch Player (another great feature of Expression Blend 4) so customers can play with it, make comments and criticize. The next step will be transforming the sketch into a real application and start building network services.
In case anyone is interested in the source code, I’ve opened a public repository at the bitbucket.org, so anyone could get the sources, play with them and even add any valuable stuff.

2 comments:

  1. Can you provide the details of performing the data binding?

    ReplyDelete
  2. Hello Juanita,

    Here is a link to the xaml file with the bindings: https://bitbucket.org/dmitri.maximov/netmonitor/src/753fe0e726c2/Sketch/NetMonitor/NetMonitorScreens/Screen_1.xaml

    Moreover, the whole project is available for browsing and downloading: https://bitbucket.org/dmitri.maximov/netmonitor/overview

    How else can I help you?

    ReplyDelete