Design the Application
At this point, you've generated the directories and files you need to start a new GWT project. We've also run the starter application in development mode and had a look at the project files that were created.
We then updated the module definition and host files so that our project could us smartGWT. So now we need to think about functional requirements and the design for the application's user interface.
- Examine the functional requirements
- Identify the elements of the UI design
1. Examining the functional requirements
What do we want the myCRM application to do? Well, you probably guessed from the name that we want to build an application for Customer Relationship Management (CRM). So, some of the thing we might like to do include:
- Provide users with the ability to record Customer details.
- Display information about Contacts (individuals) and Accounts (organisations).
- Provide users with the ability to retrieve Customer details
- and provide a rich user interface that is easy to use.
2. Identifying the elements of the UI design
What do we want the user interface to look like? If we examine the user interface's from some popular applications we can identify common UI design approaches.
Google Wave divides the screen into regions: an area at top of the browser window, an area to the left of the window and areas to the right of the browser window.
Microsoft CRM also divides the screen into regions: a Masthead (the area at the top of the browser window), an Application menu (the area immediately following the masthead), a Navigation pane (the area to the left of the browser window) and a Context area to the right of navigation pane.
After studying the UI's from some popular applications, we've decided that we need to divide the screen into the following regions:
- a Masthead
- an Application menu
- a Navigation pane and a Context area
We also need these UI elements:
- a menu
- a section stack
- and a grid
GWT does not dictate how you lay out your host page, an application can take up the entire browser window, or it can be embedded in an existing page. myCRM will use the entire browser window and most of the UI elements will be created programmatically using smartGWT widgets.
What's Next
At this point, we've touched on some of the things we'd like myCRM to do and how we'd like it to look. Now we're ready to start building the user interface using smartGWT layout containers and widgets.