lesson 5 gui programming aubg icoscis team assoc prof stoyan bonev n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Lesson 5 GUI Programming AUBG ICoSCIS Team Assoc. Prof. Stoyan Bonev PowerPoint Presentation
Download Presentation
Lesson 5 GUI Programming AUBG ICoSCIS Team Assoc. Prof. Stoyan Bonev

Loading in 2 Seconds...

play fullscreen
1 / 81

Lesson 5 GUI Programming AUBG ICoSCIS Team Assoc. Prof. Stoyan Bonev - PowerPoint PPT Presentation


  • 94 Views
  • Uploaded on

Lesson 5 GUI Programming AUBG ICoSCIS Team Assoc. Prof. Stoyan Bonev. Lesson 5 GUI Programming AUBG ICoSCIS Team Assoc. Prof. Stoyan Bonev. March, 23 - 24, 2013 SWU, Blagoevgrad. Lesson Contents:. Building Win apps technologies using Java & class libraries

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Lesson 5 GUI Programming AUBG ICoSCIS Team Assoc. Prof. Stoyan Bonev' - mika


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
lesson 5 gui programming aubg icoscis team assoc prof stoyan bonev1

Lesson 5GUI ProgrammingAUBG ICoSCIS TeamAssoc. Prof. Stoyan Bonev

March, 23 - 24, 2013 SWU, Blagoevgrad

lesson contents
Lesson Contents:
  • Building Win apps technologies using Java & class libraries
    • Swing
    • AWT (Abstract Windows Toolkit)
java gui programming
Java GUI programming

Java GUI programming has its own specific:

Terminology

Concept

Philosophy

Ideology

Technologies:

Hand-made programming (project:Java, Java application)

Visual, component programming (project:Java, Java Desktop application)

4

terminology
Terminology

Java Microsoft

Frame Form

Panel

Palette Toolbox

5

concept philosophy ideology
Concept, Philosophy, Ideology

Based on class libraries, grouped in packages

When Java was introduced, GUI classes bundled in AWT library

The AWT UI components were replaced by a more robust and flexible library, known as Swing components.

To distinguish Swing components to their AWT counterparts, the Swing GUI components are named with a prefixed J.

6

the java gui api 3 groups of classes
The Java GUI API – 3 groups of classes

Component classes – used for creating UI

JButton, JLabel, JTextField, …

Container classes – used to contain other components

JFrame, JPanel, JApplet

Helper classes – used to support GUI components.

Graphics, Color, Font, FontMetrics, Dimension

7

frames
Frames
  • To create a UI, you need a container, i.e. a frame.
  • Frame is a window that is not contained inside another window. Frame is the basis to contain other user interface components in Java GUI applications.
  • The JFrame class can be used to create windows.
  • For Swing GUI programs, use JFrame class to create windows.
frames1
Frames

import javax.swing.*;

public class MyFrame {

public static void main(String[] args) {

JFrame frame = new JFrame("Test Frame");

frame.setSize(400, 300);

frame.setVisible(true);

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

}

}

frames to create empty frame
Frames – To create empty frame
  • Practice: Recommended IDE: NetBeans
  • Create your own project: sbJavaWinEmptyForm
    • Hand-made programming (project:Java, Java application)
  • Type import javax.swing.*;
  • Type stmt within main() method to create a frame

JFrame mySBForm = new JFrame("Empty Form");

  • Run the project
    • No frame appears on the screen
frames to create empty frame1
Frames – To create empty frame
  • Frame not visible if method setVisible() not invoked
  • Add one more stmt

mySBForm.setVisible(true);

  • Do you see the form? Look at the top left corner of the screen
frames to create empty frame2
Frames – To create empty frame
  • Frame may move to the center of the screen using method setLocationRelativeTo()
  • Add one more stmt

mySBForm.setLocationRelativeTo(null);

  • Do you see the form? Look at the screen center
frames to create empty frame3
Frames – To create empty frame
  • Frame sized to display just the title bar if method setSize() not used
  • Add one more stmt

mySBForm.setSize(900, 300); // dimensions in pixels

  • Do you see the effect of the change?
  • Hint: setSize() to invoke before invoking setLocationRelativeTo()
frames to create empty frame4
Frames – To create empty frame
  • How to tell the program to terminate when the frame gets closed?
  • Add one more stmt

mySBForm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

  • If this stmt is not used, the program does not terminate when the frame is closed
adding components to a frame
Adding components to a frame
  • Modify the frame constructor argument

JFrame mySBForm = new JFrame("Empty Form");

To

JFrame mySBForm = new JFrame(“My frame with Components");

adding components to a frame1
Adding components to a frame
  • To add a component, we must :
    • Create a component
    • Add it to the frame (to the content pane of the frame)
  • This may happen in
  • Two steps
    • JLabel myLabel1 = new Jlabel(“This is not Empty Frame”);
    • mySBForm.add(myLabel1);
  • Or in one step creating anonymous component
    • mySBForm.add(new JLabel(“This is not Empty Frame”));
removing components from a frame
Removing components from a frame
  • To remove a component, we must use method remove():
    • mySBForm.remove(myLabel1);
  • Can we remove anonymous component?
adding two or more components to a frame
Adding two or more components to a frame
  • To add more than one component, we must :
    • JLabel myLabel1 = new Jlabel(“This is not Empty Frame”);
    • mySBForm.add(myLabel1);
    • JLabel myLabel2 = new Jlabel(“This is Frame with components”);
    • mySBForm.add(myLabel2);
    • //JButton myBtn1 = new JButton(“My Button”);
    • //mySBForm.add(myBtn1);
  • Do you see more than one component on the screen?
  • No.
  • What’s the problem?
adding two or more components to a frame1
Adding two or more components to a frame
  • This is because components are put in the frame by the content pane’s layout manager and the default layout manager if not specified explicitly, allocates all the frame to the current component replacing/substituting the previous component if there is any.
  • It’s time to introduce several different layout managers to place components in the desired locations
frames to create empty frame5
Frames – To create empty frame
  • Practice: Recommended IDE: NetBeans
  • Create your own project: sbJavaWinEmptyForm
    • Visual, component programming (project:Java, Java Desktop application)
  • Use the toolbox facility to configure your project
  • Run the project
layout managers
Layout Managers
  • For more details open file
  • LayoutManagersAndMore.ppt
load file dialogs
JFileChooser chooser = new JFileChooser();chooser.setDialogTitle("Load which file?");

int result = chooser.showOpenDialog(enclosingJFrame);if (result != JFileChooser.APPROVE_OPTION) { File file = chooser.getSelectedFile(); // use file}

You could also test for CANCEL_OPTION orERROR_OPTION

You will get back a File object; to use it, you must know how to do file I/O!

Load file dialogs

Assoc. Prof. Stoyan Bonev

save file dialogs
JFileChooser chooser = new JFileChooser();chooser.setDialogTitle(“Save file as?");

int result = chooser.showSaveDialog(enclosingJFrame);if (result != JFileChooser.APPROVE_OPTION) { File file = chooser.getSelectedFile(); // use file}

You could also test for CANCEL_OPTION orERROR_OPTION

You will get back a File object; to use it, you must know how to do file I/O!

Save file dialogs

Assoc. Prof. Stoyan Bonev

motivations
Motivations

To build Windows application you need a frame (with title bar and content pane) structured to contain components/controls such as

buttons,

labels,

text fields,

check boxes,

radio buttons,

combo boxes, and others.

See next slide for illustration

creating gui objects
Creating GUI Objects

Radio Button

Label

Text field

Check Box

// Create a button with text OK

JButton jbtOK = new JButton("OK");

Button

Combo Box

creating gui objects1
Creating GUI Objects

Radio Button

Label

Text field

Check Box

// Create a label with text "Enter your name: "

JLabel jlblName = new JLabel("Enter your name: ");

Button

Combo Box

creating gui objects2
Creating GUI Objects

Radio Button

Label

Text field

Check Box

// Create a text field with text "Type Name Here"

JTextField jtfName = new JTextField("Type Name Here");

Button

Combo Box

creating gui objects3
Creating GUI Objects

Radio Button

Label

Text field

Check Box

// Create a check box with text bold

JCheckBox jchkBold = new JCheckBox("Bold");

Button

Combo Box

creating gui objects4
Creating GUI Objects

Radio Button

Label

Text field

Check Box

// Create a radio button with text red

JRadioButton jrbRed = new JRadioButton("Red");

Button

Combo Box

creating gui objects5
Creating GUI Objects

Radio Button

Label

Text field

Check Box

// Create a combo box with choices red, green, and blue

JComboBox jcboColor =

new JComboBox(new String[]{"Red", "Green", "Blue"});

Button

Combo Box

creating gui objects6
Creating GUI Objects

Radio Button

Label

Text field

Check Box

// Create a button with text OK

JButton jbtOK = new JButton("OK");

// Create a label with text "Enter your name: "

JLabel jlblName = new JLabel("Enter your name: ");

// Create a text field with text "Type Name Here"

JTextField jtfName = new JTextField("Type Name Here");

// Create a check box with text bold

JCheckBox jchkBold = new JCheckBox("Bold");

// Create a radio button with text red

JRadioButton jrbRed = new JRadioButton("Red");

// Create a combo box with choices red, green, and blue

JComboBox jcboColor = new JComboBox(new String[]{"Red", "Green", "Blue"});

Button

Combo Box

swing vs awt
Swing vs. AWT

Swing class library

OR

AWT class library

(Abstract Windows Toolkit)

swing vs awt1
Swing vs. AWT

So why do the GUI component classes have a prefix J? Instead of JButton, why not name it simply Button? In fact, there is a class already named Button in the java.awt package.

When Java was introduced, the GUI classes were bundled in a library known as the Abstract Windows Toolkit (AWT).For every platform on which Java runs, the AWT components are automatically mapped to the platform-specific components through their respective agents, known as peers. AWT is fine for developing simple graphical user interfaces, but not for developing comprehensive GUI projects. Besides, AWT is prone to platform-specific bugs because its peer-based approach relies heavily on the underlying platform. With the release of Java 2, the AWT user-interface components were replaced by a more robust, versatile, and flexible library known as Swing components. Swing components are painted directly on canvases using Java code, except for components that are subclasses of java.awt.Window or java.awt.Panel, which must be drawn using native GUI on a specific platform. Swing components are less dependent on the target platform and use less of the native GUI resource. For this reason, Swing components that don’t rely on native GUI are referred to as lightweight components, and AWT components are referred to as heavyweight components.

the java gui api
The Java GUI API
  • The Java GUI API contains classes that may classify in three groups:
  • Component classes
    • Used to create interface
  • Container classes
    • Used to contain components
  • Helper classes
    • Used to support components
frames3
Frames
  • To create a user interface, you need to create a frame.
  • Frame is a window that is not contained inside another window. Frame is the basis to contain other user interface components in Java GUI applications.
  • The JFrame class can be used to create windows.
  • For Swing GUI programs, use JFrame class to create windows.
creating frames open file progpureframe java
Creating Frames(open file ProgPureFrame.java)
    • import javax.swing.*;
    • public class MyFrame {
    • public static void main(String[] args) {
    • JFrame frame = new JFrame("Test Frame");
    • frame.setSize(400,300);
    • frame.setLocationRelativeTo(null);
    • frame.setDefaultCloseOperation(
    • JFrame.EXIT_ON_CLOSE);
    • frame.setVisible(true);
    • }
  • }
adding components into a frame
Adding Components into a Frame

// Add a button into the frame

frame.getContentPane().add(

new JButton("OK"));

Title bar

Content pane

content pane delegation in jdk 1 5
Content Pane Delegation in JDK 1.5

// Add a button into the frame

frame.getContentPane().add(

new JButton("OK"));

Title bar

// Add a button into the frame

frame.add( new JButton("OK") );

Content pane

jframe class
JFrame Class

Demo: Open file ProgFrameAndControls.java

demo different source text structure same functionality
Demo – different source text structure – same functionality
  • Open file ProgFrameAndControls.java
  • Open file ProgFrameAndControlsStyleStandard.java
  • Open file ProgFrameAndControlsStyleRecommended.java
  • Open file ProgFrameAndControlsStyleSeparateClasses.java
slide48
Demo
  • Open file ProgFrameAndControls.java
  • You cannot visualize more than one component.
  • Each new component replaces the previous one
  • The component occupies all the frame space
  • How to proceed with more components?
  • You need a layout manager to associate with the container using method setLayout() in

context <container>.setLayout(<arg>);

layout managers1
Layout Managers
  • Java’s layout managers provide a level of abstraction to automatically map your user interface on all window systems.
  • The UI components are placed in containers. Each container has a layout manager to arrange the UI components within the container.
  • Layout managers are set in containers using the setLayout(LayoutManager) method in a container.
kinds of layout managers
Kinds of Layout Managers
  • FlowLayout
  • GridLayout
  • BorderLayout
  • Several other layout managers will be introduced in Chapter 33, “Containers, Layout Managers, and Borders”
flowlayout example
FlowLayout Example
  • The simplest layout manager.
  • Components arranged from left to right row by row in the order in which they were added.
  • Possible alignment control
  • Demo: file ProgFrameAndLayout.java
netbeans functionality introduction to gui building
NetBeans – functionality Introduction to GUI Building
  • Contents
  • Exercise 1: Creating a Project
  • Exercise 2: Building the Front End
  • Exercise 3: Adding Functionality
  • Exercise 4: Running the Program
  • How Event Handling Works
exercises tasks
Exercises/Tasks
  • Try to run ProgFrameAndLayout.java program
flowlayout example1
FlowLayout Example
  • Run the ProgFrameAndLayout.java program as it is set without layout manager:

// with and/or without layout manager

// frame.setLayout(new FlowLayout(FlowLayout.LEFT,10,20));

// frame.setLayout(new GridLayout( 3, 2, 10, 15));

// frame.setLayout(new BorderLayout( 10, 20));

flowlayout example2
FlowLayout Example
  • Run the ProgFrameAndLayout.java program as it is set with FlowLayout layout manager:

// with and/or without layout manager

frame.setLayout(new FlowLayout(FlowLayout.LEFT,10,20));

// frame.setLayout(new GridLayout( 3, 2, 10, 15));

// frame.setLayout(new BorderLayout( 10, 20));

flowlayout example3
FlowLayout Example

Write a program that adds three labels and text fields into the content pane of a frame with a FlowLayout manager.

gridlayout example
GridLayout Example
  • Components arranged in a grid (matrix) formation. from left to right row by row in the order in which they were added.
  • Demo: file ProgFrameAndLayout.java
gridlayout example1
GridLayout Example
  • Run the ProgFrameAndLayout.java program as it is set with GridLayout layout manager:

// with and/or without layout manager

// frame.setLayout(new FlowLayout(FlowLayout.LEFT,10,20));

frame.setLayout(new GridLayout( 3, 2, 10, 15));

// frame.setLayout(new BorderLayout( 10, 20));

gridlayout example2
GridLayout Example

Rewrite the program in the preceding example using a GridLayout manager instead of a FlowLayout manager to display the labels and text fields.

the borderlayout manager
The BorderLayout Manager

The BorderLayout manager divides the container into five areas: East, South, West, North, and Center. Components are added to a BorderLayout by using the add method.

add(Component, constraint), where constraint is BorderLayout.EAST, BorderLayout.SOUTH, BorderLayout.WEST, BorderLayout.NORTH, or BorderLayout.CENTER.

borderlayout example
BorderLayout Example
  • Run the ProgFrameAndLayout.java program as it is set with BorderLayout layout manager:

// with and/or without layout manager

// frame.setLayout(new FlowLayout(FlowLayout.LEFT,10,20));

// frame.setLayout(new GridLayout( 3, 2, 10, 15));

frame.setLayout(new BorderLayout( 10, 20));

// uncomment this text

frame.add(jbtOK1, BorderLayout.EAST);

frame.add(jbtOK2, BorderLayout.CENTER);

frame.add(jbtOK3, BorderLayout.WEST);

frame.add(jbtOK4, BorderLayout.NORTH);

frame.add(jbtOK5, BorderLayout.SOUTH);

the color class
The Color Class

You can set colors for GUI components by using the java.awt.Color class. Colors are made of red, green, and blue components, each of which is represented by a byte value that describes its intensity, ranging from 0 (darkest shade) to 255 (lightest shade). This is known as the RGB model.

Color c = new Color(r, g, b);

r, g, and b specify a color by its red, green, and blue components.

Example:

Color c = new Color(228, 100, 255);

standard colors
Standard Colors

Thirteen standard colors (black, blue, cyan, darkGray, gray, green, lightGray, magenta, orange, pink, red, white, yellow) are defined as constants in java.awt.Color.

The standard color names are constants, but they are named as variables with lowercase for the first word and uppercase for the first letters of subsequent words. Thus the color names violate the Java naming convention. Since JDK 1.4, you can also use the new constants: BLACK, BLUE, CYAN, DARK_GRAY, GRAY, GREEN, LIGHT_GRAY, MAGENTA, ORANGE, PINK, RED, WHITE, and YELLOW.

setting colors
Setting Colors

You can use the following methods to set the component’s background and foreground colors:

setBackground(Color c)

setForeground(Color c)

Example:

jbt.setBackground(Color.yellow);

jbt.setForeground(Color.red);

the font class
The Font Class

Font Names

  • Standard font names that are supported in all platforms are: SansSerif, Serif, Monospaced, Dialog, or DialogInput.

Font Style

  • Font.PLAIN (0), Font.BOLD (1), Font.ITALIC (2), and Font.BOLD + Font.ITALIC (3)

Font myFont = new Font(name, style, size);

Example:

Font myFont = new Font("SansSerif ", Font.BOLD, 16);

Font myFont = new Font("Serif", Font.BOLD+Font.ITALIC,12);

JButton jbtOK = new JButton("OK“);

jbtOK.setFont(myFont);

finding all available font names
Finding All Available Font Names

GraphicsEnvironment e =

GraphicsEnvironment.getLocalGraphicsEnvironment();

String[] fontnames = e.getAvailableFontFamilyNames();

for (int i = 0; i < fontnames.length; i++)

System.out.println(fontnames[i]);

using panels as sub containers
Using Panels as Sub-Containers
  • Panels act as sub-containers for grouping user interface components.
  • It is recommended that you place the user interface components in panels and place the panels in a frame. You can also place panels in a panel.
  • To add a component to JFrame, you actually add it to the content pane of JFrame.
  • To add a component to a panel, you add it directly to the panel using the .add method.
creating a jpanel
Creating a JPanel

You can use new JPanel() to create a panel with a default FlowLayout manager or

new JPanel(LayoutManager) to create a panel with the specified layout manager. Use the add(Component) method to add a component to the panel. For example,

JPanel p = new JPanel();

p.add(new JButton("OK"));

slide73
Demo
  • Open file ProgTestPanels.java
  • Open file ProgTestPanels2.java
testing panels example
Testing Panels Example

This example uses panels to organize components. The program creates a user interface for a Microwave oven.

borders
Borders

You can set a border on any object of the JComponent class. Swing has several types of borders. To create a titled border, use

new TitledBorder(String title).

To create a line border, use

new LineBorder(Color color, int width),

where width specifies the thickness of the line. For example, the following code displays a titled border on a panel:

JPanel panel = new JPanel();

panel.setBorder(new TitledBorder(“My Panel”));

test swing common features
Test Swing Common Features

JComponent Properties

  • toolTipText
  • border

Component Properties

  • font
  • background
  • foreground
  • preferredSize
  • minimumSize
  • maximumSize
image icons
Image Icons

Java uses the javax.swing.ImageIcon class to represent an icon. An icon is a fixed-size picture; typically it is small and used to decorate components. Images are normally stored in image files. You can use new ImageIcon(filename) to construct an image icon. For example, the following statement creates an icon from an image file us.gif in the image directory under the current class path:

ImageIcon icon = new ImageIcon("image/us.gif");

TestImageIcon

Run

splash screen
Splash Screen

A splash screen is an image that is displayed while the application is starting up. If your program takes a long time to load, you may display a splash screen to alert the user. For example, the following command:

java –splash:image/us.gf TestImageIcon

displays an image while the program TestImageIcon is being loaded.

slide80
Task
  • Write JAVA program to support a frame with
    • three labels
    • Three text fields
    • Two buttons
  • Scheme of the pane:

label1 textfield1

label2 textfield2

label3 textfield3

button1 button2

questions and or
Questions? And/Or

Thank You

For

Your Attention!