HW1 : Sencha Touch 2 Home Panel 추가하고 자기 소개 하기.

첫 번째 과제 입니다. (현재 이 블로그를 쓸 때 제가 generate 한 저의 app 이름은 Sample 입니다. 처음부터 블로그를 따라 오신 분들은 app 이름이 ST2_test1 일 겁니다. 여러분들은, 제가 Sample 이라고 쓴 부분은, 여러분들이 generate 한 app 이름에 맞게 고치셔야 해요 ㅠㅠ)

Home 이라는 새로운 Panel 을 만들고 자기 소개서를 쓴 뒤, Main tab panel 에 추가하는 과제 입니다. + app 전체에 고정된 title bar 를 만들어 보세요.

어떻게 새로운 Panel 을 추가해야 하는지가 막막하실 수 있는데 아래 링크를 따라가시면 영상이 나옵니다. 

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

거기서 5분 46초 정도에 가면 Home Panel을 만드는 예제가 나오구요, 차근 차근 따라 하시면 됩니다.

Home pane 에서 중요한 두 가지가 있는데 

1. Ext.define 은 정말 자주 쓰이는 method 이기 이 method 의 역할이 무엇인지 정확히 알고 계셔야 합니다. (API 를 찾아서 보세용^^)

아참 그리고 또 중요한 것이 해당 함수 호출 할 때, 네이밍 줄 때 입니다. 가령 저의 app 이름은 Sample 이고, 제가 지금 만들고 있는 home panel 의 파일 이름을 Home.js 라고 저장했다면 view 폴더에는 아래와 같이 나올 것입니다.

폴더 구조 보이시죠?ㅎ

view 폴더 밑에는 현재 main.js (tab panel 입니다. 센차 generate 하면서 자동 생성된 것이죠) 와

방금 우리가 만든 home panel 을 담고 있는 home.js 파일이 있습니다.

그리고 아래는 home.js 파일의 내용 일부를 캡쳐한 것인데요,

위의 사진 처럼 네이밍 줄 때,

app 이름.view.VIEW 이름 

이런 식으로 줘야 합니다. 

위의 예에서는 Sample.view.Home 이 되겠네요!

2. xtype 이라는 것이 있는데, 센차에서 제공하는 다양한 컴포넌트들은 그에 매칭되는 xtype 이 있습니다. 그런데 해당하는 컴포넌트들을 상속한 뒤 프로그래머가 원하는 xtype 으로 지정해 줄 수가 있습니다. 실제로 영상에서 보시면 xtype: 'homepanel' 이라고 지정해 준 것을 볼 수 있구요. 이게 중요한 이유는,, 지금 만든 home panel 을 tab panel 에 추가 해줄 때 xtype: 'homepanel' 이런 식으로 main 에서 추가 해 주기 때문입니다. (Main.js 에서 추가를 해줘야 하는데 어디에 어떻게 추가를 해줘야 할까요? 이번 과제의 핵심 중 하나가 여기에 있습니다.)

Main.js 도 수정해 줘야 합니다.

앞에서도 언급했지만 만든 Home panel 을 사용하기 위해서는 당연히 tab panel 의 아이템으로 포함이 되어야 하고, 고로  tab panel 에 대한 정보를 가지고 있는 Main.js 에서 '이제 tab panel 은 home panel 을 가질꺼야' 라고 알 수 있게 수정을 해주셔야 합니다. 

app.js 도 수정해 줘야 합니다.

이건 그냥 가르쳐 드릴께요. 다음 부터는 이렇게 쓰시면 됩니다!^^

위의 사진은 app.js 일부를 캡쳐한 것입니다.  views 를 생성하고 나면 빨간색 박스 친 부분처럼 Home 이라고 추가 해줘야 합니다.

+ app 전체에 고정된 title bar 만들기

기본적으로 sencha 에서 generate 한 함수는 각 items 별로 독립된 타이틀 바를 가지고 있습니다. 이 title bar 를 app 전체에 고정된 title bar 로 바꿔 보세요!^^

힌트를 드리면,, Main.js 에서 수정을 해줘야 합니다. 어떻게 보면 당연한 부분이죠?