Sencha Touch 2.0 Beta Tutorial 첫번째 앱 -1-

처음 Sencha SDK 설치 한 후 지지난 번에 첫번째 Sencha Application을 만들어 봤습니다.

그 다음에 Sencha에서 제공하는 Tutorial대로 차근차근 배워보기로 하고 지난 시간에 간단한 맛보기 코드를 다뤘습니다.

오늘 공부할 걸 보니까 다시 Sencha Touch로 만든 첫 번째 앱이네요.
지난번 만든건 1.1.1 버전으로 만든거니까 이번에 할 거는 2.0 베타 버전으로는 처음 만드는 앱입니다. ^^

오늘 배울 앱을 보니까 메인 화면에 Sencha Logo 가 나오고 밑에 텍스트가 나오네요.
그리고 bottom에 toolbar가 있고 세개의 버튼이 있습니다.
두번째 blog는 JSON으로 원격 웹 페이지 내용을 보여주는 부분이구요.
세번째 Contact us는 이메일을 보내는 form이 나오더라구요.

정확히 어떤 앱이고 또 이 앱을 구현하려면 어떻게 코딩을 해야 하는지 자세히 공부해 보도록 하겠습니다.

***** Getting Started
첫번째로 할 부분은 우리가 지난시간에 했던 코드랑 거의 비슷합니다. 화면이 있고 툴바가 하나 있으니까 우선 그것부터 만들어 보겠습니다.
Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create("Ext.tab.Panel", {
            fullscreen: true,
            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    html: 'Welcome'
                }
            ]
        });
    }
});
처음엔 별거 없습니다. launch:function()안에 코딩을 하는데 Ext.create 을 사용해서  안에 Ext.tab.Panel을 사용합니다. fullscreen은 true로 하고 item에는 Home버튼을만들고 Welcome이라는 글을 쓰게 될 겁니다.

아주 기초적인 부분입니다. 처음부터 꼼꼼히 다 알려고 하면 지칩니다.
자꾸자꾸 반복해서 몸으로 익히세요. 첨부터 머리로 익히려고 하면 골치 아픕니다.

이제 할 일은 tabBar를 밑으로 내리고 Welcome 부분에 이미지도 넣고 텍스트도 조금 더 넣을 겁니다.
Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create("Ext.tab.Panel", {
            fullscreen: true,
            tabBarPosition: 'bottom',

            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    html: [
                        '<img src="http://staging.sencha.com/img/sencha.png" />',
                        '<h1>Welcome to Sencha Touch</h1>',
                        "<p>You're creating the Getting Started app. This demonstrates how ",
                        "to use tabs, lists and forms to create a simple app</p>",
                        '<h2>Sencha Touch (2.0.0)</h2>'
                    ].join("")
                }
            ]
        });
    }
});

tabBar를 밑으로 하는건 tabBarPosition을 Bottom으로 하면 되구요. 이미지와 텍스트를 추가하는건 html부분을 바꾸시면 됩니다.

이제 첫번째 화면은 완성 됐죠? tabBar 넣는 일은 이제 여러번 반복해서 쉽게 하실 수 있을 겁니다.

***** Adding The Blogs Page
이제 두번째 페이지를 넣을 차례입니다.

두번째 페이지는 위와 같이 display할 겁니다.
위 아래 tab bar가 있고 가운데에는 List 가 들어갑니다. 이 텍스트들은 JSON을 통해서 외부에서 불러옵니다.
그러면 저 텍스트를 클릭하면 그에 따른 내용들이 보여집니다. 일반 웹페이지를 불러온거니까 일반 웹페이지 Navigate하는 식으로 다 작동 될 겁니다.
코드는 아래와 같습니다.
Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create("Ext.tab.Panel", {
            fullscreen: true,
            tabBarPosition: 'bottom',

            items: [
                {
                    xtype: 'nestedlist',
                    title: 'Blog',
                    iconCls: 'star',
                    displayField: 'title',

                    store: {
                        type: 'tree',

                        fields: [
                            'title', 'link', 'author', 'contentSnippet', 'content',
                            {name: 'leaf', defaultValue: true}
                        ],

                        root: {
                            leaf: false
                        },

                        proxy: {
                            type: 'jsonp',
                            url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
                            reader: {
                                type: 'json',
                                rootProperty: 'responseData.feed.entries'
                            }
                        }
                    },

                    detailCard: {
                        xtype: 'panel',
                        scrollable: true,
                        styleHtmlContent: true
                    },

                    listeners: {
                        itemtap: function(nestedList, list, index, element, post) {
                            this.getDetailCard().setHtml(post.get('content'));
                        }
                    }
                }
            ]
        });
    }
});

코드가 너무 복잡하죠? 중괄호{}도 너무 많구요. 직접 코딩하실 때는 중괄호 끝나는 부분에 } 이게 어떤 부분의 끝인지 주석을 달아 주시면 나중에 수정하거나 분석할 때 편하실 겁니다.
여기선 몇개의 못보던 configuration들이 있죠? xtype,displayField,store 같은 것들이요.
store config는 nested list에게 data를 어떻게 수집(fetch)하는지를 알려 줍니다.
store config 내에 여러가지 요소가 있는데요.
type을 tree로 한 건 tree store를 생성한다는 거구요.
fields는 블로그 내 데이터 중 어떤 fields들을 가져오겠다고 알려주는 겁니다.
이 경우엔 블로그에서 데이터를 어떤 field 이름을 사용해서 처리했는지를 알아야 겠죠?
proxy는 이 데이터를 어디에서 가져올 거라는 것을 알려 줍니다. 이 부분은 나중에 좀 더 자세히 다룰 겁니다.
root는 leaf가 아니라는 것을 알려 줍니다.
이 Store configuration중에서 proxy가 가장 중요한 역할을 합니다.
이 예제에서는 블로그의 데이터를 JSON-P 양식으로 리턴하기 위해 Google의 Feed API Service를 사용할 거라는 것을 proxy에게 알려줍니다.
Google의 Feed API Service는 어떤 블로그의 데이터에서도 쉽게 데이터를 가져와서 우리들의 엡에 display할 수 있도록 해 줍니다.
@@@@@ url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://rss.slashdot.org/Slashdot/slashdot', 이렇게 바꾸시면 다른 데이터를 가져 올 수 있습니다. 서버단에서 웹 페이지는 어떻게 만들어야 되는지는 나중에 다룰 겁니다. @@@@@
그 다음으로 proxy안에는 rootProperty: 'responseData.feed.entries' 부분이 있습니다.
이 부분은 그냥 이렇게 하면 Google에서 알아서 처리를 합니다. 마지막에 entries라고 복수형을 썼기 때문에 배열 형식으로 구글에서 처리할 겁니다.
이건 그냥 나중에 copy and paste해서 계속 이렇게 사용하시면 됩니다.

그 다음에 나오는 것이 detailCard와 listeners입니다.
detailCard는 유저가 tab했을 때 특정한 view를 제공할 수 있도록 해 줍니다. 우리는 스크롤이 가능하도록 세팅을 했고 글자를 좀 더 보기 좋게 하기 위해서 styleHtmlContent를 사용했습니다.

다음은 listeners에 있는 itemtap인데요.
이건 어떤 item을 tap했을 때 그 해당 item이 무엇인지 알 수 있도록 해 줍니다.
각 아이템을 클릭하면 detail들이 나올텐데요 클릭한 item을 보내줘야 해당 details를 가져올 수 있습니다.

조금 코드가 생소해서 어렵게 느껴 질 수도 있겠지만 이 코드로 직접 만들어 보시고 이것 저것 변형 시키면서 익히시면 훨씬 이해가 빠르실 겁니다.

오늘은 여기까지 하구요.
다음 시간에는 메일 보내는 화면을 마치고 세개의 화면을 하나의 앱속에서 표현될 수 있도록 하는 작업을 해 보겠습니다.