## Basic Walk-through

Creating a UI Designer project is very much like creating a non-GUI project. The difference is that UI Designer handles many of the common chores for adding UI components, including their related resources and most of the source code to implement them automatically. The basic process to create a UI Designer project includes:

1. Creating a UI Designer project
2. Designing all of the project's interface elements
3. Adding resources, images, and other items
4. Begin connecting events and adding implementation code

#### Creating a UI Designer project

You start by creating a UI project based upon a SDK.

Use the New Project wizard to create a project that supports UI Designer. UI Designer projects are normally identified in the Templates page of the new project wizard using “UI Designer” in the title. For example, “S60 3rd Ed. GUI Application with UI Designer.”

The new project wizard walks you through the creation process asking you to provide information on the type of project interface, the SDK that the project will operate with, and other information to set the project up for development. Once the GUI project is created, it appears in the Project Explorer.

#### Creating the project's interface

Once the UI project is ready, you can begin adding UI designs to your design. Each UI design represents a different view the user will interact with when using the program. Each UI design is then implemented using the available SDK components. Components are placed in a UI design according to SDK design conventions. This enforces good design at the component level while freeing developers to quickly create interfaces using multiple UI designs.

Every program view begins with creating a new UI design. Once UI Designer creates the design, it appears in the UI Design Editor view for editing and in the Project Explorer as a .uidesign file. In the UI Design Editor, you can add, position, resize, reorder, align, and delete components in the design until you are satisfied. UI Designer automatically generates the source files to implement the design you created.

Click on a component to select it, then use the Properties view to assign properties, events, add lists, images, and generally refine the component to suit the program you are creating. UI Designer updates the generated files as necessary to keep them in synch with your decisions.

To be most productive, it makes sense to design as many of the program views as possible. This ensures that UI Designer writes as much of the source code as possible that you will need to connect later. A more interactive design process will still work, but when it comes time to add your own code to the generated files, you may find yourself back in the UI Design Editor adding a missing component that you need to connect with.

#### Adding resources, images, and other items

Depending upon the type of program you are creating it may require additional resources, like images, to operate. Use the standard project wizards to add AIF, MBM, and MIF resource files to your project.

#### Connecting events and adding implementation code

Once all of your interface views are completed its time to add your code to that generated by UI Designer. Right-click a component and choose Go to 'selected' Event code to open the generated file associated with the component in an editor view and start adding your program logic. Be careful to only add code to areas not generated by UI Designer to ensure your modifications will be preserved. These areas are marked with the comment lines:

// [[[ begin generated region: do not modify [Generated Initializers]
// ]]] end generated region [Generated Initializers]

Some components will open specialized editors. For example, if you right-click the title component in the Status Pane of the program, you can select Edit Image Property item to open the Edit Image Property window.

Once you have your connecting code in place, simply build and debug just as you would any other project.