Presentation is loading. Please wait.

Presentation is loading. Please wait.

ICE0534 – Web-based Software Development ICE1338 – Programming for WWW Lecture #5 Lecture #5 In-Young Ko iko.AT. icu.ac.kr iko.AT. icu.ac.kr Information.

Similar presentations


Presentation on theme: "ICE0534 – Web-based Software Development ICE1338 – Programming for WWW Lecture #5 Lecture #5 In-Young Ko iko.AT. icu.ac.kr iko.AT. icu.ac.kr Information."— Presentation transcript:

1 ICE0534 – Web-based Software Development ICE1338 – Programming for WWW Lecture #5 Lecture #5 In-Young Ko iko.AT. icu.ac.kr iko.AT. icu.ac.kr Information and Communications University (ICU) - Summer 2005 -

2 Summer 2005 2 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Announcements No class on Tuesday July 12 th No class on Tuesday July 12 th Regular class on Thursday July 14 th Regular class on Thursday July 14 th The Ph.D. lecture proposal is due by Thursday, July 14 th The Ph.D. lecture proposal is due by Thursday, July 14 th Include the title and abstract of the lecture in your proposal Include the title and abstract of the lecture in your proposal List the reading materials List the reading materials

3 Summer 2005 3 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Last Lecture Dynamic Web Documents Dynamic Web Documents JavaScript JavaScript Technology Reviews Technology Reviews DHTML DHTML VBScript VBScript Technology Surveys Technology Surveys Languages for dynamic Web documents Languages for dynamic Web documents Web browsers and authoring tools Web browsers and authoring tools

4 Summer 2005 4 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University This Lecture Plug-ins and Multimedia Presentations Plug-ins and Multimedia Presentations Java Applets & Java Plug-in Java Applets & Java Plug-in Communication between Applets and Web documents Communication between Applets and Web documents SVG (Scalable Vector Graphics) SVG (Scalable Vector Graphics) Technology Review Technology Review X3D [u4: Enkhbold] X3D [u4: Enkhbold] Technology Survey Technology Survey Plug-in Software [g4: Changsun Song] Plug-in Software [g4: Changsun Song]

5 Summer 2005 5 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University What We Need More… More computing capability at the client side More computing capability at the client side Advanced graphical presentations Advanced graphical presentations More sophisticated and dynamic user interfaces More sophisticated and dynamic user interfaces Capabilities of playing multimedia clips Capabilities of playing multimedia clips

6 Summer 2005 6 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Plug-ins Code modules that are inserted into the browser Code modules that are inserted into the browser Adds new capabilities to the Web browser Adds new capabilities to the Web browser e.g., e.g., http://wp.netscape.com/plugins/?cp=brictrpr3

7 Summer 2005 7 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Java Applets Applets are relatively small Java programs whose execution is triggered by a browser Applets are relatively small Java programs whose execution is triggered by a browser The purpose of an applet is to provide processing capability and interactivity for HTML documents through widgets The purpose of an applet is to provide processing capability and interactivity for HTML documents through widgets The ‘standard’ operations of applets are provided by the parent class, JApplet The ‘standard’ operations of applets are provided by the parent class, JApplet public class class_name extends JApplet { … } Use of applets is still widespread, and there is heavy use in intranets Use of applets is still widespread, and there is heavy use in intranets Applets are an alternative to CGI and embedded client-side scripts Applets are an alternative to CGI and embedded client-side scripts AW lecture notes

8 Summer 2005 8 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Applets vs. JavaScript (CGI) CGI is faster than applets and JavaScript, but it is run on the server CGI is faster than applets and JavaScript, but it is run on the server JavaScript is easier to learn and use than Java, but less expressive JavaScript is easier to learn and use than Java, but less expressive Java is faster than JavaScript Java is faster than JavaScript Java graphics are powerful, but JavaScript has none Java graphics are powerful, but JavaScript has none JavaScript does not require the additional download from the server that is required for applets JavaScript does not require the additional download from the server that is required for applets Java may become more of a server-side tool, in the form of servlets, than a client-side tool Java may become more of a server-side tool, in the form of servlets, than a client-side tool AW lecture notes

9 Summer 2005 9 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Browser Actions for Running Applets 1.Download and instantiate the applet class 2.Call the applet’s init method 3.Call the applet’s start method – This starts the execution of the applet 4.When the user takes a link from the document that has the applet, the browser calls the applet’s stop method 5.When the browser is stopped by the user, the browser calls the applet’s destroy method AW lecture notes

10 Summer 2005 10 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University An Example A Scrolling Banner public class AppletTest extends JApplet { private String msg; private String msg; private boolean needToStop = false; private boolean needToStop = false; 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)); } public void start() { public void start() { repaint(); repaint(); } public void paint(Graphics g) { public void 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 stop() { public void stop() { needToStop = true; needToStop = true; }} HTML Document Applet Code

11 Summer 2005 11 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Applet Parameters Applets can be sent parameters through HTML, using the tag and its two attributes, name and value Applets can be sent parameters through HTML, using the tag and its two attributes, name and value Parameter values are strings - e.g., Parameter values are strings - e.g., The applet gets the parameter values with getParameter, which takes the name of the parameter The applet gets the parameter values with getParameter, which takes the name of the parameter e.g., String myFruit = getParameter("fruit"); e.g., String myFruit = getParameter("fruit"); If no parameter with the given name has been specified in the HTML document, getParameter returns null If no parameter with the given name has been specified in the HTML document, getParameter returns null If the parameter value is not really a string, the value returned from getParameter must be converted like: If the parameter value is not really a string, the value returned from getParameter must be converted like: String pString = getParameter("size"); if (pString == null) mySize = 24; else mySize = Integer.parseInt(pString); The best place to put the code to get parameters is in init The best place to put the code to get parameters is in init AW lecture notes

12 Summer 2005 12 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University The JApplet Class An applet is a panel that can be embedded in a Web browser window An applet is a panel that can be embedded in a Web browser window An applet panel can contain other GUI components (e.g., buttons, menus, …), and customized drawings (using the ‘paint’ method) An applet panel can contain other GUI components (e.g., buttons, menus, …), and customized drawings (using the ‘paint’ method) External frames can be created from an applet External frames can be created from an applet

13 Summer 2005 13 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Paint Method in Applet Always called by the browser (not the applet itself) when it displays/refreshes its window Always called by the browser (not the applet itself) when it displays/refreshes its window Takes one parameter, an object of class Graphics, which is defined in java.awt Takes one parameter, an object of class Graphics, 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) { … } The Graphics object is created by the browser The Graphics object is created by the browser Methods in Graphics: drawImage, drawLine, drawOval, drawPolygon, drawRect, drawString, fillOval, fillPolygon, fillRect, … Methods in Graphics: drawImage, drawLine, drawOval, drawPolygon, drawRect, drawString, fillOval, fillPolygon, fillRect, … AW lecture notes

14 Summer 2005 14 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Applet GUI Structure http://java.sun.com/products/jfc/tsc/articles/containers/index.html

15 Summer 2005 15 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Java GUI Component Layers http://java.sun.com/docs/books/tutorial/uiswing/components/rootpane.html Layered Pane

16 Summer 2005 16 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Java GUI Program Example JLabel queryLabel = new JLabel("Query: "); JTextField queryField = new JTextField(20); JButton searchButton = new JButton("Search"); searchButton.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { // search action // search action} }); }); JPanel mainPanel = new JPanel(); mainPanel.add(queryLabel); mainPanel.add(queryField); mainPanel.add(searchButton); JFrame mainFrame = new JFrame("Search Input"); mainFrame.getContentPane().add(mainPanel); mainFrame.pack(); mainFrame.show();

17 Summer 2005 17 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Event Handling in Java An event is created by an external action such as a user interaction through a GUI An event is created by an external action such as a user interaction through a GUI The event handler (event listener) is a segment of code that is called in response to an event The event handler (event listener) is a segment of code that is called in response to an event JButton helloButton = new JButton(“Hello”); JButton helloButton = new JButton(“Hello”); helloButton.addActionListener(new AbstractAction() { helloButton.addActionListener(new AbstractAction() { public void actionPerformed(ActionEvent e) { public void actionPerformed(ActionEvent e) { System.out.println(“Hello World!”); System.out.println(“Hello World!”); } } A JButton Event Listeners Button Pressed Event

18 Summer 2005 18 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Event Listener Registration Connection of an event to a listener is established through event listener registration Connection of an event to a listener is established through event listener registration Done with a method of the class that implements the listener interface (e.g., ActionListener) Done with a method of the class that implements the listener interface (e.g., ActionListener) The panel object that holds the components can be the event listener for those components The panel object that holds the components can be the event listener for those components Event generators send messages (call methods, e.g., actionPerformed) to registered event listeners when events occur Event generators send messages (call methods, e.g., actionPerformed) to registered event listeners when events occur Event handling methods must conform to a standard protocol, which comes from an interface Event handling methods must conform to a standard protocol, which comes from an interface

19 Summer 2005 19 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Event Classes and Handler Methods Semantic Event Classes Semantic Event Classes ActionEvent - click a button, select from a menu or list, or type the enter button in a text field ActionEvent - click a button, select from a menu or list, or type the enter button in a text field ItemEvent - select a checkbox or list item ItemEvent - select a checkbox or list item TextEvent - change the contents of a text field or text area TextEvent - change the contents of a text field or text area For the two most commonly used events, ActionEvent and ItemEvent, there are the following interfaces and handler methods: For the two most commonly used events, ActionEvent and ItemEvent, there are the following interfaces and handler methods: InterfaceHandler method -------------------------------------------- ActionListeneractionPerformed ItemListeneritemStateChanged The methods to register the listener is the interface name with “add” prepended The methods to register the listener is the interface name with “add” prepended e.g., button1.addActionListener(this);

20 Summer 2005 20 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Concurrency in Java “A program is said to be concurrent if it contains more than one active execution context” [M. Scott] void concurrentPrint() { (new Thread () { (new Thread () { public void run() { public void run() { 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) { } } }).start(); }).start(); (new Thread () { (new Thread () { public void run() { public void run() { 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) { } } }).start(); }).start();} Java Forking two concurrent execution threads Main Program Control Printing “A” Printing “B”

21 Summer 2005 21 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Java Threads A thread of control is a sequence of program points reached as execution flows through the program A thread of control is a sequence of program points reached as execution flows through the program Java threads are lightweight tasks – all threads run in the same address space Java threads are lightweight tasks – all threads run in the same address space c.f., Ada tasks are heavyweight threads (processes) that run in their own address spaces c.f., Ada tasks are heavyweight threads (processes) that run in their own address spaces The concurrent program units in Java are methods named run, whose code can be in concurrent execution with other run methods and with main The concurrent program units in Java are methods named run, whose code can be in concurrent execution with other run methods and with main There are two ways to implement threads, as a subclass of Thread and by implementing the interface Runnable There are two ways to implement threads, as a subclass of Thread and by implementing the interface Runnable Two essential methods: Two essential methods: run is the concurrent method run is the concurrent method start tells the run method to begin execution start tells the run method to begin execution

22 Summer 2005 22 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Thread Methods class MyThread extends Thread { public void run() { public void run() { … // Task body // Task body … }}… Thread aTask = new MyThread(); aTask.start(); … aTask.setPriority (Thread.MAX_PRIORITY); … aTask.yield(); … aTask.sleep(2000); … aTask.join(); … Concurrent method definition Concurrent method definition Tells the run method to begin execution Tells the run method to begin execution Sets the scheduling priority Sets the scheduling priority Gives up the processor to other threads Gives up the processor to other threads Blocks the thread for some milliseconds Blocks the thread for some milliseconds Waits for the thread to complete Waits for the thread to complete

23 Summer 2005 23 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University An Applet with A Thread public class AppletTestThread extends JApplet implements 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 run() { public void 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); } … } …}

24 Summer 2005 24 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Applet & Swing References How to make Applets: http://java.sun.com/docs/books/tutorial/uiswing/components/applet. html How to make Applets: http://java.sun.com/docs/books/tutorial/uiswing/components/applet. html http://java.sun.com/docs/books/tutorial/uiswing/components/applet. html http://java.sun.com/docs/books/tutorial/uiswing/components/applet. html The Swing Tutorial: http://java.sun.com/docs/books/tutorial/uiswing/ The Swing Tutorial: http://java.sun.com/docs/books/tutorial/uiswing/ http://java.sun.com/docs/books/tutorial/uiswing/ Painting in AWT and Swing: http://java.sun.com/products/jfc/tsc/articles/painting/ 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: http://java.sun.com/products/jfc/tsc/articles/containers/index.html Understanding Containers: http://java.sun.com/products/jfc/tsc/articles/containers/index.html http://java.sun.com/products/jfc/tsc/articles/containers/index.html

25 Summer 2005 25 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Java Plug-in Extends the functionality of a web browser, allowing applets to be run under Sun's Java 2 runtime environment (JRE) rather than the Java runtime environment that comes with the web browser Extends the functionality of a web browser, allowing applets to be run under Sun's Java 2 runtime environment (JRE) rather than the Java runtime environment that comes with the web browser Java Plug-in is part of Sun's JRE and is installed with it when the JRE is installed on a computer or can be automatically downloaded Java Plug-in is part of Sun's JRE and is installed with it when the JRE is installed on a computer or can be automatically downloaded Works with both Netscape and Internet Explorer Works with both Netscape and Internet Explorer Makes it more suitable for widespread use on consumer client machines that typically are not as powerful as client platforms Makes it more suitable for widespread use on consumer client machines that typically are not as powerful as client platforms http://java.sun.com/j2se/1.4.2/docs/guide/plugin/developer_guide/contents.html

26 Summer 2005 26 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Java Plug-in Tags Internet Explorer jinstall-1_4_2-windows-i586.cab"> Netscape { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.com/11/3272644/slides/slide_26.jpg", "name": "Summer 2005 26 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Java Plug-in Tags Internet Explorer jinstall-1_4_2-windows-i586.cab > Netscape No Java 2 SDK, Standard Edition v 1.4.2 support for APPLET!.", "description": "No Java 2 SDK, Standard Edition v 1.4.2 support for APPLET!. Static Versioning.", "width": "800" }

27 Summer 2005 27 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Autodownload Files http://java.sun.com/j2se/1.5.0/docs /guide/deployment/deployment- guide/autodl-files.html

28 Summer 2005 28 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Java Plug-in Tags (cont.) Combined Form jinstall-1_4_2-windows-i586.cab#Version=1,4,2,0"> message=“Information and Communications University"> No Java 2 SDK, Standard Edition v 1.4.2 support for APPLET!! No Java 2 SDK, Standard Edition v 1.4.2 support for APPLET!! Dynamic Versioning “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.”

29 Summer 2005 29 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Other Plug-ins Macromedia Flash Player Macromedia Flash Player width="832" height="240"> width="832" height="240">

30 Summer 2005 30 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University LiveConnect Developed by Netscape Inc. in 1996 Developed by Netscape Inc. in 1996 Allows Web browser plug-ins, Java Applets, and JavaScript to communicate with each other Allows Web browser plug-ins, Java Applets, and JavaScript 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 Communication Java to Plug-in Communication http://wp.netscape.com/navigator/v3.0/liveconnect.html

31 Summer 2005 31 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University LiveConnect Example Applet JavaScript A Form A Paragraph HTML (DOM)

32 Summer 2005 32 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University The Applet Code import netscape.javascript.*; … public class AppletTest extends JApplet implements Runnable { private delay = 10; private Color bgColor = Color.white, fgColor = Color.blue; private delay = 10; private Color bgColor = Color.white, fgColor = Color.blue; private JSObject window, document, location; private JSObject window, document, location; … public void init() { … window = JSObject.getWindow(this); window = JSObject.getWindow(this); document = (JSObject)window.getMember("document"); document = (JSObject)window.getMember("document"); location = (JSObject)document.getMember("location"); location = (JSObject)document.getMember("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.eval("setBodyBackround(\"" + colCode + "\")"); document.eval("setBodyBackround(\"" + colCode + "\")"); } }); });} public void setColor(String newbgColor, String 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(String milisec) { delay = Integer.parseInt(milisec); delay = Integer.parseInt(milisec); start(); start();}… Methods to be called by JavaScript Accessing DOM elements via JSObject Calling a function in JavaScript

33 Summer 2005 33 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University JSObject A Java-side object that allows the Java program to interact with JavaScript A Java-side object that allows the Java program to interact with JavaScript Main Methods: Main Methods: call: calls a JavaScript method call: calls a JavaScript method eval: evaluates a JavaScript expression eval: evaluates a JavaScript expression getMember: retrieves a named member of an object getMember: retrieves a named member of an object getSlot: retrieves an indexed member of an object getSlot: retrieves an indexed member of an object setMember: sets a named member of an object setMember: sets a named member of an object setSlot: sets an indexed member of an object setSlot: sets an indexed member of an object removeMember: removes a named member of an object removeMember: removes a named member of an object To compile the applet, ‘jaws.jar’, which is available in JRE must be included in the classpath To compile the applet, ‘jaws.jar’, which is available in JRE must be included in the classpath http://developer.netscape.com/docs/technote/javascript/liveconnect/liveconnect_rh.html

34 Summer 2005 34 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University The HTML Code scriptable=true pluginspage="http://java.sun.com/products/plugin/1.4/plugin-install.html"> Select Background Color: Select Background Color: White Black … White Black … Select Text Color: Select Text Color: White … White … Enter the delay time in miliseconds: Enter the delay time in miliseconds: … Calling JavaScript functions

35 Summer 2005 35 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University The JavaScript Code 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.icuApplet.setColor(bg, fg); document.icuApplet.setColor(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); } Function to be called by the Java Applet Calling the methods in the Java Applet Function to be called by the Java Applet Calling the methods in the Java Applet", "description": "Summer 2005 35 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University The JavaScript Code 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.icuApplet.setColor(bg, fg); document.icuApplet.setColor(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); } Function to be called by the Java Applet Calling the methods in the Java Applet", "width": "800" }

36 Summer 2005 36 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Calling Applet Methods from JavaScript document.appletName.varName document.appletName.varName document.appletName.methodName(para meters) document.appletName.methodName(para meters) document.applets[i].varName document.applets[i].varName document.applets[i].methodName(param eters) document.applets[i].methodName(param eters)

37 Summer 2005 37 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University References for Java/JavaScript Connection LiveConnect: http://developer.netscape.com/docs/technote/javascript/liveconnect/livecon nect_rh.html LiveConnect: http://developer.netscape.com/docs/technote/javascript/liveconnect/livecon nect_rh.html http://developer.netscape.com/docs/technote/javascript/liveconnect/livecon nect_rh.html http://developer.netscape.com/docs/technote/javascript/liveconnect/livecon nect_rh.html The Java/JavaScript Connection by Danny Goodman: http://developer.netscape.com/viewsource/archive/goodman_liveconnect.h tml The Java/JavaScript Connection by Danny Goodman: http://developer.netscape.com/viewsource/archive/goodman_liveconnect.h tml http://developer.netscape.com/viewsource/archive/goodman_liveconnect.h tml http://developer.netscape.com/viewsource/archive/goodman_liveconnect.h tml Java-to-Javascript Communication: http://java.sun.com/j2se/1.4.2/docs/guide/plugin/developer_guide/java_js.h tml Java-to-Javascript Communication: http://java.sun.com/j2se/1.4.2/docs/guide/plugin/developer_guide/java_js.h tml http://java.sun.com/j2se/1.4.2/docs/guide/plugin/developer_guide/java_js.h tml http://java.sun.com/j2se/1.4.2/docs/guide/plugin/developer_guide/java_js.h tml How Java to Javascript Communication Works in Java Plug-in: http://java.sun.com/products/plugin/1.3/docs/jsobject.html How Java to Javascript Communication Works in Java 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: http://wp.netscape.com/eng/mozilla/3.0/handbook/plugins/doc/netscape.ja vascript.JSObject.html JSObject API: http://wp.netscape.com/eng/mozilla/3.0/handbook/plugins/doc/netscape.ja vascript.JSObject.html http://wp.netscape.com/eng/mozilla/3.0/handbook/plugins/doc/netscape.ja vascript.JSObject.html http://wp.netscape.com/eng/mozilla/3.0/handbook/plugins/doc/netscape.ja vascript.JSObject.html JavaScript DOM: http://krook.org/jsdom/ JavaScript DOM: http://krook.org/jsdom/http://krook.org/jsdom/

38 Summer 2005 38 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University SVG (Scalable Vector Graphics) SVG is a language for describing two- dimensional graphics in XML SVG is a language for describing two- dimensional graphics in XML Three types of graphic objects: Vector graphic shapes, Images, and Text Three types of graphic objects: Vector graphic shapes, Images, and Text Graphical objects can be grouped, styled, transformed and composited into previously rendered objects Graphical objects can be grouped, styled, transformed and composited into previously rendered objects SVG drawings can be dynamic and interactive SVG drawings can be dynamic and interactive Animation Animation Zoom and pan Zoom and pan Activation of animation or script Activation of animation or script http://www.w3.org/TR/SVG/

39 Summer 2005 39 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University SVG Elements Basic Shapes Basic Shapes Rectangles (including optional rounded corners) Rectangles (including optional rounded corners) Circles Circles Ellipses Ellipses Lines Lines Polylines Polylines Polygons Polygons Paths Paths Text Text Animation Animation Scripting (JavaScript) Scripting (JavaScript)

40 Summer 2005 40 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University A SVG Example … Students Students Here are the pictures of the students: Here are the pictures of the students: border="0">…

41 Summer 2005 41 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University A SVG Example – 2D Graphics "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> xlink:href="ice1338_students1.JPG" /> Moses Kim Moses Kim Byung-woo Kang Byung-woo Kang stroke="white" stroke-width="2" />… svg_student_picture.svg

42 Summer 2005 42 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University A SVG Example – Animation … font-family="Arial" font-size="30" visibility="hidden"> Go ICU !! Go ICU !! … svg_student_picture.svg

43 Summer 2005 43 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University SVG References W3C SVG Page: http://www.w3.org/Graphics/SVG/ W3C SVG Page: http://www.w3.org/Graphics/SVG/ http://www.w3.org/Graphics/SVG/ Adobe SVG Zone: http://www.adobe.com/svg/ Adobe SVG Zone: http://www.adobe.com/svg/ http://www.adobe.com/svg/ Mozilla SVG Project: http://www.mozilla.org/projects/svg/ Mozilla SVG Project: http://www.mozilla.org/projects/svg/ http://www.mozilla.org/projects/svg/

44 Summer 2005 44 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Programming Homework #3 Due Date: Tuesday July 19 th, 2005 Due Date: Tuesday July 19 th, 2005 Make your Web page dynamic Make your Web page dynamic Add a simple Java Applet to your Web page Add a simple Java Applet to your Web page You can either make your own Applet or copy an Applet code that is available on the Web You can either make your own Applet or copy an Applet code that is available on the Web Make the Java Applet interact with a JavaScript code in your Web page via LiveConnect Make the Java Applet interact with a JavaScript code in your Web page via LiveConnect


Download ppt "ICE0534 – Web-based Software Development ICE1338 – Programming for WWW Lecture #5 Lecture #5 In-Young Ko iko.AT. icu.ac.kr iko.AT. icu.ac.kr Information."

Similar presentations


Ads by Google