## Tutorial: Yahoo! Image Search

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 application consists of two screens. The main screen prompts the user to to initiate a search and displays the list of search results. The second screen displays the Yahoo! provided thumbnail image of the selected result.

Choose a link to read the following topics:

- Getting the Yahoo! Image Search project
- Application overview
- Using the S60 UI Designer to create the UI
- Using the WebClient component to retrieve XML data
- Adding application logic part 1: perform search query and populate results
- Adding application logic part 2: download and display selected image

### Application Overview

The Yahoo! Image Search application supports the following activities:

- Enter a search string
- Query Yahoo! for images matching the string
- Display a list of up to 10 matches
- Display a thumbnail for the selected match

When the application initially opens there are not yet any search results to display. The application displays information about how to begin a search (Figure 1).

Figure 1 - Starting the search

A query dialog is used to prompt for the search string (Figure 2).

Figure 2 - Entering search string

Search results are displayed in a list box (Figure 3).

Figure 3 - Starting the search

Clicking on the selected item displays the thumbnail image (Figure 4).

Figure 4 - Program displays image