앱스프레소로 안드로이드 앱을 만들고 있습니다.
앱에 따라 달라지겠지만, 자기가 잘 할 수 있는 기술로 앱을 만들 수 있다는 점이 참 매력적입니다. 하지만, 몇 가지 기본적으로 지원하지 않는 것들은 플러그인으로 직접 개발하거나, 많은 꼼수를 동원해야 합니다.
이틀밤을 고민중에 해결한 것이 외부 사이트를 가져오는 것입니다.
내 모바일 블로그를 가져와서 앱으로 제작하고 있는데, 처음에는 iframe을 사용했지만 모두 개발하고 최종적으로 문제가 생겼습니다.
iframe을 가져올 때 안드로이드 2.0대 버전에서는 자동으로 화면을 채워줍니다. 따라서 가로 화면만 크기에 맞게 조정해 주면 됐는데.. 3.0이상 버전에서는 자동으로 화면을 채워주지 못하는 것을 발견했습니다.
iframe 세로 크기를 정해줘야 하는데, 크로스도메인 제약 때문에 사이트 세로 크기를 알아낼 수가 없다는 문제가 생긴겁니다.
그래서 history 기능이 없어 뒤로가기 버튼 제약때문에 포기했던 addWebView를 다시 사용하기로 했습니다.
그럼 history 기능을 어떻게 만들었는지 완벽하지는 않지만 소개하겠습니다.
가장 핵심은 addWebView와 함께 이벤트가 발생하는데, 이때 이동하는 페이지의 url을 받을 수 있다는 것입니다. 아래 10번째 줄 쯤에 있는 'finish' : function ... 이 부분이 웹문서를 모두 표시하고 난 이후에 발생하는 이벤트 입니다. 여기서 historyUrl 배열에 이동한 url을 push해줍니다. (내부에 있는 링크에서도 정상적으로 동작합니다.)
외부에 있는 버튼을 클릭해서 페이지 이동을 할 때는 기존 webview를 제거하면서, 새로 webview를 만들면 됩니다. changeWeb함수가 그런 기능을 합니다. (앱 화면 하단에 메뉴 버튼을 만들어서 링크를 줄 때 사용하면 됩니다.)
예를 들면 앱 상단이나 하단의 메뉴에서 <a href="javascript:changeWeb('http://k2man.net/m/post/view/id/1148');">글 읽기</a> 방식으로 링크 하면 됩니다.
아래 javascript 소스 중에 파란색 부분만 본인 환경에 맞게 바꿔쓰면 됩니다. ^^
var historyUrl = new Array(); // history를 저장할 배열, push와 pop을 이용 스택처럼 활용
var handle;
// 새로운 webview를 만드는 함수
function addWeb(url) {
var width = $(window).width(); // 화면의 폭, 갤럭시 노트, 탭 등에 대응, jQuery사용
var height = parseInt($(window).height())-53; // 화면 높이, 화면 아래 53px 높이의 메뉴바가 있어서 53을 빼었다. jQuery사용
var opts = {
'top': 0,
'left': 0,
'width': width,
'height': height,
'finish': function(handle, url){ // 화면 출력이 모두 끝나면 발생하는 이벤트
ax.ext.ui.hideProgress(); // 로딩중이라는 창을 없앤다.
historyUrl.push(url); // 현재(이동한) url을 배열에 push한다.
}
};
handle = ax.ext.ui.addWebView(function(){}, url, opts); // webview 생성
ax.ext.ui.showProgress('로딩중입니다.'); // 로딩중 창 띄움.
} addWeb('http://k2man.net/m'); // 첫 화면에서 보여줄 url
// 뒤로가기, history.back() 역할을 한다.
function backWeb() {
ax.ext.ui.removeWebView(function(){ // webview를 지운다.
historyUrl.pop(); // 현재 url을 먼저 pop해서 없애 버린다.
// historyUrl배열에 저장된 url이 없으면 기본 url로 이동, 저장된 url이 있으면 url로 이동, if문
if (historyUrl.length >= 1) var url = historyUrl.pop(); // 이번 pop이 기존 url이다.
else url = "http://k2man.net/m";
addWeb(url);
}, handle);
}
// 메뉴바 등에서 링크용으로 사용, webview화면을 바꾼다.
function changeWeb(url) {
ax.ext.ui.removeWebView(function(){ // 기존 webview를 삭제하고,
addWeb(url); // 전달받은 url로 webview를 만든다.
}, handle);
}