1. Enhancing a Grid Portlet Using JavaScript Phil Chung Komla Etse John Nipp

2. Assignment Overview Explore another way to create the portlet. 6a uses separate.java file for portlet’s logic. Use JavaScript to embed the Portlet’s logic directly in the code for the Portlet’s java server page (.jsp).

3. Quick Overview of Java Created by Netscape in 1995 Purpose was to make web pages more interesting An interpreted language –Scripts are not compiled prior to runtime –Statements processed at execution time An object-based scripting language

4. Implementing JavaScript in the Porlet Design Still use the MainPage.jsp file Include JavaScript within the HTML to create dynamic effects –Overcomes static nature of HTML.

5. Installing JavaScript Libraries Dojo Toolkit –Open source Dynamic-HTML (DHTML) toolkit written in JavaScript. –www.dojotoolkit.org

6. Simple JavaScript Script Example of JavaScript instructions embedded within the HTML code Document.write(“This is file from inline HTML code.”)

8. dojo.require("dojo.widget.TitlePane"); dojo.hostenv.writeIncludes(); dojo.require("dojo.widget.TabContainer"); dojo.require("dojo.widget.LinkPane"); dojo.require("dojo.widget.ContentPane"); dojo.require("dojo.widget.LayoutContainer"); dojo.require("dojo.widget.Checkbox"); dojo.require("dojo.widget.AccordionContainer"); dojo.require("dojo.widget.SplitContainer"); dojo.require("dojo.widget.*");

9. <div dojoType="AccordionContainer" labelNodeClass="label" containerNodeClass="accBody" style="border: 1px solid #F9966B;HEIGHT:410px" id="mainaccordi"> Location:

10. Inserting JavaScript Code for Creation of Google Maps Interface <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIA AAAs91yCKatVZLSfyAUX3XJoxTwM0brOpm-All5BF6PoaKBxRWWERS2dI3 8LDyFef5VuB_jxekyAh-yXg" type="text/javascript">

14. End