07. Storyboard 가이드


HONE Smart Platform 은 앱 화면을 구성하기 위한 기본 윈도우로 HMPWindow, HMPPopupWebWindow, HMPWebWindow, HMPPopupWindow 4종류의 Window를 제공한다.

Window는 하나의 UIViewController로 구성되며, 스토리보드를 활용해 자유롭게 Window 구현이 가능하다.

Table. 지원 Window 종류

NoClass NameRemark
1HMPWindow기본 Native Window
2HMPWebWindow기본 Web Window
3HMPPopupWindow팝업 Native Window
4HMPPopupWebWindow팝업 Web Window

Web Window 개발

1. 스토리보드 생성 (스토리보드 이름 Main으로 가정)
Picture1.png

2. Swift Class 생성 (Class 이름 CustomWebWindow로 가정)
Picture1.png
이 때, HMPWebWindow를 상속받는다.
Picture1.png

Example

import UIKit

class CustomWebWindow: HMPWebWindow {

   override func viewDidLoad() {
       super.viewDidLoad()
    }

   @IBAction func onClickClose(_ sender: Any) {
        DAPWindow.goBack()
    }
}
@interface CustomWebWindow : HMPWebWindow

@end

@implementation CustomWebWindow

- (void)viewDidLoad {
    [super viewDidLoad];
}

-(IBAction)onClickClose:(id)sender {
    [DAPWindow goBack:^(NSDictionary *resultDict) {
    } failure:^(NSError *error) {
    }];
}

@end

3. CustomWebWindow 클래스를 스토리보드에 연결 후 Storyboard ID 추가 (mainWeb으로 가정)
Picture1.png

4. 스토리보드 셋팅

4-1. WKWebView를 스토리보드에 추가한다.
Picture1.png

4-2. 추가한 WKWebView를 해당 뷰의 Outlets으로 연결한다.
Picture1.png

4-3. 연결 확인 - Referencing Outlets 을 통해 WebView가 연결되었음을 확인한다.
Picture1.png

5. window.json 내 Window 추가

{
   "windows": {
 "customMainWeb": {
     "layoutName": "Main",
     "layoutId": "mainWeb"
  }
 }
}

6. 결과화면

Picture1.png


Web 팝업 Window 개발

1. Swift Class 생성 (Class 이름 CustomWebPopupWindow로 가정)
Picture1.png
이 때, HMPPopupWebWindow를 상속받는다.
Picture1.png

Example

import UIKit

class CustomPopUpWebWindow: HMPPopupWebWindow {

   override func viewDidLoad() {
       super.viewDidLoad()
    }
   
   @IBAction func onClickClose(_ sender: Any) {
        DAPWindow.goBack()
    }
}
@interface CustomWebPopupWindow : HMPPopupWebWindow

@end

@implementation CustomWebPopupWindow

- (void)viewDidLoad {
    [super viewDidLoad];
}

-(IBAction)onClickClose:(id)sender {
    [DAPWindow goBack:^(NSDictionary *resultDict) {
    } failure:^(NSError *error) {
    }];
}

@end

2. CustomWebPopupWindow 클래스를 스토리보드에 연결 후 Storyboard ID 추가 (mainWebPop으로 가정)

Picture1.png

3. 스토리보드 셋팅
WKWebView를 스토리보드에 추가 후 Oulets의 webView에 추가한 WKWebView를 연결한다.
팝업 영역을 제외한 백그라운드를 반투명하게 셋팅한다.

Picture1.png

4. window.json 내 Window 추가

{
   "windows": {
 "customMainWebPop": {
     "layoutName": "Main",
     "layoutId": "mainWebPop"
  }
 }
}

5. 결과화면

Picture1.png


네이티브 Window 개발

1. Swift Class 생성 (Class 이름 CustomWindow로 가정)
Picture1.png
이 때, HMPWindow를 상속받는다.
Picture1.png

Example

import UIKit

class CustomWindow: HMPWindow {

   override func viewDidLoad() {
       super.viewDidLoad()
    }
   
   @IBAction func onClickClose(_ sender: Any) {
        DAPWindow.goBack()
    }
}
@interface CustomWindow : HMPWindow

@end

@implementation CustomWindow

- (void)viewDidLoad {
    [super viewDidLoad];
}

-(IBAction)onClickClose:(id)sender {
    [DAPWindow goBack:^(NSDictionary *resultDict) {
    } failure:^(NSError *error) {
    }];
}

@end

2. CustomWindow 클래스를 스토리보드에 연결 후 Storyboard ID 추가 (main으로 가정)

Picture1.png

3. 스토리보드 셋팅
원하는 네이티브 뷰를 스토리보드에 추가한다.

Picture1.png

4. window.json 내 Window 추가

{
   "windows": {
 "customMain": {
     "layoutName": "Main",
     "layoutId": "main"
  }
 }
}

5. 결과화면

Picture1.png


네이티브 팝업 Window 개발

1. Swift Class 생성 (Class 이름 CustomPopupWindow로 가정)
Picture1.png
이 때, HMPPopupWindow를 상속받는다.
Picture1.png

Example

import UIKit

class CustomPopUpWindow: HMPPopUpWindow {

   override func viewDidLoad() {
       super.viewDidLoad()
    }
   
   @IBAction func onClickClose(_ sender: Any) {
        DAPWindow.goBack()
    }
}
@interface CustomPopupWindow : HMPPopupWindow

@end

@implementation CustomPopupWindow

- (void)viewDidLoad {
    [super viewDidLoad];
}

-(IBAction)onClickClose:(id)sender {
    [DAPWindow goBack:^(NSDictionary *resultDict) {
    } failure:^(NSError *error) {
    }];
}

@end

2. CustomPopupWindow 클래스를 스토리보드에 연결 후 Storyboard ID 추가 (mainWebPop으로 가정)

Picture1.png

3. 스토리보드 셋팅
원하는 네이티브 뷰를 스토리보드에 추가한다.
팝업 영역을 제외한 백그라운드를 반투명하게 셋팅한다.

Picture1.png

4. window.json 내 CustomPopupWindow 추가

{
   "windows": {
 "customMainPop": {
     "layoutName": "Main",
     "layoutId": "mainPop"
  }
 }
}

5. 결과화면

Picture1.png