creating interfaces
DESCRIPTION
Creating interfaces. Options for interactions Homework: MIDTERM and Project plans. Prepare 4 page notes for midterm. NO OTHER NOTES. Project plans. Purpose, audience(s) / user names, functions Content Diagram(s) indicating interactions (storyboard) - PowerPoint PPT PresentationTRANSCRIPT
Creating interfaces
Options for interactions
Homework: MIDTERM and Project plans. Prepare 4 page notes for midterm. NO OTHER NOTES
Project plans
• Purpose, audience(s) / user names, functions
• Content
• Diagram(s) indicating interactions (storyboard)
• How will you know if the interface is working?
Interactions
For project: depends on topic AND your background• JavaScript: can do calculations and return
information. Cannot store information on client– may be an exception if you create an ActionX module
AND change security settings.
– Will show: Voting for TV show example
• Server-side programming: can store in database or file. Can also use XML file– will show: contacts example using php
TV shows poll
• JavaScript reads an xml file• Updates data in memory—not stored in
external file (see later chart)• Shows results in alert message (could be in
form input tag)• Works only in IE6• Check out
newmedia.purchase.edu/~Jeanine/xmlstuff
favorites.xml<?xml version="1.0" ?> - <shows>- <show> <show_title>The Sopranos</show_title> <score>0</score> </show>-<show> <show_title>NYPD</show_title> <score>0</score> </show>- <show> <show_title>Law and Order</show_title> <score>0</score> </show>- <show> <show_title>Judging Amy</show_title> <score>0</score> </show>- <show> <show_title>The News Hour</show_title> <score>0</score> </show> </shows>
xmlchangetest.html
• read in favorites.xml file
• generate (using document.write) the html form, with a radio button for each show. Form onsubmit is call to update function
• function update: updates internal data and displays using alert statement
• body of html contains [only] thank you.
<html><head><title>XML read test</title> <script>var xml = new ActiveXObject("Microsoft.XMLDOM");xml.async = false;xml.load("favorite.xml");var objroot = xml.documentElement;var shownames = objroot.getElementsByTagName("show/show_title");var showscores=objroot.getElementsByTagName("show/score");document.write("Which TV show do you like the best? <br>");document.write("<form name='f' onsubmit='return update()'>");var n = shownames.length;var i;for (i=0;i<n;i++) { var stitle = shownames[i].text; document.write("<input type='radio' name='shows' id='shows'
value='"+stitle+"'>"); document.write(stitle); }document.write("<br><input type='submit' value='Vote'></form>");
wait for load to complete
single quote followed by double quote
function update() { for (i=0;i<n;i++){ if (document.f.shows[i].checked){ showscores[i].text=1 + parseInt(showscores[i].text);
xml.documentElement.getElementsByTagName("show/score").item(i).text=showscores[i].text;
objroot = xml.documentElement; showscores=objroot.getElementsByTagName("show/score"); } }var scores ="Totals: ";for (i=0;i<n;i++) { scores = scores + shownames[i].text+": "+showscores[i].text+" ";}alert(scores);return false; }</script></head> <body>Thank you! </body> </html>
Dangerous: To allow permanent changes
• But here is how you do it:xml.save("favorite.xml");
• On computer on which code will be run: go to IE toolbar/Tools/Internet Options/Security custom settings: change to enable Initialize and script ActiveX controls not marked as safe. (Internet and Intranet)
JavaScript & parameterized xslt
• xslt (at top level) can have a parameter
• example (xmlparmseither.html) uses JavaScript try and catch to work with IE and Mozilla browsers AND fail gracefully…..
• places results in a <div >
if try { } // try it one way
catch(e) // there was an error
try { } //try it other way
catch(e) // error
{ alert ( ); } } //display message
var xslt = new ActiveXObject("Msxml2.XSLTemplate"); var xslDoc = new
ActiveXObject("Msxml2.FreeThreadedDOMDocument"); var xslProc; xslDoc.async = false; xslDoc.resolveExternals = false;
xslDoc.load("contactsuseparm.xsl"); xslt.stylesheet = xslDoc; var xmlDoc = new
ActiveXObject("Msxml2.DOMDocument"); xmlDoc.async = false;
xmlDoc.resolveExternals = false; xmlDoc.load("contactsextra.xml");
xslProc = xslt.createProcessor(); xslProc.input = xmlDoc; xslProc.addParameter("subj", subject); xslProc.transform(); document.write(xslProc.output);
var xslStylesheet; var xsltProcessor = new XSLTProcessor(); var myDOM; var xmlDoc; var myXMLHTTPRequest = new XMLHttpRequest();
myXMLHTTPRequest.open("GET", "contactsuseparm.xsl", false); myXMLHTTPRequest.send(null); xslStylesheet = myXMLHTTPRequest.responseXML; xsltProcessor.importStylesheet(xslStylesheet); // load the xml file myXMLHTTPRequest = new XMLHttpRequest(); myXMLHTTPRequest.open("GET", "contactsextra.xml", false); myXMLHTTPRequest.send(null);
xmlDoc = myXMLHTTPRequest.responseXML; xsltProcessor.setParameter(null,"subj",subject); var fragment =
xsltProcessor.transformToFragment(xmlDoc,document); document.getElementById("answer").innerHTML = "";
myDOM = fragment; document.getElementById("answer").appendChild(fragment);
<body> <a href="javascript:outputgroup('computer
science');">Computer Science </a><br/> <a
href="javascript:outputgroup('physics');">Physics </a>
<br/> <a href="javascript:outputgroup('mathematics');">Mathematics </a>
<br/> <div id="answer"> </div> <br/> <br/> <a
href="xmlparmseither.html">Repeat</a> </body> </html>
Server-side: php
• Server-side code has advantage of being able to access files and databases on server computer, including modifying files and databases.
• php is Open Source tool. • Other tools are: asp with VBScript or JavaScript,
Cold Fusion, cgi with perl or other languages, asp.net.
• This example: phpxmlsax.php only shows use of XML, not saving data/modifying any files.
Setting up handling
• Common to other xml operations
• Special functions set up handlers: sets up function(s) to be called when parser encounters – starting element, – ending element, or – character data
phpxmlsax.php
• php (all server-side/middleware) produce HTML to be shown on the client.
• This program sets up how starting elements, ending elements, and character data are to be handled: 3 functions.
• global variable is used: currenttag• 3 functions do formatting.• NOTE: required uppercase for element names
even though the contactsnoref.xml used lower case.
<html><head><title>PHP xml SAX test </title>
<style type="text/css">
td {font-family: Arial; font-size: smaller}
h2 {font-family: Comic Sans MS}
</style>
</head>
<body>
<h2>Address book </h2><p>
<table border="1"> <tr><td>Name</td><td>E-mail</td></tr>
<?$file="D:\inetpub\wwwroot\jeanine\xmlstuff\contactsnoref.xml";$currenttag="";function startElement($parser,$name,$attrs) { global $currenttag; $currenttag=$name; switch($name) { case "CONTACT": print("<tr>"); break; case "NAME": print("<td>"); break; case "EMAIL": print("<td>"); break; default: break;}}
function endElement($parser,$name) { global $currenttag; switch ($name) { case "CONTACT": print("</tr>"); break; case "NAME": print ("</td>"); break; case "EMAIL": print("</td>"); break; default: break; } $currenttag="";}
function characterData($parser,$data){
global $currenttag;
switch($currenttag){
case "NAME":
print($data);
break;
case "EMAIL":
print($data);
break;
default:
break; }
}
$xml_parser=xml_parser_create();xml_set_element_handler($xml_parser,"startElement","endElement");xml_set_character_data_handler($xml_parser,"characterData");
if (!($fp=fopen($file,"r"))) { die("Cannot locate XML data file: $file"); }while ($data=fread($fp,4096)) { if (!xml_parse($xml_parser,$data,feof($fp))) { die(sprintf("XML error: %s at %d", xml_error_string(xml_get_error_code($xml_parser)), xml_get_current_line_number($xml_parser))); }}xml_parser_free($xml_parser);?></table> </body> </html>
Homework
• Study for midterm (10/10)
• Project plans presentation AFTER MIDTERM
• Prepare 4 pages (front and back) notes for midterm.