UsersGuide:Chapter 2:The Development Environment
From Real Software Documentation
Contents |
The Development Environment
Real Studio is an Integrated Development Environment (IDE). This means that it contains everything you need to build an application. An interface builder, code editor, compiler, and debugger are all integrated into one package. In traditional programming languages, these items would each be a separate application.
The Real Studio user interface is extremely configurable. By default, all components of your application are organized into a single window, the IDE window. With a single IDE window, you can browse among project items by clicking on tabs at the top portion of the window. You can also open more than one project at the same time; each will be shown in its own window.
As was mentioned in Chapter 1, Real Studio includes two parallel IDEs, one for building Desktop applications and the other is for building Web applications. A Desktop application can be compiled for Windows, Macintosh, and Linux desktop systems, while a Web application can be deployed on the internet. Each IDE has its own set of editors but both IDEs share the same conventions and programming concepts.
When you first start Real Studio, the first thing you must do is choose between the type of application that you want to build. Once you make that choice, you are then presented with the set of editors for building that type of application.
A Real Studio Enterprise Edition enables you to develop in both IDEs; separate licenses are available for the one or the other. If you have a Desktop Edition license, you can build demo versions of Web applications and if you have a Web Edition license, you can also build demo versions of Desktop applications. Here is this dialog as presented on Windows 7 showing only the built-in project templates:
Click the type of application you wish to build and click Choose.
The following illustration shows an example of the user interface configured for a single IDE window for the Desktop Edition.
In this illustration, editors for three components that are identified in the Tabs bar. The last component is an item that the developer has added to the project and the editor for that item is accessible from its tab. The tab for the “Window1” item is in front and its editor fills the main section of the screen. You move among the components by clicking their tabs.
The user interface can also be configured to open some or all components of your application in separate windows. If you prefer to move among editors without displaying and hiding each one sequentially, then you will like this configuration.
For example, the following illustration shows the editor panel that is shown above, but in its own window.
Notice that its tab has been removed from the main IDE window in the back. You can open additional editors in their own windows or configure Real Studio to open all editors in separate windows. You will learn more about these and other interface options later in this chapter.
The Real Studio IDE Window
The main IDE window organizes all the components of your application into a series of screens. The design should be familiar to anyone who is used to working with an internet browser that has the ability to use multiple tabs. This includes Internet Explorer 7, 8, and 9 on Windows, Firefox on all platforms, and Safari on Windows and Macintosh.
After you choose the type of application you wish to build, the main IDE window for the selected type of application appears. Two tabs are open, the Project Editor and the Window Editor for the default window. The Window Editor is in front.
If you have chosen to build a Web application instead, you will see a similar window but with a WebPage Editor instead of a Window editor. Use it to develop the interface that your end users will see on the web.
The Window Layout Editor
You use the Window Layout Editor to design each window in your project. The Window Layout Editor is open when you first launch a new Desktop application. By default, Real Studio adds a new tab to the Tab bar and displays the editor for that window in that screen. The Window Layout Editor for the default window appears.
Notice that the Tabs bar has two tabs. You can display the Project Editor by clicking on the tab labelled “Project”. The Project contains all the key components of the entire project. The Location field shows the name of the editor. For a Window Editor, the name of the screen consists of the name of the window followed by the word “Layout”. You can always navigate to this screen by entering its name in the Location area, followed by “Layout”.
To navigate to a control on the layout, use the format:
Where WindowName and ControlName are the names of the window and the control, respectively. This Window Editor can be closed by clicking its tab’s close box, but the Project Editor cannot be closed.
The window being edited is in the center of the screen and its properties are shown in the Properties pane on the right. These are the same properties as you saw from the Project Editor when you clicked on Window1 item in the Project Editor.
The dividers on either side of the editing area can be dragged to the left or right to resize the editing area within the IDE window. When the mouse pointer is over a resizing hot point in a divider, it changes to a resizing pointer with arrows pointing to the left and right. Drag to resize the editing area. Resizing is shown below.
The window editing area has horizontal and vertical scroll bars that enable you to view different areas of the window without resizing the IDE window or resizing the editing area. You can also reposition the window in the editing area by dragging its title bar.
 |
NOTE: You can configure Real Studio to open editors in their own windows. If you have selected this option, double-clicking the “Window1” item in the Project editor opens the editor in its own window. For more information on this option, see the section “Configuring the IDE for Multiple Windows”. |
The Controls Pane
The list on the left side of the Window Editor screen shows the names of Real Studio’s built-in controls. Controls are interface elements such as buttons, checkboxes, text entry fields, lists, tab panels, pop-up menus, and movie players.
You use the Controls pane to add controls to the window that you are designing.
There are several ways to add a control to a window:
- Double-click on the control in the Controls pane,
- Drag a control from the Controls pane to the window editing area,
- Select the control in the Controls pane and then press the Enter key (Return on Macintosh),
- Select the control in the Controls pane and then drag an area in the Window editing area in the location, size, and shape that you want.
When you add a control to a window, an instance of that type of control appears in the Window editing area and the Properties pane changes to show the properties for that control.
In the following example, a PushButton control has been added to the window. Its resizing handles indicate that it is selected.
Since the PushButton control is selected in the Window Editor, the Properties pane has changed to show the properties of the PushButton. To redisplay the window’s properties, deselect the PushButton by clicking on the surface of the window.
The Controls Pop-up Menu
The pop-up menu above the list of controls enables you to populate the Controls list with one of three types of controls, all the controls, or a subgroup of the controls:
The Controls pop-up menu offers the following choices:
- Built-in Controls: The controls that are built into Real Studio. This is the default choice. The built-in controls are shown in the illutration in the previous section. For more information on Real Studio’s built-in controls, see the section in Chapter 3 on Interacting with the User Through Controls.
- Project Controls: Custom controls that are based on built-in controls. Project controls are also listed as items in the Project Editor. For information on creating custom controls, see the section “Understanding Subclasses” and the procedures for creating subclasses based on controls in the Chapter 10.
- Plug-in Controls: Controls that you add to Real Studio by installing plug-ins. Third-parties can market custom controls in the form of plug-ins that are installed by placing the plug-in in the Plugins folder in the Real Studio folder. This list is empty if you have no third-party plug-in controls installed.
- All Controls: The built-in, project, and plug-in controls in one alphabetized list.
- Favorites: Controls from any of the three types of controls that you have marked as Favorites. Real Studio ships with a selection of the most frequently used controls as Favorites. Those controls are shown above. For more information, see the section in Chapter 3 on Favorites Controls.
The current selection has a checkmark to its left.
NOTE: The Web IDE does not have a Controls pop-up menu.
The WebPage Layout Editor
If you chose a Web application in the New Project dialog box, you get a parallel system of editors for creating Web applications. The Web application integrated development environment is based on the same conventions established in the Real Studio Desktop edition, but it is for applications that are deployed on the internet rather than any desktop platform.
While the Desktop Edition is oriented around building a windowing interface, the Web Edition is oriented around building web pages. The obvious similarity of the two layout editors is apparent. The following basic screen shot is a blank user interface editor for building web pages.
Like the Desktop Edition editor, there is a Controls pane, a layout editing area (a.k.a, the WebPage editing area), and a Properties pane. As with the Desktop Editor, you design a WebPage by dragging controls from the Controls pane to the editing area. The Properties pane shows the properties of the selected control or the WebPage if no control is selected. In the above illustration, there are no controls on the WebPage, so the Properties pane shows the properties of the WebPage itself.
The Web Layout Editor works like the Desktop Layout editor. You design your user interface by dragging controls from the Controls Pane to the Editing area. Using the the tools for visually aligning controls with one another and distributing groups of controls evenly, you can position the controls precisely.
An important difference that you need to take into account is that the Web application is supported on different platforms and browsers. You can’t assume a fixed-size browser window and that all browsers will render the pages identically.
