반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함


처음 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를 가져올 수 있습니다.

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

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

반응형

Comment

  1. 길어진 2012.02.27 17:56

    안녕하세요 솔웅님

    이번에 Sencha Touch를 공부하게 되면서 솔웅님의 블로그를 찾게 되었습니다.

    매 포스트마다 굉장히 배울점히 많다고 느끼게 되는데요*_*

    궁금한게 있어서 질문을 좀 드리고 싶습니다.

    html에서 일일이 script 태그를 사용해 js파일을 지정해 주어야 하는지요?
    <script type="text/javascript" src="file:///D:/Web%20workspace/SenchaTest/WebContent/src/tab/Panel.js"></script>이런식으로 써주지 않으면 해당 function들을 못읽어서 에러가 나는것 같더라구요...

    어제 처음 Sencha를 접해봐서 그런지 너무 생소하고 어려운게 많네요ㅜ

    • 길어진 2012.02.27 18:08

      아 해결되었습니다!!

      sencha-touch-all.js를 넣어주니까 다른 파일들을 안 넣어줘도 되네요..^^;

      멍청한 질문 드린것 같아 민망하고 쑥스럽네요 ㅎㅎㅎㅎ

      앞으로 블로그 열심히 보며 많은 부분 공유하도록 하겠습니다 수고하세요~~^^

    • 솔웅 2012.02.28 03:31 신고

      예 해결 되었다니 다행이네요.
      궁금한 점 있으시면 언제든지 글 올려 주세요.
      감사합니다.

  2. Freeduck 2012.03.15 00:09

    안녕하세요... 쉽게 잘 써주셔서 감사히 잘 보고 따라하고 있습니다.
    제 브라우저에서는 tabBarPosition: 'bottom'을 하면 탭바가 보이지 않는군요... top, left, right 다 보이는데 말입니다. 혹시 왜 그런 것인지는 몰겠네요... sencha-touch-all-debug.js 파일과 sencha-touch.css 파일은 이번에 정식 버전이라고 릴리즈 된 것을 받아서 사용하고 있습니다. 혹시 달라진게 있는지 몰겠네요... 요소검사로 보니까 분명히 나와있고 잡혀있는데 화면에만 보이지 않네요... 이상하네요.

  3. Freeduck 2012.03.15 00:12

    흐... 찾았네요...
    비쥬얼 스튜디오를 쓰다보니 <!DOCTYPE html /> 이렇게 자동으로
    변환되어서.... <!DOCTYPE html> 이렇게 바꿔주니까 나오는군요.
    ^^ 계속 좋은 포스트 부탁 드려요.

    • 솔웅 2012.03.20 06:11 신고

      아 예.. 편집기에서 자동적으로 닫는 태그를 생성해 주면 그런 문제가 생길 수 있겠네요.
      팁 감사합니다..