1. Anatomy of an App HTML, CSS, jQuery, jQuery Mobile CIS 136 Building Mobile Apps 1

2. Review 2

3. What we did 3  Created our DialogTest app which was designed to display an image and text and perform 4 notifications  Beep  Alert  Confirm  Prompt  Questions..  Why did all the pop-up windows overlay the image and text?  Why did the prompt window display first?

4. Controlling the timing of events 4 document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { navigator.notification.beep(4); } function listener() { document.addEventListener("deviceready", onDeviceReady, false); } function onDeviceReady() { navigator.notification.beep(4); } To see the page, control the launch of the event so that the events run after the ‘page’ is loaded Nothing stops the code from running

5. Architecture 5

6. 6  Phonegap leverages open web standards  Test/debug user interface using desktop browser  Move on to building out native components and testing on an emulator/device

7. Architecture 7  Phonegap is an intermediary  Wrapper around the app that talks to the mobile device  A web-to-native abstraction layer enables access to device capabilities that are not accessible in Mobile Web applications, such as the accelerometer, camera and local storage  Basically has Two interfaces  User interface – html,css,etc – web view  Device interface – api’s that connect to mobile features – phone view Chromeless browser Phonegap ‘Built’ app - publishable

8. HTML web view structure 8

9. HyperText Markup Language (HTML) 9  Markup language  Describes structure and content of a document  A bunch of “Tags” containing instructions  Instructions are called elements  Tags may contain additional information called Attributes  Syntax  content  Types of tags  Containers - have opening and closing and contain content  Standalone tags – opening closes itself  Whitespace  Any whitespace you type in your html file will be ignored by the browser

10. The Structure of an HTML File 10  DOCTYPE tag  HTML tag  Root element  Can have only one root element  Head element  Contains tags and information about the document  Instructions in this section are done before the page is displayed and remain in memory  Body element  Contains tags and content to be displayed in the Web page  Sequential process of each line content

11. Element Attributes 11  Provide browsers with additional information about how to treat/refine the tag or acquire its content  Inserted into element’s opening tag using the syntax Self-closing tags do not need a closing tag

12. tag 12  Container for other tags 

13. Viewport meta tag 13  Specifies how the browser should control the page zoom level and dimensions  user-scalable: allows/prevents the user from using the browser's zoom  width=device-width: sets the width of the page to follow the screen-width of the device  Varies depending on the device  initial-scale=1 sets the initial zoom level when the page is first loaded by the browser

14. 14  This instructs PhoneGap Build to inject a platform specific version of phonegap.js at build time  phonegaps.js should not be present in the project folder change to phonegap.js The javascript/jQuery functions you write for your app

15. tag 15  Container for other tags and content (text, multi-media)  Paragraph: content  Line Breaks:  Lists: items,  List items: content  Headings:.... Etc.

16. Structuring a page 16  Generic elements  - divides page content into sections that can be formatted and positioned using styles  - identifies text that can be formatted using styles  Semantic elements  - top of page  - generic section of page  - composition, like a newspaper article  - links to other pages  - sidebar  - bottom of page

17. Working with Images 17  Inline images  Displays a graphic image located in a separate file within the contents of a block-level element  Most widely viewable in one of three file formats  JPEG, GIF (proprietary), or PNG  To markup an inline image  The alt attribute is used for users who do not display images.

18. jQuery and jQuery Mobile Web view 18

19. jQuery 19  a lightweight, "write less, do more", JavaScript library, focusing on desktop applications  takes a lot of common tasks that require many lines of and wraps them into methods that you can call with a single line of code  to start using jQuery on your web site:  Download the jQuery library from jQuery.com  Include jQuery from a CDN, like Google  two versions of jQuery available for downloading:  Production version –  for your live website because it has been minified and compressed  Development version  for testing and development (uncompressed and readable code)  Both versions can be downloaded from jQuery.com

20. jQuery Download vs CDN (faster) 20  The jQuery library is a single JavaScript file  Download  Reference it with the HTML tag (notice that the tag should be inside the section):  CDN (Content Delivery Network)  GOOGLE CDN  Microsoft CDN

21. jQuery Syntax 21  With jQuery you select (query) HTML elements and perform "actions" on them  Basic syntax is: $(selector).action()  A $ sign to define/access jQuery  A (selector) to "query (or find)" HTML elements  A jQuery action() to be performed on the element(s)  Examples  $(this).hide() - hides the current element  $("p").hide() - hides all elements  $(".test").hide() - hides all elements with class="test“  $("#test").hide() - hides the element with id="test“

22. Document.ready 22  all jQuery code should be inside a document ready event: $(document).ready(function() { // jQuery code go here... } );  prevents any jQuery code from running before the document is finished loading $(document).ready(function() { document.addEventListener("deviceready", onDeviceReady, false); } function onDeviceReady() { navigator.notification.beep(4); }

23. jQuery selectors 23  used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes  based on the existing CSS selectors  has some own custom selectors  All selectors in jQuery start with the dollar sign and parentheses: $().

24. Element Selector 24  selects elements based on the element name  select all elements: $(document).ready(function() { $("button").click(function() { $("p").hide(); }); });

25. #id selector 25  uses the id attribute of an HTML tag to find the specific element  id should be unique within a page to find the desired element  write a hash character, followed by the id of the HTML element $(document).ready(function() { $("button").click(function() { $(“#test").hide(); }); });

26. .class selector 26  uses the class attribute of an HTML tag to find multiple elements (a group)  write a dot character, followed by the classname of the HTML element $(document).ready(function() { $("button").click(function() { $(“.test").hide(); }); });

27. Whats going to happen with these? 27  $("*")  $(this)  $("p.intro")  $("p#first")

28. Best Practice 28  Place your jQuery functions in a separate file (.js file)  Link to the file in the HTML

29. jQuery events 29  tailor-made to respond to events (users actions )in an HTML page  the precise moment when something happens.  examples:  moving a mouse over an element  selecting a radio button  clicking on an element

30. jQuery events 30  "fires" – term used to indicate and event has initiated  ex. to assign and event: $("p").click();  Next, define what should happen when the event fires.  must pass a function to the event $("p").click(function() { // action to be taken goes here!! });

31. Common Events 31 Which HTML element would you attach a hover event? mouseenter? mouseleave?

32. jQuery Mobile 32  Framework for creating mobile web applications  Designed for all popular smartphones and tablets  View-oriented model  Designed for one page with multiple “page views”  Has a stylesheet and a javascript library  Relies on base ‘jQuery’ library, so that must be defined first in the app  uses HTML5 & CSS3 for laying out pages with minimal scripting  Must start with HTML 5 doctype

33. Installing jQuery Mobile 33  As with jQuery core, there is nothing to install – to get it to work, use the CDN  include the stylesheet (.css) and JavaScript libraries (.js) directly into your HTML page

34. jQuery Mobile vs. jQuery 34  Has page-related events you can invoke programmatically during the lifecycle of a pageview  pageInit() - Before page creation, and when the page has been created  pageCreate() - When an external page is loading, unloading or encounters a failure  pageShow()  pageHide()  Has custom events for handling user gestures and device orientation  Swipe  Tap  Tap-and-hold  Uses themes to customize the look and feel of the app

35. Differences in construct 35 $(document).ready(function() { }); jQuery sends an event when the web page is loaded $(selector).live(‘pageinit’, (function(event) { })); jQuery Mobile sends an event when a page view has been initialized

36. data-roles 36  HTML5 data-* attribute creates a "touch-friendly" and attractive look for mobile devices  Data-roles allow navigation between page views  Inside the tag, each view or "page" on the mobile device is identified with an element (usually a div) with the data-role="page" attribute: ...  Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are divs with data-roles of "header", "content", and "footer".... 

37. 37 Page Title Page Title Page content goes here. Page Footer

38. Example 38