Sencha Touch2 전체 12시간 42분 강의당평균 50분47초

Sencha Touch2

전체 : 12시간 42분 / 강의당평균 : 50분47초

01 센차터치의 기본개념

센차터치의 기본구조를 살펴보고, 사용법, 디버깅 방법과 기본적인 클래스, 경로, 패키지, 컨테이너나 컴포넌트들을 다루는 방법에 대해 예제들을 통해 알아봅니다.

25분

책갈피 : [00:00] 센차터치의 시작 / [01:40] 센차터치 폴더 확인 / [01:53] doc 폴더 / [02:29] examples 폴더 / [02:38] sencha-touch.js / [02:46] sencha-touch.css / [04:19] index.html / [05:50] 파일 경로 확인 / [06:07] app.js / [06:21] Ext.application / [06:48] 라이브러리 호출 / [07:00] fullscreen / [07:16] html 코드 / [07:35] 실행 / [09:00] 스크립트 디버깅 / [09:30] 강제 오류 생성 / [09:55] 크롬 요소 검사 / [10:20] 오류 갯수 확인 / [10:53] 창 분리 / [11:14] app.js 오류 확인 / [11:53] Network탭 / [12:34] Sources탭 / [12:53] 오류 확인 / [13:25] 오류 수정 / [13:34] 수정내용 실행 / [14:21] 클래스 / [15:02] 클래스 예제 / [15:38] 네임스페이스 / [16:15] Ext.define / [16:52] Ext.create / [17:55] run( )메소드 / [18:30] index실행 / [18:52] 클래스 상속 / [19:00] 실행 / [19:12] 소스 확인 / [20:25] config / [22:50] 정적 변수 / [23:12] 예제 작성 / [24:15] 결과 확인 / [24:48] Console탭

02 MVC예제와 센차터치 기본 컴퍼넌트 1

MVC아키텍쳐에 대해 예제 프로그램을 만들어보고, 패널과 레이아웃, 템플릿, 폼, 컴포넌트등 센처터치 기본 컴퍼넌트들에 대해 공부해봅니다.

1시간 18분

책갈피 : [00:00] 클래스의 이벤트 사용법 / [01:03] ext.define / [01:37] 속성정의 / [01:57] mybutton객체 / [02:32] 확인 / [03:01] 클래스이벤트 / [03:25] 경로와 패키지 / [04:12] 경로 / [04:26] 결과보기 / [05:49] sub1.js / [06:19] app.js / [06:52] requires / [07:22] 두파일의 경로 / [08:10] 패널의 선언 / [08:48] 폴더구분생성 / [09:30] sub1.js / [09:52] 네임스페이스의 변화 / [10:25] app.js / [11:20] 패키지 / [11:51] 파일명과 패키지명 / [12:30] 컴포넌트 / [13:32] 컴포넌트와 컨테이너의 사용예제 / [14:07] 패널생성 / [14:47] 컴포넌트의 별도 선언 / [14:58] app.js / [15:25] 컨테이너에 추가 / [16:10] 확인 / [17:17] mvc아키텍처 / [18:05] 센차터치에서의 역할 / [18:44] 컨트롤러의 역할 / [19:14] mvc구조 / [19:29] app / [20:28] 모델 / [20:46] 뷰 / [21:31] 비mvc를 mvc로 구현 팁 / [21:53] 화면이동의 결정 / [22:09] 파일결정 / [22:23] 필요한 파일 정의 / [22:31] 뷰구현 / [22:49] 모델정의 / [23:02] 시작패널선언 / [23:30] 이벤트정의 / [23:43] 이벤트와 메소드구현 화면제어 / [24:36] mvc예제 / [24:54] 파일설계 / [25:53] app.js / [26:54] helloview.js / [27:42] 확인 / [28:22] 백그라운드이미지 / [28:37] 확인 / [29:35] 화면의 기본패널 / [30:42] 패널의속성변경 / [31:10] index.html / [31:50] app.js / [32:25] 기본설정지정 / [32:41] launch이벤트 / [33:09] 패널생성 / [33:28] docked속성 / [33:48] 실행 / [34:42] mvc형식 / [35:41] panelview.js / [36:20] app.js / [37:40] 실행 / [38:50] 패널분리 / [39:39] topview.js / [40:05] bottomview.js / [40:43] panelview.js / [41:19] app.js / [41:58] 확인 / [42:55] x타입속성 / [43:38] topview.js / [43:51] bottomview.js / [44:08] panelview.js / [44:45] app.js / [46:03] 레이아웃 / [46:16] app.js / [46:36] 확인 / [47:20] flex / [48:31] 피트 / [48:43] 카드 / [49:04] 실무에서의 활용 / [49:28] vbox와 hbox의 혼용 / [50:05] 확인 / [51:07] 센차터치에서의 화면구성표현 / [51:50] 템플릿구현 / [51:56] index.html / [52:23] app.js / [53:08] tpl속성 / [53:28] 실행 / [54:07] 컴포넌트구현 / [54:17] ext.form의 필드종류 / [55:01] 필드들의 특징 / [56:56] 입사지원서폼 확인 / [57:06] app.js / [57:20] 폼의 생성 / [57:53] xtype으로 선언 / [58:31] 컴포넌트의 배치 / [58:56] items외의 방법 / [59:16] 실행 / [01:00:09] 버튼 / [01:00:30] 공백의 크기 / [01:01:24] selectfield / [01:01:33] datepickerfield / [01:02:49] 모델정의 / [01:03:39] xtype선언 / [01:04:25] 값 가져오는 방법 / [01:05:05] 코드확인 / [01:05:39] 이벤트핸들러 / [01:06:16] formpanel / [01:06:46] 실행 / [01:07:07] 컴포넌트를 읽어와서 설정 / [01:07:31] 패널내에서 찾을때 / [01:07:40] 폼패널과 연계 / [01:07:59] 패널에서부터 정의 / [01:08:36] 폼패널의 mvc구현 / [01:09:14] 파일구조 / [01:10:01] app.js / [01:10:59] formview.js / [01:12:12] config / [01:12:32] field / [01:13:26] 버튼 / [01:13:41] id / [01:14:19] formmode.js / [01:14:58] malefamalemodel / [01:15:22] malefamalestore / [01:15:59] formcontroller.js / [01:16:50] 메소드정의 / [01:17:50] 확인

03 센차터치 기본 컴포넌트 2

툴바,탭바, 아이콘의 사용과 이벤트의 사용, 그리고 카루젤에 대해 알아보고, 데이터 뷰와 리스트에 대해서도 공부하면서 예제들을 만들어봅니다.

48분

책갈피 : [00:00] 툴바,탭바,아이콘의 사용 / [01:06] 카드레이아웃 / [01:29] 차이점 / [01:56] 예제 / [03:08] 소스보기 / [03:31] ext.tab.panel / [03:46] launch이벤트 / [04:27] items / [04:43] 이미지 / [05:01] 툴바 / [05:33] 브라우저확인 / [06:15] 아이콘이미지 / [06:46] 툴바의 장점 / [07:07] 툴바의 변형 / [07:30] 예제2 / [08:02] 소스보기 / [08:24] 툴바의 위치설정코드 / [08:42] items / [09:08] 아래쪽의 이미지링크 / [09:49] 크기수동등록 / [10:32] 화면색상변경 / [10:48] hide 메소드 / [11:02] add,remove 메소드 / [11:14] 브라우저 확인 / [11:35] 탭패널과 툴바의 차이 / [12:05] 탭패널과 탭바 / [12:42] 이벤트의 사용 / [13:18] 기본이벤트와 특정이벤트 / [13:43] 상황에따른 이벤트 / [14:16] 예제 / [14:45] 소스보기 / [15:04] handler이벤트 / [15:39] 이벤트추가 / [16:13] 이벤트발생 / [16:17] 이벤트처리 / [16:34] 이벤트구현 / [17:33] 브라우저 확인 / [18:32] mvc로 구현 / [18:53] mvc / [19:21] app.js / [19:46] myeventview.js / [20:28] myeventcontroller.js / [21:16] 브라우저 확인 / [22:04] 카루젤기능 / [22:55] 카루젤의 주요 속성 / [23:37] 카루젤의 주요 메소드 / [24:02] 카루젤의 주요 이벤트 / [24:17] 예제 / [25:09] 소스보기 / [25:18] ext.carousel / [26:00] 브라우저 확인 / [26:14] 여러화면 분배 / [26:40] 결과확인 / [27:17] 카루젤의 복합적 사용 / [27:48] 소스보기 / [28:20] 결과확인 / [29:02] 주의할 점 / [29:39] 정리 / [30:10] 데이터뷰 / [30:37] 리스트와의 차이 / [30:44] 예제 / [31:40] 소스보기 / [32:57] 이미지정렬 변경 / [33:33] 결과확인 / [34:06] mvc구현 / [34:35] 파일구조 / [35:34] app.js / [36:40] mytoyview.js / [36:57] mytoydataview.js / [37:37] mytoymodel.js / [38:02] mytoystore.js / [38:39] mytoycontroller.js / [40:41] 리스트 / [41:34] 리스트의 주요 속성 / [42:55] 리스트의 주요 메소드 / [43:56] 리스트의 주요 이벤트 / [44:31] 예제 / [45:44] 소스보기 / [46:48] ext.list / [47:33] 파라미터 / [47:46] 결과 확인

04 센차터치 기본 컴퍼넌트 3

NestedList, 리스트풀, 메시지창, 마스크, 픽커, 액션시트, 오버레이와 같은 기본 컴포넌트들에 대해 알아보고, 패널의 호출을 이용한 페이지 이동 방법에 대해 공부해봅니다.

52분

책갈피 : [00:00] 리스트 / [00:27] 복잡한 리스트 / [00:40] app.js / [00:55] item template / [01:34] 버튼과 리스트 / [01:51] item tap이벤트 / [02:46] 브라우저 확인 / [03:27] 리스트의 변형 / [03:57] 예제 / [04:17] 소스확인 / [04:47] item template / [04:54] #기호 / [05:12] xindex / [05:26] xcount / [06:12] 결과 확인 / [06:40] 네스티드 리스트 / [07:16] pc의 메뉴화면 / [07:32] 화면확인 / [07:43] 리스트의 메뉴구조 / [08:18] 메뉴확인 / [08:47] 소스확인 / [08:55] requires / [09:25] items / [10:14] ext.data.treestore / [10:39] 결과확인 / [11:46] 스크롤 / [12:15] 예제 / [12:44] 소스보기 / [13:13] 원데이터 / [13:30] 추가할 데이터 / [13:56] blockrefresh / [14:45] 스크롤러 제어 / [15:25] 결과확인 / [16:02] 메세지박스 / [16:19] 예제 / [17:37] 경고창 / [17:56] 소스확인 / [18:30] 프롬프트 / [18:44] 확인창 / [18:54] 결과 확인 / [19:24] 마스크 / [19:44] 예제 / [21:00] 소스확인 / [21:28] setmask/show/hide 메소드 / [22:10] x-loading-spinner / [22:46] 결과 확인 / [22:56] 피커 / [24:00] 예제 / [25:21] 데이터피커 / [26:11] 소스확인 / [26:29] datepicker / [26:50] ext.picker / [27:14] 이벤트처리와 함수의 사용 / [27:41] 결과 확인 / [28:22] hide이벤트 / [29:04] 피커의 리턴값 / [29:19] 여러피커의 동시처리 / [29:34] 예제 / [29:57] 소스확인 / [30:02] 피커의 변경사용 / [30:39] 액션시트 / [31:16] 액션시트의 주요 메소드 / [31:50] 예제 / [33:03] 소스확인 / [33:18] ext 액션시트 정의 / [33:36] 버튼이벤트 / [34:02] 작은버튼 / [34:27] 결과확인 / [34:56] 오버레이 / [35:56] 예제 / [37:08] index.html / [37:24] div태그 / [37:32] 결과확인 / [38:22] app.js / [38:33] 툴바생성 / [38:56] ext.panel / [39:39] 버튼 / [40:14] div태그의 주의사항 / [40:55] div호출 / [41:22] 결과확인 / [41:55] 오버레이의 장점 / [42:25] 센차터치컨퍼넌트에서의 오버레이 / [42:42] 예제 / [44:05] 소스확인 / [44:09] schoollist / [44:35] 오버레이패널 / [45:36] 결과확인 / [46:02] 모바일에서의 오버레이 / [46:33] 페이지의 이동 / [47:10] 다이나믹 로딩 / [47:39] 제이쿼리와 센차터치 / [48:10] 이동화면예제 / [49:12] 소스확인 / [50:11] first.js / [50:41] show/hide / [50:58] second.js / [51:20] 결과확인

05 센차터치 기본 컴퍼넌트 4 & 센처터치 디자인

카드 레이아웃을 이용한 페이지의 이동에 대해 알아보고, 페이지 이동시에 값을 전달하는 방법과 NavigationView, 애니메이션, 그리고 센차터치 테마에 대해 배워봅니다.

53분

책갈피 : [00:00] 화면이동 / [00:35] 카드레이아웃 / [01:59] 애니메이션 효과 / [02:18] 애니메니션 종류 / [02:54] 구현방법 / [03:23] add메소드 / [03:44] 소스확인 / [04:18] 라이브러리호출 / [04:44] 런치이벤트 / [05:10] 결과확인 / [05:34] 애니메이션 속성 정의 / [05:56] first.js / [06:11] 버튼설정 / [06:41] second.js / [07:01] 버튼설정 / [07:15] 결과확인 / [08:20] 애니메이션 방식 변경 / [08:47] fade로 변경 / [09:37] pc와 모바일의 화면이동 / [10:11] 툴바를 포함한 페이지 이동 / [10:48] 예제 / [11:23] 텍스트필드 / [11:53] 페이지간의 값 전달 / [12:29] app.js / [12:52] 메인패널 / [13:32] items / [13:58] 버튼 / [15:11] first.js / [15:33] items / [15:50] 버튼 / [16:36] setvalue 메소드 / [17:05] second.js / [17:48] 버튼 / [18:16] setvalue 메소드 / [19:23] 결과확인 / [19:42] mvc로 구현 / [20:47] app.js / [21:34] mypageview.js / [22:05] config / [22:25] items / [23:09] myfirstpageview.js / [23:47] 버튼 / [24:29] mysecondpageview.js / [25:27] mypagecontroller / [25:34] config / [26:16] control / [27:05] launch / [27:44] 결과확인 / [29:07] 네비게이션뷰 / [29:25] app.js / [30:05] launch / [30:48] items / [30:59] 패널추가버튼 / [32:02] first.js / [32:29] 결과확인 / [33:11] 다양한애니메이션효과예제 / [34:51] rotate / [35:09] app.js / [35:46] ext.apply / [36:37] ani패널 / [37:12] 메일패널 생성 / [37:35] 버튼 / [38:16] 디렉션 / [38:37] 듀레이션 / [39:19] 결과확인 / [40:05] 테마 / [40:32] 폴더확인 / [41:30] 예제에 적용 / [42:03] index.html / [42:43] css파일변경 / [44:03] 기본테마의 수정 / [44:57] 예제 / [46:21] css변경방법 / [46:46] 요소검사 / [47:15] elements / [47:58] 화면조정 / [48:29] 스타일창 / [49:08] 색상변경 / [49:49] 또다른방법 / [50:31] css폴더 확인 / [51:02] bb6 / [51:17] x-list-item / [51:35] 복사한후 수정 / [52:11] 만든파일 추가 / [52:39] 결과확인

06 터치차트와 센차터치 웹앱 1

터치차트에 대해 알아보고, 영역, 바, 파이, 라인 차트등에 대해 예제를 통해 공부해봅니다. 그리고 센차터치에세 오디오나 비디오, 지도를 제어하는 방법에 대해서도 알아봅니다.

48분

책갈피 : [00:00] 터치차트 / [01:19] 영역차트예제 / [02:28] area.js / [02:57] 함수지정 / [03:10] area.panel / [03:28] 카루젤 / [03:59] items / [04:23] legend / [05:06] axes / [05:59] series / [06:27] 결과확인 / [06:58] 라인차트 / [07:39] line.js / [08:23] line패널 / [08:43] items / [09:03] 결과확인 / [09:31] axes / [10:10] series / [11:00] 결과확인 / [11:18] 바차트 / [11:42] 소스확인 / [12:09] 바패널 / [12:57] axes / [13:18] series / [13:51] 결과확인 / [14:06] 파이차트 / [14:42] 소스확인 / [15:00] 파이패널 / [15:23] axes / [15:40] series / [16:14] 결과확인 / [16:50] index.js / [16:59] ext.carousel / [17:35] 패널 / [18:01] index.html / [18:40] 결과확인 / [19:09] 그외의차트 / [20:11] 터치차트 드로우 / [20:25] index.html / [21:08] index.js / [21:22] ext.draw.component / [21:56] 패널 / [22:22] circle / [22:49] rect / [23:15] path / [24:01] text / [24:48] 결과확인 / [25:43] 터치차트의 장점 / [26:16] 멀티미디어 / [26:38] 오디오제어 / [27:00] 예제 / [28:10] app.js / [28:41] 패널 / [28:51] fieldset / [29:26] spacer / [29:33] player / [30:08] textfield / [30:23] play버튼 / [31:15] 정지버튼 / [31:43] 토글버튼 / [32:25] 결과확인 / [33:18] 비디오제어 / [33:29] app.js / [34:03] 툴바 / [34:52] xtype / [36:05] 맵의사용 / [36:59] 예제 / [37:59] index.html / [38:43] app.js / [39:29] 라이브러리 호출 / [39:52] pisition값 / [40:32] 결과확인 / [40:51] 홈버튼 / [41:20] listeners / [41:52] ext.create / [42:12] 플러그인 내용 지정 / [42:28] 결과확인 / [43:01] 다음맵으로 구현 / [43:39] 예제 / [44:29] api선언 / [44:55] daummap소스 / [45:16] 위치지정 / [45:49] 초기화 / [46:02] 컨트롤러 추가 / [47:17] 마커와 정보창 선언 / [47:30] 정보창의 이벤트 / [47:54] 결과확인

07 센차터치 웹앱 2 & 서버 연동 1

센차터치에서 다음맵을 제어하는 방법을 알아보고, 센차터치와 서버를 연동하는 법에 대해 공부하면서 XML데이터 사용이나, Sorter,Filter의 사용법을 배워봅니다.

55분

책갈피 : [00:00] 소스변경 / [00:24] index.html / [00:42] 스타일 / [00:54] apikey값 설정 / [01:56] app.js / [02:40] 패널생성 / [02:59] items / [03:24] 스타일 / [04:03] 맵의 구성내용 / [04:48] init함수 / [05:45] 결과확인 / [06:19] 맵확인 / [07:05] 오버레이 / [07:29] app.js / [07:40] overlaytoolbar / [07:58] overlay / [08:33] 패널 / [09:19] 리스너추가/맵설정 / [09:31] 결과확인 / [10:51] 컴포넌트의 서버연동 / [11:11] ajax / [11:34] 장점 / [12:01] 활용예 / [13:06] 서버연동 / [13:31] 모델/프록시/스토어 / [14:42] ajax/오브젝트 / [15:22] 예제 / [16:30] ajaxdata.jsp / [17:03] app.js / [17:42] 패널 / [17:52] ext.ajax.request / [18:26] 톰캣서버 / [18:54] url / [19:26] success / [20:03] ext.decode / [21:12] 화면구성부분 / [21:20] fieldset / [22:01] 결과확인 / [22:44] ajaxdata.jsp / [23:12] app.js / [23:54] 모델정의 / [24:24] ext.data.ajaxproxy / [25:28] ext.data.store / [26:21] ext.list / [27:04] 패널생성 / [27:30] 결과확인 / [28:14] 이벤트핸들러 / [28:35] mvc구현 / [29:04] 파일구성확인 / [29:57] 작업할 순서 / [30:13] app.js / [31:00] proxyview.js / [32:17] proxyapp.view.proxylist / [33:12] porxyapp.model.proxymodel / [33:46] proxyapp.store.proxystore / [34:35] 경로 / [35:30] proxycontroller.js / [36:49] proxystore호출 / [37:17] setstore메소드 / [38:10] ajaxdata.jsp / [38:42] 결과확인 / [39:40] xmldata의 사용 / [40:21] ajaxdata.js / [41:32] xml선언부 / [41:57] app.js / [42:32] ext.define / [43:04] store생성 / [44:18] ext.list / [44:50] itemtpl / [45:08] 패널 / [45:44] 결과확인 / [46:14] 스토어 / [46:35] 스토어의제어 / [47:10] 정렬과 필터링 / [47:29] ajaxdata.jsp수정 / [48:11] 예제확인 / [49:21] app.js / [49:56] 모델정의 / [50:08] ext.data.ajaxproxy / [50:52] ext.data.store / [51:25] ext.list / [52:04] 패널 / [52:37] 정렬버튼 / [53:40] 필터버튼 / [54:34] 결과확인

08 센차터치 서버 연동 2 & 센차터치 응용 1

스크립트 태그, JSONP, SUBMIT, 로컬스토리지, 세션스토리지들에 대해 예제를 만들면서 공부해보고 센처타치를 응용해서 간단한 숫자찾기 게임을 만들어봅니다.

53분

책갈피 : [00:00] 스크립트 태그 사용 / [01:17] target.jsp / [01:53] index.html / [02:05] callscripttag / [02:56] callscripttagfunc / [03:18] 링크 / [03:35] 결과확인 / [04:28] ajaxdata.jsp / [05:09] app.js / [05:29] ext.data.model / [05:51] ext.data.store / [06:46] ext.list / [07:14] 패널 / [07:54] 결과확인 / [08:37] jsonp / [09:46] jsonp의 사용 / [09:55] ajaxdata.jsp / [11:13] 예제 / [11:33] 요소검사 / [11:45] 디벨로터툴 / [11:53] 네트워크 / [12:19] ajaxdata파일 / [12:53] json의 사용 / [13:51] app.js / [14:16] ext.data.model / [14:33] ext.data.jsonp.request / [15:34] ext.data.store / [15:53] 패널 / [16:13] 리스트 / [16:41] 결과확인 / [17:31] submit방식 / [18:36] 예제 / [19:14] submitdata.jsp / [20:13] app.js / [20:23] 패널 / [20:41] 결과확인 / [21:15] items / [21:37] submit버튼 / [23:04] 결과확인 / [23:24] 톰캣콘솔창 / [24:19] 스토리지 / [25:07] 세션스토리지 / [25:21] 로컬스토리지 / [26:00] 주요속성 / [27:12] 모바일에서의 서버와 통신 / [27:36] 예제 / [28:53] index.html / [29:29] 버튼 / [29:54] 버튼함수 / [30:56] 입력창 / [31:15] 출력창 / [31:39] 결과확인 / [32:08] 스토리지의 프록시 / [33:05] 스토리지의 사용 방식 / [33:38] 예제 / [35:34] common.js / [35:49] ext.define / [36:02] ext.data.store / [36:37] app.js / [37:39] 패널 / [37:46] 툴바 / [38:46] jeg.js / [39:17] 패널 / [40:43] list.js / [41:00] 패널 / [41:50] ext.list / [42:20] removeat / [43:11] 결과확인 / [43:44] 응용예제 / [43:55] 예제 / [46:42] gmbutton.js / [47:53] 메소드의 구현 / [48:03] open / [48:22] close / [49:28] toggle / [50:11] show / [51:27] findit / [52:01] eventchange

09 센차터치 응용 2 & 폰갭 소개

숫자찾기 게임의 소스코드를 분석해보고, 폰갭에 대해 공부하기 위해 폰갭 설치와 안드로이드, 아이폰의 개발환경을 알아봅니다. 그리고 폰갭 기본 API들에 배워보고 Accelerometer와 Camerea 예제 프로그램을 만들어봅니다.

48분

책갈피 : [00:00] 강의설명 / [00:23] app.js / [00:42] 라이브러리호출 / [00:59] 게임패널 / [01:43] 버튼 / [02:03] readycard메소드 / [02:48] getlist메소드 / [03:15] 스타일 / [03:49] eventchange / [04:41] readcard메소드 / [05:45] opencard메소드 / [06:30] runtimer메소드 / [07:02] reglistask메소드 / [07:17] reglist메소드 / [07:34] reglistresult메소드 / [07:43] getlist메소드 / [09:05] getmin.jsp / [10:05] 상위10명 카운트코드 / [10:27] 오류처리 / [11:34] game-reg.jsp / [11:49] try catch finally문 / [12:57] game-list.jsp / [13:41] 결과확인 / [14:05] 정리 / [14:25] 폰갭 / [15:12] 안드로이드와 아이폰 / [15:32] 안드로이드 환경,설치 / [16:05] 아이폰 개발환경,설치 / [17:12] 폰갭의 기본 api / [17:40] accelerometer / [18:03] camera / [18:16] capter / [18:35] compass / [18:47] connection / [19:00] contacts / [19:12] device / [19:27] event / [19:35] file / [19:47] geolocation/media/notification/storage / [21:00] 연동방법 / [21:02] accelerometer연동 / [22:59] accelerometer메소드 / [23:51] 새프로젝트 / [24:11] 라이브러리추가 / [24:32] textactivity.java / [24:59] droidgap / [25:39] 오류시import / [26:13] accelerator.html / [27:11] 폰트크기변경 / [28:40] 라이브러리추가경로 / [29:20] 중력가속도제어id선언 / [29:42] addeventlistener / [30:02] ondeviceready / [30:17] starwatch / [30:56] watchid값 / [31:11] stopwatch / [31:32] onsuccess / [32:31] onerror / [33:00] androidmanifest.html / [34:14] 실행 / [35:43] camera메소드 / [36:39] getpicture / [37:15] html / [37:41] camera.html / [37:55] testactivity / [38:28] camera.html / [39:05] 라이브러리연결 / [39:22] 변수선언 / [39:37] 폰갭준비 / [39:53] ondeviceready / [40:27] onphotodatasuccess / [41:12] onphotourlsuccess / [41:45] capturephoto / [42:13] capturephotoedit / [42:39] getphoto / [43:03] onfail / [43:34] 버튼 / [44:42] 실행 / [47:44] html소스확인

10 폰갭의 기본 API 1

Capture, Compass, Connection, Device, Events, File, Geolocation등의 폰갭 기본 API 살펴보고, 예제 프로그램을 만들어봅니다.

50분

책갈피 : [00:00] capture / [00:33] captureaudio / [00:50] captureimage / [01:08] capturevideo / [01:18] mediafile.getformatdata / [02:03] 이클립스 / [02:22] capture.html / [03:11] capturesuccess / [04:12] captureerror / [05:09] captureimage / [05:33] uploadfile / [06:11] result / [06:33] error / [07:01] button / [07:38] 결과확인 / [08:45] compass메소드 / [09:19] getcurrentheading / [09:43] watchheading / [10:10] clearwatch / [10:27] watchheadingfilter / [11:05] textactivity.java / [11:35] compass.html / [12:17] stratwatch / [12:56] watchid / [13:11] stopwatch / [13:37] onsuccess / [13:54] onerror / [14:18] body / [14:57] 결과확인 / [15:48] connection의 속성 / [16:31] unkown / [16:36] ethernet / [16:48] wifi / [16:54] 2g/3g/4g/none / [17:27] connection.html / [18:23] checkconnection / [20:01] body / [20:28] 결과확인 / [21:38] device 속성 / [21:55] device.name / [22:04] cordova / [22:16] platform / [22:24] uuid / [22:47] version / [23:15] device.html / [24:04] ondeviceready / [24:41] body / [24:48] 결과확인 / [26:22] 폰갭이벤트 / [26:53] deviceready / [27:34] pause / [27:45] resume / [28:06] online/offline / [28:16] backbutton / [28:24] batterycritical/low/status / [29:21] botton / [30:26] events.html / [31:31] deviceready / [31:52] button / [32:25] menu button / [32:51] back button / [33:19] 결과확인 / [35:04] file객체 / [35:26] directoryentry/directoryreader / [35:50] file/fileentry/error/reader/system / [36:35] filetransfer/error/uploadoption/result / [37:23] filewriter/flags/localfilesystem/metadata / [38:22] file.html / [39:05] navigator.camera.getpicture / [39:48] uploadphoto / [41:16] 서버로의 전송결과유무 / [42:00] body / [42:20] 결과확인 / [43:57] geolocation / [44:26] getcurrentposition / [44:42] watchposition / [45:00] clearwatch / [45:14] position / [45:28] positionerror / [45:39] coordinates / [46:04] geolocation.html / [46:41] ondeviceready / [46:51] onseccuss / [48:38] onerror / [48:51] body / [49:34] 결과확인

11 폰갭의 기본 API 2 & 플러그인 & 센차터치 연동

Media, Notification, Storage 등의 API를 살펴보고, 플러그인을 추가해서 사용하는 법을 알아봅니다. 그리고 폰갭에서 센차터치를 연동해서 사용하는 법을 살펴봅니다.

47분

책갈피 : [00:00] media메소드 / [00:42] getcurrentposition / [01:03] getduration / [01:20] play/pause/release / [01:39] seekto / [01:57] startrecord/stoprecord/stop / [02:27] 예제 / [02:44] media.html / [03:36] 경로지정 / [03:58] 오디오플레이어생성 / [04:18] if문 / [04:55] 위치표시소스 / [05:17] getcurrentposition / [05:48] 제어소스 / [06:40] success와 error구현 / [07:47] 오디오위치 / [08:04] body / [08:16] 메소드호출 / [09:16] 결과확인 / [10:08] 미디어의 사용 / [10:18] notification / [10:39] alert / [10:55] confirm/beep/vibrate / [11:27] 예제 / [11:51] 폰갭연결 / [12:27] showalert / [13:07] playbeep / [13:24] vibrate / [13:40] body / [14:46] debug / [14:53] 결과확인 / [15:57] storage / [16:26] opendatabase / [16:39] storage의 객체 / [17:28] storage.html / [18:08] demo테이블 / [18:21] 데이터입력 / [18:51] 테이블의 질의 / [19:10] querysuccess / [20:53] errorcb / [21:17] success구현 / [22:04] body / [22:23] 결과확인 / [22:55] 폰갭플러그인 / [23:33] 플러그인준비 / [23:54] childbrowser플러그인 / [24:23] showwebpage메소드 / [24:45] close메소드 / [25:10] 새프로젝트 / [26:19] 라이브러리설치 / [26:54] 파일복사 / [27:33] 복사한 파일 빌드 / [27:44] properties / [28:01] java build path / [28:35] xml폴더복사 / [29:10] mainactivity.java / [30:24] 패키지에 포함 / [30:59] 플러그인설치 / [31:15] 파일복사추가 / [31:59] 패키지생성 / [32:44] config.xml / [33:02] 플러그인추가 / [33:59] androidmanirest.xml / [34:14] user-permission / [34:33] android manirest permission / [35:48] activity / [36:31] index.html / [37:23] 작업내용구현 / [38:07] body / [38:43] 결과확인 / [40:29] 예제의 변경 / [40:35] 폰갭에서의 센차터치사용 / [40:49] 라이브러리추가 / [41:35] 센차터치폴더위치 / [42:09] 꼭필요한 파일 / [42:51] 기본파일 / [43:11] 예제 / [43:34] index.html / [43:50] 경로수정 / [44:19] app.js / [44:43] 내용구현 / [45:09] list작성 / [45:50] items / [46:08] 결과확인

12 센차터치와 폰갭 응용 1

Acclerometer API를 이용한 간단한 게임을 만들어 보고, Camera, Compass, Connection, Deviece 등의 API를 이용하여 센차터치와 연동해서 프로그램을 구현해 봅니다.

53분

책갈피 : [00:00] 응용 / [00:30] 가속도계응용 / [00:44] 게임구현 / [00:52] 예제보기 / [01:21] 구현순서 / [01:51] 라이브러리 / [02:13] index.html / [02:44] app.js / [02:52] 라이브러리포함 / [03:47] enddegree / [04:11] apply / [04:18] before/after / [04:38] 시간지정 / [04:44] 패널생성 / [05:34] 전체적인 패널 / [05:56] 버튼 / [06:17] 회전값 / [06:50] 결과확인 / [07:09] 웹앱으로변경 / [07:54] 파일추가 / [08:23] index.html / [09:07] app.js / [09:35] 라이브러리 경로지정 / [10:11] 폰갭지정 / [10:56] 회전 / [11:16] watchid / [11:33] startwatch / [11:40] 구현 / [12:07] stopwatch / [12:35] 중력가속도 / [13:07] error / [13:21] 결과확인 / [14:30] camera / [15:18] requires / [15:37] launch / [15:47] 패널 / [15:59] 이미지지정 / [16:45] items / [17:18] 이벤트핸들러 / [17:38] camera.getpicture / [18:30] 결과확인 / [18:58] 파일위치 / [19:25] app.js / [19:47] 라이브러리추가 / [20:12] camera.panel / [21:13] picturesource/destinationtype / [21:26] success / [21:43] capturephoto / [22:10] getpicture / [22:18] 결과확인 / [23:21] 캡쳐의 센차터치연동 / [23:49] app.js / [24:07] 라이브러리추가 / [24:15] launch / [24:23] camera.panel / [24:38] 이미지 / [24:50] items / [25:08] capturesuccess / [25:25] captureimage / [25:44] uploadfile / [26:43] 나침반구현 / [27:17] 예제보기 / [28:31] app.js / [28:46] 변수선언 / [29:19] style / [29:53] toolbar / [30:01] 버튼 / [30:48] compass.rotate / [30:51] if문 / [31:24] 결과확인 / [31:53] 이미지복사 / [32:02] app.js / [32:08] 폰갭라이브러리연결 / [32:31] compass.panel / [32:58] watchid / [33:23] startwatch / [33:55] stopwatch / [34:12] onsuccess / [34:42] onerror / [34:51] compass.rotate / [35:17] 결과확인 / [36:11] 통신상태체크 / [37:04] connection / [37:22] 예제보기 / [38:02] app.js / [38:17] overlaytoobar / [38:38] overlay / [39:02] dockeditems / [39:57] 전체적패널 / [40:08] html / [40:20] 결과확인 / [41:01] app.js / [41:22] 라이브러리 / [41:40] overlaytoolbar / [41:57] overlay / [42:41] checkconnection / [43:37] 결과확인 / [44:35] 폰정보조회 / [44:55] 예제보기 / [45:40] app.js / [46:10] button / [46:30] overlay / [47:00] overlaytoolbar / [47:43] 이벤트 / [48:33] 내용구현 / [48:56] app.js / [49:52] button / [50:05] div / [50:23] id값 / [50:35] 패널생성 / [50:54] 이벤트발생 / [51:14] ondeviceready / [52:15] 결과확인

13 센차터치와 폰갭 응용 2

Event, File, Geolocation, Notification API를 이용해서 센차터치 화면을 구성해보고, 간단한 Media Player를 만들어봅니다.

52분

책갈피 : [00:00] 버튼변환 / [00:21] html / [00:44] 뒤로가기 / [01:28] 예제보기 / [02:46] app.js / [03:03] items / [03:18] 이미지경로 / [03:38] listeners / [03:46] toolbar / [04:19] 폰갭연동 / [04:42] 파일이동 / [04:53] app.js / [05:17] launch / [05:33] 라이브러리호출 / [05:47] items / [06:04] 패널생성 / [06:33] ondeviceready / [06:48] addeventlistener / [06:52] onmenubutton / [07:52] 결과확인 / [08:59] 모바일파일 탐색기 / [09:55] 예제보기 / [10:49] app.js / [11:06] filelist / [11:20] orgdata / [11:31] storefilelist / [12:01] 패널생성 / [12:47] xtype / [12:52] itemtpl / [13:33] 구현 / [13:46] app.js / [14:13] launch / [14:21] parentpath / [14:39] orgdata / [15:04] itemtemplate / [15:35] file.panel / [16:10] list / [16:26] if문 / [16:44] file.getdir / [16:58] onupload / [17:16] successdir / [17:36] faildir / [18:07] successfilesystem / [18:28] getdir / [18:40] ondeviceready / [18:58] uploadphoto / [19:18] console / [19:31] 결과확인 / [21:07] 주변지도보기 / [21:43] index.html / [22:05] style / [22:31] apikey / [23:01] body / [23:29] app.js / [23:43] launch / [23:48] 패널생성 / [23:58] items / [24:48] 맵의 위치초기화 / [25:03] 이미지연결 / [25:17] init / [25:44] 컨트롤러추가 / [26:14] circle / [26:42] 이벤트 / [26:52] 크롬확인 / [27:44] 폰갭연동 / [28:33] index.html / [29:05] 파일경로확인 / [29:18] app.js / [29:35] 라이브러리추가 / [29:47] launch / [30:08] style / [30:16] mmap / [30:35] 이미지파일 / [30:47] init / [31:08] circle / [31:27] marker / [32:04] onsearchmap / [32:46] onsuccess / [33:14] onerror / [33:31] 결과확인 / [34:37] media구현 / [35:22] 예제보기 / [36:28] app.js / [37:03] media.panel / [37:36] playaudio / [38:14] fieldset / [39:10] playaudio구현 / [39:55] pauseaudio / [40:29] 결과확인 / [40:43] 폰갭연동 / [40:56] index.html / [41:20] app.js / [41:33] 라이브러리 / [42:04] 패널생성 / [43:04] 변수선언 / [43:21] playaudio / [43:28] if문 / [44:03] play메소드호출 / [44:58] pauseaudio / [45:13] stopaudio / [45:36] onsuccess / [45:55] error / [46:12] setaudioposition / [46:31] 결과확인 / [48:04] notification api구현 / [48:38] app.js / [49:00] 패널생성 / [49:23] items / [50:29] 내용구현 / [50:43] showalert / [50:57] playbeep / [51:08] vibrate / [51:43] 결과확인

14 센차터치와 폰갭 응용 3 & SQLite 제어

센차터치와 Storage API를 연동해서 데이터 조회 화면을 만들어보고, 센차터치 MVC 애플리케이션과 폰갭을 결합시켜 사용해보고, 안드로이드 SQLite에 대해 알아본 후 연동을 구현해 봅니다.

49분

책갈피 : [00:00] storage api / [00:55] app.js / [01:20] 라이브러리추가 / [01:30] telllist / [01:40] orgdata / [01:48] storestage / [02:20] storage.panel / [02:38] items / [03:28] populatedb / [03:47] 테이블질의 / [04:02] querysuccess / [04:42] for문 / [05:19] errorcb/successcb / [05:44] ondeviceready / [05:59] 결과확인 / [06:44] mvc와 폰갭 / [07:32] 파일구조 / [09:15] 에디터프로그램 / [09:29] index.html / [10:06] app.js / [11:21] filelist.js / [11:43] itemtpl / [12:49] fileview.js / [13:22] xtype / [13:26] requires / [13:40] config / [14:30] filemodel.js / [14:55] filestore.js / [15:41] filecontroller.js / [15:55] this / [16:24] config / [16:53] launch / [17:38] 내용구현 / [18:03] onfilelist / [18:41] list / [19:03] alert / [19:26] startphonegap / [19:49] uploadphoto / [20:29] 결과확인 / [22:53] 모바일하이브리드프레임워크 / [23:28] 웹뷰 / [24:16] vt클래스 / [24:43] 안드로이드sqlite / [25:04] 특징 / [25:40] 장점 / [25:56] 연동 / [26:14] 메소드 / [26:21] oncreate / [26:39] onupgrade / [27:02] onopen / [27:14] getreadabledatabase / [27:19] getwriteabledatabase / [27:31] close / [28:09] 프로젝트생성 / [29:19] main.xml / [29:36] composite / [29:46] webview / [30:09] 소스코드보기 / [30:36] 권한추가 / [30:53] android manifest / [31:08] 소스코드확인 / [31:52] 소스추가 / [32:19] permissions값 / [32:33] 권한추가 / [33:07] 추가소스확인 / [33:18] 권한추가 / [34:20] 소스확인 / [35:27] 결과보기 / [37:16] 소스보기 / [37:37] main.xml과 연동 / [37:55] 웹크롬클라이언트 / [38:33] package / [38:59] import / [39:12] 웹패키지import / [39:33] 연동패키지import / [40:10] prgrbar / [40:27] titlebar제거 / [40:39] 웹뷰의 속성설정 / [41:17] 웹크롬클라이언트 / [41:35] scroll기능제어 / [41:56] 초기화면지정 / [42:40] override / [42:52] chromeclient / [43:13] confirm / [43:26] prgrbar / [43:52] error처리 / [44:11] nativebridge / [44:59] querysql / [45:07] try문 / [46:07] if문 / [46:23] catch / [46:42] error / [46:58] finally / [47:14] 브릿지메소드 / [47:25] try catch문 / [47:47] finally / [48:21] 경로확인 / [48:57] 에러확인

15 SQLite의 사용과 센차터치 네이티브 팩킹

SQLite를 사용하여 DB를 저장하고, 조회하는 프로그램을 만들어보고, 센차터치 SDK툴을 사용하는 센차터치2의 네이티브 팩킹에 대해 공부해 봅니다.

51분

책갈피 : [00:00] activity.java / [00:28] 클래스추가 / [00:58] testdb.java / [01:22] table과 column / [01:55] 필드구성 / [02:43] 클래스만들기 / [02:56] 소스복사 / [03:14] 파일생성 / [03:44] dbhelper.java / [04:02] import / [04:24] 클래스생성 / [04:38] sqlliteopenhelper / [05:03] test.db와 버전설정 / [05:14] db생성 / [05:33] 메소드 / [05:47] oncreate / [06:12] onupgrade / [06:38] onopen / [07:47] 폴더생성 / [08:16] indexhtml.html생성 / [08:42] hybrid.js연동 / [09:05] quary문 호출 / [10:10] hybrid.js / [10:47] nativebridge / [11:10] sql함수정의 / [11:42] 결과확인 / [12:55] hybrid sqlite파일구조 / [13:00] app.js / [13:11] reg.js / [13:19] list.js/search.js/result.js / [13:47] index.html / [14:31] app.js / [15:14] requires / [15:21] launch / [15:46] 구현 / [15:52] main.init / [16:24] button / [17:06] toolbar / [17:29] reg.js / [17:42] panel-reg / [18:09] fieldset / [18:27] items / [19:21] button / [19:39] 쿼리문 / [20:48] receivesql / [21:04] errorsql / [21:27] list.js / [21:34] carousel / [22:00] panel-list / [22:26] search.js / [22:46] panel-search / [22:56] layout / [23:15] textfield / [23:36] button / [23:49] 쿼리문 / [24:21] 주석부분 / [24:39] sql지정 / [25:02] result.js / [25:27] userstore / [25:34] userlist / [25:53] panel-result / [26:38] 파일복사 / [27:08] 초기화면지정 / [27:40] 경로지정 / [28:05] 폴더복사 / [28:29] 클래스와 파일이름 수정 / [29:03] 결과확인 / [30:15] 네이티브팩킹 / [31:03] 필요툴 / [31:33] sencha cmd / [32:02] 명령프롬프트창 / [32:12] cmd버전과 내용들확인 / [32:48] 앱생성 / [33:02] 폴더설정 / [33:14] 명령어입력 / [33:38] generate / [34:04] 결과확인 / [35:01] 폴더확인 / [35:41] 크롬에서 실행 / [35:58] 기본앱의 구조 / [37:12] index.html / [37:49] app폴더 / [38:17] app.js / [38:57] ext.application / [39:04] requires / [39:35] app.json / [39:47] packager.json / [40:25] main.js / [40:37] 라이브러리추가 / [40:53] title수정 / [41:19] html내용변경 / [41:51] 결과확인 / [42:27] 명령프롬프트 / [42:49] build testing / [43:33] 생성된 폴더확인 / [44:04] production생성 / [44:28] 폴더확인 / [44:46] native생성 / [44:58] 폴더확인 / [45:25] packager.json / [45:57] 안드로이드에 맞게 변경 / [46:35] sdkpath / [47:09] 경로수정 / [47:47] 인증서 / [48:11] 명령프롬프트 / [48:18] 명령어작성 / [49:43] build native / [50:10] 폴더확인

샘플확인 : 알지오 검색후 -> 강의검색란 -> Sencha Touch2