TechMeetup - Introducing Code Rocket

This article covers the content of a talk given at TechMeetup in Aberdeen on the 16th June 2010. We introduced you to the basic concept behind the Code Rocket software tool and how it can integrate with your development process. Then you were shown the live development of a working binary search program using Code Rocket’s pseudocode and flowchart views inside Visual Studio to assist with the implementation.

You can download the slides from the presentation here.

You can download the incomplete project here and you can download the completed project here.

Why not download the Code Rocket .NET trial to try out the examples for yourself or to work with your own code.

Contents

Video

Alan Spark talks about Code Rocket from TechMeetup on Vimeo.

What is Code Rocket?

Typically when designing an object oriented system you will use UML tools to design the overall structure of the system. You may produce class diagrams, sequence diagrams etc. What UML doesn’t allow you to do is design the algorithms and business logic at the procedural level. Code Rocket is designed to be an extension of your current toolset and supports procedural level design using two complimentary views. The pseudocode editor and the flowchart editor. Both of these views are fully editable and synchronized so that you can always use the most appropriate view for your needs.

How does it work?

Once you have designed your algorithm, we can produce a code skeleton that gives you a head start on the coding process. As well as turning your design into code, Code Rocket can also reverse engineer existing code for you to visualize in the design views. This gives you roundtrip synchronicity between code and its design and allows you to mix and match between working in the code or design without the worry of either getting out of sync.

Image showing roundtrip synchronicity of Code Rocket.

Code Rocket comes as a plugin to Visual Studio and currently supports the C# and C++ languages. It also comes as a plugin to Eclipse for the Java language, as well as a stand-alone application called Code Rocket Designer that you can use for upfront design before you start coding.

Binary Search Example

We walked through a live coding exercise using Code Rocket’s design views to speed up the implementation process. We started with a user interface that had none of its functionality implemented and ended up with a fully functioning application.

Image showing interface of demo applicationn.

The aim of the application is to allow the user to add numbers to a listbox, allow the listbox to be sorted and then searched using a binary search algorithm to highlight the first occurrence of a number.

Stage 1 – Adding items to the listbox

We designed this method using the following pseudocode:

TRY to parse input as integer
    Parse input as integer
    Add number to listbox
Catch exception on invalid input
    Alert user with message box
ENDTRY

This method handles validation of the input text to make sure it is an integer. If invalid text is entered then the user is alerted with an error message. We open a try statement to handle turning the input into a number and adding it to the listbox. An exception will be thrown when anything other than an integer is entered and we catch the exception to alert the user. Once we were happy with the design, we committed it to the code.

The following skeleton code was produced from the design:

/// <summary>
///     Adds the input number to the listbox.
/// </summary>
private void Add()
{
    // TRY to parse input as integer
    try
    {
        // Parse input as integer

        // Add number to listbox
    }
    // Catch exception on invalid input
    catch (Exception e)
    {
        // Alert user with message box
    }
}


We then implemented the code for the method and saw the diagram turn green to show completion of its code:

Image showing code completion in flowchart.

/// <summary>
///     Adds the input number to the listbox.
/// </summary>
private void Add()
{
    // TRY to parse input as integer
    try
    {
        // Parse input as integer
        int number = int.Parse(txtInput.Text);

        // Add number to listbox
        lstNumbers.Items.Add(number);
    }
    // Catch exception on invalid input
    catch (Exception e)
    {
        // Alert user with message box
        MessageBox.Show("Invalid input.");
    }
}


Running the application at this point allows us to add numbers to the listbox:

Image showing numbers being added to the listbox.

We went on to implement logic to sort the listbox.

Stage 2 - Sorting the listbox

The next stage was to implement the behaviour behind the Sort button. The code will populate a list in memory with the sorted list of numbers. The listbox will then be cleared and repopulated with the sorted list.

First we implemented the code to create the sorted list and populate it with the sorted numbers using the following pseudocode:

Create list in memory to hold sorted numbers
Foreach item in listbox
    Parse item as number
    If sorted list is empty
        Add number to sorted list
    Else
        For all numbers in sorted list
            If current number is greater than or equal to number being added
                Insert number at current position
                Exit loop
            ENDIF
        ENDFOR
    ENDIF
ENDFOREACH


We brought forward the flowchart and proceeded to add the design steps to clear the existing listbox and then repopulate it with the contents of the sorted list:

Image showing content being added to the flowchart to populate the listbox with the sorted list.

We then committed the design to the code and implemented the finer details. We ended up with the following code:

/// <summary>
///     Sorts the numbers in the listbox.
/// </summary>
private void Sort()
{
    // Create list in memory to hold sorted numbers
    List<int> sortedNumbers = new List<int>();

    // Foreach item in listbox
    foreach (object item in lstNumbers.Items)
    {
        // Parse item as number
        int number = int.Parse(item.ToString());

        // If sorted list is empty
        if (sortedNumbers.Count == 0)
        {
            // Add number to sorted list
            sortedNumbers.Add(number);
        }
        // Else
        else
        {
            // For all numbers in sorted list
            for (int x = 0; x < sortedNumbers.Count; x++)
            {
                // If current number is greater than or equal to number being added
                if (sortedNumbers[x] >= number)
                {
                    // Insert number at current position
                    sortedNumbers.Insert(x, number);

                    // Exit loop
                    break;
                }
            }
        }
    }

    // Clear listbox
    lstNumbers.Items.Clear();

    // Foreach number in sorted list
    foreach (int sortedNumber in sortedNumbers)
    {
        // Add to listbox
        lstNumbers.Items.Add(sortedNumber);
    }
}

However, there was an error in this code. If there were no numbers already in the sorted list that were larger than the one being added then it wouldn’t be added. We needed to add the number to the end of the sorted list in this case.

We brought forward the flowchart and made some changes to the design to reflect this new behaviour:

Image showing flowchart being modified to allow for situation when largest number is being added to sorted list.

We now have a flag that is set to true only when a number is added to the sorted list. This flag is then used after we have looped through the sorted list to determine whether or not we can add the number to the end of the list.

We committed these changes back to the code and saw that the original code was still intact and the new design changes had been inserted as skeleton code, ready for implementing. We went ahead and implemented the code for the changes and ended up with the following code:

/// <summary>
///     Sorts the numbers in the listbox.
/// </summary>
private void Sort()
{
    // Create list in memory to hold sorted numbers
    List<int> sortedNumbers = new List<int>();

    // Foreach item in listbox
    foreach (object item in lstNumbers.Items)
    {
        // Parse item as number
        int number = int.Parse(item.ToString());

        // If sorted list is empty
        if (sortedNumbers.Count == 0)
        {
            // Add number to sorted list
            sortedNumbers.Add(number);
        }
        // Else
        else
        {
            // Initialise added flag to false
            bool added = false;

            // For all numbers in sorted list
            for (int x = 0; x < sortedNumbers.Count; x++)
            {
                // If current number is greater than or equal to number being added
                if (sortedNumbers[x] >= number)
                {
                    // Insert number at current position
                    sortedNumbers.Insert(x, number);

                    // Set added to true
                    added = true;

                    // Exit loop
                    break;
                }
            }

            // If number wasn't added to sorted list
            if (!added)
            {
                // Add number to end of list
                sortedNumbers.Add(number);
            }
        }
    }

    // Clear listbox
    lstNumbers.Items.Clear();

    // Foreach number in sorted list
    foreach (int sortedNumber in sortedNumbers)
    {
        // Add to listbox
        lstNumbers.Items.Add(sortedNumber);
    }
}


We now had the functionality to populate the listbox and sort it:

Image showing listbox being sorted.

The next stage was to implement code behind the Search button.

Stage 3 - Searching the listbox

I had already implemented a method to do the binary search. The code for it is shown below.

/// <summary>
///     Returns the index in the collection of the specified number within the specified boundaries.
/// </summary>
/// <param name="itemCollection">The collection to search.</param>
/// <param name="number">The number to look for.</param>
/// <param name="left">The left boundary of the search.</param>
/// <param name="right">The right boundary of the search.</param>
/// <returns>int</returns>
private int BinarySearch(ItemCollection itemCollection, int number, int left, int right)
{
    // If within boundaries of search
    if (left <= right)
    {
        // Calculate midpoint
        int midpoint = (left + right) / 2;

        // Get value at midpoint as integer
        int midpointValue = int.Parse(itemCollection[midpoint].ToString());

        // If value at midpoint is what we are looking for
        if (midpointValue == number)
        {
            // Return midpoint
            return midpoint;
        }
        // Else if value at midpoint is too big
        else if (midpointValue > number)
        {
            // Look to the left
            return BinarySearch(itemCollection, number, left, midpoint - 1);
        }
        // Else if value at midpoint is too small
        else if (midpointValue < number)
        {
            // Look to the right
            return BinarySearch(itemCollection, number, midpoint + 1, right);
        }
    }

    // Return -1 when number wasn't found
    return -1;
}


We looked at Code Rocket’s code visualization capabilities by viewing this method as pseudocode and as a flowchart and walked through the general idea of how the binary search algorithm works.

The binary search relies on a sorted list as its source. The search space is then narrowed down by splitting the search boundaries into upper and lower portions. We first check the midpoint to see if it is the value we are looking for, if it is too small then we can continue looking in the upper half and if it is too big then we can continue looking in the lower half. If the value isn't found then -1 is returned.

If within boundaries of search
    Calculate midpoint
    Get value at midpoint as integer
    If value at midpoint is what we are looking for
        Return midpoint
    Else if value at midpoint is too big
        Look to the left
    Else if value at midpoint is too small
        Look to the right
    ENDIF
ENDIF
Return -1 when number wasn't found

Image showing flowchart for binary search algorithm.

All that remained to do was to call this logic from the Search button. We went on to design the Search method and realized that we had already implemented validation logic in the Add button. We copied the design from the Add method and made the necessary changes to it:

TRY to parse input as integer
    Parse input as integer
    Get location of number in listbox
    If number was found
        Highlight number in listbox
    Else
        Alert user with message box
    ENDIF
Catch exception on invalid input
    Alert user with message box
ENDTRY

We committed this to the code, giving us a skeleton to implement but retaining the code that had been implemented for the Add method:

/// <summary>
///     Searches the listbox for the input number and highlights the first result in the listbox.
/// </summary>
private void Search()
{
    // TRY to parse input as integer
    try
    {
        // Parse input as integer
        int number = int.Parse(txtInput.Text);

        // Get location of number in listbox

        // If number was found
        if ()
        {
            // Highlight number in listbox
        }
        // Else
        else
        {
            // Alert user with message box
        }
    }
    // Catch exception on invalid input
    catch (Exception e)
    {
        // Alert user with message box
        MessageBox.Show("Invalid input.");
    }
}


After implementing, this is what the code looked like:

/// <summary>
///     Searches the listbox for the input number and highlights the first result in the listbox.
/// </summary>
private void Search()
{
    // TRY to parse input as integer
    try
    {
        // Parse input as integer
        int number = int.Parse(txtSearch.Text);

        // Get location of number in listbox
        int index = BinarySearch(lstNumbers.Items, number);

        // If number was found
        if (index > -1)
        {
            // Highlight number in listbox
            lstNumbers.SelectedIndex = index;
        }
        // Else
        else
        {
            // Alert user with message box
            MessageBox.Show("The number " + number + " wasn't found.");
        }
    }
    // Catch exception on invalid input
    catch (Exception e)
    {
        // Alert user with message box
        MessageBox.Show("Invalid input.");
    }
}


We ended up with a fully functioning program that met our requirements set out at the beginning. In summary, the requirements were to be able to add any amount of numbers to the listbox in any order, sort the listbox and then search for a number to have the first instance highlighted in the listbox.

Image showing sorted listbox being searched.

You can download the incomplete project here and you can download the completed project here.

Why not download the Code Rocket .NET trial to try out the examples for yourself or to work with your own code.

I hope you enjoyed the article and presentation. If you have any questions or feedback please don't hesitate to contact us.