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

Page Events

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

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

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."); });

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

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");

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

Physical Events

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

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

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.

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

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

Device Events

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

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>

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

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>

A review of Javascript

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

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

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

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

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 {

New stuff in Javascript

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

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";

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;

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

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

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

Logical Operators Compare two Boolean operands for equality

Comparison and Conditional Operators (cont’d.)

Assignment Operators (cont’d.)

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>”); }

Callback Functions a function that is passed to another function

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