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

최근에 받은 트랙백

글 보관함


일단 센차터치에서 그동안 버전업이 됐길래 저는 최신버전으로 새로 받아서 작업하고 있습니다.


제가 받은 버전은 sencha-touch-2.0.0-gpl 입니다.


제가 센차터치 (Sencha Touch) 튜토리얼을 몇개 번역 했는데요.

Component 까지 번역을 했군요.


그런데 실습을 하지 않으면서 계속 번역만 하니까 제가 잘 이해를 못하겠더라구요.

제일 모르겠는건 어떻게 MVC 모델을 적용해서 앱을 만드는지 입니다.


그래서 지난 시간에 했었던 Component 글의 첫번째 예제를 MVC 모델을 적용해서 고쳐 보겠습니다.


먼저 원래 소스는 아래와 같습니다.


var panel = Ext.create('Ext.Panel', {
    layout: 'hbox',

    items: [
        {
            xtype: 'panel',
            flex: 1,
            html: 'Left Panel, 1/3rd of total size',
            style: 'background-color: #5E99CC;'
        },
        {
            xtype: 'panel',
            flex: 2,
            html: 'Right Panel, 2/3rds of total size',
            style: 'background-color: #759E60;'
        }
    ]
});

Ext.Viewport.add(panel);


이것을 app.js에 넣어서 직접 실행해 보려면 아래와 같이 하면 됩니다.


Ext.application({
    name: 'Panel',

    launch: function() {

        var panel = Ext.create('Ext.Panel', {
        layout: 'hbox',

        items: [
            {
                xtype: 'panel',
                flex: 1,
                html: 'Left Panel, 1/3rd of total size aaa ',
                style: 'background-color: #5E99CC;'
            },
            {
                xtype: 'panel',
                flex: 2,
                html: 'Right Panel, 2/3rds of total sizeaaa',
                style: 'background-color: #759E60;'
            }
            ]
        });

        Ext.Viewport.add(panel);
    }
});


보시면 아시겠지만 튜토리얼에 있는 코드를 복사해서 Ext.application 안의 launch:function() 안에 넣으시면 됩니다.


문제는 이 소스를 어떻게 MVC 모델에 맞게 수정하느냐 입니다.


이 소스는 view 만 있는 간단한 소스 입니다. 그러니까 폴더 구조를 아래와 같이 가져가겠습니다.


Panel 폴더가 프로젝트 폴더입니다.

그 안에 index.html과 app.js 가 있습니다. 그리고 sencha-touch.css 와 sencha-touch-all.js는 다운받은 Sencha Touch 소스 파일에서 복사해 넣습니다.


그리고 MVC 패턴을 적용하려면 app 폴더를 만들어야 하는 것 같습니다.

그 app 폴더에 view,controller,model,store 등의 폴더를 만드는데 이 소스에서는 view 만 있으면 되니까 view를 만들었습니다.

저 view 안에 panel.js 파일을 만들어서 그 안에 실제 view 를 담당하는 코드를 넣겠습니다.


일단 index.html 코드를 볼께요.


<!DOCTYPE html>
<html>
<head>
    <title>MVC Sample with Panel</title>
    <link rel="stylesheet" href="sencha-touch.css" type="text/css">
    <script type="text/javascript" src="sencha-touch-all.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>


소스는 간단합니다. html 파일에서는 단지 css와 js 파일을 불러왔습니다.

sencha-touch.css와 sencha-touch-all.js 파일을 Panel 폴더 밑에 복사해 넣었기 때문에 위와 같이 불러왔는데요. 서버에서 동작 시키려면 해당 경로를 써 주셔야 합니다.


그 다음은 app.js 파일을 보겠습니다.


Ext.application({
    name: 'Panel',


    launch: function() {
        Ext.create('Panel.view.panel');
    }
});


소스 코드가 아주 간단해 졌죠?

MVC 모델을 쓰는 이유가 이렇게 app.js를 간단하게 만들고 각 기능별로 폴더와 js 파일을 나눠서 코드를 관리하기 위해서 입니다.

여기서는 launch:function() 안에 Ext.create 함수를 사용해서 Panel.view.panel 을 불러왔습니다.

처음 Panel 은 위에서 설정한 이 애플리케이션의 name 이고 view는 app 폴더 밑에 있는 view 폴더를 가르킵니다. 그리고 맨 마지막 panel 은 view 폴더 밑에 있는 panel.js를 말합니다.


이렇게 하면 app/view/panel.js 파일을 불러올겁니다.


다 하고 나니까 이렇게 간단한데 몰랐을 때는 이것 맞추느라고 엄청 헤맸습니다.


다음은 panel.js 파일을 보겠습니다.


Ext.define('Panel.view.panel', {
    extend: 'Ext.Container',

    config: {
            fullscreen: true,
            layout: 'hbox',
            items: [
            {
                xtype: 'panel',
                flex: 1,
                html: 'Left Panel, 1/3rd of total size',
                style: 'background-color: #5E99CC;'
            },
            {
                xtype: 'panel',
                flex: 2,
                html: 'Right Panel, 2/3rds of total size',
                style: 'background-color: #759E60;'
            }
            ]
    }
});


우선 Ext.define 함수를 사용합니다. 곧바로 이 파일의 경로를 표시하구요.

다음으로는 Ext.Container 를 extend 합니다. 이 부분을 extend 하지 않으면 에러가 납니다.

Container 부분 튜토리얼을 번역 했는데 왜 그런지 아직 딱 떠오르지 않네요. 다시 한번 봐야겠습니다.


그 다음은 config 를 사용하고 그 안에서 화면을 full 로 해 준 다음에 원래 튜토리얼에 있던 소스를 위와 같이 해 주면 됩니다.


여기까지 하느라고 많이 헤맸습니다.


아래 제가 완료한 소스파일 올려 놓습니다. 혹시 저처럼 MVC 패턴 적용이 많이 헛갈리시는 분들은 이 소스가 도움이 되실겁니다.


Panel.zip


다음 글은 계속 센차터치의 튜토리얼을 다루겠습니다.

될 수 있는대로 소스코드를 이것 저것 변경해 보고 적용해 봐야 완전히 제것이 될 것 같군요.


다음에는 각 디바이스별로 화면을 달리 하는 Profile 을 한번 적용해 볼까 합니다.

반응형

Comment

  1. 바트 2012.04.24 01:00

    좋은 글 맨날 눈팅만 하다가 이제서야 감사의 글한번 남기네요.
    회사에서 갑자기 웹앱 기반의 하이브리드 앱 준비해보겠다고
    센차한번 공부하라고 해서 무작정 시작한 공부였는데
    덕분에 많은 개념들 잡고 가네요
    특히나 API 만 보고는 이해가 잘 가지 않았던 MVC 폴더구조까지
    상세하게 설명해주시니 글만보고도 느낌이 바로 오네요 ㅎㅎ

    다만 한가지 궁금한점이 있는데
    올려주신 소스에서 " views : " 부분을 주석처리 하셨는데
    전 오히려 주석처리 하면 나오지가 않더라구요

    Ext.application({
    name: 'Panel',
    views: 'Panel.view.panel',
    launch: function() {
    Ext.create('Panel.view.panel');
    }
    });

    이렇게 헤야 잘 나오던데 무슨차이인지 알수있을까요?



    앞으로도 좋은 강의(?) 부탁드릴께요 ㅎ

  2. misoboy 2012.05.01 22:06

    비트님 //
    오지랖이 넓어 제가 대신 답변 드립니다.
    말씀하신 view : [ "view클래스", ~~]
    이런식으로 작성하는데요
    저 역활의 용도는 제가 알기론
    getView클래스명 메소드가 자동으로 생성되며
    리턴값은 해당 View클래스가 됩니다.

    Ext.create('Panel.view.panel');
    이 부분은 해당 view.panel 객체를 생성하는 역활 입니다.

    바트님께서 요청하신 문의는 views 부분이 주석을 풀었다고 하여 되셧다는것은 Ext.create 와는 별개 문제로 보입니다.

    솔웅님꼐서 작성하신 예제에서는 views 부분이 주석 되어도 실행 되는 소스네요..

    솔옹님 //

    좋은 예제 해주셔서 감사합니다.
    Controller 부분 까지 같이 나오는 예제 였으면 더욱 좋겠네요 ㅎ
    그리고 클래스명은 Panel 대문자가 좋을것 같은 견해 입니다.

    • 솔웅 2012.05.12 11:14 신고

      답변 감사합니다. 저도 많은 도움 됐습니다. Sencha Tutorial 번역하다가 제가 이해 안 되서 직접 예제를 만들어 봤는데요. 그렇게 하니까 좀 더 이해가 되네요.
      지금은 회사 옮긴지 얼마 안 됐고 거기서는 Kurogo와 JQuery Mobile 위주로 일을 해서 Sencha 관련한 공부는 지금 못하는 상황입니다.
      지금 회사 직원들을 위한 웹 앱을 만들고 있는데요. 회사 직원들은 feature phone 서부터 최신 tablet 까지 다양한 디바이스를 가지고 있는데 Sencha Touch 는 Feature phone에는 지원이 안 되서 대상에서 제외가 됐어요.
      Sencha Touch에 그런 한계가 있는지 몰랐네요.
      앱 마켓용은 몰라도 다양한 기기를 사용하는 직원을 대상으로 한 앱 개발에는 한계가 있겠네요..
      여기 일이 안정되면 다시 저도 공부 시작할 거예요. 잊지 마시고 자주 들러 주세요.
      그리고 아직 알려지지는 않았지만 Kurogo 도 아주 좋은 Middleware 인것 같습니다. 알아 두시면 좋을 거예요. MIT, 하버드 출신들이 만든건데 개발자 중에 한국사람도 많더라구요...

  3. misoboy 2012.05.15 18:25

    좋은 정보 감사합니다.
    저도 Sencha Touch 2 로 시작한지 얼마 안됬지만...
    꾸준히 해보고 있는데 갈길은 멀군요...

    저도 계속 습득 하고 있겠습니다.
    다시 하실 떄 좋은 정보 교류가 되었으면 합니다 ㅎㅎ