CMPE 280 Web UI Design and Development February

CMPE 280 Web UI Design and Development February 25 Class Meeting Department of Computer Engineering San Jose State University Spring 2020 Instructor: Ron Mak www. cs. sjsu. edu/~mak 1

j. Query o o o o A lightweight but powerful Java. Script library. Greatly simplifies Java. Script programming, especially animation and AJAX. Adds new capabilities to DOM elements. Adds new user interface widgets. Cross-platform: Works with different browsers. Highly extensible. Free and open source. Computer Engineering Dept. Fall 2020: February 25 CMPE 280: Web UI Design and Development © R. Mak 2

j. Query Downloads o Visit jquery. com to download. o The compressed versions will enable your web pages that use j. Query to download faster. o Create a symbolic link jquery. js to the version you downloaded. Computer Engineering Dept. Fall 2020: February 25 CMPE 280: Web UI Design and Development © R. Mak 3

Using the j. Query Library o To use the j. Query library in your web page: <script type="text/javascript” src ="jquery. js"> </script> o You can also download from a Content Delivery Network (CDN) such as Google hosted libraries: <script type="text/javascript" src="https: //ajax. googleapis. com/ajax/libs/jquery/3. 4. 1/jquery. min. js"> </script> Computer Engineering Dept. Fall 2020: February 25 CMPE 280: Web UI Design and Development © R. Mak 4

j. Query API o For the complete j. Query API, see http: //api. jquery. com Computer Engineering Dept. Fall 2020: February 25 CMPE 280: Web UI Design and Development © R. Mak 5

Simple AJAX with j. Query <!DOCTYPE html> jq-ajax. html <html lang="en"> <head> <meta charset="UTF-8"> <title>Simple AJAX with j. Query</title> <script type = "text/javascript" src = "js/jquery. js"> </script> <script type = "text/javascript" src = "js/jq-ajax. js"> </script> </head> <body> <h 1>Simple AJAX with j. Query</h 1> <div id = "output"></div> </body> $(document). ready(init); </html> Computer Engineering Dept. Fall 2020: February 25 js/jq-ajax. js function init() { CMPE 280: Web UI Design and Development $("#output"). load("lorem. txt"); © R. Mak } Demo 6

j. Query Objects o Create a j. Query object from a DOM element. o Use the $() function. n Example: $("#output") creates a j. Query object from the div with id output: <div id="output"></div> o Simpler than: document. get. Element. By. Id("output") Computer Engineering Dept. Fall 2020: February 25 CMPE 280: Web UI Design and Development © R. Mak 7

j. Query Objects, cont’d o A j. Query object adds new functionality to its DOM element. n Example: $("#output"). load("lorem. txt"); Perform an AJAX document load and replace the contents of the div with the document contents. n Example: $("#output"). html("<h 2><em>Hello, world!</em></h 2>"); Equivalent to: document. get. Element. By. Id("output") Computer Engineering Dept. CMPE 280: Web UI Design and Development Fall 2020: February 25 © R. Mak . inner. HTML("<h 2><em>Hello, world!</em></h 2>"); 8

j. Query Initialization o Instead of: <body onload="init()"> n o Call init() after the entire page is displayed. Use the j. Query statement: $(document). ready(init); n o Call init() after the entire page is loaded but before the page displays. A shortcut: Computer Engineering Dept. Fall 2020: February 25 $(init); CMPE 280: Web UI Design and Development © R. Mak 9

Selecting Elements o j. Query uses CSS-style selectors. n Example: $("h 1") Refer to all h 1 headings. n Example: $("#output") Refer to the object with id output. n Example: $(". indented") Refer to the objects with class indented. n Example: $("li img"); Refer to images that are in list items. Computer Engineering Dept. Fall 2020: February 25 CMPE 280: Web UI Design and Development © R. Mak 10

Setting Style o Use j. Query’s css() method to set the style of an object or a set of objects. n Example: Two parameters $("h 1"). css("background. Color", "yellow"); Set the background of all h 1 headings to yellow. n Example: One parameter: Java. Script Object Notation (JSON) $("#warning"). css( {"background. Color": "yellow", "color": "red"} ); Set the background of the paragraph with id warning to yellow and its text to red. Computer Engineering Dept. Fall 2020: February 25 CMPE 280: Web UI Design and Development © R. Mak 11

Example: Hover Event <body> hover. html <h 1>Hover Demo</h 1> <ul> <li>Computer Science</li> <li>Mathematics</li> <li>Physics</li> <li>Chemistry</li> </ul> </body> Note: $this refers to a DOM element. $(this) refers to the corresponding j. Query object. Demo Computer Engineering Dept. Fall 2020: February 25 $(init); js/hover. js function init() { $("li"). hover(highlight, plain); } function highlight() { $(this). css( {"background": "black", "color": "white"} ); } function plain() { $(this). css( {"background": "white", "color": "black"} ); CMPE 280: Web UI Design and Development 12 ©} R. Mak

j. Query Events o Mouse n n n n click dblclick mousedown mouseup mouseover mouseout mousemove hover o Document/window n n n o Keyboard n n n Computer Engineering Dept. Fall 2020: February 25 load unload ready resize scroll keypress keydown keyup CMPE 280: Web UI Design and Development © R. Mak 13

j. Query Events, cont’d o Form n n n submit reset change focus blur Computer Engineering Dept. Fall 2020: February 25 CMPE 280: Web UI Design and Development © R. Mak 14

Changing Classes Dynamically o o o add. Class() remove. Class() toggle. Class() css/class. css . highlighted { background: lightgray; color: blue; } $(init); js/class. js function init() { $("li"). click(toggle. Highlight); } function toggle. Highlight() { $(this). toggle. Class("highlighted"); Computer Engineering Dept. CMPE 280: Web UI Design and Development } Fall 2020: February 25 © R. Mak Demo 15

j. Query/AJAX Templates o j. Query and AJAX make it easy to create a template for a content management system. o Dynamically construct the parts of the CMS at run time from data files on the web server. Computer Engineering Dept. Fall 2020: February 25 CMPE 280: Web UI Design and Development © R. Mak Demo 16

j. Query/AJAX Template Example courses. html <body> <div id="all"> <div id="header"></div> <div id="menu"> <h 2>Courses</h 2> <div id="names"></div> </div> Start with only one course div in the template. <div class="course"></div> <div id="footer"></div> </body> Computer Engineering Dept. Fall 2020: February 25 CMPE 280: Web UI Design and Development © R. Mak 17

j. Query/AJAX Template Example, cont’d js/courses. js $(init); function init() { $("#header"). load("parts/header. html"); . . . $("#footer"). load("parts/footer. html"); } Computer Engineering Dept. Fall 2020: February 25 CMPE 280: Web UI Design and Development © R. Mak 18

j. Query/AJAX Template Example, cont’d function init() js/courses. js { . . . var files = new Array("CMPE 180 A. html", "CMPE 226. html", "CMPE 280. html", "CMPE 295 A. html"); // First menu item and first course description. var name. Items = "<ul>n" + course. Name(files[0]); var course = $(". course"); course. load("courses/" + files[0]); AJAX // Subsequent menu items and course descriptions. for (var i = 1; i < files. length; i++) { // Clone last course, load, and insert after. course = course. clone(). insert. After(course); “function chaining” course. load("courses/" + files[i]); AJAX // Append menu item. function course. Name(name) name. Items += course. Name(files[i]); { } return " <li><a href=''>" + name. split(". ")[0] // Load the menu. + "</a></li>"; name. Items += "</ul>n"; } $("#names"). html(name. Items); CMPE 280: Web UI Design and Development . . . Computer Engineering Dept. 19 Fall 2020: February 25 © R. Mak }

Automatic Looping with each() o Most j. Query methods automatically loop over each element in a selection. n o Example: $("img"). hide(); Make every image disappear. Use the each() function to provide your own callback function to apply to each element in a selection. n Example: $("img"). each(my. Function); Call function my. Function() on each image. Computer Engineering Dept. Fall 2020: February 25 CMPE 280: Web UI Design and Development © R. Mak 20

Automatic Looping with each(), cont’d <body> pullquote. html <div class="text"> <h 1>Automatic Pull Quotes</h 1> <h 2>Vestibulum semper</h 2> <p> Vestibulum semper tincidunt sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pulvinar, justo non fringilla dapibus, sapien tortor cursus erat, at posuere magna nisi tincidunt sapien. Sed nisl. Fusce venenatis, libero porta fringilla, sapien odio tincidunt sem, id aliquam tellus sapien sit amet quam. <span class="pq">Vivamus justo mi, aliquam vitae, eleifend et, lobortis quis, eros. </span> Ut felis arcu, mollis ut, interdum molestie, vehicula a, sapien. Sed nisi nunc, bibendum vel, . . . </p> . . . </div> Computer Engineering Dept. </body> Fall 2020: February 25 CMPE 280: Web UI Design and Development © R. Mak 21

Automatic Looping with each(), cont’d. text { font-family: sans-serif; width: 600 px; margin-top: 2 em; margin-left: auto; margin-right: auto; min-height: 600 px; }. pullquote { float: right; clear: right; width: 200 px; padding: 10 px; font-size: 20 px; background-color: #DDD; border-radius: 10 px; margin: 20 px 0 10 px; font-style: italic; Computer Engineering Dept. CMPE 280: Web UI Design and Development Fall 2020: February 25 © css/pullquote. css R. Mak } 22

Automatic Looping with each(), cont’d $(init); js/pullquote. js function init() { $('span. pq'). each(pull. Quotes); } function pull. Quotes() { var quote = $(this). clone(); quote. remove. Class('pq'); quote. add. Class('pullquote'); $(this). before(quote); } o What is the result? Computer Engineering Dept. Fall 2020: February 25 CMPE 280: Web UI Design and Development © R. Mak Demo 23

j. Query Object Effects Method Operation show() Make the object visible. hide() Make the object invisible. toggle() Toggle visible/invisible. fade. In() Fade the object in. fade. Out() Fade the object out. fade. Toggle() Toggle fade in/fade out. slide. Down() Slide the object into view from top to bottom. slide. Up() Slide the object out of view from bottom to top. slide. Toggle() Toggle slide down/slide up. Computer Engineering Dept. Fall 2020: February 25 CMPE 280: Web UI Design and Development © R. Mak 24

j. Query Object Effects, cont’d <body> <h 1>Object Effects</h 1> <div id="buttons"> <h 2 id="show">Show</h 2> <h 2 id="hide">Hide</h 2> <h 2 id="toggle">Toggle</h 2> <h 2 id="slide. Down">Slide Down</h 2> <h 2 id="slide. Up">Slide Up</h 2> <h 2 id="fade. In">Fade In</h 2> <h 2 id="fade. Out">Fade Out</h 2> <h 2 id="wrap">Wrap</h 2> <h 2 id="unwrap">Unwrap</h 2> </div> effects. html <p id="content"> <img src="images/Bristol. png" width="400" id="image"/> </p> </body> Computer Engineering Dept. Fall 2020: February 25 CMPE 280: Web UI Design and Development © R. Mak 25

j. Query Object Effects, cont’d $(init); js/effects. js var showing = false; var wrapped = false; function init() { $("#content"). hide(); $("#show"). click(show. Content); $("#hide"). click(hide. Content); $("#toggle"). click(toggle. Content); $("#slide. Down"). click(slide. Down); $("#slide. Up"). click(slide. Up); $("#fade. In"). click(fade. In); $("#fade. Out"). click(fade. Out); $("#wrap"). click(wrap. Image); $("#unwrap"). click(unwrap. Image); } Computer Engineering Dept. Fall 2020: February 25 CMPE 280: Web UI Design and Development © R. Mak 26

j. Query Object Effects, cont’d function show. Content() { $("#content"). show(); showing = true; } function hide. Content() { $("#content"). hide(); showing = false; } function toggle. Content() { $("#content"). toggle(); showing = !showing; } js/effects. js Computer Engineering Dept. Fall 2020: February 25 CMPE 280: Web UI Design and Development © R. Mak 27

j. Query Object Effects, cont’d js/effects. js function slide. Down() { $("#content"). slide. Down("medium"); showing = true; } function slide. Up() { $("#content"). slide. Up(500); showing = false; } Computer Engineering Dept. Fall 2020: February 25 CMPE 280: Web UI Design and Development © R. Mak 28

j. Query Object Effects, cont’d js/effects. js function fade. In() { $("#content"). fade. In(1000, meow); showing = true; } function fade. Out() { $("#content"). fade. Out("fast"); showing = false; } function meow() { alert("MEOW!"); } Computer Engineering Dept. Fall 2020: February 25 CMPE 280: Web UI Design and Development © R. Mak 29

j. Query Object Effects, cont’d js/effects. js function wrap. Image() { if (showing) { $("#image"). wrap("<div class='wrapped'></div>"); wrapped = true; } } function unwrap. Image() { if (showing && wrapped) { var image = $("#image"). clone(); $(". wrapped"). remove(); $("#content"). append(image); wrapped = false; } } Computer Engineering Dept. Fall 2020: February 25 CMPE 280: Web UI Design and Development © R. Mak Demo 30

j. Query Object Animation o Use the css() method to change an object’s position. o Use chaining: $("#content"). css("left", "10 px"). css("top", "120 px"); o Or use a JSON object: $("#content"). css( {"left": "10 px", "top": "120 px"} ); Computer Engineering Dept. Fall 2020: February 25 CMPE 280: Web UI Design and Development © R. Mak 31

j. Query Object Animation, cont’d o The j. Query animate() method changes any DOM characteristics (such as position) over time. n Example: var end = {"left": "500 px", "top": "300 px"}; . . . $("#content"). animate(end, 2000); Change the left and top attribute values to 500 px and 300 px, respectively, over a span of 2 seconds. Computer Engineering Dept. Fall 2020: February 25 CMPE 280: Web UI Design and Development © R. Mak 32

j. Query Object Animation, cont’d o The animation can occur in two modes. o swing: The animation starts slowly, speeds up, and then ends slowly (like a child on a swing). n o This is the default mode. linear: The animation occurs at a constant speed. $("#content"). animate(end, 2000, "linear"); Computer Engineering Dept. Fall 2020: February 25 CMPE 280: Web UI Design and Development © R. Mak 33

j. Query Object Animation, cont’d <form action = ""> <fieldset> <button type = "button" id = "home"> Home </button> <button type = "button" id = "swing"> Swing glide </button> <button type = "button" id = "linear"> Linear glide </button> <button type = "button" id = "left"> < - </button> <button type = "button" id = "right"> --> </button> </fieldset> </form> animate. html <p id="content"> <img src="images/Bristol. png" width="200" id="image"/> </p> Computer Engineering Dept. Fall 2020: February 25 CMPE 280: Web UI Design and Development © R. Mak 34

j. Query Object Animation, cont’d js/animate. js $(init); var start = {"left": "10 px", "top": "120 px"}; var end = {"left": "500 px", "top": "300 px"}; function init() { $("#home"). click(home); $("#swing"). click(swing. Glide); $("#linear"). click(linear. Glide); $("#left"). click(left); $("#right"). click(right); } function home() { $("#content"). css(start); Computer CMPE 280: Web UI Design and Development } Engineering Dept. Fall 2020: February 25 © R. Mak 35

j. Query Object Animation, cont’d function swing. Glide() { home(); $("#content"). animate(end, 2000); } js/animate. js function linear. Glide() { home(); $("#content"). animate(end, 2000, "linear"); } function left() { $("#content"). animate({"left": "-=10 px"}, 100); } function right() { $("#content"). animate({"left": "+=10 px"}, 100); Computer Engineering Dept. CMPE 280: Web UI Design and Development } Fall 2020: February 25 © R. Mak Demo 36