[LsitView & JSON 사용하기]

 

1. JASON 이란?

. 모바일 환경등에서 Data를 보다 편리하고, 가볍게 처리하기 위한 양식 ( <-> XML )

. Format : {}, [], ”,” 등으로 구성

. 구성예

{

        result:[

                   {

                             'name':'종현1',

                             'email':'gmail1@gmail.com',

                             'phone':'11111',                       

                   },

                   {

                             'name':'종현2',

                             'email':'gmail2@gmail.com',

                             'phone':'22222',                       

                   },

                   {

                             'name':'종현3',

                             'email':'gmail3@gmail.com',

                             'phone':'33333',                       

                   }                                         

        ]

}

 

2. JASON 파일 만들기

 .  [프로젝트 홈]에서 contact.jason 파일을 만들고, 위 예제 파일 내용을 저장

 

3. Data Model 파일 만들기

. [프로젝트 홈]> 터미널 실행

./sdk/command/sencha generate model -n ContactModel -f

name,email,phone

. [프로젝트홈]/app/model/ContactModel.js 파일 확인

 

Ext.define('Sencha.model.ContactModel', {

    extend: 'Ext.data.Model',

   

    config: {

        fields: [

            {name: 'name', type: 'auto'},

            {name: 'email', type: 'auto'},

            {name: 'phone', type: 'auto'}

        ]

    }

});

 

3. ListView 파일 작성

 . [프로젝트홈]/app/view/ ListView.js 추가

 . 아래 내용 추가

 . contact.jason / ContactModel 데이터를 이용하여, ContactStore 파일 구현

 . ContactStore를 이용하여, ContactList 구현

 . ContactList 파일을 이용하여, config.items에 추가

 . 파일 구현 내용

  

Ext.define(         'Sencha.view.ListView',{

           extend:'Ext.Panel',

           xtype : 'listview',

           config:{

                     layout:'vbox',

           },

          

           constructor: function(config) {

                      config = config ||          {};

          

                      Ext.define('ContactStore', {

                                extend: 'Ext.data.Store',

                                config: {

                                           model: 'Sencha.model.ContactModel',

                                           autoLoad: true,

                                           proxy: {

                                                     type: 'ajax',

                                                     url: 'contact.json',

                                                     extraParams: '',

                                                     reader: {

                                                               type: 'json',

                                                               rootProperty: 'result',

                                                     },

                                           },

                               },

                      });

          

                      Ext.define('ContactList', {

                               extend:'Ext.List',

                               xtype:'contactlist',

                              

                               config:{

                                          store:Ext.create('ContactStore'),

                                          disableSelection:false,

                                          emptyText:'<p> No Data <p>',

                                          itemTpl:Ext.create('Ext.XTemplate', '<h2>{name} : {email}: {phone} </h2>' ),

                               }

                      });

          

                      config.items = [

                                {

                                          xtype: 'toolbar',

                                          title: 'List',

                                },

                                {

                                         

                                           xclass: 'ContactList',

                                           flex: 1,

                                }

                      ];

                      

                      this.callParent([config]);

           }

});

 

4. controller  구현하기

1) ListViewController 만들기

  . [프로젝트홈] 터미널 실행

  . command 실행

./sdk/command/sencha generate controller -n ListViewController

2) control 이벤트 및 호출함수 구현

Ext.define('Sencha.controller.ListViewController', {

    extend: 'Ext.app.Controller',

   

    config: {

        refs: {

           

        },                

        control: {

                             contactlist: {

                                        itemtap: 'itemSelected',

                             },

        }

    },

   

    itemSelected: function(list, index, node, record) {

                  console.log(list);

                  console.log(index);

                  console.log(node);

                  console.log(record);

    },

});

 

 

Posted by 꿈을펼쳐라
,

[FormView 구현하기]

 

1. FormView 파일 작성

 . [프로젝트홈]/app/view/ FormView.js 추가

. 아래 내용 추가

Ext.define(         'Sencha.view.formView',{

           extend:'Ext.form.Panel',

           xtype : 'formview',

           config:{

                      layout:'vbox',

                     items:[

                                {

                                          xtype: 'formpanel',

                                          flex: 1,

                                          layout: 'vbox',

                                          items: [

                                                      {

                                                                xtype: 'fieldset',

                                                                title: 'form test',

                                                                items: [

                                                                          {

                                                                                    xtype: 'textfield',

                                                                                    name: 'inputId',

                                                                                    label: 'ID',

                                                                          },

                                                                          {

                                                                                    xtype: 'passwordfield',

                                                                                    name: 'inputPassword',

                                                                                    label: 'Password',

                                                                          },

                                                                ],

                                                      },

                                                      {

                                                                xtype: 'button',

                                                                text: 'SAVE',

                                                                action: 'formview.onClickedSaveButton'

                                                      }

                                          ],        

                                },

                     ]

           }

});

 

 

2. controller  구현하기

1) FormViewController 만들기

  . [프로젝트홈] 터미널 실행

  . command 실행

./sdk/command/sencha generate controller -n FormViewController

2) control 이벤트 및 호출함수 구현

 

Ext.define('Sencha.controller.FormViewController', {

    extend: 'Ext.app.Controller',

  

    config: {

        refs: {

        formView:'formview',

        },

        control: {

        'button[action=formview.onClickedSaveButton]': {

               tap:'onClickedSaveButton',

        },

        },

    },

   

    //called when the Application is launched, remove if not needed

    // launch: function(app) {

//        

    // }

       onClickedSaveButton: function() {

              var formObj = this.getFormView().down('formpanel');

              alert(formObj.inputId.getValue());

              console.log(formObj.inputId);

       }

});

 

 

 

Posted by 꿈을펼쳐라
,

NavigationView 사용시 기본 툴바를 사용하지 않고, 사용자 지정 Toolbar를 사용하는 방법

 

1. NavigationView에서 툴바를 숨김.  (/app/view/NaviView.js)

 

           config:{

                     autoDestory: false,

                     navigationBar:false,

                      items:[

                                {

                                          xtype:'menuview',

                                }

                     ]

           },

 

 

2. 하위 뷰에서 툴바를 생성하고, Back button 추가

( 하위 뷰를 Controller에서 생성하여 사용중임 : (/app/controller/MenuController.js)

 

    onClickedJjajang:function()

    {

          var ansPanel = {

                    xtype:'panel',

                    html: '짜장면',

                    title:'짜장면',

 

                                items:[

                                          {

                                                     xtype:'toolbar',

                                                     title:'짜장면',

                                                    

                                                     items:[

                                                                 // new Ext.Button(

                                                                          // {

                                                                                     // ui:'back',

                                                                                     // text:'back',

                                                                                     // action:'naviBack',

                                                                          // }

                                                                          // ),

                                                                          {

                                                                                     xtype:'button',

                                                                                     text:'back',

                                                                                     ui:'back',

                                                                                     action:'naviBack',

                                                                          },

                              ],

                                                    

                                          },

                                ],

                   

          };

         

          this.getNaviView().push(ansPanel);

         

    },

 

 

3. 액션 이벤트 연결: (/app/controller/MenuController.js)

 

config: {

refs: {

naviView:'naviview',           

        },

        control: {

        'button[action=menuview.jjajang]': {

                    tap:'onClickedJjajang',

        },

       

        'button[action=menuview.jjambong]': {

                    tap:'onClickedJjambong',

        },

        'button[action=naviBack]': {

                    tap:'onClickedBack',

        }

        },       

      },

 

     …......................

 

onClickedBack:function()

    {

          this.getNaviView().pop();

    }

 

Posted by 꿈을펼쳐라
,

Navigation Bar 구현하기

 

1. Navigation

1) Ext.navigation.View

2) 화면 스택관리

3) 편리한 사용법

4) navigation.View 하위로 들어가는 아이템은 ‘card’만 적용가능

5) navigation titlebar를 포함하고 있음

6) 새로운 View를 만들 때, 기본적으로 ‘Ext.Panel’에서 상속받도록 함

  (특정 UI에서 상속이 불가할 수 있음)

7) push(item)  /  pop()

8) controller 는 항상 전역으로 생성된다.  

9) 버튼 이벤트 연동시, ID 방식은 유효성 체크로 인하여, 에러를 유발할 염려가 있으므로액션을 사용

 

 

2. 실습

1) 새로운 프로젝트를 생성

  . workspace dir (‘sencha-touch-2.0.0-gpl/workspace’) > 오른쪽 클릭 > show in > Terminal

  . ‘Sencha’ 이름으로 프로젝트 생성

 

$ ./command/sencha app create –n Sencha -p ./workspace/Sencha -l all

 

2) app > view : 오른쪽 클릭  [ new > file > NaviView.js ]

 

Ext.define('Sencha.view.NaviView', {

        extend:'Ext.navigation.View',

        xtype : 'naviview',

        requires:[

                   'Sencha.view.MenuView',

        ],

        config:{

                   autoDestory: false,

                   navigationBar:false,

       

                   items:[

                  

                             {

                                        xtype:'menuview',

                             }

                   ]

       

        },

});

   3) app > view : 오른쪽 클릭  [ new > file > MenuView.js ]

Ext.define('Sencha.view.MenuView',{

        extend:'Ext.Panel',

        xtype : 'menuview',

       

        config:{

                   layout:'vbox',

                   title:'다시보기',

                   items:[

                             {

                                        xtype:'button',

                                        text:'짜짱면',

                                        action:'menuview.jjajang',

                             },

                             {

                                        xtype:'button',

                                        text:'짬뽕',

                                        action:'menuview.jjambong',

                             }

       

                   ],

        }

})

 

 

 4) app>view>Main.js 수정

 

Ext.define("Sencha.view.Main", {

    extend: 'Ext.Panel',

    requires: [

       'Ext.TitleBar',

       'Sencha.view.NaviView',

    ],

   

    config: {

       layout:'fit',

        items: [

        {

                 xtype:'naviview',

        },

       ],

    },

});

 

 

4) controller 추가 

. ./sdk/command/sencha generate controller -n Menu

. [project]/app/controller/MenuController.js 편집

 

 

Ext.define('Sencha.controller.MenuController', {

    extend: 'Ext.app.Controller',

   

    config: {

        refs: {

                 naviView:'naviview',           

        },

        control: {

                 'button[action=menuview.jjajang]': {

                            tap:'onClickedJjajang',

                 },

                

                 'button[action=menuview.jjambong]': {

                            tap:'onClickedJjambong',

                 },

        },       

        },

  

    // //called when the Application is launched, remove if not needed

    // launch: function(app) {

      

    onClickedJjajang:function()

    {

       var ansPanel = {

                  xtype:'panel',

                  html: '짜장면',

                  title:'짜장면',                

       };

      

       this.getNaviView().push(ansPanel);

      

    },

   

    onClickedJjambong:function()

    {

       var ansPanel = {

                  xtype:'panel',

                  html: '짬뽕',

                  title:'짬뽕',

       };

      

      

       this.getNaviView().push(ansPanel);

    },

   

});

 

      this.getNaviView().push(ansPanel);  -> 상단에서 refs를 기준으로 생성되는 getter를 이용

                                                         ( get+첫문자의 대문자 + 나머지명칭 + () )

Posted by 꿈을펼쳐라
,

1. MVC Pattern

1) Model / View / Controller 

 

2. Ext.container 상속

1) extend : 상속 키워드

2) requires : 필수 멤버 설정

3) config : 설정 관련 키워드  (정적 설정)

4) constructor : 설정 Function  (동적 설정 가능)

 

            Constructor:function(config)

{

config = config || {};

this.callParent([config]);

}

       

 

3. View 만들기

1) 파일 만들기

. >workspace>HelloWorld>app>view> 에서 오른쪽 마우스 클릭  

. New > File > ‘TestView.js’

2) 클래스 이름 정하기 : {프로젝트명}.{폴더명}.{파일명}

3) xtype 이름 정하기 (ID , unique 해야함)

4) app.js views: 에 등록  (Optional,  , controller는 필수)

5) config:{…} 사이에 코딩하기   

 

 

4. Controller 만들기

1) 프로젝트에서 Consolee환경으로 이동

2) Sencha Command tool

 ./sdk/command/sencha generate controller –n TestView 

3) config, refs, control

4) launch:function(app)  : 필요없는 경우, 삭제

# 이벤트 사용할 경우, ID 방식 말고, Action을 사용해라. 

  (ID일 경우, 선언 클래스가 해제될 경우 에러 발생)

 

5. 실습 프로젝트

1) TestView.js | View

Ext.define('HelloWorld.view.TestView', {

           extend: 'Ext.Panel',

           xtype:'testview',

           config : {

                     layout: 'vbox',

                     items:[

                     {

                                xtype:'toolbar',

                                title:'Simverse',

                     },

                     {

                                xtype:'panel',

                                html:'TextView for Simverse',

                     },

                     {

                                xtype:'button',

                                text:'click me, Simvere',

                                action:'testview.onClickedClickmeButton'

                     }

                     ],

           },

})

 

2) TestView.js | Controller

 

Ext.define('HelloWorld.controller.TestView', {

    extend: 'Ext.app.Controller',

   

    config: {

        refs: {

        testview:'testview',

        },

        control: {

        'button[action=testview.onClickedClickmeButton]':{

                    tap:'onClickedClickmeButton'

        },

        },

    },

   

    onClickedClickmeButton:function(){

          alert('onClickedClickmeButton');

    }

    //called when the Application is launched, remove if not needed

    //launch: function(app) {

});

 

  3) app.js  ( launch: 부분)

    ...............

    launch: function() {

        // Destroy the #appLoadingIndicator element

        Ext.fly('appLoadingIndicator').destroy();

 

                   var testView = Ext.create('HelloWorld.view.TestView');

                  

                   if(!Ext.os.is.Phone)

                   {

                             Ext.Viewport.add({

                                        xtype:'panel',

                                        width:480,

                                        height:800,

                                        centered:true,

                                        modal: true,

                                        hideOnMaksTop:false,

                                        layout : 'fit',

                                        items:[testView]

                             });

                   }

                   else

                   {

                             Ext.Viewport.add(testView);

                   }

                  

 

        // Initialize the main view

        //Ext.Viewport.add(Ext.create('HelloWorld.view.Main'));

    },

 

   ..................

 

  4) 실행화면

 

Posted by 꿈을펼쳐라
,

1. Sench Touch Carousel (컨베이어 벨트) 구현하기

Ext.define("HelloWorld.view.Main", {

    extend: 'Ext.Panel',

  

    config: {

          layout:'vbox',

          items:[

                     {

                                xtype:'toolbar',

                                title:'Carousel',

                     },

                     {

                                xtype:'carousel',

                                flex:1,

                                direction:'horizontal',

                                items:[

                                          {

                                                     xtype:'panel',

                                                     style:'background-color:red;',

                                                     html:'1',

                                          },                   

                                          {

                                                     xtype:'panel',

                                                     style:'background-color:blue;',

                                                     html:'2',

                                          },

                                          {

                                                     xtype:'panel',

                                                     style:'background-color:green;',

                                                     html:'3',

                                          }                   

                                ]

                     }

           ]

    }

});

[결과화면]

     

 

 

2. Sencha Touch Image 구현하기

임의의 이미지 하나를 저장하여, Sencha Touch 프로젝트 내, resources/images/ 폴더로 복사함.

Ext.define("HelloWorld.view.Main", {

    extend: 'Ext.Panel',

  

    config: {

          layout:'vbox',

          items:[

                     {

                                xtype:'toolbar',

                                title:'Carousel',

                     },

                     {

                                xtype:'carousel',

                                flex:1,

                                direction:'horizontal',

                                items:[

                               {

                                                     xtype:'image',

                                                     src:'resources/images/girlsgeneration.png',

                                          },

                                          {

                                                     xtype:'panel',

                                                     style:[

                                                                'background-color:transparent;',

                                                                'background-image:url(resources/images/girlsgeneration.png);',

                                                                'background-repeat:no-repeat;',

                                                                'border:0;',

                                                                'background-size:100% 100%;',].join(''),

                                          }                              

          

                                ]

                     }

           ]

    }

});

[결과화면] : 홀~ 쭉해진...

        

 

3. Sencha Touch Button 적용

Ext.define("HelloWorld.view.Main", {

    extend: 'Ext.Panel',

  

    config: {

          layout:'vbox',

          items:[

                     {

                                xtype:'toolbar',

                                title:'Carousel',

                     },

                     {

                                xtype:'carousel',

                                flex:1,

                                direction:'horizontal',

                                items:[

                               {

                                                     xtype:'image',

                                                     src:'resources/images/girlsgeneration.png',

                                          },

                                          {

                                                     xtype:'panel',

                                                     style:[

                                                                'background-color:transparent;',

                                                                'background-image:url(resources/images/girlsgeneration.png);',

                                                                'background-repeat:no-repeat;',

                                                                'border:0;',

                                                                'background-size:100% 100%;',

                                                     ].join(''),                                                     

                                          },

                                          {

                                                     xtype: 'button',

                                                     text : 'Click me !',

                                                     handler:function()

                                                     {

                                                                Ext.Msg.alert('알람', '이것은 메시지창!', Ext.emptyFn);

                                                     }

                                          },                                                             

                                ]

                     }

           ]

    }

});

 [결과화면] 세번째 항목 전체화면이 버튼으로 적용되었고, sencha Touch에서 제공되는 깔끔한 alert 창을 볼 수 있다.

 

 

 

4. 폰 크기로 화면 설정하기 

  Ext.os.is를 사용하여, 폰일 경우와 일반 자동차일 경우, 파별화된 서비스 제공

  app.js를 수정

launch: function() {

        // Destroy the #appLoadingIndicator element

        Ext.fly('appLoadingIndicator').destroy();

 

                     var mainView = Ext.create('HelloWorld.view.Main');

                    

                     if(!Ext.os.is.Phone)

                     {

                                Ext.Viewport.add({

                                          xtype:'panel',

                                          width:480,

                                          height:800,

                                          centered:true,

                                          modal: true,

                                          hideOnMaksTop:false,

                                          layout : 'fit',

                                          items:[mainView]

                                });

                     }

                     else

                     {

                                Ext.Viewport.add(mainView);

                     }

[실행화면]

 

1) Browser 종류 :  Ext.browser.is

 

Safari

Chrome

Opera

Doln

webOSBrowser

ChromeMobile

Firefox

IE

Other

 

[적용예]

xtype: 'button',

text: 'test',

handler: function () {

         console.log('Safari : ' + Ext.browser.is('Safari'));

         console.log('Chrome : ' + Ext.browser.is('Chrome'));

         console.log('Opera : ' + Ext.browser.is('Opera'));

         console.log('Dolfin : ' + Ext.browser.is('Dolfin'));

         console.log('webOSBrowser : ' + Ext.browser.is('webOSBrowser'));

         console.log('ChromeMobile : ' + Ext.browser.is('ChromeMobile'));

         console.log('Firefox : ' + Ext.browser.is('Firefox'));

         console.log('IE : ' + Ext.browser.is('IE'));

         console.log('Other : ' + Ext.browser.is('Other'));

 

 

2)  OS 종류 :  Ext.os.is  

iOS

Android

webOS

BlackBerry

RIMTablet

MacOS

Windows

Linux

Bada

Other

 

[적용예]

xtype: 'button',

text: 'test',

handler: function () {

            console.log('iOS : ' + Ext.os.is('iOS'));

            console.log('Android : ' + Ext.os.is('Android'));

            console.log('webOS : ' + Ext.os.is('webOS'));

            console.log('BlackBerry : ' + Ext.os.is('BlackBerry'));

            console.log('RIMTablet : ' + Ext.os.is('RIMTablet'));

            console.log('MacOS : ' + Ext.os.is('MacOS'));

            console.log('Windows : ' + Ext.os.is('Windows'));

            console.log('Linux : ' + Ext.os.is('Linux'));

            console.log('Bada : ' + Ext.os.is('Bada'));

            console.log('Other : ' + Ext.os.is('Other'));

}

 

 

Word 파일 : 모바일 웹앱 전문 개발자 과정_0406.docx

 

 

Posted by 꿈을펼쳐라
,

1. Hello World 출력하기

 

Ext.define("HelloWorld.view.Main", {

       extend: 'Ext.Panel',

       requires: ['Ext.Panel'],

 

       config: {

             layout: 'card',

             html:'helloworld!',

       }

});

 

 

 

  

2. 기본 패널

  1) 주요keyword

{

   xtype: 'panel',

sytle: '...',

layout: {},

items: [],

html: '...',

}

2)Layout 속성

 

종류

type 속성

align 속성

pack 속성

Value

auto

 

vbox

 

hbox

 

fit

 

card

center

 

end

 

start

 

stretch

 

center

 

end

 

start

 

justify

 

 

 

3) 아이템

. 단일 아이템 생성

    items: {아이템 객체}

. 복수 아이템 생성

items: [{아이템 객체}, {아이템 객체}, ...]  

 

 

3. 실습

1) panel, flex

 

Ext.define("HelloWorld.view.Main", {

    extend: 'Ext.Panel',

  

    config: {

        layout: {

              type: 'vbox',

              align:'stretch',

              pack:'center'

        },

       

        defaults: {

              scrollable:true

        },

       

        items: [

      

      

              {

                     flex:1,

                     xtype: 'panel',

                     style : 'background-color:red',

                     html:'1',

              },

              {

                     flex:2,

                     xtype: 'panel',

                     style : 'background-color:green',

                     html:'2',

              },

              {

                     flex:3,

                     xtype: 'panel',

                     style : 'background-color:blue',

                     html:'3',

              },

              {

                     flex:4,

                     xtype: 'panel',

                     style : 'background-color:yellow',

                     html:'4',

              },

        ],

    }

});

 

 

 

 

 

 

 

워드 파일 :   모바일 웹앱 전문 개발자 과정_0405.docx 

Posted by 꿈을펼쳐라
,

 

1. Javascript 사용하기

 

1) sencha용 자바 스크립트 불러오기

  . 좌측 Project Explore 탭에서 sencha-touch-debug.js 파일을 복사하여, index.html

디렉토리와 동일한 위치로 붙여넣기 함.

    . html 파일 내에서 다음 라인 추가

       <script type=”text/javascript” src=”sencha-tourch-debug.js”> </script>

 

2) Javascript에서 객체 사용하기

<!DOCTYPE html>

<html>

<head>

<title>Hello World</title>

<meta charset="UTF-8" />

<script type="text/javascript" src="sencha-touch-debug.js"></script>

<script type="text/javascript">

Ext.define("cat",{

name:'',

speak:function(){

alert(this.name+':~~');

},

});

var tomcat = new cat();

tomcat.name ="tom";

tomcat.speak();

Ext.define('Mainecoon', {

extend:'cat',

speak:function() {

alert(this.name + ":왈왈!");

}

});

var navicat = Ext.create("Mainecoon");

navicat.name ="aaa";

navicat.speak();

</script>

</head>

<body>

Hello World!!

</body>

</html>

  3) Editor 기능 활용

    . 자동완성 : ctrl + space

    . 주석처러 : ctrl + ‘/ ’

 

2. Sench-Touch Project 만들기

1) Hello 프로젝트 만들기

  . 윈도우용 환경 세팅 수정 : command > sencha  파일 선택 후 윈도우 버전으로 변경

#!/bin/sh

DIR=$(dirname $(which $0))

export NODE_PATH=$DIR/vendor/nodejs/node_modules

$DIR/vendor/nodejs/win/node.exe $DIR/sencha.js $*

 

 . workspace 선택후 오른쪽 팝업 메뉴 : show in > Terminal

 . Terminal command 라인에 다음 내용 추가

 

$ ./command/sencha app create –n HelloWorld -p ./workspace/HelloWorld/ -l all

          -n ‘프로젝트명 -p ‘프로젝트 생성 경로 -l ‘참조 라이브러리 (core, all)’

 

 

2) Project 구성 보기

  . app :

  . resources

  . sdk

  . app.js

  . app.json

  . index.html

  . packager.json

 

3) 실행화면

 

 

워드파일 :  모바일 웹앱 전문 개발자 과정_0404.docx

 

 

Posted by 꿈을펼쳐라
,

1. Sencha Touch 환경설정

1) Sencha Touch Framework Down : http://www.sencha.com/products/touch/download

2) Theme 설정 : 메뉴 > window > preferences > Aptana Studio > Themes > Aptana Studio 2.x

3) 프로젝트 생성 : 메뉴 > File > New > Project > Web Project > “sencha0403-01”

4) 좌측 상당 탭에서 Project Explorer 탭선택, 생성된 프로젝트 하위로 미리 받아놓은

  “sencha-touch-2.0.0-gpl”을 끌어다 놓음.

5) “sencha-touch-2.0.0-gpl” 선택 : 메뉴 > File > New > Folder > “workspace” 선택

 

 

 

2. HTML 실습

1) workspace 폴더 : 메뉴 > File > new > file -> “index.html”

2) 아래 내용 입력

 <!DOCTYPE html>

<html>

    <head>

        <title>Hello World</title>

    </head>

    <body>

        Hello World!!

    </body>

</html>

3) Run 실행 : Safari에서 확인

 

3. JavaScript 실습

  1) Run 브라우저 선택 : 툴바 > Run Configurations > Web Browser > Browser executable : 설정

 

 

Word파일 다운받기 :  모바일 웹앱 전문 개발자 과정_0403.docx

 

 

Posted by 꿈을펼쳐라
,

1. 모바일 웹앱 프레임워크

1) jQTouch

- 가장먼저 공개

- Markup 기반의 쉬운 개발 스타일

- MIT 라이선스

- 단순한 기능 (쉽고 간단함)

- HTML5, CSS3 지원

- 작지만 모바일에 최적화된 UI , 서로다른 2가지 테마

2) jQuery Mobile

- 가장 늦게 공개

- Markup 기반의 쉬운 개발 스타일

- jQuery 팀에서 개발

- MIT 또는  GPL 라이센스

- 테마롤러 지원 (TOOL)

3) Sencha Touch : (주 학습 대상)

  - ExtJS 진영에서 개발

  - 스크립트 기반 스타일의 개발방식

  - 자유로운 표현 가능

  - Sass 기반의 테마 시스템

  - 다양한 터치 이벤트

4) 한눈에 비교하기

 

jQTouch

jQuery Mobile

Sencha Touch

개발난이도

낮음

보통

높음

표현자유도

낮음

보통

높음

개발방식

마크업

마크업

스크립트

테마

CSS, sass

CSS 테마롤러

Sass

기반 스크립트

jQuery

jQuery

ExtJS

라이브러리 크기

작음

중간

최적화대상

(아이)

&테블릿

&테블릿

지원기기

한정적

다양한

중간

 

2. 준비사항

1) HTML5

2) CSS3

3) JavaScript

 

3. 개발툴 :

1) Aptana studio  : www.aptana.com

 

 

 

 

Word 파일 다운 받기 :모바일 웹앱 전문 개발자 과정_0402.docx

 

Posted by 꿈을펼쳐라
,