지난 포스팅은 MVC중에서 M을제외한 VC를 알아보았습니다.

이번에는 View/Controller 에 추가로 Model+Store에 관하여  포스팅을 해보겠습니다.

2014/11/26 - [웹개발강좌/ExtJS] - ExtJS 강좌 - ExtJS5 MVC 구조 잡아보기(View+Controller 연동)

이번 샘플은 콤보박스를 예를 들어 진행하겠습니다.

이전 구조에서 위의 빨간네모친 폴더 및 파일을 생성해주도록 합니다.

CustomCombo.js

Ext.define('mvc_study.view.combo.CustomCombo', {
    extend: 'Ext.form.field.ComboBox',
    alias : 'widget.customCombo',
    fieldLabel: '선택',
    store: 'ComboboxStore',
    queryMode: 'local',
    displayField: 'title',
    valueField: 'value',
    initComponent: function() {
        this.callParent();
    }
});

이전 커스텀 버튼컴포넌트 생성처럼 콤보박스 컴포넌트에서 지원하는 속성들을 사용하였고

 store의 속성은 Ext.create를 이용하여 사용이 가능하지만 ComboStore라고 정의해주었습니다.

다음 순서로는 데이터스토어 코드를 작성해보도록 하겠습니다.

ComboboxStore..js

Ext.define('mvc_study.store.ComboboxStore', {
    extend: 'Ext.data.Store',
    model: 'mvc_study.model.ComboboxModel',
    data : [{
    	title : '타이틀1',
    	value : '값1'
    },{
    	title : '타이틀2',
    	value : '값2'
    },{
    	title : '타이틀3',
    	value : '값3'
    },{
    	title : '타이틀4',
    	value : '값4'
    }],
    proxy: {
        type: 'memory'
    }
});

이전 Ext.create했던 형식과 동일한 구조로 데이터스토어를 define 해주었습니다.

다른점이 있다면 fields 속성대신 model 속성을 정의해주었습니다.

솔직히 model은 별도로 정의해주지 않아도 되긴 하지만 

ExtJS 공식사이트에서도 위처럼 샘플링을 들어주니 

model 속성을 이용해보도록 하겠습니다.

ComboboxModel.js

Ext.define('mvc_study.model.ComboboxModel', {
    extend: 'Ext.data.Model',
    fields: ['title','value']
});

데이터스토어의 들어가는 fields 속성이 모델클래스에 정의되었습니다.

사용유무에 대해서는 스스로 결정하시면 되겠습니다.

Viewport.js

기존에 존재하는 xtype : 'customButton' -> xtype : 'customCombo' 으로 변경을 해줍니다.

MvcController.js

컨트롤러부분은 추가 및 변경사항이 많으므로 하단 코드를 덮어 씌운 다음 설명을 하도록 하겠습니다.

Ext.define('mvc_study.controller.MvcController', {
    extend: 'Ext.app.Controller',
    views: ['combo.CustomCombo'],
    stores: ['ComboboxStore'],
    refs: [
		{
			ref: 'customCombo',
			selector: 'customCombo'
		}
    ],
    init: function() {
        this.control({
			'customCombo': {
                select: this.showComboData
            }
		});
    },
    showComboData : function(combo, records, eOpts){
    	alert("선택콤보값:"+combo.getRawValue()+","+combo.getValue());
    }
});

상단코드에서 추가/변경된 부분에 대해서는 다음과 같습니다.

공통적으로 삭제된 부분은 customButton 에 대한 정의부분을 삭제후 customCombo로 변경

views : customButton 삭제 -> customCombo 추가

stores속성추가 : 추가된 데이터스토어를 사용하기 위함

refs : customButton 삭제 -> customCombo추가(select 이벤트리스너 정의)

showComboData 함수정의 : 출력된 콤보목록에서 특정 값선택시 alert출력해주는 기능정의

showAlert함수 삭제 : 버튼클릭시 동작되는 함수여서 삭제

실행결과를 확인해보도록 하겠습니다.

위처럼 정상적으로 컴포넌트 화면 및 기능들이 

정상적으로 동작되는 것을 확인하였습니다.

다음장은 MVC구조를 이용하여 

간단하게 그리드 CRUD 기능을 구현해보도록 하겠습니다.

by 개발로짜

지난 포스팅에는 Sencha CMD를 이용하여 구조를 잡아보았으나 

ExtJS5에서는 자동으로 MVVM 구조를 잡아버려서 

이번에는 수작업으로 MVC 구조를 잡는 포스팅을 해보도록 하겠습니다.

2014/11/24 - [웹개발강좌/ExtJS] - ExtJS 강좌 - Sencha CMD로 ExtJS 구조 생성하여 연동테스트 해보기

이전 포스팅을 별도의 프로젝트로 생성 후 작업하셨다면

 초기에 기본 컴포넌트 관련에 연동해놨던 프로젝트로 진행해주세요 ㅠㅠ

덮어쓰기를 하신 분들이시면 

2014/10/18 - [웹개발강좌/ExtJS] - ExtJS 강좌 - ExtJS5를 이용한 설치 및 연동하기 편

다시 초기설정으로 원복해주시고 진행해주시면 되겠습니다 .

위와같이 mvc 폴더구조 및 JS 파일들을 생성해주도록 합니다.

mvc.js

mvc.js 파일내에 다음처럼 코드를 작성해주도록 합니다.

Ext.application({
    name: 'mvc_study',
    appFolder : '/mvc_study',
    controllers: [
       'MvcController'
    ],
    autoCreateViewport: true
});

name : ExtJS 어플리케이션 네이밍을 의미

appFolder : mvc구조의 root 폴더를 의미 (정의하지 않을시 app디렉토리명이 default)

controllers : 컨트롤러 클래스명을 의미

autoCreateViewport : true로 주어야 view에 대한 기능 동작

mvc.js 파일은 

html <-> ExtJS MVC 구조를 잡아주기 위한 일종의 연결고리라고 생각

하시면 되겠습니다.

/mvc_study/view/button/CustomButton.js

Ext.define('mvc_study.view.button.CustomButton', {
    extend: 'Ext.button.Button',
    alias : 'widget.customButton',
    text : '내가만든버튼',
    handler : function(){
    	alert("클릭!!");
    },
    initComponent: function() {
        this.callParent();
    }
});

custombutton.js 파일내에는 사용자가 작성한 컴포넌트를 코드로 작성하였습니다.

extend : '상속받고자하는 ExtJS 클래스'

alias : "xtype : 'xxx'" 처럼 주기위한 명칭 xtype 지정시 widget은 생략하고 다음에 위치하는 'customButton' 을 xtype으로 지정이가능

text / handler ... : 버튼컴포넌트에서 지원하는 속성

initComponent : 컴포넌트 초기화(별도로 내부적으로 기능구현을 하려면 필요)

그럼 작성한 사용자지정 컴포넌트를 뷰포트 내에 작성해보도록 하겠습니다.

/mvc_study/view/Viewport.js

Ext.define('mvc_study.view.Viewport', {
    extend: 'Ext.container.Viewport',
    items : [{
    	xtype : 'customButton'
    }],
    initComponent: function() {
        this.callParent();
    }
});

xtype 부분에 사용자정의 컴포넌트 생성시 

작성된 alias 명칭으로 정의를 하였습니다.

최종적으로 기능핸들링과 화면출력을 위한 

Controller 코드를 보도록 하겠습니다.

/mvc_study/controller/MvcController.js

Ext.define('mvc_study.controller.MvcController', {
    extend: 'Ext.app.Controller',
    views: ['button.CustomButton'],
    init: function() {
        this.control();
    }
});

view에서 정의한것과 마찬가지로 구조는 거의 동일합니다.

추가로 필요한 속성이 있다면 views 관련 속성인대

이부분은 view 디렉토리내에 존재하는 컴포넌트들을 의미하는 겁니다.

CustomButton 클래스의 define 부분을 보시면 

'mvc_study.view.button.CustomButton' 코드가 존재하는데 

바로 view 다음에 존재하는 'button.CustomButton'을 기입하면 되겠습니다.

실행을 한번 해보도록 하겠습니다.

위와같이 정상적으로 버튼 출력후 클릭했을경우 

view에서 정의해준 handler 속성으로 alert이 출력되었습니다.

컴포넌트 속성에 리스너 혹은 핸들러 속성을 이용하여 기능 구현이 가능하지만 

그대로 사용하게되면 MVC 를 이용하는 의미가 없으므로 

한번 해당 코드를 컨트롤러로 옮기는 작업을 

진행해보도록 하겠습니다.

즉, handler 혹은 리스너 -> click 이벤트 발생시 alert이 출력되는 부분을

 controller에 정의하여 동작시켜보도록 하겠습니다.

우선 CustomButton.js의 handler 속성을 제거해주시고 

하단처럼 컨트롤러를 재작성해주세요

Ext.define('mvc_study.controller.MvcController', {
    extend: 'Ext.app.Controller',
    views: ['button.CustomButton'],
    refs: [
		{
			ref: 'customButton',
			selector: 'customButton'
		}
	],
    init: function() {
        this.control({
			'customButton': {
                click: this.showAlert
            }  
		});
    },
    showAlert : function(){
    	alert("출력");
    }
});

기존 코드에서 추가 및 변경되 부분이 있다면

refs 속성추가 : views에서 정의해준 컴포넌트를 정의해주어야 합니다. json array 구문으로 리스너 및 핸들러 이벤트를 발생시켜주고자 할때 

{
   ref : 컴포넌트명칭
   selector : 컴포넌트명칭
}

규격으로 추가해주시면 되겠습니다.

init -> this.controller 내에 리스너추가 : 기존 Ext.create를 이용하여 listeners와 동일한 구조입니다.

                                                        (각 컴포넌트에 대한 이벤트를 정의해주기위해 필요한 함수입니다.)

showAlert 추가 : 이부분은 아시다시피 리스너 발생시 동작하는 함수부분인대 init 내에 존재하는 this.showAlert 대신 일반적인 function을 주어도 되긴하지만 

                        그렇게되면 유지보수혹은 가독성이 떨어지므로 가능한 기능구현에 대해서는 showAlert과 같이 함수를 분리해주시는게 좋습니다.

사용자버튼컴포넌트 define 했을때의 handler의 기능과 

동일한 결과를 확인하실 수 있겠습니다.

지금까지 MVC 구조중, VC(View,Controller)에 대하여 설명을 하였습니다.

다음장은 M(Model)부분을 포함하여 MVC를 모두 사용한 포스팅을 진행하도록 하겠습니다.

by 개발로짜

보통 JSON/XML 파일 및 데이터를 읽는 작업이 자주있습니다.

예전에 샘플링으로 JSON 관련 포스팅을 다룬적이 있습니다.

2014/10/06 - [코드저장소/java] - JSON 라이브러리를 이용하여 object생성과 문자열을 object형으로 변환해보기

이번포스팅은 XML 파일 및 xml API 통신으로 받은 데이터를 

읽어오는 샘플링을 진행해보도록 하겠습니다.

JDK 1.7로 진행을 합니다.

하위 버전에 해당 라이브러리가 존재하지 않을경우

xml-apis 관련 jar파일 및 maven dependency를 추가해주셔야 할것입니다.

이클립스에서 자바프로젝트 생성 후 src디렉토리에 test 패키지 생성 후 

내부에 text.xml을 하나 생성한 다음 다음과 같은 샘플코드를 작성해보았습니다.

<?xml version="1.0" encoding="UTF-8"?>
<root>
	<blog>
		<title><![CDATA[개발로짜]]></title>
		<link>http://hellogk.tistory.com</link>	
	</blog>
	<blog>
		<title><![CDATA[국이]]></title>
		<link>http://guklife.tistory.com</link>
	</blog>
</root>

이어서 test 패키지내부에 Test.java 클래스파일을 생성하여 다음과 같이 샘플코드를 작성해보았습니다.

public class Test {
	public static void main(String ar[]) {
		try {
            DocumentBuilderFactory documentBuilderFactory = DocumentBuilderFactory.newInstance();
            DocumentBuilder documentBuilder = documentBuilderFactory.newDocumentBuilder();
            Document xml = null;
            //XML DOCUMENT 획득
            xml = documentBuilder.parse(ClassLoader.getSystemResource("test/test.xml").toURI().toString());
            //Root엘리먼트 획득
            Element element = xml.getDocumentElement();
            //Root엘리먼트의 자식 노드목록 획득(blog xml 태그)
            NodeList list = element.getChildNodes();
            //자식노드가 1개이상일경우
            if(list.getLength() > 0) {
            	//반복문 이용
            	for(int i=0; i<list.getLength(); i++) {
            		//blog xml태그의 자식태그 한번 더 획득
                	NodeList childlist = list.item(i).getChildNodes();
                	//마찬가지로 자식노드 1개이상일경우
                	if(childlist.getLength() > 0) {
                		for(int j=0; j<childlist.getLength(); j++) {
                			//blog xml 태그내에 존재하는 태그들의 태그명 + 태그에 속하는 내용 출력
                			System.out.println("XML태그명:"+childlist.item(j).getNodeName()+",XML값:"+childlist.item(j).getTextContent());
                		}
                	}
                }	
            }
          
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

코드 작성 후 실행을 해본결과 이클립스 콘솔에 하단과 같이 출력되었습니다.

XML태그명:#text,XML값:
		
XML태그명:title,XML값:개발로짜
XML태그명:#text,XML값:
		
XML태그명:link,XML값:http://hellogk.tistory.com
XML태그명:#text,XML값:	
	
XML태그명:#text,XML값:
		
XML태그명:title,XML값:국이
XML태그명:#text,XML값:
		
XML태그명:link,XML값:http://guklife.tistory.com
XML태그명:#text,XML값:

태그명에 존재하지도 않는 "#text" 태그가 출력되었습니다.

위 태그는 white-space(공백) 을 노드의 일부로 인식을 하여 출력하는데 

이부분은 제외해야 하므로 조건문을 하나 더 추가하여 다시 한번 출력해보도록 하겠습니다.

기존 System.out.println 부분에 다음과 같은 조건을 추가적용 해주세요

if(Node.TEXT_NODE !=childlist.item(j).getNodeType()){
           System.out.println(childlist.item(j).getNodeName()+":"+childlist.item(j).getTextContent());	
}

title:개발로짜
link:http://hellogk.tistory.com
title:국이
link:http://guklife.tistory.com

#text white-space 부분은 제외하고 출력이 되었습니다.

이어서 외부 url의 일명:API 통신을 이용하여 데이터를 출력해보도록 하겠습니다.

네이버블로그 RSS도 XML 규격으로 만들어져있으므로 RSS로 진행 해보도록 하겠습니다.

호출 RSS URL : http://blog.rss.naver.com/w3labs.xml (미래웹기술연구소 네이버 블로그 RSS 샘플)

브라우저로 RSS 규격을 확인해보도록 하겠습니다.

rss태그가 ROOT ELEMENT이고 

자식첫번째 노드는 channel 태그인대 이태그는 한개만 존재하며 

자식노드를 한번 더 들어가 item 태그에 존재하는 

title / description 태그의 값들을 콘솔로 출력해보도록 하겠습니다.

public static void main(String ar[]) {
	try {
           DocumentBuilderFactory documentBuilderFactory = DocumentBuilderFactory.newInstance();
           DocumentBuilder documentBuilder = documentBuilderFactory.newDocumentBuilder();
           Document xml = null;
           //XML DOCUMENT 획득
           xml = documentBuilder.parse("http://blog.rss.naver.com/w3labs.xml");
           //Root엘리먼트 획득
           Element element = xml.getDocumentElement();
           //Root엘리먼트의 channel 자식태그는 1개이므로 item(0)으로  획득
           Node channelNode = element.getElementsByTagName("channel").item(0);
           //channel태그내에 존재하는 자식태그 획득
           NodeList list = channelNode.getChildNodes();
           for(int i=0; i<list.getLength(); i++) {
           	//image,link,title.. 여러개 태그 중 item 태그만 획득
           	if(list.item(i).getNodeName().equals("item")) {
           		//item 태그의 자식노드 획득
           		NodeList list2 = list.item(i).getChildNodes();
           		for(int j=0;j<list2.getLength();j++) {
           			//자식태그가 title/description일경우에만 태그명 + 값을 출력
           			if(list2.item(j).getNodeName().equals("title") || list2.item(j).getNodeName().equals("description")){
           				String content = list2.item(j).getTextContent();
           				//줄바꿈이 되어있으므로 \n replaceall
           				content = content.replaceAll("\n", "");
           				
           				System.out.println("========== 출력시작 =================");
           				System.out.println("name:"+list2.item(j).getNodeName());
           				System.out.println("value:"+content);
           				System.out.println("========== 출력종료 =================");
           			}
           		}
           	}
           }
	} catch (Exception e) {
		e.printStackTrace();
	}
}

========== 출력시작 =================
name:title
value:Sencha Ext JS Training ! 9월 부터는 Ext JS 5 강좌를 시작합니다.!
========== 출력종료 =================
========== 출력시작 =================
name:description
value:9월 ExtJS 5 Training 5일과정반응형 레이아웃, 접근성 지원, 플랫테마, 태블릿 지원, 센차 터치 차트 내장등 한층 업그레이드된 ExtJS 5 를 경험하세요!수강정보날짜 : 2014년 9월 15일(월) ~ 9월 19일(금) 10:00 ~ 18:00장소 :지하철 2호선 홍대입구역 5분거리 (서울시 마포구 서교동 352-31 희승빌딩 2층)비용 : 150만원 (부가세 별도)문의 : 미래웹기술연구소edu@miraeweb.com070-4259-2739Ext JS 5 런칭 기념! 수강생 전원에게 5만원권 백화점 상품권을 드립니다.주요내용OverviewSetup & SettingGetting StartDevuggingApplication StructureClass SystemComponent ClassLayouts & ContainerDom HandlingEventModel, Store and For.......
========== 출력종료 =================
========== 출력시작 =================
name:title
value:센차 아키텍트 3.1의 릴리즈를 발표하다
========== 출력종료 =================
========== 출력시작 =================
name:description
value:센차 아키텍트 3.1의 릴리즈를 발표하다 2014년 8월 7일|애런 콘랜   센차와 아키텍트 팀 전체를 대표해 뿌듯한 마음으로 센차 아키텍트 3.1의 릴리즈를 발표합니다. 센차 아키텍트 3.1에는 여러 가지 새로운 기능이 생겼고, 그 중에서도 주목할 만한것은 Ext JS 5 지원입니다. Ext JS 5가 릴리즈되고얼마 되지 않았지만, 우리는 센차 아키텍트가 Ext JS 5의 새로운 기능을 동등하게 사용하도록 지원하기 시작했습니다. 센차 아키텍트 3.1 조기 액세스 프로그램(EAT: Early Access Program)에참여해주신 모든 분의 노고에 한분 한분 감사드리고 싶습니다.    센차 아키텍트의 Ext JS 5 지원 센차 아키텍트 3.1에.......
========== 출력종료 =================
========== 출력시작 =================
name:title
value:What's New in Ext JS 5.0.1
========== 출력종료 =================
========== 출력시작 =================
name:description
value:Ext JS 5.0.1의 새로운 기능 2014년 8월 7일|돈 그리핀   오늘, 흥분되는 마음으로 Ext JS 5.0.1의 최종 안정화 버전을 발표합니다!이번 유지 관리 릴리즈에는 센차 커뮤니티의 피드백을 바탕으로 다수의 개선점이 포함되어 있습니다. 어떤 변화들이 있는지 살펴보겠습니다. 접근성 Ext JS 4.2.2부터는 “ext-aria” 패키지를 릴리즈해 접근성에 대한지원을 개선했습니다 (WAI-ARIA1.0표준에 설명된 것과 같이). 애플리케이션의 접근성을 높이는도구를 제공하는 데 중요한 단계이기도 했지만 테스팅 파트너와 얼리 어탭터의 피드백을 통해 배운 점도 많았습니다. Ext JS 5에서는 그 피드백들을 통합해 더 나은 솔.......
========== 출력종료 =================
========== 출력시작 =================
name:title
value:<센차 Ext JS 5>하나로 통합된 플랫폼에서 데스크톱과 모바일 애플리케이션 개발의 능률을 높인다.
========== 출력종료 =================
.
.
.
.

위와같이 정상적으로 "제목 + 설명"에 대한 결과가 출력되었습니다 .

by 개발로짜