Download presentation
Presentation is loading. Please wait.
1
CMPE 280 Web UI Design and Development November 28 Class Meeting
Department of Computer Engineering San Jose State University Fall 2017 Instructor: Ron Mak
2
Midterm Average 92.11
3
Oral Presentations Thursday, December 7 Thursday, November 30
Web Architects Parking Guaranteed Nexus Fantasy Tuesday, December 5 Web Wizards Information JS Magician Empty Coffee Cups Thursday, December 7 Websters No Name 1 Web Ex Team 404
4
React Event Handling Example
Count mouse clicks on the + sign. If the shift key is down, add 10 for each click.
5
Program Outline <body> <div id="container"></div>
<script type="text/babel"> var destination = document.querySelector("#container"); var Counter = React.createClass( { render: function() { ... return ( <div style={textStyle}> {this.props.display} </div> ); } });
6
Program Outline, cont’d
var CounterParent = React.createClass( { ... render: function() { ... return ( <div style={backgroundStyle}> <Counter display={this.state.count}/> <button onClick={this.increase} style={buttonStyle}> + </button> </div> ); } });
7
Program Outline, cont’d
ReactDOM.render( <div> <CounterParent/> </div>, destination ); </script> </body>
8
React Event Handling Listen to an event (such as a mouse click) by specifying everything inline in the JSX itself. Specify both the event you are listening for and the event handler that will get called, all inside the markup.
9
Class Counter var Counter = React.createClass( { render: function() {
{ render: function() { var textStyle = { fontSize: 72, fontFamily: "sans-serif", color: "#333", fontWeight: "bold" }; return ( <div style={textStyle}> {this.props.display} </div> ); } });
10
Class CounterParent var CounterParent = React.createClass( {
{ getInitialState: function() { return { count: 0 }; }, increase: function(ev) var currentCount = this.state.count; if (ev.shiftKey) currentCount += 10; else currentCount += 1; this.setState({ count: currentCount }); ... });
11
Class CounterParent, cont’d
var CounterParent = React.createClass( { ... render: function() { var backgroundStyle = { padding: 50, backgroundColor: "#FFC53A", width: 250, height: 100, borderRadius: 10, textAlign: "center" }; var buttonStyle = { fontSize: "1em", width: 30, height: 30, fontFamily: "sans-serif", color: "#333", fontWeight: "bold", lineHeight: "3px" ... } });
12
Class CounterParent, cont’d
var CounterParent = React.createClass( { ... render: function() { return ( <div style={backgroundStyle}> <Counter display={this.state.count}/> <button onClick={this.increase} style={buttonStyle}> + </button> </div> ); } });
13
Event Properties Each event type contains its own set of properties that are accessible via the event handler for that event. Example: Mouse event objects indicate which button was pressed and the screen position of the mouse click.
14
React Synthetic Events
React wraps the browser’s native DOM events with synthetic events. Because the SyntheticEvent wraps native DOM event, events and their properties may not map one-to-one. Some DOM events don’t even exist in React. Not all DOM events have SyntheticEvent equivalents. It is possible to access the event handler of the underlying DOM object.
15
Generic Synthetic Event Properties
16
Synthetic Mouse Event Properties
boolean altKey number button number buttons number clientX number clientY boolean ctrlKey boolean getModifierState(key) boolean metaKey number pageX number pageY DOMEventTarget relatedTarget number screenX number screenY boolean shiftKey
17
Synthetic Keyboard Event Properties
boolean altKey number charCode boolean ctrlKey boolean getModifierState(key) string key number keyCode string locale number location boolean metaKey boolean repeat boolean shiftKey number which
18
React Synthetic Events, cont’d
Browser compatibility Especially event handling in older browsers. Performance React uses a single event handler at the root of a document that is responsible for listening to all events and calling the appropriate event handler as necessary.
19
React Synthetic Events, cont’d
Learning React by Kirupa Chinnathambi Addison-Wesley, 2016
20
Usability Testing Ask someone (the test subject) to attempt to accomplish some tasks on your website. The development team carefully observes what the test subject does. Have the test subject think out loud. Answer questions asked by the test subject, but don’t help the person accomplish the tasks. After the test, the development team analyzes the results to improve the website.
21
Usability Testing, cont’d
Video of how to conduct a usability test: (link at the bottom of the web page).
Similar presentations
