'jquery mobile'에 해당되는 글 2건

2012.06.29 JQM + PhoneGap 작업시 두 라이브러리의 초기화 처리
2011.10.31 jQueryMobile 일본 글 [출처]

PhoneGap2012. 6. 29. 17:40

JQM + PhoneGap 작업시 두 라이브러리의 초기화 처리

jQuery Mobile은 어플리케이션이 모바일 환경에 최적화되도록 자동으로 HTML의 상당 부분을 변경하거나 개선합니다. 이러한 jQuery Mobile의 자동 최적화는 대부분의 모바일 어플리케이션에서 유용한 것이지만 어떤 특별한 경우에는 필요치 않거나 오히려 없는 편이 더 나을 수도 있습니다. jQuery Mobile은 이런 상황을 감안해 기본 설정의 주요 부분을 재정의할 수 있게 지원합니다.

PhoneGap은 HTML파일을 읽어들이면서 HTML문서에서 참조하도록 정의된 phonegap-1.1.0.js 라는 파일을 찾습니다. 그리고 해당 파일이 정상적으로 포함된 경우 deviceready 라는 이벤트를 발생시킵니다.

이 두 라이브러리가 서로 각자 초기화가 완료된 후에야 각 라이브러리에서 제공하는 모든 기능을 충분히 활용할 수 있게 됩니다. 하지만 이 두 라이브러리의 초기화 과정에서 서로 충돌이 발생해서 둘중 한가지는 충분히 초기화 되기 이전에 페이지가 사용자에게 노출되어 에러를 발생하게 하는 원인이 됩니다.

PhoneGap의 초기화 이벤트 처리하기

앞에서 이야기 했듯이 PhoneGap은 deviceready라는 이벤트를 HTML문서가 초기화 되면 발생시킵니다.

HTML파일에서는 다음과 같이 PhoneGap의 초기화 이벤트를 처리할 수 있습니다.

view plaincopy to clipboardprint?
<script src="phonegap-1.1.0.js"></script>  
<script type="text/javascript">  
document.addEventListener("deviceready", function(){  
    // 초기화에 필요한 수행  
}, false);  
</script>  

jQuery Mobile의 초기화 수행

jQuery Mobile에서는 jQuery Mobile이 초기화 되기 이전에 필요한 기본 처리들을 충분히 수행한 후에 초기화 할 수 있도록, 자동 초기화를 중지시키고 수동으로 초기화하는 기능을 제공하기 위해서 jQuery Mobile이 초기화 되기 이전에 mobileinit라는 이벤트를 발생시킵니다.

이 mobileinit라는 이벤트를 구현해서 jQuery Mobile이 초기화를 하지 못하도록 막을 수 있습니다.

$.mobile.autoInitializePage 라는 속성에 false라는 값을 대입하면 됩니다.

view plaincopy to clipboardprint?
<script type="text/javascript">  
$(document).bind("mobileinit", function() {  
    $.mobile.autoInitializePage = false;  
});  
</script>  

이 mobileinit라는 이벤트는 jQuery 라이브러리가 로드되고, jQuery Mobile 라이브러리가 로드되기 전에 발생합니다. 따라서 위의 소스는 위치가 매우 중요해 지는데요, 다음과 같이 작성되어야 합니다.

view plaincopy to clipboardprint?
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />  
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>  
<script type="text/javascript">  
$(document).bind("mobileinit", function() {  
    $.mobile.autoInitializePage = false;  
});  
</script>  
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>  

이렇게 $.mobile.autoInitializePage = false; 속성을 지정해 주면 jQuery Mobile은 명시적으로 $.mobile.initializePage(); 라는 메소드를 호출하기 전까지 초기화를 수행하지 않습니다.

PhoneGap과 연관 없이 단순히 필요한 사전 처리만을 수행한 후에, jQuery Mobile을 수행하기 위해서는 다음과 같이 처리하도록 jQuery Mobile API에서 소개하고 있습니다.

view plaincopy to clipboardprint?
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />  
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>  
<script type="text/javascript">  
$(document).bind("mobileinit", function() {  
    $.mobile.autoInitializePage = false;  
    // 초기화에 필요한 처리 (1)  
});  
</script>  
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>  
<script src="phonegap-1.1.0.js"></script>  
<script type="text/javascript">  
$(document).ready(function() {  
    // 초기화에 필요한 처리 (2)  
     $.mobile.initializePage();  
});  
</script>  

만약 초기화 과정에서 jQuery Mobile에서 제공하는 $.mobile 이라는 객체의 기능을 사용해야 한다면, 초기화 처리는 (2)번 부분에 기술되어야 하며, 그렇지 않은 경우는 (1)과 (2) 원하는 곳에 넣으면 됩니다. 처음에는 $.mobile.initializePage(); 를 mobileinit 이벤트 함수 안에서 호출했더니 메소드를 찾지 못한다면에 에러가 났었습니다.

moibleinit 이벤트에서 deviceready 이벤트 처리

jQuery Mobile과 phonegap을 함께 초기화 하기 위해서는 jQuery Mobile의 mobileinit 이벤트에서 $.mobile.autoInitializePage = false; 를 지정하여 초기화를 중지시킨 다음에 이 부분에 phonegap의 deviceready 이벤트를 정의해 줍니다.

아래와 같이 처리해 주면, jQuery Mobile은 스스로의 초기화를 중지시킨 후에, phonegap의 deviceready 이벤트가 발생할 때 까지 기다릴 겁니다.

view plaincopy to clipboardprint?
$(document).bind("mobileinit", function() {  
    $.mobile.autoInitializePage = false;  
    document.addEventListener("deviceready", function(){  
        // phonegap의 초기화가 완료된 후의 처리  
    }, false);  
});  

deviceready 이벤트가 발생하여 phonegap의 초기화가 완료되면, 그 안에서 아직 수행되지 않은 jQuery Mobile의 초기화를 명시적으로 호출합니다.

view plaincopy to clipboardprint?
<script src="phonegap-1.1.0.js"></script>  
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />  
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>  
<script type="text/javascript">  
$(document).bind("mobileinit", function() {  
    $.mobile.autoInitializePage = false;  
     document.addEventListener("deviceready", function(){  
        $.mobile.initializePage();  
    }, false);  
});  
</script>  
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>  

샘플코드

아래 샘플은 위와 같은 초기화 방식을 적용하여, jQuery Mobile에서 phoneGap의 deviceready 이벤트를 받아, 단말기의 기본 사양을 출력하도록 한 샘플입니다.

출력 값의 속성 이름을 알기 위해서 phonegap의 샘플 코드를 참조했으며, 출력값을 inset-listview에 넣었습니다.

view plaincopy to clipboardprint?
<!DOCTYPE html>  
<html>  
<head>  
    <title>Hello PhoneGap</title>  
    <meta charset="utf-8"/>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />  
    <script src="phonegap-1.1.0.js"></script>  
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />  
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>  
    <script type="text/javascript">  
        $(document).bind("mobileinit", function() {  
            $.mobile.autoInitializePage = false;  
            document.addEventListener("deviceready", function(){  
                $.mobile.initializePage();  
                document.getElementById("platform").innerHTML = device.platform;  
                document.getElementById("version").innerHTML = device.version;  
                document.getElementById("uuid").innerHTML = device.uuid;  
                document.getElementById("name").innerHTML = device.name;  
                document.getElementById("width").innerHTML = screen.width;  
                document.getElementById("height").innerHTML = screen.height;  
                document.getElementById("colorDepth").innerHTML = screen.colorDepth;  
            }, false);  
        });  
    </script>  
    <script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>  
</head>  
<body>  
<div data-role="page">  
    <div data-role="header">  
        <h1>PhoneGap Init</h1>  
    </div>  
    <div data-role="content">  
        <ol data-role="listview" data-inset="true" data-theme="d">  
            <li>Platform: <span id="platform"> &nbsp;</span></li>  
            <li>Version: <span id="version"> &nbsp;</span></li>  
            <li>UUID: <span id="uuid"> &nbsp;</span></li>  
            <li>Name: <span id="name"> &nbsp;</span></li>  
            <li>Width: <span id="width"> &nbsp;</span></li>  
            <li>Height: <span id="height"> &nbsp;</span></li>  
            <li>Color Depth: <span id="colorDepth"> &nbsp;</span></li>  
        </ol>  
    </div>  
</div>  
</body>  
</html>  

실행하면 아래와 같이 결과가 나옵니다. 안드로이드 (삼성 갤럭시S2)에서만 테스트 해 봤습니다.

혹시 iOS나 다른 폰에서 결과가 동일하지 않다면 피드백 주시면 감사하겠습니다.

'PhoneGap' 카테고리의 다른 글

[안드로이드] PhoneGap 앱에서 취소키 누르면 앱 종료하기 (0)	2012.06.26
안드로이드 셋팅 (0)	2012.06.26
PhoneGap의 모든 것- Plugin 개발 (0)	2012.06.26
PhoneGap의 모든 것- 프로젝트 셋팅 (2) (0)	2012.06.26
PhoneGap의 모든 것 - 동작원리 (1) (0)	2012.06.26

Posted by 다오나무

영삼이의 IT정보2011. 10. 31. 05:08

jQueryMobile 일본 글 [출처]

http://d.hatena.ne.jp/pikotea/20101019/1287484040

jQuery Mobile 참조적인 것을 만들었습니다.

급히 叩き台에서 태클 등이 있으면 댓글주세요!

Page

요소
특성
값
개요

div
data - role
page
페이지

설정
값
기본
비고

data - fullscreen
true
전체 화면

false
*

data - theme
임의
a
기본 테마는 a ~ c

Header

요소
특성
값
개요

div
data - role
header
헤더

Page 포함

설정
값
기본
비고

data - nobackbtn
true
Back 버튼 자동 표시
(되지 않는 것)

false
*

data - position
inline
*

fixed
화면 하단에 고정 표시

data - theme
임의
a
기본 테마는 a ~ c

Content

요소
특성
값
개요

div
data - role
content
페이지 내용

Page 포함

설정
값
기본
비고

data - theme
임의
a
기본 테마는 a ~ c

Footer

요소
특성
값
개요

div
data - role
footer
바닥글

Page 포함

설정
값
기본
비고

data - position
inline
*

fixed
화면 하단에 고정 표시

data - id
임의
여러 Page에 동일한 Footer을 정의한다. 화면 전환시 화면이 사라지지 않는다.

동일한 data - id를 가진 Footer를 자식 요소없이 정의한다.

(필수 data - position : fixed)

※ 자식 요소는 동일한 data - id를 가진 HTML 마지막으로 정의한다.

(다른 좋은 방법이 있는지 알 수 없음)

class
ui - bar
바닥글 요소의 자동 패딩

data - theme
임의
a
기본 테마는 a ~ c

Navigation Bar

요소
특성
값
비고

div
data - role
navbar
화면 전환시 화면이 사라지지 않는다. Footer 요소에 포함한다.
data - id의 차이점은 Footer 내용을 미묘하게 바꾸는 것이 가능 (필수 data - position : fixed)

Page Link

요소
특성
값
개요

a
-
-

효과와 함께 화면 전환한다.

링크된 Page 요소를 # id로 지정하거나 URL을 상대 경로 지정으로한다.

다음 중 하나를 지정하면 일반 링크된다.

rel : external

target : _blank

data - request - type : http

설정
값
기본
비고

data - transition
slide
*
화면 전환 효과

slideup

slidedown

pop

fade

flip

data - request - type
http
일반 링크

Dialog

요소
특성
값
개요

a
data - rel
dialog
링크를 대화로 표시한다.

Page 요소를 # id로 지정하거나 URL을 상대 경로 지정으로한다.

설정
값
기본
비고

data - transition
slideup
대화 효과

pop
*

flip

Button

요소
특성
값
개요

input
type
button
버튼

submit

reset

image

a
data - role
button

설정
값
기본
비고

data - icon
arrow - l
아이콘 종류

arrow - r

arrow - u

arrow - d

delete

plus

minus

check

gear

refresh

forward

back

grid

star

alert

info

data - iconpos
left
*
아이콘 위치

right

notext

class
ui - btn - left
*
버튼 위치

ui - btn - right

ui - btn - active
선택 상태

data - theme
임의
a
기본 테마는 a ~ c

Inline

요소
특성
값
개요

div
data - inline
true
여러 요소를 1 줄로 표시한다.

false

Control Group

요소
특성
값
개요

div
data - role
controlgroup
여러 요소를 그룹화한다.

Button, Radio, Checkbox 요소 등

설정
값
기본
비고

data - type
vertical
*
세로로 그룹화

horizontal
가로로 그룹핑

Grid

요소
특성
값
비고

div
class
ui - grid - a
ui - grid - a는 가로 2 분할, ui - grid - b는 가로 3 분할.

자식으로 div 요소의 class : ui - block - a - ui - block - c에 대응한다.

ui - grid - b

fieldset
class
ui - grid - a

ui - grid - b

data - theme
임의
a
기본 테마는 a ~ c

Collapsible

요소
특성
값
비고

div
data - role
collapsible
개폐 가능한 블록. 제목이 필수 (h1 ~ h6 요소)

설정
값
기본
비고

data - state
collapsed
초기 표시를 닫은 상태로

data - theme
임의
a
기본 테마는 a ~ c

Fieldcontain

요소
특성
값
비고

div
data - role
fieldcontain
Form의 자식 요소를 묶으면 외형이 약간 변화하지만 상세 불명.
(화면 크기가 바뀌었을 때 위치 조정?)

fieldset

Form Elements

요소
특성
값
비고

input
type
text
텍스트 입력

password
암호 입력

search
검색창

range
범위 입력

radio
라디오 버튼

label 요소가 필요합니다. label의 for 속성 radio 요소의 id를 설정한다.

checkbox
확인란

label 요소가 필요합니다. label의 for 속성에 checkbox 요소의 id를 설정한다.

select
-
-
셀렉트 박스 입력

모든 option 요소가 Dialog 형식으로 표시되지 않는 경우 Page 형식으로 표시한다.

data - role
slider
플립 토글 스위치

option 요소를 2 개를 필요가있다.

textarea
-
-
텍스트 영역 입력

설정
값
기본
비고

data - theme
임의
a
기본 테마는 a ~ c

List

요소
특성
값
비고

ul
data - role
listview
목록

(List / Read - only List)

ol
data - role
listview
번호 매기기 목록

(Numbered List)

설정
값
기본
비고

data - inset
true
목록 화면 너비로 포장하지 않는다

false
*

data - filter
true
목록에서 검색을 검색 상자 표시

false
*

data - theme
임의
a
기본 테마는 a ~ c

기타 ※ li 요소 등에 대한 지정. 여러 조합 가능

목록 형식
조건
비고

링크 매기기 목록

(Linked List)

자식 요소 a 요소를 포함
링크 표시

상자 목록

(Nested List)

자식 요소 ul 요소를 포함
목록을 중첩

구분 단추 목록

Split button List

자식 요소 a 요소 img 요소, h1 ~ h6 요소, p 요소 등
목록에 여러 요소를 표시하는

분할 목록
li 요소 data - role : list - divider를 지정한다.
목록 제목보기

카운트 버블
자식 요소 span 요소를 마신다. span 요소에 class : ui - li - count를 지정한다.
카운트보기

파일
자식 요소에 img 요소를 포함
파일보기

아이콘
자식 요소에 img 요소를 포함한다. img 요소에 class : ui - li - icon을 지정한다.
아이콘 더보기

레이블
자식 요소 h1 ~ h6 요소를 포함한다.
레이블을 표시하려면

비고
자식 요소 p 요소를 포함한다.
레이블 아래 비고보기

보충
자식 요소 p 요소를 포함한다. p 요소에 class : ui - li - aside를 지정한다.
오른쪽 상단에 보충보기

'영삼이의 IT정보' 카테고리의 다른 글

아이폰에 카메라 렌즈를 장착하게 된다면? (0)	2011.11.02
jQuery Mobile 일본글 (0)	2011.10.31
데이터베이스와 테이블생성 (0)	2011.10.28
블루투스 통신을 이용한 숫자 키패드 앱(app) 출시 - 블루키패드 (0)	2011.10.26
아파치 웹서버 XAMPP 설정 - 가볍고 쉬운 XAMPP를 이용한 웹서버 구축 (0)	2011.10.25

Posted by 다오나무

«이전 1 다음»

영삼이의 전문 정보 발행처

'jquery mobile'에 해당되는 글 2건

JQM + PhoneGap 작업시 두 라이브러리의 초기화 처리

PhoneGap의 초기화 이벤트 처리하기

jQuery Mobile의 초기화 수행

moibleinit 이벤트에서 deviceready 이벤트 처리

샘플코드

'PhoneGap' 카테고리의 다른 글

jQueryMobile 일본 글 [출처]

'영삼이의 IT정보' 카테고리의 다른 글

카테고리

공지사항

태그목록

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

달력

링크

티스토리툴바