Multiple Page Apps CIS 136 Building Mobile Apps 1

CSS Web view appearance 2

Styles 3  A style is a rule that defines the appearance of an element  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 :  Inline – add style as attribute in a tag - only changes that tag Chemistry Class  Embedded(Internal) - styles are referred to using the “id” or “class” attributes, and style is defined in tag, using a tag Chemistry Class Chemistry Class  External(linked) - styles are stored in a separate text file having the extension.css. Then the file is “linked” to using a tag

Style sheet precedence 4  Inline styles  Used to change the style within an individual HTML tag Chemistry Class  Overrides Internal and External style sheets  Internal styles  Used to change the style of one html file  Uses the “id” or “class” attributes Chemistry Class Chemistry Class  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 5  No matter what format used, it must have a style statement Chemistry Class  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 6  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 :

In-line styling when there is no HTML tag 7  create a container which can be used to add an inline style  Finer level of control than using tags  Example My dog has fleas!

Internal Styles 8  Use the tag within the  Controls the style of a single page view  Example <!-- h1 { font-family: Garamond; font-size: 32pt; } a { color: blue; text-decoration: none } a { background: #020390; color: #01d3ff; } --> Note use of HTML comment tags

Working with IDs and Classes 9  id attribute  Used to identify ONE element only  Syntax: id="text“  Example: Joe Smith  class attribute  Used to identify a GROUP of elements  Syntax: class="text“  Example: Joe Smith has been the president for four years. His running mate Mary Jones is running for office for the first time.

Classes 10  Using classes is a two-step process 1. Any tags that belong to the class, are marked up by adding the attribute class=“classname” Example: …. …. 2. In the tag, you define the class using a dot Example:.redNames { color:red } Whatever the span tag and the paragraph tags contain, becomes red.

ID’s 11  Using ID’s is a two-step process 1. The tag that belongs to the ID, is marked up by adding the attribute id=“idname” Example: …. 2. In the tag, you define the ID using a hash tag Example: #blueFont { color:blue } Whatever the paragraph tag contains, becomes red.

page view structure tags and styles 12  Using structure tags, can apply styles to entire sections  tags content  Semantic tags  # style1 { color:red};.style2 {color:blue;} header { color:red}; section {color:blue;} footer {color:green;}

External styles 13  Create a separate file to contain the styles (file extension.css, as in styles.css)  Include in the section, a tag, which points to the external text file  The external text file will ONLY have the styles defined –  no other tags – just styles  It will not even have the tag  EXAMPLE:  Then, INSIDE the text file named styles.css, only the selector, class, id’s and associated declarations appear, as in: a { color: blue; text-decoration: none } #blueFont {color:blue}

Fonts 14  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 15  Can use one of the 16 color names, RGB, hex  Colors are captured using red, green and blue light

Placement: Boxing properties are used for placement 16 The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it

Multi Page Apps If you want to have more than one page view on a single page… 17

Single-Page App with multiple “page views” 18  Traditional web sites are multi-page  The browser makes a request via GET or POST and a complete page, including headers, cookies, html, etc is returned through the Response  Apps run inside a native container, and leverage the device’s browser engine (but not the browser) to render the HTML and process the script locally  Request/response is inefficient for the mobile  jQuery Mobile is designed around the notion of (mostly) single page apps with multiple “page views”  View-oriented model  Makes use of the data-role attribute

Pre-fetch 19  Code for all page views is stored in one physical file  all of your pages are available immediately  Can be slow to load  Most jQuery Mobile applications will include multiple files, and typically just use one or two page views per file  can tell jQuery Mobile to prefetch the content for app physical pages immediately upon the main page loading  Attribute data-prefetch=true  jQuery will automatically fetch the content right away when it sees this

Page Titles 20  Jquery Mobile uses the header content to display the title of the app  can override this by providing an additional argument to the div tag  data-title  Example: <div data-role="page" id="aboutPage" data-title="About Travel"> Travelling 

Data-roles 21  Convenient way to navigate between “page views” within a single physical page  Multiple with data-role = “page” and unique ID tags  Include links to other id’s’ View Two View of Page two' Back to page "one" Page Footer Multi-page View of Page 'one' To show internal pages: Show page "two“ Page Footer

HTML Links 22  HTML link is a hyperlink - text or an image that will jump to another document  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 the new page view  If it detects a link to another file on the same server, it will use AJAX to load the page and replace the currently visible one  If it detects an external site, it will leave the link as it is, and the normal link behavior will occur

HTML Link syntax 23  links are defined with the tag List of books  href attribute specifies the destination address (books.html)  The link text is the visible part (List of books).

Data-Roles - positioning 24 Learn more at   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 View Two View of Page two' Back to page "one" Page Footer Multi-page View of Page 'one' To show internal pages: Show page "two“ Page Footer

jQuery Mobile Transitions 25  lets you choose the way a page should open  Note: browser/webkit must support CSS3 3D Transforms  can be applied to any link or form submission by using the data- transition attribute Slide to Page Two  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