JQuery Mobile - Ajax, hashes & history 01 -

jQuery Mobile's navigation model

jQuery Mobile 에서 page는 data-role 어트리뷰트를 page로 세팅한 엘리먼트(대개 div)로 구성됩니다. header,content,footer라는 role과 함께 div 엘리먼트를 주로 사용하게 되는데 일반적인 마크업이나 form 그리고 jQuery Mobile 위젯들을 포함하고 있습니다.

page 로딩의 기본적인 흐름은 아래와 같습니다.
첫째로 페이지는 일반적인 HTTP request 로 request 됩니다. 그리고 나서 그 다음 page들이 request 되고 page의 DOM으로 inject 됩니다. 그래서 DOM은 한번에 그 안에 여러개의 page들을 가지고 있게 됩니다. 그 페이지들은 data-url 어트리뷰트의 링크를 통해 re-visited 될 수 있습니다.

url이 initially request 됐을 때 그 response로 한개 이상의 page들이 있을 겁니다. 그 중에서 가장 첫번째 page가 보여집니다. 한개 이상의 페이지를 저장하는 것의 장점은 다시 방문할 가능성이 있는 page들에 대해 pre-fetch 할 수 있다는 것입니다.

Hash and Ajax driven page navigation

디폴트로 jQuery Mobile의 모든 navigation은 location.hash를 바꾸고 업데이트 하는 방법을 사용합니다. page change는 현재의 page와 다음 page 간의 부드러운 화면 전환을 할 수 있도록 해 줍니다. 그것이 DOM에 있는 페이지 이든 아니든 Ajax를 통해서 자동적으로 로드 됩니다.

jQuery Mobile에 의해 생성된 해쉬값들은 로드된 첫번째 실제 페이지의 URL과 연관된 full path를 사용합니다. 해쉬는 언제나 valid URL로서 유지가 됩니다. 그래서 jQuery Mobile의 어떤 페이지라도 즐겨찾기를 하거나 link로 연결할 수 있습니다. non-hash-based URL을 retrieve 하려면 간단하게 그 주세에서 #를 없애고 page를 refresh 하면 됩니다.

일반적으로 hash changes는 jQuery mobile에서 링크가 클릭 됐을 때마다 생성됩니다. 링크가 클릭되면 jQuery mobile은 그 링크가 local URL을 참조하고 있다는 것을 확인하고 만약 그렇다면 링크의 디폴트 click behavior를 Ajax를 통해서 url이 참조되도록하는 request나 상황이 일어나지 않도록 방지하게 도비니다 . 페이지가 성공적으로 return 되면 새 페이지의 relative url로 location.hash가 새로 세팅될겁니다.

click이외에 독립적으로 hash changes가 일어나는 경우, 예를 들어 유저가 back 버튼을 클릭했을 때라던지 할 때는 hashchange event에 의해 처리 됩니다. 이것은 Ben Alman의 hashchange special event plugin (jQuery Mobile에 include 돼 있음)를 사용해서 window object를 bound 합니다. hash change 가 일어나면 (혹은 첫번째 페이지가 로드될 때) hashchange event handler는 location.hase를 $.mobile.changePage() function으로 전달할 겁니다. $.mobile.changePage() function는 참조페이지를 로드하던가 reveal 하게 됩니다.

한번 그 참조 페이지가 DOM에 탑재되게 되면 $.mobile.changePage() function은 현재 active page와 새로운 페이지 사이에서 화면전환을 적용시키게 됩니다. Page transition은 CSS 애니메이션을 추가하거나 remove 함으로서 작동시키게 됩니다. 예를 들어 slide-left transition은 현재 페이지에는 "slideleft" 클래스를 적용하게 되고 그 다음에 "out" 하게 됩니다. 그리고 새로오는 페이지에는 slideleft 와 in 클래스가 적용 됩니다. 그리고 ui-page-active 도 새로 적용되서 새로운 페이지가 보여지도록 mark를 합니다. 이 애니메이션이 완료되면 in 과 out 클래스들은 remove 됩니다. 그리고 원래 있던 페이지는 ui-page-active 를 잃게 됩니다.




pushState plugin

이것은 옵션 기능인데요, 조금 전에 언급했던 hash-based URL 보다 긴 full document path를 다루고 URL structure에 Ajax tracking transparent를 만듭니다. 이것은 Ajax 링크에 대한 hash-based URL system 의 top에서 좀 더 enhance 된 기능을 제공하려고 만들어 졌습니다. 이름은 이렇지만 이 기능은 현재 버전에서는 기술적으로 history.replaceState (not history.pushState)을 사용해서 hash-based urls을 convert 한다는 것을 유념해 두세요. history.replaceState 를 지원하지 않는 브라우저나 이 기능이 가능하지 않은 경우에는 hash-based URL이 대신 사용될 겁니다.


DOM이 full 로드 됐을 때 플러그인이 initialize 되면 글로벌 configuration option 인 $.mobile.pushStateEnabled 를 document가 준비되기 전에 언제든지 false로 세팅함으로서 이것을 enable 시키거나 disable 시킬 수 있습니다.


Important: rel="external" and $.mobile.ajaxEnabled=false

다양한 브라우저에서 replaceState API의 약간 다른 implementation은 특정 상황에서 이상하게 동작할 수도 있습니다. 예를 들어 어떤 브라우저(데스크탑 브라우저도 포함해서)의 implementation은 외부 링크일 경우나 링크가 이미 pushed/replaced 상태인 페이지로 move back 할 경우  popstate event 가 다르게 implement 됩니다. ajax navigation이 명시적으로 disable 된 jQuery Mobile 어플리케이션이 빌드 될 때 pushState feature 를 disable 시키라고 권고 합니다. 이는 hash based navigation의 좀 더 나은 consistent를 유지할 수 있도록 하기 위해서 입니다. - ajax navigation은 링크에 rel="external" 을 사용해서 disable 시킬수도 있고 $.mobile.ajaxEnabled=false 를 통해서 Ajax navigation을 완전히 disable 시킬 수도 있습니다. -

changePage

프레임워크에서 page changes는 - 페이지가 DOM에 이미 있던지 Ajax를 통해서 로드될 필요가 있던지 - $.mobile.changePage() 함수를 사용합니다. $.mobile.changePage() 에는 페이지를 transition 하는데 필요한 모든 로직이 있습니다. 그리고 page not found 같은 다양한 response 상태에 대해 어떻게 handle 할지에 대해서도 포함하고 있습니다.




$.mobile.changePage()는 externally call 될 수 있고 다음과 같은 argument들을 받을 수 있습니다. (to, transition, back, changeHash). to argument는 스트링(file url, local emdment의 ID 등), 배열(배열의 첫번째 아이템은 화면 전환할 from 페이지이고 두번째 아이템은 to 페이지 임) 혹은 객체(with expected properties: url, type ("get" or "post"), and data (for serialized parameters))를 받을 수 있습니다. 후자의 것은 form data이 경우에 유용하게 페이지를 로딩할 수 있습니다. transition argument는 slide 같이 transition 이름을 스트링으로 받습니다. 그리고 back argument는 transition이 순방향으로 진행할지 역방향으로 진행할지를 boolean을 통해서 지정할 수 있습니다. 마지막으로 changHash argument는 url이 성공적으로 페이지가 변환 된것에 따라 update 할지 여부에 대해 boolean을 사용해서 정합니다.

$.mobile.changePage() function은 jQuery Mobile에서 아주 많이 사용됩니다. 예를 들어 링크가 클릭 됐을 때 그것의 href attribute가 normalize 되고 나서 $.mobile.changePage() 이 나머지를 처리합니다. form 이 submit 됐을 때는 jQury Mobile은 아누 간단하게 몇개의 form의 attribute를 수집합니다. 그리고 그것을 serialize 하고 다시한번 $.mobile.changePage()이 submission과 response를 처리합니다. 또한 dialog를 생성하는 링크도 $.mobile.changePage() 를 사용해서 해당 페이지를 hash에 대한 update 없이 open 합니다. 이것은 history tracking 할 때 dialog를 제외시키는데 유용하게 사용됩니다.


Base element

jQuery Mobile's page navigation model의 또 다른 key point는 base element 입니다. 이것은 head에 삽입되고 모든 page change할 때 modify 됩니다. 이것의 역할은 모든 assets(이미지, CSS, JS 등) 이 정확한 경로를 통해 request 될 것인지에 대한 page 참조를 담당합니다. base emement에 대한 다이나믹 업데이트를 지원하지 않는 브라우저에서는 (파이어폭스 3.6 등) jQury Mobile은 base path를 기반으로 페이지와 prefix된 그들의 href 그리고 src sttribute 등의 assets를 참조해서 루프를 돕니다.

Developer explanation of base url management:

 jQuery Mobile은 generate된 절대 URL 경로와 generate된 <base> element의 href attribute 의 조합을 사용해서 http request를 관리합니다. 이 두 개의 조합은 로드되는 페이지의 full path를 포함하는 URL을 생성할 수 있도록 해 줍니다. base element는 이 로드된 페이지들에 의해 정확한 direct asset request를 만듭니다.

TODO: internal base와 urlHistory object의 decriptiond을 update 하세요.