블로그 이미지
ssun++

카테고리

[전체] (73)
Android (7)
JavaScript (9)
CI (5)
Language (14)
ETC (38)
Total324,763
Today0
Yesterday2

[참고 문서]

http://docs.sencha.com/touch/2-0/#!/guide/first_app



[준비하기]

이 가이드는 Getting Started Guide에 기반하고 있습니다. 그 가이드는 SDK를 설치하고 기능적으로 완벽한 환경을 구축할 수 있도록 합니다. 아직 읽지 않았을 경우 먼저 읽은 후 돌아오기를 추천합니다.



[우리가 빌드 할 것]

간단한 당신 회사의 모바일 사이트로 사용할 수도 있는 웹사이트 형태의 앱을 빌드할 것입니다. 홈페이지, contact form, 최근 블로그 포스트를 가져와서 읽을 수 있는 목록을 추가해 볼 것입니다.



[시작하기]

먼저 해야 할 것은 Getting Started Guide에서 한 것과 같이, 앱을 설치하는 것입니다. 앱은 탭패널을 사용하여 4개의 페이지를 포함하게 될 것이며 아래와 같이 시작할 것입니다.

Ext.application({

    name: 'Sencha',


    launch: function() {

        Ext.create("Ext.tab.Panel", {

            fullscreen: true,

            items: [

                {

                    title: 'Home',

                    iconCls: 'home',

                    html: 'Welcome'

                }

            ]

        });

    }

});

브라우저에서 앱을 실행해보면 화면에 탭 패널이 나타나야 합니다. 홈페이지에 콘텐츠를 추가하고, 페이지 하단의 탭 바를 재배치해 봅시다. tabBarPosition 설정을 통해서 이를 구현하고 HTML을 조금 추가해 봅시다.

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("")

                }

            ]

        });

    }

});

HTML을 볼 수 있어야하지만, 그다지 아름답게 보이지는 않을 것입니다. cls 설정을 panel에 추가함으로써, CSS 클래스를 추가하고 좀 더 아름답게 보이도록 할 수 있습니다. 우리가 추가하는 모든 CSS는 examples/getting_started/index.html에 있습니다.



[블로그 페이지 추가하기]

피드를 가져오기 위해서 구글의 Feed API Service를 사용할 것입니다. 관련된 코드가 많기 때문에 우선은 결과를 확인하고, 어떻게 동작하는지 확인합시다.

이번에는 sencha.com/blog에서 최신 블로그 포스트를 가져오기 위해, panel 대신 nestedlist를 사용합니다. Nested List를 사용하여, 리스트를 탭핑함으로써 블로그 엔트리로 드릴 다운 할 수 있습니다.

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'

                            }

                        }

                    }

                }

            ]

        });

    }

});

Nested List에 간단한 설정과 - title, iconCls, displatField - 그리고 상세한 store 라는 설정을 주었습니다. Store 설정은 Nested List에 어떻게 데이터를 가져오는지 알려줍니다. store 설정을 차례로 살펴봅시다.

  • type : tree는 Nested List가 사용하는 tree store를 생성합니다.
  • fields는 Store에 블로그 데이터로 어떤 필드를 예상하는지 알려줍니다.
  • proxy는 Store에 데이터를 어디서 가져올지 알려줍니다. 잠시 후에 더 자세히 살펴 볼 것입니다.
  • root는 leaf가 아닌 root 노드를 알려줍니다. 위에서 leaf의 defaultValue는 true로 설정하였고 root에 대해서 오버라이드 할 필요가 있습니다.

모든 Store 설정에서 proxy가 가장 중요한 역할을 합니다. 우리는 블로그 데이터를 JSON-P 형식으로 얻기 위해 proxy에 구글 Feed API Service를 사용할 것을 알려줍니다. 이것은 우리가 임의의 블로그에서 데이터를 쉽게 가져와서 보여줄 수 있도록 합니다. (예를 들어, Sencha 블로그 url을 http://rss.slashdot.org/Slashdot/slashdot으로 바꾸어 Slashdot의 feed를 가져올 수 있습니다.)

proxy 정의의 마지막 부분은 Reader였습니다. Reader는 구글로부터의 데이터를 사용가능한 데이터로 디코드해주는 역할을 합니다. 구글이 블로그 데이터를 보내줄 때, 아래와 같이 JSON 오브젝트로 감싸서 보내줍니다.

{

    responseData: {

        feed: {

            entries: [

                {author: 'Bob', title: 'Great Post', content: 'Really good content...'}

            ]

        }

    }

}

우리가 관심 있는 것은 엔트리의 배열이기 때문에, Reader의 rootProperty를 'responseData.feed.entries'로 설정하였고 프레임워크가 나머지를 하도록 합니다.



[파보기]

Nested List가 데이터를 가져와서 보이도록 하였으므로, 마지막으로 해주어야 할 것은 사용자가 엔트리를 선택하여 읽을 수 있도록 하는 것입니다. 두 가지 설정을 추가하여 이것을 완료하도록 할 것입니다.

{

    xtype: 'nestedlist',

    //all other configurations as above


    detailCard: {

        xtype: 'panel',

        scrollable: true,

        styleHtmlContent: true

    },


    listeners: {

        itemtap: function(nestedList, list, index, element, post) {

            this.getDetailCard().setHtml(post.get('content'));

        }

    }

}

여기서 Nested List의 중요한 기능인 detailCard를 설정하였습니다. 이는 사용자가 아이템을 탭했을 때 다른 뷰를 보이도록 할 수 있습니다. 우리는 detailCard가 스크롤 가능한 Panel이 되도록 설정하였습니다. styleHtmlContent를 사용하여 텍스트가 보기 좋게 하였습니다.

퍼즐의 마지막 조각은 itemtap 리스너를 추가하는 것입니다. 아이템이 탭 되었을 때 함수를 호출합니다. 우리의 함수는 detailCard의 HTML을 사용자가 탭한 포스트의 콘텐츠로 설정하는 것이 전부이고, detail card에 포스트가 보이도록 하는 과정의 애니메이션은 프레임워크가 담당합니다. 이것은 블로그 리더가 동작하도록 하기 위한 코드입니다.



[Contact Form 만들기]

마지막으로 할 것은 contact form을 만드는 것입니다. 사용자의 이름, 이메일 주소, 메세지를 가지도록 할 것이고 FieldSet을 사용하여 아름답게 보이도록 할 것입니다. 아래 코드는 간단한 샘플입니다.

Ext.application({

    name: 'Sencha',


    launch: function() {

        Ext.create("Ext.tab.Panel", {

            fullscreen: true,

            tabBarPosition: 'bottom',


            items: [

                {

                    title: 'Contact',

                    iconCls: 'user',

                    xtype: 'formpanel',

                    url: 'contact.php',

                    layout: 'vbox',


                    items: [

                        {

                            xtype: 'fieldset',

                            title: 'Contact Us',

                            instructions: '(email address is optional)',

                            items: [

                                {

                                    xtype: 'textfield',

                                    label: 'Name'

                                },

                                {

                                    xtype: 'emailfield',

                                    label: 'Email'

                                },

                                {

                                    xtype: 'textareafield',

                                    label: 'Message'

                                }

                            ]

                        },

                        {

                            xtype: 'button',

                            text: 'Send',

                            ui: 'confirm',

                            handler: function() {

                                this.up('formpanel').submit();

                            }

                        }

                    ]

                }

            ]

        });

    }

});

이번에 fieldset을 포함하는 form을 만들어보았습니다. fieldset은 3개의 field를 포함합니다 - 각각 이름, 이메일, 메시지. VBox 레이아웃을 사용하여 아이템을 세로로 정렬합니다.

하단에 탭 핸들러를 가지는 Button을 추가하였습니다. 유용한 up 함수를 사용하였으며, 이는 버튼이 있는 form panel을 반환합니다. 그리고 submit 함수를 호출하여 상단에 명시한 url(contact.php)로 폼을 제출합니다.



[합체하기]

각각의 뷰를 개별적으로 만들어보았고, 완성된 앱으로 합쳐봅시다.

풀 소스는 Sencha Touch 2.0 SDK의 getting started 앱의 examples/getting_started 폴더에 있습니다.

Posted by ssun++

댓글을 달아 주세요

최근에 달린 댓글

최근에 받은 트랙백

글 보관함