Creating our ChatWindow class

Before we begin coding our ChatWindow, let's have a brief overview of the design.

The window will contain the following elements:

• A messages area, showing all messages sent by you to this friend, and sent by this friend to you
• A scrollbar that allows you to scroll up to view older messages
• A text area for you to type a message to send to this friend
• A button that sends the contents of your message to your friend, then clears the text area
• A button that lets the user pick a smiley to include in their message
• Your avatar
• This friend's avatar

From a layout point of view, the message area is the primary part of the application, so it will take up the most space within the window, and be central. 

The text area and buttons will be placed below the messages area so that they are nearby but do not draw the eye away from the messages area.

The avatars will be off to the right-hand side of the window, with your friend's image above yours. This keeps your avatar near your message...