[펌] Sencha Touch 2.0.1 + Daum 지도를 이용한 누비자 정보보기 - 로그인창 만들기
|
(최종 결과 물)
*** 이 페이지는 제가 초보적인 수준에서 작성된 게시물이며,
그냥 지워 버릴까 생각하다가 이 게시물을 보면서
다시 한번 맘 가짐을 고치기 위해 보관 중입니다.
Sencha touch 를 공부 하시는 분들 이 게시물은
초보적인 도움뿐이 안됩니다.
다른 게시물을 이용하기 바랍니다.
하이브리드 앱을 만들기 위해서 이것 저것 기웃 거리다 Sencha Touch 2.0.1 을 이용해 보기로 했다.
1. 로그인창 만들기
로그인창은 즐겨찾기 등에 대한 정보를 개인 모바일 기기가 아닌 서버에 저장하고
다른 모바일 기기에서도 굳이 새로 등록 하는게 아니라 ID / PW 를 이용하여 동일하게
적용하기 위함.
목표 : 1. E-mail / Password 입력 받기
2. Button 클릭으로 localStorage에 저장해서 다음에 재 사용하기...
우선 기본적인 개발 환경이 준비 되었다고 가정하고 시작함.
Sencha 는 나름 MVC 모델을 이용하여 프로그램을 할 수 있음.
MVC 모델에 자세한 사항은 네이버 검색을 이용하면 됨.
위 목표를 완료 하기 위해서는 우선
HTML 페이지를 하나 만들어 야 한다.
파일명 : index.html
<html>
<head>
<meta charset="utf-8">
<!-- Sencha Touch CSS -->
<link rel="stylesheet" href="./css/sencha-touch.css" type="text/css"> <!-- Sencha Touch 에 사용되는 CSS 파일 -->
<!-- Sencha Touch JS -->
<script type="text/javascript" src="./js/sencha-touch-all-debug.js"></script><!-- Sencha Touch 에 Import -->
<!-- Application JS -->
<script type="text/javascript" src="./js/app.js"></script> <!-- Sencha Touch 의 Application -->
<script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=다음지도API 키"></script>
<!-- 다음 지도 api 를 import 하기 위한 구문이며 apikey 는 다음 개발자 사이트에서 신청해서 사용함 -->
</head>
<body></body>
</html>
위 소스가 HTML 소스의 전부 이다.
그리고 application Script 파일을 작성해야 함.
파일명 : app.js
Ext.application({
name: 'Nubija', <!-- 봐서 알겠지만 최종목표는 다음지도를 이용한 누비자 터미널 정보를 보는것이다. -->
appFolder: './js/app',
<!-- Html 파일이 있는 홈의 하위 폴더 인 "./js/app" 하위에 view / controller / model 폴더가 존재 해야 함. -->
views: ['LoginView'],
<!-- Sencha Touch 의 View 파일 설정함 -->
controllers: ['LoginController'],
<!-- Sencha Touch 의 Controller 파일 설정함 -->
launch: function() { <!-- launch 는 페이지가 모두 로딩되고 application 이 실행되면서 { .. } 안에 문장 수행 -->
Ext.create('LoginView'); <!-- Ext.create 명령을 이용하여 View 생성 -->
}
});
끝. 일단 여기 까지 하면 대강 로그인 창을 만들수 있다.
담에는 다음 지도를 화면에 표시 하는 방법에 대해서 해야 겠다.
PS : 위에서 언급한 꼼수...
위 프로그램을 실행 하고 크롬의 개발자 도구를 이용하여 Element 기능을 이용하여 ID 를 찾았다.
소스가 바뀌지 않는 이용 Sencha touch 에서 자동 생성하는 id 값은 변경 되지 않는다. 아마도...
