anatomy of an app html, css, jquery, jquery mobile cis 136 building mobile apps 1
TRANSCRIPT
Anatomy of an AppHTML, CSS, jQuery, jQuery Mobile
CIS 136 Building Mobile Apps
1
2
Review
3
What we did 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
<script>document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { navigator.notification.beep(4); }</script> <body onload=“listener()”>
<script>function listener(){
document.addEventListener("deviceready", onDeviceReady, false); }
function onDeviceReady() { navigator.notification.beep(4); }</script>
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
6
Architecture
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
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 browserPhonegap
‘Built’ app - publishable
8
HTML
web view structure
9
HyperText Markup Language (HTML) 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 < element > content </end element>
Types of tags Containers - have opening and closing and contain content Standalone tags – opening closes itself <element …. />
Whitespace Any whitespace you type in your html file will be ignored by the browser
10
The Structure of an HTML File DOCTYPE tag <!DOCTYPE html> HTML tag <html></html>
Root element Can have only one root element
Head element <head></head> Contains tags and information about the document Instructions in this section are done before the page is displayed and
remain in memory Body element <body></body>
Contains tags and content to be displayed in the Web page Sequential process of each line
<!DOCTYPE html><html><head>
<title></title></head><body>
content</body></html>
11
Element Attributes 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
<element attribute1=“some value" attribute2=“some value“></element>
<img src=“picture.gif” id=“picture1” />
Self-clo
sing ta
gs do n
ot
need a cl
osing ta
g
12
<head></head> tag Container for other tags
<title> </title> <meta /> <link /> <script> </script>
13
Viewport meta tag 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
<script></script> 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
<body></body> tag Container for other tags and content (text, multi-media) Paragraph: <p>content</p> Line Breaks: <br /> <hr /> Lists: <ol> items </ol>, <ul> </ul> List items: <li>content </li> Headings: <h1></h1> .. <h2> </h2>.. Etc.
16
Structuring a page Generic elements
<div></div> - divides page content into sections that can be formatted and positioned using styles
</span></span> - identifies text that can be formatted using styles
Semantic elements <header></header> - top of page <section></section> - generic section of page <article></article> - composition, like a newspaper article <nav></nav> - links to other pages <aside></aside> - sidebar <footer></footer> - bottom of page
17
Working with Images 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<img src="url" alt="text" />
The alt attribute is used for users who do not display images.
18
jQuery and jQuery Mobile
Web view
19
jQuery 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) The jQuery library is a single JavaScript file Download
Reference it with the HTML <script> tag (notice that the <script> tag should be inside the <head> section):
<head>< script src="jquery-1.11.2.min.js"></script>< /head>
CDN (Content Delivery Network) GOOGLE CDN
<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>< /head>
Microsoft CDN<head>< script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script>< /head>
21
jQuery Syntax 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 <p> elements $(".test").hide() - hides all elements with class="test“ $("#test").hide() - hides the element with id="test“
22
Document.ready 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
<script>$(document).ready(function(){document.addEventListener("deviceready", onDeviceReady, false); } function onDeviceReady() { navigator.notification.beep(4); }</script>
23
jQuery selectors 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 selects elements based on the element name select all <p> elements:
$(document).ready(function(){ $("button").click(function() { $("p").hide(); });});
25
#id selector 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 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? $("*") $(this) $("p.intro") $("p#first")
28
Best Practice Place your jQuery functions in a separate file (.js file) Link to the file in the HTML
<head>< script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">< /script><script src="my_jquery_functions.js"></script>< /head>
29
jQuery events 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 "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
Which HTML element would you attach a hover event?mouseenter? mouseleave?
32
jQuery Mobile 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
<!DOCTYPE html>
33
Installing jQuery Mobile 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
<head>
<!-- Include meta tag to ensure proper rendering and touch zooming --><meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets --><link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library --><script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- Include the jQuery Mobile library --><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
34
jQuery Mobile vs. jQuery 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$(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 HTML5 data-* attribute creates a "touch-friendly" and attractive look for
mobile devices Data-roles allow navigation between page views Inside the <body> tag, each view or "page" on the mobile device is identified
with an element (usually a div) with the data-role="page" attribute: <div data-role="page"> ... </div> 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".
<div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div>
</div>
37
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body>
<div data-role="page">
<div data-role="header"><h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content"><p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer"><h4>Page Footer</h4>
</div><!-- /footer --></div><!-- /page -->
</body></html>
38
Example