While the designer handles the visual layout of controls in a visual client application, the code editor is where the actual functionality behind a form, database, or request handler is implemented. The code editor has the following layout:




Automatic Code Updates

---

All component additions, modifications, and deletions are automatically reflected in the code editor by the IDE. For example, the following is the code editor showing the source unit of a new form:



The following is the same source unit in the code editor after adding a TButton component.



As you can see, the IDE automatically updated the source unit to include the proper declaration for the newly-added TButton component called Button1. If you then double-click on the Button1 component in the form designer, the source unit will look like the following:



Again, the IDE has automatically updated the source unit to include an empty event handler for the TButton OnClick event. If you add code to the empty event handler, this code will then be executed when the button is clicked. For example, let's add a call to the ShowMessage procedure to display a message to the user:



If you do not define any code or comments between the begin and end keywords that define the event handler code block, the IDE will automatically remove the event handler completely from the source unit the next time the source unit and form is saved.

Toggling Between the Code Editor and Designer

---

In order to toggle between the code editor and the designer, press the F12 key or click on the Code or Designer tabs in the lower left-hand corner of the work area in the IDE.

Key Mappings

---

The following key mappings are active in the code editor. Unless indicated otherwise, holding down the Shift key while pressing any of the keys that move the cursor position will cause any source code between the original and the final cursor position to be selected.


Context-Sensitive Help

---

You can get context-sensitive help on any keyword or identifier in the code editor by positioning the cursor over the desired keyword or identifier and pressing the F1 key. For more information on using the help browser, please see the Accessing Help topic.