Let’s see how we can visualize the currency matrix using a Java JSP and AJAX. The currency matrix will have the following properties:
- The currency matrix will be show as an HTML table.
- Currency information will be refreshed every 2 seconds.
- If currency rate is increased the updated value will be marked in greed, if currency rate is decreased the updated value will be marked in red.
- We will some popular currencies on our currency matrix. These currencies can be easily changed to have more/less/other currencies.
The file that generates the JSON currency data is called: “currency_json.jsp”. It does the following things:
- Use the class YahooCurrencyConverter from the post Java Currency Converter using Yahoo Finance API – Currency Matrix in order to get currency information and generate the currency matrix.
- Convert the currency matrix to JSON representation.
Note, that this code converts the data to JSON using the open source project named: json simple.<%
YahooCurrencyConverter ycc = new YahooCurrencyConverter();String[] currencies = new String[]{"USD", "EUR", "GBP", "JPY", "CHF", "CAD", "AUD", "MXN", "ILS"};CurrencyPair[][] currencyPairs = ycc.getConversionMatrix(currencies);int size = currencyPairs.length;JSONArray currencyArray = new JSONArray();for (int i = 0; i < size; i++) {
JSONArray currencyRow = new JSONArray();for (int j = 0; j < size; j++)
{CurrencyPair currencyPair = currencyPairs[i][j];currencyRow.add(currencyPair != null ? currencyPair.getPrice() : null);}currencyArray.add(currencyRow);}out.print(currencyArray.toJSONString());%>
<%@ page import="com.bashan.currency.currency.CurrencyPair" %>
<%@ page import="com.bashan.currency.currency.YahooCurrencyConverter" %>
<%@ page import="org.json.simple.JSONArray" %>
<%@ page contentType="application/json;charset=UTF-8" language="java" %>
Let’s move the the main file: “currency.jsp”. This file does the following things:
- Make an AJAX request to the “currency_json.jsp” file in order to get the latest currency matrix information.
- When AJAX response is completed, get the JSON data received from server and build the currency matrix table. During the process of constructing the currency matrix, compare the currency data to the previous data. If there was a change in the currency, paint the table cell in red or green depending if currency raised or dropped.
Let’s look at the “currency.jsp” code:
Also note, that the we use a style shit file named: “css.css” to make the table a bit nicer.<%@ page import="org.json.simple.JSONArray" %><%!
private static String[] currencies = new String[]{"USD", "EUR", "GBP", "JPY", "CHF", "CAD", "AUD", "MXN", "ILS"};private static JSONArray currencyArray = new JSONArray();static {for (int i = 0; i < currencies.length; i++) {
currencyArray.add(currencies[i]);}}%>
<html><head><title>Currency Exchange Rates</title><link rel="stylesheet" type="text/css" href="css/css.css"></head><h1>Currency Exchange Rates</h1><table id="tableCurrency" class="tableBorder" cellspacing="0" cellpadding="5"><thead><tr><td class="tdBorder" style="font-weight:bold; text-align:center;">Currencies</td><%
for (String currency : currencies) {%>
<td style="font-weight:bold; text-align:center;" class="tdBorder"><%= currency %></td><%
}%>
</tr></thead><tbody id="tableBodyCurrency"><tr><td class="tdBorder" colspan="<%= currencies.length + 1 %>">Loading currencies data...</td></tr></tbody></table><script type="text/javascript" src="js/mootools.js"></script><body><script type="text/javascript">var currencyCodes = <%= currencyArray.toJSONString() %>;var oldCurrencies = null;function getJSON(){var jsonRequest = new Request.JSON({url: "currency_json.jsp",onComplete: function(currencies) {if (typeof(currencies) == "undefined"){return;}var table = $("tableBodyCurrency");var data = "";for (var i = 0; i < currencies.length; i++)
{data = data + "<tr><td style='font-weight:bold; text-align:center;' class='tdBorder'>" + currencyCodes[i] + "</td>";var currencyRow = currencies[i];for (var j = 0; j < currencyRow.length; j++)
{var currency = currencyRow[j];if (oldCurrencies == null || currency == null){data = data + "<td class='tdBorder' style='text-align:center;'>" + (currency != null ? currency : " ") + "</td>";}else{var oldCurrency = oldCurrencies[i][j];if (currency > oldCurrency){data = data + "<td style='background-color:green; text-align:center;n' class='tdBorder'>" + currency + "</td>";}else if (currency < oldCurrency)
{data = data + "<td style='background-color:red; text-align:center;' class='tdBorder'>" + currency + "</td>";}else{data = data + "<td class='tdBorder' style='text-align:center;'>" + currency + "</td>";}}}data = data + "</tr>";}table.set('html', data);oldCurrencies = currencies;}}).get();}window.addEvent('domready', function() {getJSON();getJSON.periodical(2000);});</script></body></html><%@ page contentType="text/html;charset=UTF-8" language="java" %>
Now, let’s have a look how the currency matrix looks like when the page is first loaded:
And after we receive currency information, we can see the full matrix. Some of the cells are painted in green or red, indicating if currency increased or decreased:
You can see the currency matrix in action by simply dropping the currency.war file on Tomcat webapps folder. The war file also contains the java source files.