Embed Size (px)
Citation preview
Enhancing a Grid Portlet Using JavaScript
Phil Chung
Komla Etse
John Nipp
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).
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
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.
Installing JavaScript Libraries
• Dojo Toolkit– Open source Dynamic-HTML (DHTML) toolkit
written in JavaScript. – www.dojotoolkit.org
Simple JavaScript Script
Example of JavaScript instructions embedded within the HTML code<html><head><script type = “text/javascript”>
Document.write(“This is file from inline HTML code.”)</script></head><body></body></html>
<script type="text/javascript"> 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.*"); </script>
<div class="main"> <div class="content" style="height:420px;"> <div dojoType="AccordionContainer" labelNodeClass="label" containerNodeClass="accBody" style="border: 1px solid #F9966B;HEIGHT:410px" id="mainaccordi">
<div id ="googlemap" dojoType="ContentPane" label="Google Map"> <form action="#" onsubmit="showAddress(this.address.value); return false"> <div id="googlemap2" style="width:1150px;height:300px"></div> <p> <b>Location:</b> <input type="text" size="60" name="address" value="1500 Marlynn Dr, Charlotte, NC" /> <input type="submit" value="Go!" /> </p> </form> </div>
<div dojoType="SplitContainer" label="Email" open="true">
Inserting JavaScript Code for Creation of Google Maps Interface
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAs91yCKatVZLSfyAUX3XJoxTwM0brOpm-All5BF6PoaKBxRWWERS2dI38LDyFef5VuB_jxekyAh-yXg" type="text/javascript"></script>
End
