Download - Creating interfaces
![Page 1: Creating interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062721/568137f6550346895d9fb7fd/html5/thumbnails/1.jpg)
Creating interfaces
Options for interactions
Homework: MIDTERM and Project plans. Prepare 4 page notes for midterm. NO OTHER NOTES
![Page 2: Creating interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062721/568137f6550346895d9fb7fd/html5/thumbnails/2.jpg)
Project plans
• Purpose, audience(s) / user names, functions
• Content
• Diagram(s) indicating interactions (storyboard)
• How will you know if the interface is working?
![Page 3: Creating interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062721/568137f6550346895d9fb7fd/html5/thumbnails/3.jpg)
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
![Page 4: Creating interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062721/568137f6550346895d9fb7fd/html5/thumbnails/4.jpg)
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
![Page 5: Creating interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062721/568137f6550346895d9fb7fd/html5/thumbnails/5.jpg)
![Page 6: Creating interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062721/568137f6550346895d9fb7fd/html5/thumbnails/6.jpg)
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>
![Page 7: Creating interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062721/568137f6550346895d9fb7fd/html5/thumbnails/7.jpg)
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.
![Page 8: Creating interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062721/568137f6550346895d9fb7fd/html5/thumbnails/8.jpg)
<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
![Page 9: Creating interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062721/568137f6550346895d9fb7fd/html5/thumbnails/9.jpg)
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>
![Page 10: Creating interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062721/568137f6550346895d9fb7fd/html5/thumbnails/10.jpg)
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)
![Page 11: Creating interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062721/568137f6550346895d9fb7fd/html5/thumbnails/11.jpg)
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 >
![Page 12: Creating interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062721/568137f6550346895d9fb7fd/html5/thumbnails/12.jpg)
if try { } // try it one way
catch(e) // there was an error
try { } //try it other way
catch(e) // error
{ alert ( ); } } //display message
![Page 13: Creating interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062721/568137f6550346895d9fb7fd/html5/thumbnails/13.jpg)
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);
![Page 14: Creating interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062721/568137f6550346895d9fb7fd/html5/thumbnails/14.jpg)
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);
![Page 15: Creating interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062721/568137f6550346895d9fb7fd/html5/thumbnails/15.jpg)
<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>
![Page 16: Creating interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062721/568137f6550346895d9fb7fd/html5/thumbnails/16.jpg)
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.
![Page 17: Creating interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062721/568137f6550346895d9fb7fd/html5/thumbnails/17.jpg)
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
![Page 18: Creating interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062721/568137f6550346895d9fb7fd/html5/thumbnails/18.jpg)
![Page 19: Creating interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062721/568137f6550346895d9fb7fd/html5/thumbnails/19.jpg)
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.
![Page 20: Creating interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062721/568137f6550346895d9fb7fd/html5/thumbnails/20.jpg)
<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>
![Page 21: Creating interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062721/568137f6550346895d9fb7fd/html5/thumbnails/21.jpg)
<?$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;}}
![Page 22: Creating interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062721/568137f6550346895d9fb7fd/html5/thumbnails/22.jpg)
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="";}
![Page 23: Creating interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062721/568137f6550346895d9fb7fd/html5/thumbnails/23.jpg)
function characterData($parser,$data){
global $currenttag;
switch($currenttag){
case "NAME":
print($data);
break;
case "EMAIL":
print($data);
break;
default:
break; }
}
![Page 24: Creating interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062721/568137f6550346895d9fb7fd/html5/thumbnails/24.jpg)
$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>
![Page 25: Creating interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062721/568137f6550346895d9fb7fd/html5/thumbnails/25.jpg)
Homework
• Study for midterm (10/10)
• Project plans presentation AFTER MIDTERM
• Prepare 4 pages (front and back) notes for midterm.