반응형
안녕하세요.
드디어 Sencha Touch로 앱을 만들기로 했습니다.
이번주 들어서 갑자기 HTML5로 게임 만들기하고 Sencha Touch 앱하고 본격적으로 공부하고 싶어지더라구요.
오늘은 첫번째 모바일 웹으로 간단한 Note 기능을 만들겠습니다.
이 앱의 기능은 유저가 Notes를 받아서 이것을 디바이스에 저장하고 앱을 시작하면 그 Notes들을 볼 수 있도록 하겠습니다.
이 앱을 만들기 위해서는 아래 작업들을 해야 합니다.
- Scencha Touch Application의 block들을 만든다.
- 리스트 뷰를 이용해 정보를 렌더링 한다.
- form elements들을 이용해서 정보를 editing 한다.
- 브라우저 세션을 이용해 클라이언트 사이드 data persistence를 구현한다.
- multi-view 어플리케이션으로 여러 화면을 navigation할 수 있도록 한다.
완성된 화면인데요.
New를 누르면 간단한 Note를 할 수 있는 화면이 나오고 위 화면은 앱을 켰을 때 그 Note들이 출력되도록 하는 List 화면입니다.
***** 어플리케이션 개요
- note를 생성할 수 도록 한다.
- 현재의 note를 수정할 수 있도록 한다.
- note를 delete 할 수 있도록 한다.
- 브라우저 세션을 이용해 어플리케이션이 동작하면서 device에 note를 저장할 수 있도록 한다.
이러한 기능들을 염두에 두고 비쥬얼한 디자인을 한번 보겠습니다.
***** 메인 뷰 디자인하기
우리가 첫번째로 만들어야 할 부분은 note를 수정할 수 있는 화면입니다.
이 화면은 form 을 이용해 만들겁니다. 앞으로 이 화면은 Note Editor라고 부르도록 하겠습니다.
대략 아래와 같이 될 겁니다.
이 Note Editor를 Sencha Touch components를 이용해서 어떻게 구현할까요?
아래 그림을 보세요.
또한 우리는 기존에 있던 note들을 리스트로 랜더링해서 보여주는 화면이 필요합니다.
이 화면이 아마 이 애플리케이션의 메인 화면이 될 겁니다.
또한 이 화면은 Note Editor와 연결 돼 있어야 합니다. 아래 대략적인 그림이 있습니다.
그리고 아래는 우리가 사용할 Sencha Touch components들 입니다.
이 두 화면 이외에 보이지는 않지만 이 앱에 꼭 필요한 component가 더 있습니다.
이 컴포넌트는 이 앱의 viewport와 같은 기능을 할거고 랜더링이나 Notes List와 Note Editor를 전환하는 부분을 담당하게 될 겁니다.
이 기능을 구현하기 위해 Notes List와 Note Editor가 layout's cards가 되는 Panel을 구성할 겁니다.
***** Sencha Touch application 의 block들 만들기
우리는 index.html, app.css, app.js 이렇게 세개의 파일을 만들겁니다.
index.html은 앱을 launch 하기 위한 파일입니다. 이 파일에는 기본 Sencha Touch framework와 우리가 사용할 app.js, app.js 파일들에 대한 정보가 들어 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Getting Started</title>
<script src="sencha-touch-debug.js" type="text/javascript"></script>
<link href="sencha-touch.css" rel="stylesheet" type="text/css" />
<link href="app.css" rel="stylesheet" type="text/css" />
<script src="app.js" type="text/javascript"></script>
</head>
<body></body>
</html>
app.js와 app.css는 이 앱에서 사용할 자바스크립트와 css 파일입니다.
app.js에서 우리가 할 최초의 작업은 어플리케이션을 instantiate 하는 작업입니다.
var App = new Ext.Application({
name : 'NotesApp',
useLoadMask : true,
launch : function () {
}
})
Ext.Application 클래스는 Sencha Touch application 임을 말합니다.
자세한 사항은 http://docs.sencha.com/touch/1-1/#!/api/Ext.Application 에 있습니다.
새 application을 instantiate 하게 되면 자동적으로 전역번수 NotesApp이 생성되고 아래의 namespaces들이 만들어 집니다.
- NotesApp
- NotesApp.views
- NotesApp.models
- NotesApp.controllers
- NotesApp.stores
그리고 launch() 함수는 오직 한번만 실행됩니다. 여기에는 우리가 생성할 application의 view가 들어가게 됩니다.
launch: function () {
NotesApp.views.viewport = new Ext.Panel({
fullscreen: true,
html:'This is the viewport'
});
}
우리 앱의 viewport는 Ext.Panel 입니다. 이 panel에는 Notes List와 Note Editor가 그려지게 될 겁니다.
여기서 fullscreen config 옵션을 true로 하게 되면 이 panel이 브라우저의 모든 공간을 활용하게 됩니다.
여기에는 monitorOrientation config도 true로 할 수 있습니다. 이렇게 되면 모바일의 경우 orientation이 바뀌게 되면 화면도 바뀌게 됩니다.
여기까지 작업한 내용을 device나 simulator에서 돌리시면 아래와 같은 화면을 보실 수 있을겁니다.
***** Creating the Notes List container
Notes List는 앱이 실행될 때 유저에게 보여질 화면입니다. 아래 그림에서 보듯이 여기에는 툴바와 리스트가 있게 될 겁니다.
한번 구현해 보겠습니다.
첫번째로 우리는 툴바와 리스트를 display 하게 될 panel을 만들어야 합니다.
우리는 이 panel을 notesListContainer라고 부르겠습니다.
NotesApp.views.notesListContainer = new Ext.Panel({
id : 'notesListContainer',
layout : 'fit',
html: 'This is the notes list container'
});
여기에 툴바와 리스트를 추가하기 전에 이 viewport안에서 rendering 작업을 해야 합니다.
var App = new Ext.Application({
name: 'NotesApp',
useLoadMask: true,
launch: function () {
NotesApp.views.notesListContainer = new Ext.Panel({
id : 'notesListContainer',
layout : 'fit',
html: 'This is the notes list container'
});
NotesApp.views.viewport = new Ext.Panel({
fullscreen : true,
layout : 'card',
cardAnimation : 'slide',
items: [NotesApp.views.notesListContainer]
});
}
})
여기에 왜 card 레이아웃을 사용했을 까요? 왜냐하면 Notes List container와 Note Editor 들은 cards 들이기 때문입니다.
대부분의 모바일 앱이 그렇듯이 이 cards 들은 slide 애니메이션을 사용해서 display 될 겁니다.
이 소스를 device나 simulator에서 체크해 보시면 아래와 같은 화면을 보실 수 있을 겁니다.
뭐가 잘 못 된 걸까요? 툴바와 notes list가 안 보이네요. 이것들은 아래에서 마저 작업 하겠습니다.
***** Adding a Sencha Touch toolbar to a panel
아래와 같이 툴바를 정의할 수 있습니다. 여기에 버튼이 들어가야 되는데요 이건 나중에 작업하겠습니다.
NotesApp.views.notesListToolbar = new Ext.Toolbar({
id: 'notesListToolbar',
title: 'My Notes'
});
디바이스나 시뮬레이터로 아래처럼 화면이 출력되는지 확인해 보세요.
***** 다음 작업
오늘은 여기서 마치도록 하고요 다음 글에서는 방금 만든 notes list를 view에 추가하겠습니다. 그리고 note를 만들고 수정하는 기능들도 작업하겠습니다.
지금까지의 소스는 아래와 같습니다.
var App = new Ext.Application({
name: 'NotesApp',
useLoadMask: true,
launch: function () {
NotesApp.views.notesListToolbar = new Ext.Toolbar({
id: 'notesListToolbar',
title: 'My Notes'
});
NotesApp.views.notesListContainer = new Ext.Panel({
id: 'notesListContainer',
layout: 'fit',
html: 'This is the notes list container',
dockedItems: [NotesApp.views.notesListToolbar]
});
NotesApp.views.viewport = new Ext.Panel({
fullscreen: true,
layout: 'card',
cardAnimation: 'slide',
items: [NotesApp.views.notesListContainer]
});
}
})
지금까지의 소스는 아래 파일을 다운받아서 보시면 됩니다.
추천 추천 부탁드려요. ~~~~~~~ ~~~~~~~
드디어 Sencha Touch로 앱을 만들기로 했습니다.
이번주 들어서 갑자기 HTML5로 게임 만들기하고 Sencha Touch 앱하고 본격적으로 공부하고 싶어지더라구요.
오늘은 첫번째 모바일 웹으로 간단한 Note 기능을 만들겠습니다.
이 앱의 기능은 유저가 Notes를 받아서 이것을 디바이스에 저장하고 앱을 시작하면 그 Notes들을 볼 수 있도록 하겠습니다.
이 앱을 만들기 위해서는 아래 작업들을 해야 합니다.
- Scencha Touch Application의 block들을 만든다.
- 리스트 뷰를 이용해 정보를 렌더링 한다.
- form elements들을 이용해서 정보를 editing 한다.
- 브라우저 세션을 이용해 클라이언트 사이드 data persistence를 구현한다.
- multi-view 어플리케이션으로 여러 화면을 navigation할 수 있도록 한다.
완성된 화면인데요.
New를 누르면 간단한 Note를 할 수 있는 화면이 나오고 위 화면은 앱을 켰을 때 그 Note들이 출력되도록 하는 List 화면입니다.
***** 어플리케이션 개요
- note를 생성할 수 도록 한다.
- 현재의 note를 수정할 수 있도록 한다.
- note를 delete 할 수 있도록 한다.
- 브라우저 세션을 이용해 어플리케이션이 동작하면서 device에 note를 저장할 수 있도록 한다.
이러한 기능들을 염두에 두고 비쥬얼한 디자인을 한번 보겠습니다.
***** 메인 뷰 디자인하기
우리가 첫번째로 만들어야 할 부분은 note를 수정할 수 있는 화면입니다.
이 화면은 form 을 이용해 만들겁니다. 앞으로 이 화면은 Note Editor라고 부르도록 하겠습니다.
대략 아래와 같이 될 겁니다.
이 Note Editor를 Sencha Touch components를 이용해서 어떻게 구현할까요?
아래 그림을 보세요.
또한 우리는 기존에 있던 note들을 리스트로 랜더링해서 보여주는 화면이 필요합니다.
이 화면이 아마 이 애플리케이션의 메인 화면이 될 겁니다.
또한 이 화면은 Note Editor와 연결 돼 있어야 합니다. 아래 대략적인 그림이 있습니다.
그리고 아래는 우리가 사용할 Sencha Touch components들 입니다.
이 두 화면 이외에 보이지는 않지만 이 앱에 꼭 필요한 component가 더 있습니다.
이 컴포넌트는 이 앱의 viewport와 같은 기능을 할거고 랜더링이나 Notes List와 Note Editor를 전환하는 부분을 담당하게 될 겁니다.
이 기능을 구현하기 위해 Notes List와 Note Editor가 layout's cards가 되는 Panel을 구성할 겁니다.
***** Sencha Touch application 의 block들 만들기
우리는 index.html, app.css, app.js 이렇게 세개의 파일을 만들겁니다.
index.html은 앱을 launch 하기 위한 파일입니다. 이 파일에는 기본 Sencha Touch framework와 우리가 사용할 app.js, app.js 파일들에 대한 정보가 들어 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Getting Started</title>
<script src="sencha-touch-debug.js" type="text/javascript"></script>
<link href="sencha-touch.css" rel="stylesheet" type="text/css" />
<link href="app.css" rel="stylesheet" type="text/css" />
<script src="app.js" type="text/javascript"></script>
</head>
<body></body>
</html>
app.js와 app.css는 이 앱에서 사용할 자바스크립트와 css 파일입니다.
app.js에서 우리가 할 최초의 작업은 어플리케이션을 instantiate 하는 작업입니다.
var App = new Ext.Application({
name : 'NotesApp',
useLoadMask : true,
launch : function () {
}
})
Ext.Application 클래스는 Sencha Touch application 임을 말합니다.
자세한 사항은 http://docs.sencha.com/touch/1-1/#!/api/Ext.Application 에 있습니다.
새 application을 instantiate 하게 되면 자동적으로 전역번수 NotesApp이 생성되고 아래의 namespaces들이 만들어 집니다.
- NotesApp
- NotesApp.views
- NotesApp.models
- NotesApp.controllers
- NotesApp.stores
그리고 launch() 함수는 오직 한번만 실행됩니다. 여기에는 우리가 생성할 application의 view가 들어가게 됩니다.
launch: function () {
NotesApp.views.viewport = new Ext.Panel({
fullscreen: true,
html:'This is the viewport'
});
}
우리 앱의 viewport는 Ext.Panel 입니다. 이 panel에는 Notes List와 Note Editor가 그려지게 될 겁니다.
여기서 fullscreen config 옵션을 true로 하게 되면 이 panel이 브라우저의 모든 공간을 활용하게 됩니다.
여기에는 monitorOrientation config도 true로 할 수 있습니다. 이렇게 되면 모바일의 경우 orientation이 바뀌게 되면 화면도 바뀌게 됩니다.
여기까지 작업한 내용을 device나 simulator에서 돌리시면 아래와 같은 화면을 보실 수 있을겁니다.
***** Creating the Notes List container
Notes List는 앱이 실행될 때 유저에게 보여질 화면입니다. 아래 그림에서 보듯이 여기에는 툴바와 리스트가 있게 될 겁니다.
한번 구현해 보겠습니다.
첫번째로 우리는 툴바와 리스트를 display 하게 될 panel을 만들어야 합니다.
우리는 이 panel을 notesListContainer라고 부르겠습니다.
NotesApp.views.notesListContainer = new Ext.Panel({
id : 'notesListContainer',
layout : 'fit',
html: 'This is the notes list container'
});
여기에 툴바와 리스트를 추가하기 전에 이 viewport안에서 rendering 작업을 해야 합니다.
var App = new Ext.Application({
name: 'NotesApp',
useLoadMask: true,
launch: function () {
NotesApp.views.notesListContainer = new Ext.Panel({
id : 'notesListContainer',
layout : 'fit',
html: 'This is the notes list container'
});
NotesApp.views.viewport = new Ext.Panel({
fullscreen : true,
layout : 'card',
cardAnimation : 'slide',
items: [NotesApp.views.notesListContainer]
});
}
})
여기에 왜 card 레이아웃을 사용했을 까요? 왜냐하면 Notes List container와 Note Editor 들은 cards 들이기 때문입니다.
대부분의 모바일 앱이 그렇듯이 이 cards 들은 slide 애니메이션을 사용해서 display 될 겁니다.
이 소스를 device나 simulator에서 체크해 보시면 아래와 같은 화면을 보실 수 있을 겁니다.
뭐가 잘 못 된 걸까요? 툴바와 notes list가 안 보이네요. 이것들은 아래에서 마저 작업 하겠습니다.
***** Adding a Sencha Touch toolbar to a panel
아래와 같이 툴바를 정의할 수 있습니다. 여기에 버튼이 들어가야 되는데요 이건 나중에 작업하겠습니다.
NotesApp.views.notesListToolbar = new Ext.Toolbar({
id: 'notesListToolbar',
title: 'My Notes'
});
디바이스나 시뮬레이터로 아래처럼 화면이 출력되는지 확인해 보세요.
***** 다음 작업
오늘은 여기서 마치도록 하고요 다음 글에서는 방금 만든 notes list를 view에 추가하겠습니다. 그리고 note를 만들고 수정하는 기능들도 작업하겠습니다.
지금까지의 소스는 아래와 같습니다.
var App = new Ext.Application({
name: 'NotesApp',
useLoadMask: true,
launch: function () {
NotesApp.views.notesListToolbar = new Ext.Toolbar({
id: 'notesListToolbar',
title: 'My Notes'
});
NotesApp.views.notesListContainer = new Ext.Panel({
id: 'notesListContainer',
layout: 'fit',
html: 'This is the notes list container',
dockedItems: [NotesApp.views.notesListToolbar]
});
NotesApp.views.viewport = new Ext.Panel({
fullscreen: true,
layout: 'card',
cardAnimation: 'slide',
items: [NotesApp.views.notesListContainer]
});
}
})
지금까지의 소스는 아래 파일을 다운받아서 보시면 됩니다.
FirstSenchaApp.zip추천 추천 부탁드려요. ~~~~~~~ ~~~~~~~
반응형
'WEB_APP > Sencha_Touch' 카테고리의 다른 글
| Sencha Touch 2 Tutorial - Controllers - (2) | 2012.03.06 |
|---|---|
| Sencha Touch 2 Application에 대한 전반적인 이해 (0) | 2012.03.04 |
| Sencha Touch 2.0 Beta Tutorial 첫번째 앱 -2- (4) | 2012.02.26 |
| Sencha Touch 2.0 Beta Tutorial 첫번째 앱 -1- (6) | 2012.02.25 |
| Sencha Touch Tutorial 1 Getting Started (0) | 2012.02.22 |
| Sencha Touch 로 첫번째 앱 만들기 -4- (1) | 2012.02.21 |
| Sencha Touch 로 첫번째 앱 만들기 -3- (0) | 2012.02.20 |
| Sencha Touch 로 첫번째 앱 만들기 -2- (6) | 2012.02.17 |
| Sencha Touch getting started - 설치 및 예제 실행 - (2) | 2011.12.16 |
| Sencha Touch Road Show 를 다녀와서.... (4) | 2011.12.14 |