1OOMGUI2014

OOM
Afterwards..
By
Prof. Dr. O. P. Vyas

M.Tech.(CS), Ph.D. ( I.I.T. Kharagpur )
DAAD Fellow ( Germany )
AOTS Fellow ( Japan)
OOM
Before Mid Semstudents have different
levels of background but now OK
OOM After Mid Sem..?
What will be covered now..?
Thanks for feedback and some constructive
suggestion..
Some of your suggestions are now part of
OOM course..!!
What Exactly !!
Database System Concepts
3.2
Silberschatz, Korth and Sudarshan
OOM After Mid Sem

Java GUI, Applets & App
Developments..
Software Design..
( Lessons from UML will be useful ..)
OO Design Criterion..
OO Design Principles
Design Patterns
Component Oriented Programming
OO Software Reuse: Frameworks &
Tools
Java GUI, Applets

&
Apps development
Java GUI, Applets

&
Mobile Apps development
Java GUI & Applets have common development paradigm
Event Handling
Delegation model
Applets embed HTML with Java codes

Mobile Apps development uses and extends this paradigm
Native Apps vs Web Apps

Apps development platforms & URLs
11/9/2014
5
3.5
Java : GUI & Applets

Java GUI
Creating Window: using Frame

Using AWT & Swing
Event Handling in Java
Delegation model
Event Source , Listener & Interface
Applets & Standalone applications
Writing Applet: Embedding in HTML
Life Cycle of Applet

Native Apps Vs Web Apps
11/9/2014
3.6
6
What Makes Mobile Apps Different?
In many respects, developing mobile applications is different from
traditional software development
similar to embedded applications.Some differences also

Common issues include integration with device hardware, as well
as traditional issues of security, performance, reliability, and

storage limitations.
3.7
What Makes Mobile Apps Different?

In many respects additional requirements that are less
commonly found with traditional software applications,

including:
1)Sensor handling most modern mobile devices, e.g.,
smartphones, include an accelerometer that responds to
device movement, a touch screen that responds to numerous
gestures, along with real and/or virtual keyboards, a global
positioning system, a microphone usable by applications other
than voice calls, one or more cameras, and multiple
networking protocols
2) Potential interaction with other applications most embedded
devices only have factory-installed software, but mobile
devices may have many applications from varied sources
interacting
3) Native and Web (mobile web) applications
4) Families of hardware and software platforms
3.8
Mobile Software
A mobile application (or Mobile App) is software written for
mobile devices that performs a specific task, such as a

game, calendar, music player, etc.
While application development for mobile devices goes
back at least 10 years, there has been exponential growth in

mobile application development since the iPhone AppStore
opened in July, 2008.
The term App" has become popular, and in 2010 was listed
as "Word of the Year" by the American Dialect Society
Mobile App ranges from Game or Music to business

processes as well.
9
3.9
Mobile Apps: Characteristics
The key quality requirements include
Rapid ROI ( Return on Investment)
Great User Experience,

Security,
As well as flexibility with respect to future extensions
Industry analysts estimate that there are more than 250,000
applications available through the various stores and

marketplaces, some of which are available for multiple types
10
of devices.
3.10
Mobile Apps ..
Different Vendors, heterogeneous platforms but OOM
paradigm for one and all

They are usually available through application
distribution platforms, which are typically operated by

the owner of the mobile operating system, such as the
Apple App Store, Google Play, Windows Phone Store and
BlackBerry App World.
Some apps are free, while others must be bought.
Usually, they are downloaded from the platform to a

target device, such as an iPhone, BlackBerry, Android
phone or Windows Phone, but sometimes they can be
downloaded to laptops or desktops.
For apps with a price, generally a percentage, 20-30%,
goes to the distribution provider (such as iTunes), and

the rest goes to the producer of the app.
11
3.11
Types of Mobile Apps

Native Apps
Web Apps
A native app as one that is

specifically designed to
run on a devices
operating system and
machine firmware, and
typically needs to be
adapted for different
devices.
A Web app, or browser

application, is one in
which all or some parts
of the software are
downloaded from the
Web each time it is run.
Ex. Address book,

calendar and
calculator
11/9/2014
It can usually be
accessed from all Webcapable mobile devices.

Ex. Weather Widgets,
Social Networking and
Online Games.
12
3.12
Native:
For native apps, the advent
of the Apple App Store was

the game changer.
Native apps will remain
preferred choice for heavy

apps such as 3D gaming in
the near future.
Different Platform uses
different programming
Languages..
Web:
For mobile Web apps, notable
developer interest emerged only in
the last year or so after Googles
successful implementation of
HTML5-based apps.
HTML5 & Javascripts.
Web Apps useful for subscription
- based services such as

communications, news &
weather, financial services, retail
and shopping.
11/9/2014
13
3.13
Platforms
Language(s)
Remarks
Android
Java, C, C++
Open source OS (based on Linux)

developerandroid.com
bada
C, C++
Samsungs mobile platform running on Linux or real

time OS
developerbada.com
Blackberry
Java
J2ME compatible, extensions

Enable title integration
me.blackberry.com/eng/developers
iOS
Objective-C, C
Requires Apple Developer Account

developer apple.com/iphone
MeeGo
Qt, Web Apps, C++

,others
Intel and Nokia guided Open source OS (based on

Linux)
meego.com/developers
Symbian
C, C++, Java, Qt, Web

Apps , others
Open Source OS built from the ground up for mobile

devices
www.forum.com/symbian
WebOS
HML, CSS,
JavaScript, C
Support widget style programming, (based on Linux)

developer.palm.com
Windows
Mobile
C#, C
.NET, CF of Windows Mobile API, most devices ship

with J2ME compatible JVM
developer.windowsmobile.com
Window
C#, VB.NET
Database
PhoneSystem Concepts
SilverLight, XNA Framework

3.14
Why Web Apps..

Web Apps offer an architectural advantage
when targeting a cross-device launch, where significantly less
platform migration is required compared to native applications,
Similar Platform independence paradigm of Java Technology
11/9/2014
15
3.15
How Platform independence in JAVA works

Compile-time Environment
Compile-time Environment
Class
Loader
Bytecode
Verifier
Java
Source
(.java)
Java
Compiler
Java
Class
Libraries
Java
Interpreter
Java
Bytecodes
move locally
or through
network
Just in
Time
Compiler
Java
Virtual
machine
Runtime System
Java
Bytecode
(.class )
Operating System
Hardware
3.16
Javas Platform Independence
Editor
Compiler
Source
code
Bytecodes
Hello.java
Hello.class
Interpreter
Hello,
World!
Interpreter
Hello,
World!
3.17
3-17
Technical difference between the two?

For instance, a native
One interesting point to note
is that while architectural

differences will likely remain
between a native and Web
application for some time, the
user experiences provided by
both interfaces are
increasingly blurred, as most
native apps utilize real-time
Web connectivity and Web
apps provide offline modes
that can be accessed without
network connectivity.
application developed for

the iPhone will need to run
on its proprietary iOS
platform, or on Symbian
for many Nokia devices,
and so forth.
A Web app, however, is
typically coded in a
browser-rendered
language such as HTML
combined with
JavaScript.
As a result, some of these
apps are now referred to as

hybrid apps.
Best practices for Mobile Apps development: http://www.w3.org/TR/mwabp/

11/9/2014
18
3.18

Mobile Apps are categorized in many ways having no
universally accepted taxonomy and can be categorized

based on
Application domains: Entertainment,

Information, Company etc.
Development Approach: Data driven,

Device Apps, Games Apps.
There are large number of websites helping the
development of Mobile apps

www.appsbar.com
11/9/2014
19
3.19
Various Mobile Apps

1) Data Driven App this is simple app except that the data is
dynamic, either stored in a local (on the device) database, or
retrieving the data from an external source.
2) Games have you heard of Angry Birds? That is a game.
Apparently, there are other games too. Games can range from the
simple thinking mans game through to the very complex action
games.
3) Device App a device app is an app that makes use of the
hardware to provide its core functionality, i.e. something based
around the functionality of the camera, accelerometer, or GPS, etc.
4) Bespoke Functionality App a bespoke functionality app an
app that is designed to provide a solution to a specific need or
problem. It would be an app that may include data-driven features,
device features, bells and whistles, but will also include very
dedicated and specific features that will only be relevant to provide
the solution to the defined problem.
For example, if you wanted a Time Management style app, most of the
features could be defined under the data-driven app type, but this 20
app would also include very specific
Time Engine functionality.
3.20
Windows Store: Windows 8

Microsoft confirmed that the Windows Store will be a platform
for distributing Windows applications, both Metro-style and

traditional apps, and the store will only support Windows 8 and
above.
The Windows Store will be the primary means of distributing its
namesake applications to users; the official reason is to allow

Microsoft to scan apps for security flaws and malware.
Line of Business Metro-style apps can be installed from

outside the Windows Store by an organization's IT department,
however.
The Windows Store will take a 30% cut of application sales.
Once an application reaches $25,000 USD in revenue, the cut

drops to 20%. Third-party transactions are also allowed, of
which Microsoft does not take a cut.
Individual developers will be able to register for $49 USD, and

$99 USD for companies. Developers from 120 countries can
submit applications to Windows store.
21
similar platforms, such as the Mac App Store and Google Play
3.21
Java GUI, Applets

&
Java GUI & Applets have common development paradigm
Java GUI : AWT Vs SWING

Event Handling & Delegation model
Applets embed HTML with Java codes

What is an Applet ?
Applet & Web Technology

Security in Java Web Applications
11/9/2014
22
3.22
OOM & GUI

Typical GUI providing user friendly environment
comprises of ;
Buttons,
Menus
Combo boxes &
Bars: Title Bar, Menu Bar & Scroll Bar.
Although there are several techniques for creating

GUI but let us explore GUI creations by Java .
In Java Graphical User Interface (GUI)
programming, we do not build GUI components

from scratch. Instead we use GUI components
11/9/2014
23
provided
to us by the JDK.
Database System
Concepts
3.23
GUI with Java

GUI : AWT & Swing
Creating Window
Components & Containers
Frame Classes
Layout Managers
Event Handling & Applets
Writing Applets
Sandbox Security
11/9/2014
24
3.24
GUI with Java

GUI : AWT & Swing
Creating Window: GUI Coordinate systems

Import Classes
OOP characteristics on AWT & Swing
Instantiate Frame Object
Components & Containers

Frame Classes
Layout Managers
Event Handling & Applets
Sandbox Security
11/9/2014
25
3.25
User Interface
Sun had used a logical and object-oriented design for
creating a GUI and handling its events.

There are two APIs for creating GUI applications in Java:
Swing and AWT (Abstract Windowing Toolkit).

When Java was first released in 1995, it contained a GUI API
: AWT.
AWT API contained classes like
Frame to represent a typical window,

Button to represent buttons,
Menu to represent a windows menu,

and so on.
26
3.26
GUI: AWT & Swing

AWT components are referred to as heavyweight components
because their implementation relies heavily on the
underlying operating system.
The look and feel of AWT components depend on the
platform the program is running on. For example,
an AWT button will look like a Windows button

when the program is run on a Windows
platform.
The same button will look like a Macintosh
button when the program is run on a Macintosh
platform.
Swing is different from AWT in that Swing components are
100 percent Java, thereby not relying on the native

operating system or platform.
27
3.27
AWT & Swing

Nowadays, most Java GUI programming is done by using
Swing.
We will discuss the AWT , though, because it is an

important part of GUI programming, and many of the AWT
classes are used in Swing, including the layout managers,
and event-handling classes and interfaces.
The names of the Swing classes all begin with a capital J,
like JButton.
For the most part, an AWT program can be converted to a
Swing program by adding a capital J to the class names

used in the source code and recompiling the code.
11/9/2014
28
3.28
Java Applet : Introduction
Applets
An applet is a special kind of Java program that a
browser enabled with Java technology can download

from the internet and run.
An applet is typically embedded inside a web page and
runs in the context of a browser.

An applet must be a subclass of the java.applet.Applet
class.
The Applet class provides the standard interface
between the applet and the browser environment.

Swing provides a special subclass of the Applet class
called javax.swing.JApplet.
The JApplet class should be used for all applets that
use Swing components to construct their graphical

user interfaces (GUIs).
30
3.30
Applets
There are some important differences between an applet and a
standalone Java application, including the following:
An applet is a Java class that extends the java.applet.Applet
class.
A main() method is not invoked on an applet, and an applet
class will (typically) not define main().

Applets are designed to be embedded within an HTML page.
When a user views an HTML page that contains an applet, the
code for the applet is downloaded to the users machine.

A user must have a JVM on his or her machine. The JVM can be
either a plug-in of the Web browser or a separate runtime

environment.
The JVM on the users machine creates an instance of the applet
class and invokes various methods during the applets lifetime.
31
3.31
Truly Platform independent

Applets have strict security rules that are enforced by the Web
browser. The security of an applet is often referred to as

sandbox security, comparing the applet to a child playing in a
sandbox with various rules that must be followed.
Other classes that the applet needs can be downloaded in a

single Java Archive (JAR) file.
Because applets are a part of a Web page, however, they can be
accessed by any Web browser using any operating system on

any device, and therefore can be executed on many different
platforms and devices.
I can run an applet using Windows XP and Internet Explorer,
and you can run the same applet on a Macintosh running

Netscape Navigator.
We will see how to write an applet and embed it in an
11/9/2014
HTMLpage.
32
3.32
Sandbox Security
Applets run in a Web browser restricted to a set of security
policies referred to as sandbox security.

The purpose of the sandbox security model is to ensure that
the applet you are downloading and executing is not going to

do terrible things to your computer.
This is especially important in todays Internet world of
viruses and other undesirable side effects of software

applications.
Applets that are downloaded and executed in a Web browser
must adhere to the following rules:

An applet cannot access any files on a users operating system.
An applet can only create network connections to the applets
code base, and cannot connect to other network addresses.

An applet cannot execute a program on the users machine.
An applet cannot access system information or use system dialog
boxes such the Open File or Print dialog boxes.

11/9/2014
33
3.33
Developing Java GUI
Containers and Components

There are two basic elements of a GUI: containers and
components.
A container is for displaying components,

and components must be displayed within
a container.
A Button is an example of a component,
whereas a Frame is an example of a
container.
To display a Button, you place it within a
Frame and display the Frame.
11/9/2014
35
3.35
Swing Components for GUI

The Class Hierarchy depicts that from where Swing components inherit
their common attributes and behavior.
Class Component ( package.java.awt) is subclass of Object that declares
many of the attributes and behaviors common to GUI Component
Object
Component
Container
JComponent
The Swing API uses many of the AWT classes and interfaces.
36
3.36
Creating Window: using Frame

Every GUI app uses what is called a Frame that comes with
the JDK.
A Frame is a window with borders, a title bar, and buttons
for closing and maximizing or minimizing itself.

It also knows how to resize itself.
Every GUI app subclasses Frame in some way to add more
functionalities to the window frame.

One common task is to tell the system to terminate all
"threads" of the GUI app when the user clicks on the exit
(close) button of the main GUI window.
11/9/2014
37
3.37
Creating Window
The basic starting point of a GUI is the container because
you need a container before you can start laying out your
components.
The java.awt.Frame and javax.swing.JFrame classes are
containers that represent a basic window with a title bar and

common windowing capabilities such as resizing,
minimizing, maximizing, and closing.
The Frame class is used for AWT programs and is the
parent class of JFrame, which is used for Swing programs.
11/9/2014
38
3.38
GUI Coordinates
All components and containers have a size and
location, which is denoted in pixels.

A pixel is a relative unit of measurement based
on the settings of the users screen.

The pixels create a coordinate system, with the
upper-left corner of the screen as the origin (0,0).

Any point on the screen can be represented as an
(x,y) value, where x is the number of pixels to the

right of the origin, and y is the number of pixels
down from the origin.
11/9/2014
39
3.39
Using Frame
For example, the point (100,100) is 100 pixels over and 100
pixels down from the upper-left corner of the screen.
Suppose that a Frame is instantiated and given the bounds

(100,100, 300, 400):
Frame f = new Frame();

f.setBounds(100, 100, 300, 400);
The upper-left corner of the Frame is the point (100,100)
relative to the computer screen.

The width of this Frame is 300 and the height is 400, so the
lower-right corner of the Frame is the point (400, 500) of the

computer screen
11/9/2014
40
3.40
GUI Coordinate system

There is another coordinate system of GUI components
referred to as the relative coordinate system.

The relative coordinate system is based on the upper-left
corner of the container that the component is residing in.

The upper-left corner of a container is an origin (0,0), and
components are placed in a container relative to the

containers origin, not the screens origin.
For example, the following statements instantiate a Button,
assign it bounds (20, 200, 60, 40). The Button is then added
to the Frame object instantiated earlier:
Button ok = new Button(OK);
ok.setBounds(20, 200, 60, 40);
f.add(ok); //Add the Button to a Frame
11/9/2014
41
3.41
Coordinates
The upper-left corner of the OK button appears 20 pixels over and
200 pixels down from the upper-left corner of the Frame. The
size of the Button is 60 pixels wide and 40 pixels high.
Assuming that Frame f has not been moved, this puts the Button
120 pixels over and 300 pixels down from the upper-left corner of
the screen. This point changes if the Frame is moved. However,
the relative location of the Button within the Frame does not
move, even if the Frame moves. This is the desired result of GUI
containers and components.
When we move a window, we expect all the components within
the window to move along with it. Therefore, we rarely concern

ourselves with the actual screen coordinates of a component.
The components relative coordinates are what are important to a
programmer laying out components in a container.

11/9/2014
42
3.42
java.awt.Frame Class
When working with Frame objects, there are basically
three steps involved to get a Frame window to appear

on the screen:
1. Instantiate the Frame object in memory.
2. Give the Frame object a size using setSize(),
setBounds(), or pack().
3. Make the Frame appear on the screen by invoking
setVisible(true).
11/9/2014
43
3.43
Instantiate the Frame Object

The java.awt.Frame class has four constructors:
I.
public Frame(). Creates a new frame with no message in

the title bar.
II.
public Frame(String title). Creates a new frame with the

given String appearing in the title bar.
III.
public Frame(GraphicsConfiguration gc). Creates a frame

with the specified GraphicsConfiguration of a screen device.
IV.
public Frame(String title, GraphicsConfiguration gc).

Creates a frame with the specified title and
GraphicsConfiguration.
11/9/2014
44
3.44
Instantiate Frame Object

Each of the preceding constructors creates a new Frame
object that is initially invisible and has a size of 0 pixels

wide and 0 pixels high.
The String passed in to a Frame constructor appears in the
title bar, and the Graphics-Configuration represents where

the image is to be displayed.
If you do not pass in a GraphicsConfiguration object, your
Frame will use the default graphics destination, which in

Windows is the computer screen.
The following statement demonstrates instantiating a new
Frame object in memory:

Frame f = new Frame(My first window);
11/9/2014
45
3.45
Windows
This Frame is not displayed on the screen, and it has an
initial size of 0 by 0.
We need to give our Frame a size before displaying it, which
can be done by invoking one of the following five methods:

public void setSize(int width, int height). Sets the size of the
Frame to the given width and height, in pixels.

public void setSize(java.awt.Dimension d). Sets the size of
the Frame to the same width and height as the given Dimension
object.
public void setBounds(int x, int y, int width, int height). Sets
both the size and initial location of the window, where x

represents the number of pixels over from the upper-left corner
of the screen, and y represents the number of pixels down from
the upper-left corner of the screen.
public void setBounds(java.awt.Rectangle r). Sets the
bounds of the Frame to that of the given Rectangle.

11/9/2014
public void pack(). Sets the size of the Frame to be just big
3.46
46
Create Window
After we have
instantiated a Frame,
given it a size, and
laid out the components within it,

we display the Frame on the screen by
invoking the setVisible() method inherited from the
Component class.
The signature of setVisible() is:
public void setVisible(boolean show)

If the boolean passed in is true, the component is made
visible. If the value is false, the component is hidden.
11/9/2014
47
3.47
FrameDemo program
The following FrameDemo program creates a Frame object,
sets its bounds, and displays it on the screen.

Study the program and try to determine its output,
import java.awt.*;
public class FrameDemo
{
public static void main(String [] args)
{
Frame f = new Frame(My first window);
f.setBounds(100,100, 400, 300);

f.setVisible(true);
}
}
11/9/2014
48
3.48
Window
We can move, resize, minimize, and maximize
the Frame window.
However, we cant close the window because closing
a window often implies ending the program.
If the user needs to save a
document or other settings before ending, your program needs a chance
to do this.
The closing involves handling the WindowEvent generated by a user attempting
to
close the window.
11/9/2014
49
3.49
Creating Window with Swing

Lets look at the steps involved in creating a JFrame. You start
by instantiating a JFrame using one of the following constructors:

public JFrame(). Creates a new JFrame with no message in
the title bar.

public JFrame(String title). Creates a new JFrame with the
given String appearing in the title bar.

public JFrame(GraphicsConfiguration gc). Creates a JFrame
with the specified GraphicsConfiguration of a screen device.

public JFrame(String title, GraphicsConfiguration gc).
Creates a Jframe with the specified title and

GraphicsConfiguration.
50
3.50
Creating Window
The constructors are similar to those in the Frame class, and the
parameters have the same uses. The following statement

instantiates a JFrame with My first JFrame in the title bar:
JFrame f = new JFrame(My first JFrame);
As with Frame objects, this JFrame is initially not visible and has
a size of 0 pixels by 0 pixels.

You invoke one of the setSize(), setBounds(), or pack() methods
to give the JFrame a size and then invoke setVisible() to make it

visible.
11/9/2014
51
3.51
Creating Window
The following JFrameDemo program demonstrates creating and
displaying a JFrame object.
import javax.swing.*;
public class JFrameDemo
{
{
JFrame f = new JFrame(My first JFrame);
f.setSize(400, 300);
f.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOS
E);
f.setVisible(true);
}
} 11/9/2014
52
3.52
Using Swing
Clicking the X in the title bar of a JFrame causes the window to be hidden
by default, but this does not cause your program to stop executing.
We need to press Ctrl+c at the command prompt to stop the JVM, even though
our JFrame is no longer visible on the screen.
11/9/2014
53
3.53
Overview
There are two types of GUI elements:
Component: Components are elementary

GUI entities (such as Button, Label, and
TextField.)
Container: Containers (such as Frame,
Panel and Applet) are used to hold
components in a specific layout (such as
flow or grid). A container can also hold subcontainers
11/9/2014
54
3.54
Containers & Components
Containers and Components

There are two basic elements of a GUI: containers and
components.
A container is for displaying components,

and components must be displayed within
a container.
A Button is an example of a component,
whereas a Frame is an example of a
container.
To display a Button, you place it within a
Frame and display the Frame.
11/9/2014
56
3.56
GUI
Component is an abstract class that is the
parent class of the various GUI components

of the AWT:
Button, Checkbox, Choice, Label,

List, and Text- Component.
Container is an abstract class that is the
parent class of the containers of the AWT:

Window, Panel, and ScrollPane.
Child objects of Component are placed within
child objects of Container.

For example, a Button can be placed within a
Panel, or a List can be placed within a Frame. 57
11/9/2014
3.57
Adding Components to a Container

A Component is added to a Container using one of the following
add() methods found in the java.awt.Container class:
public Component add(Component c). Adds

the Component to the Container and returns
a reference to the newly added Component.
public Component add(Component c, int
index). Adds the Component to the
Container at the position specified by index
public Component add(Component c,
Object constraints). Adds the Component to
the Container using the specified constraints
11/9/2014
58
3.58
Components
To demonstrate using the add() method, the following
AddDemo program creates a Frame object and adds a Button.
import java.awt.*;
public class AddDemo
{
{
Frame f = new Frame(A simple window);
Button cancel = new Button(Cancel);
f.add(cancel); //Add the Button to the Frame

f.setSize(100,100);
f.setVisible(true);
}
}
11/9/2014
59
3.59
Notice that the cancel Button is added to the Frame f.

Whenever f is displayed,
the cancel button is also displayed
Notice that the Button consumes the entire interior of the

Frame, no matter what size we make the Frame.
11/9/2014
60
3.60
GUI using Swing will have one

major difference in how to add the
Components (button) to
Containers (Window)
Using Jframe
Components are added to a JFrame differently from the way they
are added to a Frame. When using a Frame, you invoke the add()
method directly on the Frame object, adding the components
directly to the Frame.
When using a JFrame, we still invoke the add() method, but not on
the JFrame. Instead, we add the components to the content pane

of the JFrame by invoking the add() method on the JFrames
content pane.
We use the getContentPane() method in the JFrame class to obtain a
reference to the content pane of a JFrame. For Ex, the following

statements add a JButton to the content pane of a JFrame:
JFrame f = new JFrame();

JButton b = new JButton();
Container contentPane = f.getContentPane();
contentPane.add(b);
11/9/2014
62
3.62
Layout mangaer
Notice that the return value of getContentPane() is
Container. The add() method is invoked on the content pane,

adding b by using the layout manager of the content pane.
It involves the concept of a Layout Manager.

A container uses a layout manager to
determine how components are laid out within
the container.
Layout managers arrange GUI components in a container for
presentation purposes.
You can use the layout managers for basic layout capabilities
instead of determining every GUI components exact position

and size.
The Frame class uses a BorderLayout manager by default, and
the BorderLayout manager has placed the Button in the center of

11/9/2014
63
the Frame.
3.63
Arranging components in GUI

There are basically three ways to arrange components in a GUI,
where every approach has relative merits and limitations:
Absolute positioning:
Layout managers:
Visual programming in an IDE:
64
3.64
Absolute positioning
This provides the greatest level of control over a
GUIs appearance.
By setting a Containers layout to null, you can

specify the absolute position of each GUI
component with respect to the upper-left corner
of the Container by using Component methods
setSize And setLocation Or setBounds.
If you do this, you also must specify each GUI
components size.
Programming a GUI with absolute positioning can be tedious,
unless you have an integrated development environment (IDE)

that can generate the code for you.
2.
65
3.65
Layout Managers
Using layout managers to position elements
can be simpler and faster than creating a
GUI with absolute positioning, but you lose
some control over the size and the precise
positioning of GUI components.
There are following types of Layout managers:
1)
FlowLayout. Lays out components in a left-to-right flow,
2)
BorderLayout. Divides a container into five regions,

allowing one component to be added to each region..
3)
GridLayout. Divides a container into a grid of rows and

columns, with one component added to each region of the grid
and each component having the same size.
GridBagLayout: Divides a container into regions similar to

GridLayout, except that components do not need to be the
66
same size.
3.66
4)
Visual programming in an IDE

IDEs provide tools that make it easy to
create GUIs. Each IDE typically provides a
GUI design tool that allows you to drag and
drop GUI components from a tool box onto
a design area.
You can then position, size and align GUI
components as you like.
The IDE generates the Java code that
creates the GUI. In addition, you can
typically add event-handling code for a
particular component by double-clicking the
11/9/2014component.
67
3.67
Java GUI : Ques.

Suppose GUI programming using Visual Basic, and all one
could visually place the components exactly where I wanted them in

the window using the Visual Basic IDE. Can you do that in Java?
A: You can if you have an IDE like Visual Caf or Visual Age.
These IDEs have GUI editors that let you place components exactly
where you want them. You can also organize components by
assigning a null layout manager to your container and specifying the
exact location and size of each component added.
Q: So why would you ever use one of the layout managers? Why
not just use the IDE or lay out the components exactly where you
want them?
A: Two reasons: First, you might not have an IDE, and if you do,
there is a certain complexity to figuring out how to use it. If you

understand layout managers, this will help you comprehend the code
that the IDE is generating for you.
Second, using a layout manager to lay out your components makes
your GUI more portable. You might be surprised to see that a GUI
that you created using an IDE looks great on Windows, but not so
great
on a Unix or Macintosh platform.
The same problem
can
occur
Database System
Concepts
3.68
Silberschatz,
Korth
and Sudarshan
Java GUI : Ques.

Q: How does the layout manager know how you want your GUI
to look?
A: You need to understand the way each type of layout manager
behaves. For example, you need to know that the FlowLayout

manager gives components their preferred size, and that
BorderLayout places components in specific regions of the container.
By using the different layout managers and nesting containers, you
have great control over the look of the GUI, while at the same time
letting the layout managers determine the exact location and size of
your GUI components.
3.69
Top Level Containers

Each GUI program has a top-level container.
The commonly-used top-level containers in AWT are Frame, Dialog and Applet
An AWT Dialog is a "pop-up window" used for interacting with the users.
A Dialog has a title-bar (containing an icon, a title and a close button) and a
content display area, as illustrated.
An AWT Applet (in package java.applet) is the top-level container for an applet,
which is a Java program running inside a browser. Applet will be discussed
11/9/2014
70
3.70
AWT Containers
Secondary containers are placed inside a top-level container
AWT has Panel and ScrollPane as these secondary containers:
11/9/2014
71
3.71
Layout Managers
A container uses a layout manager to determine both the
location and size of the components within the container. A

container can be assigned one layout manager, which is done
using the setLayout() method of the java.awt.Container class:
public void setLayout(LayoutManager m)
LayoutManager is an interface that all the layout managers
classes must implement.

You can create your own layout manager by writing a class that
implements the methods of the LayoutManager interface (no

small task), or
11/9/2014
72
3.72
Layout Managers
We can use one of the many layout managers of the AWT and
Swing APIs, including the following:

java.awt.FlowLayout. Lays out components in a left-to-right
flow, with each component given its preferred size. A Panel has
FlowLayout by default.
java.awt.BorderLayout. Divides a container into five regions,
allowing one component to be added to each region. A Frame

and the content pane of a JFrame have BorderLayout by default.
java.awt.GridLayout. Divides a container into a grid of rows
and columns, with one component added to each region of the

grid and each component having the same size.
java.awt.GridBagLayout. Divides a container into regions
similar to GridLayout, except that components do not need to be

the same size. Components can span more than one row or
column.
73
3.73
Layout Managers
java.awt.CardLayout. Each component added to the
container is treated as a card, with only one card being visible

at a time (similar to a deck of cards).
javax.swing.BoxLayout. Allows components to be laid out
vertically or horizontally. BoxLayout is similar to GridBagLayout,

but it is generally easier to use.
javax.swing.SpringLayout. Lays out components with a
specified distance between the edges of each component.

javax.swing.OverlayLayout. Displays components over the
top of each other, similarly to CardLayout. This is a useful layout

manager for creating tabbed panes.
11/9/2014
74
3.74
Layout Manager
Any container can use any layout manager. Notice
that Frame objects and the content pane of

JFrame objects have BorderLayout by default.
However, you can assign them any

layout manager you need.
Similarly, Panel objects have
FlowLayout by default, but a Panel
can be assigned any other layout
manager.
There are more commonly used ones, including
FlowLayout, BorderLayout, GridLayout, and

11/9/2014
BoxLayout
3.75
75
FlowLayout Manager
The java.awt.FlowLayout class represents a layout manager that
aligns components in a left-to-right flow, such as words in a

sentence.
FlowLayout has the following properties:
Components are given their preferred size.
The order in which the components are added determines
their order in the container. The first component added appears

to the left, and subsequent components flow in from the right.
If the container is not wide enough to display all of the
components, the components wrap around to a new line.

You can control whether the components are centered, left-
justified, or right-justified.
You can control the vertical and horizontal gap between
components.
11/9/2014
76
3.76
To use FlowLayout in a Frame or JFrame, you need to invoke
setLayout() on the container and pass in a new FlowLayout

object. The FlowLayout class has three constructors:
public FlowLayout(). Creates a new FlowLayout that centers
the components with a horizontal and vertical gap of five units

(where the unit is pixels in most GUI operating systems).
public FlowLayout(int align). Creates a FlowLayout object
with the specified alignment, which is one of the following

values: FlowLayout .CENTER, FlowLayout.RIGHT, or
FlowLayout.LEFT. The horizontal and vertical gap between
components is five units.
public FlowLayout(int align, int hgap, int vgap). Creates a
FlowLayout object with the specified alignment, horizontal gap,

and vertical gap.
11/9/2014
77
3.77
Layout Manager
For example, the following statement instantiates a new
FlowLayout manager that justifies components to the right. The

horizontal and vertical gap is not specified, so they will have the
default value of 5.
Frame f = new Frame();
f.setLayout(new FlowLayout(FlowLayout.RIGHT));
The FlowLayoutDemo program creates a Frame and assigns it
FlowLayout. Components are then added using the add()

method.
Study the program and see if you can determine its output, which
is shown.
11/9/2014
78
3.78
import java.awt.*;
public class FlowLayoutDemo
{public static void main(String [] args)

{
Frame f = new Frame(FlowLayout demo);
f.setLayout(new FlowLayout());
f.add(new Button(Red));
f.add(new Button(Blue));
f.add(new Button(White));
List list = new List();
for(int i = 0; i < args.length; i++)
{ list.add(args[i]);
}
f.add(list);
f.add(new Checkbox(Pick me, true));
f.add(new Label(Enter name here:));

f.add(new TextField(20));
f.pack();
f.setVisible(true);
} 11/9/2014
}
79
3.79
Flowlayout demo
The FlowLayoutDemo demonstrates using some of the AWT
components.
Three Button components are added to the Frame first. Then, a
List is created, filled with the command-line arguments, and

added to the Frame. Next, a Checkbox, Label, and TextField are
added. The pack() method sizes the Frame so all the
components fit nicely, as you can see by the output
11/9/2014
80
3.80
GUI in Java with Swing

Additional features
Pluggable Look & Feel in Swing

Swing components have what is referred to as a pluggable look
and feel (PLAF), allowing their appearance to be independent of

the underlying platform.
You can create your own look and feeldetermining colors,
fonts, and backgrounds for all your components.

Creating your own look and feel involves a fair amount of coding
and artistic skills and is beyond the scope of this course
However, Swing comes with a built-in look

and feel for Windows, Macintosh, and
Motif, which is a Unix look and feel. There
is also a default Swing look and feel, known
as the Metal look and feel. (In its earliest
stages, Swing was referred to as Metal.)
11/9/2014
82
3.82
Swing Look
The javax.swing.UIManager class maintains the current look and
feel for a Java program using Swing.
In particular, the UIManager class contains methods for
determining and changing the current look and feel.

The LookAndFeel class is in the javax.swing package and
encapsulates a pluggable look and feel.

The following classes represent the four built-in pluggable look-
and-feel components of Swing:

com.sun.java.swing.plaf.motif.MotifLookAndFeel. Creates a
Motif look and feel, which is the user interface for many Unix
operating systems.
com.sun.java.swing.plaf.windows.WindowsLookAndFeel.
Creates a Microsoft Windows look and feel.

com.sun.java.swing.plaf.mac.MacLookAndFeel. Creates a
Macintosh look and feel.

javax.swing.plaf.metal.MetalLookAndFeel. Creates a Metal
look and feel,which is the default for Swing applications.
3.83
83
import java.awt.*;
public class BorderLayoutDemo extends Frame

{ private Button north, south, east, west, center;
public BorderLayoutDemo(String title)
BorderLayoutDemo
program demonstrates
both how to add
components to a container
with BorderLayout and
how the five regions look.
{ super(title);
north = new Button(North);
south = new Button(South);
east = new Button(East);
west = new Button(West);
center = new Button(Center);
In the program, a Button
this.add(north, BorderLayout.NORTH);
object is added to each of

the five regions.
this.add(south, BorderLayout.SOUTH);
this.add(east, BorderLayout.EAST);
this.add(west, BorderLayout.WEST);
this.add(center, BorderLayout.CENTER);
}
{ Frame f = new
BorderLayoutDemo(BorderLayout demo);
f.pack();
f.setVisible(true);
11/9/2014
}}
84
3.84
Output..
The north and south buttons have their preferred height, but are as wide as
the window.
The east and west buttons have their preferred width, but run the
height of the window. The center button fills in the remaining space, getting
neither its preferred width nor height.
11/9/2014
85
3.85
Panels
A panel is a simple container used for holding components.
A panel is like an invisible container, and it must be placed

in a top-level container, such as a Frame or JFrame before it
can be viewed.
The java.awt.Panel class represents panels in AWT, and the
javax.swing.JPanel class represents panels in Swing.

Panels have the following properties:
The default layout manager of both Panel and JPanel

is FlowLayout, but since they are containers, they can
have any layout manager assigned to them.
A panel can be nested within another panel, a
common occurrence when working with complex
GUIs.
A JPanel can take advantage of the double-buffering
features in Swing, allowing them to be updated
quickly and avoid flickering.
3.86
86
You might be wondering what the purpose of panels is, so lets look
at an
example that illustrates when a panel is useful.
Suppose that you are using a
Frame with BorderLayout and you want three buttons displayed in
the south.
However, you cannot add three components to the south of a
BorderLayout,
so how can this be done?
Well, the trick is to put a panel in the south.

We can do this because a panel is a container, and containers are
also components.
If the one component we add in the south is a panel, we can add
three buttons to the
panel.
import java.awt.*;
public class PanelDemo extends Frame

{private Button next, prev, first;
Study the program and see if you
can determine what the output

will look like.
private List list;

public PanelDemo(String title)
{ super(title);
Notice that the layout manager of
the Frame was not changed, so it

is BorderLayout.
next = new Button(Next >>);

prev = new Button(<< Previous);
first = new Button(First);
Similarly, the layout manager of
the Panel was not changed, so it

is FlowLayout by default.
Panel southPanel = new Panel();

southPanel.add(prev);
southPanel.add(first);
The PanelDemo class extends
Frame and has four fields: three

Button references and a List
reference.
southPanel.add(next);
this.add(southPanel, BorderLayout.SOUTH);
Panel northPanel = new Panel();
northPanel.add(new Label(Make a selection));
this.add(northPanel, BorderLayout.NORTH);
list = new List();
for(int i = 1; i <= 10; i++)
{ list.add(Selection + i); }
this.add(list, BorderLayout.CENTER); }
A Label is put on a Panel named

11/9/2014 f = new PanelDemo(PanelDemo);
{ Container
Database
System Concepts
f.setSize(300,200);
f.setVisible(true);} }
Notice in PanelDemo constructor

that the three Button objects are
placed in a Panel named
southPanel, and southPanel is
added to the south of the Frame.
northPanel, and the northPanel is
placed in the north of the Frame.
3.88
Output of PanelDemo
11/9/2014
89
3.89
A panel can be nested within a

container.
Panels can be nested within
other panels as well to allow greater
control of where components are
laid out within a container.
Dialog Windows
A dialog window is used to interact with the user, either to share
information with the user or obtain information from the user.

The java.awt.Dialog class represents an AWT dialog window,
and the javax.swing.JDialog class represents a Swing dialog

window.
Note that the JDialog class extends the Dialog class.
A dialog window is either modal or modeless.
A modal dialog window must be closed

before the program can continue.
A modeless dialog window is one that does

not need to be closed, and you still can
interact with the program or programs
11/9/2014behind the modeless dialog.
91
3.91
Dialog Window
A dialog window often has an owner window that is either
another dialog window or a frame window.

The owner of a dialog window is assigned by using one of the
constructors of the Dialog or JDialog classes:

public Dialog(Frame owner, String title, boolean modal).
Creates a Dialog with the given Frame as its owner. The String
appears in the title bar, and if the boolean is true, the Dialog will
be modal.
public Dialog(Dialog owner, String title, boolean modal).
Creates a Dialog with the given Dialog as its owner.

public JDialog(Frame owner, String title, boolean modal).
Creates a Jdialog with the given Frame as its owner.

public JDialog(Dialog owner, String title, boolean modal).
Creates a Jdialog with the given Dialog as its owner.

public JDialog(). Creates a JDialog with no owner or title. It
will be modeless by default.

92
3.92
GUI in Java
Recent Advances
JavaFX is a software platform for creating and delivering rich
internet applications (RIAs) that can run across a wide variety of

devices.
JavaFX is a set of graphics and media packages

that enables developers to design, create, test,
debug, and deploy rich client applications that
operate consistently across diverse platforms.
JavaFX is intended to replace Swing as the
standard GUI library for Java SE, but both will be
included for the foreseeable future.
The latest flagship of Java/Oracle. promising to be the facto
standard in developing rich desktop or web applications

The current release has support for desktop computers and web
browsers on Windows, Linux, and Mac OS X.

11/9/2014
94
3.94
JavaFX 2.2 and later releases are fully integrated with the Java SE
7 Runtime Environment (JRE) and the Java Development Kit (JDK).

Because the JDK is available for all major desktop platforms
(Windows, Mac OS X, and Linux), JavaFX applications compiled to

JDK 7 and later also run on all the major desktop platforms.
The cross-platform compatibility enables a consistent runtime
experience for JavaFX applications developers and users. Oracle

ensures synchronized releases and updates on all platforms and
offers an extensive support program for companies that run
mission-critical applications.
The look and feel of JavaFX applications can be customized.
Cascading Style Sheets (CSS) separate appearance and style

from implementation so that developers can concentrate on
coding.
Graphic designers can easily customize the appearance and style
of the application through the CSS

11/9/2014
95
3.95
Swing Components for GUI

The Class Hierarchy depicts that from where Swing components inherit
their common attributes and behavior.
Class Component ( package.java.awt) is subclass of Object that declares
many of the attributes and behaviors common to GUI Component
Object
Component
Container
JComponent
The Swing API uses many of the AWT classes and interfaces.
96
3.96
JavaFX Hierarchy..
java.lang.Object
java.awt.Component
java.awt.Container
javax.swing.JComponent
javafx.embed.swing.JFXPane
11/9/2014
97
3.97
How to develop applications with

JavaFX?
Oracle is providing support to JavaFX
development
http://docs.oracle.com/javafx/2/overview/jfxpuboverview.htm
11/9/2014
99
3.99

1OOMGUI2014

Uploaded by

Copyright:

Available Formats

You might also like

1OOMGUI2014

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

1OOMGUI2014

Uploaded by

Copyright:

Available Formats

OOM

Prof. Dr. O. P. Vyas

Silberschatz, Korth and Sudarshan

OOM After Mid Sem

Java GUI, Applets

Java GUI, Applets

Applets embed HTML with Java codes

Native Apps vs Web Apps

Silberschatz, Korth and Sudarshan

Java : GUI & Applets

Creating Window: using Frame

Mobile Apps development

Database System Concepts

What Makes Mobile Apps Different?

In many respects, developing mobile applications is different from

traditional software development

similar to embedded applications.Some differences also

as traditional issues of security, performance, reliability, and

Database System Concepts

Silberschatz, Korth and Sudarshan

What Makes Mobile Apps Different?

commonly found with traditional software applications,

Database System Concepts

Silberschatz, Korth and Sudarshan

mobile devices that performs a specific task, such as a

back at least 10 years, there has been exponential growth in

as "Word of the Year" by the American Dialect Society

Mobile App ranges from Game or Music to business

Silberschatz, Korth and Sudarshan

Mobile Apps: Characteristics

The key quality requirements include

Rapid ROI ( Return on Investment)

Great User Experience,

applications available through the various stores and

Silberschatz, Korth and Sudarshan

paradigm for one and all

distribution platforms, which are typically operated by

Usually, they are downloaded from the platform to a

goes to the distribution provider (such as iTunes), and

Silberschatz, Korth and Sudarshan

Types of Mobile Apps

A native app as one that is

A Web app, or browser

Ex. Address book,

accessed from all Webcapable mobile devices.

Silberschatz, Korth and Sudarshan

of the Apple App Store was

preferred choice for heavy

- based services such as

Silberschatz, Korth and Sudarshan

Open source OS (based on Linux)

Samsungs mobile platform running on Linux or real

J2ME compatible, extensions

Requires Apple Developer Account

Qt, Web Apps, C++

Intel and Nokia guided Open source OS (based on

C, C++, Java, Qt, Web

Open Source OS built from the ground up for mobile

Support widget style programming, (based on Linux)