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

지난시간에 Sencha Touch 2.0 Beta SDK Tutorial에 있는 예제를 해 봤습니다.
3개의 Tab 이 있었고 첫번재 탭은 이미지와 텍스트 뿌리는 거였고 두번째 탭은 원격 블로그를 JSON으로 불러오는 거 였습니다.
여기 두번째 까지 다뤘었구요. 세번째 이메일 보내는 탭을 할 차례인데요. 이거 하기 전에 두번째 탭에 대해 조금 더 살펴 보고 가죠.

Tutorial에는 없는 내용인데 그냥 제가 궁금해서 한번 살펴 봤습니다.
두번째 탭에서 가장 중요한 부분은 아래 부분이었습니다.

 url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',

구글 api를 이용해서 http://feeds.feedburner.com/SenchaBlog 의 내용을 가져 오는 거 였습니다.
저 웹사이트를 한번 가 봤습니다.

우리가 지난시간에 만들었던 List 첫번째 제목과 이 웹싸이트 첫번째 글 제목이 같네요.
그리고 이 List의 첫번째 아이템을 클릭하면 저 웹싸이트의 해당 글 내용이 그대로 나옵니다.
위 웹사이트의 소스를 한번 봤습니다.

제목이 <title> 태그 안에 있죠? <author>도 있고 <content> 도 있습니다.

이는 지난시간에 했던 아래 fields tag랑 일치합니다.

fields: [
                            'title', 'link', 'author', 'contentSnippet', 'content',
                            {name: 'leaf', defaultValue: true}
                        ],
즉 proxy에서 설정한 url로 가서 fields 에 명시한 필드들의 값을 googleapi를 거쳐서 가져 오는것 같습니다.

혹시나 해서 저 소스를 복사해서 제 local 에 넣고 proxy의 url 을 local의 해당 파일로 설정했는데 잘 안 되더라구요.
이번 tutorial에서는 client side에서 작업하는 것만 돼 있고 원격 server side에서 작업하는 방법이 자세하게 설명돼 있지 않아서 방법을 잘 모르겠습니다.

혹시 server side 에서 어떻게 하는지 아시는 분이나 이것 관련해서 자세히 설명된 강좌 싸이트 아시는 분 알려주시면 감사하겠습니다.

===== o ===== o ===== o ===== o ===== o ===== o ===== o =====

그럼 지난시간에 이어서 세번째 탭인 이메일 보내기를 해 보겠습니다.

***** Creating a 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가 있습니다. (name,email,message)
그리고 layout은 VBox layout을 사용했구요. 이것은 아래위로 아이템들을 정렬합니다. 아래쪽에는 tap handler와 함께 Button이 하나 있구요. 이 버튼이 눌려지게 되면 데이터가 url로 전달되고 submit을 통해서 결과값을 받습니다.

이 예제에서는 여기까지만 있는데요. example 폴더의 getting started 예제를 보면 버튼이 아래와 같이 돼 있습니다.
{
                            xtype: 'button',
                            text: 'Send',
                            ui: 'confirm',

                            // The handler is called when the button is tapped
                            handler: function() {

                                // This looks up the items stack above, getting a reference to the first form it see
                                var form = this.up('formpanel');

                                // Sends an AJAX request with the form data to the url specified above (contact.php).
                                // The success callback is called if we get a non-error response from the server
                                form.submit({
                                      success: function() {
                                        // The callback function is run when the user taps the 'ok' button
                                        Ext.Msg.alert('Thank You', 'Your message has been received', function() {
                                            form.reset();
                                        });
                                    }
                                });
                            }
                        }

버튼을 누르면 Contact.php로부터 결과값을 받아서 성공했을 경우 Message를 띄워 주는 겁니다.

Contact.php에는 간단하게 아래와 같이 돼 있네요.
{
    "success": true
}

일단 여기까지 3개 화면 모두 각각 만들어 봤습니다.

이제 이것을 하나로 모으는 일이 남았습니다.

모으는 방법은 .join("") 을 사용하는 방법이 있고 , 를 찍고 그냥 다음 item을 넣는 방법이 있습니다.

아래가 전체 소스입니다.
//We've added a third and final item to our tab panel - scroll down to see it
Ext.application({
    name: 'Sencha',

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

            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    cls: 'home',
                    html: [
                        '<img width="65%" 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</h2>'
                    ].join("")
                },
                {
                    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'));
                        }
                    }
                },
                //this is the new item
                {
                    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();
                            }
                        }
                    ]
                }
            ]
        });
    }
});

위 화면이 완성된 화면입니다.

이 Tutorial은 여러분 localhost :  http://localhost/sencha-touch-2-rc/docs/#!/guide/first_app 로 가시면 보실 수 있습니다.
웹으로 보시려면 http://docs.sencha.com/touch/2-0/#!/guide/first_app
로 가시면 보실 수 있습니다.

그리고 Sencha Touch SDK 는 http://www.sencha.com/products/touch/download/ 로 가셔서 아래 2.0 베타버전을 다운 받으셔서 여러분 서버에 설치하세요.

2.0 Release Candidate for Developers

이번 시간은 본격적인 Tutorial로 들어가기 전에 샘플 앱을 하나 만들어 본 겁니다.
다음 시간부터 본격적으로 Sencha Touch Tutorial을 정리해 보도록 하겠습니다.

***** *****