¶ 개발 환경 및 유의사항
¶ 1. 최소지원 버전 iOS8 (권장버전 iOS9 이상)
- MCore2.1.7.66 버전을 기점으로 UIWebView -> WKWebView 기반으로 변경이 되어 최소 지원 버전이 변경됨
¶ 2. Objective C 기반으로 기본 프로젝트가 제공
¶ 3. 유의 사항
- 모피어스 관련 라이브러리 MCore.framework 등의 파일은 Link 방식으로 구성되어 있어 해당 방식이 지원되지 않는 Window등의 운영체제를 거쳐올 경우 해당 Link가 깨져서 정상적으로 빌드가 되지 않는 경우가 있음
- 빌드시 MCore/MCore.h 파일을 찾을수 없음 오류 발생
- IDE의 라이브러리 매니저를 통해 라이브러리 재적용을 함으로 조치할수 있음
¶ 프로젝트 구조
¶ 1. 프로젝트의 기본 구조 및 파일에 대한 설명
- 제품에서 제공하는 일반적인 구조
- iOS 프로젝트에 res 폴더 추가하기
¶ Native 화면(ViewController)와 플랫폼 화면(HTML)의 연동
¶ 1. Web (Html) - Native (Activity)간 화면 연동
- 모피어스의 히스토리 관리 기능을 이용하기 위한 방법임.
¶ Native Controller?
- UIViewController 또는 PPNativeViewController를 이용하여 생성한 Controller.
- PPNativeViewController를 parent class로 설정해야 아래의 native api 사용 가능 함.
| 페이지 이동 조건 | API |
|---|---|
| Html -> Native | M.page.activity() 를 이용하여, Native 화면을 호출 |
| Native -> Html | - (void) moveToWebOnNewActWithUrl:(NSString*)url paramObj:(PPParameters *)pParameters action:(PPActionType)pActionType orient:(PPSupportOrientation)pOrientationType animation:(PPAnimationType)pAnimationType; |
| Native -> Native | - (void) moveToNativeActWithClass:(Class)className paramObj:(PPParameters *)pParameters action:(PPActionType)pActionType orient:(PPSupportOrientation)pOrientation animation:(PPAnimationType)pAnimationType; |
| Native -> 이전화면 | - (void) historyBackWithParamObject:(PPParameters *)pParameters animation:(PPAnimationType)pAnimationType; |
| Native -> PPActionClearTop 이동 | - (BOOL) moveClearTop:(NSString )pKey params:(PPP arameters)pParameters animation:(PPAnimationType)pAnimationType; |
- 플랫폼의 화면 이동 native api의 파라미터
| 파라미터 | 파라미터정의 | 비고 |
|---|---|---|
| PPAnimationType | PPAnimationDefault, PPAnimationSlideLeft, PPAnimationSlideRight, PPAnimationSlideTop, PPAnimationSlideBottom, PPAnimationNone, PPAnimationZoomIn, PPAnimationZoomOut, PPAnimationFade, PPAnimationFlipLeft, PPAnimationFlipRight, PPAnimationCurlUp, PPAnimationCurlDown, PPAnimationModalUp, PPAnimationModalDown, PPAnimationModalLeft, PPAnimationModalRight |
- 화면 전환간의 애니메이션 설정 |
| PPActionType | PPActionNewScreen, PPActionNoHistory, PPActionClearTop, PPActionGotoTop, PPActionExtTabNewScreen, PPActionExtTabMoveTopScreen, PPActionExtTabBackScreen |
- 플랫폼의 화면 Stack 관리 옵션 |
| PPSupportOrientation | PPSupportOrientationDefault, PPSupportOrientationPortrait, PPSupportOrientationLandscape, PPSupportOrientationReversiblePortrait, PPSupportOrientationReversibleLandscape, PPSupportOrientationAll |
- 화면의오리엔테이션설정 |
(참고) 일반적인 iOS UIViewController 개발 방법을 이용하여 확장 개발해도 동작하지만, 모피어스에서 제공하는 기능을 사용하지 못함.
¶ Web 과 Native 데이터 공유
¶ 1. 공유방식
- 3가지 방식으로 WEB–NATIVE간 데이터 공유가능
데이터 유형은 String
| 구분 | 설명 | Web API | Native API |
|---|---|---|---|
| 파라미터 공유 | - 화면 전환간 데이터 전달 - URL의 key=value 전달 방식 |
M.data.param | PPParameters |
| 전역 데이터 공유 | - Memory 저장 ( 휘발성 ) - 앱 실행 중, set/get - 앱 종료 시 데이터 삭제 |
M.data.global | PPAppContext._setGlobalValue |
| 영속 데이터 공유 | - 스토리지 ( UserDefault 저장 ) - 앱 실행 중, set/get |
M.data.storage | PPAppContext._setStorageValue |
- 데이터 공유 예시
¶ WN(Web-Native) Interface method 개발
¶ 1. WN 확장 Interface?
- WIKI API에 정의되지 않은 Native 함수의 추가 및 사용을 WN 확장 interface라 한다.
- WN Interface는 Web and Native Interface의 약어이다.
- Native 함수의 추가는 ExtendWNInterface.m 파일에 추가한다.
- 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.m)
-(NSString *)exWNCallSync:(NSString *)params
{
NSLog(@“%@”, params);
NSDictionary *obj = [params objectFromJsonString];
return [obj jsonString];
}
¶ 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.m)
-(void)exWNCallAsync:(NSString *)params :(NSString *)callback
{
NSLog(@“%@”, params);
NSDictionary *obj = [params objectFromJsonString];
[self.viewctrl callCbfunction:callback withObjects:obj, nil];
}
¶ 웹뷰 사이즈 변경 처리 개발
¶ 모피어스 웹뷰의 사이즈를 커스텀하게 변경하는 방법에 대한 설명
주의 사항: iOS의 경우 노치영역이 있는 디바이스와 노치영역이 없고 홈버튼이 있는 디바이스 2가지 타입이 있어 각각 구현이 필요함
- PPhybridViewController가 웹뷰를 포함하고 있는 ViewController이기에 해당 파일에서 사이즈 변경 처리를 한다.
- 상단에 40 높이의 빨간색 네이티브 뷰, 하단에 60 높이의 초록색 네이티브 뷰를 붙일 경우의 예시 (PPhybridViewController.m)
CGFloat topHeight = 40.0f;
CGFloat bottomHeight = 60.0f;
...
- (void) loadView {
[super loadView];
// NavigationBar 는 사용하지 않으므로 Hidden
self.navigationController.navigationBarHidden = YES;
//뷰 계층도 확인을 위한 safeArea 영역에 대한 색상 지정
[self.view setBackgroundColor:[UIColor blueColor]];
//뷰 계층도 확인을 위한 background 영역에 대한 색상 지정
[self.backgroundView setBackgroundColor:[UIColor grayColor]];
//뷰 계층도 확인을 위한 webView 영역에 대한 색상 지정
[self.poperaWebview setBackgroundColor:[UIColor orangeColor]];
//상하단 네이티브 뷰 추가와 웹뷰 사이즈를 조절
[self addViewCustomSize];
}
// backgroundView에 SafeArea를 적용할지에 대한 플래그
-(BOOL)useSafeArea
{
return YES;
}
-(void)addViewCustomSize
{
//상단 네이티브 뷰
UIView *topView = [[UIView alloc] init];
topView.tag = 100;
[self.backgroundView addSubview:topView];
[topView setFrame:CGRectMake(0, 0, self.backgroundView.frame.size.width, topHeight)];
[topView setAutoresizingMask:(UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleBottomMargin)];
[topView setBackgroundColor:[UIColor redColor]];
//하단 네이티브 뷰
UIView *bottomView = [[UIView alloc] init];
[self.backgroundView addSubview:bottomView];
[bottomView setBackgroundColor:[UIColor greenColor]];
[bottomView setFrame:CGRectMake(0, self.backgroundView.frame.size.height - bottomHeight, self.backgroundView.frame.size.width, bottomHeight)];
[bottomView setAutoresizingMask:(UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin)];
//웹뷰 사이즈 조절
[self.poperaWebview setFrame:CGRectMake(0, topHeight, self.backgroundView.frame.size.width, self.backgroundView.frame.size.height - topHeight - bottomHeight)];
}
// 노치 영역이 없는 디바이스에 대한 추가 구현이 필요한 부분의 시작
// 홈버튼이 있는 단말의 경우 getPoperaWebViewFrame을 사용할지에 대한 플래그값
-(BOOL)useCustomPoperaFrame
{
return YES;
}
// 홈버튼이 있는 단말의 경우 useStatusBarView 여부에 따라 20픽셀에 대한 처리가 있어 구현이 필요함
-(CGRect)getPoperaWebViewFrame
{
// 홈버튼 있는 경우 적용
int status = 20;
if([self useStatusBarView])
{
status = 20;
UIView *topView = [self.backgroundView viewWithTag:100];
[topView setFrame:CGRectMake(0, status, self.backgroundView.frame.size.width, topHeight)];
}
else
{
status = 0;
}
return CGRectMake(0, status + topHeight, self.backgroundView.frame.size.width, self.backgroundView.frame.size.height - status - bottomHeight - topHeight);
}
// 홈버튼이 있는 단말에서 상단 statusBar 영역을 비울지에 대한 플래그값
-(BOOL)useStatusBarView
{
return YES;
}
- 노치 영역이 있는 디바이스의 뷰 계층도
- 홈 버튼이 있는 디바이스의 뷰 계층도
