ExtJS4 MVC 설치하기


1.Download Sencha Ext JS
http://www.sencha.com/products/extjs/download/


2.Download Sencha Cmd
http://www.sencha.com/products/sencha-cmd/download/
C:\Sencha 에  Extjs4 라이브러리를 압축해제해서 옮긴다.

 

설치할때 디렉토리 선택에서 C:\만 선택하면 Sencha 폴더 생기면서 거기에 알아서 설치된다.

 

설치완료 후 확인은 명령프롬프트 창을 열고 "sencha"명령을 실행해서 아래와 같이 나오면 설치가 잘 된것이다.

 

 

다운로드 받은 Extjs4 파일은 C:\Sencha 폴더로 이동한다.


3.ruby 다운로드 ( Sencha cmd에서는 1.8~1.9버전만 지원한다. )

테마 컴파일을 하기위해서 ruby를 다운로드 받는다.
http://rubyinstaller.org/downloads/

 

빌드 과정에서 테마를 위판 sass컴파일용 compass를 설치하자.
C:\Sencha>gem install compass

 

혹여 윈도우 7에 경우 정상적으로 설치 되지 않는 경우가 있는데 이때는 아래 사이트를 참고하여 수동으로 compass를 설치할 수 있다.
http://awordpress.net/install-sass-compass-manually-windows/

 해당 Ruby 설치 폴더에 가서 gem을 실행해라. 아니면 path를 설정하든지

 

 

 

 

4.애플리케이션 생성

아래 명령을 실행하여 waniMvc라는 애플리케이션을 생성하자.
C:\Sencha> sencha -sdk C:\Sencha\ext-4.2.1.883 generate app waniMvc c:\Sencha\waniMvc

 

 

 

4.웹서버 실행 

아래 명령을 실행하여 웹서버 실행.
C:\Sencha> sencha  fa web -port 8000 start -map C:\Sencha\waniMvc

http://localhost:8000 에서 화면 확인.

 

.

 

Posted by 홍반장水 홍반장水

센차 터치(Sencha Touch) 2 핵심 가이드 - 마소 연재

 

1회 : 2012.10 | 센차 SDK tool

2회 : 2012.11 | 센차 터치 2 - 클래스 시스템

3회 : 2012.12 | 센차 MVC 패턴

4회 : 2013.01 | 센차 터치 2 - 컴포넌트

5회 : 2013.02 | 센차 터치 2 - 테마

Posted by 홍반장水 홍반장水

Sencha Touch 2 Build Mobile Web Apps with HTML5

Buy Support Download

Sencha Touch 2 hero

The Best Framework Just Got Better

Build HTML5 mobile apps for iPhone, Android, and BlackBerry.

Watch VideoWith over 50 built-in components, state management, and a built-in MVC system, Sencha Touch 2 provides everything you need to create immersive mobile apps.

View Examples


Posted by 홍반장水 홍반장水

Touch Charts Mobile HTML5 Charts

Sencha Touch Charts works on today's best mobile touchscreen devices.


Rich, interactive charts built in HTML5 and optimized for mobile.

Watch Video Build interactive, easy-to-use radar, bar, line, stacked, and pie charts. Visualizing rich data on the mobile web has never been easier.

View Sencha Touch Charts Demos

Groundbreaking Interactivity

Groundbreaking Interactivity Sencha Touch Charts breathes new life into your data and utilizes hardware acceleration for optimized performance. With natural gestures in Sencha Touch Charts, visualizing and understanding complex datasets is effortless. Pinch-to-zoom, swipe-to-pan across data, and tap for deep dives. Data flows come to life with every tap, pinch, and swipe.

Built with Web Standards

Built with Web Standards Sencha Touch Charts uses HTML5 capabilities like Canvas elements for drawing and CSS3 for styling, delivering the highest performance and richest experience in today’s mobile web browsers. All touch events use Sencha Touch’s sophisticated events and gesture system which is optimized for modern mobile web browers.

Built for Sencha Touch

Built on top of our industry-leading mobile web app framework, Sencha Touch Charts is now available to buy as a commercially licensed, $99 add-on to Sencha Touch. Open Source Sencha Touch developers will be able to use Sencha Touch Charts free of charge under the terms of the GPLv3 license. Sencha Touch Charts is compatible with Sencha Touch 1.1 and above.

Buy Sencha Touch Charts Learn more about Sencha Touch

  • Pan
  • Rotate
  • Zoom
  • Highlight
  • Reset
  • Combine
Posted by 홍반장水 홍반장水

HTML5 Sencha App vs. native iPhone App side by side (HD)

sencha로 만든 앱과 네이티브앱의 비교
On the left, Sencha version of touchNOC Manager app. On the right, native iPhone App version. Most of navigation done side-by-side, except for features unique for iPhone App version (favorites re-ordering and search).

Posted by 홍반장水 홍반장水

Sencha Touch 에서 이미지 버튼 구현하기.

Image buttons in Sencha Touch?

Application JavaScript:
Code:
Ext.setup({
    onReady: function() {		
	var rootPanel = new Ext.Panel({
		fullscreen: true,					
		dockedItems:[{					
			xtype: 'toolbar',
			dock: 'top',
			items: [{
				xtype: 'button',
				cls: 'btnAction'						
			}]								
		}]			
	});
    }
});





CSS:
Code:
.btnAction {
	background: url(../action.png);
	width: 40px;
	height: 40px;
}


Posted by 홍반장水 홍반장水

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


Posted by 홍반장水 홍반장水



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


Posted by 홍반장水 홍반장水
- 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
              - 범위 설정
Posted by 홍반장水 홍반장水

실무 웹앱 개발을 위한 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 보다 월등하게 많이 가지고 있다.

[펌] 미래웹기술연구소

Posted by 홍반장水 홍반장水
TAG jQuery, Sencha