GUI Programming using Net Beans GUI construction We

GUI Programming using Net. Beans

GUI construction • We have previously talked about elements in a (simple) GUI – Frames, Panes and Dialogs – Text fields – Lists and Combo boxes – Check and Radio buttons • We now look more closely at how to use GUI controls in an application 2

GUI construction • In general, we have two options when constructing a GUI – Build it ”by hand” using Swing API – Use the Net. Beans GUI Builder • Using the GUI Builder is usually much easier than hand-coding the GUI – Does not give you complete control 3

GUI construction 4

GUI construction • If you wish to construct a GUI manually, you usually begin by creating a JFrame • A JFrame object is essentially an empty window, into which you can add containers for GUI controls • Typically, you will add a JPanel to the frame – the JPanel object will contain the actual GUI controls 5

GUI construction public static void main(String[] args) { JFrame the. Frame = new JFrame(); the. Frame. set. Bounds(200, 720, 450); the. Frame. set. Visible(true); JPanel the. Panel = new JPanel(); the. Frame. add(the. Panel); } 6

GUI construction • On the JPanel object, various layout strategies can be used – Flow layout – left to right – Border layout – groups into areas – Grid layout – groups into a grid • Border layout is default, and also most commonly used 7

More Layouts The following layout managers are supported by Java and Net. Beans – – Free Layout Null Layout Card Layout Grid. Bag Layout

Some Common Layouts

GUI construction • Using border layout, the panel is divided into five areas – Center – North – South – East – West 10

GUI construction • If a control is put into an area, it will expand to fill out the area • Good when resizing, but may look weird… • If you need a finer level of control, put a panel inside a panel… • …or maybe consider a different layout 11

GUI construction public static void main(String[] args) { JFrame the. Frame = new JFrame(); the. Frame. set. Bounds(200, 240, 150); the. Frame. set. Visible(true); JPanel the. Panel = new JPanel(); the. Panel. set. Layout(new Border. Layout()); the. Panel. add(new Button("Center"), Border. Layout. CENTER); the. Frame. add(the. Panel); } 12

Text field • Two common purposes: – Allow the user to enter data as text – Display text data to the user • A text field can be ”enabled” or ”disabled” – Enabled: Data can be entered – Disabled: Data can only be displayed • At some point we need to set or extract the text from the text field 13

Text field JFrame the. Frame = new JFrame(); the. Frame. set. Bounds(200, 300, 300); JPanel the. Panel = new JPanel(); the. Panel. set. Layout(new Border. Layout()); JText. Field the. Text. Field = new JText. Field(); the. Panel. add(the. Text. Field, Border. Layout. NORTH); the. Frame. add(the. Panel); the. Frame. set. Visible(true); 14

Text field 15

Text field • Enabling a text field the. Text. Field. set. Editable(true); • Disabling a text field the. Text. Field. set. Editable(false); • Setting the text in a text field the. Text. Field. set. Text("Greeting earthlings!"); • Getting the text from a text field String s = the. Text. Field. get. Text(); 16

List box / Combo box • A list (or combo) box enables the user to choose an option between many alternatives • List box: User can only choose between specified alternatives • Combo box: User can choose between specified alternatives, or specify choice manually (type it in) 17

List box / Combo box Object[] choices = {"One", "Two", "Three", "Four"}; JCombo. Box the. Box = new JCombo. Box(choices); the. Box. set. Editable(true); the. Panel. add(the. Box, Border. Layout. NORTH); 18

List box / Combo box (editable) 19

List box / Combo box • Enabling a Combo box the. Box. set. Editable(true); • Disabling a Combo box the. Box. set. Editable(false); • Setting the selection in a Combo box the. Box. set. Selected. Item(”Three"); • Getting the selection from a Combo box String s = (String)the. Box. get. Selected. Item(); 20

Check boxes • In some cases, the set of possible choices is limited to two options • Often a case of either/or, or perhaps on/off • A Check box can only be in two states; checked or unchecked • Nice fit for binary choices 21

Check boxes JCheck. Box the. BBox = new JCheck. Box("Bold"); JCheck. Box the. IBox = new JCheck. Box("Italic"); JCheck. Box the. UBox = new JCheck. Box("Underline"); the. Panel. add(the. BBox, Border. Layout. WEST); the. Panel. add(the. IBox, Border. Layout. NORTH); the. Panel. add(the. UBox, Border. Layout. EAST); 22

Check boxes 23

Check boxes • Enabling a Check box the. CBox. set. Enabled(true); • Disabling a Check box the. CBox. set. Enabled(false); • Setting the selection in a Check box the. CBox. set. Selected(is. Selected); • Getting the selection from a Check box boolean is. Selected = the. CBox. is. Selected(); 24

Radio buttons • If the number of choices is few, and they are mutually exclusive, use a group of Radio buttons • Only one button in a group of Radio buttons can be selected 25

Radio buttons JRadio. Button small = new JRadio. Button("Small"); JRadio. Button medium = new JRadio. Button("Medium"); JRadio. Button large = new JRadio. Button("Large"); Button. Group the. Group = new Button. Group(); the. Group. add(small); the. Group. add(medium); the. Group. add(large); 26

Radio buttons 27

Radio buttons • Enabling a Radio button the. RB. set. Enabled(true); • Disabling a Radio button the. RB. set. Enabled(false); • Setting the selection in a Radio button the. RB. set. Selected(is. Selected); • Getting the selection from a Radio button boolean is. Selected = the. RB. is. Selected(); 28

29

Designing the User Interface for a GUI Interface Various components in a GUI window

Designing the User Interface for a GUI Interface Component names are used to identify the components in the program, in the same way variable names are used Components and their names

The concept of events • On the inside (code), GUI code has a very different structure than ”usual” code • Usual code is driven by conditions and various control structures (if, while, …) • GUI code is driven by events 32

The concept of events • Execution of GUI code is much more unpredictable than for usual code • We cannot predict – or dictate – what the user does, so we must always handle any possible action the user can do • A user action related to the GUI is called an event 33

The concept of events 34

The concept of events • Almost all actions the user performs will ”trigger” an event for us to handle – Moving the mouse – Clicking on a button – Writing text in a text box – …. and so on • There are hundreds of possible events! 35

The concept of events • Fortunately, is it optional to respond to an event • We only need to do so, if we want any special action to happen • If that is the case, we must write an event handler for that particular event 36

Events and event source • Events: mouse movements, mouse clicks, and keystrokes, or by the operating system, such as a timer. • Java has pre-defined classes to represent different kinds of events. Each kind of event is defined as a class. – For example, Action. Event defines events such as pressing a button; Window. Event defines events such as closing or opening a window;

Writing Event Handlers Event handlers are written to control the GUI – After the windows are designed, event handlers are coded to respond to events when an action occurs, such as clicking a button – Event: an action that takes place within a program – Event handlers: a module that automatically executes when a specific event occurs

Writing Event Handlers How to write the event handler module Module Component. Name_Event. Name() The statements that appear here are executed when the event occurs. End Module //an event handler that closes a window Module exit. Button_Click() Close End Module