Build mobile web applications with Sencha Touch

An HTML5 mobile JavaScript framework for WebKit browsers
http://www.ibm.com/developerworks/opensource/library/wa-senchatouch/index.html?ca=drs-#resources

Overview

In the software development world, two important trends are increasingly important: mobile application development and standards-based HTML5 web development. The learning curve for either type of development can be steep. Developing a native mobile application often requires knowledge of specific platforms and skills, such as Objective-C for iPhone and Java™ for Android (and these are only two platforms). HTML5 development has gained traction lately because it is standards-based. While vendors are working rapidly to incorporate and comply with these early specifications, HTML5 is still rather immature.

The recent release of Sencha Touch 1.0 fuses the cutting-edge worlds of mobile application development with HTML5 web development to form a simple, accessible framework for building mobile web applications. In this article, learn everything you'll need to know to start working with the Sencha Touch framework.

Sencha Touch

Learning to build mobile applications—especially from the perspective of a web developer—can be troublesome. A variety of platforms to choose from and technologies to learn are available. HTML5 support, though gaining momentum quickly, is still not quite ready to be used for complex web applications, particularly line-of-business applications.

Sencha Touch combines the rich platforms of HTML5 and mobile web application development into a happy medium. The framework is developer-friendly and similar to using the Ext JS JavaScript framework. If you have moderate to advanced JavaScript experience, then Sencha Touch is approachable. If you already have skills as a JavaScript and CSS developer, Sencha Touch can immediately turn you into a mobile application developer, too.

Sencha is a company with a core commercial product offering, but it also supports open source software. Sencha Touch 1.0 is free for both personal and commercial use.

Frequently used abbreviations

Ajax: Asynchronous JavaScript + XML
API: application programming interface
CSS: Cascading Style Sheets
HTML: Hypertext Markup Language
JSON: JavaScript Object Notation
SDK: software development kit
UI: user interface

Layouy Guide : http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html

Ext Core Manual : http://docs.sencha.com/core/manual/

Ext JS API Doc : http://dev.sencha.com/deploy/dev/docs/
Sencha-touch API Doc : http://dev.sencha.com/deploy/touch/docs/

Ext JS 3.3 Sample : http://dev.sencha.com/deploy/dev/examples/#sample-10

- jQuery와 비교해보면?
    jQuery = Ext Core
    jQueryUI = Ext JS
    jQueryMobile = Sencha Touch

- 개발 환경 구축은?
    <link rel="stylesheet" href="/resources/css/sencha-touch.css" type="text/css">
    <script type="text/javascript" src="/js/sencha-touch.js"></script>
 
- 초기화 처리

        Ext.setup(
        {
            // 환경 설정 정보들~

            tabletStartupScreen:"images/tabletStartupScreen.png",
            phoneStartupScreen:"images/phoneStartupScreen.png",

            tabletIcon:"images/tabletIcon.png",
            phoneIcon:"images/phoneIcon.png",
            glossOnIcon: true,
            statusBarStyle:"black",
            fullscreen:true,
            preloadImages:[],
            scope:this,
            
             onReady: function()
            {
                             시작~
            }
        }

- 환경정보들은?

      fullscreen - Boolean
                 - 전체 화면 설정 여부
      tabletStartupScreen - String
                          - iPad의 시작 이미지의 경로 크기는 768 × 1004 세로로하지 않으면 안됨.
      phoneStartupScreen - String
                         - iPhone 및 iPod touch 용 부팅 이미지 경로 320 × 460에 세로로하지 않으면 안됨.
      icon - String
           - 태블릿과 스마트폰 모두에 사용되는 아이콘 이미지 경로 72 × 72이 좋은
      tabletIcon - String
                 - 태블릿용 아이콘 이미지 경로 이곳을 icon으로 설정되는 이미지보다 우선 72 × 72가된다.
      phoneIcon - String
                - 스마트폰 아이콘 이미지 경로 이곳을 icon으로 설정되는 이미지보다 우선 57 × 57이다.
      glossOnIcon - Boolean
                  - iPhone, iPad and iPod Touch 아이콘에 광택 효과 여부.
      statusBarStyle - String
                     - iOS web 애플 리케이션의 상태 표시줄에 대한 스타일 설정 default, black, black - translucent 중 하나를 선택.
      preloadImages - Array
                    - 미리 이미지 경로 배열 (자세한 내용은 추후 조사)
      onReady - Function
              - DOM 생성 후에 실행되는 함수. 애플 리케이션의 시작 지점이되는 경우가 많다.
      scope - Scope
              - 범위 설정

실무 웹앱 개발을 위한 jQuery Mobile 과 Sencha Touch 비교

http://w3labs.kr/?p=326

개발방식의 차이

둘은 똑같이 Mobile JavaScript Library라는 공통점을 지니고 있지만, 개발에 사용되는 언어의 차이가 크다. jQuery Mobile은 기존 HTML 개발하듯이 마크업 중심의 구성을 갖고 있으며, Sencha Touch는 JavaScript로 개발을 하는데 특히 ExtJS 라이브러리 중심으로 구성되어 있다. 이는 개발 난이도를 결정하는 요소가 된다. ExtJS 라이브러리를 다룰 수 있는 개발자가 거의 없기에(외국에도 많이 쓰이지는 않는다.) ExtJS를 먼저 학습해야 하는 비용이 추가된다. 그에 반해 jQuery Mobile은 우리에게 익숙한 HTML 중심의 마크업 언어라서 잠깐의 교육만으로도 바로 개발이 가능하다.

실무에 어떤 라이브러리를 선택할 것인가?

"개발방시의 차이"는 때때로 인력 구성의 심각한 문제를 가져 올 수 있다. 미래웹기술연구소에서 수행했던 프로젝트의 경우 디자이너/Web UI Developer(HTML/CSS 코딩)/자바스크립트 엔지니어 이렇게 분업이 잘 되어 있다. Web UI Developer 가 없는 프로젝트에서는 디자이너가 HTML/CSS 코딩 역할을 대신 하기도 한다. 그러나 Sencha Touch 중심의 웹앱 프로젝트에서는 Web UI Developer가 Sencha Touch나 ExtJS를 모르면 아무런 작업을 할 수 없다. 그렇게 Web UI Developer가 하지 못한 작업들은 고스란히 자바스크립트 엔지니어에게 전가 된다.(하지만 전달받은 개발자 또한 ExtJS 라이브러리가 익숙한 것은 아닐 것이다.) 그래서 웹앱개발을 위한 자바스크립트 라이브러리 선택시에는 현재 조직의 인원구성에 대한 고민이 선행되어야 한다.

하이브리드 앱

두가지 라이브러리 모두 PhoneGap 등을 이용하여 앱(App.)으로 만들 수 있다. 하지만 이부분에서 Sencha Touch의 앱 스러움이 실력을 발휘 한다. 일단 언어가 비슷하고 (Sencha Touch와 PhoneGap 모두 자바스크립트 기반) 마크업언어와 다르게 콤포넌트 기반이어서 화면 구성이 앱과 비슷한 점이 많다. 그리고 앱스러운 기능을 jQuery Mobile 보다 월등하게 많이 가지고 있다.

[펌] 미래웹기술연구소