Appspresso(앱스프레소) - Pim (연락처)

중요한 연락처 정보를 제어하는 예제입니다.
아~ 아이폰 처음 사고 동기화하면서 연락처 엄청나게 날렸었던 아픈 기억이.ㅋㅋ

이번에도 index.html에서 부터 따라가 보겠습니다.
 

pim.html 로 가보면,
아래와 같이 세개의 항목으로 구성되어 있습니다.
Calendar와 Task 기능은 아직 제공되지 않네요. 우리의 목적인 연락처 링크 페이지를 따라가 보겠습니다.

하나의 리스트 항목만 덩그러니 있군요.
이벤트도 없는듯 하니 해당 페이지와 연결된 js파일을 찾아보겠습니다.

js/pim-contract.js가 보이니 열어봅니다.
상당히 긴 getContacts()함수가 정의되어 있군요.
내용은 리스트를 초기화하고 연락처 api를 호출해서 결과값을 배열로 받아옵니다.
10개의 연락처를 가져와 이름과 전화번호를 리스트 항목으로 추가하고, 리스트를 refresh해줌으로서 변경사항을 반영하네요.
그리고, 연락처 항목을 클릭하면 상세정보 화면으로 보이는 페이지로 이동하도록 링크도 있습니다.

연락처를 클릭했다고 치고, 연락처 상세 링크 html을 열어봅니다.
edit와 delete 항목이 보이네요. 삭제는 함수 호출이고 수정은 또 다른 html로 링크되어 있네요.

수정화면 html을 열어보면, 이름을 수정할 수 있는 입력란과 저장하는 버튼과 취소 버튼이 보입니다.
이제 함수들을 하나씩 찾아가 보겠습니다.

아래는 연락처를 수정하는 함수입니다.
연락처 배열에서 선택된 인덱스의 정보를 찾아 이름을 셋팅하고,
핸드폰 번호는 가져오기만 하네요.^^

연락처를 저장하는 함수입니다.
입력받은 이름 정보를 연락처에 셋팅하고 updateContact 함수를 호출하여 저장합니다.

연락처를 삭제하는 함수입니다.
삭제하기 전에 사용자에게 확인(confirm) 받는 창을 띄워주고,
사용자의 승인을 받아 deleteContact 함수를 호출하여 해당 연락처를 삭제하고, 이전 화면으로 돌아가도록 되어 있군요.

연락처 상세화면의 함수입니다.
선택된 연락처의 이름과 전화번호를 리스트에 셋팅하고 refresh 해줍니다.

아이폰 시뮬레이터에서 연락처를 등록하고, 실행시켜 본 화면입니다.
연락처에서 첫번째 연락처를 수정하고 삭제하는 화면입니다.