Chapter 2

BASIC STYLING
Mr. SAR Vathnak

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

OBJECTIVES
 To run a web server locally (on PC) for connecting Web App to run
on Android phone
 To prepare a separate CSS stylesheet for Android look and feel
 To control the page scaling between each devices
 To format basic styling for Android look and feel
 To add some basic behavior with jQuery to Web App

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

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

RUNNING A LOCAL WEB SERVER

 What should you do if you don’t have a real website hosting to test in Android
Phone?
 There are 2 solutions here:

 Solution #1:
1. Host your web app on a web server running on your local computer
2. Connect your Android Phone to that web server
NOTE: This only works when your Android phone & computer are on the same WiFi network

 Solution #2: In case that you don’t have Android Phone, use Google Chrome web
browser by:
1. Open your web app with Google Chrome web browser
2. Right-Click on browser and choose Inspect option
3. Click on Toggle Device Toolbar
4. Select your preferable device type
BASIC STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 2
 SOLUTION #1
IN CASE OF
HAVING ANDROID PHONE
 Hosting Your Web App To IIS Web Server
Assume that you have installed/enabled IIS
web services in your local computer

Your web app

project folder

SOLUTION #1 Copy your web app project folder to directory:

PAGE 1 OF 7 C:\inetpub\wwwroot
 Starting Your IIS Web Server



Search IIS in your PC

Click on Start
SOLUTION #1
PAGE 2 OF 7
 Checking Your Computer’s WiFi IP Address
Assume that your PC has already been
connected to your preferable WiFi network

Open command prompt and then typing ipconfig /all

SOLUTION #1
PAGE 3 OF 7
 Checking Your Computer’s WiFi IP Address
Scroll to Wireless LAN adapter Wi-Fi section

In my case:
192.168.1.105
Your WiFi IP Address

SOLUTION #1
PAGE 4 OF 7
 Running From Your Android Phone

Open your Google Chrome App from your android mobile

SOLUTION #1
PAGE 5 OF 7
 Running From Your Android Phone

Typing your local web server address (192.168.1.105)

followed by your web app project folder’s name (todo)

SOLUTION #1
PAGE 6 OF 7
 Running From Your Android Phone

Now, your web app is running on your Android Phone

successfully via Google Chrome App

SOLUTION #1
PAGE 7 OF 7
 SOLUTION #2
IN CASE OF
HAVING NO ANDROID PHONE
 Opening Web App With Google Chrome Web Browser
Assume that you run your web app from IIS web server in local computer

Open your Chrome

browser and start typing
localhost/ followed by
the name of your web
app project folder

SOLUTION #2
PAGE 1 OF 5
 Opening Web App With
Google Chrome
Web Browser

Then press ENTER key to get the result

SOLUTION #2
PAGE 2 OF 5
 Inspect in Chrome

By right-clicking on your chrome

browser, then choose Inspect

SOLUTION #2
PAGE 3 OF 5
 Using Toggle Device Toolbar

Click on option:
Toggle device toolbar

SOLUTION #2
PAGE 4 OF 5
Switching Device View

After switching device

view to Nexus 5

SOLUTION #2
PAGE 5 OF 5
PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

ENABLE IIS
IN WINDOW OS
1. Go to Control Panel
▶ Programs

BASIC STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 3a

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

ENABLE IIS IN WINDOW OS

1. Go to Control Panel
▶ Programs
2. Click on Turn Windows
features on or off

BASIC STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 3b

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

ENABLE IIS IN WINDOW OS

1. Go to Control Panel
▶ Programs
2. Click on Turn Windows
features on or off
3. Checked the following:
 Internet Information Services
 World Wide Web Service
 Application Development Features
 CGI

BASIC STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 3c

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

FIRST STEP
 The first step on this journey is to
get
comfortable styling HTML to look
like
a mobile app.
 So now, assume that we start
coding
our first web app like this 
View in Desktop version

BASIC STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 4a

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

FIRST STEP
 The first step on this journey is to
get
comfortable styling HTML to look
like
a mobile app.
 So now, assume that we start
coding
our first web app like this 
View in Android Phone version

BASIC STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 4b

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

PREPARING A SEPARATE ANDROID STYLESHEET

 To make different views both in Desktop version and Android Phone version,
we must
create 2 separate stylesheets:
 desktop.css for CSS in Desktop version
 android.css for CSS in Android Phone version

 To specify a stylesheet specifically for Android (also small device with iPhone
or
Windows Phone), replace the stylesheet link tag with following expressions

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

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

PREPARING A SEPARATE ANDROID STYLESHEET

 However, Internet Explorer will not understand these expressions, so we have
to add a
conditional comment that links to the desktop version of the CSS:

Added for
IE browser

BASIC STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 6

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

CONTROL THE PAGE SCALING

 If you don’t set the viewport, the Android Browser will assume your page is
980px wide.
This means that you are going to format the content specifically for the
smaller dimensions
of the Android Phone only.
 So, you must let the mobile browser know about it by adding a viewport meta
tag to the
head element of the HTML document:

 Desktop browsers will ignore the viewport meta tag, so you can include it
without worrying
about the desktop version of your site.
BASIC STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 7
PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

ADDING THE ANDROID CSS

 To make our web app look like an Android app, we will add style to:
 The distinctive title bar
 Lists with rounded corners
 Finger-friendly links that look like glossy buttons, etc.

 First, set some general site-wide styles on the HTML body element in
android.css

BASIC STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 8

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

ADDING THE ANDROID CSS

 Second, format the logo link as a clickable
title bar in android.css

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

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

ADDING THE ANDROID CSS

 Third, format the primary and secondary
navigation <ul> blocks identically
in android.css

BASIC STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 10

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

ADDING THE ANDROID CSS

 Fourth, add some padding to the content and sidebar <div>s to indent the text
from the
edge of the screen a bit in android.css

 Fifth, remove the footer from the Android version of the page in android.css

BASIC STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 11

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

ADDING THE ANDROID LOOK & FEEL

 1st, Adding android look & feel to the header text with:
 a 1-pixel white drop shadow
 a CSS gradient to the background

Why use property or value with -webkit-?

BASIC STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 12

 NOTE ON text-shadow CSS PROPERTY
horizontal offset vertical offset

blur color
NOTE ON -webkit-gradient( ) CSS VALUE
the gradient type the starting point of
(either linear or radial) the gradient
left top
left bottom
right top
right bottom

the end point of

the starting color the ending color the gradient
PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

ADDING THE ANDROID LOOK & FEEL

 2nd , Adding rounded corners to the navigation menus:
 on the 1st child (of <li>)

 on the last child (of <li>)

BASIC STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 13

REVIEW jQUERY
PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

ADDING BASIC BEHAVIOR WITH jQUERY

 The purpose is adding some basic dynamic behavior like:
 hide the big navigation section in the header on the first time loading page by
showing menu button in the header
 and only show it when user toggle on the menu button

 So meaning that, we need to hide the <ul> by :

 Adding class to the <ul> named hide
<ul class = “hide”> … </ul> (it should be similar like this, but not really like this…)
 Adding CSS style to the <ul> with class hide

BASIC STYLING PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 13

 First time loading

After clicking on Menu button

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

ADDING BASIC BEHAVIOR WITH jQUERY

 Creating the HTML for the menu button:
<div class="btnMenu" onclick="toggleMenu()">Menu</div>

 Adding CSS style for the menu button :

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

PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

ADDING BASIC BEHAVIOR WITH jQUERY

 Add the JavaScript code (at index.html) for making dynamic behavior:

 Adding JavaScript code to file android.js:

The document.ready()
function says that:
“When the document is
ready, run this code”.

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

PRACTICE
 REFERENCES
[1] 2012_JonathanStark_Building-android-apps-with-html, css, and-javascript[2ed]
[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/