웹 페이지 만들기

하이브리드 앱을 개발할 때 웹 페이지를 만들고 액티비티에서 웹 페이지를 여는 방법을 설명한다.

01. 웹 페이지 만들기

다운로드 페이지에서 자바 스크립트(SmartRobot-1.3.1.js)와 템플릿(template-1.3.1.html) 파일을 내려받는다. 내려받은 두 개의 파일은 그림 1과 같이 안드로이드 프로젝트의 assets 폴더에 넣어도 되고 웹 서버에 두어도 된다. 템플릿 파일의 이름은 다른 이름으로 변경하여도 된다.

그림 1. 안드로이드 프로젝트의 assets 폴더

템플릿 파일을 열면 다음과 같이 구성되어 있다. 다양한 함수들이 정의되어 있는데 앞으로 조금씩 배워가도록 하고, 사용하지 않는 함수는 삭제하여도 된다.

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <html>
 <head>
     <script src="SmartRobot-1.3.1.js" type="text/javascript"></script>
 </head>
 <script type="text/javascript">

 function onInitialized(robot)
 {
 }

 function onActivated()
 {
 }

 function onDeactivated()
 {
 }

 function onDisposed()
 {
 }

 function onExecute()
 {
 }

 function onStateChanged(state)
 {
 }

 function onNameChanged(name)
 {
 }

 function onDeviceDataChanged(device, values, timestamp)
 {
 }

 function onActionStateChanged(action, state)
 {
 }

 function onActionCompleted(action)
 {
 }

 function onActionError(action, errorCode)
 {
 }

 function onClipCompleted(clipPlayer)
 {
 }

 function onClipError(clipPlayer, errorCode)
 {
 }
 </script>
 <body>
 </body>
 </html>

02. 웹 페이지 열기

액티비티의 자바 파일을 열면 다음과 같이 되어 있다.

 public class SampleActivity extends Activity
 {
     @Override
     public void onCreate(Bundle savedInstanceState)
     {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.main);
     }
 }

손쉽게 로봇을 움직이기 위해서는 RobotWebActivity 클래스를 상속한 액티비티를 만들고, RobotWebActivity의 getWebView() 메소드를 통해 웹 페이지를 열면 된다. 이때, setContentView(R.layout.main)는 삭제하도록 하자.

HTML 파일이 안드로이드 프로젝트의 assets 폴더에 있는 경우에는 다음과 같이 웹 페이지를 열 수 있다.

 public class SampleActivity extends RobotWebActivity
 {
     @Override
     public void onCreate(Bundle savedInstanceState)
     {
         super.onCreate(savedInstanceState);
		 
         getWebView().loadUrl("file:///android_asset/template.html");
     }
 }

HTML 파일이 스마트 폰의 로컬 폴더에 있는 경우에는, 예를 들어 스마트 폰의 sdcard 폴더에 template.html이 있다면 다음과 같이 웹 페이지를 열 수 있다.

 public class SampleActivity extends RobotWebActivity
 {
     @Override
     public void onCreate(Bundle savedInstanceState)
     {
         super.onCreate(savedInstanceState);
		 
         getWebView().loadUrl("file:///sdcard/template.html");
     }
 }

HTML 파일이 웹 서버에 있는 경우에는 다음과 같이 웹 페이지를 열 수 있다.

 public class SampleActivity extends RobotWebActivity
 {
     @Override
     public void onCreate(Bundle savedInstanceState)
     {
         super.onCreate(savedInstanceState);
		 
         getWebView().loadUrl("http://your.url/template.html");
     }
 }