1. Phonegap Bridge Page Events, Physical Events, Device Events
CIS 136 Building Mobile Apps

2. Page Events

3. Page events
Handled by jQuery Mobile and are divided into four categories:
Page Initialization - Before page creation, and when the page has been created
Page Load/Unload - When an external page is loading, unloading or encounters a failure
Page Transition - Before and after page transitions
Page Change - When pages are changed to or from, or encounters a failure
Note: Page Initialization events were covered in week 5

4. Page Load Page load events are for external pages
Whenever an external page is loaded, two events fire
Pagecontainerbeforeload
Triggered before any page load request is made
and either pagecontainerload (success)
Triggered after the page has been successfully loaded and inserted into the DOM
or pagecontainerloadfailed (fail)
Triggered if the page load request fails
By default, it will show the "Error Loading Page" message

5. Page Load
$(document).on("pagecontainerload",function(event,data){   alert("pageload event fired! URL: " + data.url); }); $(document).on("pagecontainerloadfailed",function(event,data){   alert("Sorry, requested page does not exist."); });

6. Page Transition
transition from one page to the next – 2 pages involved
a "from" page and a "to" page - these transitions animate the change from the current active page (fromPage) to a new page (toPage)
pagebeforeshow
Triggered on the "to" page, before the transition animation starts
pageshow
Triggered on the "to" page, after the transition animation completes
pagebeforehide
Triggered on the "from" page, before the transition animation starts
pagehide
Triggered on the "from" page, after the transition animation completes

7. Page Transition
$(document).on("pagebeforeshow","#pagetwo",function(){ // When entering pagetwo alert("pagetwo is about to be shown"); }); $(document).on("pageshow","#pagetwo",function(){ // When entering pagetwo alert("pagetwo is now shown"); $(document).on("pagebeforehide","#pagetwo",function(){ // When leaving pagetwo alert("pagetwo is about to be hidden"); $(document).on("pagehide","#pagetwo",function(){ // When leaving pagetwo alert("pagetwo is now hidden");

8. Page Change
These events are related to the change from one page to another.
Pagebeforechange
Triggered on the "to" page, before the change starts
Pagechange
Triggered after the page has been successfully loaded OR
Pagechangefailed
Triggered if the page load request fails

9. Physical Events

10. Physical Events
Handled by jQuery Mobile based on code you write which listens for them
tap and taphold
A quick physical touch on the web page
swipe, swipeleft, and swiperight
finger movement across most of the devices
swipe event is generic one,
swipeleft and swiperight represent a swipe in a specific direction
Note: there is no support for a swipe up or down event.
scrollstart and scrollstop
the beginning and end of scrolling a page
orientationchange
the device's orientation changes.
vclick, vmousedown, vmouseup, vmousemove, vmousecancel, and vmouseover
"virtual" events
aliases for click and touch events

11. Example of Tap and Hold the two listeners handle the event
one listens for tap while the other listens for taphold
The user can do either action and a different status message is displayed
gives you a good idea of how you could respond differently based on how long the user holds their finger down
Note that a taphold event also fires a tap event, specifically when the user lifts their finger off the device

12. Example of swipe event
One important difference is that we append to the status div instead of simply setting it. Why?
A swiperight or swipeleft event is automatically a swipe event. If we set the text in the
paragraph, one would wipe out the other.

13. Scrolling Listens for scrollstart and scrollstop
the list of <br/> tags has been removed in thisslside forspace considerations, but having them in the page view will ensure that the page is actually scrollable when tested
when the scrolling will start and end append another status div

14. orientation
The orientationchange event is triggered when the user rotates the mobile device vertically or horizontally. on
$(window).on("orientationchange",function(){   if(window.orientation == 0) // Portrait   {     $("p").css({"background-color":"yellow","font-size":"300%"});   }   else // Landscape   {     $("p").css({"background-color":"pink","font-size":"200%"});   } });
window.orientation property returns 0 for portrait and 90 or -90 for landscape

15. Device Events

16. Device Events
A device event is any action that is initiated by the device
Deviceready
Pause
Resume
Backbutton
Menubutton
Searchbutton
Startcallbutton
Endcallbutton
Volumedownbutton
Volumeupbutton
Online
Offline

17. eventListeners
While page events can be triggered in code, physical and device events need to be “listened” for
Javascript example:
<script> document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() { //code additional listeners here } </script>
jQuery example:
<script>
$(document).on(“deviceready”, function() {
// code additional listeners here }
</script>

18. deviceready Event
Indicates the first page view has fully loaded (all page related events related to page create and page load have completed)
App can now interact with device events

19. Event Types backbutton menubutton pause resume searchbutton online
User presses back button on device
menubutton
User presses menu button on device
pause
An app is put into the background, but not shut down
resume
A paused app is put into the foreground
searchbutton
Use presses the devices search button
online
App is connected to the internet
offline
App is disconnected from the internet
<script>
$(document).on(“offline”, function() {
// code goes here }
</script>

20. A review of Javascript

21. Using the <script> Element
script statements;
</script>
Each statement inside the script tags is a single line that indicates an action for the browser to take
The semicolon notifies the browser that it has reached the end of the statement

22. Declaring a variable A variable is a value stored in device memory
You can declare variables with any of the following JavaScript commands:
var variable;
var variable = value;
variable = value;
where variable is the name of the variable and value is the initial value of the variable.
Use reserved keyword var to create variables
The first command creates the variable without assigning it a value;
the second and third commands both create the variable and assign it a value
Assignment operator: equal sign (=)
Assigns value on the right side of the expression to the variable on the left side of the expression

23. Case Sensitivity in JavaScript
JavaScript is case sensitive
Ignores most occurrences of extra white space
Do not break a statement into several lines

24. Making Decisions Decision making
Process of determining the order in which statements execute in a program
Decision-making statements, decision-making structures, or conditional statements
Used when you need to adopt one path out of the given two paths
Conditional statements allow your program to make correct decisions and perform right actions
Runs a command or command block only when certain circumstances are met
JavaScript supports 2 kinds of conditional statements which are used to perform different actions based on different conditions
if .. else
switch

25. if/else Statements Executes one action if the condition is true
And a different action if the condition is false
Syntax for an if else statement
if (expression) {
statements }
else {

26. New stuff in Javascript

27. Adding Comments to a JavaScript Program
Nonprinting lines placed in code containing various types of remarks
Will be ignored by the browser
Line comment
Hides a single line of code
Add two slashes // before the comment text
Block comments
Hide multiple lines of code
Add /* before the first character included in the block and */ after the last character in the block

28. Concatenation Combining two pieces of data using the + sign
JavaScript is a weakly typed language
The + symbol can be used with either numeric values or text strings
var total = 5 + 4;
var emLink = "cadler" + + "mpl.gov";

29. Modifying variables Modifying variables
Change a variable’s value at any point in a script
Use a statement including the variable’s name
Followed by an equal sign
Followed by the value to assign to the variable
var total1 = 5 + 4; var total2 = 22;
var subtotal;
Subtotal = total1 + total2;
var total = 5 + subtotal;

30. JavaScript variable types
Numeric variables
any number, such as 13, 22.5, etc
String variables
any group of text characters, such as “Hello” or “Happy Holidays!”
Must be enclosed within either double or single quotations (but not both)
Boolean variables
accepts only true and false values
Null variables
has no value at all
You must declare a variable before using it

31. Working with Data Types (cont’d.)
JavaScript interpreter automatically determines data type stored in a variable
Examples:
diffTypes = "Hello World"; // String
diffTypes = 8; // Integer number
diffTypes = 5.367; // Floating-point number
diffTypes = true; // Boolean
diffTypes = null; // null

32. Arithmetic Operators Perform mathematical calculations
Addition, subtraction, multiplication, division
Returns the modulus of a calculation
Arithmetic binary operators

33. Logical Operators
Compare two Boolean operands for equality

34. Comparison and Conditional Operators (cont’d.)

35. Assignment Operators (cont’d.)

36. Functions
A JavaScript function is a block of code designed to perform a particular task – an action of some sort
A JavaScript function is executed when "something" invokes it (calls it).
Function statements
Do the actual work
Contained within function braces
function displayStudentNames() {
alert(“<p>” + Joe + “</p>”);
alert(“<p>” + Sam + “</p>”); }

37. Callback Functions
a function that is passed to another function

38. Parameters
If a function needs additional information, providing it is called Passing arguments
The function must be designed to receive that data, and that data is called a parameter
Arguments vs. Parameters – refer to the same data
Argument – Variable or value passed to the function
Parameter – the variable or value being received by the function