넷빈에서 jMaki 를 이용하여 Mashup 만들기 - 02

Written on 오전 3:22 by 강여사(J.Y.Kang)

그럼 매시업 구현을 해보도록 하겠습니다.

일단 새 프로젝트를 만들어야 겠죠.

New Project

클릭

이번 매시업은 구글과 야후의 맵을 이용한 내용입니다.

웹브라우저상의 구현이니 웹 어플리케이션을 만들도록 하겠습니다.

Web - Web Application

클릭

프로젝트의 이름은 CityLocator (도시위치 찾기 쯔음으로 보시면 될듯)

프로젝트 이름으로 아래 Context 의 기본세팅이 될테고

문제는 Server 설정입니다.

이 서버가 j2EE5 가 지원되는 glassfish 로 연결되어 있으시면 됩니다.

저의 설정을 보시면 (Manage 클릭)

Sun Java System Application Server 라는 이름으로 서버가 설정되어 있는데

이걸 저는 넷빈 6.0 M10 에서 자동인스톨된 glassfish- v2 - b53 을 연결해 썼습니다.

서버 추가는 아래 add Server 를 이용하시면 됩니다. (버튼 클릭후 해당 넷빈 IDE 에서 가능한 서버를 찾아 홈 폴더를 지정하시면 됩니다. )

서버확인이 끝났으면 아까에서 next 를 누릅니다.

그럼 프레임워크 설정이 나오는데

5.5.1 에서 기본적으로 들어있는 JSF 와 Struts 외에 jMaki Ajax Framework 가 위에 올라와 있는 게 보이실 겁니다.

체크하시면 아래로 CSS 레이아웃들이 나타납니다.

그럼 그 중 지금 하고자 하는 내용은 2개의 칼럼과 하나의 footer 를 가진 레이아웃을 선택합니다.

Two Column with Footer

항목 클릭후

Finish

그럼 자동적으로 jMaki 에 대한 여러가지 위젯들이 파레트에 나타나고 (화면 오른쪽)

아까 선정한 CSS 레이아웃을 가진 index.jsp 가 편집창에 나타납니다.

하고자하는 내용은 오른쪽 칼럼부분에 구글맵을, 왼쪽 칼럼 부분에는 야후맵을 그리고, footer 에는 야후의 지역찾기코더 를 넣을 예정입니다.

따라서 편집창에 나타난 index.jsp 아래쪽에 보시면 Right Column 이라는 글씨가 적혀 있는 DIV 가 있습니다.

Right Column 이라는 글씨를 지우고 대신 파레트에서 jMaki Google 이라는 항목아래 보시면 Map 이 있습니다.

그걸 드래그 해서 Right column 글자가 있던 곳에 놓습니다. (그림의 회색부분)

비슷한 방법으로 이번엔 Left column 이라는 글씨를 지우고 글자가 있던 곳에 파레트로 부터 jMaki Yahoo 카테고리의 Map 을 드래그 해서 놓습니다. (그림의 회색부분)

그런 다음 마지막으로 footer 라고 적혀진 글자 대신 역시 jMaki Yahoo 에서 Geocoder 를 드래그해서 놓습니다.

프로젝트를 저장하고 실행합니다.

Run Project

그럼 다음 그림과 같이 왼쪽에는 야후에서 제공하는 맵이, 오른쪽에는 구글에서 제공하는 맵이 나타나고

아래 하단부에 원하는 위치를 찾고자 하는 검색란이 보입니다.

저는 동경의 디즈니랜드를 검색해 봤습니다.

Tokyo, Disneyland

입력후 클릭

이전에도 말씀드려 아시겠지만 미국이나 일본 등등에서는 구글에서 제공하는 Map, Satellite, Hybrid 가 모두 제공됩니다. (한국, 북한 등은 Map 기능은 제공되지 않습니다. --;)

줌 인(+), 줌 아웃(-) 다 잘 지원되고 줌인 한 상태에서 Map 이나 기타 다른 지명으로 가면 해당 줌인 배율로 다음 로케이션이 나타납니다. ^^

그럼 일단 여기까지 하고 졸려서 다음 대목은 다음에..

수고 하셨습니다.