developerWorks에 처음 로그인하면 developerWorks프로파일이 생성됩니다.귀하의 프로파일에서 동의하신 내용이 공개되지만 이 사항은 언제든지 변경 가능합니다. 귀하의 성명(숨김으로 체크되어 있어도 표시됩니다)과 디스플레이 이름은 게시한 컨텐츠나 사이트 엑세스시 표시됩니다.

모든 정보가 안전하게 전송되었습니다.

처음 developerWorks에 로그인할 때 프로파일이 작성되므로, 이를 위해 디스플레이 이름을 선택해야 합니다. 선택하신 디스플레이 이름은 developerWorks에 게시한 컨텐츠에 표시됩니다.

3글자 이상 31글자 이하의 길이로 사용 가능합니다. dW커뮤니티 내에서는 보안상 이메일주소를 제외한 다른 이름을 지정하셔야 합니다.

모든 정보가 안전하게 전송되었습니다.

My developerWorks：

나의 통지：

로그아웃

언어 선택：

Dojo Mobile 1.6 시작하기

버전 1.7의 새 기능 확인하기

Joe Lennon, 모바일관련 개발자, Core International

Joe Lennon은 소프트웨어 개발자로 24살이며 아일랜드 코크에 살고 있다. Joe Lennon은 Beginning CouchDB의 저자이며, 이 책은 Apress에서 출간될 예정이다. 그는 여러 개의 기술 관련 기사와 튜토리얼을 IBM developerWorks에 기고했다. 한가로운 때에는 축구를 하거나 가젯을 조작하며 Xbox 360 게이머 점수를 높이기 위해 노력한다. 그의 웹 사이트 주소는 www.joelennon.ie이다.

요약： Dojo Toolkit의 확장 모바일 웹 개발 프레임워크인 Dojo Mobile에 관해 자세히 배웁니다. 실용적인 예제를 사용하여, Dojo Mobile 위젯과 컴포넌트를 애플리케이션에 삽입하고 사용하는 방법을 배웁니다. PhoneGap을 사용하여 기본 애플리케이션으로 웹 애플리케이션을 둘러싸는 방법을 알아봅니다. 또한, 이 기사에서는 이 프레임워크의 다음 버전에 새로 추가될 일부 기능을 미리 살펴봅니다.

여기에 태그 달기!

기사 게재일： 2011 년 8 월 31 일
난이도： 중급
원문： 보기
PDF： A4 and Letter (339KB | 29 pages)Get Adobe® Reader®
페이지뷰： 1654 회
의견：

소개

모바일 웹의 사용량이 기하급수적으로 증가하고 있다. 스마트폰이나 기타 모바일 디바이스를 사용하여 웹을 검색하고 사용하는 사람들이 증가하면서 모바일 환경에 최적화된 웹 사이트와 웹 애플리케이션에 대한 필요성이 증가하고 있다. 플랫폼(iOS, Android, Blackberry OS, webOS, Windows Phone, Symbian, Bada 등) 수가 증가함에 따라 둘 이상의 모바일 운영 체제를 대상으로 하는 기본 애플리케이션을 개발하기가 어려워졌다.

모바일 웹 애플리케이션 개발 도구에 대한 필요성도 급격히 증가했다. 몇 가지 중요한 Javascript 프레임워크(Dojo, jQuery 및 Sencha)에는 완전한 터치 인식 프레임워크가 신속하게 도입되었다. 이러한 프레임워크를 PhoneGap과 같은 기본 편집 툴킷과 결합하여 사용하면 기본적인 개발 과정을 대체할 수 있는 우수한 방식을 활용할 수 있다. 웹 개발자들은 그들이 이미 알고 있는 언어와 프레임워크를 사용하여 기본 애플리케이션을 빌드할 수 있을 뿐만 아니라 비교적 쉽게 다양한 플랫폼에 배치할 수 있다.

이 기사에서는 Dojo Toolkit의 확장인 Dojo Mobile에 관해 배운다. 모바일 웹과 기본 애플리케이션 간의 차이점을 탐색한 후에는 Dojo Mobile 위젯을 애플리케이션에 삽입하여 사용하는 방법을 예제를 통해 살펴본다. 또한, PhoneGap을 사용하여 기본 애플리케이션을 빌드하는 방법을 배운다. 이 기사에서 사용한 소스 코드를 다운로드할 수 있다.

위로

모바일 웹 Vs. 기본 애플리케이션

기본 애플리케이션을 사용하여 모바일 애플리케이션을 개발하는 방법과 웹 플랫폼을 사용하여 개발하는 방법과 관련된 논쟁은 오랫동안 계속될 것이다. 이러한 방식에는 각기 장단점이 있다. 일반적으로 애플리케이션의 요구사항과 개인적 선호도에 따라 선택 방식이 결정된다.

모바일 웹 플랫폼을 사용하는 대신 기본 애플리케이션을 작성하는 이유는 무엇일까? 표 1에는 기본 애플리케이션을 작성하는 데 따른 장단점이 표시되어 있다.

표 1. 기본 애플리케이션

장점	단점
코드가 더 빨라지며 중간에 브라우저 애플리케이션을 사용하지 않고도 해당 디바이스의 운영 체제에서 코드를 직접 실행할 수 있다.	다양한 플랫폼 SDK에 있는 API와 프로그래밍 언어 간의 차이로 인해 다양한 디바이스를 대상으로 하려면 완전히 분리된 동일한 애플리케이션 버전이 필요하다.
애플리케이션 저장소에 배치할 수 있고, 간단하고 비용 면에서 효과적인 분산 모델을 제공할 수 있다.	일반적으로 애플리케이션 저장소를 통해 기본 애플리케이션을 배치하려면 써드파티의 승인을 받아야 하기 때문에 애플리케이션이 시장에 나오는 데 걸리는 시간이 상당히 느려질 수 있으며, 특히 해당 애플리케이션이 거부되는 경우에는 더욱 그러하다.
기본 SDK에는 해당 디바이스에 특화된 수많은 기능이 있고 자세한 문서와 예제가 일반적으로 포함되어 있다.	일부라도 업데이트를 하려면 승인 프로세스를 거쳐야 하기 때문에 중요한 업데이트를 사용자에게 전달하기가 더 어렵다.

모바일 웹 애플리케이션의 장단점은 표 2에 표시되어 있다.

표 2. 모바일 웹 애플리케이션

장점	단점
다수의 플랫폼을 대상으로 하는 하나의 애플리케이션을 작성할 수 있다. 디바이스마다 별도의 애플리케이션이 필요하지 않다.	웹에 분산되어 브라우저를 통해 사용되는 애플리케이션은 기본 애플리케이션이 수행하는 많은 디바이스 기능(카메라, 마이크 등)에 액세스할 수 없다. 그렇지만, 미래에는 이 점이 개선될 것이다.
배포를 위해 써드파티 저장소를 사용하지 않고도 애플리케이션을 웹에 배치할 수 있다.	애플리케이션을 배포하는 데 필요한 인프라를 제공해야 하기 때문에 애플리케이션 저장소를 사용하는 것보다 더 어렵고 비용이 더 들어간다.
애플리케이션에 비용을 부과하는 경우에는 애플리케이션을 통해 계속 수입을 얻을 수 있다.	애플리케이션이 운영 체제 자체에서 실행되지 않고 브라우저에서 렌더링되기 때문에 모바일 웹 애플리케이션은 결코 해당 기본 애플리케이션만큼 빠르게 실행되지 않는다.

다행히도 모바일 웹 방식과 기본 애플리케이션 방식의 장점만을 취하는 절충안이 있다. PhoneGap과 같은 플랫폼을 사용하는 경우에는 모바일 웹 애플리케이션을 취하여 이 애플리케이션을 기본 랩퍼로 둘러싸서 기본 디바이스 API에 액세스하는 데 사용할 수 있는 Javascript API를 제공한다. 또한, 웹 애플리케이션을 기본 애플리케이션으로 다양한 애플리케이션 저장소에 배치할 수 있다. 자세한 내용은 Native deployment with PhoneGap을 참조한다.

위로

Dojo Mobile 개요

Dojo Toolkit의 확장인 Dojo Mobile은 스마트폰이나 태블릿과 같은 모바일 디바이스에 최적화된 일련의 위젯이나 컴포넌트를 제공한다. 이 컴포넌트는 해당 기본 애플리케이션을 대상으로 모델링되며 스마트폰 애플리케이션에서 익숙하게 볼 수 있는 모양을 하고 있다. 테마를 사용하여 컴포넌트를 완전히 사용자 정의할 수 있다. 예를 들면, 테마를 사용하여 Android 사용자뿐만 아니라 iOS 사용자에게 다양한 스타일 세트를 적용할 수 있다.

Dojo Mobile은 Dijit 컴포넌트 라이브러리와 비슷하게 작동한다. 애플리케이션에서 특정 유형의 위젯을 사용하려면 먼저, 애플리케이션의 기본 Javascript 블록에 있는 dojo.require를 사용하여 관련 클래스를 로드해야 한다. 그러면 일반 HTML 태그를 dojoType 속성과 함께 사용하여 선언적으로 작성하거나 Javascript 코드를 사용하여 프로그램 방식으로 애플리케이션에 위젯을 추가할 수 있다.

예상하는 바와 같이 Dojo Mobile은 iOS와 Android 디바이스에서 멋지게 작동한다. 이러한 플랫폼에서는 WebKit 브라우저를 사용할 수 있기 때문이다. 멋진 WebKit 브라우저를 제공하는, BlackBerry OS 6, HP webOS와 같은 플랫폼에서도 Dojo Mobile이 작동한다. 비WebKit 브라우저에서는 Dojo Mobile 애플리케이션의 성능이 단계적으로 저하되지만, 이전의 데스크탑 브라우저(Microsoft Internet Explorer 포함)에서는 오히려 Dojo Mobile 애플리케이션이 실행된다. 기본적으로 CSS3 스타일만 삽입하지만, 코드 한 행을 사용하여 호환 가능한 모듈을 비WebKit 브라우저에 추가할 수 있다.

dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");

Dojo Mobile의 주요 기능은 다음과 같다.

Dojo Mobile 구문 분석기로 인한 위젯의 경량 로딩
고성능 iOS와 Android 디바이스에서 데스크탑 형태의 애플리케이션을 경험할 수 있는 CSS3 애니메이션과 전환 효과
iOS와 Android의 룩앤필을 위해 삽입된 테마
비CSS3 호환 가능 디바이스 및 브라우저와의 호환성
쉽게 배울 수 있는 완전한 선언적 구문
곧 공개될 Dojo Mobile 1.7에서 훨씬 더 증가될 많은 위젯

다음 섹션에서는 "Hello, World" 애플리케이션을 빌드하는 과정을 통해 Dojo Mobile을 시작하는 방법을 설명한다.

위로

Dojo Mobile 시작하기

Dojo Mobile 애플리케이션 개발을 시작하는 과정은 매우 간단하다. 무엇인가를 다운로드할 필요도 없다. Google의 CDN(Content Delivery Network)을 사용하여 원격으로 필요한 모든 것을 로드할 수 있기 때문이다. Dojo 애플리케이션의 기본 구조는 목록 1에 표시되어 있다.

목록 1. Dojo Mobile HTML 문서의 기본 구조


<!doctype html>
<html>
    <head>
        <meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,
user-scalable=no">
        <meta name="apple-mobie-web-app-capable" content="yes">
        <title>My Dojo Mobile App</title>
        <link rel="stylesheet"  
href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes
/iphone/iphone.css">
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" 
djConfig="parseOnLoad: true"></script>
        <script>
            dojo.require("dojox.mobile.parser");
            dojo.require("dojox.mobile");
            dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
        </script>
    </head>
    <body>
        <!-- Dojo Widgets Go Here -->
    </body>
</html>

목록 1에 있는 코드를 파일에 저장한 후, 웹 브라우저에서 이 파일을 열면 컨텐츠가 없는 회색 배경만 표시된다. 이 코드는 그다지 유용하지 않으므로 애플리케이션에 컨텐츠를 일부 추가한다. 이 기사에 있는 예제에서는 비표준 Dojo Mobile 클래스를 사용하므로 dojo.require를 사용하여 이 클래스를 수동으로 로드해야 한다. dojo.require("dojox.mobile"); 행 다음에는 목록 2에 있는 행을 추가한다.

목록 2. Dojo Mobile 클래스를 수동으로 로드


dojo.require("dojox.mobile.ScrollableView");
dojo.require("dojox.mobile.FlippableView");
dojo.require("dojox.mobile.IconContainer");

이제 "Hello, World" 애플리케이션의 기본 코드를 추가한다. 이 기사에 있는 예제에서는 Dojo Mobile에 적합한 선언문을 사용한다. 따라서 런타임 시에 구문 분석될 특수 Dojo Mobile 속성이 있는 일반 HTML 태그를 사용하게 된다. 이 코드의 <body> 섹션에 목록 3에 있는 코드를 추가한다.

목록 3. Dojo Mobile 위젯 사용


<div dojoType="dojox.mobile.ScrollableView" selected="true">
    <h1 dojoType="dojox.mobile.Heading" fixed="top">Hello, World!</h1>
    <h2 dojoType="dojox.mobile.RoundRectCategory">First Section</h2>
    <div dojoType="dojox.mobile.RoundRect">
        This is a nice standard rounded rectangular label.
    </div>
    <h2 dojoType="dojox.mobile.RoundRectCategory">Second Section</h2>
    <ul dojoType="dojox.mobile.RoundRectList">
        <li dojoType="dojox.mobile.ListItem">List Item 1</li>
        <li dojoType="dojox.mobile.ListItem">List Item 2</li>
        <li dojoType="dojox.mobile.ListItem">List Item 3</li>
        <li dojoType="dojox.mobile.ListItem">List Item 4</li>
        <li dojoType="dojox.mobile.ListItem">List Item 5</li>
    </ul>
</div>

목록 2에서는 기본 애플리케이션 인터페이스를 구성하는 ScrollableView를 정의했다. 표준 View 클래스와 ScrollableView 클래스 간의 차이점은 표준 View 클래스는 표준 브라우저인 chrome을 사용하여 페이지를 스크롤한다는 점이다. ScrollableView 클래스에는 고유한 스크롤링 메커니즘이 있으며, 이 메커니즘을 이용하면 애플리케이션의 헤더와 푸터를 수정할 수 있고 기본 애플리케이션에서 예상할 수 있는 것처럼 헤더와 푸터 사이에 있는 켄텐츠를 스크롤할 수 있다.

ScrollableView 안에는 Heading이 있는데, 이는 "Hello, World" 텍스트가 포함되어 있는 제목 표시줄이다. 이 오브젝트에 fixed="top" 속성을 설정하면 Dojo Mobile은 표제를 화면 맨 위에 유지하고 기타 컨텐츠는 표제 아래로 스크롤한다. RoundRectCategory 오브젝트는 둥근 형태의 목록이나 단일 항목에 적합한 그룹 표제를 정의한다. 첫 번째 카테고리 다음에는 안에 일부 정적 텍스트가 있는 하나의 RoundRect 상자가 배치된다. 이 상자 다음에는 또 다른 카테고리 표제와 일련의 ListItem 오브젝트가 포함된 RoundRectList 오브젝트가 차례로 배치된다. 최종 결과는 그림 1과 같이 표시된다.

그림 1. Hello World 애플리케이션
두 개의 섹션(첫 번째 섹션과 목록 항목이 있는 두 번째 섹션)이 표시된 iPhone 이미지

다음 섹션에서는 Dojo Mobile에서 사용 가능한 다양한 위젯과 컴포넌트를 탐구한다.

위로

위젯

Dojo Mobile에는 스마트폰 및 태블릿과 같은 모바일 디바이스에 맞게 특별히 설계되고 최적화된 다양한 위젯이 있다. 위젯은 레이아웃 컴포넌트(View)로부터 목록, 탐색줄, 탭 표시줄, 단추 및 양식 위젯에 이르기까지 다양하다. 이 섹션에서는 작동 중인 다양한 위젯과 기본적인 코드 예제를 살펴본다. 이 섹션에 있는 화면 이미지는 iPhone 테마를 사용하여 iOS 디바이스에서 캡처한 것이다. 따라서 이러한 이미지는 사용 중인 Android 테마에 따라 달라진다.

View

View는 디바이스의 화면의 사용 가능한 모든 공간을 차지하는 컨테이너 위젯이다. 애플리케이션 페이지에는 둘 이상의 View 오브젝트가 있을 수 있지만, 특정 시간에는 이들 중 하나만 활성화될 수 있다. 일반적으로 사용자는 도구 모음 단추와 탭 표시줄 단추를 사용하여 다양한 View 간을 탐색할 수 있으며 각 View 간을 이동할 때는 다양한 전환 동작이 표시된다. 그림 2에는 비어 있는 View에 대한 예제가 표시되어 있다.

그림 2. 비어 있는 View 오브젝트
비어 있는 회색 상자

View 오브젝트를 작성하려면 Dojo의 기본 SDK에 포함되어 있는 dojox.mobile.View 클래스를 사용해야 한다. dojo.require를 사용하여 이 클래스를 명시적으로 로드할 필요는 없다. View 오브젝트를 사용할 때는 선택된 속성을 사용하여 해당 애플리케이션이 실행될 때 어떤 Vew(시작 View)를 표시할 것인지를 정의한다. 위에 있는 View 오브젝트를 선언적으로 작성하려면 다음 코드가 필요하다.

<div dojoType="dojox.mobile.View" selected="true"></div>

그 대신에 Javascript를 사용하여 프로그램 방식으로 View를 작성할 수도 있다. 목록 4에는 이 방법을 사용하여 그림 2에 있는 View를 작성하는 코드가 표시되어 있다.

목록 4. View 작성


var myView = new dojox.mobile.View({
    selected: true
}, "myView");
myView.startup();

목록 4에서는 HTML의 어디인가에 id 속성 값이 myView인 블록 요소가 있다고 가정한다. 다음에는 View 오브젝트를 DOM에 있는 이 요소에 바인드한다.

나머지 위젯은 위젯을 선언적으로만 사용하는 방법을 설명할 때 살펴본다. Dojo Mobile 위젯을 프로그램 구문과 함께 사용하는 방법에 대한 자세한 정보는 Dojo API를 참조한다.

ScrollableView

ScrollableView 위젯은 View 위젯과 비슷하게 작동한다. 다시 말해서 이 위젯은 다른 위젯을 배치할 수 있는 컨테이너 역할을 한다. 기본적인 차이점은 ScrollableView를 사용하는 경우에는 컨텐츠가 화면의 크기를 초과하면, 사용자가 화면을 터치하고 손가락을 아래, 위로 이동하여(수평 스크롤을 사용하는 경우에는 왼쪽이나 오른쪽으로 이동하여) 컨텐츠를 스크롤할 수 있다. 그렇지만, 헤더나 푸터 오브젝트는 그대로 제 위치에 유지된다. 표준 View 오브젝트를 사용하는 경우에는 전체 화면이 스크롤되기 때문에 헤더와 푸터의 위치가 변하게 된다. 그림 3에는 예제가 표시되어 있다.

그림 3. 비어 있는 ScrollableView 오브젝트
오른쪽에 화면이동 막대가 있는 비어 있는 회색 상자

위에 있는 비어 있는 ScrollableView 오브젝트를 작성하는 방법은 그림 2에 있는 비어 있는 View 오브젝트를 작성하는 방법과 매우 비슷하다. 비어 있는 ScrollableView에 해당하는 코드는 다음과 같다.

<div dojoType="dojox.mobile.ScrollableView" selected="true"></div>

View에 고정 헤더나 푸터를 추가할 경우에만 ScrollableView를 사용하는 것이 좋다. 그렇지 않은 경우에는 일반 View 클래스를 사용해야 한다.

일반 View 클래스와 달리 ScrollableView는 기본 클래스에 포함되어 있지 않으므로 dojo.require를 사용하여 명시적으로 로드해야 한다.

FlippableView

FlippableView 위젯(버전 1.7에서는 SwapView로 변경될 예정임)을 이용하면 화면을 왼쪽이나 오른쪽으로 움직여서 다른 FlippableView 위젯과 교환할 수 있는 컨테이너 오브젝트를 작성할 수 있다. 이 뷰의 순서는 뷰가 코드에 위치한 순서에 따라 달라진다. 그림 4에는 FlippableView 위젯이 표시되어 있다.

그림 4. FlippableView 위젯
텍스트가 있고 그 위에 오른쪽을 가리키는 화살표아 있는 상자

두 개의 뷰가 있는 샘플 FlippableView를 작성할 경우에는 목록 5에 있는 코드를 사용할 수 있다. Dojo 1.7을 사용할 경우에는 FlippableView 참조를 SwapView로 변경한다.

목록 5. 뷰가 두 개 있는 FlippablView 작성


<div dojoType="dojox.mobile.FlippableView" selected="true">View 1</div>
<div dojoType="dojox.mobile.FlippableView">View 2</div>

FlippableView는 기본 클래스에 포함되어 있지 않으므로 dojo.require를 사용하여 수동으로 로드해야 한다.

Heading

Heading 위젯을 이용하면 애플리케이션의 맨 위에 표시되는 탐색줄을 작성할 수 있다. 일반적으로 Heading 오브젝트에는 제목이 있다. 또한, 이전(Back) 단추나 도구 모음 단추와 같은 탐색 요소를 이 오브젝트에 추가하여 애플리케이션의 여기저기를 쉽게 탐색할 수 있는 수단을 제공할 수 있다.

Heading을 ScrollableView 컨테이너와 함께 사용하는 경우, Heading 위젯은 애플리케이션의 맨 위에 고정되는 반면에 애플리케이션의 나머지 부분은 스크롤된다. 사용자가 언제든지 애플리케이션을 탐색할 수 있게 할 수 있다. 그림 5에는 제목, Back 단추 및 도구 모음 단추가 있는 Heading 오브젝트 예제가 표시되어 있다.

그림 5. 샘플 Heading 위젯

그림 5에 있는 Heading 위젯을 작성하는 코드는 목록 6에 표시되어 있다.

목록 6. Heading 위젯 작성


<h1 dojoType="dojox.mobile.Heading" label="My App" back="Back"   
  moveTo="back">
    <div dojoType="dojox.mobile.ToolBarButton" label="Edit"
      class="mblColorBlue" style="width:25px;float:right">
    </div>
</h1>

Back 단추는 실제로 Heading 요소 자체에 정의되어 있다. back 속성은 단추에 표시되는 텍스트를 정의한다. moveTo 속성에는 사용자가 Back 단추를 가볍게 두드릴 때 활성화되어야 하는 View 오브젝트의 ID가 포함된다. 또한, 전환 속성을 사용하여 다른 뷰로 이동할 때 사용되는 전환 효과를 이러한 방식으로 정의할 수 있다. 기본값은 slide이지만, fade, flip 및 none을 선택할 수도 있다.

ToolBarButton 위젯을 사용하여 탐색 단추를 추가로 정의할 수 있다. 왼쪽에 Back 단추와 같이 스타일이 지정되지 않은 단추가 있기를 원하거나 오른쪽에 단추를 표시하고자 하는 경우에는 Heading 요소 안에 ToolBarButton 오브젝트를 추가하면 된다.

RoundRect

RoundRect 클래스를 이용하면 정적 HTML이나 기타 Dojo Mobile 위젯을 배치할 수 있는 간단한 둥근 모서리형 컨테이너를 작성할 수 있다. RoundRect 위젯의 예제는 그림 6에 표시되어 있다.

그림 6. RoundRect 컨테이너 사용
안에 컨텐츠가 있는 간단한 RoundRect 오브젝트(텍스트가 있는 프레임)

그림 6에 있는 RoundRect 오브젝트를 작성하려면 목록 7에 있는 구문을 사용한다.

목록 7. RoundRect 오브젝트 작성


<div dojoType="dojox.mobile.RoundRect" shadow="true">
    This is a simple RoundRect object with some content in it.
</div>

RoundRect 클래스는 매우 간단하다. 이 클래스는 특성(shadow)을 하나 받는다. 이 특성은 기본적으로 false로 설정된다. 이 특성은 컨테이너에 배경 음영을 지정할 것인지 여부를 정의한다.

RoundRectCategory 및 RoundRectList

모바일 디바이스에서 데이터를 표시할 경우에는 목록이 매우 중요하다. 수직형 표 구조를 이용하면 일련의 다양한 목록 항목을 표시할 수 있다. 이러한 항목은 탐색이나 기타 다양한 목적으로 정보를 표시하기 위해 사용할 수 있다. Dojo Mobile을 이용하면 연관된 카테고리 위젯이 있는 두 가지 유형의 목록을 작성할 수 있다. RoundRectList를 이용하면 양쪽에 간격이 있고 첫 번째와 마지막 목록 항목에 둥근 모서리가 있는 목록을 작성할 수 있다. 그림 7에는 iPhone에서 본 RoundRectCategory와 RoundRectList이 표시되어 있다.

그림 7. RoundRectList
목록 표제 및 세 개의 목록 항목

이 예제에서는 "List Heading"으로 레이블이 지정된 RoundRectCategory와 그 안에 ListItem 오브젝트가 세 개 있는 RoundRectList 오브젝트를 정의했다. 목록 8에는 이러한 위젯 세트를 작성하는 데 필요한 코드가 표시되어 있다.

목록 8. RoundRectCategory 및 RoundRectList 위젯 작성


<h2 dojoType="dojox.mobile.RoundRectCategory">List Heading</h2>
<ul dojoType="dojox.mobile.RoundRectList">
    <li dojoType="dojox.mobile.ListItem">List Item 1</li>
    <li dojoType="dojox.mobile.ListItem">List Item 2</li>
    <li dojoType="dojox.mobile.ListItem">List Item 3</li>
</ul>

EdgeToEdgeCategory 및 EdgeToEdgeList

EdgeToEdgeList는 RoundRectList와 거의 유사하다. 사실상 EdgeToEdgeList는 똑 같은 방식으로 사용되지만, 이 오브젝트를 사용하면 View의 너비를 전부 차지하는 목록이 작성된다. 그림 8에는 예제가 표시되어 있다.

그림 8. EdgeToEdgeList
화면의 너비를 전부 차지하는 목록 항목 세 개와 목록 표제 한 개

목록 9에 표시되어 있듯이 RoundRect가 EdgeToEdge로 대체되는 것을 제외하면 EdgeToEdgeList에 해당하는 코드는 이전 예제와 거의 동일하다.

목록 9. EdgeToEdge 위젯 작성


<h2 dojoType="dojox.mobile.EdgeToEdgeCategory">List Heading</h2>
<ul dojoType="dojox.mobile.EdgeToEdgeList">
    <li dojoType="dojox.mobile.ListItem">List Item 1</li>
    <li dojoType="dojox.mobile.ListItem">List Item 2</li>
    <li dojoType="dojox.mobile.ListItem">List Item 3</li>
</ul>

일반적으로 위에 있는 목록은 인물 목록을 표시할 때 사용되며, 이런 경우에는 성의 첫 번째 문자로 인물을 그룹화한다.

IconContainer

IconContainer 위젯을 이용하면 가볍게 두드릴 때마다 별도의 컨테이너를 열 수 있는 일련의 아이콘을 정의할 수 있다. IconItem 오브젝트는 IconItem 안에 중첩되어 있는 컨테이너를 밀어내거나 활성 View를 특정 ID를 사용하는 View로 실제로 이동할 수 있다. 그림 9에는 아이콘이 세 개 있는 IconContainer가 표시되어 있다.

그림 9. 샘플 IconContainer
각각 'core' 로고가 포함되어 있는 상자 세 개가 표시되어 있는 화면

위에 있는 IconContainer를 작성하려면 목록 10에 있는 코드를 사용한다.

목록 10. IconContainer 위젯 작성


<ul dojoType="dojox.mobile.IconContainer">
    <li dojoType="dojox.mobile.IconItem" label="Icon 1" 
      icon="appicon.png" moveTo="view1"></li>
    <li dojoType="dojox.mobile.IconItem" label="Icon 2" 
      icon="appicon.png" moveTo="view2"></li>
    <li dojoType="dojox.mobile.IconItem" label="Icon 3"     
      icon="appicon.png" moveTo="view3"></li>
</ul>

IconContainer 클래스 자체는 _base.js에 포함되어 있지 않으므로 dojo.require를 사용하여 이 클래스를 명시적으로 로드해야 한다. 그러나 IconItem 클래스는 _base.js에 포함되어 있으므로 이 클래스를 수동으로 로드해서는 안 된다. 그렇지 않은 경우에는 애플리케이션을 실행할 때 오류가 발생한다.

이러한 특별한 위젯에 대한 세부사항은 매우 많지만, 이 기사에서는 이러한 세부사항을 다루지 않는다. Dojo Mobile Showcase와 API를 더 광범위하게 다루고 있는 정보를 확인할 수 있는 링크는 참고자료를 참조한다.

Button

Button 클래스를 이용하면 간단한 단추 오브젝트를 작성할 수 있다. 그 다음에는 dojo.connect를 사용하여 이 위젯에서 "클릭"과 같은 이벤트를 처리하는 코드를 작성할 수 있다. 그림 10에는 Button 위젯 예제가 표시되어 있다.

그림 10. Button 위젯

목록 11에 표시되어 있듯이 이 단추를 작성하는 코드는 단추 자체만큼이나 간단하다.

목록 11. Button 위젯 작성


<button dojoType="dojox.mobile.Button" btnClass="mblBlueButton" 
style="width: 100px">Click me!</button>

CSS를 사용하여 고유한 단추 스타일을 새로 작성할 수 있으며 btnClass 속성을 사용하여 이 단추에 클래스 이름을 할당할 수도 있다.

Switch

Switch 오브젝트는 일종의 전환 제어로 이 오브젝트를 이용하면 두 특성 간에 오브젝트의 값을 전환할 수 있다. 기본적으로 이러한 특성은 ON 또는 OFF이다. Switch의 값을 변경하려면, 변경하고자 하는 값을 가볍게 두드리거나 Switch를 밀어서 대상 값으로 변경한다. 그림 11에는 스위치(하나는 OFF 위치에 있고 다른 하나는 ON 위치에 있음)가 두 개 있는 Switch 위젯 예제가 표시되어 있다.

그림 11. Switch 예제
Switch 오브젝트 예제

Switch 오브젝트를 작성하는 코드는 다음과 같다.

<div dojoType="dojox.mobile.Switch" value="off"></div>

Switch 위젯은 추가 특성 두 개(leftLabel 및 rightLabel)를 받으며, 이러한 특성을 이용하면 on과 off 상태에서 표시되는 값을 각각 정의할 수 있다. 기본적으로 레이블은 ON과 OFF이다. Switch 값이 변경되면 onStateChanged 이벤트가 개시된다. dojo.connect를 사용하여 이 이벤트를 바인드할 수 있다.

TabBar

TabBar 위젯은 TabBarButton이 가볍게 두드려질 때 뷰를 활성화하거나 비활성화하여 애플리케이션 안에서 View 오브젝트를 안팎으로 교환하는 데 사용된다. TabBar 위젯에서는 iconBase 속성을 사용하여 이미지 스프라이트(image sprite)를 정의할 수 있다. 이 속성을 이용하면 각 TabBarButton에 다양한 아이콘을 표시할 수 있다. 그림 12와 같이 TabBar를 애플리케이션 맨 아래에 있는 탐색 컴포넌트로 사용하는 것이 좋다.

그림 12. 아이콘이 있는 TabBar
앨범과 달력 아이콘이 있는 TabBar

또는 segmentedControl의 barType 속성과 TabBar 컴포넌트를 사용할 수 있다. 이 컴포넌트는 일반적으로 애플리케이션 맨 위, 기본 Heading 위젯 아래에 배치하는 것이 좋은 탭 표시줄을 작성한다. 그림 13에는 작동 중인 이러한 유형의 TabBar 예제가 표시되어 있다.

그림 13. segmentedControl의 barType이 지정된 TabBar

그림 13에 있는 TabBar를 작성하는 코드는 목록 12에 표시되어 있다.

목록 12. TabBar 위젯 작성


<ul dojoType="dojox.mobile.TabBar" barType="segmentedControl">
    <li dojoType="dojox.mobile.TabBarButton" moveTo="view1" 
      selected="true">Albums</li>
    <li dojoType="dojox.mobile.TabBarButton" 
      moveTo="view2">Events</li>
</ul>

TabBarButton 클래스에는 단추의 모양을 사용자 정의할 때 사용할 수 있는 다양한 구성 옵션이 있다. 아이콘 위치, 사용해야 할 아이콘, 뷰를 변경할 때 사용할 전환 효과, 전환이 완료되었을 때 개시할 콜백 함수 등을 지정할 수 있다. 자세한 정보는 Dojo API를 참조한다.

위로

PhoneGap을 사용한 기본 배치

모바일 웹상에서 애플리케이션을 배치하려는 경향이 점차 증가하고 있다. 모바일 브라우저가 개선되고 HTML5가 발전되면서 모바일 웹은 모바일 애플리케이션을 배포하는 데 필요한 더 강력한 옵션이 되고 있다. 그러나 기본적으로 애플리케이션을 관련 플랫폼 애플리케이션 저장소에 배치하려고 하는 경우가 많다. 각 플랫폼의 기본 SDK를 사용하여 여러 가지 다양한 애플리케이션을 개발하는 대신, PhoneGap을 사용하여 모바일 웹 애플리케이션을 기본 패키지로 마무리할 수 있다.

PhoneGap은 배포 유형(무료, 상업용, 오픈 소스 또는 하이브리드 라이센스)과 관계없이 모든 애플리케이션에서 자유롭게 사용할 수 있는 오픈 소스 프로젝트이다. PhoneGap 자체는 MIT와 BSD 오픈 소스 라이센스에 따라 배포된다. 어떤 것이든지 해당 상황에 가장 적합한 제품을 선택할 수 있다.

PhoneGap에는 여섯 가지 플랫폼(iOS, Android, Blackberry, webOS, Windows Mobile 및 Symbian)에서 기본 애플리케이션을 빌드하는 데 필요한 SDK가 포함되어 있다. PhoneGap을 시작하는 명령어는 플랫폼마다 다양하다. 이 섹션에서는 PhoneGap을 iOS에 배치하는 방법을 살펴본다. 다른 플랫폼에 배치하는 방법은 참고자료를 참조한다.

기본적으로 iOS 디바이스에서 실행하는 기본 Dojo 애플리케이션을 PhoneGap을 사용하여 실제로 작성해 보자. 기본 iOS 애플리케이션을 빌드하려면 OS X 10.6 Snow Leopard와 Xcode가 설치된 Mac이 필요하다. Apple의 개발자 센터나 Mac 앱 스토어에서 Xcode를 다운로드할 수 있다. iOS SDK를 다운로드해야 한다. 그렇지 않으면 iOS 애플리케이션을 빌드할 수 없다.

Xcode와 iOS SDK를 설치했으면 다음 작업을 수행한다.

zip 파일로 배포되는 PhoneGap 최신 버전을 다운로드한다.
이 파일 안에 있는 iOS 디렉토리를 추출하여 연다. 그러면 패키지(PhoneGapLibInstaller.pkg)가 하나 표시된다.
PhoneGapLibInstaller.pkg를 실행하여 PhoneGap을 Xcode에 설치한다.
설치 프로그램이 완료되면 Xcode를 실행하고 프로젝트를 새로 작성한다.
그림 14와 같이 왼쪽에 있는 프로젝트 유형 그룹의 User Templates 아래에서 PhoneGap을 선택한 후, 오른쪽에 있는 PhoneGap-based Application을 선택한다.
Choose를 클릭하고 프로젝트 이름을 입력한다(예: "HelloNative").

그림 14. Xcode에서 PhoneGap 프로젝트 작성
세 개의 섹션(왼쪽에 섹션 1개, 오른쪽에 수평 섹션 2개)과 Cancel 및 Choose 단추가 있는 화면

일반적으로 창의 왼쪽에 있는, Xcode의 Groups & Files 섹션에서 "www" 폴더를 펼치고 index.html 파일을 연다. 이 파일에 있는 코드는 목록 13에 있는 코드와 비슷하다.

목록 13. 기본 PhoneGap iOS index.html 파일


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <!-- Change this if you want to allow scaling -->
    <meta name="viewport" content="width=default-width; user-scalable=no" />

    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

    <title>HelloNative</title>
    
    <!-- iPad/iPhone specific css below, add after your main css >
    <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" 
href="ipad.css" type="text/css" />        
    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" 
href="iphone.css" type="text/css" />        
    -->
    <!-- If you application is targeting iOS BEFORE 4.0 you MUST put json2.js 
from http://www.JSON.org/json2.js into your www directory and include it here -->
    <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
    <script type="text/javascript" charset="utf-8">


    // If you want to prevent dragging, uncomment this section
    /*
    function preventBehavior(e) 
    { 
      e.preventDefault(); 
    };
    document.addEventListener("touchmove", preventBehavior, false);
    */
    
    function onBodyLoad()
    {
        document.addEventListener("deviceready",onDeviceReady,false);
    }
    
  /* When this function is called, PhoneGap has been initialized and is ready to roll */
    function onDeviceReady()
    {
        // do your thing!
    }
    
    </script>
  </head>
  <body onload="onBodyLoad()">
      
  </body>
</html>

이 시점에서는 "Hello, World" 애플리케이션과 동일한 기능을 수행하는 기본 애플리케이션을 빌드할 것이다. 사실상 첫 번째 단계에서는 Dojo 자체를 삽입한다. index.html에서 다음 행을 찾는다.

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

이 행 아래에 목록 14에 있는 행을 추가한다.

목록 14. Dojo 삽입


<link rel="stylesheet"
 href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes
 /iphone/iphone.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" 
djConfig="parseOnLoad: true"></script>

목록 14에 있는 코드는 Dojo의 CSS와 Javascript 파일을 Google의 CDN에서 로드한다. 물론, 기본적으로 PhoneGap을 사용하여 모바일 웹 애플리케이션을 배치할 경우, 실제 애플리케이션에서는 Dojo의 로컬 사본을 삽입해야 한다. 이렇게 하지 않으면 사용자가 오프라인 상태에 있는 경우에는 애플리케이션을 사용할 수 없게 된다. 또한, 해당 디바이스에서 Dojo를 로컬로 사용 가능한 경우에는 애플리케이션의 속도가 훨씬 더 빨라진다.

Javascript 함수 onDeviceReady를 찾아서 "do your thing!" 주석 아래에 목록 15에 있는 코드를 추가한다.

목록 15. Dojo Mobile 구문 분석기 로드


dojo.require("dojox.mobile.parser");
dojo.require("dojox.mobile");
dojo.require("dojox.mobile.ScrollableView");

목록 15에 있는 코드는 Dojo Mobile 구문 분석기와 기본 클래스뿐만 아니라 ScrollableView 컨테이너 위젯을 로드한다. 이 경우에는 대상 디바이스가 명백히 WebKit을 사용하는 iOS이기 때문에 호환성 계층이 필요하지 않다. 추가해야 할 코드의 마지막 비트는 위젯 자체이다. index.html에 있는 <body> 요소의 열기 태그와 닫기 태그 사이에 목록 16에 있는 코드를 추가한다.

목록 16. 위젯 추가


<div dojoType="dojox.mobile.ScrollableView" selected="true">
    <h1 dojoType="dojox.mobile.Heading" fixed="top">Hello, World!</h1>
    <h2 dojoType="dojox.mobile.RoundRectCategory">First Section</h2>
    <div dojoType="dojox.mobile.RoundRect">
        This is a nice standard rounded rectangular label.
    </div>
    <h2 dojoType="dojox.mobile.RoundRectCategory">Second Section</h2>
    <ul dojoType="dojox.mobile.RoundRectList">
        <li dojoType="dojox.mobile.ListItem">List Item 1</li>
        <li dojoType="dojox.mobile.ListItem">List Item 2</li>
        <li dojoType="dojox.mobile.ListItem">List Item 3</li>
        <li dojoType="dojox.mobile.ListItem">List Item 4</li>
        <li dojoType="dojox.mobile.ListItem">List Item 5</li>
    </ul>
</div>

index.html 파일을 저장(File -> Save)한 후, Xcode의 왼쪽 맨 위에 있는 Overview 도구 모음 옵션을 Simulator 대상으로 설정한다. 이제 Build 및 Run(Build -> Build and Run)을 사용하여 애플리케이션을 실행할 수 있다. iOS 시뮬레이터 애플리케이션이 실행되기 전에 잠시 동안 Xcode가 작업을 수행한다. 잠시 후에 첫 번째 기본 Dojo 애플리케이션이 시작된다. 화면 맨 아래에 Safari 도구 모음이 없으며 애플리케이션이 디바이스의 전체 화면을 차지하고 있다는 것을 그림 15에서 확인할 수 있다.

그림 15. 기본 Dojo Hello World 애플리케이션
첫 번째 섹션에는 Hello World 제목이 있고 두 번째 섹션에는 목록 항목이 있음

시뮬레이션된 iPhone에서 Home을 선택하여 애플리케이션을 종료하면 그림 16과 같이 애플리케이션이 기본 PhoneGap 애플리케이션 아이콘과 이름(HelloNative)으로 디바이스의 홈 화면에 표시된다.

그림 16. iPhone 홈 화면에 표시된 기본 애플리케이션 아이콘

시뮬레이터에서 Safari 또는 Contacts와 같은 또 다른 애플리케이션을 열고 Home 단추를 두 번 두드리면 iOS 멀티태스킹 메뉴가 열린다. 다시 한 번, 애플리케이션의 아이콘이 표시된다. 이 아이콘을 사용하면 기타 애플리케이션과 자신의 애플리케이션 사이를 빠르고 쉽게 전환할 수 있다.

다른 플랫폼에 배치하는 프로세스는 일반적으로 여기서 살펴본 것처럼 단순하다. 그렇지만, 애플리케이션이 Android에서 작동할 수 있게 하려면 약간 수정이 필요할 수도 있다. 필요한 모든 정보는 PhoneGap 웹 사이트에서 얻을 수 있다.

위로

Dojo Mobile 1.7의 새로운 기능

Dojo Mobile 버전 1.7에서는 몇 가지 기능이 개선될 것으로 예상되며 이러한 기능은 멀지 않은 미래에 사용할 수 있게 될 것이다. 개선될 사항은 다음과 같다.

사용 중인 모바일 디바이스를 자동으로 감지하여 해당 Dojo Mobiel 테마를 적절하게 로드하는 dojox.mobile.deviceTheme 모듈이 새로 추가된다.
Blackberry 디바이스에 맞게 특별히 설계된 테마가 새로 추가된다.
스크롤이 가능한 일련의 이미지를 표시할 수 있는 Carousel 위젯이 새로 추가된다. 헤더에 있는 탐색 제어는 이미지 그룹을 순회할 수 있는 대체 수단을 제공한다. 그림 17에는 Carousel 위젯 예제가 표시되어 있다.

그림 17. Carousel 위젯
일반적으로 기본 iPhone 애플리케이션에 있는 팝업 스피너 UI 컴포넌트를 흉내내는 SpinWheel 위젯이 새로 추가된다. 이 예제는 그림 18에 표시되어 있다.

그림 18. 작동 중인 SpinWheel/DatePicker 위젯
SpinWheelSlot을 사용하여 스스로 구성할 수 있는 컴포넌트와 SpinWheelDatePicker 및 SpinWheelTimePicker를 포함한 다양한 유형의 SpinWheel 컴포넌트가 추가된다.
RoundRectList 및 EdgeToEdgeList 위젯의 데이터 중심 버전인 RoundRectDataList와 EdgeToEdgeDataList가 추가 된다.
CSS3 전환 효과 및 애니메이션에 대한 지원이 개선된다.
Button 클래스가 기본 모바일 프레임워크에서 제거되었으므로 dojo.require("dojox.mobile.Button"); 구문을 사용하여 이 클래스를 명시적으로 로드해야 한다.
FlippableView 위젯의 이름이 SwapView로 변경되었다.

WebSphere Application Server Feature Pack for Web 2.0 and Mobile V1.1.0

WebSphere Application Server Feature Pack for Web 2.0 and Mobile V1.1.0에는 이 기사에서 강조한 모든 Dojo 1.6 기능이 있는 IBM Dojo 1.7 Toolkit뿐만 아니라 IBM Dojo 1.7 Toolkit에서만 사용 가능한 다양한 기능이 많이 포함되어 있다. 또한, 이 기능 팩은 새로운 모바일 및 RIA(Rich Internet Application) 빌딩 블록과 Dojo 기반 다이어그램 컴포넌트를 제공한다. 이 기능 팩을 함께 제공되는 Rational 도구와 함께 사용하면 리치 웹 및 모바일 애플리케이션을 용이하게 작성할 수 있다. 원래 데스크탑 브라우저용으로 개발된 WebSphere 애플리케이션을 모바일 디바이스에 쉽게 적용하고 배치할 수 있다.

또한, 최신 버전의 dojox.mobile 애플리케이션에서 사용할 수 있는 별도의 관련된 Dojo 프로젝트가 일부 있다.

JSON 모델을 사용하여 자동으로 양식을 생성하는 기능이 있는 데이터 바인드 양식
이전 버전의 Goole Maps 위젯을 보완하는 OpenLayers Map 위젯
브라우저 플러그인이 필요 없는, 모바일에 최적화된 차트와 게이지
사용자의 터치 동작에 매우 정확하게 응답하는 개선된 터치 이벤트 계층

Dojo Mobile 1.7의 릴리스 시기가 가까워지면서 예상할 수 있는 모든 새로운 기능과 변경사항에 관한 세부적인 내용이 공식적으로 발표될 것으로 예상된다.

위로

결론

웹 애플리케이션이 기본 모바일 애플리케이션 개발을 대체할 수 있는 합리적이고 강력한 대안으로 급부상하고 있다. 이 기사에서는 Dojo Mobile과 같은 모바일 HTML5 프레임워크를 통해 프로세스를 더 가치 있게 하고, 모바일 디바이스에 특히 적합한 UI 컴포넌트와 위젯을 설계하는 진부한 작업을 추상화하는 방법을 배웠다. Dojo Mobile은 다양한 유형의 디바이스에서 사용할 수 있는 여러 가지 테마를 제공하기도 한다.

모바일 웹 애플리케이션을 빌드하고 나면, 멋진 PhoneGap SDK를 이용하여 애플리케이션을 여러 가지 대상 플랫폼에 배치할 수 있다. 카메라 및 마이크와 같은 기본 디바이스 기능을 활용할 수도 있다. 모바일 웹의 미래는 밝을 뿐만 아니라 이미 현실화되고 있다.

위로

감사의 인사

이 기사를 검토해 주고 필자가 이 기사를 작성하는 데 도움을 준, IBM WebSphere Application Server Feature Pack for Web 2.0 and Mobile V1.1.0 팀의 Christopher Mitchell, Lizet Ernand, Todd Kaplinger 및 Yoshiroh Kamiyama에 감사한다.

위로

다운로드 하십시오

설명	이름	크기	다운로드 방식
Article source code	dojomobile.source.zip	3KB	HTTP

다운로드 방식에 대한 정보

참고자료

교육

Dojo Toolkit에 관해 자세히 배우자.
Dojo Mobile의 기능에 관해 읽어보자.
공식 dojox.mobile 문서를 액세스할 수 있다.
몇 가지 Dojo Toolkit 데모를 확인하자.
샘플 위젯을 로드할 수 있는 Dojo Mobile Showcase를 살펴보자.
TNW: Developers: build mobile and web apps quicker with Dojo Mobile에서 Dojo Mobile과 관련된 일련의 비디오를 보자.
"Comment lines: Going mobile with the Dojo Toolkit"(developerWorks, 2011년 3월): 모바일 플랫폼을 대상으로 Dojo Toolkit을 사용하는 방법을 배우자.
developerWorks 블로그 항목 Building mobile apps with the Dojo framework을 읽어보자.
"Comment lines: Mobile apps and the web"(developerWorks, 2011년 3월) 급부상하고 있는 모바일 컴퓨팅 분야를 살펴보고 새롭게 부각되고 있는 웹 표준을 활용하여 엔터프라이즈의 모바일 수요를 처리하는 방법을 확인한다.
Introducing The Dojo Toolkit은 Dojo Toolkit에 대한 우수한 소개 자료이다.
Introduction to the Dojo toolkit, part 1: Setup, core, and widgets은 Dojo Toolkit에 대한 또 다른 우수한 소개 자료이다.
Dojo 1.5: Ready to power your web app에서는 Dojo 1.5의 몇 가지 새 기능을 탐구한다.
Introduction to the Dojo Toolkit: Tutorial은 Dojo Toolkit을 소개하는 튜토리얼로 Ajax Matters에서 확인할 수 있다.
"Internationalizing Web applications using Dojo"(developerWorks, 2008년 8월): 이 기사에서는 Dojo Toolkit의 i18n 기능을 사용하여 웹 사이트와 웹 애플리케이션 환경에서 기본 언어 지원을 수행하는 방법을 탐구한다.
"Consuming web services with the Dojo Toolkit"(developerWorks, 2010년 9월): Dojo Toolkit을 사용하여 웹 페이지에서 Ajax를 사용할 수 있게 하는 서비스를 이용하는 방법을 살펴본다.
Dojo: Using the Dojo JavaScript Library to Build Ajax e Applications(James E. Harmon): 이 책은 사전 패키지된 위젯으로 구성된 Dojo 라이브러리와 Dojo에 대한 개발자용 안내서로 다양한 예제를 포함하고 있다.
Getting StartED with Dojo(Kyle Hayes 및 Peter Higgins): 이 책에서는 먼저, Javascript를 설명한 다음, 웹 인터페이스, 효과 위젯 등을 빌드하는 데 필요한 Dojo 도구 세트와 Dojo를 살펴본다.
"Writing a custom Dojo application"(developerWorks, 2008년 12월): 이 기사에는 Dojo에 관한 자세한 정보가 많이 있다.
"Develop HTML widgets with Dojo"(developerWorks, 2006년 10월): 이 기사에서는 Dojo의 확장성을 탐구한다.
"Using the Dojo Toolkit with WebSphere Portal"(developerWorks, 2007년 11월): 이 기사에서는 WebSphere Portal 애플리케이션에서 Dojo Toolkit을 구성하고 사용 및 활용하는 방법을 설명한다,
PhoneGap Get Started Guide를 읽어보자.
developerWorks Web Development zone에서는 다양한 웹 기반 솔루션 관련 기사를 전문적으로 다룬다.

제품 및 기술 얻기

Dojo Toolkit을 다운로드하자. 이 기사에서는 버전 1.6.1을 사용했다.
WebSphere Application Server Feature Pack for Web 2.0 and Mobile V1.1.0을 다운로드하자.
PhoneGap 최신 버전을 다운로드하자.
Developer Tests for Dojo Mobile을 확인하자.
Dojo Toolkit API 문서에 액세스할 수 있다.
IBM - Dojo Extension sample: Dojo 확장 기능 세트를 사용하여 Dojo JavaScript Toolkit에서 제공하는 기능을 IBM WebSphere Portlet Factory 모델에서 사용 가능하게 할 수 있다.
IBM 제품 평가판을 다운로드하여 DB2, Lotus, Rational, Tivoli 및 WebSphere의 애플리케이션 개발 도구와 미들웨어 제품을 사용해 보자.