SEEM4570 System Design and Implementation. Lecture 3 Events

Size: px

Start display at page:

Download "SEEM4570 System Design and Implementation. Lecture 3 Events"

Kelley Fletcher
5 years ago
Views:

1 SEEM4570 System Design and Implementation Lecture 3 Events

2 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

3 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

4 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

5 Preparation (cont d) Modify index.js: DELETE EVERYTHING (i.e. you will have an empty file) 2017 Gabriel Fung 5

6 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

7 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

8 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 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 Gabriel Fung 8

9 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: Gabriel Fung 9

10 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

11 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 Gabriel Fung 11

12 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) Gabriel Fung 12

13 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

14 Tidy Your Program (cont d) Run your app and you should see: 2017 Gabriel Fung 14

15 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 Gabriel Fung 15

16 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

17 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 Gabriel Fung 17

18 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 Gabriel Fung 18

19 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

20 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=" 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) Gabriel Fung 20

21 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

22 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 Gabriel Fung 22

23 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

24 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

25 Revise index.html and index.css (cont d) Run your app and you should see: 2017 Gabriel Fung 25

26 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). event is the event that you want to monitor on those matched elements. action is what you want to do when the event is triggered Gabriel Fung 26

27 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

28 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

29 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

30 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

31 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

32 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 Gabriel Fung 32

33 jquery Events Some common events: click touchstart touchend touchmove touchcancel Reference: US/docs/Web/Events/touchstart 2017 Gabriel Fung 33

34 Other Resources Some other resources that can help you to add more events to your app easily: Swipe, Tap, Double Tap, Optimized for mobile platform 2017 Gabriel Fung 34

35 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

36 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

37 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

38 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 Gabriel Fung 38

39 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

40 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

SEEM4570 System Design and Implementation. Lecture 3 Cordova and jquery

SEEM4570 System Design and Implementation Lecture 3 Cordova and jquery Prepare a Cordova Project Assume you have installed all components successfully and initialized a project. E.g. follow Lecture Note