Skip to Content

01. 웹 리소스 구조

Contents

HONE Smart Platform v4버전 기반에서 동작하는 웹 리소스는 v3 버전 이하 기반과는 다르게 SPA(Single Page Application) 구조를 차용하여 1개의 웹 리소스 만으로 구성된다.
v4버전에서는 부분 업데이트 기능이 기본 기능으로 제공되어 배포를 위해 다수 개의 웹 리소스로 구성되던 예전 버전과 비교하여 개선된 구조이다. 

필수 파일 및 폴더 구조는 다음과 같다.
(* 표시를 한 파일은 반드시 존재해야 하는 필수 파일이다)

Picture 1. 웹 리소스 구조

└─ Root
   ├─ index.html *
   ├─ config.xml *
   ├─ icon.png *
   ├─ css
   ├─ img
   ├─ js
   ├─ html
   └─ lib

필수 파일 및 폴더에 대한 간략한 설명은 다음과 같다.

Table 2. 웹 리소스 구성

NoFile/FolderDescriptionM/O
1index.html웹 리소스의 시작 페이지M
2config.xml웹 리소스의 메타데이터 설정 파일M
3icon.png웹 리소스 대표 아이콘M
4cssCSS 파일용 폴더O
5imgImage 파일용 폴더O
6jsJavascript 파일용 폴더O
7htmlHtml 파일용 폴더O
8lib라이브러리 파일용 폴더O
    

index.html

해당 파일은 웹 리소스의 시작 페이지로 서브 뷰들의 프레임 역할을 하며 스크립트 파일들을 로드하는 역할도 수행한다.
단말기 대상으로 화면 구성 시 아래와 같이 viewport의 width 사이즈를 단말기의 width로 설정한다.

Picture 3. index.html 필수 메타데이타

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
</head>
<body>
</body>
</html>

config.xml

웹 리소스의 메타데이터 설정 정보를 포함하는 파일로 v4에서는 웹 리소스를 SPA(Single Page Application) 구조를 차용하여 한 개의 config.xml 파일을 반드시 포함하고 있어야 한다. 

예제는 아래와 같다.

Picture 4. config.xml 예제

<bizapp>
  <name>com.hanwhasystem.sample</name>
  <type>required</type>
  <title>Web Resource Sample</title>
  <version>4.1.4</version>
  <icon>icon.png</icon>
  <url>index.html</url>
  <description>Web Resource용 샘플</description>
  <author>Hanwha System/ICT</author>
  <securedPath></securedPath>
</bizapp>

각 항목별 간략한 설명은 다음과 같다.

Table 5. config.xml 설명

NoElementRemarkM/O
1name

웹 리소스의 고유 ID이며 Namespace를 이용한 Naming을 추천한다

(Ex: com.hanwhasystem.sample)

M
2title웹 리소스의 제목M
3version

[major].[minor].[micro] 형태의 웹 리소스 버전 정보

  • major: 최대 2자리 정수
  • minor: 최대 2자리 정수
  • micro: 최대 2자리 정수
M
4url웹 리소스 실행 시 기본으로 화면에 로딩될 시작 페이지 경로 (파일명 포함)M
5icon웹 리소스의 아이콘 경로 (파일명 포함)M
6type웹 리소스의 종류 (required으로 고정)M
7description웹 리소스에 대한 설명 (Operations Admin에 노출되는 정보)M
8author웹 리소스 작성자M
9securedPath웹 리소스의 암호화 대상 파일 / 폴더 경로 (2. 암호화 적용 참고)O
   

hone.js

HONE Smart Platform에서 제공되는 Javascript API를 사용하기 위해서 바인딩을 위한 hone.js 파일을 제공한다.
해당 파일은 Javascript API를 사용하는 파일에서 아래와 같이 로드를 시켜야만 API의 정상적인 기능을 제공받을 수 있다. 

Warning

(주의) hone.js 파일은 HONE Smart Platform 제품에서 제공하는 파일로 사용자 임의로 수정 또는 변경이 불가능하다.

Picture 6. hone.js 로드

<html>
<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
</head>
<body>
   <script type=”text/javascript” src="./js/hone.js”></script>
</body>
</html>

만약 Javascript ES6에서 hone.js의 모듈을 import 하여 사용할 경우 모듈을 참조하는 파일의 html 파일에서 script 태그의 type 값을 module로 수정해야 한다.

Picture 7. ES6 hone.js 로드

<html>
<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
</head>
<body>
   <script type=”module” src="./js/device.js”></script>
</body>
</html>

hone.js에서 제공하는 모듈은 사용하는 Javascript 파일에서 아래와 같이 import를 사용한다.
import { hone } from './hone.js'

해당 파일은 다음의 기능을 제공한다.

  • Android/iOS 네이티브와 Javascript API 바인딩
  • 성공/실패 콜백 함수 관리
  • Javascript API의 네이티브 반환값 선처리
  • HONE event (honeSystemLocaleChanged, honeResume,honePause) 디스패처