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.

Introduction

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 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

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.

Updating Preferences

Updating Preferences

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.

Renaming Controls

Renaming Controls

You can rename controls with the Project Browser by double clicking on the name of the control that is to be renamed. This opens an edit field in which you can enter a new name or modify an existing one.

 

Accessing the Script

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.

Filtering Data

Filtering Data

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.

Relayering Controls

Relayering 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.

Duplicating Controls

Duplicating Controls

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.

Aligning Controls

Aligning Controls

You can align control, using the alignment options on the bottom left of the Project Browser. In this example we are distributing controls horizontally. You could now distribute the controls further, either manually or by selecting other combinations of automatic alignment.

Hiding Controls

Hiding Controls

You can hide controls or groups of control by selecting the eye that is displayed on the left hand side next to a control. This example shows how the left hand group of radio buttons can be hidden.

0 Comments

Add your comment

E-Mail me when someone replies to this comment