SEEM4570 System Design and Implementation Lecture 3 Events
Preparation Install all necessary software and packages. Follow Tutorial Note 2. Initialize a new project. Follow Lecture Note 2 Page 2. Reset everything to scratch. Delete img/logo.png I assume you don t need the Cordova logo. Modify three files (see the following pages for detail): index.html, js/index.js and css/index.css 2017 Gabriel Fung 2
Preparation (cont d) Modify index.html: <!DOCTYPE html> <html> <head> <meta http-equiv="content-security-policy" > Use the default <meta name="format-detection" > settings for these <meta name="msapplication-tap-highlight" > meta statements <meta name="viewport" > <link rel="stylesheet" type="text/css href="css/index.css"> <script src="cordova.js"></script> <script src="js/index.js"></script> </head> <body> </body> </html> 2017 Gabriel Fung 3
Preparation (cont d) Modify index.css: * { -webkit-tap-highlight-color: rgba(0,0,0,0); } body { -webkit-touch-callout: none; -webkit-text-size-adjust: none; -webkit-user-select: none; width:100%; height:100%; margin:0px; padding:0px; } 2017 Gabriel Fung 4
Preparation (cont d) Modify index.js: DELETE EVERYTHING (i.e. you will have an empty file) 2017 Gabriel Fung 5
Preparation (cont d) Now you should have the following structure: +--www +--css +--index.css <-- modified +--img <-- nothing +--js +--index.js <-- empty +--index.html <-- modified 2017 Gabriel Fung 6
Preparation (cont d) Run your project (e.g. type simulate ios in the command prompt): Make sure turn on Developer mode 2017 Gabriel Fung 7
JavaScript Events Events are "things" that happen to HTML elements. Here are some examples of HTML events: An HTML page has finished loading The page fires a loaded event You are typing your email address in a text box The text box fires a change event You clicked a button The button fires a click event. When JavaScript is used in HTML pages, JavaScript can "react" on these events. 2017 Gabriel Fung 8
Cordova DeviceReady Event As you can guess from the name of this event, the deviceready event means the mobile device is ready to use because Cordova loaded all necessary components. Technically, once this event fires, you can safely make any call to the Cordova APIs and write the logic of your app. Reference: https://cordova.apache.org/docs/en/latest/ 2017 Gabriel Fung 9
Cordova DeviceReady Event (cont d) You should write your program AFTER the device ready event fired. Revise your index.js: document.addeventlistener("deviceready", function(){ /* Write your programmig logic here! */ }); 2017 Gabriel Fung 10
About Document Event It takes the following form: document.addeventlistener("xxx", function(){ }); The above statement means: In this document, I want it to listen to the event XXX. If the event XXX fires, I want to run the statements inside the function. 2017 Gabriel Fung 11
Tidy Your Program Let say, you write index.js as: document.addeventlistener("deviceready", function(){ // You write 1,000 lines here. Put your whole app // inside this function }); There is nothing wrong in the above code. But we usually say that it is not robust and difficult to follow. Instead, we usually want to decompose a large program into smaller pieces. Two related terms: cohesion and coupling. You will learn more in SDLC (later in this course). 2017 Gabriel Fung 12
Tidy Your Program (cont d) One way I like is to encapsulate everything into object: document.addeventlistener("deviceready", function(){ console.log( Device is ready now."); app.init(); }); var app = { init: function() { console.log( App is initialized now."); } }; 2017 Gabriel Fung 13
Tidy Your Program (cont d) Run your app and you should see: 2017 Gabriel Fung 14
jquery jquery is a JavaScript Library. jquery greatly simplifies JavaScript programming, especially event handling and animation. jquery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code. jquery is easy to learn. 2017 Gabriel Fung 15
Why jquery? There are lots of other JavaScript frameworks out there, but jquery seems to be the most popular, and also the most extendable. Many of the biggest companies on the Web use jquery, such as: Google Microsoft IBM 2017 Gabriel Fung 16
Adding jquery There are two ways to start using jquery on your web site: Method 1: download the jquery library from jquery.com and include in your application. Method 2: include jquery from a CDN, like Google. 2017 Gabriel Fung 17
Method 1: Download jquery There are two versions of jquery available for downloading: Production version It has been minified and compressed. Please use this one in doing your project. Development version This is for testing and development. It is common that this version contains many bugs. 2017 Gabriel Fung 18
Method 1: Download jquery (cont d) After you downloaded the jquery library, save it into your project directory. +--www +--css +--img +--js +--index.js +--jquery.js +--index.html Add into your index.html: <script src="js/jquery.js"></script> <script src="cordova.js"></script> <script src="js/index.js"></script> 2017 Gabriel Fung 19
Method 2: Include from CDN If you don't want to download and host jquery yourself, you can include it from a CDN (Content Delivery Network): <script src="https://ajax.googleapis.com/ajax/libs/jquery/3. 2.1/jquery.min.js"></script> <script src="cordova.js"></script> <script src="js/index.js"></script> We do not recommend this method because your App need to always connect to Internet to use (which violate the Project Specification). 2017 Gabriel Fung 20
Using jquery After you added jquery into your project, you need to wait jquery to load all its necessary resources before you can use it. Just like Cordova, you need to wait for the deviceready event. There are a number of ways to wait jquery, and I recommend the following short hand: $(function(){ /* Everything inside here means jquery is loaded and you are safe to use jquery s functions. */ }); 2017 Gabriel Fung 21
Using jquery in Cordova Now we revise the index.js as follows: $(function(){ document.addeventlistener("deviceready", function(){ console.log( Device is ready now."); app.init(); }); }); var app = { init: function() { console.log( App is initialized now."); } }; Now you are ready to use jquery in your Cordova projects. 2017 Gabriel Fung 22
Revise index.html and index.css Before we continue, let us revise index.html: <body> <div id="red" class="square"></div> <div id="green" class="square"></div> <div id="blue" class= rectangle"></div> <div id="yellow" class="rectangle"></div> </body> 2017 Gabriel Fung 23
Revise index.html and index.css (cont d) And also revise index.css:.square{ position:absolute; width:100px; height:100px; }.rectangle{ position:absolute; width:200px; height:100px; } #red{ top:0px; left:0px; background:red; } #green{ top:0px; left:100px; background:green; } #blue{ top:100px; left:0px; background:blue; } #yellow{ top:200px; left:0px; background:yellow; } 2017 Gabriel Fung 24
Revise index.html and index.css (cont d) Run your app and you should see: 2017 Gabriel Fung 25
jquery Basic Syntax The jquery syntax is tailor-made for selecting HTML elements and performing actions on them. Basic syntax is: $(selector).on(event, action) $ tell JS we use jquery now. (selector) is used to find HTML elements (based on their names, ids, classes, types, attributes and much more). https://www.w3schools.com/jquery/jquery_ref_selectors.asp event is the event that you want to monitor on those matched elements. https://www.w3schools.com/jquery/jquery_ref_events.asp action is what you want to do when the event is triggered. 2017 Gabriel Fung 26
The element Selector The jquery selector finds elements based on the element name. Example: When we clicked on any div, it will show a message in the console: var app = { init: function() { $("div").on("click", function(){ console.log("div is clicked!"); }); } }; 2017 Gabriel Fung 27
The element Selector (cont d) Example: When we clicked on any div, all divs will fade out: var app = { init: function() { $("div").on("click", function(){ $("div").fadeout(); }); } }; 2017 Gabriel Fung 28
Using this We can use the magic keyword this to refer the element that triggered the event. Example: When we clicked on a div, only the clicked div will fade out: var app = { init: function() { $("div").on("click", function(){ $(this).fadeout(); }); } }; 2017 Gabriel Fung 29
The id Selector The jquery #id selector uses the id attribute of an HTML tag to find the specific element. Example: When we clicked on the red div, all divs will fade out: var app = { init: function() { $( #red").on("click", function(){ $("div").fadeout(); }); } }; 2017 Gabriel Fung 30
The class Selector The class selector uses the class name of an HTML tag to find the elements. Example: When we clicked on the div having the square class, it will fade out: var app = { init: function() { $(".square").on("click", function(){ $(this).fadeout(); }); } }; 2017 Gabriel Fung 31
About HTML Classes Note that we can have more than one class for an HTML element. Example: <div class= square large fancy ></div> The above div belongs to three classes: square, large and fancy By assigning more than one classes to an element, we can manipulate an element far more easier. 2017 Gabriel Fung 32
jquery Events Some common events: click touchstart touchend touchmove touchcancel Reference: https://developer.mozilla.org/en- US/docs/Web/Events/touchstart 2017 Gabriel Fung 33
Other Resources Some other resources that can help you to add more events to your app easily: https://github.com/benmajor/jquery-touch-events Swipe, Tap, Double Tap, https://jquerymobile.com/ Optimized for mobile platform 2017 Gabriel Fung 34
jquery Animate Previously, you already used an animation effect fadeout. We can animate elements using the method called animate. Example 1: When we clicked on a div, it will fade to 10% opacity: var app = { init: function() { $("div").on("click", function(){ $(this).animate({opacity: 0.1}, 500); }); This is the milliseconds to complete the animation } }; 2017 Gabriel Fung 35
jquery Animate Example 2: When we clicked on a div, it will move to a new position: var app = { init: function() { $("div").on("click", function(){ var x = $(this).position().top + 50; var y = $(this).position().left + 50; $(this).animate({top:x+"px", left:y+"px"}, 500); }); } }; 2017 Gabriel Fung 36
jquery Animate (cont ) Example 3: When we clicked on a div, it will move to a new position. If it already moved to a new position, it will move back. $("div").on("click", function(){ if(!$(this).hasclass("new_position")){ $(this).addclass("new_position"); var x = $(this).position().top + 50; var y = $(this).position().left + 50; $(this).animate({top:x+"px", left:y+"px"}); } else{ $(this).removeclass("new_position"); var x = $(this).position().top - 50; var y = $(this).position().left - 50; $(this).animate({top:x+"px", left:y+"px"}); } }); 2017 Gabriel Fung 37
jquery Animate (cont d) The above code has unexpected behavior when you clicked on it continuously! We need to stop the element to listen to any event when it is moving. 2017 Gabriel Fung 38
jquery Animate (cont d) Example (2 nd Attempt): $("div").on("click", function(){ if(!$(this).hasclass("moving")){ $(this).addclass("moving"); if(!$(this).hasclass("new_position")){ $(this).addclass("new_position"); var x = $(this).position().top + 50; var y = $(this).position().left + 50; $(this).animate({top:x+"px", left:y+"px"}, 500, function(){ $(this).removeclass("moving"); }); } else{ $(this).removeclass("new_position"); var x = $(this).position().top - 50; 2017 Gabriel Fung 39
jquery Animate (cont d) } }); } var y = $(this).position().left - 50; $(this).animate({top:x+"px", left:y+"px"}, 500, function(){ $(this).removeclass("moving"); }); 2017 Gabriel Fung 40