센차터치 2 입문에서 활용까지

Part1. Moible Web App을 위한 기본 사양
Section 1. 모바일 앱 진화론
1. 모바일 웹 (Mobile Web)
2. 네이티브 앱 (Native App)
3. 모바일 웹앱 (Mobile Web App)
4. 하이브리드 앱 (Hybird App)

Section 2. 모바일 웹앱 Framework
1. jQuery Mobile
2. Sencha Touch

Section 3. 개발환경 구성하기
1. Window OS를 위한 개발환경 설치
-APMSetup 설치
-Google Chrome 브라우저의 설치
-Editplus의 설치
2. Mac OS를 위한 개발환경 설치
-MAMP의 설치
-Google Chrome 브라우저의 설치
-Coda의 설치
3. Site To Phone의 설치
-Site To Phone 가입 및 인증
-Google Chrome Plugin
-iPhone
-Android Phone

Section 4. 모바일 웹앱을 위한 HTML5준비
1. DTD 선언문의 변경
2. 태그를 통한 캐릭터 셋 지정
3. 모바일 웹앱을 위한 설정
-태그를 통한 Viewprot 설정하기
-홈 화면에 북마크 아이콘 지정하기
-아이폰 전용 추가 기능
4. 첫 번째 모바일 웹페이지

Section 5. 객체지향 자바스크립트
1. Prototype을 통한 Javascript Class 구현
2. Object를 통한 개별 프로퍼티 확장
3. 패키지 정의하기
4. JSON 표현법
5. JSON 표현법을 활용한 JavaScript Class 구현

Section 6. HTML5 API 살펴보기
1. WebForm
-새로운 공통 속성
-새로운 input 요소
2. QuerySelector
3. Audio와 Video
-Audio
-Video
4. Multimedia API
5. WebStorage
6. WebDatabase
7. GeoLocation
8. Application Cache
-Application Cache의 장점
-Application Cache 사용하기

Part2. Sencha Toouch2 시작하기
Section 1. Sencha Touch2 를 시작하기 위한 준비
1. Sencha Touch2 Framework 다운로드
2. Sencha Touch2 Framework 구성
-sencha-touch-all[-debug].js 파일
-sencha-touch[-debug].js 파일
-docs 폴더
-examples 폴더
-resources 폴더
3. Sencha Touch2 기본 파일 구조

Section 2. Sencha Touch2 클래스 구성
1. Sencha Touch 클래스 작성
2. 클래스 구성 옵션
3. 클래스 상속
4. 클래스 로더
5. 클래스 비동기 로딩

Part3. Sencha Touch2 User Interface
Section 1. Panel과 Layout
1. 패널 (Ext.Panel)
-패널의 기본 사용 방법
-패널의 분할
-패널 안에 HTML 포함시키기
-도킹 옵션
2. 레이아웃
-기본 레이아웃
-hbox 레이아웃과 vbox 레이아웃
-flex 구성 옵션
-flex 구성옵션의 활용
-fit 레이아웃
3. xtype

Section 2. Button과 Icon
1. 버튼 컴포넌트의 종류
2. 버튼 이벤트 처리
3. defaults 구성옵션
4. 아이콘
5. 커스텀 아이콘
6. 뱃지 텍스트
7. 세그먼트 버튼

Section 3. ToolBar와 TitleBar
1. 툴바
2. 타이틀 바
3. 타이틀 바 활용하기

Section 4. MessageBox, Overlay, ActionSheet
1. 메시지 박스
-Alert 메시지 박스
-Confirm 메시지 박스
-Prompt 메시지 박스
2. 커스텀 메시지 박스
3. 오버래이
4. 시트
5. 액션 시트
Section 5. Form
1. 폼 컴포넌트
2. FieldSet의 사용
3. 폼 컴포넌트의 종류
4. DatePicker의 현지화
5. 폼 데이터 바인딩

Section 6. 멀티미디어
1. Audio
2. Video

Section 7. 위치정보
1. Map

Section 8. 화면전환
1. Card Layout
2. 화면 전환 애니메이션
3. Tab 패널
4. 캐러셀

Section 9. 요소의 획득과 jQuery
1. 요소의 획득
2. jQuery와의 병행 사용

Section 10. Sencha Touch2 테마 구성하기
1. Sass 소개
-변수의 사용
-계층적 구조
-연산과 내장함수의 사용 / import
-복수 변수의 지정
-Compass의 사용
2. Sass 환경 구축
-Ruby Download
-Ruby 설치하기
3. Sencha Touch2 테마 작성하기

Part4. Sencha Touch2 데이터 통신
Section 1. Ajax 통신 시작하기
1. Ajax 통신 시작하기
2. 서버측 스크립트와의 연동

Section 2. Ajax통신으로 XML데이터 처리하기
1. 간단한 XML 파일 읽어오기
2. 복잡한 XML 파일 읽어오기
3. 서버측 스크립트와의 연동

Section 3. XML을 사용한 Cross Domain통신
1. 크로스 도메인 통신 개요
2. 네이버 OpenAPI 연동키 발급 받기

Section 4. Ajax 통신으로 Json데이터 처리하기
1. 간단한 JSON 데이터 요청하기
2. 여러 개의 데이터를 갖는 JSON 데이터 요청하기
3. 구조화된 JSON 데이터 요청하기
4. 서버측 스크립트와의 연동

Section 5. JSONP를 통한 Cross Domain 통신
1. JSONP 소개
2. Daum OpenAPI 연동을 통한 이미지 검색

Part5. Sencha Touch2 Template
Section 1. 템플릿을 사용한 화면 레이아웃 구성
1. 템플릿의 기본 사용 방법
2. 템플릿에 JSON 데이터를 적용하기
3. append() 메서드를 사용한 템플릿 적용
4. setData() 메서드를 사용한 데이터 바인딩
5. 템플릿에 Ajax 통신을 적용하기

Section 2. 확장 템플릿을 사용한 화면 구성
1. 반복문
2. 데이터 접근
3. 조건 분기 if문
4. if ~ elseif~ else 문
5. switch 분기
6. 내장 변수를 통한 기본적인 연산
7. Inline코드의 실행
8. Ajax를 통한 통신 데이터 처리

Part6. Sencha Touch2 Data처리
Section 1. 데이터 모델 (Ext.data.Model)
1. 데이터 모델 (Ext.data.Model) 시작하기
-데이터 모델의 생성
-데이터 모델의 값 변경하기
2. 데이터 모델의 데이터 바인딩
-템플릿에 바인딩 하기
-폼에 바인딩 하기

Section 2. 데이터 스토어 (Ext.data.Store)
1. 데이터 스토어 시작하기

Section 3. 데이터 뷰를 사용한 리스트 구현
1. 리스트 뷰 컴포넌트
2. 리스트 뷰 기본 이벤트
3. Disclosure 이벤트
4. 리스트 뷰 데모

Section 4. 데이터 프록시 (Ext.data.Proxy)
1. XML 통신을 위한 데이터 프록시
-데이터 프록시 생성하기
-XML파일과의 통신
-XML데이터 읽기와 템플릿 바인딩
-데이터 프록시와 데이터 스토어의 사용
-데이터 프록시의 수동 로드
-데이터 프록시를 데이터 스토어에 포함시키기
2. JSON 통신을 위한 데이터 프록시
-데이터 프록시 생성하기
-JSON 데이터 읽어오기
-JSON 데이터 프록시와 데이터 스토어
-데이터 프록시의 수동 로드
-데이터 프록시를 데이터 스토어에 포함시키기
3. JSONP 통신을 위한 데이터 프록시
-데이터 프록시 생성하기
-JSON 데이터 읽어오기
-JSONP 데이터 프록시와 데이터 스토어
-데이터 프록시의 수동 로드
-데이터 프록시를 데이터 스토어에 포함시키기

Section 5. 데이터 스토어 핸들링
1. 데이터 스토어 정렬
-데이터 자동 정렬
-데이터 수동 정렬
2. 데이터 추가
3. 데이터 필터링
-데이터 자동 필터링
-데이터 수동 필터링
4. 데이터 그룹핑
-알파벳 그룹핑
-한글 초성 정렬

Section 6. 페이징 처리와 중첩 리스트
1. 데이터 스토어 페이징 처리
-데이터 스토어 페이징 처리 파라미터
-더 보기 기능 구현하기
2. 중첩 리스트

Part7. Sencha Touch2 MVC 모델
Section 1. Sencha Touch2 MVC 모델 개요
1. MVC모델 소개
2. MVC 패턴 개발 준비
-Sencha Touch2 SDK Beta3 다운로드
-Sencha Touch2 SDK Beta3 설치하기 for Windows
-Sencha Touch2 SDK Beta3 설치하기 for Mac
3. Sencha Touch2 MVC 프로젝트 생성하기
4. Sencha Touch2 MVC 프로젝트 빌드하기
5. 배치 파일을 통한 원클릭 생성/빌드 만들기
-프로젝트 생성 배치파일
-프로젝트 빌드 배치파일
6. Sencha Touch 프로젝트 구조 살펴보기
-index.html
-/sdk/microloader/development.js
-/app.json
-/app.js
-/app/view/Main.js
7. MVC 동작 방식 확인하기
-오프라인 웹 페이지의 구현
-변경사항의 갱신
-데이터 프록시 유의사항

Section 2. MVC모델 구조
1. View
-View 개요
-View의 생성
-View의 활용
2. Controller
-Controller 개요
-컨트롤러의 생성
-컨트롤러의 View 참조
-View 내의 컴포넌트에 대한 이벤트 처리
3. Model
-Model 개요
-Model 생성
-데이터 스토어 추가
-데이터 스토어 사용하기

Part8. Sencha Touch2 with PhoneGap
Section 1. PhoneGap 소개
Section 2. Andorid HybirdApp
1. Android 개발환경 구성하기
-JDK의 설치
-이클립스 다운로드
-안드로이드 SDK의 다운로드
-안드로이드 ADT 플러그인의 설치
-안드로이드 API 다운로드
2. Android PhoneGap 프로젝트 시작하기
-PhoneGap 라이브러리 다운로드
-안드로이드 프로젝트 시작하기
-PhoneGap 라이브러리 포함시키기
-인트로 화면 추가하기
-PhoneGap화면 화면 추가하기
-에뮬레이터 생성하기
-에뮬레이터를 통한 어플리케이션 구동
-핸드폰을 통한 어플리케이션 구동
3. 배포하기
-프로젝트 패키징 하기
-Google Play를 통한 배포

Section 3. iOS HybridApp
1. iOS 개발환경 구성하기
-XCode의 설치
-iOS용 PhoneGap의 설치
2. iOS PhoneGap 프로젝트 시작
-프로젝트 생성하기
-XCode 프로젝트 살펴보기
-웹앱을 포함시키기
-외부 사이트에 대한 접속 처리
-프로젝트 빌드 및 실행
3. 단말을 통한 실행
-Apple Developer Program 가입
-인증서 생성
-인증서 등록
-단말기 등록
-App ID 생성 및 단말 실행

Part9. Sencha Touch2 with Appspresso
Section 1. Appspresso 소개

Section 2. Appspresso 개발환경 구축
1. Appspresso 다운로드 및 설치
-JDK의 설치
-Appspresso 다운로드 및 설치
2. 운영체제별 SDK 준비
-Android SDK의 다운로드 및 설치
-Android 버전 별 API의 설치
-iOS의 Xcode 설치 경로 확인
3. Appspresso 환경설정
-기본 환경 설정
-Android 관련 환경 설정
-iOS 관련 환경 설정

Section 3. Appspresso 프로젝트 진행
1. Appspresso 프로젝트 생성
2. Appspresso 프로젝트 진행하기
3. 안드로이드 버전의 빌드 및 실행
-에뮬레이터 실행
-단말 실행
-안드로이드 버전 배포하기
4. iOS 버전의 빌드 및 실행
-에뮬레이터 실행
-단말 실행
Part1. Moible Web App을 위한 기본 사양
Section 1. 모바일 앱 진화론
1. 모바일 웹 (Mobile Web)
2. 네이티브 앱 (Native App)
3. 모바일 웹앱 (Mobile Web App)
4. 하이브리드 앱 (Hybird App)

Section 2. 모바일 웹앱 Framework
1. jQuery Mobile
2. Sencha Touch

Section 3. 개발환경 구성하기
1. Window OS를 위한 개발환경 설치
-APMSetup 설치
-Google Chrome 브라우저의 설치
-Editplus의 설치
2. Mac OS를 위한 개발환경 설치
-MAMP의 설치
-Google Chrome 브라우저의 설치
-Coda의 설치
3. Site To Phone의 설치
-Site To Phone 가입 ...