ice0534 – web-based software development ice1338 – programming for www lecture #5 lecture #5...

ICE0534 – ICE0534 – Web-based Software DevelopmentWeb-based Software Development

ICE1338 – ICE1338 – Programming for WWWProgramming for WWW

Lecture #5Lecture #5

In-Young Koiko .AT. icu.ac.kr

Information and Communications University (ICU)

- Summer 2005 -- Summer 2005 -

Summer 2005 2 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University

AnnouncementsAnnouncements

No class on Tuesday July 12No class on Tuesday July 12thth

Regular class on Thursday July 14Regular class on Thursday July 14thth

The The Ph.D. lecture proposalPh.D. lecture proposal is due by is due by Thursday, July 14Thursday, July 14thth

Include the Include the title and abstracttitle and abstract of the lecture in of the lecture in youryour proposalproposal

List the List the reading materialsreading materials


Last LectureLast Lecture

Dynamic Web DocumentsDynamic Web Documents JavaScriptJavaScript Technology ReviewsTechnology Reviews

DHTMLDHTML VBScriptVBScript

Technology SurveysTechnology Surveys Languages for dynamic Web documentsLanguages for dynamic Web documents Web browsers and authoring toolsWeb browsers and authoring tools


This LectureThis Lecture

Plug-ins and Multimedia PresentationsPlug-ins and Multimedia Presentations Java Applets & Java Plug-inJava Applets & Java Plug-in Communication between Applets and Web Communication between Applets and Web

documentsdocuments SVG (Scalable Vector Graphics)SVG (Scalable Vector Graphics)

Technology ReviewTechnology Review X3D [u4: X3D [u4: EnkhboldEnkhbold]]

Technology SurveyTechnology Survey Plug-in Software [g4: Plug-in Software [g4: Changsun SongChangsun Song]]


What We Need More…What We Need More…

More computing capability at the client More computing capability at the client sideside

Advanced graphical presentationsAdvanced graphical presentations More sophisticated and dynamic user More sophisticated and dynamic user

interfacesinterfaces Capabilities of playing multimedia clipsCapabilities of playing multimedia clips


Plug-insPlug-ins

Code modules that are inserted into the Code modules that are inserted into the browserbrowser

Adds new capabilities to the Web browserAdds new capabilities to the Web browser e.g.,e.g.,

http://wp.netscape.com/plugins/?cp=brictrpr3


Java AppletsJava Applets Applets are relatively small Java programs Applets are relatively small Java programs

whose execution is whose execution is triggered by a browsertriggered by a browser The purpose of an applet is to provide The purpose of an applet is to provide

processing capabilityprocessing capability and and interactivityinteractivity for HTML for HTML documents documents through widgetsthrough widgets

The The ‘standard’ operations‘standard’ operations of applets are of applets are provided by the parent class, JAppletprovided by the parent class, JApplet

public class class_name extends JApplet { … }public class class_name extends JApplet { … } Use of applets is still widespread, and there is Use of applets is still widespread, and there is

heavy use in intranetsheavy use in intranets Applets are an alternative to CGI and Applets are an alternative to CGI and

embedded client-side scriptsembedded client-side scriptsAW lecture notes


Applets vs. JavaScript (CGI)Applets vs. JavaScript (CGI)

CGI is faster than applets and JavaScript, but it CGI is faster than applets and JavaScript, but it is run on the serveris run on the server

JavaScript is easier to learn and use than Java, JavaScript is easier to learn and use than Java, but less expressivebut less expressive

Java is Java is fasterfaster than JavaScript than JavaScript Java Java graphics are powerfulgraphics are powerful, but JavaScript has , but JavaScript has

nonenone JavaScript does not require the JavaScript does not require the additional additional

downloaddownload from the server that is required for from the server that is required for appletsapplets

Java may become more of a server-side tool, in Java may become more of a server-side tool, in the form of servlets, than a client-side toolthe form of servlets, than a client-side tool AW lecture notes


Browser Actions for Running AppletsBrowser Actions for Running Applets

1.1. Download and instantiate the applet classDownload and instantiate the applet class2.2. Call the applet’s Call the applet’s initinit method method3.3. Call the applet’s Call the applet’s startstart method – This method – This

starts the execution of the appletstarts the execution of the applet4.4. When the user takes a link from the When the user takes a link from the

document that has the applet, the document that has the applet, the browser calls the applet’s browser calls the applet’s stopstop method method

5.5. When the browser is stopped by the user, When the browser is stopped by the user, the browser calls the applet’s the browser calls the applet’s destroydestroy methodmethod

AW lecture notes

Summer 2005 10

ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University

An ExampleAn ExampleA Scrolling BannerA Scrolling Banner

public class AppletTest public class AppletTest extends JAppletextends JApplet { { private String msg;private String msg; private boolean needToStop = false;private boolean needToStop = false;

public void public void init()init() { { msg = msg = getParametergetParameter("message");("message"); setFont(new Font("Arial", Font.BOLD, 24));setFont(new Font("Arial", Font.BOLD, 24)); }} public void public void start()start() { {

repaint();repaint(); }} public void public void paint(Graphics g)paint(Graphics g) { {

g.setColor(Color.blue);g.setColor(Color.blue); int x = getWidth(), y = 20;int x = getWidth(), y = 20; while (!needToStop && x > 20) {while (!needToStop && x > 20) { try { Thread.sleep(10); } catch(Exception e) { }try { Thread.sleep(10); } catch(Exception e) { } g.clearRect(0, 0, getWidth(), getHeight());g.clearRect(0, 0, getWidth(), getHeight()); g.drawString(msg, x--, y);g.drawString(msg, x--, y); }}

}} public void public void stop()stop() { {

needToStop = true;needToStop = true; }}}}

<applet code="AppletTest.class“ width=600 height=50> <param name=“message” value="Information and Communications University"></applet>

HTML DocumentHTML Document

Applet CodeApplet Code

Summer 2005 11


Applet ParametersApplet Parameters

Applets can be sent parameters through HTML, using the Applets can be sent parameters through HTML, using the <param><param> tag and its two attributes, tag and its two attributes, namename and and valuevalue Parameter values are strings - e.g., <param name = "fruit" value Parameter values are strings - e.g., <param name = "fruit" value

= "apple">= "apple"> The applet gets the parameter values with The applet gets the parameter values with getParametergetParameter, ,

which takes the name of the parameterwhich takes the name of the parameter e.g., e.g., String myFruit = getParameter("fruit");String myFruit = getParameter("fruit"); If no parameter with the given name has been specified in the If no parameter with the given name has been specified in the

HTML document, getParameter returns nullHTML document, getParameter returns null If the parameter value is not really a string, the value If the parameter value is not really a string, the value

returned from getParameter must be converted like:returned from getParameter must be converted like:String pString = getParameter("size");String pString = getParameter("size");if (pString == null) mySize = 24;if (pString == null) mySize = 24;else mySize = Integer.parseInt(pString);else mySize = Integer.parseInt(pString);

The best place to put the code to get parameters is in The best place to put the code to get parameters is in initinitAW lecture notes

Summer 2005 12


The JApplet ClassThe JApplet Class

An applet is An applet is a panela panel that can be embedded in that can be embedded in a Web browser windowa Web browser window

An applet panel can An applet panel can contain other GUI contain other GUI componentscomponents (e.g., buttons, menus, …), and (e.g., buttons, menus, …), and customized drawingscustomized drawings (using the ‘paint’ (using the ‘paint’ method)method)

External framesExternal frames can be created from an applet can be created from an applet

Summer 2005 13


Paint Method in AppletPaint Method in Applet

Always Always called by the browsercalled by the browser (not the applet (not the applet itself) when it displays/refreshes its windowitself) when it displays/refreshes its window

Takes one parameter, an object of class Takes one parameter, an object of class GraphicsGraphics, which is defined in java.awt, which is defined in java.awt

The protocol of the paint method is:The protocol of the paint method is:public void paint(Graphics grafObj) { … }public void paint(Graphics grafObj) { … }

The Graphics object is The Graphics object is created by the browsercreated by the browser Methods in Graphics: Methods in Graphics: drawImage, drawLine, drawImage, drawLine,

drawOval, drawPolygon, drawRect, drawString, drawOval, drawPolygon, drawRect, drawString, fillOval, fillPolygon, fillRect, …fillOval, fillPolygon, fillRect, …

AW lecture notes

Summer 2005 14


Applet GUI StructureApplet GUI Structure

http://java.sun.com/products/jfc/tsc/articles/containers/index.html

Summer 2005 15


Java GUI Component LayersJava GUI Component Layers

http://java.sun.com/docs/books/tutorial/uiswing/components/rootpane.html

Layered PaneLayered Pane

Summer 2005 16


Java GUI Program ExampleJava GUI Program Example

JLabel queryLabel = JLabel queryLabel = new JLabel("Query: ");new JLabel("Query: ");JTextField queryField = JTextField queryField = new JTextField(20);new JTextField(20);JButton searchButton = JButton searchButton = new JButton("Search");new JButton("Search");searchButton.searchButton.addActionListeneraddActionListener(new ActionListener() {(new ActionListener() {

public void actionPerformed(ActionEvent e) {public void actionPerformed(ActionEvent e) { // search action// search action}}

});});

JPanel mainPanel = JPanel mainPanel = new JPanel();new JPanel();mainPanel.mainPanel.addadd(queryLabel);(queryLabel);mainPanel.mainPanel.addadd(queryField);(queryField);mainPanel.mainPanel.addadd(searchButton);(searchButton);

JFrame mainFrame = JFrame mainFrame = new JFrame("Search Input");new JFrame("Search Input");mainFrame.mainFrame.getContentPane().addgetContentPane().add(mainPanel);(mainPanel);mainFrame.mainFrame.packpack();();mainFrame.mainFrame.showshow();();

Summer 2005 17


Event Handling in JavaEvent Handling in Java An An eventevent is created by an external action such as is created by an external action such as

a user interaction through a GUIa user interaction through a GUI The The event handlerevent handler ( (event listenerevent listener) is a segment ) is a segment

of code that is called in response to an eventof code that is called in response to an event

JButton helloButton = new JButton(“Hello”);JButton helloButton = new JButton(“Hello”); helloButton.helloButton.addActionListeneraddActionListener(new AbstractAction() {(new AbstractAction() {

public void public void actionPerformedactionPerformed(ActionEvent e) {(ActionEvent e) { System.out.println(“Hello World!”);System.out.println(“Hello World!”); }} }}

A JButtonA JButtonEvent ListenersEvent Listeners

Button Pressed EventButton Pressed Event

Summer 2005 18


Event Listener RegistrationEvent Listener Registration

Connection of an event to a listener is Connection of an event to a listener is established through established through event listener registrationevent listener registration Done with a method of the class that implements the Done with a method of the class that implements the

listener interface (e.g., listener interface (e.g., ActionListenerActionListener)) The panel object that holds the components can be The panel object that holds the components can be

the event listener for those componentsthe event listener for those components Event generators send messages (call methods, Event generators send messages (call methods,

e.g., e.g., actionPerformedactionPerformed) to registered event listeners ) to registered event listeners when events occurwhen events occur

Event handling methods must conform to a standard Event handling methods must conform to a standard protocol, which comes from an interfaceprotocol, which comes from an interface

Summer 2005 19


Event Classes and Handler MethodsEvent Classes and Handler Methods

Semantic Event ClassesSemantic Event Classes ActionEventActionEvent - click a button, select from a menu or list, or type - click a button, select from a menu or list, or type

the enter button in a text fieldthe enter button in a text field ItemEventItemEvent - select a checkbox or list item - select a checkbox or list item TextEventTextEvent - change the contents of a text field or text area - change the contents of a text field or text area

For the two most commonly used events, ActionEvent For the two most commonly used events, ActionEvent and ItemEvent, there are the following interfaces and and ItemEvent, there are the following interfaces and handler methods:handler methods:

InterfaceInterface Handler methodHandler method-------------------------------------- --------------------------------------------------ActionListenerActionListener actionPerformedactionPerformedItemListenerItemListener itemStateChangeditemStateChanged

The methods to register the listener is the interface name The methods to register the listener is the interface name with “add” prependedwith “add” prepended

e.g., e.g., button1.addActionListener(this);button1.addActionListener(this);

Summer 2005 20


Concurrency in JavaConcurrency in Java

““A program is said to be A program is said to be concurrentconcurrent if it contains if it contains more than one active execution contextmore than one active execution context” ” [M. Scott][M. Scott]

void concurrentPrint() {void concurrentPrint() {

(new Thread () {(new Thread () { public void public void runrun() {() { while (true) {while (true) { try { System.out.print("A"); sleep(0,1);try { System.out.print("A"); sleep(0,1); } catch (Exception e) { }} catch (Exception e) { } }} }).}).startstart();();

(new Thread () {(new Thread () { public void public void runrun() {() { while (true) {while (true) { try { System.out.print("B"); sleep(0,1);try { System.out.print("B"); sleep(0,1); } catch (Exception e) { }} catch (Exception e) { } }} }).}).startstart();();}} Java

Forking two concurrent Forking two concurrent execution threadsexecution threads

Main Program ControlMain Program Control

Printing “A”Printing “A” Printing “B”Printing “B”

Summer 2005 21


Java ThreadsJava Threads A thread of controlA thread of control is a sequence of program points is a sequence of program points

reached as execution flows through the programreached as execution flows through the program Java threads are Java threads are lightweight taskslightweight tasks – all threads run in the – all threads run in the

same address spacesame address space c.f., Ada tasks are c.f., Ada tasks are heavyweightheavyweight threads ( threads (processesprocesses) that run in ) that run in

their own address spacestheir own address spaces

The The concurrent program unitsconcurrent program units in Java are methods in Java are methods named named runrun, whose code can be in concurrent execution , whose code can be in concurrent execution with other run methods and with mainwith other run methods and with main

There are two ways to implement threads, as a subclass There are two ways to implement threads, as a subclass of of ThreadThread and by implementing the interface and by implementing the interface RunnableRunnable

Two essential methods:Two essential methods: runrun is the concurrent method is the concurrent method startstart tells the run method to begin execution tells the run method to begin execution

Summer 2005 22


Thread MethodsThread Methodsclass MyThread extends class MyThread extends ThreadThread { { public void public void run()run() { { … … // Task body// Task body … … }}}}……Thread aTask = new MyThread();Thread aTask = new MyThread();aTask.aTask.start()start();;……aTask.aTask.setPrioritysetPriority(Thread.MAX_PRIORITY);(Thread.MAX_PRIORITY);……aTask.aTask.yieldyield();();……aTask.aTask.sleepsleep(2000);(2000);……aTask.aTask.join()join();;……

Concurrent method Concurrent method definitiondefinition

Tells the run method to Tells the run method to begin executionbegin execution

Sets the scheduling prioritySets the scheduling priority

Gives up the processor to Gives up the processor to other threadsother threads

Blocks the thread for some Blocks the thread for some millisecondsmilliseconds

Waits for the thread to Waits for the thread to completecomplete

Summer 2005 23


An Applet with A ThreadAn Applet with A Threadpublic class AppletTestThread extends JApplet public class AppletTestThread extends JApplet implements Runnableimplements Runnable { { private String msg;private String msg; private boolean needToStop = false;private boolean needToStop = false; private int x, y;private int x, y;

public void init() {public void init() { msg = getParameter("message");msg = getParameter("message"); setFont(new Font("Arial", Font.BOLD, 24));setFont(new Font("Arial", Font.BOLD, 24));

x = getWidth(); y = 20;x = getWidth(); y = 20; }} public void start() {public void start() {

Thread appletThread = new Thread(this);Thread appletThread = new Thread(this); appletThread.start();appletThread.start();

}} public void public void run()run() { {

while (!needToStop && x-- > 20) {while (!needToStop && x-- > 20) { try { Thread.sleep(10); } catch(Exception e) { }try { Thread.sleep(10); } catch(Exception e) { } repaint();repaint(); }}

}} public void paint(Graphics g) {public void paint(Graphics g) {

g.setColor(Color.blue);g.setColor(Color.blue); g.clearRect(0, 0, getWidth(), getHeight());g.clearRect(0, 0, getWidth(), getHeight()); g.drawString(msg, x, y);g.drawString(msg, x, y);

} …} …}}

Summer 2005 24


Applet & Swing ReferencesApplet & Swing References

How to make Applets:How to make Applets: http://java.sun.com/docs/books/tutorial/uiswing/components/applet.http://java.sun.com/docs/books/tutorial/uiswing/components/applet.htmlhtml

The Swing Tutorial:The Swing Tutorial: http://java.sun.com/docs/books/tutorial/uiswing/http://java.sun.com/docs/books/tutorial/uiswing/

Painting in AWT and Swing:Painting in AWT and Swing: http://java.sun.com/products/jfc/tsc/articles/painting/http://java.sun.com/products/jfc/tsc/articles/painting/

Understanding Containers:Understanding Containers: http://java.sun.com/products/jfc/tsc/articles/containers/index.htmlhttp://java.sun.com/products/jfc/tsc/articles/containers/index.html

Summer 2005 25


Java Plug-inJava Plug-in Extends the functionality of a web browser, Extends the functionality of a web browser,

allowing applets to be allowing applets to be run under Sun's Java 2 run under Sun's Java 2 runtime environment (JRE)runtime environment (JRE) rather than the Java rather than the Java runtime environment that comes with the web runtime environment that comes with the web browserbrowser

Java Plug-in is part of Sun's JRE and is Java Plug-in is part of Sun's JRE and is installed with it when the JRE is installed on a installed with it when the JRE is installed on a computer or can be computer or can be automatically downloadedautomatically downloaded

Works with both Netscape and Internet ExplorerWorks with both Netscape and Internet Explorer Makes it more suitable for Makes it more suitable for widespread use on widespread use on

consumer client machinesconsumer client machines that typically are not that typically are not as powerful as client platforms as powerful as client platforms http://java.sun.com/j2se/1.4.2/docs/guide/plugin/developer_guide/contents.html

Summer 2005 26


Java Plug-in TagsJava Plug-in TagsInternet ExplorerInternet Explorer<<OBJECTOBJECT classidclassid="clsid:CAFEEFAC-0014-0002-0000-ABCDEFFEDCBA" ="clsid:CAFEEFAC-0014-0002-0000-ABCDEFFEDCBA"

width=“600" height=“50" width=“600" height=“50" codebasecodebase="http://java.sun.com/products/plugin/autodl/="http://java.sun.com/products/plugin/autodl/ jinstall-1_4_2-windows-i586.cab"> jinstall-1_4_2-windows-i586.cab">

<PARAM name="<PARAM name="codecode" value=“AppletTest.class"> " value=“AppletTest.class"> <PARAM name="<PARAM name="codebasecodebase" value=“http://bigbear.icu.ac.kr/~iko/classes/ice1338/">" value=“http://bigbear.icu.ac.kr/~iko/classes/ice1338/"> <PARAM name="<PARAM name="typetype" value="application/x-java-applet;jpi-version=1.4.2">" value="application/x-java-applet;jpi-version=1.4.2"> <PARAM name=“message" value=“Information and Communications University”><PARAM name=“message" value=“Information and Communications University”></OBJECT></OBJECT>

NetscapeNetscape<<EMBEDEMBED typetype="application/x-java-applet;jpi-version=1.4.2“ width="200" height="200“="application/x-java-applet;jpi-version=1.4.2“ width="200" height="200“

pluginspagepluginspage="http://java.sun.com/j2se/1.4.2/download.html"="http://java.sun.com/j2se/1.4.2/download.html"codebasecodebase="http://bigbear.icu.ac.kr/~iko/classes/ice1338/ “="http://bigbear.icu.ac.kr/~iko/classes/ice1338/ “codecode=“AppletTest.class“=“AppletTest.class“message=“Information and Communications University“>message=“Information and Communications University“>

<NOEMBED>No Java 2 SDK, Standard Edition v 1.4.2 support for APPLET!! <NOEMBED>No Java 2 SDK, Standard Edition v 1.4.2 support for APPLET!! </NOEMBED></NOEMBED></EMBED> </EMBED>

Static Static VersioningVersioning

Summer 2005 27


Autodownload Files Autodownload Files

http://java.sun.com/j2se/1.5.0/docs/guide/deployment/deployment-guide/autodl-files.html

Summer 2005 28


Java Plug-in Tags Java Plug-in Tags (cont.)(cont.)

Combined FormCombined Form

<<OBJECTOBJECT classidclassid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" ="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" width=“600" height=“50" width=“600" height=“50" codebasecodebase="http://java.sun.com/products/plugin/autodl/="http://java.sun.com/products/plugin/autodl/ jinstall-1_4_2-windows-i586.cab#Version=1,4,2,0"> jinstall-1_4_2-windows-i586.cab#Version=1,4,2,0">

<PARAM name="<PARAM name="codecode" value=“AppletTest.class"> " value=“AppletTest.class"> <PARAM name="<PARAM name="codebasecodebase" value="http://bigbear.icu.ac.kr/~iko/classes/ice1338/">" value="http://bigbear.icu.ac.kr/~iko/classes/ice1338/"> <PARAM name="<PARAM name="typetype" value="application/x-java-applet;jpi-version=1.4.2">" value="application/x-java-applet;jpi-version=1.4.2"> <PARAM name=“message" value=“Information and Communications University”><PARAM name=“message" value=“Information and Communications University”> <COMMENT><COMMENT> <<EMBEDEMBED typetype="application/x-java-applet;jpi-version=1.4.2“ width="200" height="200“ ="application/x-java-applet;jpi-version=1.4.2“ width="200" height="200“

pluginspagepluginspage==http://java.sun.com/j2se/1.4.2/download.htmlhttp://java.sun.com/j2se/1.4.2/download.html codecode=“AppletTest.class“=“AppletTest.class“ codebasecodebase="http://bigbear.icu.ac.kr/~iko/classes/ice1338/ “="http://bigbear.icu.ac.kr/~iko/classes/ice1338/ “ message=“Information and Communications University">message=“Information and Communications University">

<NOEMBED>No Java 2 SDK, Standard Edition v 1.4.2 support for APPLET!! <NOEMBED>No Java 2 SDK, Standard Edition v 1.4.2 support for APPLET!! </NOEMBED></NOEMBED> </EMBED> </EMBED> </COMMENT></COMMENT></OBJECT></OBJECT>

Dynamic Dynamic VersioningVersioning

“If no version of Java is installed, or a version less than the major version of the family is installed, then this will cause automatic redirection to the latest .cab for the latest version in the family.”

“If no version of Java is installed, or a version less than the major version of the family is installed, then this will cause automatic redirection to the latest .cab for the latest version in the family.”

Summer 2005 29


Other Plug-insOther Plug-ins Macromedia Flash PlayerMacromedia Flash Player

<object <object classid=“clsid:D27CDB6E-AE6D-11cf-96B8-444553540000”classid=“clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” codebase=“codebase=“http://download.macromedia.com/pub/http://download.macromedia.com/pub/ shockwave/cabs/flash/swflash.cab#version=6,0,29,0shockwave/cabs/flash/swflash.cab#version=6,0,29,0”” width="832" height="240">width="832" height="240"> <param name="movie" value="images/flash/intropic.swf"><param name="movie" value="images/flash/intropic.swf"> <param name="quality" value="high"><param name="quality" value="high"> <embed src="images/flash/intropic.swf" quality="high" <embed src="images/flash/intropic.swf" quality="high"

pluginspage="http://www.macromedia.com/go/getflashplayer" pluginspage="http://www.macromedia.com/go/getflashplayer"

type="application/x-shockwave-flash“type="application/x-shockwave-flash“ width="832" height="240">width="832" height="240"> </embed></embed></object></object>

Summer 2005 30


LiveConnectLiveConnect Developed by Netscape Inc. in 1996Developed by Netscape Inc. in 1996 Allows Web browser Allows Web browser plug-insplug-ins, , Java AppletsJava Applets, ,

and and JavaScriptJavaScript to communicate with each other to communicate with each other Java to JavaScript Communication Java to JavaScript Communication JavaScript to Java Communication JavaScript to Java Communication JavaScript to Plug-in Communication JavaScript to Plug-in Communication Java to Plug-in CommunicationJava to Plug-in Communication

http://wp.netscape.com/navigator/v3.0/liveconnect.html

Summer 2005 31


LiveConnect ExampleLiveConnect Example

Applet

JavaScript

A Form

A Paragraph

HTML (DOM)

Summer 2005 32


The Applet CodeThe Applet Codeimportimport netscape.javascript.*netscape.javascript.*;;……public class AppletTest extends JApplet implements Runnable {public class AppletTest extends JApplet implements Runnable { private delay = 10; private Color bgColor = Color.white, fgColor = private delay = 10; private Color bgColor = Color.white, fgColor =

Color.blue;Color.blue; private private JSObjectJSObject window, document, location; window, document, location; … …public void init() {public void init() { … … window = window = JSObject.getWindowJSObject.getWindow(this);(this); document = (JSObject)window.document = (JSObject)window.getMembergetMember("document");("document"); location = (JSObject)document.location = (JSObject)document.getMembergetMember("location");("location"); getContentPane().addMouseListener(new MouseAdapter() {getContentPane().addMouseListener(new MouseAdapter() {

public void mouseClicked(MouseEvent e) {public void mouseClicked(MouseEvent e) { String colCode = Integer.toHexString(bgColor.getRGB());String colCode = Integer.toHexString(bgColor.getRGB()); colCode = "#" + colCode.substring(2);colCode = "#" + colCode.substring(2); document.document.evaleval("setBodyBackround(\"" + colCode + "\")");("setBodyBackround(\"" + colCode + "\")"); }}

});});}}public void setColor(public void setColor(StringString newbgColor, newbgColor, StringString newfgColor) { newfgColor) { bgColor = Color.decode(newbgColor); fgColor = Color.decode(newfgColor);bgColor = Color.decode(newbgColor); fgColor = Color.decode(newfgColor); setBackground(bgColor);setBackground(bgColor); start();start();}}public void setDelay(public void setDelay(StringString milisec) { milisec) { delay = delay = Integer.parseIntInteger.parseInt(milisec);(milisec); start();start();}}……

Methods to be Methods to be called by called by JavaScriptJavaScript

Accessing DOM Accessing DOM elements via JSObjectelements via JSObject

Calling a function in Calling a function in JavaScriptJavaScript

Summer 2005 33


JSObjectJSObject A A Java-side objectJava-side object that allows the Java program to that allows the Java program to

interact with JavaScriptinteract with JavaScript Main Methods:Main Methods:

callcall: calls a JavaScript method : calls a JavaScript method evaleval: evaluates a JavaScript expression : evaluates a JavaScript expression getMembergetMember: retrieves a named member of an object : retrieves a named member of an object getSlotgetSlot: retrieves an indexed member of an object : retrieves an indexed member of an object setMembersetMember: sets a named member of an object : sets a named member of an object setSlotsetSlot: sets an indexed member of an object : sets an indexed member of an object removeMemberremoveMember: removes a named member of an : removes a named member of an

objectobject To compile the applet, ‘To compile the applet, ‘jaws.jarjaws.jar’, which is ’, which is

available in JRE must be included in the available in JRE must be included in the classpathclasspathhttp://developer.netscape.com/docs/technote/javascript/liveconnect/liveconnect_rh.html

Summer 2005 34


The HTML CodeThe HTML Code <body><body> <OBJECT<OBJECT ID=" ID="icuAppleticuApplet" WIDTH="600" HEIGHT="50" border="0" classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"" WIDTH="600" HEIGHT="50" border="0" classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"

ALIGN="middle“ codebase="http://java.sun.com/products/plugin/1.4/jinstall-14-win32.cab#Version=1,4,0,mn">ALIGN="middle“ codebase="http://java.sun.com/products/plugin/1.4/jinstall-14-win32.cab#Version=1,4,0,mn"> <PARAM NAME=CODE VALUE="<PARAM NAME=CODE VALUE="AppletTestLiveConnect.classAppletTestLiveConnect.class" >" > <PARAM NAME=CODEBASE VALUE="./"><PARAM NAME=CODEBASE VALUE="./"> <PARAM NAME="type" VALUE="application/x-java-applet;jpi-version=1.4"><PARAM NAME="type" VALUE="application/x-java-applet;jpi-version=1.4"> <PARAM NAME="scriptable" VALUE="true"><PARAM NAME="scriptable" VALUE="true"> <PARAM NAME="<PARAM NAME="messagemessage" VALUE="" VALUE="Information and Communications UniversityInformation and Communications University">"> <COMMENT><COMMENT>

<EMBED ID="<EMBED ID="icuAppleticuApplet" type="application/x-java-applet;jpi-version=1.4" CODE="" type="application/x-java-applet;jpi-version=1.4" CODE="AppletTestLiveConnect.classAppletTestLiveConnect.class““ CODEBASE="./" WIDTH="600" HEIGHT="50“ ALIGN="middle" CODEBASE="./" WIDTH="600" HEIGHT="50“ ALIGN="middle" message="Information and Communications University"message="Information and Communications University" scriptable=true pluginspage="http://java.sun.com/products/plugin/1.4/plugin-install.html">scriptable=true pluginspage="http://java.sun.com/products/plugin/1.4/plugin-install.html"></EMBED></EMBED>

</COMMENT></COMMENT> </OBJECT></OBJECT>

<FORM <FORM NAME="widgets1">NAME="widgets1"> Select Background Color:Select Background Color: <SELECT NAME="backgroundColor" <SELECT NAME="backgroundColor" onChange="onChange="setColor(this.form)setColor(this.form)"">> <OPTION SELECTED VALUE="#FFFFFF">White</OPTION><OPTION VALUE="#000000">Black</OPTION> …<OPTION SELECTED VALUE="#FFFFFF">White</OPTION><OPTION VALUE="#000000">Black</OPTION> … </SELECT></SELECT> Select Text Color:Select Text Color: <SELECT NAME="foregroundColor" <SELECT NAME="foregroundColor" onChange="onChange="setColor(this.form)setColor(this.form)"">> <OPTION VALUE="#FFFFFF">White</OPTION> …<OPTION VALUE="#FFFFFF">White</OPTION> … </SELECT><BR/></SELECT><BR/> Enter the delay time in miliseconds:Enter the delay time in miliseconds: <INPUT NAME="delay" TYPE="text" VALUE="10" <INPUT NAME="delay" TYPE="text" VALUE="10" onChange="onChange="setDelay(this.form)setDelay(this.form)""/>/>

</FORM></FORM>……

Calling JavaScript Calling JavaScript functionsfunctions

Summer 2005 35


The JavaScript CodeThe JavaScript Code

<script language = "JavaScript"><script language = "JavaScript">

function setDelay(form) {function setDelay(form) { var milisec = form.delay.value;var milisec = form.delay.value;

// send data to applet// send data to applet document.icuApplet.setDelay(milisec);document.icuApplet.setDelay(milisec);

}}

function setColor(form) {function setColor(form) { var bg = form.backgroundColor.options[form.backgroundColor.selectedIndex].value;var bg = form.backgroundColor.options[form.backgroundColor.selectedIndex].value; var fg = form.foregroundColor.options[form.foregroundColor.selectedIndex].value;var fg = form.foregroundColor.options[form.foregroundColor.selectedIndex].value; // send data to applet// send data to applet document.document.icuApplet.setColoricuApplet.setColor(bg, fg);(bg, fg); }}

function setBodyBackround(bgColor) {function setBodyBackround(bgColor) { alert("Setting the background color to "+bgColor);alert("Setting the background color to "+bgColor); document.body.setAttribute("bgColor", bgColor);document.body.setAttribute("bgColor", bgColor); }}</script></script>

Function to be called Function to be called by the Java Appletby the Java Applet

Calling the methods Calling the methods in the Java Appletin the Java Applet

Summer 2005 36


Calling Applet Methods from Calling Applet Methods from JavaScriptJavaScript

documentdocument.appletName.varName.appletName.varName documentdocument.appletName.methodName(para.appletName.methodName(para

meters)meters) documentdocument..appletsapplets[i].varName[i].varName documentdocument..appletsapplets[i].methodName(param[i].methodName(param

eters)eters)

Summer 2005 37


References for Java/JavaScript References for Java/JavaScript ConnectionConnection

LiveConnect: LiveConnect: http://developer.netscape.com/docs/technote/javascript/liveconnect/liveconhttp://developer.netscape.com/docs/technote/javascript/liveconnect/liveconnect_rh.htmlnect_rh.html

The Java/JavaScript Connection by Danny Goodman: The Java/JavaScript Connection by Danny Goodman: http://developer.netscape.com/viewsource/archive/goodman_liveconnect.hhttp://developer.netscape.com/viewsource/archive/goodman_liveconnect.htmltml

Java-to-Javascript Communication: Java-to-Javascript Communication: http://java.sun.com/j2se/1.4.2/docs/guide/plugin/developer_guide/java_js.hhttp://java.sun.com/j2se/1.4.2/docs/guide/plugin/developer_guide/java_js.htmltml

How Java to Javascript Communication Works in Java How Java to Javascript Communication Works in Java Plug-in: Plug-in: http://java.sun.com/products/plugin/1.3/docs/jsobject.html http://java.sun.com/products/plugin/1.3/docs/jsobject.html

JSObject API: JSObject API: http://wp.netscape.com/eng/mozilla/3.0/handbook/plugins/doc/netscape.javhttp://wp.netscape.com/eng/mozilla/3.0/handbook/plugins/doc/netscape.javascript.JSObject.htmlascript.JSObject.html

JavaScript DOM: http://krook.org/jsdom/JavaScript DOM: http://krook.org/jsdom/

Summer 2005 38


SVG (Scalable Vector Graphics)SVG (Scalable Vector Graphics)

SVG is a language for describing SVG is a language for describing two-two-dimensional graphicsdimensional graphics in XML in XML

Three types of graphic objects: Three types of graphic objects: Vector graphicVector graphic shapesshapes, , ImagesImages, and , and TextText

Graphical objects can be Graphical objects can be grouped, styled, grouped, styled, transformed and compositedtransformed and composited into previously into previously rendered objectsrendered objects

SVG drawings can be dynamic and interactiveSVG drawings can be dynamic and interactive AnimationAnimation Zoom and panZoom and pan Activation of animation or scriptActivation of animation or script

http://www.w3.org/TR/SVG/

Summer 2005 39


SVG ElementsSVG Elements Basic ShapesBasic Shapes

Rectangles (including Rectangles (including optional rounded corners) optional rounded corners)

Circles Circles Ellipses Ellipses Lines Lines Polylines Polylines PolygonsPolygons

PathsPaths TextText AnimationAnimation Scripting (JavaScript)Scripting (JavaScript)

Summer 2005 40


A SVG ExampleA SVG Example

……<h3 id="students">Students</h3><h3 id="students">Students</h3>Here are the pictures of the Here are the pictures of the students:<br/>students:<br/><embed <embed src="src="svg_student_picture.svgsvg_student_picture.svg" " type="image/svg-xml"type="image/svg-xml" width="500" height="360" width="500" height="360" name="students"name="students" border="0">border="0">……

Summer 2005 41


A SVG Example – 2D GraphicsA SVG Example – 2D Graphics

<?xml version="1.0" standalone="no"?><?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" ""http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtdhttp://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">">

<svg width="500px" height="360px"<svg width="500px" height="360px" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg">><<imageimage x="0" y="0" width="100%" height="100%" x="0" y="0" width="100%" height="100%"

xlink:href="ice1338_students1.JPG" />xlink:href="ice1338_students1.JPG" /><<gg id="students" font-size="16"> id="students" font-size="16"><<rectrect x="75" y="120" width="90" height="18" fill="white"/> x="75" y="120" width="90" height="18" fill="white"/><a xlink:href="http://vega.icu.ac.kr/~bswc28/"><a xlink:href="http://vega.icu.ac.kr/~bswc28/"><<texttext x="78" y="135" fill="blue">Moses Kim</text></a> x="78" y="135" fill="blue">Moses Kim</text></a><<rectrect x="120" y="40" width="140" height="18" fill="white"/> x="120" y="40" width="140" height="18" fill="white"/><<texttext x="123" y="55" fill="blue">Byung-woo Kang</text> x="123" y="55" fill="blue">Byung-woo Kang</text><<lineline x1="260" y1="58" x2="290" y2="120" stroke="white" stroke-width="2" /> x1="260" y1="58" x2="290" y2="120" stroke="white" stroke-width="2" /><<pathpath dd="="MM 290 120 290 120 LL 280 110 280 110 LL 288 106 288 106 zz" fill="white" " fill="white"

stroke="white" stroke-width="2" />stroke="white" stroke-width="2" />……</g></g> svg_student_picture.svgsvg_student_picture.svg

Summer 2005 42


A SVG Example – AnimationA SVG Example – Animation

……<<texttext id="TextElement" x="0" y="0" id="TextElement" x="0" y="0" font-family="Arial" font-size="30" visibility="hidden"> font-family="Arial" font-size="30" visibility="hidden"> Go ICU !!Go ICU !! <<setset attributeName="visibility" attributeType="CSS" attributeName="visibility" attributeType="CSS"

to="visible" begin="1s" dur="6s" fill="freeze" />to="visible" begin="1s" dur="6s" fill="freeze" /> <<animateMotionanimateMotion path=" path="MM 200 50 200 50 LL 100 350" 100 350"

begin="1s" dur="6s" fill="freeze" />begin="1s" dur="6s" fill="freeze" /> <<animateColoranimateColor attributeName="fill" attributeType="CSS" attributeName="fill" attributeType="CSS"

from="rgb(255,255,0)" to="rgb(0,0,255)"from="rgb(255,255,0)" to="rgb(0,0,255)"begin="1s" dur="6s" fill="freeze" />begin="1s" dur="6s" fill="freeze" />

<<animateTransformanimateTransform attributeName="transform" attributeType="XML" attributeName="transform" attributeType="XML" type="scale" from="1" to="2" additive="sum" begin="1s" dur="6s" type="scale" from="1" to="2" additive="sum" begin="1s" dur="6s" fill="freeze" />fill="freeze" />

</text></text>……</svg></svg> svg_student_picture.svgsvg_student_picture.svg

Summer 2005 43


SVG ReferencesSVG References

W3C SVG Page: W3C SVG Page: http://www.w3.org/Graphics/SVG/http://www.w3.org/Graphics/SVG/

Adobe SVG Zone: Adobe SVG Zone: http://www.adobe.com/svg/http://www.adobe.com/svg/

Mozilla SVG Project: Mozilla SVG Project: http://www.mozilla.org/projects/svg/http://www.mozilla.org/projects/svg/

Summer 2005 44


Programming Homework #3Programming Homework #3

Due Date: Due Date: Tuesday July 19Tuesday July 19thth, 2005, 2005 Make your Web page dynamicMake your Web page dynamic

Add a simple Java Applet to your Web pageAdd a simple Java Applet to your Web page You can either make your own Applet or copy an You can either make your own Applet or copy an

Applet code that is available on the WebApplet code that is available on the Web Make the Java Applet interact with a Make the Java Applet interact with a

JavaScript code in your Web page via JavaScript code in your Web page via LiveConnectLiveConnect