페이지 이력

버전 비교

키

이 줄이 추가되었습니다.
이 줄이 삭제되었습니다.
서식이 변경되었습니다.

이 인터페이스(Interface)는 W Player에서 현재 로드(Load)된 페이지(Page) 및 요소(Element)를 사용하기 위한 API들을 제공합니다.

getPage()

설명
페이지 객체를 리턴(return)합니다.
상태 이벤트에서 전달한 id를 파라미터로 입력하여 현재 자신이 속해 있는 페이지(Page) 객체를 전달 받습니다.
getElement() 함수를 통해 페이지에 로드된 element를 선택할 수 있습니다.
구문: function getPage(‘pageId’);
파라미터
pageId: State 에서 전달된 id 값
반환값
성공: Page 객체, 실패: 항상 성공
제한 사항
id 값을 입력하지 않거나 잘못된 값이 입력되면, 현재 화면에 재생되는 page 객체가 전달됩니다.
코드 예제
$wp.content.getPage(‘pageId’);
기타
$wp.content.getPage(); (id 값을 입력하지 않으면 현재 화면에 재생되는 page 객체가 전달됩니다.)

setProperty()

설명: 페이지의 속성을 설정합니다.
구문: function setProperty (‘name’,’value’);
파라미터:
name: 속성명
value: 속성값

name
value
유형 설명
background-color
color
value: "rgba(0, 0, 0, 1)"
반환값:
Type : bool
API 가 성공적으로 수행된 경우 : true
API 가 성공적으로 수행 되지 않은 경우 : false
제한 사항:
지원하지 않는 속성(파라미터의 Table에 작성되지 않은 property)을 변경할 경우, W Player 재생에 영향을 미칠 수 있습니다.
코드 예제:
$wp.content.getPage(pageId).setProperty('background-color', “rgba(255, 0, 0, 1)”));

name	value
유형	설명
background-color	color	value: "rgba(0, 0, 0, 1)"

getProperty()

설명: 페이지의 속성값을 구합니다.
구문: function setProperty (‘name’,’value’);
파라미터:
name: 속성명

name
반환값
유형 설명
name
string
string
background-color
color
value: "rgba(0, 0, 0, 1)"
반환값
Type : 위의 표 참고
API 가 성공적으로 수행된 경우 : 정상값
API 가 성공적으로 수행 되지 않은 경우 : undefined
코드 예제: $wp.content.getPage(pageId).getProperty('background-color');

name	반환값
유형	설명
name	string	string
background-color	color	value: "rgba(0, 0, 0, 1)"

getGlobalPage()

설명: 공통 페이지 객체를 반환합니다. 상태 이벤트에서 전달된 id를 파라미터로 입력해 자신이 속한 공통 페이지객체를 전달받습니다.
getElement() 함수를 통해 공통 페이지에 로드된 element를 선택할 수 있습니다.
구문: function getGlobalPage(‘pageId’);
파라미터:
pageId: 상태 이벤트에서 전달된 id 값
반환값
성공: 현재의 글로벌 페이지 객체
실패: 항상 성공
제한 사항: getPage() API와 달리 속성 관련 기능은 제공하지 않습니다.
코드 예제: $wp.content.getGlobalPage(pageId);

getElement()

설명: 페이지로부터 name 값을 갖는 element 객체를 반환합니다.
각 element가 제공하는 API를 통해 element를 제어할 수 있습니다.
구문: function getElement(‘name’);
파라미터: name: element name
정보
title 참고
자세한 내용은 다음을 참고하세요. ▶ Web Author layer Window
반환값: function getElement(‘name’);
성공: 현재의 글로벌 페이지 객체
실패: 항상 성공
코드 예제: $wp.content.getPage(pageId).getElement(‘Text1’);

setProperty()

설명: Element의 속성을 설정합니다. element마다 지원되는 속성은 다른 값을 가지고 있습니다.
구문: function setProperty (‘name’,’value’);

파라미터:

value: 속성값

지원 element	name	value
지원 element	name	유형	설명
common (단, video element는 지원하지 않음)	width	number	value 단위: px
	height	number	value 단위: px
	left	number	value 단위: px
	top	number	value 단위: px
	visibility	string	value: "visible,hidden"
	opacity	number	value: 0.0~1.0
	rotation	number	value: 0~360
	size	Object	{width: 0, height: 0}
	position	Object	{left: 0, top: 0}
image	flip-x	boolean	-
	flip-y	boolean	-
	source	string	file 절대 경로(getRootDirectory()를 참조하여 생성할 수 있습니다.)
	flip	Object	valueObject = {x: false, y: false}
video	source	string	file 절대 경로(getRootDirectory()를 참조하여 생성할 수 있습니다.)
text	font-size	number	value: font size
	font-variant	string	value: normal, small-caps
	font-color	color	value: "rgba(0, 0, 0, 1)"
	background-color	color	value: "rgba(0, 0, 0, 1)"
	font-weight	string	value: normal, bold
	font-style	string	value: normal, italic
	text-decoration	string	value: none, line-through, underline
	letter-spacing	number	value 단위: 'px' (0-50)
	horizontal-align	string	value: left,right,center
	vertical-align	string	value: top,middle,bottom
	text	string	string

반환값:
Type: bool
API가 성공적으로 수행된 경우: true
API가 성공적으로 수행되지 않은 경우: false
제한 사항:
지원하지 않는 속성(파라미터의 Table에 작성되지 않은 property)을 수정할 경우, W Player 재생에 영향을 미칠 수 있습니다.
코드 예제: $wp.content.getPage(pageId).getElement(‘Text1’).setProperty(‘text’, ‘Test Text!’);
기타
Image/Video 요소 - Source 속성의 파라미터는 다음과 같이 설정할 수 있습니다.
var imagePath = $wp.local.getRootDirectory() + “/testImage.png”;
다음을 참고하세요. ▶ $wp.local. getRootDirectory();
$wp.content.getPage(pageId).getElement(‘Image1’).setProperty(‘source’, imagePath);

getProperty()

설명: Element의 속성을 값을 구합니다.
구문: function getProperty (‘name’);

파라미터

지원 element	name	반환값
지원 element	name	유형	설명
common (단, video element는 Lock을 제외한 나머지는 지원하지 않음)	width	number	value 단위: px
	height	number	value 단위: px
	left	number	value 단위: px
	top	number	value 단위: px
	visibility	string	value: "visible,hidden"
	opacity	number	value: 0.0~1.0
	rotation	number	value: 0~360
	size	Object	{width: 0, height: 0}
	position	Object	{left: 0, top: 0}
	lock-position-size	boolean	-
	lock-design	boolean	-
	lock-content	boolean	-
image	flip-x	boolean	-
	flip-y	boolean	-
	source	string	file 절대 경로
	flip	Object	{x: false, y: false}
video	source	string	file 절대 경로
web content	user-data	Object	{"key","value"}
text	font-size	number	value: font size
	font-variant	string	value: normal, small-caps
	font-color	color	value: "rgba(0, 0, 0, 1)"
	background-color	color	value: "rgba(0, 0, 0, 1)"
	font-weight	string	value: normal, bold
	font-style	string	value: normal, italic
	text-decoration	string	value: none, line-through, underline
	letter-spacing	number	value 단위: 'px' (0-50)
	horizontal-align	string	value: left,right,center
	vertical-align	string	value: top,middle,bottom
	text	string	string

반환값
Type: 위 표 참고
API가 성공적으로 수행된 경우: 정상값
API가 성공적으로 수행되지 않은 경우: undefined: function getProperty (‘name’);
코드 예제: $wp.content.getPage(pageId).getElement(‘Text1’).getProperty(‘text’);

addEventListener()

설명: 현재 재생되고 있는 요소의 클릭 이벤트를 전달받는 리스너(Listener)를 추가할 수 있습니다.
구문: function addEventListener(type,myFunction);
파라미터
type: ‘click’ (click만 지원함)
myFunction: callback function
반환값
Type: bool
API가 성공적으로 수행된 경우: true
API가 성공적으로 수행되지 않은 경우: false
제한 사항
Type으로는 click만 지원합니다.
지원 요소: 이미지, 비디오, 텍스트, 스티커 , 도형
Click 영역: 요소 영역의 최외곽 사각형 영역입니다. (단, 도형 요소는 도형 모양 외곽 기준)
코드 예제
$wp.content.getPage(pageId).getElement(‘Text1’). addEventListener(‘click’,myFunction);

getPropertyType()

설명: 콘텐츠 인터페이스에서 제공하는 속성들의 이름을 가져올 수 있습니다.

속성명	반환값
WIDTH	'width'
HEIGHT	'height'
LEFT	'left'
TOP	'top'
VISIBILITY	'visibility'
OPACITY	'opacity'
ROTATION	'rotation'
SIZE	'size'
POSITION	'position'
FLIP_X	'flip-x'
FLIP_Y	'flip-y'
SOURCE	'source'
FLIP	'flip'
FONTFAMILY	'font-family'
FONTSIZE	'font-size'
FONTVARIANT	'font-variant'
FONTCOLOR	'font-color'
BACKGROUNDCOLOR	'background-color'
FONTWEIGHT	'font-weight'
FONTSTYLE	'font-style'
TEXTDECORATION	'text-decoration'
LETTERSPACING	'letter-spacing'
HORIZONTALALIGN	'horizontal-align'
VERTICALALIGN	'vertical-align'
TEXT	'text'
LOCKPOSITIONANDSIZE	'lock-position-size'
LOCKDESIGN	'lock-design'
LOCKCONTENT	'lock-content'
NAME	'name'
USERDATA	'user-data'

구문: function getPropertyType();
파라미터: none
반환값
성공: object (속성명), 실패: 항상 성공
코드예제
$wp.content.getPropertyType();
기타
$wp.content.getPropertyType();로부터 반환되는 객체를 변수화해 사용하면 오타 방지 등의 편리함이 있습니다.
var contentPropertyType = $wp.content.getPropertyType();
$wp.content.getPage().getElement('Text1').setProperty(contentPropertyType.TEXT, “TEST”);

movePage ()

설명: 페이지를 이동해 재생합니다.
구문: function movePage(‘pageName’);
파라미터
page name
반환값
Type: bool
API가 성공적으로 수행된 경우: true
API가 성공적으로 수행되지 않은 경우: false
제한 사항
movePage() API는 웹 콘텐츠가 공통 페이지에서 동작되는 경우에만 정상 동작합니다.
일반 페이지에 위치한 HTML 요소에서 movePage api를 사용할 경우 해당 페이지로 이동 재생되기 때문에 기존 HTML 요소는 더 이상 동작하지 않습니다.
코드 예제
$wp.content.movePage(‘pagename’);
기타
setDefaultCallback()의 pageChanged 상태와 같이 사용하면 페이지 변경에 대한 추가 정보를 얻을 수 있습니다.
다음을 참고하세요. ▶ setDefaultCallback()

wp.device

이 인터페이스는 W Player, Tizen 등의 Device 관련 리소스 정보를 얻기 위한 API들을 제공합니다.

getProperty ()

...

설명: Device의 속성값을 구합니다.

...

구문: function getProperty (‘name’);

파라미터

...

name

...

반환값

...

player_version

...

string

...

value: w player version

...

fw_version

...

string

...

value: firmware version

...

variable_tag

...

array

...

value: tag list

...

mis_ip

...

string

...

value: mis ip address

...

mac

...

string

...

value: mac address

...

ipaddress

...

string

...

value: ip address

...

resolution

...

object

...

{ width: 1920, height: 1080 }

...

orientation

...

string

...

value: landscape/portrait

...

반환값

Type: 위 표 참고

API가 성공적으로 수행된 경우: 정상값

API가 성공적으로 수행되지 않은 경우: undefined Type: bool

...

코드 예제

$wp.device.getProperty(‘mac’);

getPropertyType()

설명: Device 인터페이스에서 제공하는 속성들의 이름을 가져올 수 있습니다.

...

속성명

...

반환값

...

PLAYER_VERSION

...

'player_version'

...

FIRMWARE_VERSION

...

'fw_version'

...

VARIABLE_TAG

...

'variable_tag'

...

MIS_IP

...

'mis_ip'

...

MACADDRESS

...

'mac'

...

IPADDRESS

...

'ipaddress'

...

RESOLUTION

...

'resolution'

...

ORIENTATION

...

'orientation'

...

구문: function getPropertyType();

...

파라미터

None

...

반환값

성공: object(속성명), 실패: 항상 성공

...

코드 예제

$wp.device.getPropertyType();

...

기타

$wp.device.getPropertyType();로부터 반환되는 객체를 변수화해 사용하면 오타 방지 등의 편리함이 있습니다.

var devicePropertyType = $wp.device.getPropertyType();

$wp.device.getProperty(devicePropertyType.MACADDRESS);

$wp.local

이 인터페이스는 웹 콘텐츠 요소가 실행되는 local 환경 정보를 얻기 위한 API들을 제공합니다.

...

getApiVersion ()

설명: 웹 콘텐츠가 가져온 W Player API Lib의 버전을 알 수 있습니다.
구문: function getApiVersion();
파라미터
None
반환값
성공: string (version), 실패: 항상 성공
코드 예제
$wp.local.getApiVersion();
기타
$wp.utility.getApiVersion();과 함께 사용해 버전 관리를 할 수 있습니다.

getRootDirectory ()

...

설명: 웹 콘텐츠가 로드된 루트 디렉터리를 알 수 있습니다.

...

구문: function getRootDirectory();

...

파라미터

none

...

반환값

성공: string (Root Directory), 실패: 항상 성공

코드 예제

...

기타

웹 콘텐츠에 추가한 asset은 getRootDirectory()를 통해 전달받은 루트 디렉터리 경로 하위에 저장됩니다.

...

$wp.utility

이 인터페이스는 응용 웹 콘텐츠 요소 개발을 위한 여러 utility API들을 제공합니다.

log ()
- 설명: 웹 콘텐츠가 가져온 W Player API Lib의 버전을 알 수 있습니다.
- 구문: function log(“message”);
- 파라미터
  message: string
- 반환값
  Type: void
- 코드 예제
  $wp.utility.log(“Hello World!”);
- 기타
  로그를 원격으로 가져올 수 있습니다. 다음을 참고하세요. ▶ 로그 가져오기
getApiVersion ()
- 설명: 웹 콘텐츠가 실행되는 W Player가 지원하는 W Player API Lib의 버전을 알 수 있습니다.
- 구문: function getApiVersion();
- 파라미터
  none
- 반환값
  성공: string (version), 실패: 항상 성공
- 코드 예제
  $wp.utility.getApiVersion();
- 기타
  $wp.local.getApiVersion();과 함께 사용해 버전 관리를 할 수 있습니다.

Content

공간 도구

버전 비교

이전 버전 3

새 버전 4

키

getPage()

setProperty()

getProperty()

getGlobalPage()

getElement()

setProperty()

getProperty()

addEventListener()

getPropertyType()

movePage ()

wp.device