CIS 136 Building Mobile Apps Multiple Page Apps If you want to have more than one page view in your app… CIS 136 Building Mobile Apps
Lecture Review What is a hybrid app? What does a UI framework do? What does a device framework do? What is the file name of the first screen (aka page view) displayed in an app? What does HTML stand for? What is a container tag? What is a standalone tag? What is the difference between generic and semantic tags? What is an attribute?
Lab Review: Creating App Templates Save time Create a new app using CLI, Build, or Desktop Remove unnecessary files and folders Modify index.html Add References used in the app (ex: jQuery ) Modify the config file For each new app, just copy the template folder! Change name & description in config.xml
Cascading Style Sheets CSS Cascading Style Sheets
Styles A style is a rule that defines the appearance of an element on a web page Cascading Style Sheet (CSS) is a series of rules Can alter appearance of page by changing characteristics such as font family, font size, margins, and link specifications Three ways to incorporate styles in a web page: Inline – add style as attribute in a tag - only changes that tag <h1 style=“text-align: center”>Chemistry Class</h1> Embedded(Internal) - styles are referred to using the “id” or “class” attributes, and style is defined in <head> tag, using a <style> tag <h1 id=“centerThisTag”>Chemistry Class</h1> <h1 class=“centerThisTag”>Chemistry Class</h1> External(linked) - styles are stored in a separate text file having the extension .ccc. Then the file is “linked” to in web page
Style sheet precedence Inline styles Used to change the style within an individual HTML tag <h1 style=“text-align: center”>Chemistry Class</h1> Overrides Internal and External style sheets Internal styles Used to change the style of one html file Uses the “id” or “class” attributes <h1 id=“centerThisTag”>Chemistry Class</h1> <h1 class=“centerThisTag”>Chemistry Class</h1> Overrides External style sheets External styles Used to change the style of multiple files All three can be co-mingled in a file
Syntax of a style font-family: Garamond; font-color: navy; No matter what format used, it must have a style statement <h1 style=“text-align: center”>Chemistry Class</h1> A style has a selector and an declaration Selector: identifies the page element(s) Declaration: identifies how the page element(s) should appear, and is comprised of two parts, The property to apply The value for the property Example: font-family: Garamond; font-color: navy;
Applying an Inline Style Defines style of an INDIVIDUAL tag Helpful when one section of a page view needs to look different To use inline style Include the style attribute within the tag The style attribute is assigned to the declaration (property and value) The declaration is in quotes There can be more than one set of properties and values, each separated by a semi-colon EXAMPLES : <hr style=“height: 8px; background-color: #384738; width: 50%” /> <p style=“font-family: Arial, Helvetica; color: blue; text-decoration: none”>
Working with IDs and Classes id attribute Used to identify ONE element only Syntax: id="text“ Example: <p id=“JoesName”> Joe Smith </p> class attribute Used to identify a GROUP of elements Syntax: class="text“ <span class=“redNames”> Joe Smith</span> has been the president for four years. His running mate <span class=“redNames”>Mary Jones</span> is running for office for the first time.
Classes Using classes is a two-step process Any tags that belong to the class, are marked up by adding the attribute class=“classname” Example: <span class=“redNames”>…. <p class=“redNames”>…. In the <style> tag, you define the class using a dot Example: <style type=“text/css”> .redNames { color:red } </style> Whatever the span tag and the paragraph tags contain, becomes red.
ID’s Using ID’s is a two-step process The tag that belongs to the ID, is marked up by adding the attribute id=“idname” Example: <p id=“blueFont”>…. In the <style> tag, you define the ID using a hash tag Example: <style type=“text/css”> #blueFont { color:blue } </style> Whatever the paragraph tag contains, becomes red.
Positioning position: positioning method used for an element (static, relative, absolute or fixed) Used with top and left properties For absolutely positioned elements, the top property sets the top edge of an element to a unit above/below the top edge of its containing element. For relatively positioned elements, the top property sets the top edge of an element to a unit above/below its normal position. Same for left and right
Fonts Comprised of font families 5 generic Serif Sans-serif Monospace Cursive Fantasy Example of common font styling selectors: body { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-style: italic; font-weight: bold; color: blue }
Color Can use one of the 16 color names, RGB, hex Colors are captured using red, green and blue light
page view structure tags and styles Using structure tags, can apply styles to entire sections <DIV></DIV> tags <div id=“style1”> content </div> <div class=“style2”> content </div> Using semantic tags <header></header> <section></section> <footer></footer> <style> # style1 { color:red}; .style2 {color:blue;} </style> <style> header{ color:red}; section {color:blue;} footer {color:green;} </style>
Data Roles using a data-* attribute
Data attributes HTML5 data-* attribute lets you assign custom data to an element embed custom data attributes on all HTML elements custom data attribute can then be used in the page's JavaScript to create a more engaging user experience (without any extra technology) The data-* attributes consist of two parts: The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix "data-" The attribute value can be any string example: <a href="#" class="pink" data-bubble="2">Profile</a>
data-role attribute jQuery mobile framework uses a custom data-attribute named a data-role data-roles can allow navigation between page views, provide initialization, configure widgets, etc. To define a page: Inside the <body> tag, each view or "page" on the mobile device is identified with an HTML element (usually a div) with the data-role="page" attribute: <div data-role="page"> ... </div> To define semantic sections within a page (children of the page) 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>
<!DOCTYPE html> <html> <head> <title>App PageTitle</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>
Example
Single-Page App with multiple “page views” Traditional web sites are client-server, multi-page, using the internet to request/receive new web pages The user makes a request to the server get a new web page via button or link The complete page, including headers, cookies, html, etc. is returned to the client Hybrid Apps run inside a native container, and leverage the device’s browser engine (but not the browser) to display the page view requested all done on the device, within the app, without using the internet Using data-roles, jQuery Mobile is designed around the notion of single file apps with multiple “page views” View-oriented model
Page Titles jQuery Mobile uses the title tag in the <head> to display the title of the app data-title an additional attribute on the div tag for the “page” data-role which override the title tag Example: <div data-role="page" id="aboutPage" data-title="About Travel"> <div data-role="header"> <h1>Travelling</h1> </div> Etc….
Data-roles Convenient way to navigate between “page views” within a single physical page Multiple <divs> with data-role = “page” and unique ID tags Include <a> links to other id’s’ <div data-role="page" id="one"> <div data-role="header"> <h1>Multi-page</h1> </div><!-- /header --> <div data-role="content" > <h2>View of Page 'one'</h2> <h3>To show internal pages:</h3> <p> <a href="#two”>Show page "two“ </a> </p> </div><!-- /content --> <div data-role="footer”> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page one --> <div data-role="page" id=“two" > <div data-role="header"> <h1>View Two</h1> </div><!-- /header --> <div data-role="content" "> <h2>View of Page two'</h2> <p> <a href="#one" >Back to page "one"</a> </p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div>
HTML Links <a> </a> To transition to another web page/app page view, the HTML hyperlink tag is used Container – what's inside is what the user sees an clicks on Needs an attribute that specifies where to go Traditional website links are defined with the <a> tag <a href=“books.html">List of books</a> href attribute specifies the destination address (books.html) The link text is the visible part the user sees (List of books).
HTML Links <a> </a> App links are also defined with the <a> tag, connecting to a page-view, separate page, or website <a href=“#books">List of books</a> <a href=“books.html">List of books</a> <a href=“http://www.booklist.com">List of books</a> jQuery Mobile automatically capture any clicks on an HTML link and presents the appropriate content if it detects that the target is something on the same page, (hash- mark style as in href="#page2”), it will transition to that page view If it detects a link to another file within the www folder it will use AJAX to load the page and replace the currently visible one If it detects an external location it will leave the link as it is, and the normal link behavior will occur
Data-Roles – header and footer positioning <div data-role="header“ data-position=“fixed”> Values are: Standard – toolbars presented according to document flow; scroll in and out Fixed – header and footer appear at top and bottom of viewport as user scrolls; tapping on screen returns them to standard flow Fullscreen – same as above, but tapping on screen will hide them <div data-role="page" id="one"> <div data-role="header“ data-position=“fixed”> <h1>Multi-page</h1> </div><!-- /header --> <div data-role="content" > <h2>View of Page 'one'</h2> <h3>To show internal pages:</h3> <p> <a href="#two” data-role=“button”>Show page "two“ </a> </p> </div><!-- /content --> <div data-role="footer” data-position=“fixed”> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page one --> <div data-role="page" id=“two" > <div data-role="header” data-position=“fixed”> <h1>View Two</h1> </div><!-- /header --> <div data-role="content" "> <h2>View of Page two'</h2> <p> <a href="#one" data-role=“button”>Back to page "one"</a> </p> </div><!-- /content --> <div data-role="footer“ data-position=“fixed”> <h4>Page Footer</h4> </div><!-- /footer --> </div>
jQuery Mobile Transitions Lets you choose the way a page view should open Can be applied to any link or form submission by using the data-transition attribute <a href="#anylink" data-transition=“effect">Slide to Page Two</a> Where ‘effect’ is Fade –fading effect Flip – flips from back to front Flow – throws the current page ‘away’ Pop – like a popup window Slide – sliding motion Slidefade – slide and fade Slideup slides from bottom to top Slidedown – slides from top to bottom Turn – simulate page turning None - none