Tizen Web UI Technologies...1 Spring 2015 Soo Dong Kim, Ph.D. Professor, Department of Computer Science Software Engineering Laboratory Soongsil University Office 02-820-0909 Mobile

11

Spring 2015

Soo Dong Kim, Ph.D.Professor, Department of Computer Science

Software Engineering Laboratory

Soongsil UniversityOffice 02-820-0909 Mobile [email protected] http://soft.ssu.ac.kr

Tizen Web UI Technologies(Tizen Ver. 2.3)

2© 2015 Soo Dong KimSW Design Principles

Web Technologies for Tizen Web UI HTML

Markup language to form building blocks of web pages

CSS

Style sheet to define how HTML elements are to be displayed

JavaScript

Programming language to define behaviors of web pages

JQuery

JavaScript library to simplify JavaScript programming

33

Unit 5-1. HTML & CSS


What is HTML? Stands for Hyper Text Markup Language

A markup language for describing web documents

To describe HTML documents

Each HTML tag describes different document content.


HTML Tags Key Usage of HTML tags

Layout

Text Style

Element

Form

List


HTML Tags - Layout To define a structure of an HTML document

Key Tags

<header> To represent a container for introductory content

<section> To define a section in a document

<div> To define a division or a section in an HTML document

<footer> To define a footer for a document or section


HTML Tags – Text Style To define text styles of an HTML documents

Key Tags

<p> To define a paragraph

<h1> - <h6> To define HTML headings

<i> To define a part of text in an alternate voice or mood


HTML Tags - Element To define widgets in an HTML document

Key Tags

<a> To define a hyperlink, which is used to link from one page to another

<button> To define a clickable button

<canvas> To draw graphics via scripting JavaScript

<img> To define an image in an HTML page


HTML Tags - Form To specify a field where the user can enter data

Key Tags

<form> To contain one or more form elements

<input> To specify an input field where the user can enter data

<select> To create a drop-down list

<option> To define an option in a select list

<textarea> To define a multi-line text input control.


HTML Tags - List To show items as a list

Key Tags

<ul> To define an unordered (bulleted) list

<ol> To define an ordered list

<li> To define a list item

Used in ordered lists(<ol>), unordered lists (<ul>)


What is CSS? Stands for Cascading Style Sheets

Define how HTML elements are to be displayed

Linked Style Sheets

Embedded Style Sheet

<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>

…<style>body {

background-color: #d0e4fe;}</style>…


CSS Grammar Selector

To select and manipulate HTML elements

Property

To indicate which aspect of the element are modified

Value

Value of property

body {background-color: #FFFFFF;

}

selector

property

value


Selector Element Selector

ID Selector

Class Selector

Attribute Selector


Selector (Element Selector) To select elements based on the element (HTML Tag) name

Example) To select all <p> elements on a page

Example) To select all <p>, <h1>, and <h2> elements on a page

p {text-align: center;color: red;

}

p, h1, h2 {text-align: center;color: red;

}


Selector (ID Selector) To use the id of an HTML element to select a specific element

To use ‘#’ character

Example) To select a specific element by given id, ‘id_1’

#id_1 {text-align: center;color: red;

}


Selector (Class Selector) To select elements with a specific class name

To use ‘.’ symbol

Example) To select elements by given class name, ‘center’

Example) To select <p> elements having class name, ‘center’

.center {text-align: center;color: red;

}

p.center {text-align: center;color: red;

}


Selector (Attribute Selector) To select elements with a specific attribute

To use ‘[]’ symbol

Example) To select <a> elements which have ‘target’ attribute

Example) To select <a> elements of which ‘target’ attribute is ‘_blank’

a[target] {background-color: yellow;

}

a[target=“_blank”] {background-color: yellow;

}


Property Key Categories of Property

Background

Border

Text Formatting

Margin & Padding


Property (Background) To define the background effects of an element

Key Properties

Background-color To specify the background color of an element

Background-image To specify an image to use as the background of an element

Background-repeat To specify repetition of the background image

Background-position To specify position of the background image


Property (Border) To define the border effects of an elements

Key Properties

Border-style To specify what kind of border do display

Dotted, Dashed, Solid, etc.

Border-width To set the width of the border

Border-color To set the color of the border


Property (Text Formatting) To specify format of text

Key Properties

Color To set the color of the text

Text-align To set the horizontal alignment of a text

Text-decoration To set or remove decorations from text

To mostly used to remove underlines from links for design purposes

Text-transform To specify uppercase and lowercase letters in a text


Property (Margin & Padding) To define the space related to HTML elements

Key Properties

Margin To define the space around elements

Padding To define the space between the element border and the element content


Example Embedded CSS Code Output

<!DOCTYPE html><html><head><style>body {

background-color: #d0e4fe;}

h1 {color: orange;text-align: center;

}

p {font-family: "Times New Roman";font-size: 20px;

}</style></head><body>

<h1>My First CSS Example</h1><p>This is a paragraph.</p>

</body></html>

2424

Unit 5-2. Javascript & jQuery


What is JavaScript? Programming language of HTML and the Web

To define behaviors of web pages

To alter the document content that is displayed

To interact with the user


JavaScript Placement Linked JavaScript

In HTML document;

Embedded JavaScript

In HTML document;

<head><script>

//JavaScript Statements</script></head>

<head><script src=“myjavascript.js"></script><head>


Variables (1) 5 data types that can contain values;

String

Number

Boolean

Object

Function


Variables (2) To use ‘var’ keywords

To use ‘typeof’ to find the data type

var str = “Hello JS” // Assigns stringvar i = 5; // Assigns numbervar b = true; // Assigns booleanvar obj = {name:’John’, age:’28’} // Assigns object var date = new Date() // Assigns objectvar arr = [1,2,3,4] // Assigns objectvar func = function(){…} // Assigns function

typeof str // Returns stringtypeof i // Returns numbertypeof b // Returns booleantypeof obj // Returns objecttypeof date // Returns objecttypeof arr // Returns objecttypeof func // Returns function


Operator (1) Arithmetic Operators

To perform arithmetic on numbers

Assignment Operators

To assign values to JavaScript variables

Operator Description

+ Addition

- Subtraction

* Multiplication

/ Division

% Modules

++ Increment

-- Decrement

Operator Example Same As

= x = y x = y

+= x += y x = x + y

–= x –= y x = x – y

*= x *= y x = x * y

/= x /= y x = x / y

%= x %= y x = x % y


Operator (2) Comparison Operators

To determine equality or difference between variables or values

Given that x=5;

Operator Description Comparing Returns

== Equal tox == 8 false

x == 5 true

=== Equal value and equal typex === “5” false

x === 5 true

!= Not equal x != 8 true

!== Not equal value and equal typex !== “5” true

x !== 5 false

> Greater than x > 8 false

< Less than x < 8 true

>= Greater than or equal to x >= 8 false

<= Less than or equal to x <= 8 true


Examples of JavaScript To change contents of HTML elements

To change CSS of HTML elements

To react events in a web page


Source Code

Example – Content Change To replace text of a specific

Output

…<script>function myFunction() {

var paragraph = document.getElementById("demo");

paragraph.innerHTML = "Hello JavaScript!";}…<body><p id="demo">Click the button to replace text.</p>

<button onclick="myFunction()">Try it</button>

</body>…

Invoked when the button is clicked

Gets element of which id is ‘demo’

Sets text of the element to “Hello JavaScript!”

Click Button!


Source Code

Example – CSS Change To change CSS styles of a specific element

Output...<script>function changeTextColor(color){var paragraph = document.getElementById("p1");paragraph.style.color= color;

}…<body><p id="p1">This is a text.</p><button onclick="changeTextColor('red')">Red</button><button onclick="changeTextColor('blue')">Blue</button></body>…

Gets element of which id is ‘p1’

Changes text color

Invoked to change text color as red

Invoked to change text color as blue

Click ‘Red’! Click ‘Blue’!


Source Code

Example – Event Handling To react to an click event occurred in a specific button

Output

…<script>function onLoad() {

var b1= document.getElementById("b1");b1.onclick= function(){

alert('The element is clicked!');}

}</script>…

<body onload="onLoad()"><button id="b1">Hello JavaScript</button></body>

Gets element of which id is ‘b1’

Shows an alert pagewith the message

Invoked when the page has been loaded

Click Button!


OOP in JavaScript To define classes, private attributes/functions, and public

attributes/functions

function MyClass() {var _privateAttr = "value";function _privateMethod1() { }var _privateMethod2 = function() {};

var self = {publicAttr: "value",publicMethod: function() {

console.log("publicAttr: "+self.publicAttr);}

};return self;

}


What is jQuery? A JavaScript library to simplify JavaScript programming

To make it much easier to use JavaScript on your website

To take a lot of common tasks that require many lines of JavaScript code


JQuery Syntax Basic Syntax

‘$’ sign to access jQuery

(selector) to query or find HTML elements

action() to be performed on the element

Examples

$(selector).action()

$("p").hide(); //Hides all <p> elements.

$(".test").hide(); // Hides all elements with class="test".

$("#test").hide(); // Hides the element with id="test".


Document Ready Event To prevent jQuery or JavaScript code from running before a

HTML document is ready

$(document).ready(function(){//jQuery or JavaScript code go here…

});

$(function () {//jQuery or JavaScript code go here…

});


jQuery Selector (1) To find HTML element(s)

Based on the existing CSS Selectors

Element Selector

ID Selector

Class Selector

Attribute Selector

Value Selector


jQuery Selector (2) Element Selector

To select HTML elements based on the element name

ID Selector

To use id attribute of an HTML tag to find a specific element

To use ‘#’ character

$("#test").hide(); // Hides an element with id=“test”

$(“p").hide(); //Hides all <p> elements on a page

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show


jQuery Selector (3) Class Selector

To find elements with a specific class

To use ‘.’ character

Attribute Selector

To select element with a specific attribute

$("p[attr=hello]").hide(); //Hides all <p> elements with attr=“hello”

$(“.test").hide(); // Hides all elements with class=“test”


jQuery Selector (4) Other Selectors

Syntax Description

$("*") Selects all elements

$(this) Selects the current HTML element

$("p.intro") Selects all <p> elements with class="intro"

$("p:first") Selects the first <p> element

$("ul li:first") Selects the first <li> element of the first <ul>

$("ul li:first-child") Selects the first <li> element of every <ul>

$("[href]") Selects all elements with an href attribute

$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank"

$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank"

$(":button") Selects all <button> elements and <input> elements of type="button"

$("tr:even") Selects all even <tr> elements

$("tr:odd") Selects all odd <tr> elements


jQuery Action To be performed on the selected elements

To get/set contents and attributes

To add/remove HTML elements

To manipulate CSS

To handle events


jQuery Action - Contents and Attributes (1)

text()

To set/return text of the element(s)

html()

To set/return html contents of the element(s)

val()

To set/return a value of form fields

//Returns text of a element with id=‘id’

var text = $(“#id").text();

//Returns HTML contents of a element with id=‘id’

var html = $(“#id").html();

//Returns value of a form fields with id=‘id’

var val = $(“#id").val();

//Sets text of a element with id=‘id’ as “Hello jQuery!”

$(“#id").text(“Hello jQuery!”);

//Sets HTML contents of a element with id=‘id’ as “Hello jQuery!”

$(“#id").html(“<p>Hello jQuery!</p>”);

//Returns value of a form fields with id=‘id’ as “value”

$(“#id").val(“value”);


jQuery Action - Contents and Attributes (2)

attr()

To set/return attribute values

//Returns a value of the href attribute

var attr = $(“#id").attr(“href”);

//Sets the value of the href attribute

$(“#id").attr(“href”, “http://www.soft.ssu.ac.kr”);

//Sets multiple attributes

$(“#id").attr({“href”: http://www.soft.ssu.ac.kr, “title”: “Software Engineering Laboratory”}

);


jQuery Action - HTML Element (1) append()

To insert content at the end of the selected element

prepend()

To insert content at the beginning of the selected element

after()

To insert content after the selected element

before()

To insert content before the selected element$(“p”).append(“some appended text.”);

$(“p”).prepend(“some prepended text.”);

$(“p”).after(“some text after.”);

$(“p”).before(“some text before.”);


jQuery Action - HTML Element (2) remove()

To remove the selected elements and its child element(s)

empty()

To remove the child element of the selected element(s)

$("#div1").remove();

$("#div1").empty();


jQuery Action - CSS Manipulation (1) addClass()

To add one or more classes to the selected elements

removeClass()

To remove one or more classes from the selected elements

toggle(class)

To toggle between adding/removing classes from the selected elements

$(“div”).addClass(“important”) // Adds an ‘important’ value to a class attribute$(“div”).addClass(“important blue”) // Adds ‘important’ and ‘blue’ values to a class attribute

$(“div”).removeClass(“important”) // Removes an ‘important’ value from a class attribute$(“div”).removeClass(“important blue”) // Removes ‘important’ and ‘blue’ values from a class attribute

$(“div”).toggleClass(“important”) // Adds or Removes an ‘important’ value from a class attribute$(“div”).toggleClass(“important blue”) // Adds or Removes ‘important’ and ‘blue’ values from a class attribute

http://www.w3schools.com/jquery/tryit.asp?filen

ame=tryjquery_dom_toggleclass

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_toggleclass


jQuery Action - CSS Manipulation (2) css()

To set/return on or more style properties for the selected element(s)

// Returns the background-color valuevar bgColor = $(“p”).css(“background-color”)

// Sets the background-color value as yellow$(“p”).css(“background-color”, “yellow”)

// Sets multiple style properties$(“p”).css(

{“background-color”: “yellow”},{“font-size”: “200%” }

)


jQuery Action - Event Handling Event Method Syntax

Key Event Methods

Mouse Events Keyboard Events Form Events

click() keypress() submit()

dblclick() keydown() change()

mouseenter() keyup() focus()

mouseleave() blur()

$(selector).eventMethod(function(){

// Event handling code goes here!

});

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_blur_alert

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_blur_alert


Example (1) To handle click events

To Change CSS Style and text of a HTML element

Source Code

<script>$(document).ready(function(){

$("#btn1").click(function(){$("#p1").text("Hello world!");

});

$("#btn2").click(function(){$("#p1").css("color", "blue");

});});</script>

JavaScript HTML<body>

<p id="p1">This is a paragraph.</p>

<button id="btn1"> Set Text </button><button id="btn2"> Set CSS Style </button>

</body>

Invoked when ‘#btn1’ button clicked

Invoked when ‘#btn2’ button clickedSets text as “Hello world!”

Changes text color as blue


Example (2) Output

Initial Screen

Case 1: After ‘Set Text’ button clicked

Case 2: After ‘Set CSS Style’ button clicked


Thank You !

Documents

Tizen Web UI Technologies...1 Spring 2015 Soo Dong Kim, Ph.D. Professor, Department of Computer Science Software Engineering Laboratory Soongsil University Office 02-820-0909 Mobile