How do I use the Project Browser?
This lesson shows you how to use the features of the Project Browser to explore and modify your LiveCode applications.
The Project Browser was introduced into LiveCode at release 6.0.0 and provides an updated and automatically refreshed view of the visual aspects of your LiveCode projects. This allows you to have direct visibility of key aspects of your application in a hierarchical form, without having to navigate from one card to the next.
This lesson provides an overview over the key functionality but does not go into the detailed aspects that are generally intuitive and self evident.
The Anatomy of the Project Browser
The Project Browser provides many features. We list the key visible ones here under points 1 - 8:
1. The cog that takes you to the Project Browser preferences.
2. The filter option that allows you to list a subset of the controls that make up your application.
3. Expansion and contraction arrows that allow you to dig down into expandable parts of the stack that are being represented.
4. The type and names of the control that is being displayed in the Project Browser.
5. The number of lines of code that are associated with the control.
6. An eye and lock that allow you to show/hide the control or lock/unlock it from being edited.
7. A number of alignment operations that help you specify where controls are to appear on the cards.
8. Grouping, duplication and deletion fields.
Sample Stack Data
The sample stack shown here consists of three cards. Two cards have buttons on them as shown here. The other card has no controls on it.
The card on the left has two buttons that intersect. The top left button is lying beneath the button on the bottom right. The former button is on layer 1 and the the latter button is on layer 2. Each one of the buttons contains a short mouseUp handler that answers some text through a dialog box.
The card on the right has a single group on it that contains four radio buttons.
The structure of the test stack shown here is clearly visible in the hierarchical representation that is displayed in the Project Browser in the previous step.
Throughout the rest of this lesson we use this basic stack to demonstrate features of the Project Browser.
The Project Browser preferences are accessible via the cog which is shown at the top left hand side of the Project Browser.
Tick boxes allow you to show and hide the thumbnails of controls and/or groups of controls. You can also specify the order in which the controls are displayed in a particular group or logical section. The order determines the layer of a control or group of controls.
It is also possible to set the text size and font that is used to display the textual information displayed in the Project Browser.
Accessing the Script
The Project Browser gives you instant visibility of the number of lines of code that are associated with each control. The number of lines are displayed in the blue boxes on the right hand side next to each control. You can click on these boxes to open the script editor and display the code for the particular control.
You can filter the content of the stack by using the text entry field next to the Filter string. This field allows you to specify parameters by which to filter the information that is displayed in the Project Browser. The example here filters on the number of lines of code that are associated with a control. You can see that the Mainstack and Card are included too. This is shown to provide you information on the hierarchy of the controls in the application.
This feature is particularly useful if your application contains a great number of controls.
The layer of a control determines how deep in a stack of controls the control appears. Layer 1 is the lowest layer and is the one that sits directly on top of the card. Controls on lower layers are covered by controls that lie on higher layers. If you look back to step "Sample Stack Data", you can see that the top left button is covering the bottom right button.
This layering hierarchy can be controlled and changed in the Project Browser by rearranging the order in which the controls are displayed. You can drag and drop controls around the Project Browser in order to change the layer on which they appear. This example shows how to drag and drop a control above another. You can see that the top left button now lies on top of the bottom right button.
You can duplicate one or more controls by selecting them in the Project Browser and pressing the "Create new controls of the selected type(s)" or "Clone controls" button. "Create new controls of the selected type(s)" allows you to duplicate the specific control types you selected but does not copy any of the parameters you set on the controls you are copying. "Clone controls" allows you to duplicate the controls that are selected and the content that was set up in the controls. This also includes the code that may be associated with a control.