jQuery Mobile on PhoneGap :: Cross-domain page request 설정

jQuery mobile 로 remote 서버의 페이지에 접근하는 경우는 두가지다.

1. ajax 처리

ajax처리는 javascript 혹은 jQuery로 간단히 처리할 수 있다.
아래의 jQuery 코드는 www.geference.com 의 exam.php를 실행하고 그 결과를 data로 받아 경고창에 뿌려준다.  jQuery mobile 에서도 잘 작동한다.

$.post( 'www.geference.com/exam.php' , function(data){ alert( data) } )

2. remote 서버 페이지로 페이지 이동

jQuery mobile 의 페이지 이동은 $.mobile.changePage() 함수가 담당한다.
하지만 아래의 코드는 제대로 작동하지 않는다.

$.mobile.changePage( 'www.geference.com/exam.php')

기본적으로 jQuery mobile은 cross-domain 페이지 이동이 안 되도록 설정 되어 있다.
cross-domain 페이지 이동을 가능케 하려면,  아래 설정을 app의 시동시에 등록해 두어야 한다.

$.support.cors= true;
$.mobile.allowCrossDomainPages = true;

phonegap 1.3.0 버전을 기준으로 테스트해 본 결과, $.support.cors 는 기본 설정이 true로 되어 있어, 따로 설정을 하지 않아도 되지만, $.mobile.allowCrossDomainPages 는 기본이 false로 되어 있어 명시적으로 true로 설정해 주어야 한다.

phonegap에서 white list 설정을 풀어주어야 하는 것도 잊으면 안 된다.

jQuery mobile :: content 영역 사이즈를 window 사이즈에 넘치지 않게 표시하는 방법

jQuery mobile 은 각 페이지 요소를 표현하는 CSS 설정이 default로 함께 딸려 있다. Prototype 용으로 이런 default 설정을 그대로 사용하는 것이 매우 편리하지만, 앱 디자인을 customize하기 위해선 default CSS 설정을 제거하고, 새롭게 CSS 를 설정해 디자인을 조정해야 한다.

본 post에서는 jQuery mobile 의 페이지 기본 요소인 header, content, footer 로 이루어진 페이지에서 이들 세 요소가 전체 화면 영역을 차지하도록 하는 한 가지 방법을 소개한다.

# jQuery mobile 의 기본 페이지 설정

<section data-role='page' >

  <div data-role=header >

      HEADER

  </div>

  <div data-role=content>

      CONTENT

  </div>

  <div data-role=footer>

     FOOTER

  </div>

</section>

구체적으로, header와 footer 를 설정하고 남은 영역을 content 가 완전히 차지하게 하는 것이 목표. 이 때 content가 차지하는 영역은 전체 화면 영역에서 header와 footer를 차지하는 영역을 제외한 나머지 영역을 단 1px 도 넘거나, 부족하지 않게 하는 것이 핵심이다.


방법1 :: Static  할당 
header와 footer 그리고 전체 화면 크기를 확인해보고, 전체 화면 크기에서 header와 footer를 제외한 영역을 px단위로 정확하게 <div data-role=content> 에 할당한다.

문제점: 서로 다른 모바일 기기들은 각기 다른 화면 사이즈를 가지는데, 이 방법을 이용한다면 각 모바일 기기들에 따라 서로 다른 content 영역 사이즈를 할당해야 하는데,  상당히 번거롭다는 점 뿐만 아니라, 현실적으로 존재하는 모든 device를 테스트 하기 어렵다는 근본적인 문제에 봉착한다.



방법2::  Dynamic 할당
 각 요소 사이즈를 javascript를 이용해 계산하고, content 사이즈를 할당하는 방법. javascript를 통해 동적으로 사이즈를 할당하기 때문에, 다양한 device에서도 제대로 된 영역의 사이즈를 계산하고 할당할 수 잇다.



Step 1) header와 footer 영역 사이즈 계산 
data-role=header, footer, content 모두에 padding 값이 설정되어 있다. 요소가 차지하는 전체 사이즈는 height + padding + border 이기 때문에 header와 footer 가 차지하는 공간을 계산하기 위해서는 height+padding+border 를 계산해주는 jquery의 outerHeight 메소드를 이용한다.

var head_height=$('[data-role=header]').outerHeight();

var footer_height=$('[data-role=footer]').outerHeight();

Step 2) Content 영역의 default CSS 제거 
content 영역의 padding, border 사이즈를 고려하여 height 를 알아내고, height 사이즈 만을 변경할 수도 있지만, 이 보다는 default padding, border 사이즈를 0으로 두고, height 사이즈를 변경하고, 필요하면 이후 다시 padding, border 를 CSS 를 이용하여 할당하는 쪽의 코드가 더 간결하고 명확하다는 개인적인 생각이다. 따라서 여기서는 content의  default CSS 를 제거한다.

# content 의 default padding, border 사이즈를 0으로 설정한다.

div[data-role=content]{

  padding:0;

  border:0

}

Step 3) header와 footer 가 차지하는 영역을 제외한 영역을 height가 차지하도록 설정
앞서 계산한 header와 footer 의 영역을 제거한 나머지 공간을 content가 차지하도록 설정을 한다.

  # 전체 화면의 높이 $(document).height() 에서 앞서 계산한 head와 footer의 높이를 뺀 공간의 높이를 계산하고 이를 content 영역의 높이로 설정

  var content_height= $(document).height() - head_height - footer_height ;

 $('[data-role=content]').css('height', content_height+'px');