代写 GUI Java graph Learning Outcomes

Learning Outcomes
Task 1 – Creating a GUI Project
1
AST111103 Problem Solving with Programming Skills
Lab 6: Introduction to Java Graphical User Interface
 IdentifysimpleGUIcomponentssuchastextfields,buttonsandlabels
 Understand the programming logic of events implementations in GUI
 Click File > New Project in your NetBeans IDE, select Java under Categories and Java Application under Projects. Click Next.
 In the New Java Application window, name your project as Lab6_GUI and REMOVE the tick of Create Main Class option and click Finish.
© Copyright 2018, Prepared by Dr. Lau Ho Lam. All Rights Reserved

2
AST111103 Problem Solving with Programming Skills
 Check the project created under the Projects window on the right hand side. Make sure there is no java files under the Source Packages.
 Now, right-click Source Packages and choose New > JFrame Form.
 Name the JFrame form as frmGreeting. Click Finish.
© Copyright 2018, Prepared by Dr. Lau Ho Lam. All Rights Reserved

Task 2 Adding GUI Components
3
AST111103 Problem Solving with Programming Skills
 You will see the Design view of a blank JFrame in the main panel and a list of GUI components (called Swing Controls) on the right.
 Source and Design views are most frequently used when we build GUI application in NetBeans.
 When we design our user interface, we use the Design pane and simply drag and drop GUI components
from the right hand side panel to our JFrame and arrange them in good order.
 When we need to add coding to the project, we simply click Source to go to the coding pages.
© Copyright 2018, Prepared by Dr. Lau Ho Lam. All Rights Reserved

Add your own Label and Text Field
 This is your turn now, add the GUI components as indicated by the figure below and set the correct properties.
 Run your program and you will see the result of your GUI program.
 Feel free to explore other components or properties by adding them to your JFrame.
4
AST111103 Problem Solving with Programming Skills
 Resize your JFrame by dragging at the corner with your mouse, do not make it too small as we are going to add several components
on it.
 Drag a Label to the JFrame. Put your label at the top of JFrame. While your label is still selected, set the “text” property of this label as “My First GUI Application” at the lower right panel of your NetBeans IDE. You are also free to customize its font or foreground properties.
© Copyright 2018, Prepared by Dr. Lau Ho Lam. All Rights Reserved

Task 3 Add Codes to Make the GUI Application Lives
Beware of the Variable Names of the Components
 Every GUI components have its own variable names, these names are very important in coding, if we call a wrong name, the applications may not work properly.
 Variable name does NOT equal to the text property, you may check the variable name of the component by in Design view by checking the Navigator at the lower left panel of NetBeans:
 For example, in the above figure, when we select the text field, its variable name jTextField2 is highlighted in the Navigator.
5
AST111103 Problem Solving with Programming Skills
 Well done! You have finished the “Design” of your first GUI application. However, the application is not fully functioned, there is no responses when we click on the “Say Hello” button.
 Double-click the “Say Hello” Button and the IDE will take you to the code section. Find the method called jButton1ActionPerformed, we will write the code inside this method.
 Type the following code in the jButton1ActionPerformed method:
© Copyright 2018, Prepared by Dr. Lau Ho Lam. All Rights Reserved

 This step is critical for us to understand how program code works and very helpful in debugging too.
 In the example code in this lab, there are three components involved: jButton1, jTextField1 and jTextField2, can you identify which components are they in Design view? Can you guess what the code .getText() and .setText() mean?
Task 4 Exercise – Make a Wish!
6
AST111103 Problem Solving with Programming Skills
 Write a program called Lab6_MakeAWish that allow the user to input his/her name and wish. When they click on the “Make a wish” button, display a combined message that wish his/her dream come true.
 You are free to customize your GUI (such as foreground, fonts,…), the figure below is a reference for you:
 Remember that the two phases of making a GUI application in this lab: 1) Drag and Drop the components, 2) add the code.
 Study the lab material this week and complete your Make a Wish application.
 An example of screenshot of the application is shown in the figure below:
© Copyright 2018, Prepared by Dr. Lau Ho Lam. All Rights Reserved

Related Posts