NetBeans & GUI Development

ninetimesdissemblingΛογισμικό & κατασκευή λογ/κού

10 Νοε 2012 (πριν από 4 χρόνια και 9 μήνες)

203 εμφανίσεις

(11.2.05)

1

Create a new package:
SampleGUI


See:

Using NetBeans IDE 4.1


See: GUI Building in NetBeans IDE 4.1


http://www.netbeans.org/kb/41/form_getstart.html


Set up for GUI Development


Open Netbeans project where you want to place package: SampleGUI


Right click on project name: ExamplesNB


File> New Project
(upper tool bar)


Categories
:
Choose:

Java GUI Forms


File Types
: Choose: JFrame form


Next


Class Name : GetStarted


Package: SampleGUI


Finish


(11.2.05)

2

Create a New GUI Package: SampleGUI:


Right click

on project name: SampleGUI


Select:
New

>
Next > Java Class


Select: New Java Class Panel
(figure)


Class name: CreateForm


Do not enter any more information in this pane
(figure)


> Finish










(11.2.05)

3

NetBeans Design Panel

(11.2.05)

4


Windows in the NetBeans Design Panel


Navigator: Files, Projects, Runtime (tabs)



Inspector



Workspace



Palette


Swing widgets








(11.2.05)

5

Create GUI Controller for 7210 Simulator




Goal


Duplicate the GUI shown in figure
1








Figure 1

(11.2.05)

6

STEP 1: Identify components



Figure 2

JFrame
JLabel
JButton
JButton
JRadioButton
JRadioButton
JComboBox
JLabel
JLabel
JButton
(11.2.05)

7

STEP 2: Add high level container




Add JPanel


Select JPanel from Swing Palette


Click JPanel


Click in workspace


In Inspector panel, see addition of
BorderLayout to JFrame &
JPanel


See figure 3








Figure 2

Figure 3

(11.2.05)

8

STEP 3.1: Define container size




Modify JPanel


Compare sizes of original GUI with
the new GUI


Change preferred size of JPanel until
reach desired size


Select JPanel component from
Inspector


Right click


Select Properties


Modify ‘preferred size’ property


See figure 4







Figure 2

Figure 4

(11.2.05)

9

STEP 3.2: Approximate container size




Modify JPanel size:


First trial: 150x300


See figure 5







Figure 5

(11.2.05)

10

STEP 3.3: Approximate container size




Modify JPanel size:


Second trial: 150x250


See figure 6







Figure 6

(11.2.05)

11

STEP 3.4: Approximate container size




Modify JPanel size:


After several trials: 147x242


See figure 7







Figure 7

(11.2.05)

12

STEP 4.1: Add other components


JLabel




Add JLabel


Select JLabel from Swing Palette


Click JLabel


Click in workspace (JPanel area)


See figure 8







Figure 8

(11.2.05)

13

STEP 4.2: Modify JLabel properties




Select JLabel from Inspector


Click JLabel


Right
-
click on it


Edit ‘Text’ property to ‘Simulation
Time: 000000’


Edit ‘Font’ property to ‘Arial


Bold
-

12’


See figure 9


Edit ‘Foreground color’ to white
color


Edit ‘Background color’ to Black
color


Select JPanel from Inspector


Edit ‘Background color’ to Black
color


See figure 10



Figure 10

Figure 9

(11.2.05)

14

STEP 5.1: Add other components


JButton




Select JButton from Inspector


Click JButton


Right
-
click on it


Edit ‘Text’ property to ‘Start’


Edit ‘Font’ property to ‘Arial


Bold
-

12’


Edit ‘Foreground color’ to black
color


Edit ‘Background color’ to Green
color


See figure 11


Edit preferred size from 61X23 to
120x30


See figure 12

Figure 12

Figure 11

(11.2.05)

15

STEP 5.2: Adjust properties


JButton




Keep editing JButton ‘preferred size’
property


Edit preferred size from 120x30
to 135x30


See figure 13


Edit Border… try them all …


Edit focus painted property…


See figure 14


Edit preferred size from 135x30
to 139x30

Figure 14

Figure 13

(11.2.05)

16

STEP 5.3: Refine properties


JButton




Keep editing JButton ‘preferred size’
property


Edit preferred size from 135x30
to 139x30


See figure 15

Figure 15

(11.2.05)

17

STEP 6.1: Add other components


JButton2




Select JButton from Inspector


Click JButton


Right
-
click on it


Edit ‘Text’ property to ‘Pause’


Edit ‘Font’ property to ‘Arial


Bold
-

12’


Edit ‘Foreground color’ to black
color


Edit ‘Background color’ to Yellow
color


Edit preferred size from 61X23 to
139x30


Edit Border… try them all …


Edit focus painted property…


Edit border painted property…


See figure 17


Figure 17

Figure 16

(11.2.05)

18

STEP 7.1: Add other components


JRadioButton1




Select JRadioButton from Swing
Palette


Click JRadioButton


Click in workspace (JPanel area)


See figure 18


Modify properties


In the inspector window, select
JRadioButton1


Right
-
click on it


Edit ‘Text’ property to ‘Real Time’


Edit ‘Font’ property to ‘Arial


Bold
-

12’


Edit ‘Foreground color’ to grey
color


Edit ‘Background color’ to blue


Edit preferred size from 93X23 to
139x30 (same as other buttons)


See figure 19


Figure 19

Figure 18

(11.2.05)

19

STEP 8.1: Add other components


JRadioButton2




Select JRadioButton1 from inspector
window


Right
-
click on it


Select Copy


Select JPanel1


Right
-
click on it


Select Paste


See figure 20


Modify properties


In the inspector window, select
JRadioButton2


Right
-
click on it


Edit ‘Text’ property to ‘Fast Time’


See figure 21

Figure 21

Figure 20

(11.2.05)

20

STEP 9.1: Add other components


JLabel2: “Speed factor”




Select JLabel1 from inspector window


Right
-
click on it


Select Copy


Select JPanel1


Right
-
click on it


Select Paste


See figure 22


Modify properties


In the inspector window, select
JLabel2


Right
-
click on it


Edit ‘Text’ property to ‘Speed
Factor’


Edit Size property to something
“smaller”, say 80,25


See figure 23

Figure 23

Figure 22

(11.2.05)

21

STEP 10.1: Add other components


JComboBox1



Figure 25

Figure 24


Select JComboBox from Swing
Palette


Click JComboBox


Click in workspace (JPanel area)


See figure 24


Modify properties


In the inspector window, select
JComboBox


Right
-
click on it


Edit ‘Model’ property (*)


Edit ‘Font’ property to ‘Arial


Bold
-

12’


Edit preferred size to 50x25 (it
has to feet in the same row)


See figure 25


(11.2.05)

22

STEP 10.2: Refine properties


JComboBox1



Figure 26


Modify properties


Edit ‘Selected Index’ property, to
‘3’


See figure 26


(11.2.05)

23

STEP 11.1: Add other components


JLabel3: “Status”




Select JLabel1 from inspector window


Right
-
click on it


Select Copy


Select JPanel1


Right
-
click on it


Select Paste


See figure 27


Modify properties


In the inspector window, select
JLabel2


Right
-
click on it


Edit ‘Text’ property to ‘Status:
Paused’


Edit Foreground color to ‘Yellow’


See figure 28

Figure 28

Figure 27

(11.2.05)

24

STEP 12.1: Add other components


JButton3: “Stop”




Select JButton2 from inspector
window


Right
-
click on it


Select Copy


Select JPanel1


Right
-
click on it


Select Paste


See figure 29


Modify properties


In the inspector window, select
JButton3


Right
-
click on it


Edit ‘Text’ property to ‘Stop’


Edit Background color to ‘Red’


See figure 30

Figure 30

Figure 29

(11.2.05)

25

STEP 13.1: Change JPanel layout




Select JPanel1 from inspector window


Right
-
click on it


Select Layout


Select Gridbaglayout


See figure 31


Adjust location components


Select JPanel1 from inspector
window


Right
-
click on it


Select ‘Customize Layout’


See figure 32

Figure 32

Figure 31