IDE

The IDE looks something like below:

At the very top are the main menu, toolbar, and the component palette. At the far right is the project explorer. The rest of the window is the document workspace.

Each open document gets a tab in the workspace. Different types of documents have different editor interfaces; the editor shown above is for .turbophp documents.

The editor workspace contains a page designer, a PHP code editor, a preview panel, and various support panels.

A set of tabs is displayed that select from different workspace views. The Combo view displays the page designer, code editor, and preview panel all on one page. Splitter bars can be used to adjust the sizes of each section, and splitter buttons can quickly hide a particular section. The Design, Code, and Output views can be used to display each section (page designer, code view, preview panel) on it's own page.

Page Designer

Use the page designer to build a web page by placing components onto the the page, setting properties using the inspector, and adding code for runtime events.

The Object Explorer, on the top-left, shows a listing the objects available on the page. Below that is the Object Inspector. When an object is selected, the object inspector is available for editing the object properties.

The PhpPage object has properties that affect the page as a whole; including the page width and height, the page title, and so on. You can click the page background (or use the object explorer) to select the PhpPage.

Add a new objects to the page by selecting a component from the component palette and then clicking in the page workspace. Some objects, like TpForm and TpPanel, can have objects placed inside them.

Move or resize objects with the mouse by dragging the object or its handles. If an object won't resize, check to see if its AutoSize property is true (in which case, the object sizes itself to fit its contents).

Select multiple objects by shift-clicking or by dragging a select rectangle. Ctrl-drag to select multiple objects inside of a container. Press Esc to select the container of the current object.

Objects can be made to stick to the sides of a container using the Align property. For example, set Align to alTop and the object will stick to the top of its container (and will automatically stretch to fit the width of the container).

Example

Our example document is open in the IDE. We click the Design tab and switch to full Design view.

We click the PHP tab in the component palette, click the TpLabel component, and click in the page workspace. TpLabel1 appears.

Using the object inspector, we change the Caption of TpLabel1 to Hello World.

Then we adjust several other properties of the label:

Align => alTop
AutoSize => false
Height => 40
Style.Color => clLime
HAlign => haCenter
VAlign => vaMiddle

See these changes made in this Flash movie.