[Sencha] Sencha Touch (1.1) 을 이용한 간단한 RSS Reader

내가끄적인글/프로그래밍 2013. 5. 28. 16:13

삼성 SDS 멀티캠퍼스 HTML5 교육중 Sencha Touch 를 이용한 RSS Reader 만들기가 과제로 나왔다.

그런데 과정 커리큘럼상 Sencha Touch 는 겉만 핧고 넘어간다니.. ㅠㅠ

입과 후 수준 테스트에서 괜히 아는척했다가 난이도 상급 과제가 나와서 황당.

어쨋건 Sencha touch 책보고 API 뒤지면서 만들긴 했는데.. 제대로 쓴 문법인진 나도잘 -_-;

책에서는 RSS Feed 를 긁어오기위해 AJAX로 서버통신을 해오는데, 강의실 컴터에 서버를 깔기도 뭐하고 해서

순수 자바스크립트로만 YQL API를 통해 RSS를 리딩하는것으로 변경하였다. thx Stackoverflow!

index.html

rss.js

//Sencha Touch simple rss reader
//2013.5.28 Geunwon,Mo

var panel;
var toolBar;
var backBtn;

//RSS 리스트 모델을 정의한다.
Ext.regModel('RssList', {
	fields : ['Name','Url']
});

//모델에 따른 실제 데이터 하드코딩
RssListStore = new Ext.data.Store({
	model : 'RssList',
	sorters : 'Name',
	getGroupString : function(record){
		return record.get('Name')[0];
	},
	data : [
	        {Name : 'Lomohome',Url : 'http://lomohome.com/rss'},
	        {Name : 'Sencha Blog',Url : 'http://feeds.feedburner.com/extblog'},
	        {Name : 'jQuery Mobile',Url : 'http://feeds.feedburner.com/JQM'}
	]
});

handleEventForRssList = function (dataView, index, item, event){
	//dataView.getRecord(item).get('Name')
	//dataView.getRecord(item).get('Url')
	
	var record = dataView.getRecord(item);
	
	if (record){
		toolBar.setTitle(record.get('Name'));
		backBtn.show();
		
		list = List;
		list.url = record.get('Url');
		
		panel.setActiveItem(list, 'slide');
	}
};

Ext.setup({
	onReady : function(){
		panel = new Ext.Panel({
			fullscreen : true,
			layout : 'card',
			dockedItems : [
			               toolBar = new Ext.Toolbar({
			            	   dock : 'top',
			            	   xtype : 'toolbar',
			            	   title : 'RSS Reader',
			            	   items : [
			            	            backBtn = new Ext.Button({
			            	            	ui : 'back',
			            	            	text : 'Back',
			            	            	hidden : true,
			            	            	handler : function(){
			            	            		panel.setActiveItem(0, {type : 'slide', reverse : true});
			            	            		toolBar.setTitle('RSS Reader');
			            	            		backBtn.hide();
			            	            	}
			            	            })]
			               })
			],
			
			items : [{
				title : 'Simple',
				xtype : 'list',
				store : RssListStore,
				itemTpl : '{Name}',
				listeners : {
					itemtap : {
						fn : handleEventForRssList
					}
				}}]
		});

}
});

rssfeedlist.js

readrssutil.js

/**
* RSS 로드 유틸
* 책의 예제와는 달리 서버(aspx,jsp,php 등)프로그램없이 순수 자바스크립트로만 YQL 을 이용하여 RSS 피드 로드.
* Geunwon, Mo : 2013.5.28
*/

function YQLQuery(query, callback) {
    this.query = query;
    this.callback = callback || function(){};
    this.fetch = function() {

if (!this.query || !this.callback) {
            throw new Error('YQLQuery.fetch(): Parameters may be undefined');
        }

var scriptEl = document.createElement('script'),
            uid = 'yql' + +new Date(),
            encodedQuery = encodeURIComponent(this.query.toLowerCase()),
            instance = this;

YQLQuery[uid] = function(json) {
            instance.callback(json);
            delete YQLQuery[uid];
            document.body.removeChild(scriptEl);
        };

scriptEl.src = 'http://query.yahooapis.com/v1/public/yql?q='
                     + encodedQuery + '&format=json&callback=YQLQuery.' + uid; 
        document.body.appendChild(scriptEl);

};
}

getRSSJSON = function(url){

//Construct your query:
	var query = "select * from rss where url='"+url+"'"; //+"' limit 1";

// Define your callback:
	var callback = function(data) {
	    if(data.query.count > 0){
	    	//jsonStore 는 rssfeedlist.js 에 정의되어있다.
	    	jsonStore.add(data.query.results.item);
	    } else {
	    	Ext.Msg.alert('에러','RSS피드가 없거나 불러오는데 실패하였습니다.',function(){ 
	    		panel.setActiveItem(0, {type : 'slide', reverse : true});
        		toolBar.setTitle('RSS Reader');
        		backBtn.hide();
	    	});
	    }

};

// Instantiate with the query:
	var firstFeedItem = new YQLQuery(query, callback);

// If you're ready then go:
	firstFeedItem.fetch(); // Go!!
};

SimpleRSSReader.zip

'내가끄적인글 > 프로그래밍' 카테고리의 다른 글

Applescript 로 파일이동을 편하게 (2)	2014.01.14
[OpenSource?] iOS 사전앱 InDic 소스 공개 (39)	2013.12.30
[iOS App] InDic - 간단하고 빠른 사전어플 (124)	2013.10.21
[OpenSource?] iOS 일정목록 (Events List)앱 소스 공개. (10)	2013.03.08
[iOS App] D-Day 관리 앱 - Day : 예쁘고 간편한 디데이 알리미 (69)	2011.12.15
[iOS App] 일정관리(Events List) APP 이 드디어 iTunes Store 에 출시! (26)	2011.10.14

Posted by 모근원

Lomohome.com :: 괴발자 모근원

[Sencha] Sencha Touch (1.1) 을 이용한 간단한 RSS Reader

'내가끄적인글 > 프로그래밍' 카테고리의 다른 글

Category

Tag

Recent posts

Recent Comment

Recent Trackback

Archive

Link

Calendar

티스토리툴바

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30