블로그 이미지
ssun++

카테고리

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

[참고 문서]

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



[이전 포스트]

[Sencha Touch 2] 시작하기 1



[코드 살펴보기]

이전 포스트에서 생성한 GS 디렉토리를 살펴봅시다. 디렉토리 구조는 아래와 같습니다.

각 파일/디렉토리에 대한 설명입니다.

  • app - Model, View, Controller, Store를 포함하는 디렉토리
  • app.js - JavaScript 엔트리 포인트
  • app.json - Builder가 최소화 버전을 만들 때 사용하는 config 파일
  • index.html - 앱의 HTML 파일
  • packager.json - Packager가 native 앱(iOS나 Android)을 만들 때 사용하는 config 파일
  • resources - CSS, Image를 포함하는 디렉토리
  • sdk - Sencha Touch SDK 사본

엔트리 포인트인 app.js를 살펴봅시다.

Ext.application({

    name: 'GS', // 앱의 네임스페이스. 모든 클래스는 GS로 시작함. ex) GS.view.Main


    requires: [

        'Ext.MessageBox' // 필요한 클래스. 이 앱은 MessageBox를 사용함.

    ],


    views: ['Main'], // 앱의 뷰 리스트


    icon: { // 앱을 iOS 장치의 홈 스크린에 추가할 때 사용할 아이콘 리스트.

        '57': 'resources/icons/Icon.png',

        '72': 'resources/icons/Icon~ipad.png',

        '114': 'resources/icons/Icon@2x.png',

        '144': 'resources/icons/Icon~ipad@2x.png'

    },


    isIconPrecomposed: true,


    startupImage: {

        '320x460': 'resources/startup/320x460.jpg',

        '640x920': 'resources/startup/640x920.png',

        '768x1004': 'resources/startup/768x1004.png',

        '748x1024': 'resources/startup/748x1024.png',

        '1536x2008': 'resources/startup/1536x2008.png',

        '1496x2048': 'resources/startup/1496x2048.png'

    },


    launch: function() { // 앱이 초기화 될 때 호출되는 함수. 로딩 인디케이터를 숨기고 'Main' 뷰를 뷰포트에 추가함

        // Destroy the #appLoadingIndicator element

        Ext.fly('appLoadingIndicator').destroy();


        // Initialize the main view

        Ext.Viewport.add(Ext.create('GS.view.Main'));

    },


    onUpdated: function() { // 개발 환경에 앱이 설치되고, 앱의 업데이트가 있을 때 호출되는 함수

        Ext.Msg.confirm(

            "Application Update",

            "This application has just successfully been updated to the latest version. Reload now?",

            function(buttonId) {

                if (buttonId === 'yes') {

                    window.location.reload();

                }

            }

        );

    }

});

앱의 엔트리 포인트는 launch 함수입니다. 디폴트 앱에서는 먼저 로딩 인디케이터를 숨긴 후, 메인 뷰를 생성하여 뷰포트에 추가합니다.

뷰포트는 카드 레이아웃이며 컴포넌트를 추가할 수 있습니다. 디폴트 앱은 Main 뷰를 뷰포트에 추가하여 화면에 보이게 됩니다. Main 뷰의 코드를 살펴봅시다.

app/view/Main.js 파일을 열어서 12 라인을 수정해봅시다.

title : 'Home Tab'

21 라인을 수정해봅시다.

title: 'Woohoo!'

24-28 라인을 수정해봅시다.

html: [

    "I changed the default <b>HTML Content</b> to something different!"

].join("")

앱을 리프레시 해서 변경사항을 확인해봅시다.


Posted by ssun++

댓글을 달아 주세요

최근에 달린 댓글

최근에 받은 트랙백

글 보관함