update, 2016-06-14
지금 생각에는 GWT 는 여러모로 생산성이 떨어진다. GWT 가 생산성을 높이는 경우가 있다면, 아마도 java나 java 로 손쉽게 porting 할 수 있는 program 을 web client 로 변환시킬 경우가 아닐까 생각한다.
----------------------------------------
Spring 은 기존의 Web2.0 을 표방하는 site 등을 만드는 데에 적합하고,
GWT 는 rich web browser application 을 만드는데에 적합하다고 한다.
실제로 Spring 은 jsp 를 편하게 작성하는 부분이 따로 존재하지는 않는다. Spring 은 server 쪽의 구성에 초점이 맞춰져 있다.
GWT 는 그것보다는 client 를 작성하는데에 초점이 맞춰져 있다.
그리고 GWT 는 debug 도 가능하고, unittest 도 가능하다고 한다.
실제로 debugging 하기가 너무 좋다. ^^;;; 좀 더 자세한 Development mode 에 대한 이야기는 See also 을 참고하자.
그리고 여기 최신 글(2014. 02)이 있다. 한 번 읽어보면 좋을 듯 하다.
GWT 설치 eclipse plug in 설치
http://www.gwtproject.org/usingeclipse.htmlclient package 와 server package 가 생성되는데, client package 는 나중에 javascript 로 바뀐다.
Project 에서 오른쪽 버튼 click > google > GWT compile
참고로, intelliJ 에서도 GWT 를 사용할 수 있다.
- http://docs.sencha.com/gxt-guides/3/basics/install_gwt_plugin/gwt_plugin_install_idea/Gwt_Plugin_Install_Idea.html
- Settings > Plugins >
결과 Test
eclipse plugin
eclipse plugin 을 사용하면, server 를 띄워주는데(Run > Debug As > Web Application), 이때 chrome 으로 접속하면 GWT Developer Plugin 을 설치하라고 한다. 설치하면 chrome 으로 local host 에서 새로운 connection 을 열수 있게 돼서 network 관련 사항을 test 할 수 있다.GWT Developer Plugin 설치
참고로 client 부분에서 view 부분과 관련된 간단한 수정은, development mode 가 실행되고 있다면, 그냥 browser 만 refresh 해서 결과를 확인할 수 있다. java file 을 save 해보면 알 수 있다. server 를 restart 를 해야 하는 경우는 popup 이 뜬다.
chrome 에서 local javascript 를 실행하는 방법
chrome 을 실행할 때 인자(argument)에 넣으면 된다.
--allow-file-access-from-files아직 test 는 못 해봤지만 ref. 4 에서는 잘 된다고 한다.
Widgets and Panels
GWT 로 사용할 수 있는 Widget 과 Panel 들은 아래에서 확인할 수 있다.
UiBinder
GWT 에서는 복잡한 UI 를 만들 수 있도록 UiBinder 를 지원한다고 한다. xml 등을 이용해서 Widget 등을 만들 수 있다고 한다.Project explorer > new > Google Web Tookit > UiBinder 로 java 와 xml 파일을 생성할 수 있다.
이렇게 만들어진 녀석을 <Your_WepApp>.java 에서 new 하고, RootPanel 에 add 해서 사용하면 된다.
GWT tutorial
여기서는 stock(주식) 종목 몇개의 price 를 일정주기로 update 해주는 예제를 소개 해 주고 있다.
GWT UI hierarchy 에서 가장 상위에 있는 녀석은
RootPanel
이다. 얘를 중심으로 다른 녀석들을 접근할 수 있다.
RootPanel.get() // body 에 접근
RootPanel.get("id_name") // id 가 id_name 인 녀석에 접근
UI 에 static element 가 있는 경우에는 html 을 직접 수정해 준다. 그래서 page 의 title 등은 직접 html 을 수정해야 하고, 자신의 원하는 container 의 id 등을 설정할 때도 page 를 수정해서 원하는 녀석을 넣으면 된다.
source download
참고로, source 의 <base_path>\war\WEB-INF\lib 는 현재 eclipse 에 설정된 버전의 것을 사용하자.Debug
디버깅은 간단하다. 기존의 java code 를 debug 하는 것 처럼 하면 된다. code 에 breakpoint 를 찍으면 해당 line 이 수행 될 때 잘 멈춰준다. javascript 로 debugging 하는 것이 훨씬 편하다.CSS
css 는 따로 작성할 것을 권장한다. 관련된 java api 도 별로 제공하지 않는다고 한다.작성은 따로 해도 class 적용은 javascript 에서 유연하게 적용할 수 있는 것처럼 유연하게 사용할 수 있다.
기본적으로 GWT module 에서 default 로 사용하는 녀석은 MyWebApp.gwt.xml 에서 확인할 수 있다.
기본적으로 project 이름의 css 를 하나 만드는데 이녀석은 기본적으로 <project_name>.html 에서 사용하고 있다.
css 를 어디에서 include 시키느냐에 따라 2가지 방법이 있는데
- XML(<YourWebApp>.gwt.xml) 에서 include 시키는 방법(참고)
- HTML 에서 include 시키는 방법
여러모로 1번째것이 좋다. [참고]
<YourWebApp>.gwt.xml
에서 theme 을 바꾸고 난 후에는 저장하고 서버를 relaunch 를 해야 한다.
See Also
Reference
- http://stackoverflow.com/questions/13714018/spring-gwt-or-spring-vs-gwt
- http://stackoverflow.com/questions/8455435/jquery-vs-google-closure-va-gwt-pros-cons-for-large-web-application-developmen/8458169#8458169
- http://www.gwtproject.org/usingeclipse.html
- http://stackoverflow.com/questions/18586921/how-to-launch-html-using-chrome-at-allow-file-access-from-files-mode
댓글 없음:
댓글 쓰기