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

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리


반응형
코로나 SDK에서 안드로이드용 In-App Purchase 관련  API를 내 놨습니다.
이제 아이폰,안드로이드폰 모두에서 코로나로 개발한 In-App Purchase기능을 사용할 수 있게 됐습니다.

아래 이번주에 Corona SDK에서 배포한 안드로이드 In-app Billing 튜토리얼을 정리했습니다.

여러분도 참고하세요.

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

Getting Started with Android In-app Billing

앱을 통해서 돈을 벌 수 있는 방법은 유료 앱으로 publish를 하던가 광고를 달던가 아니면 가상 머니를 사용하는 방법이 있습니다.
그 외에 in-App Billing이 있는데요. 이번에 Corona SDK에서 안드로이드용 In-App Billing 기능을 발표했습니다.

이 in-App Purchase 기능은 모바일 앱을 이용한 많이 애용되는 비지니스 모델인데요 이것을 다른 말로 freemium 이라고 합니다. freemium은 일단 무료로 제공하고 그 외의 고급 기능이나 아이템을 유료로 구매할 수 있도록 하는 것을 말합니다.
모바일 앱의 경우는 다음 레벨로 가거나 특별한 아이템을 구한다던가 virtual currency를 사용하던가 하는 기능을 넣을 수가 있을 겁니다.

유저가 구매를 approve하면 새로운 컨텐츠가 unlock 되거나 외부 소스로부터 다운로드 되던가 할 겁니다.
이 방법을 사용하면 아주 다양한 방법의 수익 모델을 만들어 낼 수 있습니다. 그리고 이번에 Corona SDK에서 안드로이드 용으로 이 기능을 지원했기 때문에 그 다양한 수익 모델을 Corona SDK로 개발하면서도 사용할 수 있습니다.
아이폰 앱에는 이미 이 기능이 지원됐기 때문에 코로나 개발자들은 두개의 시장에서 이 기능을 이용할 수 있게 되겠죠? 이것이 Corona SDK 같은 cross-platform development tool의 매력이라고 할 수 있을 겁니다.

하지만 이 좋은 기능도 개발자나 기획자가 사용할 줄 모르면 아무 소용이 없을 겁니다. 이 기능을 이용하려면 최신버전의 Corona SDK가 있어야 합니다. (현재는 유료 사용자만이 다운 받을 수 있습니다.)



Getting Started

시작하기 전에 여러분이 준비해 두셔야 할 부분이 있습니다.
1. Corona SDK build 2012.769 이후 버전
2. Indie-AndroidCorona Pro 유료 사용자 일 것
3. Android Developer 계정을 가지고 있을 것

1. Android Deveoper Console
안드로이드 내에서 billing이 가능하게 하려면 BILLING 퍼미션이 build.settings에 세팅 돼 있어야 합니다. 그리고 이것을 Android Developer Console에 없로드해서 당신의 앱이 In-App Billing Products를 시작할 수 있도록 만들어 두어야 합니다.
main.lua에 아무런 코딩이 안 돼 있어도 이 작업을 해야 합니다. 그리고 지금 개발이 진행 중이라도 상관없습니다. 어쨌든 우선 이 step을 밟아야 합니다. 여러분의 앱에 In-app 상품을 넣을 수 있으려면 우선 이 과정을 거쳐야 하는게 구글이 만들어 놓은 룰입니다.
당신의 앱이 이미 판매중이거나 마켓에 오픈돼 있는 상태라도 이 기능을 넣으려면 우선 build.settings에 퍼미션을 넣고 업로드 한 다음에 In-App purchase 기능을 개발해야 합니다.
한번 이렇게 해 두면 Android developer console의 해당 앱 밑에 in-app products라는 링크를 클릭해서 이곳에서 올린 in-app 상품을 보실 수가 있습니다.

build.settings에 BILLING 퍼미션을 넣는 방법은 아래와 같습니다.

settings =
{
    orientation =
    {
        default = "landscapeRight",
    },

    android =
    {
        usesPermissions =
        {
            "com.android.vending.BILLING",
        },
    }
}

이 예제에서 주의깊게 보셔야 할 점은 android - usesPermissions의 com.android.vending.BILLING 부분 입니다.
이 부분은 orientation을 지정한 settings 다음에 위치해 있습니다.
 
이렇게 하신 후에 android 앱으로 build하세요. 그리고 그 apk화일을 android developer console에 업로드 하시면 됩니다.

아직까지는 Publish를 하지는 마세요.

그렇게 한 다음부터 In-app 제품을 넣기 위한 Administering In-app Billing Guide를 진행 하실 수 있습니다.

안드로이드 개발자로서 마켓에 앱을 올려보신 분들은 아시겠지만 앱을 다 개발 한 다음에 publish를 해야하는데요. 요즘은 이것을 또 Activate 하는 단계도 생겼더라구요.
혹시 나중에 앱을 다 만들고 나서 마켓에 올리고 테스트 할 때 주의하세요.

Google Documentation

구글 Guide에 대해서는 위에 링크를 걸어 놓기는 했지만 여기에 대해서는 한번 언급하고 넘어가는게 좋을 것 같습니다.

구글에서는 In-app Products를 어떻게 셋업해야 하는지에 대해 꽤 좋은 가이드를 제공하고 있습니다. 그리고 그것을 쉽게 테스트 할 수 있도록 했구요.
만약 여러분이 Android Developer Console쪽에서 어떻게 세팅해야 하는지를 자세히 알고 싶으시면 아래 두 가이드를 참고하세요.

2. The Corona "store" API

이 튜토리얼에서는 구글에서 제공하는 test product identifier들을 사용하겠습니다.
이 테스트 상품에서는 아래 세가지 Action을 가져올 수 있습니다.

- android.test.purchased : 구매가 성공했을 때 얻어 옴
- android.test.canceled : 구매 트랜잭션이 cancel 됐을 때 얻어 옴
- android.test.item_unavailable : 해당 제품 구매가 가능하지 않을 때 얻어 옴

이 테스트 상품의 진짜 nice 한 점은 이렇게 각각 다른 상황에서 여러분들이 이를 어떻게 쉽게 콘트롤 할 수 있을 지 경험할 수 있게 해 준다는 점 입니다. 예를 들어 여러분은 android.test.canceled 상품을 이용해서 유저가 트랜잭션 중 cancel했을 경우에 대한 코딩을 할 수 있게 됩니다.

store.init("google", transactionCallback)

여러분이 코딩을 하면서 이 in-app purchase 기능을 구현하기 위해서는 제일 처음 store.init() API를 사용하게 될 겁니다. 파라미터로는 구글 마켓(얼마전 Google Play로 바뀌었습니다.)을 사용할 거라는 것을 알리는 "google"을 첫번째로 넣고 두번째로는 불러올 함수 명을 넣습니다.

아래 transaction callback listener 함수와 함께 store.init()을 사용하는 방법에 대한 샘플 예제가 있습니다.

local function transactionCallback( event )
    local transaction = event.transaction

    if transaction.state == "purchased" then
            -- Transaction was successful; unlock/download content now
   
    elseif transaction.state == "restored" then
           -- You'll never reach this transaction state on Android.

    elseif transaction.state == "refunded" then
        -- Android-only; user refunded their purchase
        local productId = transaction.productIdentifier
        -- Restrict/remove content associated with above productId now
  
    elseif transaction.state == "cancelled" then
        -- Transaction was cancelled; tell you app to react accordingly here

    elseif transaction.state == "failed" then
            -- Transaction failed; tell you app to react accordingly here
     end

    -- The following must be called after transaction is complete.
    -- If your In-app product needs to download, do not call the following
    -- function until AFTER the download is complete:

    store.finishTransaction( transaction )
end

store.init( "google", transactionCallback )

맨 아래 store.init()이 transactionCallback 함수를 call 하는 보분이 있죠? 이 부분이 Android In-app Billing 이벤트가 발생 했을 때 실행 될 부분입니다.

Handling Refunds

Android In-app billing은 iOS의 In-app billing과 거의 같은데 한가지 refunded라는 트랜잭션 상태가 더 있습니다. iOS와는 다르게 안드로이드 플랫폼에서는 유저가 refund할 수 있도록 해 줍니다. 그래서 유저에게 주었던 contents를 다시 가져오려면 바로 이 refunded 트랜잭션 상태일 때 해야 할 것입니다.

위 샘플에서 보듯이 refunded 트랜잭션 상태에서 받는 중요한 데이터는 event.transaction.productIdentifier입니다. 이 정보를 가지고 여러분은 필요한 작업을 하실 수 있습니다. 아마도 그 필요한 작업은 환불 했을 경우 해당 content를 다시 block 시키는 거겠죠? 아니면 돈을 내고 추가로 다운 받은 파일을 지우는 기능이던가요.

No "restored" State on Android

store.restore() 함수는 로그인 된 유저 계정과 연관된 product id의 리스트를 다시 검색할 수 있도록 해 줍니다. iOS에서는 이 product 리스팅이 transactionCallback listener 의 restored 트랜잭션 상태에서 받을 수 있습니다. 그리고 안드로이드에서는 이 restored 트랜잭션 상태가 없습니다. 대신에 그 상품이 purchased를 다시 실행하면서 그 기능을 할 수 있습니다.
아주 작은 차이이지만 transactionCallback listener 함수를 디자인할 때 잘 고려해서 디자인을 해야 합니다.

Other Transacton Event Data

transaction events와 관계된 다른 모든 데이터들은 iOS의 In-app purchase와 동일합니다. 그러니까 다음 guide를 꼭 봐 주세요.
In-app  Purchase Guide
Transaction Listener Callback Events
그리고 예전에 in-Purchase app 샘플을 분석했던 글을 보시면 도움이 되실겁니다.
코로나 네트워킹 과 웹 서비스 3 (In App Purchase 1)

store.finishTransaction (transaction)

위 샘플 코드에 있는 transactionCallback() 함수에 있는 모두 아주 중요한 것들입니다.
store.finishTransaction은 모든 트랜잭션의 마지막부분에 반드시 call 되야 합니다.
어떤 트랜잭션이 끝났다는 것을 확실히 정의하는 부분입니다.
만약 어떤 파일을 다운로드 받아야 할 때는  어떤 상황이 발생할 까요? 아마도 이 다운로드가 모드 끝나고 나서 store.finishTransaction()이 call 되어야 할 겁니다. (그러려면 어딘가에 network.download() 리스너가 있어야 겠죠.)

만약 이미 코딩은 최초 다운받은 앱에 다 돼 있고 단순히 어떤 content를 unlock 하는 기능만 수행될거면 callback 리스너 마지막 부분에 store.finishTransaction()을 넣으면 되겠죠.

두 경우 모두 첫번째 인수로 event.transaction 테이블을 넘겨줘야 한다는 것을 잊지 마세요.
 store.finishTransaction( event.transaction )

3. Purchasing Products

이제 purchases, refunds, failed/cancelled 같은 트랜잭션들을 어떻게 다뤄야 할 지 알아 보겠습니다. iOS in-app purchase에서와 같이 store.purchase()를 사용해서 트랜잭션을 초기화 합니다. 대개 앱 화면에서 Buy 버튼을 누르면 이벤트 리스너가 감지해서 call할 때 이 동작이 이뤄 집니다.
-- single product purchase
    store.purchase( { "android.test.purchased" } )

-- multi-item purchase
   store.purchase( { "android.test.purchased", "android.test.canceled" } )

여기서도 Google에서 제공하는 테스트 product들을 사용해서 테스트 해 볼 수 있습니다.
좀 더 자세한 정보를 보시려면 store.purchase() documentation 을 참고하세요.

Cross-Platform Development

코로나의 장점은 한번의 코딩으로  아이폰, 안드로이드 용 앱을 만들 수 있는 multi-platform 기능입니다. 이 기능을 좀 더 쉽게 콘트롤 할 수 있도록 코로나에서는 store API에 새로운 프로퍼티를 추가했습니다.
애플의 In-app Purchase는 iOS 디바이스들에서만 가능하고 안드로이드의 In-app Billing은 Google Play에서만 가능합니다. (같은 안드로이드 앱이라도 Nook나 Kindle Fire 에서는 In-app Billing을 사용할 수 없습니다.)
새로 제공되는 기능은 store.availableStores 테이블로 어떤 디바이스 인지를 알수 있는 파라미터 입니다.

아래 예제가 있습니다.

if store.availableStores.apple then
    store.init("apple", transactionCallback)
   
elseif store.availableStores.google then
    store.init("google", transactionCallback)
end

이렇게 코딩을 하면 아이폰용과 안드로이드 용 파일을 따로 관리할 필요가 없겠죠?

iOS의 In-app Purchases와 Android의 In-app Billing은 한가지 크게 다른 개념이 있습니다. 안드로이드에서는 각각의 In-App product들에 대해 정보를 retrieve할 수 없는 반면에 iOS에서는 이 기능이 가능합니다. 이것은 구글의 한계라고 볼 수 있겠죠. 이 의미는 상품의 이름, description같은 정보들을 직접 앱 내에서 혹은 외부 서버에서 개발자들이 직접 관리해야 한다는 얘기 입니다. (만약에 필요하다면요.)

이 다른 점 때문에 store.loadProducts() 함수가 있는데 이것은 iOS in-app purchases에서만 사용될 수 있습니다. 여러분이 iOS,안드로이드 두 플랫폼 모두에서 돌아가는 앱을 개발하고자 한다면 이 함수가 가능한지 여부를 체크하기 위해서 store.canLoadProducts 프로퍼티를 사용하실 수 있습니다. (store.init()에서 pass된 플랫폼이 무엇인가에 따라 true와 false를 return 하게 됩니다.)

 Additional Resources

Android In-app Billing 을 테스트 하시려면 구글에서 제공하는 테스트 상품으로 쉽게 테스트하실 수 있구요. 또 여러분이 만든 상품으로도 쉽게 테스트 하실 수 있습니다. 이번에 새로 제공되는 Corona SDK 내의 InAppPurchase 샘플 코드를 참조하세요.
/SampleCode/Networking/InAppPurchase 에 있습니다.

그리고 예전에 iOS in-app purchase와 관련해서 올려 놓은 In-app Purchase Guide도 보시구요. iOS용 가이드 이지만 대부분이 안드로이드에서도 적용 됩니다. 그리고 각각의 store API 함수에 대한 정보를 보시려면 In-app Purchase API Reference를 보시기를 권장합니다.

이 기능은 Corona Daily Build 2012.760 이후 버전에서만 가능합니다.
현재까지 이 버전은 유료 사용자만 받으실 수 있습니다.

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

요즘 예전처럼 폭풍집필이 잘 안되네요.
슬럼프인가봐요.. 휴~~~~~~~
여러분의 추천이 큰 힘이 될 수 있을 것 같아요.
추천 부탁드려요.

추천.. 추천.. ~~~ ~~~ 감사.. 감사..
반응형


반응형

요즘 사무실 이사에 이런 저런 일들이 많이 생겨서 블로그 글 올리는 일이 뜸해졌습니다.

어느 정도 일이 정리 되면 다시 열심히 Study 해서 이 블로그에 정리 해 놓을께요. 그리고 댓글 올리신 분들도 많이 계신데 미처 답글을 드리지 못했습니다. 이번주에 질문 올리신 분들 제가 research 하고 직접 테스트 한 답을 구해서 답글 올릴께요.

오늘은 코로나에서 새로 나올 Corona Level Editor 에 대한 아이콘 콘테스트가 있어서 이 소식을 소개합니다.

아래 글은 Corona sdk를 만든 회사인 Ansca 의 CEO 인 Carlos 가 올린 글입니다.


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

Corona Level Editor Icon Challenge

Should I really explain what this is about?

이게 뭔지 일일이 설명해야 할 까요?

You seen our forthcoming level editor. Well… Guess what? Time to unleash the artist in you and we are going to hold the Level Editor Icon Challenge.

여러분 아마 조만간 나올 level editor를 보셨을 겁니다. 이제 뭔지 아시겠어요. 이제 여러분 몸속에 흐르는 예술인의 피를 맘껏 펼치실 때입니다. 코로나에서는 Level Editor 아이콘 콘테스트를 엽니다.

Submit a Corona Level Editor Icon by April 2nd. (See, if I would have put down April 1st, the US folks here would have thought this would have been an April’s Fools Joke. O el dia de los inoncentes)… Send me a PNG file at least 512×512 and then I will need the full PSD if we select your icon. (AI files works wonders too…)

코로나 레벨 에디터 아이콘을 4월 2일까지 응모해 주세요. (아마 내가 4월 1일이라고 얘기하면 여기 미국 애들은 이게 만우절 거짓말이라고 생각할 수도 있을거예요. 그래서 4월 2일로 했습니다.  O el dia de los inoncentes) 최소 512X512 크기의 PNG 파일로 보내주세요. 선택되면 PSD 원본을 제출해 주셔야 합니다. (모두 다 제대로 동작해야 겠죠?)

And, because I want to keep his a surprise, the only way you can enter is by e-mailing me your entries at my email address at  cicaza [at]@ anscamobile []dot[]. com. (protecting myself from spammers.)… (remove the [at] and the []dot[])

응모 방법은 cicaza [at]@ anscamobile []dot[]. com. (스팸 방지를 위해서 이렇게 쓴 겁니다. )... (여기서 [at] 하고 []dot[]을 빼시면 되요.)

Winner will get a free one year subscription to Corona PRO and or an extension to their subscription and some other Ansca goodies. ;=)

우승자는 Corona PRO 1년 사용권을 드립니다. 기존 사용자에게는 1년 연장해 드리구요. 그리고 다른 Ansca 제품들도 조금 더 준비 돼 있습니다.

The winning entry will have to give us all rights to the image. No prior/derivative or copies of images are to be entered. Once we select a winning entry I will notify you via email and then disclose publicly.

우승작품은 모든 사용 권한이 Ansca 에게 있게 됩니다. 다른 곳에 응모했거나 남의 작품을 보내주시면 안되구요. 당선작은 이메일로 알려드리고 또 공개도 할 겁니다.

Thanks

Carlos.

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

이상입니다.

아마 코로나 레벨 에디터에 대해 전혀 모르시는 분 계실테죠?

아래 이미지가 앞으로 나올 Corona Level Editor 화면이랍니다.

그림을 보니까 단순히 Level별 난이도를 조절하는게 아니라 Physics 적용이나 화면 배치 등 GUI 방식으로 어느정도 개발을 쉽게 해 주는 기능이 많은 것 같습니다.

지난번에 Corona sdk 책 표지 광고 디자인 응모전에서는 제 기억에 폴란드 사람이 우승하고 미국사람하고 멕시코 사람이 준우승해서 상품을 받은 것 같은데요.

이번엔 한국 분이 받으면 좋겠네요.

그래픽 디자인 가능하신 분 응모 하세요.

반응형

Sencha Touch 2 Tutorial - View - 02

2012. 3. 12. 21:54 | Posted by 솔웅


반응형
Using Views in your Applications 02

Custom Configurations and Behavior

Sencha Touch 2는 예측 가능한 API들을 제공하고 깔끔한 코드와 쉬운 테스트가 가능하도록 하하기 위해 configuration system에 extensive를 사용합니다. 개발자들에게도 클래스를 만들 때 같은 방식으로 만들기를 강하게 권장합니다.

이미지를 tap했을 때 이미지에 대한 정보가 팝업으로 뜨는 이미지 뷰어를 한번 만들어 봅시다. 우리의 목표는 이미지 url, title 그리고 description이 있을 수 있는 재사용 가능한 뷰를 만드는 것입니다. 그리고 이 이미지를 tap했을 때 title과 description을 표시해 줄 겁니다. 이 모든 기능을 재사용 가능하도록 하는 클래스를 만들어 보겠습니다.

이미지를 표시하기 위해서는 Ext.Img 컴포넌트를 사용해야 합니다. 아래처럼 subclass를 만들어 보겠습니다.

Ext.define('MyApp.view.Image', {
    extend: 'Ext.Img',

    config: {
        title: null,
        description: null
    },

    //sets up our tap event listener
    initialize: function() {
        this.callParent(arguments);

        this.element.on('tap', this.onTap, this);
    },

    //this is called whenever you tap on the image
    onTap: function() {
        Ext.Msg.alert(this.getTitle(), this.getDescription());
    }
});

//creates a full screen tappable image
Ext.create('MyApp.view.Image', {
    title: 'Orion Nebula',
    description: 'The Orion Nebula is rather pretty',

    src: 'http://apod.nasa.gov/apod/image/1202/oriondeep_andreo_960.jpg',
    fullscreen: true
});



이 소스를 보시면 우리의 클래스에 두개의 configuration들을 달았습니다. 이 두개는 null로 정의했습니다. 이 새 클래스의 인스턴스를 생성할 때 title과 description config를 pass 할 겁니다.

초가화와 onTap 함수가 일어날 때 어떤 동작들을 하게 됩니다. initialize 함수는 컴포넌트가 instant될 때 불려 집니다. 그러니까 이 위치는 이벤트 리스너와 같은 behavior를 셋업하기 아주 좋은 장소 입니다. 첫번째로 우리가 해야 할 일은 이 initialize 함수를 사용하는 것 입니다. (역자주:자바의 생성자가 연상되네요.) callParent(인수) 는 initialize 함수를 부른 superclass 입니다. 이 부분은 아주 중요합니다. 이것을 빼먹으면 여러분의 component는 정확하게 동작하지 않을 겁니다.

callParent를 한 다음에 tap 리스너를 달았습니다. 이 리스너를 단 객체를 tap 하게 되면 onTap 함수가 call 될 겁니다. Sencha Touch 2이 모든 컴포넌트들은 이런 식으로 DOM 객체나 styling을 추가하거나 제거할 때 또는 Ext.dom.Element에서 하는 일반적인 작업들에 대한 이벤트를 listen하기위해 사용할 수 있는 한개의 element property 가 있습니다.

onTap 함수는 아주 간단합니다. 이 함수를 부시면 이 이미지에 대한 정보를 pop up으로 보여주기 위해 Ext.Msg.alert을 사용했습니다. 여기서 title과 description 두개의 config들을 봅시다. 둘 다 getter 함수를 receive 받습니다. (getTitle, getDescription) 이렇게 되면 setter 함수(setTitle, setDescription)도 generate 되게 됩니다.


Advanced Configurations

클래스에 새 configuration option을 생성할 때 getter와 setter 함수들이 생성됩니다. 그래서 아래 코드에서 border는 자동적으로 getBorder와 setBorder 함수를 받게 됩니다.

Ext.define('MyApp.view.MyView', {
    extend: 'Ext.Panel',

    config: {
        border: 10
    }
});

var view = Ext.create('MyApp.view.MyView');

alert(view.getBorder()); //alerts 10

view.setBorder(15);
alert(view.getBorder()); //now alerts 15

getter와 setter만 생성되는 것은 아닙니다. applyBorder와 updateBorder도 같이 생성이 됩니다.

Ext.define('MyApp.view.MyView', {
    extend: 'Ext.Panel',

    config: {
        border: 0
    },

    applyBorder: function(value) {
        return value + "px solid red";
    },

    updateBorder: function(newValue, oldValue) {
        this.element.setStyle('border', newValue);
    }
});

우리의 applyBorder함수는 border configuration이 세팅되거나 바뀔 때 내부적으로 불려지게 됩니다. 여기에 유저가 (혹은 앱 실행중에) 값을 바꿀 때 어떤 변화를 주는 동작을 넣기에 아주 좋습니다. 이 예제에서는 border 의 width를 받아서 CSS border specification string에 전달을 해 줄 겁니다.

예를 들어 border 가 10dl ehlaus applyBorder 함수는 10픽셀의 빨간 선으로 만들어 줄 겁니다. 이 apply 함수는 선택사항입니다. 여기에는 반드시 return 값이 있어야 됩니다. 그렇지 않으면 아무 동작도 일어나지 않습니다.

updateBorder 함수는 applyBorder 함수가 값을 변경하고 나서 불려집니다. 이것은 대개 DOM을 수정하고 AJAX request를 send 할 때 혹은 다른 프로세스 종류를 수행하기 위해 사용됩니다. 이 예제에서는 단지 view의 element를 get 해서 setStyle을 이용해서 border style을 업데이트 할 겁니다. 그러면 setBorder가 call 될 때마다 우리의 DOM은 새로운 스타일을 반영하기 위해 즉시 업데이트 될겁니다.

아래 예제가 있습니다.
화면 위에 border의 width를 변경할 수 있도록 +,- spinner button을 달았습니다. Spinnerspin 이벤트를 받아서 우리가 만든 view의 새로운 setBorder 함수를 call 할 겁니다.

//as before
Ext.define('MyApp.view.MyView', {
    extend: 'Ext.Panel',

    config: {
        border: 0
    },

    applyBorder: function(value) {
        return value + "px solid red";
    },

    updateBorder: function(newValue, oldValue) {
        this.element.setStyle('border', newValue);
    }
});

//create an instance of MyView with a spinner field that updates the border config
var view = Ext.create('MyApp.view.MyView', {
    border: 5,
    fullscreen: true,
    styleHtmlContent: true,
    html: 'Tap the spinner to change the border config option',
    items: {
        xtype: 'spinnerfield',
        label: 'Border size',
        docked: 'top',
        value: 5,
        minValue: 0,
        maxValue: 100,
        incrementValue: 1,
        listeners: {
            spin: function(spinner, value) {
                view.setBorder(value);
            }
        }
    }
});



Usage in MVC

애플리케이션을 만들 때 MVC 모델을 따를 것을 권장합니다. 그러면 이 애플리케이션의 코드는 잘 구성되고 재사용하기 쉽도록 만들어 지게 될 겁니다. 그리고 위에서 사용했듯이 naming을 잘 사용하면 아주 심플하게 사용하기 쉽습니다.

위의 MyApp.view.MyView 클래스는 app/view/MyView.js 에 작성 되어야 합니다. 이래야지 어플리케이션이 자동적으로 이 클래스를 찾아서 로드를 할 수 있습니다. MVC 기반의 Sencha Touch 앱의 파일 구조에 익숙하지 않으시더라고 간단히 배울 수 있습니다. Sencha Touch app은 단지 하나의 html 파일과 하나의 app.js 파일이 있고 model과 view 그리고 controller들이 있게 됩니다. 이 세 요소들은 app/model, app/view 그리고 app/controller 디렉토리에 있게 됩니다.

index.html
app.js
app/
    controller/
    model/
    view/
        MyView.js
       
여러분은 여러분이 만들고 싶은 만큼의 view를 만들 수 있고 이 파일을 app/view 디렉토리에 넣으시면 됩니다. 그리고 이 것을 app.js안에 specifying 하시면 이것들은 자동적으로 로드 될 겁니다.

//contents of app.js
Ext.application({
    name: 'MyApp',
    views: ['MyView'],

    launch: function() {
        Ext.create('MyApp.view.MyView');
    }
});

이 간단한 view naming convention을 따름으로서 우리는 애플리케이션 안에 우리가 만든 뷰 클래스들의 인스턴스를 쉽게 로드하고 생성할 수 있게 됩니다. 위에 있는 예제들이 이 convention을 따랐습니다. 어플리케이션의 launch 함수에서 MyView 클래스를 로드하고 인스턴스를 생성했습니다. Sencha Touch 의 MVC 앱에 대해 좀 더 많은 것을 알고 싶으시면 intro to apps guide를 보세요.

반응형