'Eclipse' 태그의 글 목록

'Eclipse'에 해당되는 글 2건

PhoneGap2012. 5. 13. 11:20

PhoneGap-1.7.0(Cordova) Eclipse Helios Mac용 Android Tutorial Example

PhoneGap-1.7.0(Cordova) Eclipse Helios Mac용 Android Tutorial Example

네이버 카페 : http://cafe.naver.com/mobilewebapp/534

다음 이미지와 같은 예제를 만들 것이다. 지금 작성하는 모든 내용은 Cordova 사이트에 있다.
이클립스(Helios)를 실행한다.
안드로이드 프로젝트를 생성한다.

다음 화면에서 프로젝트명을 다음과 같이 입력 한다. 그리고 Next 버튼을 클릭 한다.

        : Proejct Name - cordovaExample
        : Create new project in workspace 를 선택한다.
        : Use default location 을 체크한다.

다음 이미지와 같이 안드로이드 버전을 체크 한다.

지금부터 실습하는 내용은 폰에서 테스트 해야 하므로 되도록 사용 하고 있는 안드로이드 버전을 선택 하십시오.

지금 제작 하는 본인의 경우는 갤럭스 S2 아이스크림 버전이므로 화면과 같이 Android 4.0.3 을 선택 하였다.

그리고 Next 버튼을 클릭 하여 다음 단계로 넘어 간다.

이번 단계에서는 프로젝트의 기본적인 사항을 셋팅 할 차례이다.

입력할 내용은 다음과 같다.

: Application Name - CordovaExample

: Package Name - com.yaio.example

: Create Activity 를 체크 한다.

: Minimum SDK를 15로 선택 한다.

위와 같이 입력 하고 Finish 버튼을 클릭 하여 프로젝트 생성을 마무리 한다.

다음 이미지는 프로젝트 생성이 완료된 상태의 전체 구성이다.

PhoneGap-1.7.0(Cordova)를 프로젝트 셋팅.
- 이 전에 미리 실습을 하였던 방법과 같은 방법으로 Cordova의 파일을 프로젝트에 추가 한다.

- 추가된 내용을 포함한 프로젝트 전체 구성은 다음 이미지와 같다.
프로젝트 코딩 및 실행.

- 우선 AndroidManifest.xml 파일을 폰에서 사용할 수 있도록 퍼미션 부분등 몇 가지를 추가한다.

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.yaio.example"

android:versionCode="1"

android:versionName="1.0" >

<uses-sdk android:minSdkVersion="15" />

<supports-screens

android:largeScreens="true"

android:normalScreens="true"

android:smallScreens="true"

android:resizeable="true"

android:anyDensity="true" />

<uses-permission android:name="android.permission.CAMERA" />

<uses-permission android:name="android.permission.VIBRATE" />

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />

<uses-permission android:name="android.permission.READ_PHONE_STATE" />

<uses-permission android:name="android.permission.INTERNET" />

<uses-permission android:name="android.permission.RECEIVE_SMS" />

<uses-permission android:name="android.permission.RECORD_AUDIO" />

<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

<uses-permission android:name="android.permission.READ_CONTACTS" />

<uses-permission android:name="android.permission.WRITE_CONTACTS" />

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

<uses-permission android:name="android.permission.GET_ACCOUNTS" />

<uses-permission android:name="android.permission.BROADCAST_STICKY" />

<application

android:icon="@drawable/ic_launcher"

android:label="@string/app_name" >

<activity

android:name=".CordovaExampleActivity"

android:label="@string/app_name"

android:configChanges="orientation|keyboardHidden" >

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

자, 이번에는 index.html 파일을 만들어 보자.

다음 이미지에서의 방법과 같이 파일을 하나 생성하는 팝업창을 띄운다.

팝업창에서 index.html 파일명을 입력 하고 Finish 버튼을 클릭 한다.

프로젝트 생성을 하기 이전 실제 실행된 이미지를 처음에 봤다. 그와 같은 화면 구성을 하기 위해 CSS 를 먼저 만들어 보겠다.

CSS 파일을 생성 하는 방법도 위와 같은 방법으로 진행을 하면 된다.

새롭게 생성 하는 파일명을 master.css 로 한다. 그리고 내용을 다음과 같이 추가 한다.

body {

background:#222 none repeat scroll 0 0;

color:#666;

font-family:Helvetica;

font-size:72%;

line-height:1.5em;

margin:0;

border-top:1px solid #393939;

}

#info{

background:#ffa;

border: 1px solid #ffd324;

-webkit-border-radius: 5px;

border-radius: 5px;

clear:both;

margin:15px 6px 0;

width:295px;

padding:4px 0px 2px 10px;

}

#info > h4{

font-size:.95em;

margin:5px 0;

}

#stage.theme{

padding-top:3px;

}

/* Definition List */

#stage.theme > dl{

padding-top:10px;

clear:both;

margin:0;

list-style-type:none;

padding-left:10px;

overflow:auto;

}

#stage.theme > dl > dt{

font-weight:bold;

float:left;

margin-left:5px;

}

#stage.theme > dl > dd{

width:45px;

float:left;

color:#a87;

font-weight:bold;

}

/* Content Styling */

#stage.theme > h1, #stage.theme > h2, #stage.theme > p{

margin:1em 0 .5em 13px;

}

#stage.theme > h1{

color:#eee;

font-size:1.6em;

text-align:center;

margin:0;

margin-top:15px;

padding:0;

}

#stage.theme > h2{

clear:both;

margin:0;

padding:3px;

font-size:1em;

text-align:center;

}

/* Stage Buttons */

#stage.theme a.btn{

border: 1px solid #555;

-webkit-border-radius: 5px;

border-radius: 5px;

text-align:center;

display:block;

float:left;

background:#444;

width:150px;

color:#9ab;

font-size:1.1em;

text-decoration:none;

padding:1.2em 0;

margin:3px 0px 3px 5px;

}

#stage.theme a.btn.large{

width:308px;

padding:1.2em 0;

}

자, 이번에는 위에서 생성한 index.html 파일을 코딩을 하자. 다음의 내용을 그대로 복사해서 붙여 넣기를 한다.

<!DOCTYPE HTML>

<html>

<head>

<title>PhoneGap</title>

</head>

<h1>Welcome to Cordova!</h1>

<h2>this file is located at assets/www/index.html</h2>

<h4>Platform: <span id="platform">  </span>, Version: <span id="version"> </span></h4>

<h4>Width: <span id="width">  </span>, Height: <span id="height"> 

</span>, Color Depth: <span id="colorDepth"></span></h4>

</div>

</dl>

<a href="#" class="btn large" onclick="toggleAccel();">Toggle Accelerometer</a>

<a href="#" class="btn large" onclick="getLocation();">Get Location</a>

<a href="#" class="btn large" onclick="vibrate();">Vibrate</a>

<a href="#" class="btn large" onclick="show_pic();">Get a Picture</a>

<a href="#" class="btn large" onclick="get_contacts();return false;">Get Phone's Contacts</a>

<a href="#" class="btn large" onclick="check_network();return false;">Check Network</a>

<dl>

<dt>Compass Heading:</dt><dd id="h">Off</dd>

</dl>

<a href="#" class="btn large" onclick="toggleCompass();return false;">Toggle Compass</a>

</div>

</body>

</html>

자, index.html 과 master.css 파일을 생성 하고 소스 코딩을 하였다. index.html 파일의 내용을 보면 onClick에 해당 하는 각종 자바스크립트 함수가 있으며, 상단에 다음과 같은 자바스크립트 파일을 포함하고 있다.

<script type="text/javascript" charset="utf-8" src="main.js"></script>

이제는 main.js 파일을 새롭게 생성 하고 그 안에 소스 코딩을 해 봅시다.

main.js 파일도 위에서 생성한 방법과 마찬가지로 생성 하고 다음과 같이 소스를 코딩 한다.

var deviceInfo = function() {

document.getElementById("platform").innerHTML = device.platform;

document.getElementById("version").innerHTML = device.version;

document.getElementById("uuid").innerHTML = device.uuid;

document.getElementById("name").innerHTML = device.name;

document.getElementById("width").innerHTML = screen.width;

document.getElementById("height").innerHTML = screen.height;

document.getElementById("colorDepth").innerHTML = screen.colorDepth;

};

var getLocation = function() {

var suc = function(p) {

alert(p.coords.latitude + " " + p.coords.longitude);

};

var locFail = function() {

};

navigator.geolocation.getCurrentPosition(suc, locFail);

};

var beep = function() {

navigator.notification.beep(2);

};

var vibrate = function() {

navigator.notification.vibrate(0);

};

function roundNumber(num) {

var dec = 3;

var result = Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);

return result;

}

var accelerationWatch = null;

function updateAcceleration(a) {

document.getElementById('x').innerHTML = roundNumber(a.x);

document.getElementById('y').innerHTML = roundNumber(a.y);

document.getElementById('z').innerHTML = roundNumber(a.z);

}

var toggleAccel = function() {

if (accelerationWatch !== null) {

navigator.accelerometer.clearWatch(accelerationWatch);

updateAcceleration({

x : "",

y : "",

z : ""

});

accelerationWatch = null;

} else {

var options = {};

options.frequency = 1000;

accelerationWatch = navigator.accelerometer.watchAcceleration(

updateAcceleration, function(ex) {

alert("accel fail (" + ex.name + ": " + ex.message + ")");

}, options);

}

};

var preventBehavior = function(e) {

e.preventDefault();

};

function dump_pic(data) {

var viewport = document.getElementById('viewport');

console.log(data);

viewport.style.display = "";

viewport.style.position = "absolute";

viewport.style.top = "10px";

viewport.style.left = "10px";

document.getElementById("test_img").src = "data:image/jpeg;base64," + data;

}

function fail(msg) {

alert(msg);

}

function show_pic() {

navigator.camera.getPicture(dump_pic, fail, {

quality : 50

});

}

function close() {

var viewport = document.getElementById('viewport');

viewport.style.position = "relative";

viewport.style.display = "none";

}

function contacts_success(contacts) {

alert(contacts.length

+ ' contacts returned.'

+ (contacts[2] && contacts[2].name ? (' Third contact is ' + contacts[2].name.formatted)

: ''));

}

function get_contacts() {

var obj = new ContactFindOptions();

obj.filter = "";

obj.multiple = true;

navigator.contacts.find(

[ "displayName", "name" ], contacts_success,

fail, obj);

}

function check_network() {

var networkState = navigator.network.connection.type;

var states = {};

states[Connection.UNKNOWN] = 'Unknown connection';

states[Connection.ETHERNET] = 'Ethernet connection';

states[Connection.WIFI] = 'WiFi connection';

states[Connection.CELL_2G] = 'Cell 2G connection';

states[Connection.CELL_3G] = 'Cell 3G connection';

states[Connection.CELL_4G] = 'Cell 4G connection';

states[Connection.NONE] = 'No network connection';

confirm('Connection type:\n ' + states[networkState]);

}

var watchID = null;

function updateHeading(h) {

document.getElementById('h').innerHTML = h.magneticHeading;

}

function toggleCompass() {

if (watchID !== null) {

navigator.compass.clearWatch(watchID);

watchID = null;

updateHeading({ magneticHeading : "Off"});

} else {

var options = { frequency: 1000 };

watchID = navigator.compass.watchHeading(updateHeading, function(e) {

alert('Compass Error: ' + e.code);

}, options);

}

function init() {

// the next line makes it impossible to see Contacts on the HTC Evo since it

// doesn't have a scroll button

// document.addEventListener("touchmove", preventBehavior, false);

document.addEventListener("deviceready", deviceInfo, true);

}

이제까지는 html, css, js 관련된 코딩을 마무리 하였다.

생성된 모든 폴더와 파일 구조는 다음 이미지와 같다. 지금까지 따라한 내용과 잘 맞는지를 확인해 보세요.

마지막으로 앱을 실행 하면 index.html 이 자동으로 실행이 되도록 CordovaExampleActivity.js 파일을 수정할 차례이다.

CordovaExampleActivity.js 파일은 위의 이미지에서와 같은 위치에 있다. 파일을 더블 클릭 하여 다음과 같이 수정을 한다.

package com.yaio.example;

import android.app.Activity;

import android.os.Bundle;

// public class CordovaExampleActivity extends Activity {

public class CordovaExampleActivity extends DroidGap {

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

// setContentView(R.layout.main);

super.loadUrl("file:///android_asset/www/index.html");

}

그러면 아래의 이미지처럼 에러 표시가 날 것이다. 이런 에러는 import가 안 되어서 그런 것이니 키보를 다음과 같이 눌러 해당 하는 모듈을 import 하여 에러가 없어 지도록 합시다.

COMMAND + SHIFT + O - 필요한 모듈 자동 import 키보드 단축키.

다음 이미지는 에러가 없어진 상태의 소스 코드 이다.

자, 실제 모든 작업이 완료 되었다. 이제는 모든 것을 저장 하고 실행을 해 보도록 합시다.

앞으로 우리가 하나 씩 찾아 볼 Cordova에서 제공 하는 함수들을 알아 보기 이전에 전체적인 내용이 들어간 간단한 예제를 한 것이다.

정확히 어떤 것이 어떤 역활을 하는지 대하여 여기서 설명을 하지 않겠다. 단지, 하이브드리앱 개발을 시작 하기 이전에 Cordova에서 제공 하는 것들을 간단하게 경험을 할 뿐이다.

다음에 보여 주는 이미지들은 갤럭시 S2에서 실행한 화면을 캡쳐한 내용이다.

일부 캡쳐를 할 수 없는 것도 있지만 참고 하시기를 바란다.

위의 이미지는 다시 한번 말씀 드리지만, 갤럭시 S2에서 실행한 화면들이다.

아이폰용은 폰이 준비 되는 데로 테스트 하여 올려 드리겠습니다.

다음 시간에는 Cordova 에서 제공 하는 각 함수를 천천히 살펴 보기로 하자.

다음 내용은 Cordova에서 제공 하는 기능들이다.

Accelerometer
Camera
Capture
Compass
Connection
Contacts
Device
Events
File
Geolocation
Media
Notification
Storage

프로필.
소속: (주)애드웹커뮤니케이션

부서 : 개발팀

직위: 팀장

이름 : 안병도(꼬장)

메일 : yaio@naver.com,
yaioyaio@gmail.com,
program@adweb.co.kr

네이버카페 : http://cafe.naver.com/mobilewebapp

트위터 : @yaioyaio

페이스북 : http://www.facebook.com/byoungdo.ahn
페이스북그룹 : http://www.facebook.com/groups/korea.sencha/

워드프레스: http://yaioyaio.wordpress.com/
티스토리 : http://senchatouch.tistory.com/

저작자표시 비영리 동일조건 (새창열림)

'PhoneGap' 카테고리의 다른 글

PhoneGap-1.7.0(Cordova) Xcode 4.2 iOS Tutorial Example (0)	2012.05.13
PhoneGap-1.7.0(Cordova) XCode 4.2 iOS Tutorial 기본 사용법 (0)	2012.05.13
PhoneGap-1.7.0(Cordova) Eclipse Helios Mac용 Android Tutorial 기본 사용법 (0)	2012.05.13

Posted by yaioyaio

PhoneGap2012. 5. 13. 11:17

PhoneGap-1.7.0(Cordova) Eclipse Helios Mac용 Android Tutorial 기본 사용법

PhoneGap-1.7.0(Cordova) Eclipse Helios Mac용 Android Tutorial 기본 사용법

네이버카페 : http://cafe.naver.com/mobilewebapp/532

phonegap-1.7.0(Cordova)을 사용 하기 위한 요구 사항.
- 이클립스 3.4 이상 버전.(Helios, Indigo)
Install SDK + PhoneGap-1.7.0(Cordova)
- Eclipse Classic.
        : http://www.eclipse.org/downloads/
        : 다운로드 및 설치.(설치는 압축을 해제 하는 것으로 끝난다.)

- Android SDK.
        : http://developer.android.com/sdk/index.html
        : 다운로드 및 설치.

- ADT Plugin.
        : http://developer.android.com/sdk/eclipse-adt.html#installing
        : 다운로드 및 설치.

- PhoneGap-1.7.0(Cordova)
        : http://phonegap.com/download
        : 위의 주소에서 phonegap 관련 자료를 다운로드 받자.
         다음 이미지와 같이 다운로드 폴더에 있을 겁니다. 다운로드 받은 파일의 압축을 해제 한다.


        : 압축을 해제한 다음 폴더의 내용을 계속해서 사용을 할 것이니 잘 정리해서 보관해 두자. 다음과 같은 형태의 폴더 구조를 볼 수 있다.
PhoneGap-1.7.0(Cordova) New Project.

- 위의 4가지 사항은 별도로 구글링을 하면 아주 자세히 나와 있다. 조금 시간이 걸리는 작업 이지만 천천히 인내를 가지고 작업해 보시기를 바랍니다.

- 이클립스를 실행하자.
- New > Android Proejct를 클릭 한다.

- 다음 그림과 같이 프로젝트명등 필요한 정보를 입력 하자.
        : 프로젝트명을 HelloCordova 로 입력 한다.
        : Create new project in workspace 를 체크 한다.
        : use default location 도 같이 체크 한다.
        : 하단의 Next 버튼을 클릭 한다.

- 다음 이미지에서 보이는 것처럼 최신 안드로이드 버전인 Android 4.0.3 을 체크 한다. 그리고 Next 버튼을 클릭 하고 다음으로 넘어 간다.

- 다음 이미지와 같이 내용을 입력 및 수정 한다.
        : Application Name - HelloCordova 를 입력한다.
        : Package Name - com.yaio.Hello 를 입력한다.
        : Create Activity 를 체크 한다. 이름은 그대로 사용한다.
        : Minimum SDK 15로 그대로 사용한다.
        : Finish 버튼을 클릭 하여 셋팅을 마무리 한다.

- 이제 기본적으로 프로젝트의 셋팅을 완료 하였다. 다음 차례는 실제 작업에 필요한 정보를 정리할 단계이다.
프로젝트에 필요한 PhoneGap-1.7.0(Cordova) 셋팅.
- 이 단계에서는 앞으로 코딩을 하고 앱으로 제작하기 위한 기본적인 작업을 할 차례이다.
- 위에서 생성한 프로젝트에 2가지 폴더를 생성할 것이다.
: /libs, /assets/www
- 다음 그림과 같이 프로젝트를 선택 하고 마우스 오른쪽 버튼을 클릭하여 찾아 간다.

- 하단의 Floder name 이라는 빈 칸에 “libs”라고 입력 하고 Finish를 클릭한다.

- 이 번에는 “/assets/www” 폴더를 생성할 것이다. 위와 같은 방법으로 폴더를 생성한다.
방법은 다음 이미지와 같이 따라 하면 된다.

- 폴더명을 다음 이미지와 같이 입력을 하고 Finish를 클릭 하여 완료 한다.

- 폴더 생성을 완료 하였다. 다음은 생성한 폴더에 phonegap 코딩 작업에 필요한 파일을 옮겨 놓을 차례이다.

- 방법은 이미지와 같은 방법을 따라 하시면 된다.
이클립스 프로젝트 화면 상태에서 그대로 진행을 하시면 됩니다.

- 먼저 다운로드 받아서 옮겨 놓은 Finder를 찾아서 cordova-1.7.0.jar 파일을 프로젝트의 libs 폴더에 마우스로 끌어 옮겨 놓는다.

- 이 번에는 cordova-1.7.0.js 자바스크립트 파일을 마우스로 끌어서 프로젝트의 assets/www 폴더에 옮겨 놓는다.

- 마지막으로 다음 그림과 같이 xml 폴더를 프로젝트의 /res 폴더에 옮겨 놓을 차례이다. 그림과 같이 마우스로 끌어서 옮겨 놓는다.

- 작업에 필요한 파일은 모두 옮겨 놓았다. 개발에 필요한 파일을 옮겨 놓은 전체 구조는 다음 이미지와 같다.

지금까지 따라한 내용과 일치 하는지 확인을 다시 해 보시고 틀린 곳이 있으면 수정 하시기를 바랍니다.

- 이 번에는 cordova-1.7.0.jar 파일을 사용 가능하도록 Android Dependencies에 등록을 시킬 차례이다.

다음 그림처럼 프로젝트를 마우스로 오른쪽 버튼 클릭 한 다음 Build Path를 클릭 한다.

다음은 Configure Build Path... 를 클릭 한다.

다음은 해당 하는 탭에서 “Add JARs...” 버튼을 클릭한다.

다음은 팝업창에서 이전에 작업한 cordova-1.7.0.jar 파일을 찾아서 OK 버튼을 클릭한다.

지금까지 작업한 결과는 다음 이미지와 같이 보일 것이다.
프로젝트 코딩 및 앱 실행.
- 지금까지는 코딩 및 실행을 하기 위한 사전 작업을 마무리 하였다. 이제는 실제 코딩을 간단하게 해 볼 차례이다.

- 우선 src/com.yaio.Hello 폴더에 있는 HelloCordovaActivity.java 파이을 열어 보자.
내용은 다음과 같이 되어 있다.

- 위의 내용을 다음과 같이 수정을 할 것이다.

package com.yaio.Hello;

import org.apache.cordova.DroidGap;

import android.os.Bundle;

public class HelloCordovaActivity extends DroidGap {

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

// setContentView(R.layout.main);

super.loadUrl("file:///android_asset/www/index.html");

}

- 다음은 안드로이드용 AndroidManifest.xml 파일을 수정할 차례이다.

이 AndroidManifest.xml 파일에는 앱이 실행하는데 필요한 기본적인 정보들이 셋팅 되어 있다.

물론 앱이 실행 되어질때 퍼미션 관련한 내용도 같이 정해 주고, 단말기의 회전 여부에 따라 앱의 화면도 변경 될 것인지를 설정 하는 부분도 있다.

다음 이미지는 AndroidManifest.xml  파일의 기본 소스이다.


        위와 같은 내용을 다음과 같이 수정을 할 것이다.

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.yaio.Hello"