¶ 용어 설명
¶ 1. 용어
¶ 제품에서 사용하는 용어에 대해 서술합니다.
| 순번 | 용어 | 설명 |
|---|---|---|
| 1 | 플랫폼화면 | HTML로구성된WEBPage |
| 2 | Native | Java 로 구성된 Activity 및 class |
| 3 | 리소스 파일 | HTML 화면을 구성하는 html, css, javascript, image 등을 통칭 |
| 4 | BaseActivity | 플랫폼 화면을 구성하기 위해 기준이 되는 Activity |
| 5 | WN | WEB–Native의약자 |
| 6 | WNInterface | WEB 과 Native 간의 통싞을 위한 class |
| 7 | Manifest.xml | 플랫폼의 기본 설정 값을 정의하는 파일 |
| 8 | Application.xml | IDE에서 라이브러리 상태 및 Manfiest.xml 정보를 관리하기 위한 파일 |
¶ 플랫폼 특징
¶ 1. 화면 Stack 관리
- 화면 이동을 위한 M.page.html(), M.page.activity() api 를 이용하여, 생성된 화면은 ActivityHistoryManager에서 Stack 으로 관리된다.
- WEB 화면 : Activity = 1 : 1 관계
- Stack을관리할수있도록처리 (메모리부족이슈 해소)
¶ 화면 호출시, 매번 아래와 같이 BaseActivity 에 WebView 가 올라가는 형태이다.
¶ 2. 리소스 암호화 배포
- 배포서버에서, 암호화된 리소스를 다운로드 받아, 화면이 보여지는 시점에만 복호화
(주의) mcore.mobile.lic 파일은 암호화 대상이 아님
- 보안을 강화하기 위해 서버로부터 암호화된 리소스 파일을 단말에 저장하고, 플랫폼 내의 로컬서버를 통해 복 호화 과정을 거치도록 설계되어 있음.
¶ 3.라이브러리 모듈화
- Core, Addon, Plug-in, 3rd party Plugin 으로 구성됨
(주의) Core 라이브러리 업데이트 시, Addon, Plugin등 기타 라이브러리 업데이트 필요 addon, plugin 등은 Core를 참조하여 생성 되며, Core업데이트 시 업데이트 하지 않으면, 오류가 발생 할 수 있음.
¶ 프로젝트 구성
¶ 1. 프로젝트의 기본 구조 및 파일에 대한 설명
- 제품에서 제공하는 일반적인 구조
¶ 2. Start-Up Flow
-
앱 실행 시, 최초 호출은 Startup.java 이며, 라이선스 체크 및 설정 파일 로딩, start-page 호출 순으로 처리됨
¶ Native 화면(Activity)와 플랫폼 화면(HTML)의 연동
¶ 1. Web (Html) - Native (Activity)간 화면 연동
- 모피어스의 히스토리 관리 기능을 이용하기 위한 방법임.
| 페이지 이동 조건 | 설명 |
|---|---|
| Web –> Native | M.page.activity() 를 이용하여, Native Activity의 화면을 호출 |
| Native –> Web | Controller.getInstance().actionMoveActivity() 호출 |
| Native –> Native | Controller.getInstance().actionMoveActivity() 호출 |
| Native –> Native Back | Controller.getInstance().actionHistoryBack() 호출 |
(참고) 일반적인 안드로이드 개발 방법을 이용해도 동작하지만, 모피어스에서 제공하는 기능을 사용하지 못함.
¶ Web 과 Native 데이터 공유
¶ 1. 공유방식
- 3가지방식으로WEB–NATIVE간데이터공유가능
데이터 유형은 String
| 구분 | 설명 | Web API | Native API |
|---|---|---|---|
| 파라미터 공유 | - 화면 전환간 데이터 전달 | M.data.param | Parameters |
| - URL의 key=value 전달 방식 | |||
| 전역 데이터 공유 | - Memory 저장 (휘발성) | M.data.global | CommonLibUtil. setVariable |
| - 앱 실행 중, set/get | |||
| - 앱 종료 시 데이터 삭제 | |||
| 영속 데이터 공유 | - 스토리지(SharedPreference 저장) | M.data.storage | CommonLibUtil.setUserConfigInfomation |
| - 앱 실행 중, set/get |
- 데이터 공유 예시
¶ WN(Web-Native) Interface method 개발
¶ 1. WN 확장 Interface?
- WIKI API에 정의되지 않은 Native 함수의 추가 및 사용을 WN 확장 interface라 한다. WN Interface는 Web and Native Interface의 약어이다.
- Native 함수의 추가는 ExtendWNInterface.java 파일에 추가한다.
- Native 함수의 동기/비동기 방식의 동작 지원.
| 구분 | 설명 |
|---|---|
| 동기 | native 함수의 return 값이 화면(js)으로 바로 전달되는 방식. |
| 비동기 | native 함수의 결과 값을 js함수(cb js함수)를 통하여 화면(js)로 전달되는 방식. 함수 호출 시 cb js함수의 전달 또는 prefix된 js함수로 결과 전달이 가능함. |
¶ 2. M.execute (Native API 호출)
- ExtendWNInterface 에 만들어진 api 를 호출하기 위한 방법
주의 사항: api 를 제외한 param 의 개수는 ExtendWNInterface에 만들어진 method 의 param 개수와 동일해야 함.
¶ 3. 동기방식 호출
- Native의 java 함수를 sync(동기)방식으로 호출하는 JS함수.
- WEB 호출 에시
var data = {
name: 'mcore',
param: 'sync'
};
M.execute(“exWNCallSync”, data);
- Native method 예시 (ExtendWNInterface.java)
public String exWNCallSync(String params){
Logger.i(params);
try {
JSONObject obj = new JSONObject(params); obj.put("method", "exWNCallSync");
return obj.toString();
} catch (Exception e) {
// TODO: handle exception }
return "";
}
}
¶ 4. 비 동기방식 호출
-
Native의 java 함수를 async(비동기)방식으로 호출하는 JS함수.
-
WEB 호출 에시
var data = {
name: 'mcore',
param: 'async'
};
var callback = M.response.on( function( result ) {
console.log( result );
}).toString()
M.execute(“exWNCallAsync”, data, callback);
- Native method 예시 (ExtendWNInterface.java)
public void exWNCallAsync(String params, String callback){
try {
JSONObject obj = new JSONObject(params);
StringBuffer buff = new StringBuffer();
buff.append("javascript:")
.append(callback)
.append("(")
.append(obj.toString())
.append(")");
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT){
webView.evaluateJavascript(buff.toString(), null);
}else{
webView.loadUrl(buff.toString());
}
} catch (Exception e) {
// TODO: handle exception
}
}