Sencha Blog 의 글을 번역 합니다.

2013년 6월 20일 BY 김종광 수석연구원

Hello Sencha Touch 2.2

April 15, 2013 | Aditya Bansod

Sencha Touch 2.2

We’re excited to announce the general availability of Sencha Touch 2.2, the latest version of our JavaScript framework for building multi-device, touch-based applications. We’ve been hard at work on the latest version of Touch, adding in a whole host of new features as well as fixing issues and bugs (thank you to all our beta testers!).

우리는 멀티디바이스 터치 기반의 어플리케이션을 구축하기 위한 최신 버전의 자바스크립트 프레임워크인 새로운 센차터치 2.2 제품을 발표하게 되어서 기쁩니다. 터치 새로운 버전을 만들기 위해 최신 새로운 기능을 추가하는 것을 물론이고 각종 이슈과 버그를 수정하는 등 열심히 작업 했습니다.(베타 테스터 여러분께 감사 드립니다.)

Our focus for Sencha Touch 2.2 was to expand the footprint of device support to give you, our community, the broadest selection of devices to run your apps. In this release, we’ve enhanced our support for BlackBerry 10 devices and added support for Internet Explorer 10 for Windows 8 and Windows Phone 8. We’ve also made some big changes to improve performance in lists, themes, new debugging capabilities, added the new AnimationQueue feature, and more. This is the best Sencha Touch yet.

우리가 Sencha Touch 2.2 에서 초점을 맞춘 것은 여러분(커뮤니티)에 앱을 구동할 수 있는 기기의 폭을 최대한 확장해 드리는 것입니다. 이번 배포에서, 우리는 블랙베리10 지원을 강화하고, 윈도우8과 윈도우즈폰8용 익스플로러10 지원을 추가했다. 우리는 또한 리스트 성능향상, 테마, 새로운 디버깅 기능, AnimationQueue 기능을 비롯하여 많은 부분에서 큰 변화를 만들어 냈습니다. 이것은 지금까지의 최고의 Sencha Touch 입니다.

Updated BlackBerry 10 support

Sencha Touch already runs great on the recently released BlackBerry Z10 and also runs great on the forthcoming BlackBerry Q10. For Touch 2.2, we partnered closely with the folks at BlackBerry to take it even a notch higher, and now your Touch apps have everything they need to run lightning fast on BlackBerry 10 devices. You’ll find that the right markup, the right styling, and the right parameters for things like touch handling are all in place.

Sencha Touch 는 최근 발표된 블랙베리Z10에서 이미 동작하고, 그리고 또한 앞으로 나올 블랙베리Q10에서도 동작합니다. 터치 2.2에서 우리는 심지어 더 높은 수준을 취하기 위해 블랙베리 관계자들과 긴밀히 협력했다. 그리고 이제 여러분의 터치 앱들은 블랙베리에서 번개처럼 빠르게 작동하기 위해 필요한 모든것을 갖추었다. 여러분은 적절한 마크업과 적절한 스타일링 그리고 터치 핸들링같은 곳에 옳바른 파라미터가 위치해 있음을 알게 될 것이다.

New Internet Explorer 10 Support

Sencha Touch 2.2 is the first version that works on Microsoft’s Internet Explorer 10 browser — goodbye WebKit dependencies! For the past few months, we worked with the Microsoft Open Tech team to remove all the WebKit specific code in Sencha Touch (or only use it when we’re on a WebKit browser). Under the hood, we’re using standard CSS3 flexible box layouts and HTML5 DOM selectors to get all of our layouts and rendering working beautifully wherever IE 10 runs (such as the Surface, Windows Phone 8, and Windows 8 devices).

Sencha Touch 2.2는 마이크로소프트의 인터넷익스플로러 10 브라우저에서 동작하는 첫번째 버전이다. – 더이상 웹킷에 의존하지 않아도 된다. 지난 몇달 동안, 우리는 센차터치에서 모든 웹킷으로 한정짓는 코드를 제거하기 위해 마이크로소프트 Open Tech 팀과 작업했다(혹은, 웹킷 브라우저일때만 사용 되도록). 작업으로 인해, 우리는 IE10 에서도 아름답게 동작 하도록 모든 레이아웃과 렌더링에서 표준 CSS3 박스 레이아웃과 HTML5 DOM 선택자를 사용 했다( 서피스, 윈도우즈폰8 그리고 윈도우즈8 디바이스들과 같은 IE10)

We also built a new Windows 8 style modern theme that developers can use to build Microsoft-style looking applications just by switching to the new theme. It features the high padding, no-gradient, sans serif style that’s perfect for building Windows 8 and Windows Phone 8 applications. It’s pretty eye-catching, definitely check it out.

우리는 또한 개발자들이 새로운 테마로 바꾸는 것 만으로 마이크로소프트 스타일 어플리케이션 제작에 사용 할 수 있는 새로운 Windows 8 스타일의 모던 테마를 만들었습니다. 이 새로운 테마는 패딩을 높게주고 그레디언트 효과를 뺐으며 윈도우즈8이나 윈도우즈폰8 어플리케이션을 구축하는데 적격인 스타일을 특징으로 한다. 꼭 확인해 보세요 상당히 눈길을 끌겁니다.

New Theming System

To make all the new platforms and new themes easy to support, Sencha Touch 2.2 features a revamped theming system. Switching your applications theme is as simple as changing the css property in your app.json file and the microloader and framework handle the rest. Our Kitchen Sink example now uses this system to display different themes based on which device it is being used on. You can see its app.json configuration here:

모든 새로운 플랫폼과 테마를 지원하기 쉽게하기 위해, Sencha Touch 2.2은 개선 된 테마 시스템을 지원하고 있습니다. 여러분의 어플리케이션의 테마 전환은 여러분의 app.json 파일에서 CSS의 속성을 변경하는 것과 같이 간단합니다. 그러면 microloader와 프레임 워크가 나머지를 해줍니다. 우리 Kitchen Sink의 예제는 이 시스템을 이용하여 어떤 장치에서 사용할 수 있는지에 따라 다른 테마를 표시하도록하고 있습니다. app.json 설정은 다음과 같습니다 :

 
"css": [
    {        {
        "path": "resources/css/sencha-touch.css",
        "platform": ["chrome", "safari", "ios", "android", "firefox"],
        "theme": "Default",
        "update": "delta"
    },
    {
        "path": "resources/css/wp.css",
        "platform": ["ie10"],
        "theme": "Windows",
        "update": "delta"
    },
    {
        "path": "resources/css/bb10.css",
        "platform": ["blackberry"],
        "theme": "Blackberry",
        "update": "delta"
    }
],

We encourage you to try out the various built-in themes by using the “Theme” option in our Kitchen Sink demo app. Also check out our theming guide.

Kitchen Sink 데모 응용 프로그램의 “Theme”옵션을 사용하여 우리의 다양한 기본 테마를 시험해주세요. 또한 우리의 테마 가이드를 참조하세요.

In Touch 2.2, we’ve changed the icons to use font-face — which are supported across all modern browsers, are more compact, and scale beautifully. Just like Sencha Touch 1 and 2.1, we conveniently map icon names to actual icons so you can use them within your application. For example:

Touch 2.2에서, 우리는 아이콘 대신 폰트 페이스를 이용하도록 바꿨습니다. – 이것은 모든 최신 브라우저가 지원하고며 더 작고, 아름답습니다. Sencha Touch 1이나 2.1와 같이 응용 프로그램에서 사용할 수 있도록 아이콘 이름을 실제 아이콘으로 편리하게 정했습니다. 예를 들면 :

 
{
    xtype: 'button',
    iconCls: 'home',
    title: 'Home'
}

For a full list of available iconCls’s available, please refer to the Ext.Button class documentation.

사용할 수 있는 iconCls의 전체 리스트는 Ext.Button 클래스 문서 를 참조해주세요.

Performance Improvements

In December, we demonstrated the power and speed of HTML5 with our Fastbook proof of concept application. We’re excited to announce that many of the techniques we pioneered in Fastbook are now built into Sencha Touch 2.2. Specifically,

12 월에 우리는 우리의 컨셉을 보여주는 Fastbook 어플리케이션으로 HTML5의 강력함과 빠른 속도를 입증해서 보였습니다. Fastbook 에서 새로 사용된 많은 기술들이 Sencha Touch 2.2 에 탑재된 것을 알리게 되어 기쁘게 생각한다. 특히,

  • AnimationQueue is a centralized Event and Animation queue. When the browser has requestAnimationFrame, AnimationQueue uses that HTML5 API, and when it’s not, uses more vanilla JavaScript timers. This new system helps ensure that we handle animations and other events only in between frames, so everything runs smoothly.
  • AnimationQueue는 중앙 집중식 이벤트 및 애니메이션 큐입니다. 브라우저가 requestAnimationFrame를 가지고 있으면, AnimationQueue는 HTML5 API를 이용하고 그렇지 않으면 더 간단한 JavaScript 타이머를 사용합니다. 이 새로운 시스템은 프레임사이에서만 에니메이션과 기타 이벤트들이 실행되게 해서 원활하게 실행 되도록 한다.
  • List DOM has been dramatically streamlined. Almost all Touch apps use a list and with the lighter DOM, scrolling will remain fast even as your list and templates get more complicated.
  • List DOM은 매우 부드러게 되었습니다. 거의 모든 Touch 앱들은 리스트를 사용하는데 DOM은 더 가벼워 져서, 여러분의 리스트와 Template들이 더 복잡해져도 스크롤링은 여전히 빠르게 동작 할 것이다.
  • The showfps debugging option lets developers see how fast Touch is rendering and will help you see when your application’s design is outpacing the performance of the device.
  • showfps 디버깅 옵션 덕분에 개발자는 Touch가 얼마나 빨리 렌더링하고 있는지를 확인할 수 있으며, 응용 프로그램 디자인이 장치의 성능을 능가하는지 확인하기 쉬워집니다.

Sencha Architect 2.2 Support

Today we also released an update to Sencha Architect 2.2 that includes support for Sencha Touch 2.2, thus instantly allowing our Architect users to become Touch 2.2 developers. Architect can help build your next great Touch app, and if you have an existing Architect+Touch project, you can easily upgrade it to a Sencha Touch 2.2 project. Architect makes it easy to switch between the new built-in Touch themes.

오늘은 Sencha Architecht 2.2 업데이트도 공개했습니다. 거기에는 Sencha Touch 2.2 지원도 포함되어 있으므로, Architect 사용자는 동시에 Touch 2.2 사용자도 될 수있게 되었습니다. Architect에서 좋은 Touch 응용 프로그램을 생성 할 수 있도록 도와줍니다 그리고 만약 기존 Architect + Touch 프로젝트가 있으면, 그것을 쉽게 Sencha Touch 2.2 프로젝트로 업그레이드 할 수 있습니다. Architect를 사용하면 새로 포함 된 Touch 테마 사이를 전환하는 것도 더 쉬워집니다.

Try It Out

Go ahead and take Sencha Touch 2.2 for a spin: try the Sencha Touch Bundle, which includes Sencha Touch, Sencha Touch Charts, Sencha Eclipse Plugin, and Sencha Architect; or download the free standalone Sencha Touch SDK. It’s available with a 30-day trial, so feel free to download it and give it a go: it gives you everything you need if you are serious about building great touch apps.

어서 Sencha Touch 2.2 를 사용해 보세요. Sencha Touch, Sencha Touch Charts, Sencha Eclipse Plugin 그리고 Sencha Architect 를 포함하는 Sencha Touch Bundle을 사용해 보시거나 무료인 단독 Sencha Touch SDK를 다운로드 받아 보세요. 이것은 30일 시험 기간이 있으니 다운로드해서 무료로 체험 해 보세요. 여러분이 훌륭한 터치앱 만들기에 대해 심각하게 고려하신다면 여러분이 필요한 모든것을 제공 합니다.

Written by Aditya Bansod
Aditya is Sencha’s vice president of product marketing and is responsible for the product planning and strategy for Sencha’s product lines. Prior to Sencha, Aditya held various senior product management roles at Adobe and Microsoft, focusing on developers and media in the mobile and consumer electronics space.