# 2.1 - Designing the UI ## Creating an App ![ProjectCenter](2.1_nfig1.png) Launch ProjectCenter.app and select ProjectNew. In the "New Project..." dialog, select Application. Select the location of your application , give it a name (here we chose "Converter") and press OK. ![New Project dialog](2.1_nfig2.png) ## Editing the interface file ![ProjectCenter interface](2.1_nfig3.png) 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 ProjectRemove 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. ![Selecting Convertor.gorm](2.1_nfig4.png) ## Gorm first contact Here is what you'll get once you've double-clicked the .gorm file. ![Gorm interface](2.1_nfig5.png) If the Palettes and Tools don't display automatically for you, show them using: Select ToolsInspector... and ToolsPalettes... ![Tools menu](2.1_nfig6.png) 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. ![Windows Palette](2.1_nfig7.png) 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. % Include picture here 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 EditSetName. Set it to something like "MainWin" -- the name is for identification purposes only. % Picture of Edit->SetName 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. % Picture of Attributes ## 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. ![The interface](2.1_ofig8.png) 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 once you've finished editing the value. ![Changing the texts and labels](2.1_ofig9.png) Change the string values of the components to obtain the following. ![The final look](2.1_ofig10.png) 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.