- 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.1시간 18분 MVC예제와 센차터치 기본 컴퍼넌트 1
MVC아키텍쳐에 대해 예제 프로그램을 만들어보고, 패널과 레이아웃, 템플릿, 폼, 컴포넌트등 센처터치 기본 컴퍼넌트들에 대해 공부해봅니다.
책갈피 : [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.48분 센차터치 기본 컴포넌트 2
툴바,탭바, 아이콘의 사용과 이벤트의 사용, 그리고 카루젤에 대해 알아보고, 데이터 뷰와 리스트에 대해서도 공부하면서 예제들을 만들어봅니다.
책갈피 : [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.52분 센차터치 기본 컴퍼넌트 3
NestedList, 리스트풀, 메시지창, 마스크, 픽커, 액션시트, 오버레이와 같은 기본 컴포넌트들에 대해 알아보고, 패널의 호출을 이용한 페이지 이동 방법에 대해 공부해봅니다.
책갈피 : [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.53분 센차터치 기본 컴퍼넌트 4 & 센처터치 디자인
카드 레이아웃을 이용한 페이지의 이동에 대해 알아보고, 페이지 이동시에 값을 전달하는 방법과 NavigationView, 애니메이션, 그리고 센차터치 테마에 대해 배워봅니다.
책갈피 : [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.48분 터치차트와 센차터치 웹앱 1
터치차트에 대해 알아보고, 영역, 바, 파이, 라인 차트등에 대해 예제를 통해 공부해봅니다. 그리고 센차터치에세 오디오나 비디오, 지도를 제어하는 방법에 대해서도 알아봅니다.
책갈피 : [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.55분 센차터치 웹앱 2 & 서버 연동 1
센차터치에서 다음맵을 제어하는 방법을 알아보고, 센차터치와 서버를 연동하는 법에 대해 공부하면서 XML데이터 사용이나, Sorter,Filter의 사용법을 배워봅니다.
책갈피 : [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.53분 센차터치 서버 연동 2 & 센차터치 응용 1
스크립트 태그, JSONP, SUBMIT, 로컬스토리지, 세션스토리지들에 대해 예제를 만들면서 공부해보고 센처타치를 응용해서 간단한 숫자찾기 게임을 만들어봅니다.
책갈피 : [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.48분 센차터치 응용 2 & 폰갭 소개
숫자찾기 게임의 소스코드를 분석해보고, 폰갭에 대해 공부하기 위해 폰갭 설치와 안드로이드, 아이폰의 개발환경을 알아봅니다. 그리고 폰갭 기본 API들에 배워보고 Accelerometer와 Camerea 예제 프로그램을 만들어봅니다.
책갈피 : [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.50분 폰갭의 기본 API 1
Capture, Compass, Connection, Device, Events, File, Geolocation등의 폰갭 기본 API 살펴보고, 예제 프로그램을 만들어봅니다.
책갈피 : [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.47분 폰갭의 기본 API 2 & 플러그인 & 센차터치 연동
Media, Notification, Storage 등의 API를 살펴보고, 플러그인을 추가해서 사용하는 법을 알아봅니다. 그리고 폰갭에서 센차터치를 연동해서 사용하는 법을 살펴봅니다.
책갈피 : [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.53분 센차터치와 폰갭 응용 1
Acclerometer API를 이용한 간단한 게임을 만들어 보고, Camera, Compass, Connection, Deviece 등의 API를 이용하여 센차터치와 연동해서 프로그램을 구현해 봅니다.
책갈피 : [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.52분 센차터치와 폰갭 응용 2
Event, File, Geolocation, Notification API를 이용해서 센차터치 화면을 구성해보고, 간단한 Media Player를 만들어봅니다.
책갈피 : [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.49분 센차터치와 폰갭 응용 3 & SQLite 제어
센차터치와 Storage API를 연동해서 데이터 조회 화면을 만들어보고, 센차터치 MVC 애플리케이션과 폰갭을 결합시켜 사용해보고, 안드로이드 SQLite에 대해 알아본 후 연동을 구현해 봅니다.
책갈피 : [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.51분 SQLite의 사용과 센차터치 네이티브 팩킹
SQLite를 사용하여 DB를 저장하고, 조회하는 프로그램을 만들어보고, 센차터치 SDK툴을 사용하는 센차터치2의 네이티브 팩킹에 대해 공부해 봅니다.
책갈피 : [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] 폴더확인
'추천강의' 카테고리의 다른 글
| 폰갭 교육 강의 추천 (0) | 2017.11.07 |
|---|---|
| 센차 아키텍트 학원 강좌 (0) | 2017.11.07 |
| Nmap 강의 추천 (0) | 2017.11.07 |
| Mybatis 교육 강좌 (0) | 2017.11.07 |
| 안드로이드 NDK 강좌 리뷰 (0) | 2017.11.07 |