Gxt , Ext Gwt강좌2011. 1. 11. 10:27
2011/01/06 - [Gxt , Ext Gwt강좌] - Ext Gwt[Gxt] 강좌07-GxtSmpl모듈 개발하기


1. 우리는 gxtsmpl.client아래에 GxtSmplService라는 이름으로 서비스를 생성하였다. 이제 생성된 서비스를 이용하여
     서비스내에 메소드를 작성하고 이 작성된 메소드를 Client UI에서 이용할 수 있도록 코딩하도록 하자.
우선 추가한 Service에 데이터베이스에서 테이블의 내용을 끌고 올 메소드를 정의하자.
// GxtSmplService.java   
public interface GxtSmplService extends RemoteService {   
/**  
 * Utility class for simplifying access to the instance of async service.  
 */  
  public static class Util {   
    private static GxtSmplServiceAsync instance;   
      public static GxtSmplServiceAsync getInstance(){   
        if (instance == null) {   
          instance = GWT.create(GxtSmplService.class);   
        }   
        return instance;   
      }   
  }   
  // Return type과 LoadConfig에 주목하자.   
  public BaseListLoadResult getSystemUserList(BaseListLoadConfig config, HashMap param) throws Throwable;   
}   
// GxtSmplServiceAsync.java   
public interface GxtSmplServiceAsync {   
  public void getSystemUserList(BaseListLoadConfig config, HashMap param,
 AsyncCallback> callback);   
}  
2. 위와 같이 GxtSmplService.java에 메소드를 정의하게 되면 같은 패키지의 GxtSmplServiceAsync.java와 GxtSmplServiceImpl.java에도 동일한 메소드가 정의 된다. GxtSmplService.java와 GxtSmplServiceAsync.java는 인터페이스로 메소드를 정의하고 실제 구현은 server패키지내의 GxtSmplServiceImpl.java에서 하게 된다. com.hansol.gxtsmpl.server.GxtServiceImpl.java를 열어서 아래와 같이 시스템 로그를 남겨 클라이언트에서 서버와 통신하는지 알아보도록 하자.
@Override  
public BaseListLoadResult getSystemUserList(BaseListLoadConfig config, HashMap param) 
throws Throwable {   
  System.out.println("호출되나.....");   
}  

이제 실제 클라이언트 단에서 위의 메소드를 콜하도록 GridSmplTabItem클래스의 prepareService메소드를 수정하자.
	
private GxtSmplServiceAsync service; // 서비스선언
private HashMap param = new HashMap(); // 파라메터 전달용 hashmap
	/**
	 * Desc : 서버통신모듈 관련
	 */
	public void prepareService(){
		downGridPanel = new ContentPanel();
		downGridPanel.setHeading("관리자 현황");
		downGridPanel.setWidth(800);
		downGridPanel.setHeight(400);
		service = (GxtSmplServiceAsync) Registry.get(GxtApp.SERVICE);
		proxy = new RpcProxy>() {
			@Override
			public void load(Object loadConfig,	AsyncCallback> callback) {
				//try{param.put("search_name", search_name.getValue());}catch(Exception e){System.out.println("!!!!!!!!!!!!!!!!"+ e.toString());};
				
				service.getSystemUserList((BaseListLoadConfig) loadConfig, param, callback); // 추가한 메소드 호출
			}
		};
		loader = new BaseListLoader>(proxy);
		loader.setRemoteSort(true);
		store = new ListStore(loader);
		store.setMonitorChanges(true);
	}
------------------------------------------------------------------------------------------
// GxtApp.java의 상단에 아래 내용 추가해주세요. 그래야 위에서 호출하는 GxtApp.SERVICE가 
// 에러가 안나겠죠.
------------------------------------------------------------------------------------------
// 서버와 통신모듈 선언
	public static final String SERVICE = "GxtSmplService";

3. 이제 예제를 실행하면 아래와 같이 Console창에 로그가 출력되는 것을 확인 할 수 있다.

4. 이제 Client와 Server가 통신하는 것을 확인했으니 Impl클래스를 제대로 구현해서 Grid에 내용이 표시되도록 해보자. 우리는 데이터베이스안 데이터를 Select해와야 하므로 디비와 통신하기 위한 설정이 필요하다. 여기서는 간단하게 jdbc드라이버와 jdbc드라이버를 구현하는 클래스를 만들도록 해보자.
우선 jdbc드라이버를 war/WEB-INF/lib폴더에 카피하고 이클립스가 인식하도록 아래 그림과 같이 Build Path를 잡아주도록 하자.


5. 이제 DBSource라는 클래스를 만들고 디비커넥션을 맺어 올수 있도록 코딩하자. 클래스는 server 아래에 두도록 한다.
package com.hansol.gxtsmpl.server;   
  
import java.sql.Connection;   
import java.sql.DriverManager;   
  
public class DBSource {   
  static String driver;   
  static String url;   
  static String user;   
  static String passwd;   
  
  public static  Connection getConnection( String name) throws Exception{   
    driver = "oracle.jdbc.driver.OracleDriver";   
    url = "jdbc:oracle:thin:@디비서버아이피:포트:SID";      
    user = "user명";   
    passwd = "패스워드";   
    Class.forName(driver);   
    Connection con = DriverManager.getConnection(url, user, passwd);   
    return con;       
  }   
}  
6. 이제 Impl클래스의 메소드를 변경해보자. 기존 System.out.println("호출되나''");는 삭제하고 아래와 같이 코딩하자.
@Override  
public BaseListLoadResult getSystemUserList(   
  BaseListLoadConfig config, HashMap param) throws Throwable {   
  // return시 java.util.List에 LoginUserInfo객체를 차곡차곡 쌓아 리턴한다.   
  List returnValue = new ArrayList();   
  Connection conn = null; // 데이터베이스 커넥션 객체   
  PreparedStatement pstmt = null;  // 쿼리를 실행할 Statement객체   
  ResultSet rs = null;  // 쿼리를 실행한 후 꺼내온 데이터를 담을 객체   
  StringBuffer sql = new StringBuffer(); // SQL을 정의할 StringBuffer클래스   
  try{   
    conn = DBSource.getConnection(); // DBSource클래스에서 커넥션을 생성한다.   
    // 이하 쿼리 정의    
    // 쿼리는 테이블 내의 데이터를 모두 가져온다.    
    // 이때 주의할 것은 Client Grid의 컬럼정의 시(new ColumnConfig("userSabun",    
    // "사번", 75)) ColumnConfig생성시 사용된 이름과 컬럼명이 동일해야 Sort처리시 쿼리에     
    // 문제가 발생하지 않는다 해서 아래 쿼리에서는 alias를 주어 실제 컬럼명과 Grid에서   
    //  사용된 컬럼명을 일치 시켜주도록 하고 SubQuery를 사용해 sort시 문제가 발생하지    
    // 않도록 조치했다.   
    sql.append(" select * from (");   
    sql.append(" Select userid userSabun, username userName,     \n");   
    sql.append("  orgoid userOrgOid, orgname userOrgName,    \n");   
    sql.append("  teamname userTeamName, inputdate,     \n");   
    sql.append("  confirmyn confirmYnTmp,        \n");   
    sql.append("  decode(confirmyn,'Y','예','아니오') confirmYnName \n");   
    sql.append("  From COMMONLOGINUSER         \n");   
    sql.append(" ) \n");   
    // Sort에 대한 처리 LoadConfig에서 Sort에 대한 속성이 정의 되어 있다.   
    // Grid화면에서 컬럼을 클릭할 때 마다 Sort에 대한 속성이 변경되어 서버에 전달된다.   
    if(config.getSortField() == null) sql.append(" order by username asc ");   
    else sql.append(" order by "+ config.getSortField()+" "+ config.getSortDir());   
    // 쿼리문을 통해 statement생성   
    pstmt = conn.prepareStatement(sql.toString());   
    // statement를 통해 생성 된 결과를 ResultSet에 담는다.   
    rs = pstmt.executeQuery();   
    // loop돌면서   
    while(rs.next()){   
      // LoginUserInfo객체를 생성   
      LoginUserInfo entity = new LoginUserInfo();   
      entity.setUserName(rs.getString("username"));   
      entity.setUserSabun(rs.getString("userSabun"));   
      entity.setUserOrgOid(rs.getString("userOrgOid"));   
      entity.setUserOrgName(rs.getString("userOrgName"));   
      entity.setUserTeamName(rs.getString("userTeamName"));   
      entity.setInputDate(rs.getDate("inputdate"));   
      entity.setConfirmYnName(rs.getString("confirmYnName"));   
      entity.setConfirmYnTmp(rs.getString("confirmYnTmp"));   
      // return할 java.util.List객체에 차곡차곡 쌓는다.   
      returnValue.add(entity);   
    }   
  } finally {   
    // 사용된 자원에 대한 해제는 필수적으로...   
    try{ rs.close(); }catch(Exception e){}   
    try{ pstmt.close(); }catch(Exception e){}   
    try{ conn.close(); }catch(Exception e){}   
  }   
  // java.util.List에 담긴 데이터를 최종 리턴Type인 BaseListLoadResult를 생성하여 리턴.   
  return new BaseListLoadResult (returnValue);   
}  


7. 이제 코딩이 끝났으니 이클립스 Console에서 빨간색 버튼을 클릭해 실행을 정지 시키고 다시 시작해보자 우리는 Server쪽 메소드를 변경하였으므로 이과정이 꼭 필요하다. Client쪽이 변경된 경우에는 브라우저를 리프레시하면 변경된 내용이 적용되지만 서버쪽은 꼭 리스타트해줘야 변경된 내용을 확인 할 수 있다.
내용에 비해 Grid가 좀 큰듯하여 TabItem의 Width를 500으로 Grid의 Height를 240으로 변경하였다.실행된 화면을 확인하자

Posted by 1 베니94

댓글을 달아 주세요

  1. andromeda

    강좌 잘보고 있습니다 ^^
    요근래 GWT에 대해 급관심을 가지다가 benny님의 블로그를 자주보게 되네요.
    새해 복 많이 받으시고 좋은 글 감사합니다.
    아참 질문 하나 해도 될까요..
    gwt로 검색해보면 대개 GWT, Ext Gwt, Gwt Ext....이렇게 세가지가 나오더라구요. 간단한 차이점이나 개념?
    정도 여쭙고 싶어요.
    주말 잘 보내시고 자주 올께요 - *

    2011.01.14 10:37 [ ADDR : EDIT/ DEL : REPLY ]
  2. 흠.. 좀 설명을 드리면요..
    첫째는 Gwt가 있겠죠. Google web Toolkit에 약자일 테구요.
    - 자바를 이용해서 일반 swing이나 이클립스의 swt처럼 개발할 수 있도록 지원하고 컴파일하면 웹파일 자바스크립트나 html등으로 변경되어 최종적으로는 웹프로그램이 서버에 올라가서 작동하는 개념이죠.

    둘째는 Ext Gwt 줄여서 Gxt라고 부르죠 .. 이놈의 시작은 extjs로 시작하는데요. extjs는 gwt와는 전혀 별개로 javascript를 이용해서 Ria 프로그램이 가능하도록 하는 일종에 UI프레임웍이로고 할 수 있죠.
    extjs.com 이제는 http://www.sencha.com/로 변경되었지만 아무튼 이놈을 예전에 써봤는데 상당히 괜찮은듯 합니다. 자바스크립트하고 기타 css를 알아야 한다는 단점이 있지만요.
    Gxt는 위에서 설명한 extjs를 Gwt버전으로 만든 놈이라고 생각하시면 되겠습니다. 그러니깐 최종 결과물 화면상 보기에는
    extjs나 Gxt나 똑 같다는 거죠.

    세번째로 Gwt Ext가 있는데요 . 이놈은 Gxt하고는 좀 다른놈인에요. 전에 언뜻 들은 애기로는 Ext Gwt를 만든 사람중에 한명이 나와서 비슷하게 새로 만들었다는 소문이.. ㅋㅋ 아무튼 그렇습니다.

    2011.01.14 12:54 신고 [ ADDR : EDIT/ DEL : REPLY ]
  3. andromeda

    답변 감사합니다 ^^;
    지난주에 좀 해보다가 패키지가 꼬여서 좌절(?)했는데 이번주엔 잘해봐야겠네요 - *
    행복한 한 주 시작하세요 ~

    2011.01.17 09:37 [ ADDR : EDIT/ DEL : REPLY ]
  4. 감사합니다

    6장까지는 잘따라가겠는데 7장에서 힘드네요..
    지금 소스가 어디의 소스인지 상단이라하면 어느정도인지 등등..
    6장까지는 쉽게 갔는데 7장에서 멈췄습니다 ㅜㅜ

    2011.02.24 14:26 [ ADDR : EDIT/ DEL : REPLY ]
  5. 복슬이

    블로그 글 잘 봤습니다. ^^

    그런데 빠진 부분이 있는 것 같네요.

    GridSmplTabItem 클래스에서 prepareService() 메소드 안에 load() 구현부분이 빠진 것 같네요..


    proxy = new RpcProxy<BaseListLoadResult<LoginUserInfo>>() {
    @Override
    protected void load(Object loadConfig, AsyncCallback<BaseListLoadResult<LoginUserInfo>> callback) {
    GxtSmplServiceAsync ins = GxtSmplService.Util.getInstance();
    HashMap param = new HashMap();
    ins.getSystemUserList((BaseListLoadConfig) loadConfig, param, callback);
    }
    };

    2011.03.05 12:49 [ ADDR : EDIT/ DEL : REPLY ]
    • 아 죄송합니다. 제가 나중에 구현한다고 주석달아 놓구선
      그부분을 강좌에서 빼먹었네요 ㅠㅠ 댓글의 내용대로 맞습니다. 수정토록 하겠습니다.

      2011.03.05 21:35 신고 [ ADDR : EDIT/ DEL ]
  6. 김한웅

    2번 에서 GridSmplTabItem클래스의 prepareService메소드를 수정 할때 11줄에 GxtApp.SERVICE 이부분은 GxtApp에서 따로 지정해줘야 될것은 없나요?
    그리고 15줄에 param와 search_name에 대한 선언이 없는것 같은데? 어떻게 지정해주죠?

    2011.03.30 15:52 [ ADDR : EDIT/ DEL : REPLY ]
    • 답변 늦어서 죄송합니다.
      GxtApp.java에 public static final String SERVICE = "GxtSmplService"; 이부분이 추가되어야 합니다. 옮기는 중 빠졌습니다.

      그리고 preparedService에서 사용하고 있는 param은
      클래스 상단에 아래와 같이 선언하시면 됩니다.
      private HashMap param = new HashMap();

      2011.05.20 17:10 신고 [ ADDR : EDIT/ DEL ]
  7. 솔베이지군

    베니94님 search_name 변수는 어디서 나온것인가요~~?

    2011.11.17 17:33 [ ADDR : EDIT/ DEL : REPLY ]
    • 그 부분은 주석으로 막혀야 할 부분이군요.
      여기서는 search_name이 검색조건의 검색텍스트를
      입력할 textfield 정도를 나중에 추가하려고
      넣었던 부분이라 주석달고 실행하셔야 겠습니다.

      2011.11.21 19:26 신고 [ ADDR : EDIT/ DEL ]
  8. 개미군단

    먼저 강좌 잘보았습니다.
    강좌를 보고 개발해 보았는데 데이터가 50건 정도를 리스트 출력하는 속도가 너무 느립니다.
    DB 속도가 느려서 그런지 체크 해보았는데 쿼리하는데 1초도 안걸립니다.
    그런데 리스트에 출력 되는 속도는 12초가 넘어 가더군요 해결 할 수 있는 방법이 없을 까요?

    2012.09.13 09:49 [ ADDR : EDIT/ DEL : REPLY ]
  9. 깡99

    안녕하세요 강좌보고 따라하는 중입니다.
    데이터베이스 로드해서 데이터를 받아오는것 까지는 되는데, 그리드에 로드한 데이터가 나오지 않습니다
    어떻게 하면 좋을까요?

    2015.05.13 19:29 [ ADDR : EDIT/ DEL : REPLY ]

Gxt , Ext Gwt강좌2011. 1. 6. 16:46
2011/01/06 - [Gxt , Ext Gwt강좌] - Ext Gwt[Gxt] 강좌06-BorderLayout을 이용한 화면프레임 구성하기

1. 우선 패키지를 하나 생성하자. com.hansol.gxtsmpl.client밑에 programs라는 패키지를 생성하자 우리는 이 패키지
     안에 새로 만들 프로그램을 추가할 것이다.

2. 패키지를 추가했다면 앞서 강좌05에서 생성한 화면의 중간에 들어갈 클래스를 생성해 보도록 하자.

3. 패키지명은 GridSmplTabItem.java로 생성하자.
     com.hansol.gxtsmpl.client.programs.GridSmplTabItem.java

4. 소스를 그대로 따라해보자. 우선 이 클래스는 TabPanel(강좌05에서 설명한 중간패널이(TabPanel이다.)에
     추가될 것이므로 TabItem을 상속 받도록 하자
public class GridSmplTabItem  extends TabItem {   
  public GridSmplTabItem() {   
    // 현재생성한 TabItem의 표기이름 지정   
    setText("Grid List");   
    // ViewPort를 탑재할 Container   
    LayoutContainer lc = new LayoutContainer();   
    // 실제 화면  UI를 탑재할 VerticalPanel    
    VerticalPanel vp = new VerticalPanel();   
    vp.setSpacing(10); // Margin   
    lc.add(vp); // LayoutContainer에 VerticalPanel을 추가한다.   
    lc.setLayout(new FlowLayout(10)); // LayoutContainer의 Layout지정   
     add(lc); // LayoutContainer를 TabItem에 추가한다.   
  }   
} 
5. GxtApp를 수정하여 위에서 생성한 클래스를 화면 중간에 삽입하고 GxtApp몯률을 실행해서 결과를 확인 해보자..
private void setTabitem() {   
  TabPanel tabPanel = new TabPanel();   
  tabPanel.setCloseContextMenu(true);   
  tabPanel.setBorderStyle(false);   
  tabPanel.setBodyBorder(false);   
  tabPanel.setTabScroll(true);   
  tabPanel.setAnimScroll(true);   
  GridSmplTabItem grid = new GridSmplTabItem(); // Grid Smpl   
  tabPanel.add(grid); // Grid Smpl을 TabPanel에 추가   
  centerPanel.add(tabPanel);   
}  
6. Grid를 추가할 패널을 생성해보자
ContentPanel downGridPanel; // Grid를 추가할 패널    
  
public void prepareService(){ //메소드를 추가하고   
  downGridPanel = new ContentPanel();   
  downGridPanel.setHeading("관리자 현황");   
  downGridPanel.setWidth(800);   
  downGridPanel.setHeight(400);   
}  
7. 생성자에 위의 메소드가 실행될 수 있도록 추가하자
public GridSmplTabItem() {   
    // 현재생성한 TabItem의 표기이름 지정   
    setText("Grid List");   
    // ViewPort를 탑재할 Container   
    LayoutContainer lc = new LayoutContainer();   
    // 실제 화면  UI를 탑재할 VerticalPanel    
    VerticalPanel vp = new VerticalPanel();   
    vp.setSpacing(10); // Margin   
    prepareService(); // 추가.   
    lc.add(vp); // LayoutContainer에 VerticalPanel을 추가한다.   
    lc.setLayout(new FlowLayout(10)); // LayoutContainer의 Layout지정   
     add(lc); // LayoutContainer를 TabItem에 추가한다.   
  }  
8. Grid를 만들기 전에 Grid에서 사용할 Entity Class를 만들도록 하자. 이 클래스는 Grid를 생성할 때 하나의 로우에 삽입되는 객체라고 생각하면 되겠다. com.hansol.gxtsmpl.client.model패키지를 추가하고 LoginUsesrInfo.java를 생성한다. 우선 아래와 같이 코딩하도록 하자
package com.hansol.gxtsmpl.client.model;   
import java.io.Serializable;   
import java.util.Date;   
import com.extjs.gxt.ui.client.data.BaseTreeModel;   
public class LoginUserInfo  extends BaseTreeModel implements Serializable {   
  public LoginUserInfo() {   
    // TODO Auto-generated constructor stub   
  }   
  public void setUserName(String userName){   set("userName", userName);   }   
  public void setUserSabun(String userSabun){   set("userSabun", userSabun);  }   
  public void setUserOrgOid(String userOrgOid){  set("userOrgOid", userOrgOid);  }   
  public void setUserOrgName(String userOrgName){  set("userOrgName", userOrgName); }   
  public void setUserTeamName(String userTeamName){ set("userTeamName", userTeamName); }   
  public void setUpdateDate(Date arg){    set("updateDate", arg);    }   
  public void setGroupId(String arg){     set("groupId", arg);    }   
  public void setInputDate(Date arg){     set("inputDate", arg);    }   
  public void setConfirmYnTmp(String arg){   set("confirmYnTmp", arg);    }   
  public void setConfirmYnName(String arg){   set("confirmYnName", arg);    }   
  public void setConfirmYn(Code arg){     set("confirmYn", arg);    }   
  
  public String getUserName(){      return (String)get("userName"); }   
  public String getUserSabun(){      return (String)get("userSabun"); }   
  public String getUserOrgOid(){      return (String)get("userOrgOid"); }   
  public String getUserOrgName(){      return (String)get("userOrgName"); }   
  public String getUserTeamOid(){      return (String)get("userTeamOid"); }   
  public String getUserTeamName(){     return (String)get("userTeamName"); }   
  public String getGroupId(){       return (String)get("groupId");  }   
  public Date getInputDate(){       return (Date)get("inputDate");  }   
  public Date getUpdateDate(){      return (Date)get("updateDate");  }   
  public String getConfirmYnTmp(){     return get("confirmYnTmp"); }   
  public String getConfirmYnName(){     return get("confirmYnName"); }   
} 
10. 이제 Grid에서 사용할 Entity객체를 생성하였으니 Grid를 통해 서버쪽 데이터를 받아올 수 있도록 Service와 Service와
연결하여 데이터를 주고 받을 수 있는 관련 객체들을 만들어보자.

11. 우선 RpcProxy가 필요하다. RpcProxy의 Rpc는 Remote Procedure Call의 약자이다. Ajax가 서버와 통신할 때
사용하는 프로토콜이라고 볼수 있다. 이 RpcProxy를 생성할 때는 서버에서 데이터를 받아올 때 사용 할 리스트객체인
(LoadResult)와 위의 8에서 정의한 Entity객체를 같이 정의해줘야한다. 소스 상단에 아래와 같이 선언하자
private RpcProxy> proxy; 
12. 다음은 Loader객체와 Store객체를를 선언한다. Loader는 Proxy와 함께 서버와 통신할수 있도 록 도와준다.
Store객체는 Loader로 부터 전달 받은 데이터를 담는 역할을 한다.
private RpcProxy> proxy;   
private BaseListLoader> loader;   
private ListStore store;
13. prepareService메소드를 수정하여 위에서 선언한 클래스를 생성하도록 하자.
public void prepareService(){   
  downGridPanel = new ContentPanel();   
  downGridPanel.setHeading("관리자 현황");   
  downGridPanel.setWidth(800);   
  downGridPanel.setHeight(400);   
  // 서버와 통신해서 가져올 데이터를 위한 객체 생성   
  proxy = new RpcProxy>() {   
  @Override  
  public void load(Object loadConfig, AsyncCallback> callback) {   
    // 나중에 구현하자    
 }   
  };   
  loader = new BaseListLoader>(proxy);   
  loader.setRemoteSort(true);   
  store = new ListStore(loader);   
  store.setMonitorChanges(true);   
}  
14.이제 Grid를 만들어보자. 우선 Grid를 만들 메소드를 하나 정의하자. 이 메소드에 Grid에 관련된 코딩을 해주자.
public void createGrid(){   
  // Column정의    
  List columns = new ArrayList();   
  columns.add(new ColumnConfig("userSabun", "사번", 75));   
  columns.add(new ColumnConfig("userName", "성명", 65));   
  columns.add(new ColumnConfig("userOrgName", "회사명", 150));   
  ColumnConfig userOrgOid = new ColumnConfig("userOrgOid", "회사코드", 120);   
  userOrgOid.setHidden(true);   
  columns.add(userOrgOid);   
  columns.add(new ColumnConfig("userTeamName", "팀명", 80));   
  ColumnConfig inputDate = new ColumnConfig("inputDate", "입력일", 70);   
  inputDate.setDateTimeFormat(DateTimeFormat.getFormat("yyyy.MM.dd"));   
  columns.add(inputDate);   
     
  ColumnConfig updateDate = new ColumnConfig("updateDate", "수정일", 70);   
  updateDate.setDateTimeFormat(DateTimeFormat.getFormat("yyyy.MM.dd"));   
  columns.add(updateDate);   
    
  ColumnConfig confirmYn = new ColumnConfig("confirmYnName", "승인여부", 70);   
  confirmYn.setHidden(true);   
  columns.add(confirmYn);   
  // 정의된 컬럼을 이용해 컬럼모델을 생성한다.    
  ColumnModel cm = new ColumnModel(columns);   
  // Store객체와 컬럼모델을 통해 Grid를 생성한다.   
  Grid grid = new Grid(store, cm);   
  grid.setStateId("-");   
  grid.setStateful(true);   
  // Grid가 보여질때 이벤트 처리   
  grid.addListener(Events.Attach, new Listener>() {   
    public void handleEvent(GridEvent be) {   
 // Grid가 Attach될 때Loader를 통해 서버에서 데이터를 가져오도록 명령한다.    
     loader.load();   
    }   
  });   
  // 보여질 Grid의 로우를 하나를 선택할 것인지 복수개를 선택할 것인지 설정.   
  grid.getSelectionModel().setSelectionMode(SelectionMode.SINGLE);   
  grid.setLoadMask(true);   
  grid.setBorders(true);   
  // 컬럼좌우폭에 대해 가변적으로 늘어나고 줄어들고 할 컬럼을 정해준다. 필수 사항암.   
  grid.setAutoExpandColumn("userTeamName");   
  grid.setStateful(false);   
  grid.setHeight(400); // Grid의 높이를 지정해준다.   
  // ContentPanel에 그리드를 추가한다.   
  downGridPanel.add(grid);   
}  
15. 생성자 GridSmplTabItem()에 위의 메소드가 실행될 수 있도록 수정하고 실행해보도록 하자.
public GridSmplTabItem() {   
  setText("Grid List");   
  LayoutContainer lc = new LayoutContainer();   
  VerticalPanel vp = new VerticalPanel();   
  vp.setSpacing(10);   
    
  prepareService();   
  // Grid관련 정의 메소드   
  createGrid();   
  vp.add(downGridPanel);   
    
  lc.add(vp);   
  lc.setLayout(new FlowLayout(10));   
  add(lc);   
}  
16. 이하 실행된 화면을 보자 아직 서버에서 데이터를 가져오지 않고 있다. 해서 Grid에 컬럼만 보이고 내역은 보이지 않고 있다.

17.  이제 데이터를 가져올수 있도록 코드를 변경해 보자.  일단 서버와 데이터를 주고 받으려면 Service가 있어야 한다.
      Service는 화면에서 보여지는 UI가 데이터를 표현하기 위해 서버와 통신하는 수단이라고 할 수 있다. Service를 하나
      생성 해 보자.  Service생성 시에는 모듈의 Client 패키지를 선택하고 생성해야 한다.
      아래의 그림과 같이 GWT remote service를 클릭 한다.
 

 18.  ServiceName을 지정할 때는 보통 모듈명+Service로 사용하거나 다른 이름으로 하더라도
        XXXService처럼 뒤에 Service를 붙여주자.
        아래 그림은 이미 Service를 GxtSmplService로 생성한 상태라 "~already exists"
        이미 존재한다는 메시지가 나오므로 참고하시고...


19. 생성된 Service를 확인해 보자.  우리는 GxtSmplService라는 이름으로 Remote Service라는 이름으로 Service를
     생성하였다. 이 Service는 com.hansol.gxtsmpl패키지내에서  com.hansol.gxtsmpl.client아래 GxtSmplService.java,
     GxtSmplServiceAsync.java가 생성되었다.
     이 2개의 클래스는 Interface로 이 Interface의 구현은 com.hansol.gxtsmpl.server아래의  GxtSmplServiceImpl.java에
     구현해야 한다. 즉 client에 Service를 생성하고 Service에 메소드를 정의하면 Server쪽 XXXImpl.java클래스에
     구현하도록 해야한다.


20. 이제 Service롤 생성하므로서 2개의 클래스가 생성되어 총 3개의 Service관련 Class가 생성된 것을 확인했다.
     Service가 생성됨과 동시에 변경되는 것이 하나 있다. 바로 web.xml파일이다. 이 파일은 프로젝트 Root밑에 war폴더내
      의 WEB-INF아래에  존재한다.  내용을 확인 해보도록 하자.
  
  
    
    GxtSmplService  
    com.hansol.gxtsmpl.server.GxtSmplServiceImpl  
    
    
    GxtSmplService  
      /com.hansol.gxtsmpl.GxtSmpl/GxtSmplService  
      
  
21.위의 web.xml파일을 잘 살펴보면 servlet과 servlet-mapping이 추가된 것을 볼수 있는데 우리가 생성한 service가
    Servlet기반이라는 것을 알수 있다. 우선 servlet을 보면 우리가 생성한 service이름으로 servlet-name이 지정되어 있고
    sevlet-class가 명시되어 있다. 이것은 서비스가 이름이 무엇이고 클래스는 어떤 것인지 명시한 것이다. 그럼 그 아래
    servlet-mapping을 보자 이 servlet-mapping은 위에서 정의된 서블릿을 어떤모듈에서 사용할 수 있는지 명시하였다.
    GxtSmplService서비스를 com.hansol.gxtsmpl.GxtSmpl모듈에서 사용한다는 뜻이다. 그런데 우리는 GxtSmpl모듈은
    프로그램만 제공할 것이므로 GxtApp에서 GxtSmplService를 사용해야만 하는 상황이다. 그러므로 web.xml파일을 약간 
   수정하도록 하자. 수정은 servlet-mapping을 GxtApp모듈에서 사용할 수 있도록 servlet-mapping을 하나더 추가하도록
   하자.
  
  
    
    GxtSmplService  
    com.hansol.gxtsmpl.server.GxtSmplServiceImpl  
    
    
    GxtSmplService  
      /com.hansol.gxtsmpl.GxtSmpl/GxtSmplService  
      
    
    
    GxtSmplService  
      /gxtapp/GxtSmplService  
      
  
22. 수정 된 web.xml파일을 보면 "/gxtapp/GxtSmplService"라는 부분을 주목하자. 이렇게 쓴 이유는 GxtSmpl모듈에
     생성한 Service를 war밑에 있는 gxtapp모듈에서 사용하겠다는 의미로 해석하면 된다. 서블릿을 사용 해본 사람 에게는
     익숙한 Syntax라고 생각된다. 다음 강좌에서는 ClientUi에서 Server쪽 클래스에게 요청을 보내고 서버쪽 에서 요청에
     대한 응답을 어떻게 전달하는지 알아보자

2011/01/11 - [Gxt , Ext Gwt강좌] - Ext Gwt[Gxt] 강좌08-Client클래스와 서버클래스간 데이터를 주고 받자.
Posted by 1 베니94

댓글을 달아 주세요

  1. 감사합니다

    4번부터 막혔습니다.
    새로 생성된 곳의 소스인지 app.java에 새롭게 추가해 들어가는건지..
    예를들어 5번의 경우는 이미 작성된 부분이라 추가되는건 알겠고, 6번은 어디에 추가되는건지..
    7번은 4번에서 추가되는건지..
    즉 지금 작성중인 소스가 GxtApp.java인지 아니면 123번에서 새로 만든 파일인지..
    초보라 많이 헷갈리네요 여유되신다면 알려주시면 감사하겠습니다 ㅜㅜ

    2011.02.24 14:36 [ ADDR : EDIT/ DEL : REPLY ]
    • 안녕하세요
      블로그 오픈하구 질문다운 질문을 첨해주시네요 ㅋㅋ

      답변드릴께요.
      4번
      - package com.hansol.gxtsmpl.client.programs;
      - GridSmplTabItem.java입니다.
      이놈은 위의 패키지 아래에 생성된 놈입니다.
      내용은 별거 없죠. 걍 대강의 ui만 갖도록 만들었는데요.
      이 놈을 5번에서 실행시켜 5번 GetApp.java를 통해 보여주려고 하는 의도입니다.

      5번. GxtApp.java
      - 여기서 설명하는 것은 위의 4번에서 생성된 샘플클래스를 Tabitem을 통해 삽입하려고 하는거죠. 그래서 setTabitem()메소드는 GxtApp.java에 들어가면되겠죠.
      이걸 실행해 보면 GxtApp가 실행되고 탭에 4번이 보여진다는 겁니다.
      6번. GridSmplTabItem.java
      - 여기서는 4번을 수정해서 그리드를 추가한다는겁니다.
      이 후 설명은 모두 그리드에 대한 설명이니깐. GridSmplTabItem.java안의 코드라고 할 수 있습니다.

      2011.02.25 13:37 신고 [ ADDR : EDIT/ DEL ]
  2. 솔베이지군

    안녕하세요.
    현재 SDK2.4.0에서 실습해보고 있습니다.
    17번 이후에 remote service 생성시에 xxxAsync객체는 생성이 되지 않는데 해결방안 부탁드립니다..
    그냥 일단 따라해보는 중인데 복잡하네요;

    2011.11.17 17:03 [ ADDR : EDIT/ DEL : REPLY ]
    • 안나오면 그냥 만드셔두 되요 뭐 이클립스가 왜 안만드는지는 저두 해봐야겠지만 기본적으로 네이밍만 맞춰서 그냥 만들어버리세요 그걸루 공부하시는데 너무 오래 시간을 투자하진 말았으면 합니다.

      2012.02.19 22:01 신고 [ ADDR : EDIT/ DEL ]
  3. 봄날의곰

    안녕하세요. 열심히 따라하고있는데 11번에서 딱 막혀서 ㅠㅠㅠ
    private RpcProxy<baselistloadresult<loginuserinfo>> proxy;
    </baselistloadresult<loginuserinfo> 소스 상단에 선언하자, 라고 했는데..
    에러가 쫙쫙 생겨서..
    private RpcProxy(BaseListLoadResult<LoginUserInfo>> proxy;
    </BaseListLoadResult<LoginUserInfo> 로 나름 머리를 굴려보았지만..ㅋㅋ역시 에러..ㅠㅠ;;

    참..근데 이거.. GridSmplTabItem.java에 추가하는것 맞나요 /; LoginUserInfo.java 작성하다가 이어지는부분이라
    어딘지 헷갈리네요 ㅠㅠ

    2012.02.16 14:46 [ ADDR : EDIT/ DEL : REPLY ]
    • 네 GridSmplTabItem에 작성하시는게 맞습니다. 에러내용이 뭔제 좀 알려주시면 해결방법이 있을겁니다.

      2012.02.19 22:09 신고 [ ADDR : EDIT/ DEL ]
  4. 깜재

    죄송하지만 전체 패키지 구성이랑 전체 완성 소스 보여주실 수 있으세요?

    2014.02.12 09:49 [ ADDR : EDIT/ DEL : REPLY ]

Gxt , Ext Gwt강좌2011. 1. 6. 16:26
2011/01/06 - [Gxt , Ext Gwt강좌] - Ext Gwt[Gxt] 강좌05-본격적인 GXT어플리케이션 개발로 들어가자


1. 화면 프레임을 구성해보자 이 화면 프레임은 GxtApp모듈에 구성한다.
    최종 화면은 아래와 같다 . GxtApp는 화면 프레임만 제공하고 GxtApp모듈의
    Center 부분에 GxtSmpl모듈이 자리잡게 된다.


2. 최종 구성된 화면은 동서남북에 패널을 배치하였다. 이런 배치를 BoderLayout이라 부른다.


3. GxtApp.java를 아래와 같이 수정해보자.
package com.hansol.gxtapp.client;   
import com.extjs.gxt.ui.client.Style.LayoutRegion;   
import com.extjs.gxt.ui.client.util.Margins;   
import com.extjs.gxt.ui.client.widget.ContentPanel;   
import com.extjs.gxt.ui.client.widget.HtmlContainer;   
import com.extjs.gxt.ui.client.widget.TabPanel;   
import com.extjs.gxt.ui.client.widget.Viewport;   
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;   
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;   
import com.extjs.gxt.ui.client.widget.layout.FitLayout;   
import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;   
import com.google.gwt.core.client.EntryPoint;   
import com.google.gwt.user.client.ui.RootPanel;   
  
/**  
 * Entry point classes define onModuleLoad().  
 */  
public class GxtApp implements EntryPoint {   
  Viewport viewport = new Viewport(); // 동서남북을 탑재할 viewport   
  private HtmlContainer northPanel; // Top에 설치할 Html   
  private ContentPanel centerPanel; // 중간패널   
  private ContentPanel westPanel;  // 좌측패널   
  private ContentPanel eastPanel;  // 우측패널   
  private ContentPanel southPanel; // 최하단패널   
  public void onModuleLoad() {   
    viewport.setLayout(new BorderLayout());   
    createNorth();   
    createCenter();   
    setTabitem();   
    createWest();   
    createEast();   
    createSouth();   
    RootPanel rootPanel = RootPanel.get();   
    rootPanel.add(viewport);   
  }   
  private void setTabitem() {   
    TabPanel tabPanel = new TabPanel();   
    tabPanel.setCloseContextMenu(true);   
    tabPanel.setBorderStyle(false);   
    tabPanel.setBodyBorder(false);   
    tabPanel.setTabScroll(true);   
    tabPanel.setAnimScroll(true);   
    centerPanel.add(tabPanel);   
  }   
  private void createSouth() {   
    BorderLayoutData data = new BorderLayoutData(LayoutRegion.SOUTH, 220,150, 320);   
    data.setMargins(new Margins(5, 5, 5, 5));   
    data.setCollapsible(true);   
    southPanel = new ContentPanel();   
    ToolBar toolBar = new ToolBar();   
    southPanel.setTopComponent(toolBar);   
    viewport.add(southPanel, data);   
  }   
  private void createNorth() {   
    StringBuffer sb = new StringBuffer();   
    sb.append("Ext GWT Demo");   
    northPanel = new HtmlContainer(sb.toString());   
    BorderLayoutData data = new BorderLayoutData(LayoutRegion.NORTH, 33);   
    data.setMargins(new Margins());   
    viewport.add(northPanel, data);   
  }   
  private void createCenter() {   
    centerPanel = new ContentPanel();   
    centerPanel.setBorders(false);   
    centerPanel.setHeaderVisible(false);   
    centerPanel.setLayout(new FitLayout());   
    BorderLayoutData data = new BorderLayoutData(LayoutRegion.CENTER);   
    data.setMargins(new Margins(5, 5, 5, 0));   
    viewport.add(centerPanel, data);   
  }   
  private void createWest() {   
    BorderLayoutData data = new BorderLayoutData(LayoutRegion.WEST,220,150, 320);   
    data.setMargins(new Margins(5, 5, 5, 5));   
    data.setCollapsible(true);   
    westPanel = new ContentPanel();   
    ToolBar toolBar = new ToolBar();   
    westPanel.setTopComponent(toolBar);   
    viewport.add(westPanel, data);   
  }   
  private void createEast() {   
    BorderLayoutData data = new BorderLayoutData(LayoutRegion.EAST, 220, 150, 320);   
    data.setMargins(new Margins(5, 5, 5, 5));   
    data.setCollapsible(true);   
    eastPanel = new ContentPanel();   
    ToolBar toolBar = new ToolBar();   
    eastPanel.setTopComponent(toolBar);   
    viewport.add(eastPanel, data);   
  }   
}  
4. 이제 중간 Center패널에 TabPanel을 추가하고 GxtSmpl에서 생성할 UI를 탑재할 수 있도록
    함수를 정의하자.
private void setTabitem(){   
  TabPanel tabPanel = new TabPanel();   
  tabPanel.setCloseContextMenu(true);   
  tabPanel.setBorderStyle(false);   
  tabPanel.setBodyBorder(false);   
  tabPanel.setTabScroll(true);   
  tabPanel.setAnimScroll(true);   
  // 중간패널에 추가하도록 하자.   
  centerPanel.add(tabPanel);   
}  
5. [4]에서 추가한 함수가 실행될 수 있도록 onModuleLoad함수내 createSouth()함수 밑에 추가하도록 하자. 이로서 화면 프레임을 모두 완성했다. 우리는 상단과 중간패널만 사용할 것이지만 BorderLayout을 설명하기 위해 동서남 패널을 생성해 보았다. 이제는 GxtSmpl모듈을 통해 UI를 생성하고 이 화면 중간에 탑재해보도록 하자.

2011/01/06 - [Gxt , Ext Gwt강좌] - Ext Gwt[Gxt] 강좌07-GxtSmpl모듈 개발하기
Posted by 1 베니94

댓글을 달아 주세요

Gxt , Ext Gwt강좌2011. 1. 6. 13:51
2011/01/02 - [Gxt , Ext Gwt강좌] - Ext Gwt[Gxt] 강좌04- 이클립스를 이용한 Gwt & Gxt(ExtGwt)샘플프로그램 만들기

1. 프로젝트 생성하기.



나. Finish를 클릭
다. 프로젝트루트를 선택하고 "Properties"를 클릭한다.
라. Resource탭의 "Text file encoding"을 "Other: UTF-8"로 변경하고 "Apply" -> "OK"를 클릭

2. 프로젝트 변환하기
가.  Gwt Project로 변환하기


나. "OK"클릭


3. GWT모듈 추가하기
    가. 아래와 같이 모듈을 추가하자

    나. 모듈 생성창이 나오면 아래와 같이 세팅하고 "Finish"를 클릭하자


    다. Ext GWT Location창이 나오면 gxt라이브러리 홈을 지정해주고 "확인"을 클릭한다.

    라. 모듈이 추가된 이후 프로젝트의 모습이다. 우리는 총 2개의 모듈을 생성하였고
          이모듈을 이용하여 샘플코드를 작성한다.

모듈 정리하기
가. 마법사를 통해 생성된 모듈들은 기본적인 샘플코드가 구현되어 있다.
      우리는 이 샘플코드가 필요없으므로 생성된 모듈에서 필요없는 부분은 정리하도록 하자.

나. 패키지를 열어서 "com.hansol.gxtapp.client"이하의 GreetingService.java, GreetingServiceAsync.java
     를 삭제하도고 하자. 우리가 새로 명명하여 생성할 것이므로 삭제해도 무관하다.
   

    다. 삭제하게 되면 com.hansol.gxtapp.server아래의 GreetingServiceImpl.java도 같이 삭제된다.
          이는 위위 2개의 파일과 server의 파일에 쌍을 이루기 때문이다.

    라. 위의 3개의 파일이 삭제되므로 해서 이를 참조하는 GxtApp.java 파일에서 에러를
        발견할 수 있다. 에러가 나지 않도록 아래와 같이 수정하도록 하자
package com.hansol.gxtapp.client;
import com.google.gwt.core.client.EntryPoint;
public class GxtApp implements EntryPoint {
    public void onModuleLoad() {
    }
}

   마. 다음은 html파일을 손보도록 하자 우리는 gxtapp를 통해 어플리케이션에 접근하고
         GxtSmpl모듈을 통해 프로그램을 제공하도록 할 것이므로 GxtApp.html을 아래와
        같이 수정하도록 하자.
   
  
  
  
  
  
  
  
  
  
   
  
     바. 위의 소스에서 2개의 css를 포함시켰는데 이는 gxt에서 사용되는 모든 css와 화면을
       Gray색상으로 변경하는 테마를 포함시킨것이다.

     사. 다음은 xml파일을 손보도록 하자. 우리는 GxtApp를 통해 화면 프레임을 제공하고
           GxtSmpl을 통해 프레임에서 프로그램이 보이도록 할것이므로 GxtApp는 GxtSmpl모듈을
         참조하고 있어야한다.
    GxtApp.gwt.xml파일을 아래와 같이 수정하도록 하자.
  
    
    
    
    
    
    
    
  

    필요없는 주석을 모두 제거하고 실제로 추가된 부분은 Gxt를 사용하도로록
    com.extjs.gxt.ui.GXT와 GxtSmpl모듈인 com.hansol.gxtsmpl.GxtSmpl 2줄이다.

  아. 최종 GxtApp모듈을 실행해 보자.




브라우저를 통해 실행하면 아래와 같이 버튼이 출력되는데 이 버튼은 GxtApp에서 생성한
버튼이 아닌 GxtSmpl에서 생성한 버튼이다. 위에서 우리는 GxtApp에서 GxtSmpl을
참조하기 위해 GxtApp.gwt.xml안에 GxtSmpl을 기입하였다. 아래의 버튼이 나오는 것은
GxtSmpl을 참조했으나 GxtSmpl이 EntryPoint클래스를 상속하였기 때문에 GxtSmpl.java
에서 구현한 내용이 그대로 출력되게 되는것이다.
일단 GxtSmpl.java를 GxtApp.java와 동일하게 초기화된 상태로 수정하면 이후 문제는
사라진다. 그러나 근본적으로 EntryPoint가 나오지 않도록 하는것은 나중에 설명...

GxtSmpl.java를 GxtApp.java와 동일하게 수정하고 다시 실행하게 되면 브라우저에
아무것도 나오지 않게 된다. 물론 로그에서도 특별한 것이 없어야 정상적이다.

2011/01/06 - [Gxt , Ext Gwt강좌] - Ext Gwt[Gxt] 강좌06-BorderLayout을 이용한 화면프레임 구성하기
Posted by 1 베니94

댓글을 달아 주세요

Gxt , Ext Gwt강좌2011. 1. 2. 00:53

2011/01/02 - [Gxt , Ext Gwt강좌] - Ext Gwt[Gxt] 강좌03- ExtGwt라이브러리 다운로드하기.

1. 프로젝트 생성하기

    가. 이제 환경 설정이 마무리되었으니 실제 이클립스에서 프로젝트를 생성하고
        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용으로 
         쓰기 위한 것이다. 전에는 이부분이 자동으로 되었던 것 같은데 ...아무튼

2011/01/06 - [Gxt , Ext Gwt강좌] - Ext Gwt[Gxt] 강좌05-본격적인 GXT어플리케이션 개발로 들어가자
Posted by 1 베니94

댓글을 달아 주세요

Gxt , Ext Gwt강좌2011. 1. 2. 00:50
2011/01/02 - [Gxt , Ext Gwt강좌] - Ext Gwt[Gxt] 강좌02 - Gwt 개발환경 설정하기

1. Gxt라이브러리를 다운로드하자. Gwt개발시 Gxt라이브러리를 이용할 예정이니
   우선 다운로드하자.
  가. http://www.sencha.com/ 으로 접속한다.
  나. 아래의 그림에서 Ext Gwt아래 "Download"를 클릭하자.

 다. 아래화면의 "Download"를 클릭하여 특정폴더에 저장하고 압축을 풀어 놓는다.
       이후 이클립스에서 Gxt모듈을 생성시킬 경우 사용하도록 한다.
 

Posted by 1 베니94

댓글을 달아 주세요

Gxt , Ext Gwt강좌2011. 1. 2. 00:48

1. Google Eclipse Plug-in 설치
    이클립스 버전별 플러그인 : http://code.google.com/intl/ko-KR/eclipse/docs/getting_started.html
    가. Help -> Install & New Software 클릭
    나. 아래 그림과 같이 Work with :창에 http://dl.google.com/eclipse/plugin/3.6 를 입력하고
           엔터를 친다.
    다. Plugin 과 SDKs를 모두 선택하고 "Next" 


  라. "Next" 클릭


   마. "accept"체크하고 "Finish" 클릭

  바. 아래와 같은 보안경고 나오면 걍 ok


  사. "Restart Now"


2. Gwt Designer 설치하기
  가. Help -> Install & New Software 클릭
  나. 아래 그림과 같이 Work with :창에 http://dl.google.com/eclipse/inst/d2gwt/latest/3.6
       입력하고 엔터를 친다.
  다. Gwt Designer 를 체크 -> "Next"


  라.  "Next"

  마. "I accept...." 체크 -> Finish

  바. 이 후 보안경고 나오면 "OK"

  사. SoftWare Updates 창이 나오면 "Restart Now"를 클릭하고 재시작하면 끝..

여기까지가 Gwt 개발을 위한 프로그램 설치 및 환경설정이다.
다음 강좌에서는 간단한 Gwt프로그램을 실행해보고 ExtGwt를 위한 설정을 하도록 하겠습니다
Posted by 1 베니94
TAG Gxt

댓글을 달아 주세요

Gxt , Ext Gwt강좌2011. 1. 2. 00:32

1. jdk 설치 및 이클립스 설치
      http://blog.naver.com/love4u0918?Redirect=Log&logNo=20114070831
2. 이클립스 실행


가. 다운로드 받은 이클립스 관련 파일을 압축을 풀고
      eclipse-jee-helios-win32\eclipse\eclipse.ini파일을 열어 아래 그림과 같이

      블럭부분을 추가 해준다.


나. eclipse-jee-helios-win32\eclipse\eclipse.exe 를 클릭하여 실행한다.
















  다. workspace 설정 : 되도록이면 이클립스 실행파일이 존재하는 폴더에 만들도록 하자

Posted by 1 베니94
TAG Gxt

댓글을 달아 주세요

  1. 좋은 정보 감사합니다.

    2011.03.03 17:14 신고 [ ADDR : EDIT/ DEL : REPLY ]