Appspresso(앱스프레소) - File explorer (파일 탐색기)

이번에는 파일 탐색기 예제를 살펴 보겠습니다.
파일 제어 기능의 결정판인듯 싶네요.^^

최초 index.html부터 보겠습니다.

 
파일시스템 데모의 링크를 따라가 보겠습니다.

첫번째 파일 읽고 쓰기는 앞에서 살펴봤으니, 이번에는 두번째 항목인 explorer 링크를 따라가 보겠습니다.

index.js를 보면 페이지 이벤트와 함께 아래 함수가 호출됩니다.
디렉토리를 지정하고 있고, 기본 파라미터를 등록하고 있네요.
root디렉토리와 파일 탐색기를 보여줄 target 요소를 지정하고 있습니다.
핵심인 fileExplorer객체를 살펴보겠습니다.

 
js/file-explorer.js를 열어보면 fileExplorer객체가 정의되어 있습니다.
this객체의 init함수를 호출하는군요.

아래부분에 정의되어 있는 init함수를 보겠습니다.
파라미터 객체를 인수로 받아서 객체의 맴버변수를 초기화 하고,  root 디렉토리로 지정되어 있으니
getRootList()함수를 호출할 것 같습니다.

 
파일의 아래방향으로 스크롤을 내려보면,  getRootList 함수가 정의되어 있습니다.
initparam에서 넘겨져온 rootDir의 배열만큼 아이콘을 셋팅하고,  클릭 이벤트가 등록된 리스트 항목으로 html 요소를 만들어서
타겟으로 지정된 요소의 위치에 추가하고 refresh 해줌으로서 루트 디렉토리의 탐색기 리스트를 보여줍니다.
각 항목을 클릭하면 getSubList 함수가 호출되겠죠~  이후부터는 직접 보시면서 분석해보세요. 

  
시뮬레이터에서 실행한 아이폰 화면을 보겠습니다.