User Interface Design using jQuery Mobile

CIS 136 Building Mobile Apps 1

Components of jQuery Mobile

       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 2

3

jQuery events

jQuery event basics

     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() { .

.

}); 4

There are many ways to bind events with jQuery

1. Attach an event handler directly to the button using jQuery's shorthand ‘click’ method $( "#helloBtn" alert( "Hello." }); ).click( function ( event ) { ); 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" ); ); 5

6

jQuery Mobile events

Events

  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.

7

8

JQM Physical events

Physical Events

     

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 9

Example of Tap and Hold

10 $(“body”).on(“tap”, function(e) { ….

});  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 Note: The .on() method is used to attach event handlers The .bind() method was the primary means of attaching behavior to a document

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.

11

Mobile object

 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

12

A more complex example

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.

13

Scrolling

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 14

orientation

• • The orientationchange event is triggered when the user rotates the mobile device vertically or horizontally.

it is built into the window object 15

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).on("orientationchange",function(){ alert("The orientation has changed!"); }); $(window).on("orientationchange",function(event){ alert("Orientation is: " + event.orientation); }); window.orientation property returns 0 for portrait and 90 or -90 for landscape 16

17

JQM Page events

Page events

 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 18

Initialization

   When a typical page in jQuery Mobile is initialized, it goes through two stages: Before page creation Page creation  19   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

Initialization

 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 20

     

First stage before page create

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 21

Next stage pagecreate

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

Page Load

  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 23

Page Load

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

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 25

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

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 27