폰갭 , TODO 어플 개발 실전 - 틀만들기
폰갭 개발 실전 틀만들기 프레임워크를 활용하여 어플 틀을 만들어 보자
지난번 TODO에 대한 강의를 시작하고 실전개발에 대해 이야기 하고자 한다.
먼저 지난번 기획서 형식대로 진행할 예정이다.
화면 구성을 보면 기본적으로는 위 그림과 같은 구조로 동작한다.
TODO 어플을 실행하면 + 버튼으로 카테고리를 입력하고 그 카테고리를 선택하면 할일을 입력하도록 처리 했다.
이 순서와 수정 삭제등이 있는데 이번 강의는 기본 구성에 대한 부분을 강의하기로 한다.
위 그림과 같이 카테고리를 선택하면 그 카테고리 화면으로 이동한다. 이때는 모달을 사용한다.
위 화면과 같이 제작하는데 하나씩 구성요소를 보면 될것 같다.
프레임 워크 이용
필자의 경우 틀에 사용하는 프레임 워크와 이벤트에 사용하는 프레임 워크를 나누어 사용하고 있다. 2개의 프레임 워크로 개발한다.
모바일을 위한 프레임 워크 이다. 기본적은 화면 틀을 만들때 사용하고 있다.
https://getuikit.com/v2/
화면의 구성들을 위해 사용하는 프레임 워크 이다.
이 두프레임 워크를 이용하면 편리하게 폰갭에서 어플이 개발이 가능하다.
화면 구성
화면 구성을 보면 HEAD 영역과 CONTENTS 영역을 나누어서 제작한다.
HEAD 영역
<header class="bar bar-nav"><a class="icon icon-more-vertical pull-right" data-uk-offcanvas="{target:'#offcanvas-help'}"></a> <button class="btn pull-right" onclick="toggle_check()"> 수정/삭제 </button> <h1 class="title">My TODO</h1></header>
해더 부분은 타이틀과 버튼으로 구성되어 있다.
위 태그로 HEAD를 구축할수 있다. 생각보다 간단하게 구성이 가능하며 여러가지 조합도 가능하다.
프레임 워크에 CSS와 JS가 미리 정의 되어 있어서 개발에 집중하면 된다.
결과물은 상당에 이런 타이틀이 구성되고 타이틀은 고정되어 있다.
콘텐츠 부분은 스크롤 되는 공간을 확보하면 된다.
<div id="main_contents" style="overflow-y: auto; width:100%; height:100%; padding-bottom: 100px;"></div>
div의 id값을 main_contents로 하고 스타일에 새로 스크롤이 가능하도록 했다. 아래쪽 100px 여백을 준것 뒤 설명하겠지만 head에서 밀린 영역을 처리하기 위해서 이다.
이렇게 조합하여 만든 페이지가 어플 메인 페이지가 된다.
그리고 추가 버튼의 경우 간단하게 넣을수 있다. 항상 저자리에 고장되어 있어야 하고 스크롤에 영향이 없어야 한다.
<span style="position: fixed; bottom:10px; right:10px; border:1px #FF8000 solid; padding: 15px; background-color: #FF8000; color: #fff; font-weight: bold;" class="icon icon-plus circle_pic content-padded" id="input_category_btn" onclick="input_category();"></span>
입력 버튼을 처리한 코드이다. 이렇게 하면 서비스 화면을 구성하는 기본적인 틀이 완성된다.
위 화면에서 카테고리 목록은 ajax로 서버에서 가져와서 #main_contents 에 넣어 주면 된다.
