component-based software engineering internet applications paul krause

Component-Based Component-Based Software EngineeringSoftware Engineering

Internet ApplicationsInternet Applications

Paul KrausePaul Krause

Lecture 8 - Lecture 8 - Internet ApplicationsInternet Applications

ContentsContents Reminder of Client-Server architecturesReminder of Client-Server architectures Client-side programming with Applets and Client-side programming with Applets and

JavaScriptJavaScript Server-side programming with JSP and Server-side programming with JSP and

ServletsServlets

Client/server ArchitectureClient/server Architecture

Server

Client

Internet

Browser,Applets, …

Client

Internet

Browser,Applets, …

Database, servlets, …

Generic 5-tier ArchitectureGeneric 5-tier ArchitectureClient Tier

Presentation

Business Rules

Integration

Resources

Application ComponentsApplication Components

Web pagesWeb pages HTML + scripting language codeHTML + scripting language code Provides dynamic processing of data and modification Provides dynamic processing of data and modification

of visual appearanceof visual appearance Program componentsProgram components

Perform the main computationsPerform the main computations Receive input from HTML formsReceive input from HTML forms Present output as web-pagesPresent output as web-pages

Configuration filesConfiguration files Enables application to be quickly deployed on Enables application to be quickly deployed on

different serversdifferent servers

Types of Program ComponentTypes of Program Component

Controller componentsController components e.g. selection and customisation of the web-pages to e.g. selection and customisation of the web-pages to

return to the clientreturn to the client

Session beansSession beans encapsulate information and operations specific to a encapsulate information and operations specific to a

client sessionclient session• stateless session beans - e.g. check data entrystateless session beans - e.g. check data entry• stateful session beans - e.g. shopping cartstateful session beans - e.g. shopping cart

Entity beansEntity beans provide access to persistent dataprovide access to persistent data

A statefull session beanA statefull session bean

public class BasketBean {public class BasketBean {private HashMap contents = new HashMap;private HashMap contents = new HashMap;public void addItem(Long itemid) { … }public void addItem(Long itemid) { … }public void updateItem(Long itemid, int quantity)public void updateItem(Long itemid, int quantity)

{ … }{ … }public Set getItems( ) { … }public Set getItems( ) { … }public int getQuantity(Long itemid) { … }public int getQuantity(Long itemid) { … }public void deleteItem(Long itemid) { … }public void deleteItem(Long itemid) { … }public int numberOfItems( ) { … }public int numberOfItems( ) { … }

}}

Internet Programming in JavaInternet Programming in Java

Java-based technologies include:Java-based technologies include: Client-side:Client-side:

AppletsApplets JavaScriptJavaScript

Server-side:Server-side: JSP - Java Server PagesJSP - Java Server Pages Java ServletsJava Servlets




ServletsServlets

HelloFromVenus.javaHelloFromVenus.java

import java.awt.*;import java.awt.*;import java.applet.Applet;import java.applet.Applet;// Copyright (c) 1999-2002, Xiaoping Jia.// Copyright (c) 1999-2002, Xiaoping Jia.public class HelloFromVenus extends Applet {public class HelloFromVenus extends Applet { public void paint(Graphics g) {public void paint(Graphics g) {

Dimension d = getSize();Dimension d = getSize();g.setColor(Color.black);g.setColor(Color.black);g.fillRect(0,0,d.width,d.height);g.fillRect(0,0,d.width,d.height);g.setFont(new Font("Helvetica", Font.BOLD, 24));g.setFont(new Font("Helvetica", Font.BOLD, 24));g.setColor(new Color(255, 215, 0)); // gold colorg.setColor(new Color(255, 215, 0)); // gold colorg.drawString("Hello From Venus!", 40, 25);g.drawString("Hello From Venus!", 40, 25);g.drawImage(getImage(getCodeBase(), "Venus.gif"),g.drawImage(getImage(getCodeBase(), "Venus.gif"),

20, 60, this);20, 60, this); }}}}

Invoking the AppletInvoking the Applet<HTML><HTML><HEAD><HEAD> <TITLE><TITLE> Object-Oriented Software Development Using Java | HelloFromVenus Object-Oriented Software Development Using Java | HelloFromVenus

AppletApplet </TITLE></TITLE></HEAD></HEAD><BODY BGCOLOR=BLACK TEXT=white><BODY BGCOLOR=BLACK TEXT=white><CENTER><CENTER> <H2>Here is the <EM>Hello From Venus</EM> Applet</H2><H2>Here is the <EM>Hello From Venus</EM> Applet</H2> <APPLET CODE="HelloFromVenus.class" WIDTH=300 HEIGHT=350><APPLET CODE="HelloFromVenus.class" WIDTH=300 HEIGHT=350> </APPLET></APPLET></CENTER></CENTER> Venus photo courtesy of NASA. Venus photo courtesy of NASA.</BODY></BODY></HTML></HTML>

JavaScriptJavaScript

Notation is close to Java, although with Notation is close to Java, although with some important differencessome important differences no explicit types for variablesno explicit types for variables simplified structure to the code - a “scripting simplified structure to the code - a “scripting

language”language” But provides a powerful client-side But provides a powerful client-side

processing and scripting languageprocessing and scripting language Following examples from Lano et al, Following examples from Lano et al,

Software Design Using Java 2Software Design Using Java 2

<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 <! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">Transitional//EN">

<HTML><HTML><HEAD><HEAD><TITLE>Date Check Program</TITLE><TITLE>Date Check Program</TITLE>

<SCRIPT LANGUAGE = "JavaScript"><SCRIPT LANGUAGE = "JavaScript">// Some Java-like processing stuff goes in here// Some Java-like processing stuff goes in here// …// …

</SCRIPT></SCRIPT></HEAD></HEAD>

<BODY><BODY>Click Refresh or Reload to run script againClick Refresh or Reload to run script again</BODY></BODY></HTML></HTML>

var firstNumber, secondNumber, number1, number2;var firstNumber, secondNumber, number1, number2;

firstNumber = window.prompt("Enter month (1--12)", "1");firstNumber = window.prompt("Enter month (1--12)", "1");secondNumber = window.prompt("Enter day (1--31)", "1");secondNumber = window.prompt("Enter day (1--31)", "1");

number1 = parseInt(firstNumber);number1 = parseInt(firstNumber);number2 = parseInt(secondNumber);number2 = parseInt(secondNumber);if (1 <= number2 && number2 <= 31 &&if (1 <= number2 && number2 <= 31 &&

(number1 == 1 || number1 == 3 || number1 == 5 ||(number1 == 1 || number1 == 3 || number1 == 5 || number1 == 7 || number1 == 8 || number1 == 10 ||number1 == 7 || number1 == 8 || number1 == 10 || number1 == 12))number1 == 12))

{ document.writeln("<H1>Date is correct</H1>"); }{ document.writeln("<H1>Date is correct</H1>"); }else if (1 <= number2 && number2 <= 30 &&else if (1 <= number2 && number2 <= 30 &&

(number1 == 4 || number1 == 6 || number1 == 9 || number1 == 11 ))(number1 == 4 || number1 == 6 || number1 == 9 || number1 == 11 )){ document.writeln("<H1>Date is correct</H1>"); }{ document.writeln("<H1>Date is correct</H1>"); }

else if (1 <= number2 && number2 <= 29 && number1 == 2 )else if (1 <= number2 && number2 <= 29 && number1 == 2 ){ document.writeln("<H1>Date is correct</H1>"); }{ document.writeln("<H1>Date is correct</H1>"); }

elseelse{ document.writeln("<H1>Date is not correct!</H1>"); }{ document.writeln("<H1>Date is not correct!</H1>"); }

Browser EventsBrowser Events

EventEvent HTML SyntaxHTML Syntax

Page is loadedPage is loaded <BODYONLOAD = “function( )”><BODYONLOAD = “function( )”>

Button is pressedButton is pressed <INPUTTYPE = “button”<INPUTTYPE = “button”

VALUE = “command”VALUE = “command”

ONCLICK = “function( )”>ONCLICK = “function( )”>

Mouse is movedMouse is moved <BODYONMOUSEMOVE = <BODYONMOUSEMOVE = “function( )”>“function( )”>

Mouse over elementMouse over element <…ONMOUSEOVER = “function( )”><…ONMOUSEOVER = “function( )”>

Form entry activeForm entry active <INPUT…ONFOCUS = “function()”><INPUT…ONFOCUS = “function()”>




ServletsServlets

JavaServer Pages (JSP)JavaServer Pages (JSP)

Works on the Server side to add Works on the Server side to add functionality to HTML pagesfunctionality to HTML pages

Typically, JSP is used to add more Typically, JSP is used to add more complex functionality than JavaScriptcomplex functionality than JavaScript

JSP has a much closer relationship with JSP has a much closer relationship with Java Beans:Java Beans: Beans can be invoked from within JSP filesBeans can be invoked from within JSP files Indeed, this is recommended to separate the Indeed, this is recommended to separate the

GUI (html) from back-end code (Beans)GUI (html) from back-end code (Beans)

What does being a Bean mean?What does being a Bean mean?

In this context it is simply an instance of a In this context it is simply an instance of a Java class, conforming to an agreed Java class, conforming to an agreed pattern:pattern: The class has a no argument constructorThe class has a no argument constructor Properties are accessed through “get” Properties are accessed through “get”

methods (“is” methods in the case of methods (“is” methods in the case of booleans)booleans)

Properties are updated through “set” methodsProperties are updated through “set” methods A JSP file then knows how to interface to itA JSP file then knows how to interface to it

A Booking BeanA Booking Bean

public class BookingBean {public class BookingBean {private int month;private int month;private int day;private int day;private String name;private String name;private String number;private String number;private boolean smoking:private boolean smoking:

public BookingBean( ) { } // no argument constructorpublic BookingBean( ) { } // no argument constructor

public void setMonth(String mon)public void setMonth(String mon){month = Integer.parseInt(mon); }{month = Integer.parseInt(mon); }

public String getMonth( ) public String getMonth( ) {return “ “ + month;} …{return “ “ + month;} …

Using a Bean in JSPUsing a Bean in JSP

Within a Java Server Page, we may wish Within a Java Server Page, we may wish to update and read a particular instance of to update and read a particular instance of the BookingBean class.the BookingBean class.

There is a simple mapping from lines in a There is a simple mapping from lines in a JSP script, and the equivalent Java JSP script, and the equivalent Java statementsstatements

This mapping is enabled by usage of the This mapping is enabled by usage of the Java Bean coding guidelinesJava Bean coding guidelines

Creating and updating a BeanCreating and updating a Bean

<jsp : useBean id = “booker” class = “BookingBean”/><jsp : useBean id = “booker” class = “BookingBean”/>

Corresponds to the Java statement:Corresponds to the Java statement:

BookingBean booker = new BookingBean( );BookingBean booker = new BookingBean( );

<jsp : setProperty name = “booker” property = “month” <jsp : setProperty name = “booker” property = “month” param = “month”/>param = “month”/>

Corresponds to the Java statement:Corresponds to the Java statement:

booker.setMonth(request.getParameter(“month”));booker.setMonth(request.getParameter(“month”));

Note, in this last case Note, in this last case requestrequest is a Java object representing is a Java object representing an HTTP requestan HTTP request

Example jsp fileExample jsp file

<jsp : useBean id = “booker” class = “BookingBean”/><jsp : useBean id = “booker” class = “BookingBean”/><jsp : setProperty<jsp : setProperty name = “booker” property = “month” param = “month”/>name = “booker” property = “month” param = “month”/><jsp : setProperty<jsp : setProperty name = “booker” property = “day” param = “day”/>name = “booker” property = “day” param = “day”/>// …// …<HTML><HTML><HEAD><TITLE>Echo Parameters</TITLE></HEAD><HEAD><TITLE>Echo Parameters</TITLE></HEAD><BODY><BODY>Thank you, <jsp:getProperty name = “booker” property = Thank you, <jsp:getProperty name = “booker” property =

““name” /> for your booking. You requested …name” /> for your booking. You requested …

Java ServletsJava Servlets

Servlets use Java packages for server Servlets use Java packages for server side processing of internet applicationsside processing of internet applications

This is a pure Java approach, rather than This is a pure Java approach, rather than the hybrid Java/HTML approach of JSPthe hybrid Java/HTML approach of JSP

Can therefore write better structured, and Can therefore write better structured, and easier to debug applicationseasier to debug applications

SummarySummary

A quick survey of Java technologies for Internet A quick survey of Java technologies for Internet ApplicationsApplications

We saw the different needs of:We saw the different needs of: client-side programming - relatively light-weight client-side programming - relatively light-weight

processes for data validation and gui configurationprocesses for data validation and gui configuration server-side programming - more computationally server-side programming - more computationally

intensive applications with access to persistent data intensive applications with access to persistent data sourcessources

Structure these applications using ideas from Structure these applications using ideas from Software Components to avoid a serious mess!Software Components to avoid a serious mess!

component-based software engineering internet applications paul krause

Documents

client session beans

persistent data slide

public void paintgraphics

import java

internet programming

java javabased technologies

public class hellofromvenus

public int numberofitems