Prototyping Applications with Sketchflow

How many times have you needed to present visual concepts behind your application to a client?

Over the years, I’ve had several times where I had to build a quick mock-up in Visual FoxPro to show how an application or function might run. Designing the screens themselves weren’t the challenge – the challenge was showing the user how the application would flow between different areas. Short of putting fake code into buttons or saying “and now we go here”, there really hasn’t been an easy way to do this.

Now, sometimes, a client has gone so far as to hire someone to build “wireframes” to depict this. I found this process an entire waste of time. People building wireframes tend to be “business analysts”, in short; people who have stopped learning how to develop code but still want to show their value by being the translator between the client and the developer. As far as I’m concerned, if you want to be a senior developer, you need to be able to translate as well. Sure, you may leave the task to other developers, but you should always be able to demonstrate or show your ideas to others.

I recently had the experience where I had to show some user interface concepts on a new application. I was interested in trying out Expression Blend, one of Microsoft’s tools found in the Expression Studio but also one of the integration tools noted in Visual Studio 2010. While it specifically targets WPF or Silverlight application development, I found the SketchFlow tool invaluable.

Expression Blend uses XAML to build the user interface. So, if you’re not building a XAML application, you’ll need to convert this over. However, the key benefit is the little “map” section at the bottom of the screen in the designer.

With the map section, you can build the entire work-flow for the interface. By right-clicking on the main page, you can create a connected page.

Since the tools available in Expression Blend are based on regular developer tools, it’s easy to build a sample representation of your application in minutes. If you are using WPF as your development platform, you can also convert it into a production environment or share your existing components (with code behind it) in your prototype. This is similar to building a true development prototype using existing code or components.

When you “run” the prototype, all of your connections appear in a menu on the left side. To move to another page, you click the related page OR you can use the map below to show the navigation.

The best part, however, of SketchFlow is the SketchFlow player. Expression lets you “package” the entire solution into a single executable that runs with the navigation menu. Now the user can run this prototype on their own. There are also tools to let them add their own feedback and then send it to you via e-mail. This can make remote prototyping much easier than it already is.

Added bonus features:

1. You can take a larger part of the screen that you are working on and instantly create a “user component” for it, so it can be re-used with other pages. Drag and drop the user component in the map onto another page and it will put an instance of that object on that page.

2. You can add annotations to individual pages and components on the screen. These annotations can pop-up for your users so they can see your comments.

3. Sketchflow has a “style” from which you can create the look and feel of “wireframes”, instead of the real look of controls. This makes the entire application have that real “prototype” look to it, so your clients don’t think it’s easy to move from prototype to production.

4. You can also add real “animations” within the application so when users click a button, a dialog can appear or an object can “move” on the page.

Many developers push off Expression as being the “designer” tool or look at Expression Web simply being the “new” FrontPage – but it’s definitely more than that.

If you’re a “coding” developer, it may not be for you – but the next time you have to show interface concepts to a user, you definitely want to be looking at Expression Blend and SketchFlow.

Expression with Sketchflow has been around since Expression 3.0 so if you have MSDN from the past year (2009), you already have access to it.

Other useful links:

Demos from MIX
Prototyping with SketchFlow

Refactoring T-SQL

While much has been said about the benefits of refactoring application code (see VFPX Code Analyst), I typically haven’t seen a lot of noise about refactoring T-SQL and stored procedure code.

The refactoring features found in SQL Manager tend to be more about refactoring your database design but not about the actual content of the SPs.

It’s important to note that if you tend to rely on large stored procedures, then many of the same rules of refactoring apply:

1. Keep it short and sweet.
2. Make it readable.

So when dealing with a particularly unruly stored proc (over 1000 lines), I was quite happy to find Red Gate’s SQL Refactor (here’s a post from the lead developer).

Some of the features are pretty basic (renaming variables, etc) but the one of great interest was the Encapsulate as a new Stored Proc.

As with a number of tools that are add-ons to other components, its overall usefulness might seem limited if you are building your stored procs either using testing patterns or have good code review sessions – but if you’re inheriting or just watching one procedure get too big, it’s definitely useful.

What about your SQL applications? How big do you let your stored procedures get?
What tools do you use?

Refactoring and Profiling

(another session from Southwest Fox 2008)

Refactoring is the art of clean-up and can be useful. Many books have been written about it, so it can seem daunting but the VFPX Code Analyst does make it easier. In this session, we see how the Code Analyst along with existing tools like the Coverage Profiler can make figuring out how to clean up your code can be made easy, simple and dare I say it, fun!

You can also hear the full session on the FoxShow here.

Using VFPX : A Walkthrough features in CodePlex

This white paper is from a session originally given at Southwest Fox 2008, introducing many developers to how CodePlex works and how they can get involved with the VFPX Project.

You can also hear the audio of this session here.

So you want to help out in VFPX? This session goes through how to get started with the VFPX Project and dealing with issues like source control, the Wiki-style attitude of Codeplex and more.

What Is VFPX?

VFPX is the future of the Visual FoxPro IDE and developer tools we currently know today. It is based on the VFP 9 SP2 core but realistically, it is more like taking all of the tools that have grown up around the VFP engine and making them ours to grow and enhance. Microsoft is no longer doing active development on Visual FoxPro; the product is officially supported until 2015 but then many developers still have VFP 6 applications running and VFP6 support ended in 2004.

Visual FoxPro has a long running tradition of community enhancements. Back in 1990, the FoxPro CompuServe forums were among the busiest, with new downloads and an environment of users helping other users. Some of these tools were shareware, others were simply demos of commercial products and others still were released into the public domain, making them free. Since CompuServe closed down and the web became what it is today, a number of different avenues have cropped up as a way for keeping the FoxPro community in touch. Many offer downloads (such as the Universal Thread and Foxite) while others continue on the discussion aspect of the FoxPro forums.
VFPX is a community-driven effort to provide a single source for the latest in FoxPro tools, all offered under a single license for developers. It includes every FoxPro component provided by Microsoft that was written in xBase. For those developers who may have been unaware, a great deal of the tools provided with FoxPro, such as the Class Browser, Builders, Wizards and the Task Pane are all written in xBase, many of them by community members who were contracted by Microsoft. The Visual FoxPro engine (the executable and the runtime DLLs) are not being changed and are not available – but every other piece is. The last piece of core code that Microsoft provided for Visual FoxPro (Sedna) was put onto CodePlex. That’s where we come in.

While a lot of the existing pieces of VFPX are tools that improve the development experience, a growing number of them are interface controls and libraries that you can use to improve your own applications. Just as the FoxPro Foundation Classes (FFC) and Component Gallery provide samples and techniques for implementing technologies, VFPX includes GDIPlusX which makes working with graphics in your application easy or ThemedControls which provides standard Windows and Mac UI components written directly in FoxPro.

If you have ever thought about how much better a particular tool in Visual FoxPro would be if it only had one extra feature, this is the opportunity to change it. If you have tools in your own developer arsenal that you think can benefit the entire developer community, propose it (more on that below) and get it in there. If you’ve developed interface components that you want to share with others, put it into the VFPX codebase. The main stipulation is that you will be offering it under a Shared Source license, making it available for anyone to use, change or distribute.

Read more from the link enclosed here.

Using the VFPX Code Analyst

The Code Analyst is a tool in VFPX designed to make FoxPro application development and code maintenance easier. It combines the extensibility with a Code references-like interface, analyzing pieces of code or entire projects and identifying key areas for refactoring – similar to the Code Analysis tool in Visual Studio.

You can identify your own project rules to highlight key areas of your application that may not match your own coding standards.

A PDF version is available here

Alerting Users in your FoxPro Application

Every application needs a way of notifying users about something. The first “something” that may come to mind is an error, which unfortunately, needs a very special kind of alert or handler. But there are lots of other events that users need to be aware of, whether you as the developer plan for them or not. In January 2007 issue of FoxPro Advisor, Mike Lewis wrote about a forced system shutdown “event” that would let administrators get all users out of the system. If you are running a process that may take a while, you might need to let users know when it has been completed. If you have a large application, there could be many events that require user notification. Perhaps worse, there may be many events that your users could have reacted to, “if only they had known” before something was happening. Some applications rely on reports to display this information – but why waste paper when you can simply alert users to an event?

Refactoring in Visual FoxPro

(this article was written prior to the Code Analyst but identifies the origins of where this tool came from)
With the sheer number of functions, commands and tools available within Visual FoxPro, it’s easy to find more than one way to do the job.

So multiply the number of ways by the number of developers on your team, and it’s pretty easy to see why code maintenance is pretty important.

Refactoring is about making code more useable (not changing the functionality but making it easy to understand and maintain).

This article presents 3 core concepts:
1 – Never Use Keywords for variable or field names
2 – Use the most recent functions where appropriate
3 – Encapsulate, encapsulate, encapsulate

VFPX: New Tools based on Existing Code

Tools like Code Analyst and Class BrowserX all use code from existing Visual FoxPro tools. This is possible because in 2007, Microsoft released the code for all of their xBase components with a special license. This license allows developers to create and update components and applications based on these components. It explicitly gives two rights:

Copyright – “a non-exclusive, worldwide, royalty-free copyright license to reproduce the software, prepare derivative works of the software and distribute the software or any derivative works that you create”

Patent – “a non-exclusive, worldwide, royalty-free patent license under licensed patents to make, have made, use, practice, sell, and offer for sale, and/or otherwise dispose of the software or derivative works of the software”

There are some limitations; primarily that you can’t use the Microsoft name, must include any existing copyright notices, and that the software is provided “as-is” but the real benefit is with how it can apply to your existing applications. Want to build something similar to the Task Pane in your application? You don’t need to reverse-engineer it – you can simply look in the existing code and re-use it. Thanks to the Fox Team!

Testing Toolbox

You always test every aspect of your application— right ?

Every application needs to get tested – either it gets done before the product is released, which is ideal or your users will do it for you, which usually turns out to be a big mistake. Even if you don’t formally recognize testing in your project development cycle, you are still, in fact, testing from day one. Here are some tools and techniques that can help ease the pain of testing your Visual FoxPro application and adding it into your development process. Along the way, I’ll try to answer some immediate objections to formalized testing.

Testing Visual FoxPro Applications