윈도우즈 모바일에 구현된 레퍼런스

BONDI에는 RI(Reference Implementation) 라고 하는 윈도우즈 모바일에 구현된 레퍼런스가 존재합니다. 즉, 위젯을 만들어서 직접 윈도우즈 모바일 환경에서 돌려볼 수 있는 것이죠.

RI에대한 자세한 설명은 다음에 하도록 하겠습니다. 이 번 글은 RI가 윈도우즈 모바일 위에 구현되었는데, 윈도우즈 모바일에 사용되는 IE 모바일 브라우저로 인해 생기는 여러 한계점들(혹은 그 것을 우회하여 해결하는 방법)에 대해서 얘기해보고자 합니다.

원문 : http://code.google.com/intl/ko/apis/gears/mobile.html 

CSS

position 속성을 지원하지 않아서, 임의의 위치로 이동시킬 수 가 없다.

Document Object Model

Document Element 접근하기

IE Mobile 5버전에서는 document.getElementById()를 지원하지 않아서 아래와 같이 document.all 을 사용하는 해결책이 있다.

/**
 * Tests if an element is defined.
 * @param type - The type of the element to be tested.
 */
function isDefined(type) {
  return type != 'undefined' && type != 'unknown';
}

/**
 * Retrieve a DOM element by its ID.
 * @param id - The ID of the element to locate.
 */
function getDOMElementById(id) {
  if (isDefined(typeof document.getElementById)) {
     return document.getElementById(id);
  } else if (isDefined(typeof document.all)) {
     return document.all[id];
  } else {
    throw new Error("Can not find a method to locate DOM element.");
    return null;
  }
}

Document Element 만들기

마찬가지로, IE Mobile 5 버전에서는 createElement를 지원하지 않아서, innerHTML 을 사용하여 아래와 같이 해결해야 하네요.

node.innerHTML = "<p id='myElement'></p>";

Element 에 Text 설정하기

IE Mobile 5 버전에서 createTextNode를 지원하지 않아서, innerText 를 대신 사용해야 합니다.

function setElementText(node, text) {
 if (isDefined(typeof node.innerText)) {
   node.innerText = text;
 } else {
   while (node.firstChild) {
     node.removeChild(node.firstChild);
   }
   node.appendChild(document.createTextNode(text));
 }
}

Document Element 수정하기

innerHTML과 innerText를 사용하라고 합니다.

ActiveX : object 관련 문제점들

IE Mobile 에서는 아래와 같이 window object에 대한 확장을 지원하지 않습니다.

window.myObject = new Array(); // Does not work!

이에 대한 해결 방법으로는 아래와 같이 myObject를 선언해 주는 것 입니다.

myObject = new Array();
alert(window.myObject);       // OK!

그리고, 아래와 같이 안전하게 define 여부를 확인 후에 사용해야 합니다.

if (isDefined(typeof myObject.askQuestion)) {
  myObject.askQuestion(42);
}

아래는 myObject가 ActiveX라면 문제가 될 수 있습니다.

if (myObject.askQuestion) {
  myObject.askQuestion(42);
}

Recursion

IE Mobile 5 및 6 버전에서는 call stack 제한( 16 function call)을 두었기 때문에, 그 이상의 function call은 무시되니, recursion이 발생하지 않도록 만들어야 합니다.

Layout Refresh

IE Mobile 에서는 DOM node가 dynamic 하게 추가 될 때, 페이지를 올바르게 refresh 하지 못할 경우가 있습니다.  예를들어, table의 일부 element가 변경될 경우라도, 전체 table element에 대해서 처리하도록 해줘야 합니다.

MSDN 자료

아래 링크들에 IE 모바일 개발 관련 유용한 정보가 있으니, 추가적으로 참고하시기 바랍니다.

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: