Chapter 3

ADVANCED STYLING
Mr. SAR Vathnak

June , 2018
PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

OBJECTIVES
 To use Ajax for turning a full website into a single-page app
 To create a Back button with history using JavaScript
 To save the app as an icon on the home screen

ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS| BY SAR VATHNAK >> 1

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

WHAT IS AJAX?
 Ajax ( Asynchronous JavaScript and XML
[1]
):
 refers to the technique of using JavaScript to send requests to a web server without
reloading the current page
 Examples:
 to retrieve some HTML,
 to submit a form, etc.
[2]
 By using Ajax, you could do the following tasks:
 update a web page without reloading the page
 request data from a server - after the page has loaded
 receive data from a server - after the page has loaded
 send data to a server - in the background

ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 2

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

WHAT IS AJAX? (CONT’) [2]

 Ajax ( Asynchronous JavaScript and XML ) :

 is not a programming language.
 just uses a combination of:
 a browser built-in XMLHttpRequest object (to request data from a web server)
 JavaScript and HTML DOM (to display or use the data)

ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 3

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

HOW AJAX WORKS [2]

1 4
2
5
3

ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 4

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

[1]

PROS’ AND CONS’ OF USING AJAX

 Advantages:
 makes for a very smooth user experience
 loads external pages dynamically without reloading

 Disadvantages:
 the browser will not give any indication of progress or errors to the users
(e.g. while sending/retrieving data to/from the server in the background)
 the Back button will not work as expected (i.e., you have to do a lot of work to
create a much richer user experience with Ajax)

ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 5

 LET’S SET UP
SOME CONTENTS
Creating another
html page

 Later, we will use jQuery to “hijack” the onclick actions of the nav links,
so when the user clicks a link :
 the browser page will not navigate to the target link.
 Rather, jQuery will load a portion of the HTML from the remote page and
deliver the data to the user by updating the current page.
Re-arrange CSS file for android
Re-arrange CSS file for android
 NOW EVERYTHING IS SET UP
 This JavaScript loads a document called
index.html, and will not work without it.
 However, none of the links in it will work unless the
targets of the links actually exist.
 In my case, I duplicated code from index.html of
previous chapter, change the appropriate heading
titles, and rename as any sample files in the right
hand side.
PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

[1]

USING AJAX TO ROUTE REQUESTS

Run the loadPage()
function when the
page is ready
This JavaScript code will
convert the links on the
page to Ajax requests

ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 6a

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

[1]

USING AJAX TO ROUTE REQUESTS

Get all of the ul elements

from the #header element
of index.html and insert
them into the #container
element of the current
page. When it’s done, run
the hijackLinks()
function

ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 6b

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

[1]

USING AJAX TO ROUTE REQUESTS

The event object of a

clicked link contains the
URL of the remote page
in e.target.href

ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 6c

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

[1]

USING AJAX TO ROUTE REQUESTS

Prevents the default

behavior (navigating to
the new page) when the
user clicks a link (i.e., tend
not to reload the page)

ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 6d

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

[1]

ADDING PROGRESS INDICATOR

 By not allowing the browser to navigate from page
to page:
 the user will not see any indication of progress while
data is loading
 users may wonder if they actually clicked the link or
missed it
 users will often start clicking all over the place in
frustration
 This can lead to increased server load and application
instability (i.e., crashing).

ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 7

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

[1]

ADDING PROGRESS INDICATOR

This jQuery code will

add a simple progress
indicator to the page
NOTE: You can use
JavaScript’s setTimeout
function for delaying the
duration of progress indicator.
setTimeout(function(){
// code loading page
}, 2000); // delay for 2s
ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 8
PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

[1]

ADDING PROGRESS INDICATOR

CSS added to android.css used to

style the progress indicator

ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 9

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

[1]

SETTING THE PAGE TITLE

 To be more mobile-friendly, we’ll pull that title out of the content ( i.e.,
#content h2 )
and put it in the header ( i.e, #header h1 JavaScript
) logical operator OR

Set the title variable to the HTML contents of the #content h2 element,
or to the string ‘Welcome to vREAD’ if there is no #content h2 element
ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 10a
PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

[1]
to this
SETTING THE PAGE TITLE
Change
 To be more mobile-friendly, we’ll pull from title out of the content ( i.e.,
that this
#content h2 )
and put it in the header ( i.e, #header h1 JavaScript
) logical operator OR

Result in the default page app

Set the title variable to the HTML contents of the #content h2 element,
or to the string ‘Welcome to vREAD’ if there is no #content h2 element
ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 10b
PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

[1]

SETTING THE PAGE TITLE

 To be more mobile-friendly, we’ll pull that title out of the content ( i.e.,
#content h2 )
and put it in the header ( i.e, #header h1 JavaScript
) logical operator OR

when click on
this link
previous version

Set the title variable to the HTML contents of the #content h2 element,
or to the string ‘Welcome to vREAD’ if there is no #content h2 element
ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 10c
PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

[1]

HANDLING LONG TITLE

 We can update the #header h1 styles
such that long text ( in case it is
happened ) JavaScript logical operator OR
will be truncated with a trailing
max-width: 160px instructs the browser not to
ellipsis: allow the h1 element to grow
wider than 160px.
overflow: hidden instructs the browser to chop off
any content that extends outside
the element borders.
white-space: nowrap prevents the browser from
breaking the line into two.
text-overflow: ellipsis appends three dots to the
end of any chopped-off text.

ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 11a

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

[1]

HANDLING LONG TITLE

 We can update the #header h1 styles
such that long text ( in case it is
happened ) JavaScript logical operator OR
will be truncated with a trailing
max-width: 160px instructs the browser not to
ellipsis: allow the h1 element to grow
wider than 160px.
overflow: hidden instructs the browser to chop off
any content that extends outside
the element borders.
white-space: nowrap prevents the browser from
breaking the line into two.
text-overflow: ellipsis appends three dots to the
end of any chopped-off text.

ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 11b

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

[1]

AUTOMATIC SCROLL TO TOP

 When you have a page that is longer than the viewable
area
on the phone:
 If a user scrolls down to the bottom, and clicks on a link to
an even longer page
 the new page will show up “pre-scrolled” instead of at the
top as you’d expect.

Assume that user clicks

on the same link that has
longer page

ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 12a

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

[1]

AUTOMATIC SCROLL TO TOP

 When you have a page that is longer than the viewable
area
on the phone:
 If a user scrolls down to the bottom, and clicks on a link to
an even longer page
 the new page will show up “pre-scrolled” instead of at the
top as you’d expect.

ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 12b

PHNOM PENH INTERNATIONAL UNIVERSITY
What you’d expect is like this: FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

[1]

AUTOMATIC SCROLL TO TOP

 When you have a page that is longer than the viewable
area
on the phone: Expect
 If a user scrolls downScroll
to the bottom, and clicks on a link to
to be
an even longer page down like this
 the new page will show up “pre-scrolled” instead of at the
top as you’d expect.
and
click But, it’s
not like
this

ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 12c

PHNOM PENH INTERNATIONAL UNIVERSITY
What it happened is like this: FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

[1]

AUTOMATIC SCROLL TO TOP

 When you have a page that is longer than the viewable
area
on the phone:
 If a user scrolls downScroll
to the bottom, and clicks on a link to
an even longer page down
 the new page will show up “pre-scrolled” instead of at the
top as you’d expect.
and
click

ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 12d

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

[1]

AUTOMATIC SCROLL TO TOP

 When you have a page that is longer than the viewable
area
on the phone:
 If a user scrolls down to the bottom, and clicks on a link to
an even longer page
 the new page will show up “pre-scrolled” instead of at the
top as you’d expect.
 The solution is to use JavaScript scrollTo() function:
always scroll to top while loading page

ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 12e

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

[1]

HIJACKING LOCAL LINKS ONLY

 In some cases, our apps will have links to the external
pages
( i.e., pages hosted on other domains )
 So, it wouldn’t make sense to inject ( i.e., by hijacking
that
external links ) their HTML into our Android-specific
layout
 The solution is to add a conditional that checks the
destination
URL to see if it matches the domain name that the will load external URL
page was
loaded from:
 If it matches, the link is hijacked and the content is loaded
into the current page (i.e., Ajax is in effect)
ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 13a
PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

[1]

HIJACKING LOCAL LINKS ONLY

 In some cases, our apps will have links to the external
pages
( i.e., pages hosted on other domains )
 So, it wouldn’t make sense to inject ( i.e., by hijacking
that
external links ) their HTML into our Android-specific
layout
 The solution is to add a conditional that checks the
destination
URL to see if it matches the domain name that the
page was
loaded from:
 If it matches, the link is hijacked and the content is loaded
into the current page (i.e., Ajax is in effect)
 Else, the browser will navigate to the URL normally
ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 13b
PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

[1]

HIJACKING LOCAL LINKS ONLY

JavaScript code for allowing

external pages to load
normally by checking the
domain name of the URL

ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 14

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

[1]

ROLLING BACK BUTTON

 Remember that we’ve hijacked all the links, so the
browser page
history won’t work.
 So, we have to add a standard toolbar Back button to the
app for
keeping track of the user’s click history.
 Store the URL of the previous page so we know where to go
back to
 Store the title of the previous page so we know what label to
put on the Back button

ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 15

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

[1]

ROLLING BACK BUTTON

First, adding the CSS to

style the new Back
button appearance

ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 16

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

[1]

ROLLING BACK BUTTON

JavaScript code for

supporting a Back
Button event

ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 17a

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

ROLLING BACK BUTTON

[1]

JavaScript code for

supporting a Back
Button event

ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 17b

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

ROLLING BACK BUTTON

[1]

JavaScript code for

supporting a Back
Button event

ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 17c

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

[1]

ADDING AN ICON TO THE HOME SCREEN

 This is called a “launcher icon”.
 It’s recommended that the file be 56px × 56px if its visible area is basically
square,
and 60px × 60px otherwise.
 Put the below code to android.html for adding launcher icon to our web app:
<link rel="apple-touch-icon-precomposed" href="./img/vread.JPG" />

ADVANCED STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 18

PRACTICE
 REFERENCES
[1] 2012_JonathanStark_Building-android-apps-with-html, css, and-javascript[2ed]
[2] AJAX Introduction, https://www.w3schools.com/xml/ajax_intro.asp
[2] jQuery Tutorials, https://www.w3schools.com/Jquery/default.asp
[3] jQuery (download), https://jquery.com/download/
[4] Colors and theming, https://material.io/design/color/the-color-system.html#color-usage-
palettes
[5] material design palette, https://www.materialpalette.com/