Gxt, Gwt2011. 1. 6. 17:09

날자 형식을 표현할 경우 어떻게 되는지 알아보자.
1. 데이터베이스 테이블 필드의 type이 date이다. 이때는 시분초까지 저장되겠다.
2. rs.getDate("필드명")로 꺼내온다.
3. 꺼내온 값을 객체에 담아줄때 setter, getter메소드를 사용하는데 두개의 메소드도 아래와
 같이 date를 인자로 사용한다.
    public Date getBuy_dt() {     return (Date) get("buy_dt"); }
    public void setBuy_dt(Date buy_dt) { set("buy_dt", buy_dt); }
4. 화면에 보여줄 경우에 아래와 같은 코드가 들어간다.
ColumnConfig confirmDt    = new ColumnConfig("buy_dt", "구입일",120);
confirmDt.setDateTimeFormat(DateTimeFormat.getFormat("yyyy.MM.dd"));

이렇게 할 경우 grid나 다른 컴포넌트에서 년월일을 출력하게 된다.
그런데 년월일 뿐만 아니라 시분초까지 표현하고 싶어 setDataTimeFormat을 아래와 같이
수정하고 확인하니 시분초가 모두 00:00:00으로 찍힌다.
confirmDt.setDateTimeFormat(DateTimeFormat.getFormat("yyyy.MM.dd HH:mm:ss"));

삽질 좀 하다 나온 결론은 시분초까지 표현할 경우 서버쪽 코드인 rs.getDate("buy_dt:")
이부분을 아래와 같이 수정해주자.
// DateFormat
SimpleDateFormat sf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

// ResultSet를 객체에 저장
p.setBuy_dt(sf.parse(rs.getString("buy_dt")));

이제 아래와 같이 시분초가 표현되는 것을 확인할 수 있다.

'Gxt, Gwt' 카테고리의 다른 글

Gxt Scheduler Touch Support  (3) 2011.01.11
Ext GWT Book  (0) 2011.01.11
GXT Scheduler  (0) 2011.01.11
스크린 샷  (0) 2011.01.06
Posted by 베니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 베니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 베니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 베니94