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

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

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

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

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: 6

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

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

9. Web Application Platforms Architecture of a WEB APPLICATION (Enterprise Application) 9 HARDWARE OPERATING SYSTEM WEB AND APPLICATION SERVERS VARIOUS LANGUAGES RUNTIME DATA BASE MANAGEMENT DEVELOPME NT FRAMEWORK CMS APPLICATION

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

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

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 course’s web site- examples link). 12

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

14. GridBagLayout Manager Container is divided into rows and columns 14 0 1 2 3 n Column numbers …………………………………………………………………………………………… 0 1 2 m. r o w s Component A

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

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

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 17

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 n=15 and m=5 18 0 1 2 3 n Column numbers …………………………………………………………………………………………… 0 1 2 m r o w s Component A 3

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

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

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

22. 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=wy constraints.fill=GridBagConstraints.BOTH; constraints.anchor=GridBagConstraints.CENTER; gridbag.setConstraints(component, constraints); c.add(component); } Helper Method for GridBagConstraints

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

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

25. Graphical User Interface 4 JPanels dropped in a JFrame using GridBagLayout manager 25 JPanel 1JPanel 2 JPanel 3JPanel 4

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

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

28. Graphical User Interface 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);

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

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

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

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

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

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

35. MODEL VIEW CONTROLLER ARCHITECTURE MVC pattern for a Web Application: 35 MODEL CONTROLLER VIEW Data Query Data User Event Transaction/Command Set View Data

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 36