센차 터치

Sencha Touch
센차 터치
P14.png
iOS6를 테마로 한 센카 터치 앱
개발자센차
최종 릴리즈
2.4.2 / 2015년 6월 15일, 7년 전(2015-06-15)
기입처자바스크립트
운영 체제Android, iOS, BlackBerry, Kindle, Windows Phone, Tizen
이용가능기간:영어
유형자바스크립트 라이브러리
면허증.GPLv3 또는 상용
웹 사이트www.sencha.com/products/touch

Sencha Touch는 모바일 웹 전용으로 구축된 사용자 인터페이스(UI) JavaScript 라이브러리 또는 웹 프레임워크입니다.웹 개발자가 이를 사용하여 지원되는 모바일 장치에서 네이티브 애플리케이션처럼 보이거나 느껴지는 모바일 웹 애플리케이션용 사용자 인터페이스를 개발할 수 있습니다.HTML5, CSS3, JavaScript 등의 웹 표준을 기반으로 합니다.Sencha Touch의 목표는 Android, iOS, Windows, Tizen, BlackBerry 기기에서 실행되는 HTML5 기반 모바일 앱의 빠르고 쉬운 개발을 촉진하고 앱의 네이티브 룩과 느낌을 동시에 가능하게 하는 것입니다.

버전 이력 및 지원

센차 터치는 인기 자바스크립트 라이브러리 프로젝트 Ext JS, jQtouch, 라파엘이 합쳐져 탄생한 센차 제품이다.Sencha Touch의 첫 번째 릴리스인 0.90 베타 버전은 2010년 7월 17일에 출시되었습니다.이 베타 릴리스는 Android 및 iOS(iPhone, iPod Touch, iPad)를 실행하는 장치를 지원했습니다.

그 후 2010년 11월에 첫 번째 안정 버전인 1.0이 출시되었습니다.버전 1.1.0에서는 BlackBerry OS 6.0을 실행하는 장치에 대한 지원이 추가되었습니다.

최신 릴리스인[1] Sencha Touch 2.4.2는 2015년 6월에 출시되었으며 다음 브라우저 및 플랫폼에서 작동하도록 설계되었습니다.

파이어폭스 모바일을 지원할 계획은 발표되지 않았다.

특징들

MVC 아키텍처

Sencha Touch는 MVC 패턴을 따르며 애플리케이션 데이터, 제어 코드, 뷰를 구분합니다.이러한 분리를 통해 대규모 애플리케이션의 유연성과 유지보수가 용이해집니다.

위젯 구성 요소 및 사용자 지정 가능한 테마

Sencha Touch에는 내장된 DOM 조작 인터페이스가 있어 jQuery와 같은 다른 UI 프레임워크에 대한 의존성을 부정합니다.모바일 웹 애플리케이션 내에서 사용하기 위한 그래피컬 사용자 인터페이스 GUI 기반의 컨트롤(또는 컴포넌트)이 포함되어 있습니다.이들 컴포넌트는 터치 입력에 최적화되어 있습니다.컴포넌트는 다음과 같습니다.[2]

  • 장치별 테마 및 효과가 있는 버튼
  • 전자 메일의 텍스트 필드 등의 양식 요소
  • 달력 보기 및 주소
  • 슬라이더, 셀렉터 및 콤보 박스
  • 모멘텀 스크롤 및 인덱스바가 있는 리스트 컴포넌트
  • 최소 아이콘 세트
  • 도구 모음 및 메뉴
  • 이동 가능한 탭, 하단 도구 모음
  • 핀치나 줌 등의 멀티터치 제스처를 지원하는 맵 컴포넌트
  • 회전목마

타깃 디바이스에 따라 모든 컴포넌트의 테마를 설정할 수 있습니다.이는 CSS를 기반으로 구축된 스타일시트 언어인 Sass를 사용하여 수행됩니다.네이티브 룩업 테마로는 쿠퍼티노 클래식(iOS6.x 이하), 쿠퍼티노(iOS 7용), 마운틴 뷰(Android용)[3] 등이 있습니다.

이행, 애니메이션 및 적응 UI

센차터치는 현재 요소 아래로 슬라이드, 팝, 플립, 큐브 등 8가지 트랜지션 효과를 내장했다.웹 표준이지만 Android, iOS 및 일부 터치 지원 장치에서만 지원되는 터치 이벤트에서 만들어진 일반적인 터치 제스처를 지원합니다.탭, 더블 탭, 스와이프, 스크롤, 핀치입니다.

Sencha touch는 HTML5 기반의 레이아웃이므로 매우 적응성이 있습니다.

차트 작성

센차터치는 파이차트, 막대그래프, 선열 등 부품도 설명 범례와 함께 차트화 할 수 있다.이들 컴포넌트는 핀치나 줌과 같은 인터랙티브를 지원합니다.ExtJS의 그리드 컴포넌트와 마찬가지로 Sencha Touch는 TouchGrid [4]기능을 제공합니다.

프로필

Sencha Touch 프로파일링을 통해 다양한 화면 크기에 맞는 다양한 프로파일을 만들 수 있습니다.응용 프로그램이 로드되면 프레임워크에 따라 디바이스 유형이 결정되고 대응하는 프로파일이 스왑 아웃이 필요한 컴포넌트와 기능, 호출이 필요한 특정 뷰와 컨트롤러를 결정하므로 개발자는 디바이스 [5]유형별로 다른 응용 프로그램을 작성해야 하는 번거로움을 덜 수 있습니다.

기본 응용 프로그램 디렉터리 구조

Sencha Touch 어플리케이션의 기본 파일 및 디렉토리 구조는 다음과 같습니다.[2][6]

디렉토리/파일 묘사
앱. 앱의 모델, 뷰, 컨트롤러, 스토어 및 프로필을 저장하는 주 디렉터리
app.module 응용 프로그램의 전체 설정이 들어 있는 파일입니다.모든 모델, 뷰, 컨트롤러, 스토어 및 프로파일에 대한 참조는 여기에서 찾을 수 있습니다.이러한 참조가 로드되면 메인 앱 실행 기능이 호출됩니다.이 함수는 첫 번째 뷰를 로드하므로 애플리케이션의 첫 번째 포인트로 간주할 수 있습니다.
index.displaces를 표시합니다. 앱의 메인 HTML 파일입니다.모바일 앱의 경우 여러 페이지/화면에 걸쳐 있을 수 있습니다.
자원. 앱에 필요한 모든 이미지, CSS 및 기타 외부 파일을 저장하는 디렉터리
app.json 앱 구성 파일
packager.json 네이티브 패키지 작성에 사용되는 파일
ext-touch.module 이것은 Sencha의 JavaScript 라이브러리입니다(개발 단계에서 ext-touchdebug.js를 권장합니다).
ext-touch.css 여기는 센차의 CSS 라이브러리입니다.

개발자 도구 및 플러그인

Sencha Touch는 개발을 용이하게 하는 IDE 플러그인을 제공합니다.이러한 플러그인의 장점은 코드 생성 및 자동 완성, 코드 리팩터링 및 프레임워크 코드베이스 및 커스텀 클래스 탐색 용이성입니다.Sencha Touch에는 JetBrains, Visual Studio, Eclipse와 같은 인기 IDE용 플러그인이 있습니다.

크로스 플랫폼 HTML5 앱을 구축하기 위한 비주얼 앱 빌더인 Sencha Architect가 있습니다.그것은 주제와 명령줄 [7]통합과 같은 중독 기능을 제공합니다.

사용 예

Sencha Touch는 Ext를 사용하여 앱에서 지도를 편리하게 사용할 수 있도록 합니다.맵 [8]컴포넌트Google Maps API가 [9]작동하려면 "Google Maps API" JavaScript 파일을 포함해야 합니다.

<!DOArmorPE HTML> <html> <제목> <제목>터치 Test<, /title>,>!--Sencha 터치 전투 근무 지원--><>rel="스타일 시트"type="text/css"href="sencha-touch/resources/css/sencha-touch-debug.css"/&gt와 연결되어,>!--구글 지도 API,><, 스크립트 type="text/javascript"src="//maps.google.com/maps/api/js?sensor=true">,<>/script>,>!--Sencha 터치 자바 스크립트 코드가--><, 스크립트 t.src="sencha-touch/sench ype="text/javascript"a-touch-timeout.function"> </script> <!-- 응용 프로그램스크립트 --> <script type="text/script"> Ext.setup({ onReady: function() {// root panel new Ext를 만듭니다.패널({풀스크린: true, 항목: [ { xtype: "map" } } } } } } ; </script> </head> </body> </html>

Ext.setup()은 응용 프로그램을 초기화하는 시작 지점이며 뷰 포트와 이벤트 [10]시스템을 설정합니다.

네이티브 어플리케이션과의 비교

Sencha Touch는 이전에는 네이티브 애플리케이션에서만 액세스할 수 있었던 가속계, 카메라, 나침반, 지리 위치, 캡처,[12] InAppBrowser, 미디어, 알림, 스플래시 화면, 스토리지(SQLite) 등에 대한 PhoneGap 및 Apache Cordova API를 지원합니다[11].Sencha Touch는 JavaScript를 활용하여 대부분의 UI 컴포넌트를 생성하고 DOM 요소의 CSS를 즉시 변경합니다.JavaScript Engine이 이전보다 더 효율적이고 빠르기 때문에 웹 앱은 거의 네이티브 앱만큼 원활하게 실행됩니다.

「 」를 참조해 주세요.

레퍼런스

  1. ^ "Announcing Sencha Touch 2.4.2 with Improved BlackBerry 10.3 Experience". sencha.com. 15 June 2015.
  2. ^ a b Allen, Sarah; Graupera, Vidal; Lundrigan, Lee (2010). Pro Smartphone Cross-Platform Development. United States of America: APress. p. 226. ISBN 978-1-4302-2869-1.
  3. ^ "Sencha Touch 2 Release Notes". cdn.sencha.com.
  4. ^ "Announcing Sencha Touch 2.3 – Touch Grid, Cordova Support, and New Themes". sencha.com. 1 October 2013.
  5. ^ Clark, John Earl; Johnson, Bryan P. (April 2013). Creating Mobile Apps with Sencha Touch 2. Birmingham UK: Packt Publishing. pp. 233, 234. ISBN 978-1-84951-890-1 – via Ebrary.com.
  6. ^ "Touch Guides - Getting Started with Sencha Touch". docs.sencha.com.
  7. ^ "Sencha Architect". sencha.com. 25 March 2015.
  8. ^ "Touch - Sencha Docs". docs.sencha.com.
  9. ^ "IBM Developer Works- Build mobile web applications with Sencha Touch".
  10. ^ "Touch Guides - Events". docs.sencha.com.
  11. ^ "Leveraging PhoneGap within Sencha Touch". phonegap.com.
  12. ^ "Touch Guides - Using Native APIs". docs.sencha.com.

참고 문헌

외부 링크