1 / 25

Creating interfaces

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)

murphy-stephenson
Télécharger la présentation

Creating interfaces

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Creating interfaces Options for interactions Homework: MIDTERM and Project plans. Prepare 4 page notes for midterm. NO OTHER NOTES

  2. Project plans • Purpose, audience(s) / user names, functions • Content • Diagram(s) indicating interactions (storyboard) • How will you know if the interface is working?

  3. 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

  4. 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

  5. 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>

  6. 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.

  7. wait for load to complete <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>"); single quote followed by double quote

  8. 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>

  9. 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)

  10. 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 >

  11. if try { } // try it one way catch(e) // there was an error try { } //try it other way catch(e) // error { alert ( ); } } //display message

  12. 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);

  13. 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);

  14. <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>

  15. 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.

  16. 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

  17. 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.

  18. <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>

  19. <? $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;} }

  20. 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=""; }

  21. function characterData($parser,$data){ global $currenttag; switch($currenttag){ case "NAME": print($data); break; case "EMAIL": print($data); break; default: break; } }

  22. $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>

  23. Homework • Study for midterm (10/10) • Project plans presentation AFTER MIDTERM • Prepare 4 pages (front and back) notes for midterm.

More Related