Docking

Now that we've completed our Thinger and Equalizer, let's alter their behavior a bit. You may have noticed that Containers dock, or link, together whenever they are brought near each other. By default, Containers dock according to the rectangular perimeter as defined by their height and width. While in many cases this is sufficient, it really doesn't work too well for rounder Containers like the ones used for this Tutorial. To make our Thinger and Equalizer dock in a manner more suiting of their shapes, we'll be using SnapPoints. SnapPoints don't override the default docking, they just provide additional points to dock.

SnapPoints

Much like Buttons, Layers, and other Objects, SnapPoints need an id, an x-coordinate, and a y-coordinate. Unlike the other Objects, though, that is all a SnapPoint needs to function. Here is an example SnapPoint that we'll use in our Equalizer's Layout:

<snappoint
   id="CommonDock"
   x="0" y="3"
/>

As you can see, there isn't much to it. However, the values you choose for the Parameters here are very imporant, even(especially) the id. As before, the id can be any meaningful value you wish. The x and y determine the location on the Layout where the Container should dock.

SnapPoints respond to other SnapPoints. We must also include one in our Thinger since we want the Thinger and Equalizer to dock more logically. Please note, the SnapPoint we use in our Thinger has to have the same exact id or they will not work together. SnapPoints of different ids ignore each other. Also, we should select coordinates for this SnapPoint that cause the Containers to dock where we want them to. By adding the following to our Thinger's Layout, we will achieve a better docking effect:

<snappoint
   id="CommonDock"
   x="107" y="3"
/>

Make these changes in the tutorial skin, then refresh the skin and try it out. If you'd like, since their curvatures match, you can make the Equalizer dock with Main Window by adding another "CommonDock" SnapPoint into our Normal Layout at (333,3).

Now that we have our Containers docking properly, we're just about done the Intermediate Area. Let's go on to the Conclusion and review what we've covered.