|
How to Use the Project Browser
This lesson shows you how to use the features of the Property Browser to explore and modify your LiveCode applications. IntroductionThe Property 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. The Anatomy of the Property BrowserThe Project Browser provides many features. We list the key visible ones here under points 1 - 8: Sample Stack DataThe 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. Throughout the rest of this lesson we use this basic stack to demonstrate features of the Project Browser. Updating PreferencesThe Project Browser preferences are accessible via the cog which is shown at the top left hand side of the Project Browser. Renaming ControlsYou 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 ScriptThe 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 DataYou 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. Relayering ControlsThe 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. Duplicating ControlsYou 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 ControlsYou 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 ControlsYou 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.
|
Tweet
|