1 CS441 CURRENT TOPICS IN PROGRAMMING LANGUAGES LECTURE 3 GEORGE KOUTSOGIANNAKIS George Koutsogiannakis / Summer 2011

1

CS441 CURRENT TOPICS IN

PROGRAMMING LANGUAGES

LECTURE 3

GEORGE KOUTSOGIANNAKIS

George Koutsogiannakis / Summer 2011

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


» 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


– 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 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


– 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


– A Content Management System (CMS) that includes:

• Access to html , images, video for user (client) GUIs.

• Version control.

• Other .

8


• Architecture of a WEB APPLICATION (Enterprise Application)

9

HARDWAREOPERATING SYSTEM

WEB AND APPLICATION

SERVERS

VARIOUS LANGUAGES

RUNTIME

DATA BASE MANAGEMENT

DEVELOPMENT

FRAMEWORKCMS

APPLICATION

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 site- examples 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

14

0

1

2

3

n

Column numbers

…………………………………………………………………………………………… 0

1

2

m

.......

rows

Component A


• 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 CENTER15


– 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


– 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


• 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 m=5

18

0

1

2

3

n

Column numbers

…………………………………………………………………………………………… 0

1

2

m

rows

Component A

3


• 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


• 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


– 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

22

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=wyconstraints.fill=GridBagConstraints.BOTH;

constraints.anchor=GridBagConstraints.CENTER;gridbag.setConstraints(component, constraints);c.add(component);

}

Helper Method for GridBagConstraints

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

25

JPanel 1 JPanel 2

JPanel 3 JPanel 4


• JPanel1: gridx=0, grid y=0

gridwidth=10, gridheight=7

• JPanel2: gridx=10, gridy=0






26


• 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


28

JTextField 1

JTextField 2

JButton

Vertical Box Box boxv=Box.createVerticalBox();boxv.add(jtf1);boxv.add(jtf2);boxv.add(jb);

JPanel panel1=new JPanel();panel1.add(boxv);

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:

35

MODEL

CONTROLLER

VIEW

Data Query

Data

User Event

Transaction/Command

Set View

Data

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

Documents

1 CS441 CURRENT TOPICS IN PROGRAMMING LANGUAGES LECTURE 3 GEORGE KOUTSOGIANNAKIS George Koutsogiannakis / Summer 2011