폰갭 , 메인페이지와 메뉴 개발

폰갭 메뉴 구성

폰갭은 html와 js로 구성되어 있다고 지난번 강의에서 이야기 했다.
그럼 어떻게 메뉴를 구성하고 있는지 봐야 될것 같아서 오늘은 폰갭 개발 원리를 이야기 하고 한다.

우리가 홈페이지에서는 일반적으로 하이퍼링크를 이용한다. <a href=""></a> 태그를 이용해서 메뉴를 이동하게 되는데 폰갭에서는 조금 다른 구성으로 제작된다. 개개인마다 다르지만 필자의 경험에서 이야기를 풀어 간다.

위 다이어 그램은  index.html 을 만들때 메뉴와 컨텐츠 영역을 나누어서 제작된다. 그리고 메뉴를 클릭하게 되면 #main_contents를 변경하는것이다. 

조금 생소하기는 하지만 홈페이지 제작에서도 많이 사용되는 기법이다.

메뉴 아이콘 마다 별도의 html을 가져와서 컨텐츠 영역에 바꿔 버리는 방법이다.

그림을 보면 클릭한후 서버에 별도의 컨텐츠를 php나 여러 방법으로 제작해 놓고 가져와서 폰갭의 콘텐츠 영역에 표시한다. 

그럼 서버의 컨텐츠는 어떻게 가져오는가 ?

이 부분은 일반적인 홈페이지에서 최근 게시물이나 사진을 뽑는것과 같다. jquery를 활용해서 html를 가져오는것이다. 대신 사진같은 겨우는 주소를 끝까지 기입해 줘야 한다.

<img src="img/사진">

 이렇게 가져오면 사진이 노출되지 않는다. 폰갭에서 실행되기 때문에 이부분은 폰갭 내부에서 사진을 서버 사진이 나오도록 사진 전체 주소를 가져올수 있도록 개발해 줘야 한다.

<img src="http://서버주소/img/사진">

물론 모든 링크도 같은 방법이다. 폰갭에서 html이 실행된다는 점은 꼭 기억해야 한다.

메뉴 클릭 이벤트시 컨텐츠 영역을 바뀌게 하는 메뉴의 자바 스크립트 부분이다. jquery를 활용해서 개발하면 상당히 편하게 개발 가능하다.

필자가 개발할때는 거의 index.html 하나만 두고 그외는 js에서 처리하고 있다. 그럼 index.html 페이지가 거의 새로고침없이 어플 전체에서 실행된다. 

이 방법은 홈페이지 개발에서도 많이 사용되는 기법이다. 페이스북이나 여러 sns에서 보면 새로운 글이 등록되면 새로 갱신될때 새로고침없이 갱신될때 보면 이런 방법으로 이용된다.

$("#main_contents").html(내용);

위 소스는 jquery 을 이용한 개발에서 가장 많이 사용된다.