센차터치2
모든 모바일 기기에서 동작하는 애플리케이션의 개발을 원하는 분들이 수강하면 좋습니다. 웹앱을 만드는 방법과 언어에서 다루고 있는 기능을 예제와 함께 실습할수 있어 효율적으로 학습할수 있습니다. html5 css, javascript의 기본개념이 잡혀있어야 효과적인 학습결과를 얻을 수 있습니다.
-
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] 폴더확인
센차 아키텍트8시간 24분
폰갭8시간 53분