예전부터 써왔던 엑셀관련 라이브러리다.

엑셀 외에도 word, 파워포인트,비지오, 아웃룩등을 지원 하는거 같은데 

본인은 POI 라이브러리는 주로 엑셀 업/다운로드에 자주 사용한다.

xlsx 까지 지원을 해주긴 하지만 이번 포스팅은 xls만 샘플로 제작하도록 하겠음

보통 DB에서 조회데이터를 list 객체에 담아서 해당 데이터를 for문에 돌려서  row를

생성하고  각각의 셀에 해당 데이터들을 담고 파일로 생성한 후 다운로드 로직을 태운다.

spring + mybatis 작업으로 관련된 샘플로직을 만들어 봤다.

다운로드 URL은 http://poi.apache.org/download.html 인거 같다.

다운받아서 해당 라이브러리를 프로젝트에 추가해주고 작업하였다.

 1. db 조회후 list 객체에 담는다.

    * 주의할점

    list객체에서 받는 타입의 vo객체는 db에서 result한 컬럼의 순서및 뽑는 컬럼수에

    맞춰서 작업해주어야 한다.

ex ) ibatis/mybatis에서 조회 쿼리

    SELECT a,b,c
      FROM table_name

      이라고 주었을 경우

      resultClss의 vo 객체 내에 들어있는 getter/setter

SampleVO.java

     public class SampleVO {
	private String a;
	private String b;
	private String c;
	public String getA() {
		return a;
	}
	public void setA(String a) {
		this.a = a;
	}
	public String getB() {
		return b;
	}
	public void setB(String b) {
		this.b = b;
	}
	public String getC() {
		return c;
	}
	public void setC(String c) {
		this.c = c;
	}
    }
    

해당형식으로 지정해주고, 컨트롤러영역의 엑셀다운로드 샘플이다.

      
      //DB에서 조회한 데이터 LIST객체에 List객체의 제너릭은 Object타입 담는다.
      List<Object> excelList = service.getExcelList(entity);
      //getExcelList의 return type은 List타입의 제너릭은 SampleVO로 정함.
      //문자열 형식의 제목을 excelTtitle변수에 담는다(후에 split을 통해서 배열로 만들것임)
      String excelTitle = "배열제목1,배열제목2,배열제목3";
      //다운받을 파일명
      String downFileNm = "시트제목";
      HSSFWorkbook wb = new HSSFWorkbook();
      //시트 생성
      HSSFSheet sheet = wb.createSheet(downFileNm);
      String titleArr[] = excelTitle.split(",");
      // 첫번째 행에 각각의 컬럼 제목작성
     HSSFCell cell = null;
     HSSFRow row = sheet.createRow(0);
     for(int titleNo=0; titleNo < titleArr.length; titleNo ++){
       cell= row.createCell(titleNo);
       cell.setCellValue(titleArr[titleNo]);
     }
      int i=1;

      //DB에서 조회한 목록데이터를 담은 LIST객체를 OBJECT타입으로 돌린다

      //VO종류가 무엇이든 상관없음?
      for(Object obj : list) {
       row = sheet.createRow((short)i);
       int j = 0;
       for (Field field : obj.getClass().getDeclaredFields()) {
        field.setAccessible(true);
        Object value = field.get(obj);
        if(value == null) {
        cell= row.createCell(j);
        cell.setCellValue("");
        } else {
        cell= row.createCell(j);
        cell.setCellValue(String.valueOf(value));
        }
        j++;
       }
       i++;
      }
      
      FileOutputStream fileOut = null;
       try {
        fileOut = new FileOutputStream("D:\\test.xls");
        wb.write(fileOut);
        fileOut.close();
   } catch (IOException e) {
    throw new RuntimeException("런타임에러가 발생하였습니다.");
   }

해당 소스를 응용하시면 되실거 같습니다.

저번시간에는 extjs5에서 레이아웃 구조를 잡아보았습니다.

자 이번에는 레이아웃에 각각 타이틀을 적용해보고 접히는 기능, 중점을 드래그 해서 레이아웃 조절 하는 기능 등을 예제로 진행해보겠습니다~

ExtJS 가 제공하는 API 들이 무궁무진 하므로 문서페이지를 보면서 응용하시는것이 도움이 제일 되겠지요

저는 단순히 예제를 통해서 몇가지 옵션들만 제공하므로 문서를 보시면서 공부하시는것을 강추 드립니다!! +_+

밑에 주소는 ExtJS 5 document url이고, 이전 버전 url의 document를 보고 싶으신분들은

http://docs.sencha.com/ 에서 사용하고 계신 버전을 보시면서 공부하시면 되실겁니다.

http://docs.sencha.com/extjs/5.0.0/

 해당 url로 들어가시면 밑에 화면처럼 뜰텐데 Ext JS 5 Api Docs 메뉴를 클릭하시면 document 페이지로 화면이 나옵니다.

클릭을 해보면 우측상단에 검색창이 있는데 찾고자 하는 타입및 옵션을 검색하셔서 자동완성된 목록을 클릭해보시면

이벤트,환경설정,메소드등의 다양한 옵션들을 찾으실수 있습니다. 해당 찾는 방법은 추후에 진행 하도록 하겠습니다.

이어서 전에 layout : 'border'를 잡아줬던 소스에 추가로

레이어 열기/닫기, 타이틀 설정, 레이어 드래그해서 영역 재구성 에 대한 옵션을 잡아보도록 하겠습니다.

단 3줄로 끝이납니다.

레이어 열기/닫기 : collapsible: true

제목설정 : title : '타이틀에들어갈 제목'

레이어 드래그 : split : true

이걸로 끝입니다. 저는 중앙영역인 region : 'center' 를 제외한 나머지에  모두 넣어봤습니다.

영상 녹화하고 보니 east에는 split 옵션을 빼먹었네요 ..;;; ㅎㅎ

- 소스  -

Ext.onReady(function(){
   Ext.create('Ext.Viewport', {
    layout : 'border',
    items : [
     {
      flex: 1,
         region: 'north',
         border: true,
         title : '북',
         collapsible: true,
         split: true
         
     },
     {
      flex: 1,
         region: 'center',
         title : '중앙',
         border: true
     },
     {
      flex: 1,
         region: 'west',
         border: true,
         title : '서',
         collapsible: true,
         split: true
     },
     {
      flex: 1,
         region: 'east',
         layout: 'fit',
         border: true,
         title : '동',
         collapsible: true,
         split: true
     },
     {
      flex: 1,
         region: 'south',
         border: true,
         title : '남',
         collapsible: true,
         split: true
     }
    ]
   });
  });

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!

일반 개발 프로젝트를 진행할때도 레이아웃 영역을 대부분 나눈다.

TOP/LEFT/RIGHT/CENTER/FOOTER 등등...

css랑 html태그, 스크립트등으로 레이아웃을 짜는데 extjs는 레이아웃작업들을 옵셜설정으로 

마무리 해준다.

기본적으로는 그림 그릴때 도화지가 필요하듯이

레이아웃을 짤때도 도화지가 필요하다

container, window, viewport, panel 등 여러가지가 있지만 본인은 viewport로 진행을 하겠다.

mvc 기반으로 본인은 extjs를 익혀서 최초 도화지는 viewport로 하는게 편함.. -_-;;

그리고 솔직히 다른놈들은 어떻게 자세히 써야 하는지 모르겠음... ㅠㅠ

우선 include파일은 첫회때 했던것이 전부라 별도로 없다.

화면은 포토샵이 없어서 그림판으로 대충 찍찍 그림

extjs는 좀더 좋은점이 그냥 영단어다... 

동,서,남,북,중간

아직 무슨 말을 하는지 이해가 안가실테니 우선 도화지(viewport)를 만들어 보겠음

Ext.onReady 내에 선언해주십쇼

      Ext.create('Ext.Viewport', {

      });

이렇게 하면 도화지 생성완료 json 틀이라는것을 명심하십쇼

자다음 저 레이아웃 영역을 나누는 옵션을 주어야 하는데 layout옵션에는 몇가지 옵션들이 있지만 저렇게 영역나누지 쉬운 

옵션명은  'border' 라는 놈입니다.

코딩으로 하면 

layout : 'border' 

그리고 화면들 각각의 레이아웃들을 아이템들이라 items라는 배열형 json에다 기술하시면 됩니다.

layout : 'border',

items : [

{

// 각각의 레이어 영역설정할 json

},

{

// 각각의 레이어 영역설정할 json

}

]

이런식으로 items라는 키내에 여러가지 레이아웃들을 넣어주면 됩니다.

layout을 'border' 라고 주셨으면 변수선언했듯이 난 이 뷰포트라는 도화지에 영역을 

나눌것이다~ 라는 의미입니다.

저렇게 줘봤자 화면에 아무런 변화가 없음 브라우저 하얀화면에 뷰포트라는 하얀 도화지만 올려놓고 레이어 나눌꺼예요~ 한거니... 

자 이제는 영역을 나눠 봐야겠지요

items json array에 영역 json object를 담아줘봅시다.

{

region : 'west'

}

이런형태로 영역을 나눠주면 된다 화면에 나와있는 영단어(소문자로 적을것)를 region이라는 옵션에 넣어주면 지가 알아서 

찍찍 그린다 ㅋㅋㅋ

region의 옵션값들은 north / center / west / east / south 이다.

Ext.create('Ext.Viewport', {
    layout : 'border',
    items : [
             {
                region : 'west'
             },{
                region : 'east'
             },{
               region : 'south'
             },{
               region : 'center'
             },{
               region : 'north'
            }
    ]
});

해당 소스로 이제는 영역이 나누어졌다 하지만 백날 실행해봐도 화면에 아무것도 안뜰것이다.

html 태그옵션중 <table border = "1"> 과 같이 

border : true 라는 옵션을 주고 각각의 json object들에게 flex : 1 옵션을 모두 지정해보자

예를들어 하나의 json object 객체로 설명을 하겠다.

{

flex: 1,

region: 'north',

border: true

}

이런형태가 되는것이다. 

<table> 태그에 border="1" width = "50%" 처럼 간격을 설정해주는것처럼

영역놈들도 flex은 간격에 관련된 설정이고, border는 굵기를 표시하는 옵션이다

border 옵션은 굳이 주지 않아도 되긴하지만 간격이 얼마나 되는지를 모르니 샘플로 넣어봤다.

자 이제 레이아웃 다짰다~~~ 

실행시켜봅시다!!

오~~ 나왔다!!

한 글에 내용이 너무 길면 쓰는사람도, 읽는사람도 지친다.. ㅋㅋㅋ

소스만 간략하게 붙이고 오늘은 여기까지!

다음에는 레이아웃들의 옵션을 가지고 장난질을 쳐볼것임...

Ext.onReady(function(){

Ext.create('Ext.Viewport', {

layout : 'border',

items : [

{

flex: 1,

   region: 'north',

   border: true

},

{

flex: 1,

   region: 'center',

   border: true

},

{

flex: 1,

   region: 'west',

   border: true

},

{

flex: 1,

   region: 'east',

   layout: 'fit',

   border: true

},

{

flex: 1,

   region: 'south',

   border: true

}

]

});

});

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!

본인기준으로 extjs 문법을 습득 하려고 하였을때 처음에는 꽤나 답답하면서 진척율도 나가지 않았었습니다.

처음으로 extjs를 접했을때가 버전이 3이었을때만 해도 단순히 sencha사이트에서 제공하는 샘플링 소스를 베껴서 수정하는 

정도였을뿐 응용을 전혀 못해보고 바로 포기를 했었습니다.

그러나 extjs 4가 나오면서 다시 한번 배우고자 시도를 했엇습니다.

한 1주정도는 버벅이다가 계속 보다보니 어느순간 올바른 코딩은 아니여도 원하는 화면이랑 기능들을 출력할수 있게는 되었지요.

jquery는 한줄~한줄~ 코딩하면 되지만 extjs는 기본 틀이 json 유형입니다.

구글링이나 앞으로올릴 예제들을 보시면 소스들이 대부분

xxx : {

}

bbbb : [

{

}

]

이런형식의 소스들이 대부분일것입니다. 

뭐 UI 구조를 정의할때만 쓰는거고 function들은 일반 코딩하는것처럼 하면 되는것입니다.

우선 앞으로 올리고자 계획하고 있는 순서는

기본적인 문법으로 진행을 하고 그 후에 아이템을 선택하여 샘플링으로 extjs에 다가가고자 글을 올릴예정입니다.

감사합니다.

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!

ExtJS 5.0이 릴리즈가 되었다... ㅠㅠ

한번 다운로드를 받고 세팅을 해보자!! +_+ㅋㅋ

 현재 메인화면에서 다운로드는 45일 TRIAL 버전밖에 보이지 않지만  GPL 버전의 소스를 받아

서 문법을 익혀보겠다!

다운로드 주소는 http://www.sencha.com/products/extjs/details 여기에서 맨밑으로 

스크롤 내려보시면 다음과 같은 화면이 나올것임 

주저하지 말고 다운로드버튼 클릭!!

다운로드를 받았으면 압축파일이 나오는데 압축을 해제해주시고~

개발툴은 뭐가 되든 상관이 없음! 

저는 이클립스툴로 작업하도록하겠습니다.

개발환경은

이클립스 + JDK 1.7, + TOMCAT 7 + EXTJS 5입니다.

프로젝트 생성 및 서버 돌리는 방법은 알고 계신다고 가정하고 해당 부분은 생략!!

1.  생성 프로젝트명 : extjs_sample

우선은 ext-5.0.0에서 packages 디렉토리를 extjs_sample 디렉토리에 복사! 붙여넣기!!

그리고 /ext-5.0.0/build/내에  extxxxx.js 파일들이 많은대 그냥 ext-all.js 파일만 

복사 + 붙여넣기 하자.

최상단에 있는 extxxxx.js는 동작안됨 build 내에 있는 extxxxx.js를 include 해야함!

이걸로 ExtJS 세팅은 끝났다.

다음 3개의 소스를 신규 생성한 HTML 페이지에 include해준다

<link rel="stylesheet" type="text/css" href="/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css"/>

<script type="text/javascript" src="ext-all.js"></script>

<script type="text/javascript" src="/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>

테마는 다양하지만 본인은 이번에 새로 추가된 crisp 테마를 적용하도록 하겠다.

jquery의 

$(document).ready(function(){

});

문법처럼 ONLOAD시 HELLO WORLD 메시지창을 띄워줄것이다.

EXTJS는 

Ext.onReady(function(){

});

에 기술할것이다.

단순하게 스크립트 alert을 띄워도 되지만 있어보이게 Ext에서 제공하는 alert 메시지 UI를 적용해보겠다

Ext.Msg.alert('타이틀영역', '헬로우 월드'); 

코드를 onready 안에 넣어보고 html페이지를 실행하면

다음 화면과 같이 나올것이다!

아 crisp 테마 ... neptune보다 더 깔끔해보여서 좋다!! ^_______________________^ ㅋㅋㅋ

소스랑 프로젝트 구조도 캡처!!

- 소스 -

-디렉토리 구조 -

이클립스 쓰시는 분들중, maven 쓰시는 분들은 저구조가 아닐것입니다.

세팅은 참 심플하죠잉~~~ ? ㅎㅎ

천~~~천~~~히 가는거임...

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!