CMPE 280 Web UI Design and Development February
CMPE 280 Web UI Design and Development February 27 Class Meeting Department of Computer Engineering San Jose State University Spring 2020 Instructor: Ron Mak www. cs. sjsu. edu/~mak 1
The j. Query User Interface Toolkit o The j. Query User Interface Toolkit is built on top of the j. Query library. o New cross-platform UI features: n UI elements: scrollbars o n Advanced user interaction o o n drag and drop resize objects Theme templates o n tabs, date pickers, etc. control your application’s look and feel Icon library Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 2
The j. Query User Interface Toolkit, cont’d o Build a modern application. n n That just happens to run inside a web browser. Add visual effects. o Single-page application (SPA) o Open source n Download from http: //jqueryui. com Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 3
Themes o A j. Query theme is a visual rule set. n n o Defines a particular look and feel. Implemented by a complex CSS document that you can download and link to your web pages. Visit the j. Query Theme Roller at http: //jqueryui. com/themeroller/ n n n Widgets (tool objects) Select and download themes. Modify themes or create new themes. Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 4
Drag an Object o Call j. Query UI’s draggable() function on an object to enable it to be dragged with a mouse. Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 5
Drag an Object, cont’d <head> drag. html <title>Drag</title> <meta charset= "UTF-8" /> <script type="text/javascript" src="js/jquery. js"> </script> <script type="text/javascript" src="js/jquery-ui-lightness/jquery-ui. min. js"> </script> <script type="text/javascript" drag. js src="js/drag. js"> $(init); </script> </head> function init() { <body> $("#drag. Me"). draggable(); <h 1>Drag Demo</h 1> } <div id="drag. Me"> <img src="images/Bristol. png" width="200" /> </div> Computer Engineering Dept. CMPE 280: Web UI Design and Development 6 Spring 2020: February 27 © R. Mak </body>
UI Icons o Each UI Toolkit download includes an images folder that contains the icon files. o To insert an icon, create a span <span class="ui-icon-name"></span> where icon-name is obtained from the Theme Roller. o Hover the mouse over the desired icon to see its name. Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 7
Resize an Object o Call a j. Query object’s resizable() function on an object to enable it to be resized with a mouse. o Add the following j. Query UI classes to the object: n n n ui-widget-content ui-corner-all Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 8
j. Query UI Toolkit Classes for CSS Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 9
Resize an Object, cont’d <head> resize. html <meta http-equiv="content-type" content="text/xml; charset=utf-8" /> <link rel = "stylesheet" type = "text/css" href = "css/jquery-ui-lightness/jquery-ui. min. css" /> <link rel = "stylesheet" type = "text/css" href = "css/resize. css" /> <script type = "text/javascript" src = "js/jquery. js"> </script> <script type = "text/javascript" src = "js/jquery-ui-lightness/jquery-ui. min. js"> </script> <script type = "text/javascript" src="js/resize. js"> </script> <title>resize. html</title> </head> Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 10
Resize an Object, cont’d resize. html <body> <h 1>Resize Demo</h 1> <div id="resize. Me"> <h 2> <span class="ui-icon-heart"></span> Resize me <span class="ui-icon-star"></span> </h 2> <p> Drag a corner or side to resize. </p> </div> </body> Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 11
Resize an Object, cont’d resize. js $(init); function init() { $("#resize. Me"). resizable(); $("div"). add. Class("ui-widget-content"). add. Class("ui-corner-all"); $(": header"). add. Class("ui-widget-header"). add. Class("ui-corner-all"); } : header is a j. Query extension that matches all header elements. Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 12
Drag and Drop an Object o Call j. Query UI’s droppable() function on an object to enable it to be a drop target. o Use the bind() function to bind drop-in and drop-out events to the object. n o Attach a callback function to each event. UI variable ui-draggable refers to the object that triggered the drop-in callback function. Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 13
Drag and Drop an Object, cont’d dragdrop. html <body> <h 1>Drag and Drop Demo</h 1> <div class="drag. Me"> DRAG ME </div> <div id="target"> DROP HERE </div> </body> </html> Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 14
Drag and Drop an Object, cont’d. drag. Me { dragdrop. css width: 100 px; height: 100 px; border: 1 px solid blue; text-align: center; background-color: white; position: absolute; z-index: 100; } #target { width: 200 px; height: 200 px; border: 1 px solid red; text-align: center; position: absolute; left: 300 px; top: 100 px; z-index: 0; } Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 15
Drag and Drop an Object, cont’d dragdrop. js $(init); function init() { clone. Drag. Me(); $(". drag. Me"). draggable(); $("#target"). droppable(); $("#target"). bind("drop", highlight. Target); $("#target"). bind("dropout", reset. Target); } Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 16
Drag and Drop an Object, cont’d dragdrop. js function highlight. Target(event, ui) { $("#target"). add. Class("ui-state-highlight"). html("Dropped "). append(ui. draggable. text()); } function reset. Target(event, ui) { $("#target"). remove. Class("ui-state-highlight"). html("Drop on me"); } Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 17
Drag and Drop an Object, cont’d dragdrop. js function clone. Drag. Me() { for (i = 1; i <= 4; i++){ z. Value = 101 + i; x. Pos = 20*i; y. Pos = 80 + 20*i + "px"; $("div: first"). clone(). insert. After("div: first"). css("left", x. Pos). css("top", y. Pos). css("z. Index", z. Value). append(" #" + i); } } Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 18
j. Query UI Widgets o Popular j. Query UI widgets include: n n n n accordion tabs date picker slider selectable elements sortable lists dialog boxes Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 19
Accordion Widget o Create an outer div to be the accordion widget. o Create a heading for each collapsible element of the accordion widget. n n o The headings are contained inside the outer div. Make all the headings at the same level. Follow each heading with an inner div to contain the contents of the collapsible element. Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 20
Accordion Widget, cont’d accordion. html <body> <h 1>Accordion Demo</h 1> Outer div <div id="accordion"> <h 2>CMPE 180 A Data Structures and Algorithms in C++</h 2> Inner div <div> <p> Data representation and preprocessing, proximity, . . . </p> <strong>Prerequisite: </strong> Admission into MS Computer Engineering or MS Software Engineering. </p> </div> <h 2>CMPE 226 Database Systems</h 2> Inner div <div>. . . </div> </body> Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 21
Accordion Widget, cont’d $(init); accordion. js function init() { $("#accordion"). accordion(); } Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 22
Tabs Widget o Create an outer div to be the tabs widget. o The first element contained in the div must be an ordered or unordered list to serve as the tabs directory. o Each list item is a local link to an inner div that contains the tab contents. Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 23
Tabs Widget, cont’d tabs. html <body> <h 1 class="ui-state-default">Tabs Demo</h 1> Outer div <div id="tabs"> <ul> Tabs directory <li><a href="#CMPE 180 A">CMPE 180 A</a></li> href="#CMPE 226">CMPE 226</a></li> href="#CMPE 280">CMPE 280</a></li> href="#CMPE 295 A">CMPE 295 A</a></li> </ul> Inner divs <div id="CMPE 180 A"> js/tabs. js $(init); . . . </div> function init() <div id="CMPE 226"> {. . . $("#tabs"). tabs(); </div> }. . . </div> Computer Engineering Dept. CMPE 280: Web UI Design and Development 24 </body> Spring 2020: February 27 © R. Mak
AJAX Tabs o Use AJAX to obtain the contents of a tab. o Specify the file to be loaded from the server as a link in the corresponding item in the tabs directory list. Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 25
AJAX Tabs, cont’d ajaxtabs. html <body> <h 1 class="ui-state-default">AJAX Tabs Demo</h 1> <div id="tabs"> <ul> <li><a href="courses/CMPE 180 A. html">CMPE 180 A</a></li> <li><a href="courses/CMPE 226. html">CMPE 226</a></li> <li><a href="courses/CMPE 280. html">CMPE 280</a></li> <li><a href="courses/CMPE 295 A. html">CMPE 295 A</a></li> </ul> </div> </body> Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 26
Date Picker Widget widgets. html <input type="text" id="date. Picker" /> $("#date. Picker"). datepicker(); Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak js/widgets. js 27
Slider Widget widgets. html <div id="slider"></div> <div id="slide. Output">0</div> $("#slider"). slider(). bind("slide", report. Slider); . . . function report. Slider() { var slider. Val = $("#slider"). slider("value"); $("#slide. Output"). html(slider. Val); js/widgets. js } Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 28
Selectable Widget <ul id="selectable"> <li>alpha</li> <li>beta</li> <li>gamma</li> <li>delta</li> </ul> widgets. html $("#selectable"). selectable(); js/widgets. js Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 29
Sortable Widget <ul id="sortable"> <li>alpha</li> <li>beta</li> <li>gamma</li> <li>delta</li> </ul> widgets. html $("#sortable"). sortable(); js/widgets. js Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 30
Dialog Widget <div id="dialog" title="my dialog"> <p> The dialog class allows you to have a movable sizable customized dialog box consistent the installed page theme. </p> </div> <input type="button" value="open dialog" onclick="open. Dialog()" /> <input type="button" value="close dialog" onclick="close. Dialog()" /> widgets. html Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 31
Dialog Widget, cont’d js/widgets. js function open. Dialog() { $("#dialog"). dialog("open"); } function close. Dialog() { $("#dialog"). dialog("close"); } Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 32
Assignment #4 o Add j. Query and j. Query UI functionality to your web app. n n o Have at least one on-screen object that is: n n o Pick and use a theme. Or create a new theme. resizable dragged and dropped Use j. Query UI widgets: n n AJAX tabs (either node. js or Apache web server) at least two other interactive widgets Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 33
Assignment #4, cont’d o Include a short informal report that points out the j. Query and j. Query UI features of your app. n n n The purpose of each feature. How it behaves (you can use screenshots). How you implemented it. o You may use other client-side libraries in your final project, but for this assignment, you must use at least j. Query and j. Query UI. o Due Friday, March 6. Computer Engineering Dept. Spring 2020: February 27 CMPE 280: Web UI Design and Development © R. Mak 34
- Slides: 34