be completed. Additional interface elements and corresponding
names used in the N342 logic implementations are listed below:
N341 - Homework 3
|
Modified: |
Find errors in HTML/XML/XSL - msxsl.exe Download
The solution is to require IE to check for new versions on every visit to a page by:
Tools | Internet Options | Browsing history | Settings | Every Visit to Page
<FORM NAME=ONE>
<INPUT type=text name="TWO" >
</form>but has the following errors as XML/XSL:
- ONE must be quoted,
- text must be quoted,
- INPUT requires a matching end tag </INPUT>
- </form> must match <FORM>
Below is valid XML/XSL:
<FORM NAME="ONE">
<INPUT type="text" name="TWO"/>
</FORM>
The assignment is for familiarization with the project basics and how to build user interface components in a moderately complex Web system.
We have discussed prototyping and testing. The class project will serve as an example for analysis, prototyping, testing and implementation.
Homework 2 performed the initial analysis and design; a partial prototyped user interface was implemented and tested using paper.
Homework 3 will develop the skills needed to implement an interactive Web site for trading stocks.
Analysis - Separating the User Interface from the Blue Sky
Project Description
Our class is creating a stock trading Web-site that will undercut the brick-and-mortar stock brokers by allowing traders to perform all trading functions online without a broker: from registration, stock analysis, to buying and selling stocks. For our services, each stock trade will incur a small percentage of the trade fee.
The site must be easy to use while providing the traders a sense that our Web-site and their money is secure. Security will be enforced by requiring traders to first register to create a unique trader identification and password that controls access to their account; to access an account, the trader must first provide their chosen identification and password. Further security is enforced by limiting account access to a single trader account at a time.
Stocks are traded in a usual way. In order to buy stocks, traders must transfer funds to their account using a valid credit card; sufficient funds must be in the account to cover the cost of the stock and trading fees before a stock can be purchased. Stocks held in the trader's portfolio can be sold and the funds added to their account, minus the trading fee of course. Account funds are withdrawn by transference to a credit card account.
Trading is modeled as a shopping cart to which stocks can be added or removed for buying or selling until the trader decides to finalize the trade. When the trade is finalized, the portfolio and account are updated to reflect the trade and the cart is emptied.
Planned additions to the basic stock trading site include our own mutual fund, bonds, and a random number generator for selecting stocks to trade.
Implementation
Project parts - There are three main parts:
The project discussion presented a partial user interface for welcome,
registration and log in of stock traders, these are to be completed. Additional interface elements and corresponding
names used in the N342 logic implementations are listed below:
Starting
User Interface - The following two files are a simple user interface for indicating user password missing. While it seems overly complex to have two files, the XML to invoke the HTML, it provides a method for implementing a consistent and modular user interface.
Missing.xml
<?xml-stylesheet type="text/xsl"
href="Missing.htm"?>
<top>
</top>
|
Missing.htm
<h1>User password missing</h1> |
Step 1
|
We would like to build user interfaces from several small modules of common user interface elements. For the example at right, the top navigation of the stock trading program appears on every page of the site, it should be implemented once and shared by all pages.
To implement a modular error page for display when user password missing:
Missing.xml
<?xml-stylesheet type="text/xsl"
href="Missing.htm"?>
<top>
</top>
topNavigation.htm <xsl:stylesheet
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="2.0">
<xsl:template name="topNavigation">
<title>Stock Trader</title>
<table cellSpacing="5" cellPadding="0" width="100%"
bgColor="fuchsia" border="0">
<tr>
<td><A href="welcome.xml">Welcome</A></td>
<td><A href="Register.xml">Register</A></td>
<td><A href="Login.xml">Login</A></td>
<td><A href="Logout.asp">Logout</A></td>
</tr>
</table>
</xsl:template>
</xsl:stylesheet>
|
Missing.htm
<xsl:stylesheet version="2.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/1999/xhtml">
<xsl:include href="topNavigation.htm" />
<xsl:template match="/">
<xsl:call-template name="topNavigation" />
<h1>User password missing</h1>
</xsl:template>
</xsl:stylesheet>
|
Step 2
|
Modules make it easier to implement and maintain user interfaces by breaking the interface into smaller pieces and provide a way of automatically generating a standard user interface across all pages.
One common Web page organization is Top, Left and Center (TLC) using two navigation bars: the top for site navigation and the left for application navigation; for example the Submit and Reset buttons for the registration and login applications. Page content, unique for the page, is placed in the center right of the page.
The following presents the Welcome page consisting of the four files:
The preferred entry to the stock trading site is through a welcome page named Welcome.xml which is listed with supporting files below. The welcome page should serve as a model for implementing other files listed above needed for the limited user interface implemented for this assignment.
For most project pages, the only significant change required is to the content of the page implemented by the "welcomeContent.htm" file in the example.
Welcome.xml <?xml-stylesheet type="text/xsl"
href="welcome.htm"?>
<top>
</top>
topNavigation.htm <xsl:stylesheet
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="2.0">
<xsl:template name="topNavigation">
<table cellSpacing="5" cellPadding="0" width="100%"
bgColor="fuchsia" border="0">
<tr>
<td><A href="welcome.xml">Welcome</A></td>
<td><A href="Register.xml">Register</A></td>
<td><A href="Login.xml">Login</A></td>
<td><A href="Logout.asp">Logout</A></td>
</tr>
</table>
</xsl:template>
</xsl:stylesheet>
welcomeContent.htm <xsl:stylesheet xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0"> <xsl:template name="welcomeContent"> <h1 align="center">Welcome to Stock Trader</h1> <UL> <LI> <DIV align="left">Register to open an account.</DIV> </LI> <LI> <DIV align="left">Login to access your account.</DIV> </LI> </UL> </xsl:template> </xsl:stylesheet> |
Welcome.htm
<xsl:stylesheet version="2.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/1999/xhtml">
<xsl:include href="topNavigation.htm" />
<xsl:include href="welcomeContent.htm" />
<xsl:template name="leftNavigation">
<table border="0" cellpadding="10"
cellspacing="0" align="left">
<tr><td></td></tr>
<tr><td></td></tr>
</table>
</xsl:template>
<xsl:template match="/">
<html>
<head>
<link rel="stylesheet" type="text/css" href="basic.css" />
<title>Stock Trader</title>
</head>
<body>
<center>
<table border="0" cellpadding="0" cellspacing="0"
width="100%">
<tr>
<td></td>
<td>
<!-- Top Navigation -->
<center>
<xsl:call-template name="topNavigation" />
</center>
</td>
</tr>
<tr>
<td><br/></td>
</tr>
<tr>
<td>
<!-- Left Navigation -->
<xsl:call-template name="leftNavigation" />
</td>
<td>
<!-- Content -->
<center>
<xsl:call-template name="welcomeContent" />
</center>
</td>
</tr>
</table>
</center>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
|
Step 3
|
HTML/XML/XSL syntax errors can be hard to locate from the error message given by the browser. Use the following files to practice locating the file and line number where an error occurs.
Missing.xml
<?xml-stylesheet type="text/xsl"
href="Missing.htm"?>
<top>
</top>
topNavigation.htm <xsl:stylesheet
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="2.0">
<xsl:template name="topNavigation">
<title>Stock Trader</title>
<table cellSpacing="5" cellPadding="0" width="100%"
bgColor="fuchsia" border="0">
<tr>
<td><A href="welcome.xml">Welcome</A></td>
<td><A href="Register.xml">Register</A></td>
<td><A href="Login.xml">Login</A></td>
<td><A href="Logout.asp">Logout</A></td>
</tr>
</table>
</xsl:template>
</xsl:stylesheet>
|
Missing.htm
<xsl:stylesheet version="2.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/1999/xhtml">
<xsl:include href="topNavigation.htm" />
<xsl:template match="/">
<xsl:call-template name="topNavigation" />
<h1>User password missing</h1>
</xsl:template>
</xsl:stylesheet>
|
Debugging syntax errors
|
The following project interface files have already been implemented similar to the model from User Interface Standardization described above and Step 3, parts 1-5 above.
- Welcome - Welcome.htm
- User name not registered - usernameNotregistered.htm
- User name already logged in - usernameLoggedinAlready.htm
- Successful login - manageTrading.htm
- Attempt to login as another trader before logging out - logoutRequired.htm
- User password fails - userpasswordFails.htm
- User password missing - userpasswordMissing.htm
- Amount missing - amountMissing.htm
- User logged out - logoutSuccessful.htm
Part 1
- Define bottomNavigation.htm with a template named bottomNavigation to:
- Display a clickable email address for inquiries or problem report, use your email address.
- Form with a text box for entering a stock symbol and linking to the Google, Yahoo or other stock quote page.
- Display your name.
- Copyright notice.
- Modify each of the above 1-9 files to:
- Display the bottom navigation centered at the end (last few lines) of the page.
- Include bottomNavigation.htm
- Call the bottomNavigation template.
- Test each. View video
Remember that each of the 9 files have a companion XML file.
For example, Welcome.htm can be tested by any of the following:
- Browser:
- iu-uits-eiwp1.ads.iu.edu/username/N341/Project/Welcome.xml
- W:\N341\Project\Welcome.xml
- Command prompt:
- msxsl Welcome.xml Welcome.htm
- Welcome.xml
Hints:
- Require IE to check for new versions on every visit to a page by:
- Tools | Internet Options | Browser history | Settings | Every Visit to Page
- Verify that bottomNavigation works in Welcome.htm first, then modify the other 8 files.
Part 2
Eventually, portfolio information will be integrated into the trading site; for now, we will practice by implementing a stand-alone application to display the portfolio.
Copy and save the following data to a file named HW3-2.xml in the Project directory.
<Portfolio> <STOCKID> <ID>Ray</ID><SYMBOL>IBM</SYMBOL><PRICE>10</PRICE> </STOCKID> <STOCKID> <ID>Ray</ID><SYMBOL>MSFT</SYMBOL><PRICE>100</PRICE> </STOCKID> <STOCKID> <ID>Harold</ID><SYMBOL>FORD</SYMBOL><PRICE>15</PRICE> </STOCKID> <STOCKID> <ID>Robin</ID><SYMBOL>UAL</SYMBOL><PRICE>230</PRICE> </STOCKID> <STOCKID> <ID>Robin</ID><SYMBOL>FORD</SYMBOL><PRICE>100</PRICE> </STOCKID> </Portfolio>
Implement the XSL to display the above Portfolio XML data as the table below using for-each (see example).
- Add a hyperlink (e.g. Google or Yahoo) to each SYMBOL to look up information on the stock (see example).
- Save the XSL file in the Project directory as: HW3-2-1.htm
- Test by loading HW3-2.xml into the browser.
ID Symbol Ray IBM Ray MSFT Harold FORD Robin UAL Robin FORD
- Implement JavaScript to load the Portfolio XML and generate the table above.
This is the essence of Asynchronous Javascript and XML (AJAX) in which Javascript loads a file into a DOM tree and displays selected element values in the user interface.
- Add a hyperlink (e.g. Google or Yahoo) to each SYMBOL to look up information on the stock.
- Save the JavaScript file in the Project directory as: HW3-2-2.htm
- Test by loading HW3-2-2.htm into the browser.
The below example illustrates the essentials of loading an XML file into JavaScript and accessing the DOM tree structure.
The process is similar to loading a text file (remember the ; delimited file of HW1). However, XML is automatically parsed into a tree, we only need to access the proper parts of the tree.
New concepts:
- var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(req.responseText);Parses the XML from the file HW3-2.xml into a DOM tree.
- xmlDoc.getElementsByTagName('Portfolio/STOCKID')
Returns an array of the 5 <Portfolio/STOCKID> elements.
- xmlDoc.getElementsByTagName('Portfolio/STOCKID').length
Length of the array is 5.
- xmlDoc.getElementsByTagName('Portfolio/STOCKID/ID')[2]
Returns the index 2 <Portfolio/STOCKID/ID> element.
- xmlDoc.getElementsByTagName('Portfolio/STOCKID/ID')[2].text
Returns the index 2 <Portfolio/STOCKID/ID> element text, Harold.
<Portfolio> <STOCKID> <ID>Ray</ID><SYMBOL>IBM</SYMBOL><PRICE>10</PRICE> </STOCKID> <STOCKID> <ID>Ray</ID><SYMBOL>MSFT</SYMBOL><PRICE>100</PRICE> </STOCKID> <STOCKID> <ID>Harold</ID><SYMBOL>FORD</SYMBOL><PRICE>15</PRICE> </STOCKID> <STOCKID> <ID>Robin</ID><SYMBOL>UAL</SYMBOL><PRICE>230</PRICE> </STOCKID> <STOCKID> <ID>Robin</ID><SYMBOL>FORD</SYMBOL><PRICE>100</PRICE> </STOCKID> </Portfolio>Example
- Save the following as HW3Example.htm in same directory as HW3-2.xml
- Then test by loading HW3Example.htm in the browser.
Portfolio contents:<br/>
<span id="displayPortfolio">.</span>
<script language="JavaScript">
var req = new ActiveXObject("Microsoft.XMLHTTP"); // For IE only;
req.open("GET", "HW3-2.xml", false);
req.send(null);
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML( req.responseText );
result="";
for(i=0; i<xmlDoc.getElementsByTagName('Portfolio/STOCKID').length; i++) {
result=result+xmlDoc.getElementsByTagName('Portfolio/STOCKID/ID')[i].text;
result=result+"|";
result=result+"<a href='http://www.google.com/search?q="+
xmlDoc.getElementsByTagName('Portfolio/STOCKID/SYMBOL')[i].text+"'>"+
xmlDoc.getElementsByTagName('Portfolio/STOCKID/SYMBOL')[i].text+"</a>";
result=result+"|";
result=result+xmlDoc.getElementsByTagName('Portfolio/STOCKID/PRICE')[i].text;
result=result+"<br/>";
}
displayPortfolio.innerHTML = result;
</script>Results:
Portfolio contents:
Ray|IBM|10
Ray|MSFT|100
Harold|FORD|15
Robin|UAL|230
Robin|FORD|100
- Google Charts produce high-quality chart images that can be embedded in HTML.
For example, the following hand-coded HTML:
<img src="http://chart.apis.google.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World"/>
produces the image:
Add a hand-coded Google chart to the JavaScript above, HW3-2-2.htm, that displays each SYMBOL and summed PRICE from the Portfolio table. In a later homework we will dynamically generate charts from live data.
A pie chart should appear similar to:
Note that the Ford SYMBOL appears twice in the Portfolio data ($15 and $100) but only once in the pie chart and the PRICE is summed to $115.
Hints:
- Start by generating a table without hyperlinks. Use the example from ADO-XML-XSL as a starting point.
- Remember that start and end tags are case-sensitive in the XML and XSL.
- Remember that the browser View | Source only displays the XML file not the HTML. To examine the HTML produced by the XML and XSL use:
- msxsl HW3-2.xml HW3-2-2.htm
- Add hyperlinks using <xsl:variable or <xsl:text disable-output-escaping="yes"> to automatically produce the hyperlink:
<a href='http://finance.yahoo.com/q?s=IBM'> IBM </a>
See XML-XSL Intro for a discussion.
Turn in - Due before class on the date listed in the syllabus.
