GUI programming

GUI PROGRAMMING

A REVIEW

NET BEANS IDE It is used to create java applications using the efficient GUI

builder.

IDE is an acronym for Integrated Development Environment which is a work environment that integrates all tools necessary for Application Development and makes them available as part of one environment.

GUI is an acronym for Graphical User Interface which is an interface that allows us to interact with the various components through visual elements including pictures, graphical icons, symbols and visual indicators

COMPONENTS OF NET BEANS COMPONEN

TS

TITLE BAR MENU BAR TOOL BAR GUI BUILDER PALATTE INSPECTOR

WINDOWPROPERTIES

WINDOWCODE

EDITOR WINDOW

It is an area to place components on the form visually. There are two views of the GUI builder- the Design View and the Source View.

It contains controls or components used to create GUI applications.

It is used to display hierarchical relationship among all the controls placed on the current form.

It is used to view/edit properties ofcurrently selected control on the form.

It is the area where we write code.

PROJECT WINDOW

INSPECTOR WINDOW

PALATTE

PROPERTIES WINDOW

DESIGN AREA

NET BEANS GUI INTERFACE

PROJECT, FORM AND COMPONENTS Each application is

treated as a Project in NetBeans.

Each project can have one or multiple forms.

Each form can have one or more components.

PROJECTFORM1

COMPONENTS

FORM3

COMPONENTS

FORM4

COMPONENTS

FORM2

COMPONENTS

COMPONENTS/CONTROLS CONTROLS

PARENT/CONTAINER CONTROL

CHILD CONTROL

They act as background for other controls. For eg. Frame. When we delete/move a parent control, all its child controls get deleted/moved.

Controls placed inside a container control are called child control. For eg. Button, text field, label etc.

Some of these components may be visible and some invisible. The visible components are all shown under the Frame Component and the non-visible components are part of Other components in the Inspectors window.

DESIGNING AN APPLICATION1. Create a new project.2. Add a new jFrame form.3. Add the components on this

jFrame .4. Associate the code with the

component by double clicking the component.

5. Add the source code.6. Test the form by pressing

shift+F6.

STEP 1

STEP 2

DESIGNING AN APPLICATION Contd… OBJECTS

PROPERTIES METHODS

GETTERS SETTERS

EVENTS

Properties specify the appearance of an object on the form. For eg. Font, background etc.

These methods extract some information from the object and return it to the program. They start with the word get. For eg. getText(), isEditable() etc.

These methods set some properties of the object so that the object's appearance changes. They start with the word set. For eg. setText(), setForground(), etc.

These are the actions performed on controls. For eg.mouseClick, keyPressed etc. When the user performs any action on a control, an event happens and that event invokes the corresponding partof the code and the application behaves accordingly.

All the components including jFrame are considered as objects in java.

Each object has some properties, methods, and events associated with it.

CREATING A PROJECTTo create a new application project called “Students":

1. Choose File > New Project. Alternately, click the New Project icon in the toolbar.

2. From the Categories pane select Java and in the Projects pane, choose Java Application. Click Next.3. Enter a name (in this case students) in the Project Name field and specify the project location by clicking on the Browse button. By default the project is saved in the NetBeans Projects folder in My Documents.4. Ensure that the Set as Main Project checkbox is selected and clear the Create Main Class field.5. Click Finish.

JFRAME FORM Forms are used to accept data (input) from users and respond to actions like clicking on a button.

ADDING FRAME: To create a JFrame Form container:

1. In the Projects window, right-click the Book node and choose New > Jframe Form.2. Enter Form Example 1 as the Class Name. This will be the name of your form.3. Enter Book as the package. This should be the name given while creating the Project.4. Click Finish

OPTION PANEOption Pane is used when we want to request information from the user, display information to the user or a combination of both. It requires the following import statement at the top of the program.

import javax.swing.JOptionPane;OR

import javax.swing.*;

METHOD DESCRIPTION EXAMPLEshowMessageDialog()

Shows a one-button, modal dialog box that gives the user some information.

JOptionPane.showMessageDialog(this,“Lets learn Java”);

showConfirmDialog()

Shows a three-button modal dialog that asks the user a question. User can respond by pressing any of the suitable buttons.

Confirm=JOptionPane.showConfirmDialog(null,"quit?")

showInputDialog() Shows a modal dialog that prompts the user for input. It prompts the user with a text box in which the user can enter the relevant input.

name=JOptionPane.showInputDialog(this,“ENTER ROLL NUMBER:");

Steps for developing a Simple applicationStep 1: Create a new ProjectStep 2: Add a JFrame formStep 3: Add the desired component from the Palette window using drag and drop featureStep 4: Associate code with the component by double clicking the component.Step 5: Add the source code.Step 6: Test the form by pressing Shift+F6.

DEVELOPING A SIMPLE APPLICATION

BUTTON CONTROLA button is a component that the user presses or pushes to trigger a specific action. When the user clicks on the button at runtime, the code associated with the click action gets executed.PROPERTY DESCRIPTION

BACKGROUND Sets background colorFOREGROUND Sets foreground colorFONT Sets font of text on

buttonTEXT Sets the text displayed

on buttonMETHODS DESCRIPTION EXAMPLEsetEnabled()

Enables/disables the button

JButton1.setEnabled(false); jbutton1.setEnabled(true);

setVisible() Visible/invisible the button

JButton1.setVisible(false); jbutton1.setVisible(true);

BUTTON CONTROL AND JOPTION PANE EXAMPLE

LABEL CONTROLLabel provides text instructions or information. It displays a single line of read-only text, an image or both text and image.PROPERTY DESCRIPTIONBACKGROUND Sets background colorFOREGROUND Sets foreground colorFONT Sets font of text on

buttonTEXT Sets the text displayed

on buttonMETHODS

DESCRIPTION EXAMPLE

isEnabled()

Returns true if label is enabled else false

Boolean b= jLabel1.isEnabled();

setVisible()

Visible/invisible the button jLabel1.setVisible(false); jLabel1.setVisible(true);

setText() Sets the text on label at run time JLable1.setText(“Enter name”);

LABEL AND BUTTON CONTROL EXAMPLE

private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) { jLabel1.setForeground(Color.red); } private void jButton2ActionPerformed(java.awt.event.ActionEvent evt) { jLabel1.setForeground(Color.green); } private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) { jLabel1.setForeground(Color.blue); }

Q. WAP to create a form having a label and three buttons. If the red button is pressed the text in the label should change to red colour and so on.

TEXT FIELD CONTROLText Field allows editing/displaying of a single line of text. For eg. Name, Phone number etc.

PROPERTY DESCRIPTIONBACKGROUND Sets background colorFOREGROUND Sets foreground colorFONT Sets font of text on buttonTEXT Sets the text displayed on

button

METHODS DESCRIPTION EXAMPLEisEnabled() Returns true if text field is enabled else false boolean b= jTextfield1.isEnabled(); setVisible() Visible/invisible the button jTextfield1.setVisible(false); setText() Sets the text on text field at run time jTextfield1.setText(“WELCOME”);getText() Gets the text from the text field string str = jTextfield1.getText();isEditable() Returns true if the component is editable

else false.boolean b= jTextfield1.isEditable();

setEditable()

true if text in the text field is editable else false.

JTextfield1.setEditable(true);

LABEL AND TEXT FIELD CONTROL EXAMPLE

PASSWORD CONTROLIt is used to enter confidential input like passwords which are single line. It suppress the display of input and each character entered can be replaced by an echo character. By default, the echo character is the asterisk, *.

PROPERTY DESCRIPTION

BACKGROUND Sets background colorFOREGROUND Sets foreground colorFONT Sets font of text on buttonTEXT Sets the text displayed on

buttonechoChar Sets the character that will

be displayed instead of text.

PASSWORD CONTROL EXAMPLE

RADIO BUTTON CONTROLRadio button is used when user has to select one option out of many mutually exclusive options given. For eg. Gender(male or female), PROPERTY

DESCRIPTION

buttonGroup

Specifies the name of the group of button to which the jRadioButton belongs.

Selected Sets the button as selected, if set to true, default is false.

METHODS DESCRIPTION EXAMPLEisSelected()

Returns true if radio button is checked else false

boolean b= jRadiobutton1.isSelected();

setSelected()

Checks(true) or unchecks the radio button.

jRadiobutton1.setSelected(false);

setText() Sets the text on radio button at run time jRadiobutton1.setText(“WELCOME”);

RADIO BUTTON CONTROL EXAMPLE

TEXT AREA CONTROLText area allows editing/displaying of a multi line text. It automatically adds vertical or horizontal scroll bars as and when required during run time. For eg. Comments, address etc.

PROPERTY DESCRIPTIONlineWrap Indicates whether line of text should wrap in case it

exceeds allocated width.(Default is false)wrapStyleWord

Sends word to next line in case lineWrap is true else it results in breaking of a word, when lines are wrapped.

rows/columns Sets number of rows/columns preferred for display.text Sets the text displayed on button

METHODS DESCRIPTION EXAMPLEisEnabled() Returns true if text field is enabled else false boolean b= jTextarea1.isEnabled(); setText() Sets the text on text field at run time jTextarea1.setText(“WELCOME”);getText() Gets the text from the text field string str = jTextarea1.getText();isEditable() Returns true if the component is editable else

false.boolean b= jTextarea1.isEditable();

append() Adds text at the end JTextarea1.append(“we are studying JAVA”);

CHECK BOX CONTROLCheck box is used when multiple options are given to the user and the user can select zero or more out of the given options.PROPERTY

DESCRIPTION

buttonGroup

Specifies the name of the group of button to which the check box belongs.

Selected Sets the check box as selected, if set to true, default is false.

METHODS DESCRIPTION EXAMPLEisSelected()

Returns true if check box is checked else false

boolean b= jCheckbox1.isSelected();

setSelected()

Checks(true) or unchecks the check box.

jCheckbox1.setSelected(false);

setText() Sets the text on check box at run time jCheckbox1.setText(“WELCOME”);

CHECK BOX AND TEXT AREA CONTROL EXAMPLE

LIST CONTROL A list is a scrollable set of

items, used to get one or more options out of several given options which may or may not be mutually exclusive.

Lists are preferred over checkboxes when there are large number of options.

In such case using Check Boxes may take up a lot of space on the form and it may also be inconvenient for the user to select the desired options.

LIST CONTROL Contd…….PROPERTY DESCRIPTIONmodel Contains the values to be displayed in the list.selectedIndex Contains the index value of selected option of the control.SelectionMode Describes the mode for selecting values.

- SINGLE (List box allows single selection only)- SINGLE_INTERVAL (List box allows single continuousselection of options using shift key of keyboard)- MULTIPLE_INTERVAL (List box allows multipleselections of options using ctrl key of keyboard)

METHODS DESCRIPTION EXAMPLEgetSelectedValue()

Returns the selected value when only a single item is selected, if multiple items are selected then returns first selected value. Returns null in case no item selected.

jList1.getSelectedValue();

isSelectedIndex()

Returns true if specified index is selected.

Boolean b= jList1.isSelectedindex();

LIST CONTROL EXAMPLE

private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) { jTextField1.setText(" "+jList1.getSelectedValue());

jTextField2.setText(" "+jList1.getSelectedIndex());

}

Q WAP to create the following form. On click of the button the index number and river name selected from the list should be displayed in the respective text fields.

NOTE: The index numbers start from zero.

COMBO BOX CONTROL A combo box is a drop down box

of items, used to get one option out of several given mutually exclusive options.

Combo box are preferred over radio button when there are large number of options.

In such case using radio buttons

may take up a lot of space on the form and it may also be inconvenient for the user to select the desired options.

COMBO BOX CONTROL Contd…….

PROPERTY DESCRIPTIONmodel Contains the values to be displayed.selectedIndex/selectedItem

Contains the index value/selected item of selected option of the control.

METHODS DESCRIPTION EXAMPLEgetSelectedItem()

Returns the selected value. jCombobox1.getSelectedItem();

getSelectedIndex()

Returns the selected index Boolean b= jCombobox1.getSelectedindex();

setModel() Sets the data model that the combo box uses to get its list of elements.

jCombobox1.setModel(ComboBoxModel aModel);

COMBO BOX CONTROL EXAMPLE

private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) { jTextField1.setText(""+jComboBox1.getSelectedItem()); }

Q WAP to create the following form. On click of the button river selected from the combo box should be displayed in the text field.

CODEOUTPUT SCREEN