가. 이제 환경 설정이 마무리되었으니 실제 이클립스에서 프로젝트를 생성하고
Gwt와 Gxt 프로그램을 만들어보도록 하자.
나. File -> New -> Web Application Project를 클릭하자
다. 다음 화면에서 프로젝트명과 패키지명을 입력하고 Google SDKs란의
"Use Google App Engine"체크를 풀어준다.
- 이부분은 Host mode로 테스트 할 경우 Google App Engine를 사용할 경우 체크되는데
Google App Engine은 서버쪽 패키지의 접근이 제한되어 DB연결등이 안되는 현상이
발생하므로 체크를 해제하여 사용하지 않도록 하자. (애초에 인스톨하지 않았어야
했는데..)
라. "Finish"를 클릭하면 아래와 같이 프로젝트가 생성되는 것을 볼수 있다.
2. 프로그램 실행하기
가. 프로젝트가 생성됨과 동시에 최초 정의한 패키지명으로 샘플프로그램이 생성되게
된다. 이 샘플 프로그램을 실행해보자.
src -> com.hansol.gxt.study -> GxtStudy.gwt.xml에서 우측 마우스 클릭하고 아래와 같이
실행한다.
나. 아래화면 "Development Mode"창에 주소가 출력된다. 이 주소를 우측클릭하여 Copy하고
브라우저 주소창에서 실행해 보자
다. 실행 화면 확인
- 텍스트필드에 "테스트 프로그램"이라고 넣고 "Send"를 클릭해보자.
- 아래의 화면이 정상적으로 실행된다면 Gwt기반으로 어플리케이션을
개발할 수 있는 환경설정이 모두 끝났다고 할 수 있다. 이 후에는
Gxt라이브러리를 추가하여 좀 더 세련되고 편리한 UI를 만들수 있도록
설정하자
3. Gxt(ExtGwt) 프로그램을 만들어 보자.
가. 현재 프로젝트를 아래 그림과 같이 Gwt Project로 Convert하자.
- 이렇게 하는 이유는 프로젝트 생성 이 후에도 Gwt모듈을 간단하게 생성할 수
있도록 도와주기 때문이다.
나. (가)의 그림과 같이 기존 "Convert project into GWT project.."가 아래의 그림처럼
변경되는 것을 볼수 있다.
다. (나)에서 GWT module를 클릭한다.
라. 아래의 창이 뜨면 모듈명과 패키지명을 입력하고 toolkit에는 "Ext GWT(GXT)"를 체크
하고 "Finish"를 클릭한다.
마. 이후 아래의 창이 나오는데 이창은 Gxt라이브러리 홈을 찾는 창이다.
우선 강좌03을 기억해보자. 강좌03에서는 Gxt(ExtGwt)라이브러리를 다운로드 받고
특정폴더에 압축을 풀어 보관하고 있다. 이 라이브러리를 Gxt프로그램 생성시
이용하는 것이다. 아래 그림과 같이 gxt-2.2.0 -> gxt-2.2.0 폴더를 지정해주고 "확인"
을 클릭하자.
바. 자 이제 Gxt용 모듈이 만들어졌다. 이 모듈을 이용해 어플리케이션을 만들 수 있다.
그러나 한가지 더 해야할 일이 있는데. 이 모듈명으로 아래와 같은 war폴더 및에
html파일이 생성되었을 것이다.(여기서는 MyApp.html이다 위에서 Smpl로 했지만서두..)
사. 모듈명으로 생성된 html을 열어 아래 부분을 추가하도록 하자. 이렇게 하는 이유는
Gxt를 사용하기 위한 css 즉 화면 UI에서 사용되는 각종 이미지 , 효과등을 Gxt용으로
쓰기 위한 것이다. 전에는 이부분이 자동으로 되었던 것 같은데 ...아무튼
<head> <meta http-equiv="content-type" content="text/html; charset=euc-kr"> <!-- --> <!-- Consider inlining CSS to reduce the number of requested files --> <!-- --> <link type="text/css" rel="stylesheet" href="MyApp.css"> <!-- //요기 아래를 추가하자. --> <link type="text/css" rel="stylesheet" href="ExtGWT/css/gxt-all.css"/> <!-- --> <!-- Any title is fine --> <!-- --> <title>Wrapper HTML for MyApp</title> <!-- --> <!-- This script loads your compiled module. --> <!-- If you add any GWT meta tags, they must --> <!-- be added before this line. --> <!-- --> <script language="javascript" src="com.mycompany.project.MyApp/com.mycompany.project.MyApp.nocache.js"></script> </head>
