[그림1.2]처럼 기본 구조는 이렇습니다. 저는 앱스프레소를 쓰기에 저런구조로 되어있는것입니다. sencha-touch.css파일이나 sencha-touch.js위치는 어느곳에다 둬도 상관은 없습니다. 그리고 index.html이 있는데 저 파일로 실행을 할것입니다. 그리고 HelloWorld.js이 js폴더안에 보이시죠? 저부분이 웹부분을 그려주는 스크립트 파일이라 생각하시면 됩니다. 센차터치는 html은 거의 작성을 안하는게 특징이죠 물론 스크립트 안에서 html을 작성하기도 하고 html파일내에 작성을 하기도 하지만 대부부느 스크립트로 되어 있습니다. 그래서 스크립트를 모르시는 분들은 골치가 아프실 겁니다 .ㅡ,.ㅡ 그러면 index.html을 살펴볼까요?
[그림 1.3]
[그림1.3]을 보시면 sencha-touch.css및 sencha-touch.js을 적용을 시켜서 센차터치를 사용하겠다고 정의해 둔것을 보실 수 있을겁니다. 저것이 센차터치의 기본적인 틀입니다. 그리고 밑에서부터 스크립트로 그려나가는것이죠. 그밑에 HelloWorld.js에서 부터 시작을 하게 되는겁니다. 그럼 HelloWorld.js파일을 살펴보겠습니다.
[그림1.4]
[그림1.4]를 보시면 Ext.setup란게 있습니다. 흠 저게 뭘까요? 설명을 드리자면 Ext의 setup()함수를 이용해 페이지 설정을 하는곳입니다. 그냥 간단하게 센차터치를 시작하려면 무조건 저 setup부분을 통해 시작을 한다고 보시면 되겠습니다. 다른것 안됩니다 무조건 저거에요~ 저거~ setup~~(애정남 드립..ㅡ.ㅡ) 무튼 그밑에 옵션같은것들이 있네요. 페이지 설정이니까 뭔가 설정을 하겠죠?
tabletStartupScreen부분은 말그래도 테블릿에서 어플리케이션이 실행될때 적용될 이미지입니다. 768*1004해상도 이어야 합니다. ㅎㅎ
phoneStartupScreen부분도 보시면 알다시피 폰에서 어플리케이션이 실행될때 적용될 이미지겠죠? 320*460의 이미지를 사용합니다.
icon은 다 아실꺼라 믿어요 ㅎㅎ 모바일 기기의 홈화면에 깔릴 이미지, 즉 웹클립 아이콘입니다.72*72크기의 이미지를 사용합니다.
glossOnIcon은 아이콘에 반사광의 광택효과를 줄지 여부를 결정한다는데 저는 이걸 해도 안해도 모르겠음둥 ㅡ,.ㅡ
statusBarStyle은 폰에서 상단의 20px영역을 차지하는 상태바의 스타일을 지정합니다.^^
이외에도 수많은 페이지 설정 옵션들이 있습니다. api를 통해서 알아보시면 될것같아요ㅠㅠ 매일 api보시게 될거라고 그랬죠? ㅎㅎ
onReady()함수는 중요한 부분!! 이 함수를 통해 실제 UI구성을 위한 코드를 작성하는 곳입니다. 이 함수가 없다면 시작이 되질 않아요 중요합니다. 그냥 중요하다고 생각하시면 되요 ㅎㅎㅎ 이 함수안에다가 처음에 정의를 해놔야지 시작이 된다는 점을 명심하세요^^ 지금 onReady()함수안에 보면 Ext.Panel이 보입니다. 이 패널은 또다른 패널 혹은 버튼과 같은 다른 UI컨트롤을 포함할 수 있는 컨테이너 객체로서 화면의 레이아웃과 컴포넌트를 배치하는데 자주 사용될것입니다. 패널이라...어디선가 많이 봤죠? 자반의 awt에서 보셨을겁니다 ㅎㅎ 비슷합니다. 저도 awt는 가물가물 하지만 그런 패널이라고 생각하시면 될듯..안드로이드의 xml레이아웃 같은것이라 보시면 되겠네요 ㅎㅎ
패널안에 뭔가 옵션을 주었네요 패널만 선언하고 아무것도 주지 않으면 암것도 안나오겠쬬? ㅎㅎ
fullscreen은 말그대로 전체화면으로 주겠냐 아니냐 겠쬬? ㅎㅎ
html이 나왔습니다. 여기서도 html을 사용을 할수가 있다는거죠. 지금은 "Hello Sencha Touch" 란 텍스트밖에 주진 않았지만 <br> <font color=red>와 같은 것도 줄수가 있답니다. 말그래도 html을 사용할 수 가 있는것입니다. fullscreen, html외에도 수많은(?) 정말 수많은 옵션들이 있습니다....api보시면 절망하실듯...하지만 차근차근 알아가시면 머리에 박히게 될것입니다 ㅡ,.ㅡ 지금은 이정도만 보시면 될것입니다.
자 이제 실행을 해볼까요?
[그림 1.5]
저의 폴더 경로는 저렇습니다. 저기에서 index.html을 실행을 해보겠습니다.
그림[1.6]
오옷!! 쨔잔~~ 반갑다 센차터치가 뜨네용 ㅎㅎ 정말 간단하죠? 하지만...이건 정말 말그대로 헬로우일뿐이죠 아하하하하 그래도 센차의 활용을 위한 첫단계이므로 기본 프로그램 구성과 동작 방식을 이해하는것으로 이번시간에 만족을 하시면 될것 같습니다.^^ 어떻게 도움이 되셨는지 모르겠네요 ㅎㅎ 참고로 익스플로러에서는 실행이 안됩니다. 크롬이나, 사파리, 파이어폭스에서 실행을 하셔야 할것입니다.
신청하기 
