위와 같이 title의 Done버튼과 Cancel버튼을 한글로 수정해 보겠습니다.


이런것들을 수정하려면 datepicker가 뭘 상속받는지 extend 와 뭘 필요로 하는지 requires를 살펴봐야 합니다.


그럼 다음 파일로 이동해서 수정해 보겠습니다.


touch -> src -> picker -> Picker.js


Picker.js파일을 열고 applyDoneButton 메소드를 수정해 봅시다.


applyDoneButton: function(config) {

        if (config) {

            if (Ext.isBoolean(config)) {

                config = {};

            }


            if (typeof config == "string") {

                config = {

                    text: config

                };

            }


            Ext.applyIf(config, {

                ui: 'action',

                align: 'right',

                text: '확인'

            });

        }


        return Ext.factory(config, 'Ext.Button', this.getDoneButton());

    },


text를 '확인'으로 수정하였습니다. 다시 실행해 보면 확인으로 변경된걸 확인하실 수 있습니다.


ui설정을 변경해 버튼의 ui도 변경하실 수 있습니다.


이제 나머지 Cancel 버튼도 수정해 보겠습니다.


applyCancelButton: function(config) {

        if (config) {

            if (Ext.isBoolean(config)) {

                config = {};

            }


            if (typeof config == "string") {

                config = {

                    text: config

                };

            }


            Ext.applyIf(config, {

                align: 'left',

                text: '취소'

            });

        }


        return Ext.factory(config, 'Ext.Button', this.getCancelButton());

    },




위와 같이 한글로 변경되었습니다.


다른 picker들도 변경된걸 확인할 수 있습니다.




위와 같이 datepickerfield를 사용하면 month영역이 영문자로 나타납니다.


국내와 비영어권 국가에서 불편할 수 있으니 숫자로 바꿔봅시다.


이를 위해서 다음 파일을 수정해야 합니다.


touch -> src -> picker -> Date.js


Date.js파일을 열고 createSlots 메소드를 수정해 봅시다.


for (i = 0, ln = Ext.Date.monthNames.length; i < ln; i++) {

months.push({

// text  : Ext.Date.monthNames[i],

text:  i + 1,

value : i + 1

});

}



위와 같이 숫자가 잘 나타납니다. month부분이 지나치게 비율이 넓어 안좋아 보이니 비율을 createSlot메소드에서 수정해 봅시다.


createSlot: function(name, days, months, years) {

        switch (name) {

            case 'year':

                return {

                    name: 'year',

                    align: 'center',

                    data: years,

                    title: this.getYearText(),

                    flex: 1

                };

            case 'month':

                return {

                    name: name,

                    align: 'center',

                    data: months,

                    title: this.getMonthText(),

                    flex: 1

                };

            case 'day':

                return {

                    name: 'day',

                    align: 'center',

                    data: days,

                    title: this.getDayText(),

                    flex: 1

                };

        }

    },


flex를 모두 1로 같은 비율로 설정해 보았습니다.



마지막으로 상단에 Year, Month, Day title이 신경쓰입니다.


방금전에 수정했던 createSlot을 다시 수정해 봅시다.


createSlot: function(name, days, months, years) {

        switch (name) {

            case 'year':

                return {

                    name: 'year',

                    align: 'center',

                    data: years,

                    title: '년',

                    flex: 1

                };

            case 'month':

                return {

                    name: name,

                    align: 'center',

                    data: months,

                    title: '월',

                    flex: 1

                };

            case 'day':

                return {

                    name: 'day',

                    align: 'center',

                    data: days,

                    title: '일',

                    flex: 1

                };

        }




위와 같이 수정된걸 확인할 수 있습니다.


sencha 2.2.1 에서는 pictos폴더에 이미지를 넣고 사용하면 됐었다. 아래 링크 설명

(http://squll1.tistory.com/entry/sencha-touch-300%EC%97%AC%EA%B0%9C%EC%9D%98-icon-image-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0)


2.3.1도 같은줄 알았는데 컴파일중 에러 발생..


이제 @include icon를 사용해야 한다.


그리고 이미지 파일이 아니라 font파일을 사용..


실습을 위해서 http://icomoon.io/app/방문후 폰트 파일을 다운해 보자


아이콘 선택후 하단 폰트 버튼 클릭


아이콘 옆에 화살표 모양 클릭


Reset codes버튼 클릭


그러면 ㅁ 으로 있던 공간에 문자가 생겼다.


이 문자가 해당 아이콘 이름이라고 생각하면 된다.


이제 하단 다운 로드 버튼을 누르고 받을 파일 압축을 풀어보자


다운파은 파일의 font폴더 안에 있는 eot, svg, ttf, woff파일을 resources -> sass -> stylesheets -> font ->pictos 폴더안에 복사한다.



이제 resources -> sass 안에 scss파일을 열어 다음과 같이 입력해 보자


@include icon-font('icomoon',inline-font-files('pictos/icomoon.woff',woff,'pictos/icomoon.ttf',truetype,'pictos/icomoon.svg',svg));


@include icon('home3','!','icomoon');

@include icon('history3',"'",'icomoon');

@include icon('setting3','&','icomoon');


@include incon() 안의 첫번째 인자는 iconCls에서 사용할 이름이고 두번째는 폰트 파일 받을때 생성됐던 이름 


세번째는 @include icon-font의 이름이다.


이제 이 scss파일을 컴파일 하고 (http://squll1.tistory.com/entry/sencha-touch-%EB%8B%A4%EC%96%91%ED%95%9C-%EC%83%89%EA%B9%94%EC%9D%98-button-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0 하단)


iconCls에 이름을 넣어보면 적용된걸 확인할 수 있다.


직접 디자인한 이미지를 사용하고 싶다면 디자이너에게  폰트로 만들어 달라고 하자ㅋ




위와 같이 tiltebar와 ios7의 status bar와 겹치는 현상은 아래 소스를 추가하자


if (parseFloat(window.device.version) === 7.0) {

            document.body.style.paddingTop = "20px";

}





네이티브단에서 해결하기(http://squll1.tistory.com/entry/ios-dev-ios7-status-bar-%EC%95%84%EB%9E%98%EB%A1%9C-%EB%B7%B0-%EB%82%98%EC%98%A4%EA%B2%8C-%ED%95%98%EA%B8%B0)


cardlayout에서 레이아웃에 담길 뷰들을 미리 담아 생성하는 경우들이 많다.


Ext.define('xxx.view.Card1',{

extend:'Ext.Panel',

xtype:'card1',

config:{

layout:'card',

items:[

{xtype:'panel1'},

{xtype:'panel2'},

{xtype:'panel3'}

]

}

});


위와 경우 card1라는 이름으로 cardlayout의 패널을 생성후 그 안에 이미 정의한 panel1, panel2, panel3 을 생성해놓았다.


이럴경우 card1패널을 생성하고 card1패널이 보여진다면 panel1이 화면에 보여지게 된다. 그리고 panel1에 show함수를 등록했다면


show함수가 실행된다.



문제가 되는 경우는 다음과 같다.


tab패널을 생성하고  탭바에 뷰들을 담는다. 첫번째 탭바에 방금 위에서 생성한 card1을 담아보겠다.


Ext.define('xxx.view.TabBar',{

extend:'Ext.tab.Panel',

xtype:'tabbar',

config:{

tabBarPosition:'bottom'

items:[

{xtype:'card1'},

{xtype:'card2'},

{xtype:'card3'}

]

}

});


이제 탭바를 화면에 띄우면 card1패널안에있는 panel1이 보여질 것이고 show함수가 실행된다.


card2와 card3도 card1과 같이 cardlayout의 패널이고 뷰가 3개 들어있다고 show 함수가 있다고 하자


그리고 card1, card2, card3 패널에도 show함수를 넣어보자.


그럼 다시 tabpanel을 띄워보자 그러면 card1의 show함수card1안의 panel1 show함수가 실행될 것이고


card2안의 panal1, card3안의 panel1 show 함수가 실행될 것이다.


차이점을 본다면 두번째 세번째 탭의 패널인 card2와 card3의 show함수는 실행되지 않는데 그 안의 panel1의 show 함수들은 실행되었다.


상식적으로 첫번째 탭바의 내용이 보여지므로 두번째 와 세번째는 보이지 않아야 정상일것 같지만 그러지 않았다.


tabpanel이 생성되면서 같이 생성된 card1, card2, card3패널들에 속한 첫번째 패널인 panel1이 보여지면서 show함수가 실행되었다.


이제 두번째 탭바를 선택해 보면 card2의 show 함수는 나오지만 card2안의 panel1의 show함수는 실행되지 않는다.


이미 보여줬기 때문이다.



위와 같다면 다음과 같은 문제를 예상해 볼 수 있다.


card2의 panel1의 화면에서 서버에서 데이터일정 시간단위로 받아 화면에 보여줘야 한다고 하면


처음 실행될때 card1, card2, card3의 panel1의 show함수들이 같이 실행되므로 두번째 탭을 선택하지 않았는데도


서버에서 데이터를 받아오기 시작한다.


그렇다고 card2안 panel1의 show함수가 아니라card2의 show함수에서 데이터를 받아오면


이제 panel1, panel2, panel3를 이동할때 문제가 된다.


뭐 card2와 panel1의 show함수와 hide함수를 사용해서 적절히 만들어준다면 문제가 없을수도 있겠지만 


더 간단하고 메모리도 적게 차지하는 방법을 생각하보면



card레이아웃의 뷰들을 동적으로 생성해서 넣어주고 보여지지 않는 뷰들을 삭제 한다면 위와 같은 문제들은 한번에 해결된다.


그리고 화면에 보여지지 않는 뷰들을 다 destory시킬 것이니 메모리에도 도움이 될 것이다.


동적으로 생성하기 위해 주의할 점이 있다.


보통 컨트롤러 안에서 뷰를 참조할때 다음과 같이 참조한다.


Ext.define('xxx.controller.CardController',{

extend:'Ext.app.Controller',

config:{

refs:{

card1:'card1',

panel1:'panel1',

panel2:'panel2',

panel2:'panel2'

},

contol:{

}

}

});


위와 같다면 뷰를 동적으로 생성시 에러가 발생한다.


아래와 같이 보면 


Ext.define('xxx.controller.CardController',{

extend:'Ext.app.Controller',

config:{

refs:{

card1:'card',

panel1:{

selector:'panel1',

xtype:'pnael1',

autoCreate:true

},

panel2:{

selector:'panel2',

xtype:'pnael2',

autoCreate:true

},

panel3:{

selector:'panel3',

xtype:'pnael3',

autoCreate:true

}

},

control:{

}

}

});


동적으로 생성할 뷰에 selector와 xtype, autoCreate속성을 추가 했다.


위와 같이 해야 동적으로 뷰를 생성하고 cardlayout패널에 넣을 수 있다.


처음에 본 card1에 panel들을 삭제하자


Ext.define('xxx.view.Card1',{

extend:'Ext.Panel',

xtype:'card1',

config:{

items:[

]

}

});


items안을 비워 두었다. 이제 보여주고 싶은 뷰가 있다면 컨트롤러에서 뷰를 생성해서 넣어주면 된다.


컨트롤러에서 뷰를 생성해서 넣어보겠다.


this.getCard1().setActiveItem(this.getPanel1());


이와 같이 하면 panel1을 화면에 보여주게 된다.


panel2를 보여주고 싶다면


this.getCard1().setActiveItem(this.getPanel2()); 다음과 같이 하면 된다.


그리고 화면에 보이지 않는 panel1은 다음과 같이 삭제 시킨다.


this.getPanel1().destory();


이렇게 한다면 tabpanel과 tabpanel안에 속한 cardlayout panel 그리고 화면에 보여지는 패널만 있게 되고 나머지는


메모리에 남아 있지 않는다.


cardlayout패널에 몽땅 다 넣고 만드는 사람들이 있고 뷰들의 실행되는 순서를 헷갈려하는 사람들이 있을까봐 정리해 보았다.


show, hide, initialize, launch 등 실행 흐름이나 순서가 헷갈리면 console.log();


오늘 일하다 실수한 부분을 정리


field에 데이터를 셋팅해주는 setRecord함수는 반드시 모델객체를 넣어주어야 한다.


var data={

name:'노준혁',

gender:'male'

}

formpanel.serRecord(data);

이러면 데이터 바인딩이 안된다.


(model 폴더안에 PersonModel클래스를 정의 했다고 가정)

var data=Ext.create('MyProject.model.PersonModel',{

name:'노준혁',

gender:'male'

});

formpanel.serRecord(data);


이전 내용에서 scss파일을 수정하여 이미지 버튼과 버튼효과 버튼 색깔설정에 대해 경험해 보았습니다.


이번에는 sencha theme를 수정해보는 내용을 설명하겠습니다.


sencha project를 생성하여 (project 생성방법 : http://squll1.tistory.com/entry/sencha-touch-mvc%ED%8C%A8%ED%84%B4-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0 )


실행을하면 다음과 같은 화면이 나타납니다.



이 파란 색깔이 마음에 드시는분도 있겠지만 저는 마음에 들지 않아 바꿔 보도록 하겠습니다.


그럼 resources -> sass -> app.scss 파일을 열어 줍니다.



파일을 열면 다음과 같은 내용이 나올 겁니다.



우리는 이 scss파일에 코드를 추가하여 전체적인 theme를 바꿔 보도록 하겠습니다.


상단 타이틀바와 하단 탭바의 색깔을 바꿔 보도록 하겠습니다.


아래와 같이 $base-color 값을 설정하면 됩니다.



$base-color값을 설정후 다시 새로 고침하면 화면이 바뀌지 않는데


그 이유는 이 scss파일을 컴파일 해줘야 css파일이 생성되고 우리는 생성된 css파일을 적용하기 때문입니다.


컴파일을 하는 방법은 터미널 창을 열고 scss파일이 있는 경로로 이동 합니다.


이동방법을 모르면 cd를 입력후 해당 폴더를 터미널 창에 끌어다 놓습니다.




그리고 compass compile <scss파일이름>을 입력해 컴파일 합니다.



컴파일이 끝나고 새로고침을 해보면 새로운 색깔이 적용된걸 확인 할 수 있습니다.



다음으로 타이틀바와 탭바에 효과를 적용해 보도록 하겠습니다.


아래와 같이 $base-gradient값을 설정하면 됩니다.



저는 glossy효과를 설정했습다. 효과의 종류에는 glossy, bevel, flat, matte가 있습니다.


다시 scss파일을 컴파일하고 새로고침 해보면 타이틀바와 탭바에 광택효과가 적용된걸 확인 할 수 있습니다.



다음으로 화면의 background-color를 바꿔보도록 하겠습니다.


background-color는 $page-bg-color값을 사용하면 됩니다.


지금 배경색은 회색인데 흰색으로 바꿔 보겠습니다.



다시 scss파일을 컴파일 하고 실행해 보면 다음과 같이 흰색으로 바뀐것이 보입니다.



이번에는 하단 탭바의 glossy효과만 다른 효과로 바꿔 보도록 하겠습니다.


이 효과는 $tabs-bar-gradient값을 설정하면 됩니다.


아래와 같이 bevel효과를 설정하고



컴파일 후 실행해 보면



상단 타이블바는 glossy효과 하단 탭바는 bevel효과가 적용됐습니다.


이제 상단 타이틀바만의 효과를 바꾸고 싶다면 $toolbar-gradient값을 설정하면 됩니다.



컴파일 후 실행해 보면 다음과 같이 상단 타이틀바도 flat효과가 적용된걸 확인 할 수 있습니다.



타이블바와 탭바 모두 같은 효과를 지정하려면 앞에 설명했던 $base-gradient값만 설정하면 됩니다.


다음으로 현재 탭바의 아이콘 색이 빨간색인데 이 색을 흰색으로 바꿔 보도록 하겠습니다.


탭바 아이콘 색은 $tabs_dark_active_color값을 설정하면 됩니다.



컴파일 하고 실행해 보면 탭바 아이콘 색이 빨간색에서 흰색으로 바뀐걸 확인 할 수 있습니다.



이 외에도 theme를 수정할 수 있는 많은 값들이 있지만


여기까지 설명하겠습니다.


formpanel안에서 다음과 같은 증상이 나타난다면




titlebar에 docked:'top' 속성을 추가하면 상단에 붙는다.






다양한 색깔의 버튼을 만드는 방법도 scss파일을 사용하여 만듭니다.


이 scss파일을 다루는 방법을 조금만 익히면 sench touch잡업하는데 많은 도움이 될 것입니다.


간단한 코드 몇줄로 전체 theme을 수정하고 설정할 수 있습니다.


이 부분은 다음에 알아보기로 하고 오늘은 다양한 색깔의 button을 만드는 방법을 알아보겠습니다.


scss파일을 열고 아래와 같이 추가해 봅니다.



첫번째는 사용할 이름을 설정합니다. 여기서는 black이란 이름으로 설정했습니다.


두번째는 버튼의 color를 설정합니다.


세번째는 버튼의 효과를 설정합니다.


효과로는 bevel, glossy, matte, flat이 있습니다.


bevel


glossy


matte


flat


다음과 같이 추가한 후 scss파일을 컴파일 합니다.


컴파일 방법은 


터미널 창에서 sass폴더로 경로를 이동힙니다.


이동방법을 모르면 cd를 입력후 해당 폴더를 터미널 창에 끌어다 놓습니다.




그리고 compass compile <scss파일이름>을 입력해 컴파일 합니다.



컴파일이 끝나고


view class에서 다음과 같이 ui에 scss에서 설정한 이름을 넣어 사용합니다.



지난번에는 버튼에 여러가지 icon을 넣는 방법을 알아봤었습니다.


이번에는 버튼이미지를 가지고 버튼을 만들어 보겠습니다.


일단 버튼모양의 이미지가 필요합니다. 


이미지는 평상시 버튼이미지와 버튼을 눌렀을때의 이미지 두장이 필요합니다.


이미지는 http://www.iconfinder.com/에서 button으로만 검색해도 쉽게 찾을 수 있습니다.


이미지를 센차프로젝트안에 복사합니다.



어디에 넣든 경로만 알고 참조해 오면 상관 없지만 


필자는 resources -> images 폴더안에 복사해 넣었습니다.


그리고 위 사진에서 sass폴더안에 scss파일에 해당 버튼이미지를 등록시켜 사용하면 됩니다.



전에 icon이미지를 사용할때도 설명했지만 프로젝트를 생성한후 기본적으로 적용되는 scss는 app.scss입니다.


여러분들은 이 scss에 버튼 이미지를 등록하면 됩니다.



위와 같이 버튼 이미지에 이름을 붙여 버튼을 등록 합니다.


그리고 scss파일을 컴파일 해야 등록한 이미지버튼을 사용할 수 있습니다.


scss파일을 컴파일 하면 css가 생성되는데 이 css를 참조하여 우리는 사용하게 되는 것입니다.


컴파일 방법은 


터미널 창에서 sass폴더로 경로를 이동힙니다.


이동방법을 모르면 cd를 입력후 해당 폴더를 터미널 창에 끌어다 놓습니다.




그리고 compass compile <scss파일이름>을 입력해 컴파일 합니다.



컴파일이 끝나면 이미지를 사용할 수 있습니다.


이제 view class에서 다음과 같이 사용하면 됩니다.



cls에 추가한 버튼 이름을 넣고 pressedCls는 버튼을 눌렀을때 사용할 등록한 이미지 이름을 넣어줍니다.


버튼을 눌러보면 잘 적용된걸 확인할 수 있을겁니다.


평상시


눌렀을때

+ Recent posts