Module 2: Start Your GUI Application
Mr. Goodman
CIS355A_Module1_Project_Guide.docxCourse Project
DeVry University
College of Engineering and Information Sciences
Course Number: CIS355A
Module 1: Design Your Application
Objectives
· Create a client UML diagram.
· Create a WireFrame diagram for your application.
If you do not know how the application should look, it is easy to sit in front of your computer and stare at the screen. When you sit there, staring at the screen, you are wasting time. In industry, we charge $75 to $250 per hour for application development, depending on the complexity of the project and the required skill set. Time really is money. Do you want to waste money (time) by staring at the screen, or do you want to design your application so you can be more efficient?
Here is another thought. You are currently early in your career. Even at this point in your life, have you started coding an application and then decided that the application is going in the wrong direction and then deleted the application and started over? How many hours did you waste? Do you want to waste that many hours when you are developing an application for a client? If you have to start over, who pays for the wasted hours? Who do you charge when you burn that many hours simply because you did not design the application properly?
There are a lot of design tools available for you to use. Microsoft Visio is one of the most popular tools. It is important that you learn Visio so you can put it on your resume. Let’s use Visio to design our GUI using the Visio Wireframe tool. Then, let’s continue with Visio and create a UML diagram for our Customer and DataIO classes.
Professional software development—here we go.
Steps
1. Create a new folder on your desktop or in your documents folder called CIS355A. Save all of your CIS355A files in this folder. Open Visio on your local computer or use the Azure Labs environment. Create a new wireframe diagram and save it as “Week 1 - Course Project - GUI Wireframe diagram”. Wireframe diagram is located in the software and database category of Visio.
2. Change the orientation of the Visio wireframe diagram to landscape (Design Orientation Landscape). Then, add an application form shape to the design area (Shapes on the left Dialogs Application form). Change the application title to your name landscape, substituting your actual name for your name part.
4. Add a panel and place it just below the menu bar. The panel should take up most of the application form but leave the room to add tabs to the top of the panel (shapes on the left Dialogs Panel).
5. Add a tab bar to the top, left side of the panel (Shapes on the left Dialogs Tab bar). The tab bar should be above the panel and touching it. Change the names of the tabs to “Welcome”, “Information”, and “Customer List”. Right-click on the welcome tab and choose set active tab. The welcome tab should turn white to indicate that it is active.
6. Add the company title to the top of the panel. The company title should be “Your Name Landscapes”, substituting your actual name for your name. Add additional text, radio buttons, regular buttons, and images to make a nice first panel for your GUI. When you finish, it should look something like this screenshot, substituting your actual name for the your name placeholder.
7. Copy the Visio page by right-clicking on the page name at the bottom, left corner. Then, choose duplicate. On this new page, click on the information tab to select it and then right-click it and choose set active tab. The information tab should turn white to indicate that it is active. Now, delete the components that are on the panel company name. Be sure to leave the panel, tabs, menu, application title, and company name.
8. Click on the controls group on the shapes panel on the left side of Visio. Find the label, text box, and button shapes. Use these shapes to design your second tab page. Get the user’s name and address as well as the length and width of the yard. When you finish, your design should look something like the following.
9. We need another page in Visio. Right-click on the Page-2 page name at the bottom, left corner. Then, choose duplicate. On this new page, click on the customer list tab to select it and then right-click it and choose set active tab. The customer list tab should turn white to indicate that it is active. Now, delete the components that are on the panel that are not going to be used. Be sure to leave the panel, tabs, menu, application title, and company name.
10. Use the shapes in the controls group on the shapes panel on the left side of Visio to design your third tab page. Create a list on the left side with a title of customer list. Then, create a text area with a title of customer information on the right side. Put two buttons at the bottom called load list and delete customer. When you finish, your design should look something like the following.
11.
Course Project Deliverables for Week 1
· Complete the Module 1 Course Project deliverables and submit them in Canvas.
· Week 1 - Course Project - GUI Wireframe diagram
· Week 1 - Course Project - UML Class diagram
image1.png
image2.png
image3.png
image4.emf
Microsoft_Visio_Drawing.vsdx
Customer <<Stereotype>> parameter DataIO <<Stereotype>> parameter - customerID : int - name : String - address : String - yardType : String - length : double - width : double - totalCost : double + toString( ) : String + getDetails( ) : String - DATABASE_NAME : String - CONNECTION_STRING : String - USER_NAME : String - PASSWORD : String + add( cust : Customer ) : void + delete( customerID : int ) : void + getList( ) : ArrayList<Customer>
