Tizen Web UI Technologies...1 Spring 2015 Soo Dong Kim, Ph.D. Professor, Department of Computer...

Preview:

Citation preview

11

Spring 2015

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

Software Engineering Laboratory

Soongsil UniversityOffice 02-820-0909 Mobile 010-7392-2220sdkim777@gmail.com 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

4© 2015 Soo Dong KimSW Design Principles

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.

5© 2015 Soo Dong KimSW Design Principles

HTML Tags Key Usage of HTML tags

Layout

Text Style

Element

Form

List

6© 2015 Soo Dong KimSW Design Principles

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

7© 2015 Soo Dong KimSW Design Principles

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

8© 2015 Soo Dong KimSW Design Principles

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

9© 2015 Soo Dong KimSW Design Principles

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.

10© 2015 Soo Dong KimSW Design Principles

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>)

11© 2015 Soo Dong KimSW Design Principles

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>…

12© 2015 Soo Dong KimSW Design Principles

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

13© 2015 Soo Dong KimSW Design Principles

Selector Element Selector

ID Selector

Class Selector

Attribute Selector

14© 2015 Soo Dong KimSW Design Principles

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;

}

15© 2015 Soo Dong KimSW Design Principles

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;

}

16© 2015 Soo Dong KimSW Design Principles

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;

}

17© 2015 Soo Dong KimSW Design Principles

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;

}

18© 2015 Soo Dong KimSW Design Principles

Property Key Categories of Property

Background

Border

Text Formatting

Margin & Padding

19© 2015 Soo Dong KimSW Design Principles

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

20© 2015 Soo Dong KimSW Design Principles

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

21© 2015 Soo Dong KimSW Design Principles

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

22© 2015 Soo Dong KimSW Design Principles

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

23© 2015 Soo Dong KimSW Design Principles

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

25© 2015 Soo Dong KimSW Design Principles

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

26© 2015 Soo Dong KimSW Design Principles

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>

27© 2015 Soo Dong KimSW Design Principles

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

String

Number

Boolean

Object

Function

28© 2015 Soo Dong KimSW Design Principles

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

29© 2015 Soo Dong KimSW Design Principles

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

30© 2015 Soo Dong KimSW Design Principles

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

31© 2015 Soo Dong KimSW Design Principles

Examples of JavaScript To change contents of HTML elements

To change CSS of HTML elements

To react events in a web page

32© 2015 Soo Dong KimSW Design Principles

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!

33© 2015 Soo Dong KimSW Design Principles

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’!

34© 2015 Soo Dong KimSW Design Principles

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!

35© 2015 Soo Dong KimSW Design Principles

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;

}

36© 2015 Soo Dong KimSW Design Principles

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

37© 2015 Soo Dong KimSW Design Principles

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".

38© 2015 Soo Dong KimSW Design Principles

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…

});

39© 2015 Soo Dong KimSW Design Principles

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

Based on the existing CSS Selectors

Element Selector

ID Selector

Class Selector

Attribute Selector

Value Selector

40© 2015 Soo Dong KimSW Design Principles

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

41© 2015 Soo Dong KimSW Design Principles

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”

42© 2015 Soo Dong KimSW Design Principles

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

43© 2015 Soo Dong KimSW Design Principles

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

44© 2015 Soo Dong KimSW Design Principles

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”);

45© 2015 Soo Dong KimSW Design Principles

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”}

);

46© 2015 Soo Dong KimSW Design Principles

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.”);

47© 2015 Soo Dong KimSW Design Principles

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();

48© 2015 Soo Dong KimSW Design Principles

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

49© 2015 Soo Dong KimSW Design Principles

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%” }

)

50© 2015 Soo Dong KimSW Design Principles

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

51© 2015 Soo Dong KimSW Design Principles

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

52© 2015 Soo Dong KimSW Design Principles

Example (2) Output

Initial Screen

Case 1: After ‘Set Text’ button clicked

Case 2: After ‘Set CSS Style’ button clicked

53© 2015 Soo Dong KimSW Design Principles

Thank You !