CS441 CURRENT TOPICS IN PROGRAMMING LANGUAGES - PowerPoint PPT Presentation

Loading...

PPT – CS441 CURRENT TOPICS IN PROGRAMMING LANGUAGES PowerPoint presentation | free to download - id: 5d89bd-YzhmM



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

CS441 CURRENT TOPICS IN PROGRAMMING LANGUAGES

Description:

cs441 current topics in programming languages lecture 3 george koutsogiannakis george koutsogiannakis / summer 2011 * * * * * * * * * model view controller ... – PowerPoint PPT presentation

Number of Views:97
Avg rating:3.0/5.0
Slides: 37
Provided by: GeorgeKout81
Learn more at: http://www.cs.iit.edu
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: CS441 CURRENT TOPICS IN PROGRAMMING LANGUAGES


1
CS441 CURRENT TOPICS IN PROGRAMMING LANGUAGES
  • LECTURE 3
  • GEORGE KOUTSOGIANNAKIS

George Koutsogiannakis / Summer 2011
2
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.

3
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.

4
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.

5
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.

6
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

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

8
Web Application Platforms
  • A Content Management System (CMS) that includes
  • Access to html , images, video for user (client)
    GUIs.
  • Version control.
  • Other .

9
Web Application Platforms
  • Architecture of a WEB APPLICATION (Enterprise
    Application)

APPLICATION
DEVELOPMENT FRAMEWORK
CMS
WEB AND APPLICATION SERVERS
VARIOUS LANGUAGES RUNTIME
DATA BASE MANAGEMENT
OPERATING SYSTEM
HARDWARE
10
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.

11
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.

12
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 courses web site- examples
    link).

13
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).

14
GridBagLayout Manager
  • Container is divided into rows and columns

Column numbers
0
1
2
3
n

0
1
Component A
r ows
2
. . . . . . .
m
15
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 gridx2, 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

16
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.

17
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

18
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 n15 and m5

Column numbers
0
1
2
3
n

0
1
Component A
r ows
2
3
m
19
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 gridx0, gridy0, gridwidth5,
    gridheight2
  • Component B gridx5, gridy0, gridwidth10,
    gridheight4
  • Component C gridx0, gridy2, gridwidth5,
    gridheight3
  • Component D gridx5, gridy4, gridwidth10,
    gridheight1
  • Therefore the total number of columns is 510
    15
  • And the total number of rows is 235
  • 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.

20
GridBagLayout Manager
  • Another example
  • If n20 then each column is 40 pixels wide
    (800/20)
  • If m8 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 bnew JButton(A)
  • b.setPreferredSize(new Dimension(120,
    100))
  • sets the size of b to 120 pixels wide
    by 100 pixels in height
  • or
  • gridwidth3
  • gridheight2
  • in terms of columns and rows for the
    example in slide 8 .

21
GridBagLayout Manager
  • The position of the component is specified by
  • gridx 2
  • gridy1
  • 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)

22
Helper Method for GridBagConstraints
private void addComponent(Component component,
int row, int column, int width, int height , int
wx, int wy) constraints.gridxcolumn cons
traints.gridyrow constraints.gridwidthwidth
constraints.gridheightheight constraints.
weightxwx Constraints.weightywy constrain
ts.fillGridBagConstraints.BOTH
constraints.anchorGridBagConstraints.CENTER g
ridbag.setConstraints(component,
constraints) c.add(component)
23
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 mbnew MenuBar()
  • Then we create Menu objects
  • JMenu m1new JMenu(File)
  • JMenu m2new JMenu(Edit)
  • JMenu m3new JMenu(View)
  • Each Menu has Menu Items.
  • JMenuItem mi11new JMenuItem(New File)
  • JMenuItem mi12new JMenuItem(Save As)
  • m1.add(m11)
  • m1.add(m12)
  • JMenuItem mi21new JMenuItem(Copy)
  • JMenuItem mi22new JMenuItem(Paste)
  • m2.add(mi21)
  • m2.add(mi22) etc..

24
Graphical User Interface with Menu Bar
  • JMenuItem m31new
    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)

25
Graphical User Interface
  • 4 JPanels dropped in a JFrame using GridBagLayout
    manager

JPanel 1
JPanel 2
JPanel 3
JPanel 4
26
Graphical User Interface
  • JPanel1 gridx0, grid y0
  • gridwidth10, gridheight7
  • JPanel2 gridx10, gridy0
  • gridwidth20, gridheight7
  • JPanel3 gridx0, gridy7
  • gridwidth20, gridheight8
  • JPanel4 gridx20, gridy7
  • gridwidth10, gridheight8

27
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.

28
Graphical User Interface
JTextField 1
Vertical Box Box boxvBox.createVerticalBox() bo
xv.add(jtf1) boxv.add(jtf2) boxv.add(jb) JPane
l panel1new JPanel() panel1.add(boxv)
  • JTextField 2

JButton
29
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.

30
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.

31
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).

32
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.

33
JTable
  • Discussion on examples of JTable
  • Using default table model
  • Using a user defined model.
  • Selecting cells for editing
  • Event Listener for JTable.

34
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.

35
MODEL VIEW CONTROLLER ARCHITECTURE
  • MVC pattern for a Web Application

VIEW
User Event
Data
CONTROLLER
Set View
Transaction/Command
Data
Query
Data
MODEL
36
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
About PowerShow.com