제가 별로 많이 도와주진 않았지만,
두명의 S 사에 있는 후배들이 Head First AJAX 책을 거의 10개월에 걸쳐 작업한 번역서가 나왔습니다.
제가 감수평까지 썼지만, 표지엔 왜 감수자 이름이 안들어 간지는 모르는 그런 책...
AJAX에 관심 많으신 분들은 정리하는 관점에서 보시면 많은 도움이 될 겁니다.
사용자 삽입 이미지


Posted by tuning-java
,
일이 또 하나 생겨서 두개밖에 글이 올라오지 않은 GWT 연재는 연기됩니다.
(뭐 보시는 분도 없는 듯 하지만...)
Posted by tuning-java
,

백문이 불여일견이므로, GWT 샘플을 한번 돌려보자.

이클립스 메뉴에서 File --> New... --> Examples 를 선택한 다음, GWT Samples 를 선택한다.
(만약 Cypal이 정상적으로 깔리지 않았다면, 이 목록이 나타나지 않을 것이다.)

그 다음화면에서 다음과 같이 KitchenSink를 선택한다.

그 다음 Finish를 누르면, 해당 프로젝트의 Java Resources하단에 sample_src패키지가 생기고, 그 밑에 Kitchen Sink 샘플이 설치된다.

정상적으로 샘플이 저장되었다면, 해당 프로젝트를 선택한 상태에서 오른쪽 마우스를 클릭하고, Run As... --> Open Run Dialog... 을 클릭한다.

그러면 중간에 뻘건 가방 아이콘과 함께 GWT Hosted Mode Application 이라는 것이 있을 것이다.

만약 Kitchen Sink가 없다면, GWT Hosted Mode Application 을 더블클릭한다.

그러면 가장 위에 이름을 지정하는 곳이 있고, 원하는 이름을 입력한다.

Project와 Module 은 각각 본인의 프로젝트와 방금 추가한 모듈을 선택한다. Apply를 누르고 Run을 눌러보자.

정상적으로 지정이 되었다면, 다음의 두개 화면이 나타날 것이다.

하나는 Host 모드로 돌아가는 톰캣서버 콘솔이고 여기서 에러 메시지를 확인할 수 있다.

다른 하나는 결과를 확인하기 위한 브라우져다.

이제 GWT의 재미를 슬슬 느껴보자.~~~

Posted by tuning-java
,

GWT로 뭐 하나 개발할 일이 있어서, 이왕 하는거 정리도 할겸, 모르는 분들이 쉽게 할 수 있도록 할 겸, 정리한번 해 봅니다. 예전 안드로이드 처럼 연재가 끊길 수도 있으나, GWT는 이미 다 알고 있는 상태라~~~.

자~ 이제 시작하기 전에 준비물을 준비하자.

1. Java JDK 1.5 이상 (http://java.sun.com 에서 알아서 받으세요)
2. Eclipse 3.3 이상에 WebTools Platform 2.0 포함된거 (이것도 http://www.eclipse.org 에서 알아서 받으세요.)
3. Cypal Studio for GWT (요건 http://www.cypal.in/studio 에서 다운로드 받으면 됩니다.)
4. GWT 라이브러리 (요거는 구글에서 GWT 라고 치면 가장 첨에 나온다. 앞으로도 가장 첨에 안나올 리가 없다.)

Cypal 관련된 시스템 요구사항은 http://www.cypal.in/studiodocs#requirements 를 참조하기 바란다.

일단 자바랑 Eclipse 3.3은 다운로드 받아서 설치했다고 치고, Cypal studio랑 GWT 라이브로도 다운로드 받았다고 치고 시작하겠다.

다음의 순서에 따라서 세팅해 주기 바란다.

1. Cypal studio를 다운로드 받아서 압축파일을 풀면 4개의 jar 파일이 있는데, 그 파일을 이클립스 설치 위치/plugin 폴더에 몽땅  복사하고, 이클립스를 띄운다. (이클립스가 이미 띄워져 있는 상황에서는 다시 띄워라)

2. 이클립스를 띄웠으면, 메뉴에 Window --> Preferences를 눌러 Cypal Studio 라는걸 찾는다. (없으면 잘 찾아보기 바란다.)

3. Cypal Studio를 눌러서 보면, GWT 라이브러리의 Home 위치를 지정하는 입력 상자가 상단에 있는데 거기에 GWT 압축을 해제한 디렉토리를 지정해준다. (doc, samples 폴더가 하위에 있는 위치를 지정하면 된다.)

4. 이제 이클립스 플젝을 맹글어야 하는데, New project... 을 누른 후 플젝 종류를 선택하는 화면에서 Dynamic Web Project를 클릭한 후 Next를 누른다.

5. 그 다음에서 프로젝트 이름을 지정한 이후에 Configuration 지정하는 부분에서 drop down 메뉴를 내려서 "Cypal Studio for GWT"를 선택해야만 한다. (반드시 !!!!!)

6. 그 다음에 finish를 누르면 GWT를 맹글 수 있는 프로젝트 생성 및 초기 설정이 완료된다.


다음에는 GWT 샘플을 돌려보면서 GWT를 어떻게 사용할 수 있는지 알아보자.

Posted by tuning-java
,

GWT를 사용하다보면 Frame 객체를 사용할 경우가 있다.

이때, border는 아무리 css에 적용을 해도, 지워지지 않는다.

아무래도 버그인듯 하다.

그에 대한 해결책은 다음과 같다.

com.google.gwt.user.client.DOM.setIntAttribute(frame.getElement(), "frameBorder", 0);

만약 끝의 숫자를 1로 하면, border가 나타난다.

Posted by tuning-java
,
http://code.google.com/webtoolkit/documentation/com.google.gwt.doc.DeveloperGuide.UserInterface.WidgetGallery.html


GWT에서 현재 제공중인 위젯들의 모음은

위의 URL에서 확인할 수 있다.

그런데, 실제 API에서 제공하는 위젯들을 구현해 보면,

거기에 있는 예제 그림과 많이 틀리다...


동일하게 하려면, CSS를 적용해야 하는데,

http://code.google.com/webtoolkit/documentation/examples/desktopclone/

요 소스와

http://code.google.com/webtoolkit/documentation/examples/kitchensink/

요 소스를 분석하면, 어떻게 CSS가 적용되어 있는지 확인이 가능하다.
Posted by tuning-java
,

변한게 별로 없을 것이라 생각하고...

일단 예전에 정리해 놓은것을 올려놓겠다.

출처는 Googlipse 홈페이지.


I know you don't have time to read a manual with dozens of pages. So here is a shortest manual possible for Googlipse.

여러분들이 여러 페이지의 메뉴얼을 읽을 시간이 없다는걸 저도 알고 있습니다. 그래서, Googlipse에 대한 가장 짧은 메뉴얼이 여기 있습니다.


Requirements:
요구사항 :

      Googlipse requires Eclipse 3.2 with WebTools Platform 1.5 running on a Java 1.5 VM. You need to separately install Google Web Toolkit.

      Googlipse 는 자바 1.5 VM에서 작동되고, 웹툴 플랫폼 1.5가 설치되어 있는 Eclipse 3.2가 필요합니다. GWT는 따로 설치해 놓으셔야 하구요.


Installation:
설치:

(*) Drop the com.googlipse.gwt_.jar file in your eclipse\plugins folder
(*) Open Eclipse. Select Window->Preferences->Googlipse and set GWT home to the directory where you have installed the Google Web Toolkit.
(*) You are all set to code.


(*) com.googlipse.gwt_.jar 파일을 eclipse\plugins 폴더에 떨궈 놓으세요.
(*) Eclipse를 엽니다. Window->Preferences->Googlipse 를 선택하고 GWT home 위치를 여러분이 GWT를 설치한 디렉토리로 설정하세요.
(*) 이제 모든 준비는 끝났지요.

Adding Googlipse to your project:
      Googlipse is implemented as a WTP Facet. When creating a new Dynamic Web Project, select Googlipse in the Project Facets page. If you already have a Dynamic Web Project, you can add Googlipse facet by selecting Project->Properties->Project Facets(Please make sure you don't have gwt-user.jar in your classpath). In case you didn't like Googlipse, you can remove the facet.

Googlipse를 프로젝트에 추가하기:
      Googlipse는 WTP Facet로 구혔되었습니다. 새로운 Dynamic Web Project때에는, Project Facets페이지에서 Googlipse를 선택하세요. 이미 Dynamic Web Project가 있을 경우에는, Project->Properties->Project Facets를 선택해서 Googlipse facet를 추가할 수 있습니다. (gwt-user.jar가 클래스패스에 없는지 꼭 확인하시구요). Googlipse가 마음에 안드시면, facet을 삭제하실 수 있습니다.


Creating a Module:
      Once you have a Dynamic Web Project with Googlipse facet, you can add a new module by File->New->Other->Googlipse->Gwt Module. Modules can be created only in valid java packages (default package is not allowed). Either you can type in the package (with project & source folder) in the location field or you can select it by clicking Browse button. You can also click the Create button to create a new package. Next type in the name of the module. Click Finish, you will have all the artifacts for the module generated.

모듈 생성 :
      Googlipse facet을 사용하는 Dynamic Web Project 이 있을 경우에는 , File->New->Other->Googlipse->Gwt Module을 통해서 새로운 모듈을 추가할 수 있습니다. 모듈은 적합한 자바 패키지를 사용하였을 경우에만 추가 됩니다. (기본 패키지는 불가함). 패키지에서 location 필드를 입력하거나 Browse 버튼을 선택해서 패키지를 선택할 수 있습니다. Create 버튼을 클릭해서 새로운 패키지를 만들 수도 있습니다. 그 다음에는 모듈 이름을 입력합니다. Finish를 누르면, 모듈과 관련된 모든 결과물들이 만들어집니다.


Adding a Remote Service:
      Note :A Remote Service will be created only in a module. So if you don't have a module, you need to create one using the New Module wizard, before this step. You can select File->New->Other->Googlipse->Gwt Remote Service. Click the Browse button and select the module (the gwt.xml file). Type the name and uri for the service and click Finish. Now the artifacts for the remote service will be generated. Entries are added to web.xml and gwt.xml


리모트 서비스 생성:
      노트 : 리모트 서비스는 모듈에서만 추가가 됩니다.그래서 모듈이 없으면, 이 단계 이전에 신규 모듈 위저드를 사용해서 하나 생성해야 합니다. File->New->Other->Googlipse->Gwt Remote Service를 선택하세요. Browse 버튼을 누르고, 모듈을 선택하세요 (gwt.xml파일 선택). 서비스를 위한 이름과 uri를 입력한 후 Finish버튼을 클릭하세요. 리모트 서비스를 위한 결과물들이 만들어집니다. 이러한 엔트리들은 web.xml과 gwt.xml에 추가가 됩니다.

Adding a Remote Service method:
      You can open the RemoteService interface and add/change methods in it. You need to provide the implementation of those methods in RemoteServiceImpl class, but thanks to Googlipse, you don't have to do anything in RemoteServiceAsync. Googlipse will automatically update the corresponding Async file whenever a RemoteService interface is changed.

리모트 서비스 메소드 추가하기 :
      리모트 서비스 인터페이스 파일을 열어서 메소드를 추가하고 삭제할 수 있습니다. 여러분은 RemoteServiceImpl 클래스를 구현해서 이 메소드의 내용을 채워야하지만, Googlipse 덕분에 RemoteServiceAsync를 구현할 필요는 없습니다. Googlipse 에서 자동으로 RemoteService 인터페이스가 변경되었을때 Async파일을 수정해 주기 때문입니다.  

Calling a method using Remote Service:
      The utility class in the Remote service should help you in making the remote call.

MyRemoteServiceAsync async = MyRemoteService.Util.getInstance();
async.makeRemoteCall(param1, param2, callback);

리모트 서비스를 사용하여 메소드 호출하기 :
      리모트 서비스에 있는 유틸리티클래스는 여러분이 리모트 호출을 만드는 것을 도와주도록 되어 있습니다.
.
MyRemoteServiceAsync async = MyRemoteService.Util.getInstance();
async.makeRemoteCall(param1, param2, callback);

Running/Debugging a Gwt Application:
      Select Run->Run/Debug to activate the Lauch configuration dialog box. Double Click "Gwt Application". In the main page, you can select the Project & Module you want to run. In the parameters page you can select the parameters such as port and log level. Click Run to execute the GwtShell & bring up your application. The laucher will add the jar files & all the source folders in the project to your application.


Gwt 애플리케이션을 실행 및 디버그하기 :
      Run->Run/Debug 를 선택해서 실행 설정 다이얼로그 박스를 띄우시기 바랍니다. 여기서 "Gwt Application"을 더블클릭합니다. 메인 화면에서, 실행을 원하시는 Project & Module 선택하세요. 매개변수 페이지에서는 포트나 로그레벨과 같은 설정을 변경합니다. Run을 선택하셔서 GwtShell을 수행하시고, 여러분의 애플리케이션을 수행시키세요. 런쳐는 jar파일과 여러분의 애플리케이션의 프로젝트에 있는 모든 소스 폴더를 포함하여 실행하게 됩니다.

Deploying in external servers:
      You have to launch GWT app in the hosted mode, as said above, and click 'Compile/Browse' button to do the compilation. After than, you can add the project to any external server configured thru Eclipse-WTP, just as the way you used to deploy the normal Dynamic Web Application.


외부 서버에 설치하기 :
      GWT 애플리케이션을 hosted mode로 실행하셔야 합니다. 컴파일을 하기 위해서  'Compile/Browse' 버튼을 클릭하세요. 그 다음에는, 여러분은 어떠한 서버라도 Eclipse-WTP를 통해서 일반 웹 애플리케이션을 디플로이 하는 방식처럼 외부 서버에 프로젝트를 추가할 수 있습니다.


Creating a war:
      Compile the module as said in the above step. Select File->Export->Export as war. Follow the wizard. No more ant tasks :-)

war 파일 만들기:
      위의 단계에서 사용된 모듈을 컴파일 하시기 바랍니다. 그 다음 File->Export->Export as war를 선택하세요. 위저드를 실행시키면, 더이상의 ant 태스크는 필요가 없게 됩니다. :-)
Posted by tuning-java
,
http://www.cypal.in/studio

예전에는 Googlipse 라는 이름으로 제공된 툴인데,
이름이 싸이팔 스튜디오라는 이름으로 바뀌었다.

예전 사이트 주소는
http://www.googlipse.com/
이다.

이 툴을 사용하면 손쉽게 이클립스 상에서 GWT를 개발할 수 있다.
Posted by tuning-java
,

Google에서 GWT (Google Web Toolkit)을 공개 했다.

왜 했을까 ?

원문 출처 : http://code.google.com/webtoolkit/overview.html



What is Google Web Toolkit?
구글 웹 툴킷이 뭔가 ?

Google Web Toolkit (GWT) is an open source Java development framework that lets you escape the matrix of technologies that make writing AJAX applications so difficult and error prone. With GWT, you can develop and debug AJAX applications in the Java language using the Java development tools of your choice. When you deploy your application to production, the GWT compiler to translates your Java application to browser-compliant JavaScript and HTML.

GWT는 오픈소스 자바 개발 프레임웍이며, AJAX개발을 쉽게 할 수 있도록 도와준다. GWT로 AJAX를 개발하고 디버그할 수 있으며, 당신이 사용중인 자바 개발 툴을 사용할 수 있다. 당신의 어플리케이션은 프로덕션으로 만들때, GWT 컴파일러는 당신의 자바 어플리케이션을 브라우져에서 사용가능한 자바스크립트와 HTML로 번역해준다.

Here's the GWT development cycle:

GWT 개발 사이클을보면 다음과 같다.

  1. Use your favorite Java IDE to write and debug an application in the Java language, using as many (or as few) GWT libraries as you find useful.

    당신이 좋아하는 자바 IDE에서 자바언어로 어플리케이션을 만들고 디버그해라. 최대한 많은 GWT 라이브러리를 사용해서.
  2. Use GWT's Java-to-JavaScript compiler to distill your application into a set of JavaScript and HTML files that you can serve with any web server.

    GWT의 자바 to 자바스크립트를 사용해서 당신의 어플리케이션을 자바스트립트 셋과 HTML파릴로 만들어라. 그러면 어떠한 웹서버에서도 사용이 가능해진다.
  3. Confirm that your application works in each browser that you want to support, which usually takes no additional work.

    당신이 만든 어플리케이션이 여러 브라우져에서 수행되는지를 확인해 보라. 아마도 추가적인 일을 할것이 없을 것이다.
       

Why Translate Java Code to JavaScript ?
왜 자바코드를 자바스크립트로 변환해야 하는가 ?

Java technologies offer a productive development plaform, and with GWT, they can instantly become the basis of your AJAX development platform as well. Here are some of the benefits of developing with GWT:
자바 기술은 생산성 좋은 개발 플렛폼을 제공하고, GWT를 이용하면 AJAX 개발 플렛폼에서 개발을 쉽게 할 수 있다. GWT의 장점은 다음과 같다.

  • You can use all of your favorite Java development tools (Eclipse, IntelliJ, JProfiler, JUnit) for AJAX development.

    당신이 좋아하는 AJAX개발을 위해서 자바 개발툴을 사용할 수 있다.(이클립스, 인텔리J, J프로파일러(이건 프로파일런데...), J유닛(이건 테스트 툴인데)
  • Static type checking in the Java language boosts productivity while reducing errors.

    자바 언어의 정적 타입 체크 기능으로 에러를 줄이고 생산성을 향상 시킬 수 있다.
  • Common JavaScript errors (typos, type mismatches) are easily caught at compile time rather than by users at runtime.

    실행시에 에러를 잡아내는 것 보다 컴파일시에 일반적인 자바 스크립트 에러를 쉽게 잡아낼 수 있다.
  • Code prompting/completion is widely available.

    코드 프롬프팅 및 완료가 가능하다.
  • Automated Java refactoring is pretty snazzy these days.

    자동화된 자바 리펙토링이 쉽도록 되어 있다.
  • Java-based OO designs are easier to communicate and understand, thus making your AJAX code base more comprehensible with less documentation.

    자바 기반의 객체지향 디자인은 커뮤니케이션하고 이해하기에 쉽도록 되어 있기 때문에, 당신의 AJAX코드 기반으로 반드는 것은 문서화 작업을 적게하고 이해하기가 쉽다.
Posted by tuning-java
,