CS441
CURRENT TOPICS IN
PROGRAMMING
LANGUAGES
LECTURE 3
GEORGE KOUTSOGIANNAKIS
George Koutsogiannakis / Summer 2011
1
Summary of topics
• Web Applications Platforms.
• More on Java Graphics
–
–
–
–
BorderLayout Manager
GridBagLayout Manager
Using the paint method to update GUI
Some Graphical Components
• Model View Controller Architecture.
2
Web Application Platforms
• Enterprises can be built using:
– Individual APIs and script languages, i.e. in Java:
• For server side you can use:
– Servlets, javascript (server side), java server pages etc.
• For client presentation:
– You can create a GUI for the client using applets, or a Java
application, or mixture of HTML and client side javascript etc.
• For the Data Tier
– You can use RMI servers and various databases JDBC
compatible.
3
Web Application Platforms
» You have to create the security required (like user Authentication
and Authorization, certificates to validate the server and the web site
etc) manually yourself.
– Notice that all programming and system testing is done by you the
developer manually by bringing together all these different APIs..
– Deployment is up to you also.
» You have to choose a web server, an application server, a database.
All of these probably OS specific (for the machine where the system
is going to reside).
» You have to deploy the programs you wrote in each type of server(s)
and you have to integrate all the parts of the system working on
different servers.
4
Web Application Platforms
– A Better approach these days is to use various
platforms that allow you to bring all the tools
you need together under one environment.
These IDEs go also under the name WAP (Web
Application Platforms).
– There are many different platforms available
utilizing different programming languages i.e.
5
Web Application Platforms
• Web Application Platforms include some or all of the
items below:
–
–
–
–
–
–
–
An Operating System for platforms that are not OS neutral).
A web server (for the web tier part)
An Application server (for the business logic part).
Programming Languages and compilers/interpreters.
Run time support systems
Databases management and drivers for various databases.
A Web Development Environment (WDE) that:
6
Web Application Platforms
– WDE (continued from previous slide)
• Provides reusable components-drag and drop
operations without writing any code, the
development environment creates the source code
files for you.
• Template to create a client GUI.
• User Authentication and authorization mechanisms
and other security settings.
• Transaction processing.
• Other services.
7
Web Application Platforms
– A Content Management System (CMS) that
includes:
• Access to html , images, video for user (client)
GUIs.
• Version control.
• Other .
8
Web Application Platforms
• Architecture of a WEB APPLICATION (Enterprise
Application)
APPLICATION
DEVELOPME
NT
FRAMEWORK
WEB AND
APPLICATION
SERVERS
VARIOUS
LANGUAGES
RUNTIME
CMS
DATA BASE
MANAGEMENT
OPERATING SYSTEM
HARDWARE
9
Some WEDs
• LAMP : Primarily use din Europe. Consists of Linux,
Apache (web server), MySQL, PHP (or PERL or
PYTHON). Mostly open source availability.
• Microsoft .NET: Windows, IIS (web server), SQL, other
tools such as Active Server Pages etc.
• Sun’ s JAVA EE: Operating System independent,
GlassFish (web server and application server), MySQL,
Derby other databases, Tools for developing web
application such a servlets, jsp, html, other.
10
Graphics
• In Java to create a GUI you need:
– To decide on the type of containers that you are going
to use.
– The components that you will place on the container(s)
– The way that you are going to place the components on
the container, using one of the Layout Manager
objects.
– The events that you are going to attach to each
component.
11
Graphics- Some Layout
Managers
• BorderLayout Manager
– Does not behave very well when screen is
resized!
– Need to use GridBagLayout in order to
accommodate screen resizing.
– See Mortgage Calculator example using
BorderLayout (from course’s web siteexamples link).
12
GRAPHICS
• GRID BAG LAYOUT MANAGER
– Need 3 objects:
• Container c; // to get hold of the content Pane
• GridBagConstraints constraints; //to establish settings for various attributes
• GriDBagLayout gbl; //layout manager object
– Need a separate helper method that sets the constraints for a
component. This method will accept as arguments whatever
number of constraints we decide to use and the component object
whose constraints are being set .
• The method sets the particular constraints to the specified values and adds the
component to the pane (container).
13
GridBagLayout Manager
• Container is divided into rows and columns
Column numbers
0
1
2
3
……………………………………………………………………………………………
n
0
1
r
o
w
s
2
.
Component
A
.
.
.
.
.
.
m
14
GridBagLayout Manager
• Example of Typical Constraints:
– gridx : column #
– gridy: row #
• gridx, gridy identify the coordinate where the upper left corner of the
component will be placed.
• Notice that column and row numbers start with 0.
i.e gridx=2, gridy =1 for component A in previous slide.
– gridwidth: number of columns to be occupied by the component.
– gridheight: number of rows to be occupied by the component.
– anchor: used when the component’ s area is smaller than the allocated
area. Values of anchor are: CENTER, NORTH, NORTHEAST, EAST,
SOUTHEAST, SOUTH, SOUTHWEST, WEST, and NORTHWEST
– Default is CENTER
15
GridBagLayout Manager
– fill: used when the component’ s size is larger than the allocated
area. Determines if component should be resized.
• Values : NONE: Do not resize the component.
HORIZONTAL: Make the component wide enough to fill its
display area horizontally, but do not change its
height.
VERTICAL: Make the component tall enough to fill its
display area vertically, but do not change its width.
BOTH: Make the component fill its display area entirely.
The default value is NONE.
16
GridBagLayout Manager
– weightx and weighty: Take non negative values like 10, 50, 100 .
• Difficult to predict the value. Default is zero.
• These constraints specify how to distribute extra horizontal and
vertical space respectively.
• If component does not show up or if it is distorted adjust the
values.
• Start with zero values. Use small values if components are
partially shown. Increment as needed
• Look up more constraints in the API
17
GridBagLayout Manager
• Container is divided into rows and columns and the size of the container is
defined as 800 pixels horizontally by 400 pixels vertically. Supose n=15 and
Column numbers
m=5
0
1
2
3
……………………………………………………………………………………………
n
0
1
r
o
w
s
2
Component
A
3
m
18
GridBagLayout Manager
• The values of n and m depend on the sum of all the widthx and heighty
used in the various components i.e.
–
–
–
–
–
–
component A : gridx=0, gridy=0, gridwidth=5, gridheight=2
Component B: gridx=5, gridy=0, gridwidth=10, gridheight=4
Component C: gridx=0, gridy=2, gridwidth=5, gridheight=3
Component D: gridx=5, gridy=4, gridwidth=10, gridheight=1
Therefore the total number of columns is: 5+10 =15
And the total number of rows is: 2+3=5
– If the size of the container was: width 150 pixels and height= 100 pixels then each
column is 10 pixels wide and each row is 20 pixels in height.
19
GridBagLayout Manager
•
•
•
•
Another example:
If n=20 then each column is 40 pixels wide (800/20)
If m=8 then each row is 50 pixels wide (400/8)
A component’ s size can be set before its constraints are used on the
component. Suppose component A is a button (slide #8).
i.e. JButton b=new JButton(“A”);
b.setPreferredSize(new Dimension(120, 100));
sets the size of b to 120 pixels wide by 100 pixels in height
or
gridwidth=3
gridheight=2
in terms of columns and rows for the example in slide #8 .
20
GridBagLayout Manager
– The position of the component is specified by
gridx= 2;
gridy=1;
– Let us assume that the GridBagConstraints objects is : constraint
– and that the GriBagLayout object is: gridbag
– A call to the helper method would be made as follows:
addComponent( b, 1, 2, 3,2, 50, 100);
21
Helper Method for GridBagConstraints
private void addComponent(Component component, int row, int column, int
width, int height , int wx, int wy)
{
constraints.gridx=column;
constraints.gridy=row;
constraints.gridwidth=width;
constraints.gridheight=height;
constraints.weightx=wx;
Constraints.weighty=wy
constraints.fill=GridBagConstraints.BOTH;
constraints.anchor=GridBagConstraints.CENTER;
gridbag.setConstraints(component, constraints);
c.add(component);
}
22
Graphical User Interface with
Menu Bar
•
We could add a menu bar to a container like JFrame. The menu bar takes some space
that is not included in the GridBagLayout for the remaining space on the frame.
–
First we create a menu bar object
MenuBar mb=new MenuBar();
– Then we create Menu objects
JMenu m1=new JMenu(“File”);
JMenu m2=new JMenu(“Edit”);
JMenu m3=new JMenu(“View”);
– Each Menu has Menu Items.
JMenuItem mi11=new JMenuItem(“New File”);
JMenuItem mi12=new JMenuItem(“Save As”);
m1.add(m11);
m1.add(m12);
JMenuItem mi21=new JMenuItem(“Copy”);
JMenuItem mi22=new JMenuItem(“Paste”);
m2.add(mi21);
m2.add(mi22);
etc..
23
Graphical User Interface with
Menu Bar
JMenuItem m31=new JMenuItem(“List”);
JMenuItem m32= new JMenuItem(“Details”);
m3.add(m31);
m3.add(m32);
– Now we add them Menu objects to the MenuBar object
– mb.add(m1);
mb.add(m2);
mb.add(m3);
– The MenuBar will be add by default at the top of the JFrame but it
could also be directed to be placed on the bottom or the sides.
setJMenuBar(mb);
24
Graphical User Interface
• 4 JPanels dropped in a JFrame using GridBagLayout manager
JPanel 1
JPanel 3
JPanel 2
JPanel 4
25
Graphical User Interface
• JPanel1: gridx=0, grid y=0
gridwidth=10, gridheight=7
• JPanel2: gridx=10, gridy=0
gridwidth=20, gridheight=7
• JPanel3: gridx=0, gridy=7
gridwidth=20, gridheight=8
• JPanel4: gridx=20, gridy=7
gridwidth=10, gridheight=8
26
Graphical User Interface
• Each JPanel has components dropped in it.
• A layout of your choice can be used with
each JPanel to place the components.
• A Box can be used to tightly box
components together either vertically or
horizontally. The box (or multiple boxes)
can then be dropped in each Panel.
27
Graphical User Interface
JTextField 1
Vertical Box
JTextField 2
Box boxv=Box.createVerticalBox();
boxv.add(jtf1);
boxv.add(jtf2);
boxv.add(jb);
JButton
JPanel panel1=new JPanel();
panel1.add(boxv);
28
Paint Methods
• Every container has a paint method associated with it.
• The method for JFrame is:
public void paint(Graphics g)
• The method for JPanel is called:
public void paintComponent ( Graphics g)
• Default paint methods are called first to paint the components.
• The paint methods can be overridden so that we can paint other
information.
• A paint method is called via a call to
repaint();
repaint calls update method which calls paint.
29
Special Components
• JFileChooser is a component that allows us to browse the directory and
either find a file to open or save a file (including the creation of a new
folder)
• JColorChooser is a component that allows the user to choose a color.
• JTable is a component that allows the creation of a matrix of rows and
columns and the placement of data in the cells created.
• JEditorPane is a component that allows ,for instance ,the interpretation
of html code , as in a Browser, plus other formats.
• JInternalFrame is used for the creation of a Desktop like GUI. Each
JInternalFrame can be dropped in a Desktop container object and it can
be maximized, minimized, iconified.
30
Calling Of Overridden paint
Method
• Example of Mortgage Calculator with JTable:
–
–
–
–
–
JFrame’ s default paint method is called to paint the static GUI on the screen
Program waits for user inputs.
The user enters values in TextFields and presses enter.
The event handler method is called which in turn calls the method calculate().
The method calculate() calculates the pertinent financial quantities and calls
repaint()
– Method repaint() calls the overridden version of paint method (s).
– The overridden version of paint method updates the JTable with the rows and
columns and places the proper values in the various cells of the JTable.
• Notice that multiple paint methods will be called with the call repaint()
– i.e. each JPanel will call its paintComponent method also.
• Mouse events will also call the paint methods (need to be masked).
31
JTable
• JTable is a complex component that creates a matrix of rows and
columns and allows data to be entered and edited in the cells.
• Follows the Model View Controller (MVC) Design Pattern.
• It can be created using a default table model or a table model created
by the developer.
• Model refers to what methods are available for the data manipulation.
• View is the visible part to the user, the rows and columns, Control is
whatever event handling is available to for instance change the data in
the cells etc.
• Event Handlers (Controller part) can allow updating of the data as
well as selection of rows and column by the user.
32
JTable
• Discussion on examples of JTable
–
–
–
–
Using default table model
Using a user defined model.
Selecting cells for editing
Event Listener for JTable.
33
MODEL VIEW CONTROLLER
ARCHITECTURE
• The JTable component is an example of a software
architecture called: Model View Component (MVC)
• MVC consists of:
– Model: Part of the application responsible for handling data and
the state of the application (session management, database ).
– View: Part of the application that is responsible for the GUI ,
passes actions to the controller , obtains data from MVC to present
to user.
– Controller: Part of the application that coordinates all parts of the
application. It handles user action by activating the proper model
components to present to the user. Selects the appropriate view for
the user.
34
MODEL VIEW CONTROLLER
ARCHITECTURE
• MVC pattern for a Web Application:
User Event
VIEW
Data
Set View
CONTROLLER
Transaction/Command
Data
Data
Query
MODEL
35
Study Guide
• Read Chapters 9, 13, 14 of “Web Based Application
Development ” text.
• Graphics and JTable is not covered by the texts. Use
examples from class (see following examples posted on
course’ s web) .
– Mortgage Calculation – Border Layout version
– Mortgage Calculation - Grid Bag Layout version.
– EditableTable
36