## Tutorial: Birthdays - Using the S60 UI Designer

This example shows how to use the Carbide.c++ UI Designer for S60 to define the UI of an application and to implement the "real work" in the generated code.

The goals of the application are to:

- Maintain data and UI separation

- Use the S60 UI Designer to create the UI

- Editing generated source to provide application logic

- Save and restore birthdays from persistent storage

- Summary

### Using the S60 UI Designer

We want the UI to mirror the birthday information, in this case.

A list box shows the birthdays, with name and date/age fields and an icon on each line. The person's name and birthday are always displayed. If a birthday is coming up in the next week, the icon indicates this, and the lucky person's age is displayed next to the date. This list will always be present, so it will be the primary Avkon view for the application.

A birthday is edited with a form, where a to-do note can be edited. Since this will come up at various times throughout the application lifecycle and needs to pass data back and forth with the list, we will make this a dialog rather than an Avkon view.

#### Project creation

The initial project was created using the "C++ Application for S60" wizard with the "S60 3rd. Ed. GUI Application with UI Designer" template. The initial view we created was the list box, though it could have been the form.

#### Application Design

Open the Application Editor by opening "application.uidesign" or selecting the "Open Carbide.c++ Application Design" item from the project's context menu. Select the "UI Designs" tab. This shows the designs used for this project.

- BirthdaysList.uidesign: a list box showing all the birthdays. This is the initial view, and is an Avkon view.

- BirthdayForm.uidesign: a form for editing one birthday. This is a dialog, constructed at runtime.

### Birthdays List Design

Open "BirthdaysList.uidesign." This is a list box showing the birthdays.

#### List box characteristics

The list is configured for "Double Large" style. This allows us to show the person's name in large print with the date in small type underneath. An icon is shown on the left.

The list box has the "markable" list type. This allows you to select one or more items at runtime and act on them in a group. In this mode, the designer shows the mark icon on each item (this has no relation to whether an item is marked initially – no items are marked by default at runtime).

The list box will have no static data, so it is drawn with the "No data" label. No List Box Items are present.

#### Non-layout components

There are two components in the lower half of the view editor: the Options menu and the "remove" confirmation query. You can select these to see and edit the UI they will present when popped up.

The Options menu contains the commands we will publish:

- Add: open a form used to add a new birthday.

- Edit: modify the content of a birthday.

- Mark/unmark: show submenu for item selection. The UI Designer automatically provides this system menu pane (submenu) when you change the type to "markable." (You may also add this via the "System Markable List Menu Pane" component.)

- Delete: delete marked birthdays from the list (when these people no longer want your novelty ties), asking first for confirmation with the "remove" confirmation query.

### Birthday Form Design

Open "BirthdayForm.uidesign." This form is used to edit a single birthday entry.

This is a dialog, created and displayed on demand. We specified this by unchecking the "Support view switching" checkbox on the last page of the "S60 UI Design" wizard when creating the form. In the S60 UI Designer, there is no explicit mention of a dialog, but a form is a dialog. If a form is contained in a view, it does not pop up like a dialog, and is visible as long as the view is showing.

#### Form characteristics

The "waiting" option is enabled, so we can run the dialog and get a response from the RunLD() call. In an Avkon view, this flag is unset. If the dialog does not wait, RunLD() returns immediately and extra code is required to asynchronously notify the application it is closed; in an Avkon view, the form is destroyed when the view is deactivated.

The "double spaced format" option is enabled, since the form has so few lines and space is not a premium.

The "edit mode only" option is enabled, so editing is immediately possible.

#### Form editors

The form has two text editors (CEikEdwin) for the name and to-do fields, and a date editor (CEikDateEditor) for the birth date. These are not changed from the defaults, except for the default text and prompt.