Hints for HW#8
advertisement
Hints for HW#8
HW#6 Architecture
client
Use <form>
To invoke
server-side
script 1
Browser
with web
page
Apache web
server
Send query with
arguments
2
PHP
Script
5
4
3
Retrieve resulting
web page (html)
Parse the web page
using regular expressions
and for each music type
build an html page
Result of Query GOOG
finance.yahoo.com
HW#8 Architecture Overview
client
Uses
Xmlhttprequest
to invoke Java
Servlet
Browser
with web
page
As part of the exercise use
yahoo’s autocomplete
widget to predict the
stock symbol
Tomcat web Server
running on SCF
PHP script sends
query with
arguments
AWS
Java Servlet invokes
PHP script;
Java Servlet transforms
XML into JSON
Finance.yahoo.com
PHP script send
query with
arguments
Retrieve web page
and convert to XML
Xmlhttprequest
Object retrieves JSON
User
clicks on
Facebook
Resulting screen
Posting to Facebook (done programmatically)
HW8 Sample Result
Facebook Output
Outline for the Initial Page (1 of 3)
• A set of includes
• <link rel="stylesheet" href="http://yui.yahooapis.com/3.13.0/build/cssbutton/cssbutton.css">
• <link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/3.14.1/build/tabview/assets/skins/night/tabview.css">
• <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
• <script type="text/javascript" src="yui-min.js"></script>
• define the autocomplete YUI element which uses this URL to get the autocomplete options
http://d.yimg.com/autoc.finance.yahoo.com/autoc
• Define the Facebook interface, e.g.
• function postToFeed(result) {
• Define method:, name:, caption:, description:, link:, picture:
• function (response) //the post was published, or not
• Call your servlet using Ajax and a URL of the form
• http://cs-server.usc.edu:YOURPORT/examples/servlet/SearchServlet
Outline for the Initial Page (2 of 3)
• Process the result
• Handle +/• Handle stock chart, e.g.
• <img src=\""+result.result.StockChartImageURL+"\" width=\"260\" height=\"140\" />
• Handle Facebook icon
• <img src='facebook_logo.jpg' style='cursor: pointer; padding-top:10px;' onclick='postToFeed. . . >
• Build a table containing: Previous close, today’s high, Year high, bid, ask, etc
• Build a table with the latest News items
• Render both using the YUI tabview
• YUI().use('tabview', function(Y) { var tabview = new Y.TabView({srcNode:'#tabs'});
• tabview.render(); });
Outline for the Initial Page (3 of 3)
• Here is where the <body> begins
• Initialize Facebook
• FB.init({ appId
: xxxxxxxxxxxxxxxx', // App ID from the App Dashboard
•
channelUrl : 'http://cs-server.usc.edu:yourport/examples/servlets/producer/channel.html',
•
status
: true, // check the login status upon init?
•
cookie
: true, // set sessions cookies to allow your server to access the session?
•
xfbml
: true // parse XFBML tags on this page? });
•
// Load the SDK's source Asynchronously
• <form class="yui3-form">
• Company: <input type="text" id="company" name="company“ placeholder="Enter company symbol" size="90" />
• <button class="yui3-button" onClick="return verify(this.form.company.value);">Search</button>
• </form>
Posting to Facebook
• function postToFeed(result) {
•
result = JSON.parse(unescape(result));
FB.ui( {
•
method: 'feed',
name: (result.result.Name ? result.result.Name : "NA") ,
•
•
•
"NA")
caption: "Stock Information of "+(result.result.Name ? result.result.Name : "NA")
+ " "+(result.result.Symbol ? "("+result.result.Symbol+")" : "") ,
description: "Last Trade Price: "+ (result.result.Quote.LastTradePriceOnly ? result.result.Quote.LastTradePriceOnly :
•
•
•
•
+", Change: "+ (result.result.Quote.ChangeType ? result.result.Quote.ChangeType : "")
+""+ (result.result.Quote.Change ? result.result.Quote.Change : "NA")
+"("+ (result.result.Quote.ChangeInPercent ? result.result.Quote.ChangeInPercent : "NA") +")",
link: (result.result.Symbol ? "http://finance.yahoo.com/q?s="+result.result.Symbol :
"http://finance.yahoo.com"),
•
picture: (result.result.StockChartImageURL ? result.result.StockChartImageURL : "") },
• function(response) {
•
if (response && response.post_id) { alert('Post was published.');
•
} else { alert('Post was not published.'); } } ); }
•
Java Servlet running on Tomcat (1 of 2)
•
•
•
•
•
•
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.PrintWriter;
import java.net.URL;
import java.net.URLEncoder;
•
•
•
•
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
• import org.json.JSONObject;
• import org.json.XML;
Outline for Your Java Servlet Running on Tomcat (2 of 2)
• Public class SearchServlet extends HttpServlet {
• Protected void doGet (request, response) throws . . . {
• Response.setContentType(“application/json; charset=utf-8”);
• Retrieve company name; check if it is null;
• Try { URL url = new URL(“http://. . . elasticbeanstalk.com/?companyname=“, encode
company name);
• bufferedReader = new buggeredReader(new INputStreamReader(url.openStream(),. . . );
• While ((line = bufferedReader.readLine()) !- null) {
• xmlContent += line; }
• JSONObject jsonObject = XML.toJSONObject(xmlContent);
• Out.print(jsonObject);
• Notes: modify the web.xml file
• Include servlet.jar and json.jar (converts XML to json)
Outline for Your Php Program
• <?php
• Header(“Content-type: text/xml”); retrieve stock info and output as XML
• $symbol_url = "http://autoc.finance.yahoo.com/autoc?query=".$name."&callback=YAHOO.Finance.SymbolSuggest.ssCallback";
• $url = "http://query.yahooapis.com/v1/public/yql?q=Select%20Name%2C%20Symbol%2C%20LastTradePriceOnly%2C%20Change. . .";
• $output .= "<Name>".htmlspecialchars($name, ENT_QUOTES)."</Name>";
•
•
$output .= "<Symbol>".htmlspecialchars($symbol, ENT_QUOTES)."</Symbol>";
$output .= "<Quote>";
•
$changeType = substr($change,0, 1);
•
$output .= "<ChangeType>".$changeType."</ChangeType>";
•
$output .= "<Change>".substr($change, 1)."</Change>";
•
$output .= "<ChangeInPercent>".substr($changeinPercent, 1)."</ChangeInPercent>";
•
$output .= "<LastTradePriceOnly>".number_format((double) $lastTradePriceOnly, 2)."</LastTradePriceOnly>";
• Also <PreviousClose>, <DaysLow>, <DaysHigh>, <Open>, <YearLow>, <YearHigh>, <Bid>, <Volume>, <Ask>, <AverageDailyVolume>,
<OneYearTargetPrice>, <MarketCapitalization>,
•
</Quote>";
• displayHeadlines($symbol); /* a separate routine that goes to http://feeds.finance.yahoo.com/rss/2.0/headline?s=SYMBOL, ETC*/
•
$output .= "<StockChartImageURL>http://chart.finance.yahoo.com/t?s=".$symbol."&amp;lang=enUS&amp;amp;width=300&amp;height=180</StockChartImageURL>";
