Design › Designing Client Procedures › Lesson Activity › eGolf Services Home › eGolf Services Home

eGolf Services Home

The first window we are going to design is the eGolf Services home page. See the window examples shown previously to familiarize you with how the window will look.

In addition, referring to the seven steps for designing a UI, the first two steps involve dealing with the data-related GUI controls. This particular window does not display any data. However, it does have non-data controls (the two push buttons), some literals, and three images (the title banner across the top, a banner down the left side, and a golfer image in the top left corner). Therefore, we will place them on the window and detail any events associated with them.

To use images in a model, they must be included in part of the model directory. Before we start designing the window, let us make sure the images are accessible.

Follow these steps:

1. Locate the component model directory djscap1a.ief and copy the contents of the html\image and bitmap folders to your model's (egolf.ief) html\image and bitmap folders. These images and bitmaps were not really needed by the component model, but the component model made for a nice delivery mechanism.
2. Open the window designer by double-clicking on the eGolf Services dialog in the navigation diagram. A representation of the window will appear. Roughly, resize the window design by moving the cursor along one edge of the window or another until you get the double-sided arrow. Then click-and-drag the edge to the desired size. For now, be sure to give yourself plenty of room on the window in which to work. Later, we will resize it back to a better size when we are finished laying out the rest of the controls.