04. Window 개발

Contents

HONE Smart Platform 은 앱 화면을 구성하기 위한 윈도우 구현을 위해  WindowBase, PopupWindowBase, WebWindowBase, WebPopupWindowBase 4종류의 클래스를 제공 한다.

앱은 기본적으로 하나의 Activity로 동작하며, Activity에 기본 설정된 RootView(View) 또는 사용자가 새롭게 생성한 RootView(View) 위에서 각 Window들이 교체되는 방식으로 앱 화면을 구현할 수 있다.  

Native 형태의 Window 개발

추가하고자 하는 Window의 종류에 따라 상속받는 Class를 선택하여 개발한다.

MyNativeWindow

honemobile.client.window.interfaces.WindowBase 클래스를 상속 받아 생성 한다.

Example

class MyNaitveWindow(context: Context, wm: WindowService) : WindowBase(context, wm) {
    init {
        val li = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
        li.inflate(R.layout.my_native_window_layout, this, true)
   }
}
public class MyNaitveWindow extends WindowBase {
   public MyNaitveWindow(Context context, WindowService wm) {
       super(context, wm);

        LayoutInflater li = (LayoutInflater)context.getSystemService(
                                                       Context.LAYOUT_INFLATER_SERVICE);
        li.inflate(R.layout.my_native_window_layout, this, true);
   }
}

MyNativePopupWindow

honemobile.client.window.interfaces.PopupWindowBase 클래스를 상속 받아 생성 한다.

Example

class MyNativePopupWindow(
    context: Context,
    wm: WindowService
) : PopupWindowBase(context, wm), View.OnClickListener {
    init {
        setContentView(R.layout.custom_popup_layout)
        setFullscreen()

        mDialog.findViewById<View>(R.id.ok).setOnClickListener(this)
        mDialog.findViewById<View>(R.id.cancel).setOnClickListener(this)
   }

    override fun onClick(v: View) {
        mSuccessCallback?.run {
            when (v.id) {
                R.id.ok     -> onResult(OnResultListener.TRUE)
                R.id.cancel -> onResult(OnResultListener.FALSE)
           }
       }
   }
}
public class MyNativePopupWindow extends PopupWindowBase implements View.OnClickListener {
   public MyNativePopupWindow(final Context context, WindowService wm) {
       super(context, wm);
        setContentView(R.layout.custom_popup_layout);
        setFullscreen();

        mDialog.findViewById(R.id.ok).setOnClickListener(this);
        mDialog.findViewById(R.id.cancel).setOnClickListener(this);
   }

   @Override
   public void onClick(View v) {
       if (mSuccessCallback == null) {
           return ;
       }

       switch (v.getId()) {
           case R.id.ok:
                mSuccessCallback.onResult(OnResultListener.TRUE);
               break;
           case R.id.cancel:
                mSuccessCallback.onResult(OnResultListener.FALSE);
               break;
       }
   }    
}

Layout XML


<RelativeLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="HELLO WORLD"
       android:layout_centerVertical="true"
       android:layout_centerHorizontal="true"
       android:id="@+id/textView3"/>

   <Button
       android:id="@+id/ok"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="ok"
       android:layout_alignParentBottom="true"
       android:layout_toRightOf="@+id/textView3"
       android:layout_toEndOf="@+id/textView3"/>

   <Button
       android:id="@+id/cancel"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="cancel"
       android:layout_alignParentBottom="true"
       android:layout_toLeftOf="@+id/textView3"
       android:layout_toStartOf="@+id/textView3"/>

</RelativeLayout>

MyWebWindow

honemobile.client.window.interfaces.WebWindowBase 클래스를 상속받아 생성 한다.

Example

class MyWebWindow(
    context: Context,
    wm: WindowService
) : WebWindowBase(context, wm) {
    init {
//        mWebView.apply {
//            webViewClient   = object: HoneMobileWebViewClient(context) {
//                // TODO
//            }
//            webChromeClient = object: HoneMobileWebChromeClient(context) {
//                // TODO
//            }
//        }
    }
}
public class MyWebWindow extends WebWindowBase {
   public MyWebWindow(Context context, WindowService wm) {
       super(context, wm);

       // TODO
        
//        mWebView.setWebViewClient(new HoneMobileWebViewClient(context) {
//            // TODO
//        });

//        mWebView.setWebChromeClient(new HoneMobileWebChromeClient(context) {
//            // TODO
//        });
    }
}

MyWebPopupWindow

honemobile.client.window.interfaces.WebPopupWindowBase 클래스를 상속받아 생성 한다.

Example

class MyWebPopupWindow(context: Context, wm: WindowService)
   : WebPopupWindowBase(context, wm) {
    init {
       // TODO
    }
}
public class MyWebPopupWindow extends WebPopupWindowBase {
   public MyWebPopupWindow(final Context context, WindowService wm) {
       super(context, wm);

       // TODO
    }
}

window.json 내 Custom Window 추가

앱 시동 시 해당 Window의 인스턴스를 생성하기 위해 window.json 파일에 Window정보를 추가 한다.

Example

{
   "windows": {
       "myWebWindow": {
           "className": "honemobile.client.window.MyWebWindow"
        },
       "myWebPopupWindow": {
           "className": "honemobile.client.window.MyWebPopupWindow"
        },
       "myWindow": {
           "className": "honemobile.client.window.MyWindow"
        },
       "myPopupWindow": {
           "className": "honemobile.client.window.MyPopupWindow"
        }
    }
}

Window 이동

윈도우를 이동하기 위해서는 WindowParams 을 이용해 인자 값을 설정해 전달하면 윈도우를 이동할 수 있다. 

WindowParams 는 Builder 패턴을 이용하여고 있고 지정할 수 있는 옵션은 아래와 같다. 

  1. animation 사용 옵션 
  2. 오픈할 특정 URL 경로
  3. 대상 윈도우 이름
  4. 윈도우에 전달할 파라메터 값

 

비즈앱 런처

앱이 구동 시 화면에 표현되는 앱을 BizApp Launcher 라고 한다.

비즈앱 런처 설정 하기

HONE Smart Platform 내부에서 처리하기는 하나 사용자가 커스텀 하여 비즈앱 런처를 호출하기 위한 예를 설명 한다. (윈도우 이름을 설정해서 launcher() 를 호출하면 된다.)

Example

DAPWindow.showWindow(WindowParams.builder()
   .launcher()
   .windowName("customWebWindow")
   .build())
DAPWindow.showWindow(WindowParams.builder()
   .launcher()
   .windowName("customWebWindow")
   .build());

비즈앱의 경로 이동

비즈앱의 경로로 이동하기 위해서는 윈도우 이름과 보여줄 비즈앱의 root폴더 기준 절대경로를 WindowParams 에 설정하면 된다. (WindowParams 내에서 bizapp 경로에 해당하는 url 을 내부적으로 반환 한다.)

 

Example

DAPWindow.showWindow(WindowParams.builder()
   .url("index.html")
   .windowName("customWebWindow")
   .build())
DAPWindow.showWindow(WindowParams.builder()
   .url("index.html")
   .windowName("customWebWindow")
   .build());

특정 URL 로 이동

특정 URL 로 이동하려면 윈도우 이름과 url 을 설정하면 된다.

Example

DAPWindow.showWindow(WindowParams.builder()
   .url("http://hsnc.co.kr")
   .windowName("customWebWindow")
   .build())
DAPWindow.showWindow(WindowParams.builder()
   .url("http://hsnc.co.kr")
   .windowName("customWebWindow")
   .build());

Animation

HSP 에서 윈도우간 이동을 할 때 동적인 화면을 제공하기 위해 Animation 기능을 제공 한다. WindowParams 에 animated method 를 이용하여 사용할 수 있으며 HSP 에서는 내장되어 있는 애니메이션 리소스를 통해 화면을 제공한다.

Example

DAPWindow.showWindow(WindowParams.builder()
   .url("http://hsnc.co.kr")
   .windowName("customWebWindow")
   .animated(true)
   .build())
DAPWindow.showWindow(WindowParams.builder()
   .url("http://hsnc.co.kr")
   .windowName("customWebWindow")
   .animated(true)
   .build());

Window 애니메이션 XML 변경

만약 사용자가 커스텀 애니메이션 리소스를 이용해야 할 경우 애니메이션 리소스 아이디를 변경하여 사용할 수 있도록 WindowBase 에 method 를 제공 하며 그 예는 아래와 같다. 

Example

override fun showAnimationId() =
    R.anim.hone_from_left_to_center

override fun hideAnimationId() =
    R.anim.hone_from_center_to_left
@Override
protected int showAnimationId() {
   return R.anim.hone_from_bottom_to_center;
}

@Override
public int hideAnimationId() {
   return R.anim.hone_from_center_to_bottom;
}

PopupWindow 애니메이션 XML 변경

만약 사용자가 커스텀 애니메이션 리소스를 이용해야 할 경우 애니메이션 리소스 아이디를 변경하여 사용할 수 있도록 PopupWindowBase 에 method 를 제공 하며 그 예는 아래와 같다. 

Example

override fun windowAnimationId() =
    R.style.HoneDialogAnimationFromBottom
@Override
protected int windowAnimationId() {
   return R.style.HoneDialogAnimationFromBottom;
}