1. User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1

2. Components of jQuery Mobile 2  Data attributes  Pages, Dialogs, and Transitions  Toolbars, Buttons, and icons  Content Formatting  Grids  Content blocks  Collapsible sets  ListViews  Forms  Events & Methods  Most are used automatically  do not need to code them yourself

3. jQuery events 3

4. jQuery event basics 4  Actions are constantly occurring on an app  App is notified about them if its listening for them  Listening for an event basically means the app is waiting for notification that a specific event has occurred  then you'll specify how the app should react  Events are often triggered by the end user's interaction with the page  To specify to the app what to do when an event occurs, provide a function, also known as an event handler. This function is executed whenever the event occurs (or until the event is unbound)  Syntax: ($element).event( function() {. });

5. There are many ways to bind events with jQuery 5 1.Attach an event handler directly to the button using jQuery's shorthand ‘click’ method $( "#helloBtn" ).click(function( event ) { alert( "Hello." ); }); 2.Attach an event handler directly to the button using jQuery's ‘bind’ method, passing it an event string of ‘click’ $( "#helloBtn" ).bind( "click", function( event ) { alert( "Hello." ); }); 3.Attach an event handler directly to the button using jQuery's ‘on’ method. $( "#helloBtn" ).on( "click", function( event ) { alert( "Hello." ); }); 4.Attach an event handler to the ‘body’ element that is listening for clicks, and will respond whenever *any* button is clicked $( "body" ).on({ click: function( event ) { alert( "Hello." ); } }, "button" );

6. jQuery Mobile events 6

7. Events 7  You can use any standard jQuery events in jQuery Mobile  The app has access to regular events (button clicks, etc)  jQuery Mobile also exposes its own events for use.  Physical events such as touch, swipe, scroll, orientation  Page events such as create, init, load, etc.

8. JQM Physical events 8

9. Physical Events 9  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

10. Example of Tap and Hold 10  the two binds 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 $(“body”).on(“tap”, function(e) { …. }); Note: The.on() method is used to attach event handlers The.bind() method was the primary means of attaching behavior to a document

11. Example of swipe event 11 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.

12. Mobile object 12  jQuery Mobile exposes several methods and properties on the $.mobile object for use in your applications  $.mobile.activePage()  $.mobile.activePage is always a cached object of the current data- role="page" element  $.mobile.changePage()  Programmatically change from one page to another  $.mobile.loadPage()  Load an external page, enhance its content, and insert it into the DOM  $.mobile.loading() Show/hide a page loading message, configurable by $.mobie.loader

13. A more complex example 13 The event handler is now listening for both swipeleft and swiperight. It first grabs the active page using $.mobile.activePage the [0] at the end refers to the fact that the value is actually a jQuery Selector Using [0] grabs the actual DOM item the event type will be either swipeleft or swiperight Once we know that, we can actively move the user around depending on what page they are currently on and in what direction they swiped.

14. Scrolling 14 Listens for s crollstart and scrollstop the list of tags will ensure that the page is actually scrollable when you test when the scrolling will start and end append another status div

15. orientation 15 The orientationchange event is triggered when the user rotates the mobile device vertically or horizontally. it is built into the window object

16. orientation 16 $(window).on("orientationchange",function(){ alert("The orientation has changed!"); }); $(window).on("orientationchange",function(event){ alert("Orientation is: " + event.orientation); }); $(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

17. JQM Page events 17

18. Page events 18  jQuery Mobile has its own concept of pages  Numerous page events are supported, but not all will necessarily be useful in your app  Events for handling pages in jQuery Mobile 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

19. Initialization 19  When a typical page in jQuery Mobile is initialized, it goes through two stages:  Before page creation  Page creation  Each stage has an event that can be used to insert or manipulate code before or when jQuery Mobile enhances the page  Pagebeforecreate: Triggered when the page is about to be initialized, and before jQuery Mobile has started enhancing the page  Pagecreate: Triggered when the page has been created, but before enhancement is complete Note: pageInit event is no longer used pagecreate event should be used in cases where you would have used $(document). ready

20. Initialization 20  Single page $(document).on("pagebeforecreate",function(event){ alert("pagebeforecreate event fired!"); }); $(document).on("pagecreate",function(event){ alert("pagecreate event fired!"); });  Multiple pages - The second parameter ("#pageone") points to the id of the page to specify the event(s) for $(document).on("pagecreate","#pageone",function(){ // jQuery Mobile events go here... });

21. First stage before page create 21  The pagebeforecreate event is used when you have content that you want modified before jQuery Mobile has had a chance to lock in and write the data-roles and attributes of page elements to the DOM  Line 9 contains some jQuery code that is used to bind the pagebeforecreate event to the document.  This is done by using the.on() function  Line 10 shows that when the pagebeforecreate event runs it searches for any elements that have an attribute of class="modify" and applies an attribute of datainset="true" to any that are found by using the.attr() function  Line 11 ends the.on() function  line 12 closes the script element.  Because the pagebeforecreate event runs before the page code is added to the DOM, jQuery Mobile sees the data- inset="true" attribute and styles it as an inset list

22. Next stage pagecreate 22  In this example, the script that runs during the pagecreate event will apply the necessary styles to make the ul element an inset list 

23. Page Load 23  Page load events are for external pages  Whenever an external page is loaded into the DOM, 2 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

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

25. Page Transition 25  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

26. Page Transition 26 $(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"); });

27. Page Change 27  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