Note: The screen captures for the examples in this section were taken on VisualAge V4.5. The appearance on other VisualAge Smalltalk version may appear slightly differently. Specifically, connection end points appear differently on VisualAge V3.0. This difference is reflected in the Connection Detangler.
The Connection Detangler is an add-on to VisualAge Smalltalk that adds the following three facets to the VisualAge development environment:
Advanced instrumentation - enables you to clearly see the dynamic relationships between parts in terms of connections.
Advanced navigation - enables you to locate and navigate to the Composition Editor in which a particular part is defined or used. This can tremendously reduce the time it takes to learn the structure of an unfamiliar application.
Advanced debugging - enables you to set breakpoints on specific connections and trace through their execution without having to add halts or breakpoints to your code.
Creating applications visually using parts and connections can tremendously improve the speed at which you develop applications. You can define relationships such as event dependencies between objects by creating visual connections, instead of by writing code. Unfortunately, with more than a few connections, understanding those relationships, especially interactions between parts over time, becomes very difficult. This shortcoming leads to difficulty in debugging, increased maintenance costs and reduced reusability. To avoid these problems, many developers find themselves not taking full advantage of the power visual programming has to offer.
The Connection Detangler for VisualAge solves this problem by displaying VisualAge parts and connections within an object interaction diagram. This type of diagram shows connections sequenced over time in the order in which they fire, so you can see exactly how your parts interact.
The Connection Detangler is integrated with the VisualAge Composition Editor, but does not modify any Composition Editor code and has no effect on your run-time code.
The Connection Detangler can start helping you as soon as you install it. Simply launch the Connection Detangler and exercise your applications. The Connection Detangler displays details about all connection interactions in an easy-to-follow format so you can gain immediate insight into your application's behavior, and helps you navigate to interacting components.
The Connection Detangler enables you to:
The above operations help you to rapidly understand your applications. For example, you can use the above navigation facilities to zero in on parts and connections where they are used or defined, without having to hunt haphazardly with browsers, or set halts. This also means that you don't have to spend countless hours trying to figure out how an unfamiliar application is constructed.
By being able to view connections in the order in which they fire, you can uncover subtle performance problems caused by connections firing too often due to unanticipated side effects.
1. Create a directory and download or copy the correct self extracting zip file for your version of VisualAge into it. The files can be downloaded here or copied from your product diskette:
| File | Files included | |
| VisualAge V3.0 | scdV123.exe | scdV123.dat, scdV123.ctl, scdEV123.ctl |
| VisualAge V4.0 | scdV124.exe | scdV124.dat, scdV124.ctl, scdEV124.ctl |
2. Execute the file to extract its contents.
3. Copy the *.ctl files into your VisualAge Feature directory. This is a subdirectory under the directory where you installed VisualAge.
4. Copy the *.dat file into your VisualAge Import directory. This is a subdirectory under the directory where you installed VisualAge.
5. Select the Load Features... item of the VisualAge Organizer Options menu or the Load Features... item of the System Transcript Smalltalk Tools menu.
5a. In Version 4 of VisualAge, you will need to check Other.
6. Select the feature named Connection Detangler to install it.
7. If you want to load the examples, select the feature named Connection Detangler Examples, as well.
8. When you run the Connection Detangler, you will be prompted to register the product. You can either purchase the product at this time (you'll need a key) or begin the free, 30-day evaluation period.
The best way to see how the Connection Detangler can help you is to just start using it. The goal of this example is to demonstrate how to use the Connection Detangler to gain a working knowledge of an unfamiliar VisualAge part. To follow this example, you'll need to install the Connection Detangler Example application.
1. From the VisualAge Organizer, start the example view, ScdTimerView in the ScdExamplesApp application. You can do this by selecting ScdTimerView in the VisualAge Organizer's parts container and pressing the Test button. When you do this an instance of ScdTimerView opens.
2. Press the Start button in the Countdown Timer view. The view counts down and displays a prompter once zero is reached. You can use the spin button to set a different time value.
3. Now that you know what the example view is supposed to do, you can close it.
4. From the VisualAge Organizer, edit the example view, ScdTimerView in the ScdExamplesApp application. You can do this by selecting view and selecting the Open item in the Parts menu. A Composition Editor for ScdTimerView opens:
5. Take about a minute or two and try to figure out how the view works at run time by looking at the parts, connections and instance methods. This is a fairly typical usage of connections. It should be apparent that it is not very easy to simply look at the view and figure out how it works right away.
6. Open the Connection Detangler. You can do this from the Options menu of either the VisualAge Organizer or the Composition Editor. The first time you open the Connection Detangler, you are prompted to either register the product (buy it) or begin your 30-day free evaluation period. After you choose one or the other, you will need to start the Connection Detangler again. This is the only time you will need to go through this minor inconvenience.
The Connection Detangler is opened in a watching state. This means that it is watching for any connections to be fired. All other options are set to defaults.
7. Repeat step #1 to open the timer view. The Connection Detangler
title bar should show
Detangler WATCHING [ Pending: 9 ] in its title bar. This means that there
are nine pending connection notifications to be displayed.
8. Press the 
Update
pending connections button to show those notifications.
What you now see is an object interaction diagram on the top and details about each interaction on the bottom. Each interaction represents a connection being fired, otherwise known as a connection notification.
The notifications are shown as colored arrows drawn between vertical lines that descend from the icons representing collaborating parts. If you have hover help enabled in your image (you can turn hover help on from the General tab of the VisualAge Preferences notebook) you can see the collaborating parts' names shown as you pass the cursor over their respective icons. Each horizontal arrow represents a connection notification from one part to another. The arrows are drawn in the same color used within the composition editor for their respective connection types. The text on the left and right sides of the arrows show which features of the parts are interacting. For example, the first line shows that the #secondsRemaining attribute of the non-visual part named Timer is set to the value of the #object attribute of the text part named Display.
The ordering from top to bottom indicates the firing order of the connections. The rest of the details of the view are discussed in the User Reference.
For now, try reading the notifications in the diagram from top to bottom. Did you notice that connection number 1 fires four times during initialization?!? If you missed this, take a look at the details columns Num and Ref where Num=1 and Ref = 1, 2, 3 and 4. This extra initialization overhead was not intentionally added. In fact, if you run the Connection Detangler while you open some VisualAge views you'll find many examples of extra initialization with connections occurring. The VisualAge Preferences notebook is a good example. The point here is not to disparage VisualAge connections, but to show you how easy it is to create applications with unanticipated notification overhead, and how difficult it is to discover that overhead unless you use a tool specifically designed to help you understand the dynamic behavior of your connections.
Now that the example view has initialized, you might as well watch it run. First, check the Auto Update checkbox in the Detangler and set the update spin button value to 0. This will cause the view to be updated each time a connection notification is detected.
Press Start in the example view to start the countdown. As the timer counts down, you will see connection notification items (notification arrows and detail items) added to the Connection Detangler view. After the timer reaches the end and you close the prompter, you will see the following notifications have been added:
You can see that after the Start button in the Countdown Timer view is clicked, the #running event of the Timer part causes the #title action of Window to be performed (connection notification number 11). Where does the parameter of that connection get set? If you scroll back a bit, you can see that connection notification number 4 sets the #value attribute of that connection to 'Running'. You can see parameters of connections in the details list when you scroll to the right. After that, the Timer part repeatedly changes its #secondsRemaining attribute, which updates the #object attribute of the Display text part as it counts down. Again, if you look at the parameter column of each of those notifications, you can see their countdown values. Once the countdown is complete, the #complete event of the Timer part causes the #title action of Window to be performed. The #value attribute for that connection was set by connection notification number 6. By now, you should be experienced enough to follow most of the remaining the connection notifications yourself.
Now it's time to try one last thing. Select any connection notification, raise the popup menu for it and select Select connection in editor . You should see the composition editor for that notification's connection open, if it isn't already, and that connection selected for you. Now you don't have to hunt around for connections in the Composition Editor any more.
You learned how to use the basic functions of the Connection Detangler to view and understand the dynamic behavior of an unfamiliar part. You also discovered that sometimes connections, if not used carefully, have the potential to add a bit of unanticipated behavior of their own. Finally, you learned a new technique for navigating to where connections are defined within their respective Composition Editors.
.gif)
| Copyright 1997 SilverMark, Inc. |
| 919-858-8300 |