|--< intro >--< api >--< overview >--< sourcetool >--| 
 
 
     At this time this package is considered beta yet will be considerably improved to provide developers with the features that they are interested in. With any luck, the FrameManager source tools and examples will be at the upcoming developer conference.
 
 
The Parent
 
 
The basic visual source too app allows you to draw view regions within the inner window. The first issue which you should recognize is that your container may be of a fixed width and height or perhaps is resizable. Even more subtle of an issue - perhaps what you are managing is not in a window but is inside of another view. Either way the inner region represents the parent object which your frames will relate to. 

Under the Parent menu you can toggle the resizing behavior of the window. 
You may also set the width and height of the window in terms of a pixel value or a percentage of the screen. 

Please consider this a learning tool! It is very obvious what sort of speed hit your code will take if you do not share dependencies. Play with this tool and learn how to make the layout routing work fastest for your design implementation. It would take hours to code all the combinations to test the various dependencies you can set to get very similar interfaces.

In the next version you will be able to tell the tool what views your application uses. These will be connected to the frames you draw on the screen. (They are also necessary for the WEdgeManager object to know what views to find in the view hierarchy to associate with your frames.)

 
 

 
Guide Edges in the Design Mode
 
When positiong views in the inner area it often helps to use guides to arrange your objects. You can create percentage or literal guides to define a resizing/positioning behaviour or just for visual alignment. Guides are created by dragging from a ruler onto the open area. Percentage rulers will move as a window is resized (but make sure resizing is turned on in the Parent menu.) 

To create a percentage guide toggle the ruler by clicking on the top left corner where the rulers meet. The ruler's values will change from literal numbers to percentages. 

Rember that in the design mode you can modify, select and delete the objects you have drawn. (The delete key removes selected objects.) 

In the next version the guide menu will allow you to manually enter a value to position the guide in terms of literal or percentage values. Presently the percentage version of the ruler is not working very well. I haven't had time to fix it.

 
 
 
 
 
 
 
Layout and Design Mode
 
 

  One of the principle features of this tool is that it is a true real time WYSIWYG development tool. Once you have drawn a frame in the design mode you can define the resizing behavior in the layout mode. 
If you return to the design mode and adjust the frame which  you just arranged, it will preserve the arrangement and make adjustments to move the frame just as you asked. The requested resizing style is persistant and some resizing mode once set will not allow you to adjust the view's positioning. (In these cases, moving violates the layout or positioning you have described.)

  To set an edge's resizing behaviour you should be in the layout mode. Click on an edge and it will become wavy (highlited). The next click you enter will set the resizing behavior. At the present time you may only click on guidelines to align the frames. 

 Presently all forms of relationships exist. Here's a quick summary of the relationships and how to see them visually: 
 

Position edge according to parent's literal coordinate system. Design Mode: Create a literal guide from the ruler. 
Layout Mode: Click on an edge then a guide.
Position edge according to a percentage width or height of the parent. (ie. the window.) Design Mode: Create a percentage guide (toggle the ruler first.)
Layout Mode: Click on an edge then a guide.
Position an edge a fixed distance from it's opposite edge (like a MenuBar's height.) Layout Mode: Click on an edge then the opposite edge, drag to set the delta away.
Position an edge relative to a another view's edge. Layout Mode: Click on an edge, then another edge. Continue to drag to set a delta away.
Position an edge at a relative percent of another view. Layout Mode: Click on an edge, then click/drag within the body of another view.
Select/Set multiple edges. Layout Mode: Hold the shift key down while selecting edges.
Delete a guide/view. Design Mode: Click to select component. Press delete.