2.1 - Designing the UI

Creating an App

Launch ProjectCenter.app and select Project→New. In the “New Project…” dialog, select Application. Select the location of your application , give it a name (here we chose “Converter”) and press OK.

Editing the interface file

Select “Interfaces” in the main window browser. The project interface files will appear. Depending on the version of ProjectCenter you might find several versions of the interface (GNUstep Renaissance markup, for example). Since we are concentrating on the graphical editor Gorm, you may safely remove the the other interfaces from the project with Project→Remove Files and using Project and Disk.

Select Convertor.gorm (or name_of_your_app.gorm) and click on it. That should launch Gorm automatically and open the file.

Gorm first contact

Here is what you’ll get once you’ve double-clicked the .gorm file.

If the Palettes and Tools don’t display automatically for you, show them using: Select Tools→Inspector… and Tools→Palettes…

Then you’ll see the Palettes and Insepector windows. The Palettes Window contains many palettes. Each of the palettes contains components which can be drag-and-dropped to the interface window.

From the Windows Palette, drag a “Window” into the Gorm Document. A Window will be instantiated and shown.

Rename the title of “My Window” to, for example, “Converter”.

To do that, check in the Inspector, the Title property. Change it to the name you need (e.g. “Converter”) and hit enter. The title of the instantiated Window will automatically change.

You may also want to change the name of the Window object. Although this does not have effect for the user interface, it helps when having many windows and objects instantiated to identify the correct one. Select it and choose Edit→SetName. Set it to something like “MainWin” – the name is for identification purposes only.

In the Attributes of the Window also tick the Visible at launch time option. This will show the window automatically when the application is launched.

Creating the interface

Try to drag-and-drop some Text, Title and Button components to the Converter window. Drag the items you need from the Controls Palette. Move things in order to obtain an interface that looks close to the following one. Resize the controls and the window using the handles.

You can change the values of the control strings by directly double-clicking and doing in-line editing. Don’t forget to press Enter or to click OK once you’ve finished editing the value.

Change the string values of the components to obtain the following.

You can readjust the sizes to match the new labels, guidelines will appear to help you aligning the elements and you can also use the arrow keys to do precise movements.