'분류 전체보기' 카테고리의 글 목록 (117 Page)

링크 관련 jQuery Mobile 내부 flow 알아보기 2

2012. 10. 9. 04:46 | Posted by 솔웅

Construction of the window by the PHP server

이전 글에서 다룬 예제에서 조금 더 나아가서 디스플레이 될 윈도우를 생성하는 소스를 가지고 있는 (같은 서버 내에서) PHP page로 링크럴 걸 경우에 대해 알아보겠습니다.

Index.html file that contains the first window

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 

<body> 

<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>

  <div data-role=content>

    <p> Window content 1 </p>

    <a href=action.php> Goto window 2 built with action.php </a>

  </div>

</div>

</body>

</html>

action.php file constructing the second window

<?
  $html = "";
  $html .= "<div data-role=page data-add-back-btn=true>";
  $html .=   "<div data-role=header>";
  $html .=     "<h1>Window 2</h1>";
  $html .=   "</div>";
  $html .=   "<div data-role=content>Window content 2</div>";
  $html .= "</div>";
  echo utf8_encode ($html);
?>

jQuery Mobile은 action.php file안에 include 된 두번째 윈도우를 retrieve 하기 위해 Ajax를 사용할 겁니다. 이를 위해 우리는 반드시 utf8_encode ()를 사용해야 합니다.

만약 server 코드가 여러개의 윈도우를 return 한다면 오직 첫번째 윈도우만 윈도우들의 stream 안에 놓여지게 될 겁니다.

action2.php

convention14.html

Link to another HTML page located on another server

링크를 같은 서버가 아니라 다른 서버로 즉 href attribute 가 external URL이 되는 경우도 있습니다. 이 경우는 full URL 을 사용하겠죠. (http://로 시작하는). 이 경우에는 이전의 페이지 대신에 새로운 페이지가 display 될 겁니다. (jQuery Mobile 의 windows flow 와 맞지 않게 됩니다.)

Link to http://amazon.com

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 

<body> 

<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>

  <div data-role=content>

    <p> Window content 1 </p>

    <a href=http://amazon.com> Goto Amazon </a>

  </div>

</div>

</body>

</html>

convention15.html

이 링크를 클릭하면 Amazon.com page가 open 될 겁니다.

Disable the loading of an HTML page with Ajax

디폴트로 href attribute의 value는 jQuery Mobile이 만드는 Ajax call 에서는 같은 서버의 HTML page를 가리킵니다. 이렇게 해서 어플리케이션 윈도우의 flow 안에서 HTML 페이지들을 표시하게 되고 그래서 두번째 페이지에 있는 Back button을 누르면 다시 첫번째 페이지로 돌아갈 수 있게 됩니다.

It is possible, indicating certain attributes in the link, to change this behavior.

이 behavior를 변경하기 위해 링크의 특정 attribute들을 수정 할 수 있습니다.

data-ajax="false"로 하면 Ajax call 을 만들지 않습니다. 새로운 HTML 페이지는 이전의 페이지들을 모두 lost 하게 되죠.
rel="external" 는 data-ajax="false" 와 비슷합니다.
target="a_value"라고하면 새로운 브라우저를 엽니다.

이런 메카니즘을 이용하는것은 아주 드믑니다. 왜냐하면 여러 페이지들을 Ajax 에 의해서 한 HTML page 처럼 사용하는 디폴트 방법이 훨씬 유용하기 때문입니다.

Dialog windows

여기서는 다른 HTML 페이지에서 layered window 가 정의 될 수 있다는 걸 보여 드리겠습니다.

Index.html file containing the first window

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 

<body> 

<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>

  <div data-role=content>

    <p> Window content 1 </p>

    <a href=index2.html data-rel=dialog data-transition=pop> 

      Goto window 2 located in an another HTML page </a>

  </div>

</div>

</body>

</html>

Index2.html file containing the second window

<!DOCTYPE html> 

<html> 

<head> 

  <meta http-equiv=Content-Type content=text/html;charset=iso-8859-1 />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 

<body> 

<div data-role=page id=win2>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>

  <div data-role=content>

    <p> Window content 2</p>

  </div>

</div>

</body>

</html>

이 dialog window는 첫번째 윈도우에서 링크를 클릭하면 열립니다.

convention161.html

convention162.html

저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

다른 메소드들과 프로퍼티들 보기 (0)	2012.10.19
Dialog windows 사용하기 (0)	2012.10.17
윈도우 생성 과정 이해하기 (0)	2012.10.16
$.mobile.loadPage (url, options) method 사용하기 (0)	2012.10.15
$.mogile.changePage(toPage,options) method 로 페이지 이동하기 (0)	2012.10.13
링크 관련 jQuery Mobile 내부 flow 알아보기 1 (0)	2012.10.08
두개의 이벤트 하나로 다루기, jQuery Mobile built in Components (0)	2012.10.04
컴포넌트에 이벤트 생성하고 사용하기 (0)	2012.10.04
컴포넌트에 메소드 추가하기 (0)	2012.10.04
Ajax 로 컴포넌트 사용하기 (0)	2012.10.03

My Shelter/tale

큰 바위 얼굴을 찾아서....

2012. 10. 9. 04:31 | Posted by 솔웅

그동안 개발해오던 모바일 앱이 지지난 주 on production 했거든.

토요일에 나와서 근무했었는데 그 대신 지난주 금요일에 쉬었어.

마침 단풍 시즌이라 단풍으로 유명하다는 뉴 햄프셔의 White Mountains 으로 가기로 했어.

White Mountains 에서 제일 높은 산인 Mt. Washington 에는 세계에서 제일 오래된 산악 관광 열차(cog railways)가 있다고 해서 그걸 타러 갔지.

목표는 거기였지만 내 가슴을 더 설레게 만들었던건...

Mt. Washington 근처에 있는 큰바위 얼굴이야.

어렸을 때 교과서에 나온 짧은 소설인데 그거 읽고 많이 감동 받았지...

그 소설의 제목은 영어로 "The Great Carbuncle" 이라고 하던데 작가는 주홍글씨를 썼던 Nathaniel Hawthorne 이었지 아마...

실제 그 바위의 이름은 Old man of the mountain 이야.

아쉽게도 그 큰바위 얼굴은 2003년도에 무너졌어.

알고는 있었지만 꼭 그 바위가 있어야만 되는건 아니야.

어린 내게 큰 감동과 꿈을 주었던 그 곳에 갈 수 있다는게 설레는 일이지...

지금은 무너져서 그때의 얼굴 형체는 사라졌지만....

한번도 보지도 못했던 그 큰 바위를 상상하면서 뭔가 다짐도 해보고 감동도 받아보고 미래도 그려보게 했던 나의 어린 시절하고 더 가까와 지고 싶어...

그래서 가고 싶었어...

지금은 산 밑에 저런 조형물을 세워서 잘 각도를 맞춰 보면 그 때의 큰 바위 얼굴을 볼 수 있도록 해 놨어....

그날 만났던 한 백인 아줌마는 1990년대에 왔을 때는 그 얼굴이 그대로 있었다고 말하면서 아쉬워 하더라구.

거기 갔더니 이 큰바위 얼굴을 기리는 시 한편이 있더라구.

Daniel Webster

Men hang out their signs
indicative of their respective trades.
Shoemakers hang out a gigantic shoe;
Jewelers, a monster watch;
even the dentist hangs out a gold tooth;

but up in the Franconia Mountains
God Almighty
has hung out a sign to show that in New England,
He makes men.

이제 다시 어렸을 때 처럼 큰 꿈을 꿀 수 있을 것 같애...

저작자표시 비영리 동일조건

'My Shelter > tale' 카테고리의 다른 글

언론, 방송사에 압력 가하는게 일상인 새누리당 (0)	2012.11.05
Cloud Atlas 를 보고 (0)	2012.11.05
미국 작은 마을 할로윈 파티에서 울려 퍼지는 강남 스타일 (0)	2012.10.28
코로나에서 Phonegap 사용 기능 개봉 임박!!! (0)	2012.10.24
박근혜 정수장학회 - 최고의 악수를 두다 (0)	2012.10.21
영화 MB의 추억 예고편 (0)	2012.10.08
Together we can, Together we will (0)	2012.10.06
정우택 대만 성상납, 김태호 터널 디도스.. 말 많고 탈 많은 새누리당... (0)	2012.09.27
가끔 시를 보내오는 선배 (0)	2012.09.22
멋진 무술... (4)	2012.07.31

jQuery Mobile/JQM Tutorial

링크 관련 jQuery Mobile 내부 flow 알아보기 1

2012. 10. 8. 22:20 | Posted by 솔웅

jQuery Mobile에서는 두가지 방법으로 다른 페이지들과 연결을 하는데요.

첫번째는 <a> links attributes 를 사용해서 다른 페이지들과 연결을 하는 방법이 있구요.

두번째는 $.mobile object 로 정의된 changePatge() 메소드를 사용하는 방법이 있습니다.

이 두가지 방법과 관련해서 공부해 보겠습니다.

Manage the attributes of links

윈도우(페이지)에서 다른 윈도우로 transition 하는 것은 a link 를 통해서 이루어 집니다. 버튼 같은데에 이 a link를 적용해서 사용하거나 하죠. 이 link의 attributes들은 클릭 했을 때 어떤 동작이 일어나도록 합니다.

Link to an email address or phone number

아주 간단한 예제를 보죠. 우리의 애플리케이션 창에서 email, SMS, 전화걸기 등을 할 수 있도록 하겠습니다. <a> link의 href attribute 값을 지정함으로서 이러한 action들이 이루어 지도록 할 수 있습니다.

Links to an email address and telephone number

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 

<body> 

<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>

  <div data-role=content>

    <p> Talk to Eric Sarrion : </p>

    <a href=mailto:ericsarrion@gmail.com>By mail</a><br /><br />

    <a href=tel:0625570924>By phone</a><br /><br />

    <a href=sms:0625570924>By SMS</a><br /><br />

  </div>

</div>

</body>

convention11.html

Link to a window in the same HTML page

이건 이전부터 많이 사용하던 고전적인 방법이죠. 링크에 href를 넣는 겁니다. 새로운 윈도우에 대해서는 <div> element의 id 를 사용하구요. 아까 그 href에는 "#" character를 넣습니다. (eg href="#win2")

An HTML page containing two windows

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 

<body> 

<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>

  <div data-role=content>

    <p> Window content 1 </p>

    <a href=#win2> Goto window 2 located in the same page </a>

  </div>

</div>

<div data-role=page id=win2 data-add-back-btn=true>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>

  <div data-role=content>

    <p> Window content 2 </p>

  </div>

</div>

</body>

</html>

convention12.html

Link to a window in another HTML page on the same server

다른 HTML 페이지가 같은 서버의 다른 위치에 있다면 jQuery Mobile 은 내부적으로 Ajax call 을 사용해서 다른 HTML 의 내용을 load 합니다. 두개의 파일은 반드시 같은 서버에 있어야 합니다. 그렇지 않으면 jQuery Mobile에 의한 Ajax call 이 제대로 작동되지 않을 겁니다.

Index.html file that contains the first window

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 

<body> 

<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>

  <div data-role=content>

    <p> Window content 1 </p>

    <a href=index2.html> Goto window 2 located in index2.html </a>

  </div>

</div>

</body>

</html>

index2.html file containing the second window

<!DOCTYPE html> 

<html> 

<head> 

  <meta http-equiv=Content-Type content=text/html;charset=iso-8859-1 />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 

<body> 

<div data-role=page id=win2 data-add-back-btn=true>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>

  <div data-role=content>

    <p> Window content 2</p>

  </div>

</div>

</body>

</html>

convention131.html

convention132.html

(Firefox 브라우저에서 테스트 해 보세요.)

여기서 주의해야 할 점은 Ajax 에 의해 로드되는 페이지의 encoding을 가리키기 위해 <meta> tag를 사용했다는 겁니다. 별도의 HTML 파일에 페이지가 있게 되면 jQuery Mobile에 의해 내부적으로 만들어지는 Ajax request는 디폴트로 UTF-8을 사용합니다. iso-8859-1 encoding을 사용하면 외국어를 사용할 때 활용될 수 있습니다.

링크를 클릭하면 두번째 HTML 페이지가 나타납니다.

어떻게 jQuery Mobile이 새로운 HTML 페이지를 로딩하는지를 이해하기 위해 firfox에 있는 Firebug를 사용해보도록 하겠습니다.

클릭하기 전의 HTML 은 아래와 같습니다.

클릭하고 난 후의 HTML 은 아래와 같습니다.

두번째 <div> element (with id win2)가 HTML 페이지의 DOM tree elements의 한 부분이 되는 것을 볼 수 있습니다. 이것은 index2.html page 안에 포함돼 있는 두번째 윈도우와 연관이있습니다. jQuery Mobile이 사용하는 Ajax technique들에 의해 내부적으로 일어난 일입니다. 그렇기 때문에 첫번째 클릭이 일어나면 내용을 표시하기 위해 약간의 시간이 더 걸리게 되는 겁니다. (서버로부터 새로운 HTML 코드를 새로 retrieve 하고 이것을 현재 표시돼 있는 HTML code에 insert 하기 위한 시간이죠.) 이제 새로운 HTML 코드는 final page로 서 로드 됩니다. 이제 이후에 일어나는 클릭에 대해서는 이러한 시간을 필요로 하지 않습니다. 그러니까 좀 더 빨리 화면이 표시 될 수 있겠죠.

두번째 HTML 페이지 내부에 여러개의 윈도우가 있다면 이 경우에는 첫번째 윈도우만 insert 되게 됩니다.

이제 다시 Back button을 사용해서 이전 페이지로 돌아가 보죠. Firebug에 표시되는 HTML code는 아래와 같습니다.

이제 DOM tree에서 두번째 윈도우가 사라진 걸 볼 수 있습니다. jQuery Mobile은 메모리 공간을 절약하기 위해 그 부분을 메모리로부터 remove 합니다. 만약 이 경우에도 메모리에 계속 저장돼 있게 하려면 <div> element안에 data-dom-cache=true attribute 를 넣어주면 됩니다.

Index2.html file containing the second window, which will be stored in memory despite its disappearance of the display

<!DOCTYPE html> 

<html> 

<head> 

  <meta http-equiv=Content-Type content=text/html;charset=iso-8859-1 />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 

<body> 

<div data-role=page id=win2 data-add-back-btn=true data-dom-cache=true>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>

  <div data-role=content>

    <p> Window content 2 </p>

  </div>

</div>

</body>

</html>

저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

Dialog windows 사용하기 (0)	2012.10.17
윈도우 생성 과정 이해하기 (0)	2012.10.16
$.mobile.loadPage (url, options) method 사용하기 (0)	2012.10.15
$.mogile.changePage(toPage,options) method 로 페이지 이동하기 (0)	2012.10.13
링크 관련 jQuery Mobile 내부 flow 알아보기 2 (0)	2012.10.09
두개의 이벤트 하나로 다루기, jQuery Mobile built in Components (0)	2012.10.04
컴포넌트에 이벤트 생성하고 사용하기 (0)	2012.10.04
컴포넌트에 메소드 추가하기 (0)	2012.10.04
Ajax 로 컴포넌트 사용하기 (0)	2012.10.03
컴포넌트에 파라미터 전달하기 (0)	2012.10.03

My Shelter/tale

영화 MB의 추억 예고편

2012. 10. 8. 20:02 | Posted by 솔웅

10월 18일 개봉예정인 MB의 추억 메인 예고편!

MB의 추억 (Remembrance of MB, 2012)

2007년 MB의 관점에서 바라본 2007년의 유권자!
그리고, 2012년 우리가 2007년의 MB를 되돌아 보는 정산코미디!
정치인이 선거에 출마할 때면 허리와 고개가 생고무가 되지만 일단 당선만 되면 그 유연하던 허리와 고개가 시멘트로 변한다. 한마디로 눈에 뵈는 게 없어진다. 2012년 유권자 관점에서 2007년 MB의 대선 활동을 되돌아 보면, 참 황당하게 낚였다고 생각할 지 모르겠지만, 그 땐 그게 제대로 먹혔다. 2007년 MB의 관점에서 2007년의 유권자는 어떤 집단이었을까?
시간을 뒤섞어 보자. 2012년 우리가 2007년의 MB를 만나러 간다. 당시 경제를 살릴 준비된 지도자 MB는 국민들의 열렬한 지지를 받았다. 유권자의 입맛에 맞는 말들을 MB는 막 던졌고 탐욕적인 유권자는 열광했다. 2007년 유세 중 MB가 당시 여당을 향해 내뱉은 공격적인 말들은 대부분 지금 MB자신과 현재 여당에 해당하는 말이다. 돌이켜 보면 레알 코미디 같은 상황이지만 MB는 2012년에도 여전히 나름 대통령직을 열심히 수행하고 있고, 5년이 지난 지금 당시의 말들에 대해 아무도 정산하지 않는다.

이번 대선은 정권 심판, 정권 교체 가 되야 된다고 저는 생각합니다.

저작자표시 비영리 동일조건

'My Shelter > tale' 카테고리의 다른 글

Cloud Atlas 를 보고 (0)	2012.11.05
미국 작은 마을 할로윈 파티에서 울려 퍼지는 강남 스타일 (0)	2012.10.28
코로나에서 Phonegap 사용 기능 개봉 임박!!! (0)	2012.10.24
박근혜 정수장학회 - 최고의 악수를 두다 (0)	2012.10.21
큰 바위 얼굴을 찾아서.... (0)	2012.10.09
Together we can, Together we will (0)	2012.10.06
정우택 대만 성상납, 김태호 터널 디도스.. 말 많고 탈 많은 새누리당... (0)	2012.09.27
가끔 시를 보내오는 선배 (0)	2012.09.22
멋진 무술... (4)	2012.07.31
아 마음아프다.. 한국 언론 자유 화이팅 그리고 히말라야도..... (0)	2012.07.22

My Shelter/tale

Together we can, Together we will

2012. 10. 6. 21:11 | Posted by 솔웅

그렇게 뛰어나게 실력이 좋지도 않고 똑똑하지도 않은 평범한 내가 정말 운이 좋아 미국에서 개발자로 생활하고 있는데요...

뭐 정확하게 얘기하면 미국에서 외국인 노동자로 일하고 있는거죠.

한국에서 외국인 노동자로 일하고 있는 분들 하고는 비교할 수 없겠지만 하옇든 외국인 으로 산다는 것 그리고 외국인 노동자로 산다는 것은 어디나 힘든 점들이 있을 겁니다.

미국이 어떤 이유에서든 물질적으로 풍요롭고 또 개인의 권리를 존중해주는 분위기가 한국과는 좀 차이가 있어서 그런데서 오는 다른 작업환경 생활환경들에서 오는 좋은점들도 있구요.

체제라던지 이데올로기라던지 외적인 이런 체제를 유지하는 내면의 메커니즘이라던지 사회 제도라던지, 정치문화, 언론문화, 사회문화 같은 이런 큰 규모의 얘기를 오늘 하고 싶은건 아니구요.

(물론 하고 싶은 얘기가 없는 것은 아니지만......)

그냥 오늘은 개인적인, 일반 소시민들의 사고, 시민의식 뭐 그런것 들 중의 한가지에 대해 생각해 보고 싶습니다.

고 딱 한가지....

시민들의 장애인에 대한 인식과 태도요.

오늘 ohmynews 를 보다가 인상깊게 읽은 기사인데요.

발달장애를 가진 쌍둥이를 키우는 어머니의 글이었습니다.

([장애아 부모로 산다는 것⑥] 자폐성 장애아 한결·한길 엄마 우진아씨)

링크 걸어놨으니까 관심 있는 분은 읽으시면 좋을 것 같습니다.

그 기사중에 제 맘에 콕콕 박혔던 대목을은요.

물론 사람들에게 피해를 끼칠 때도 있었어요. 대 놓고 '애 교육을 저 따위로 시키느냐' '장애가 있는 애들을 왜 데리고 다니느냐'라며 욕하는 분들도 계셨지만, 그때그때 이해를 구했어요. '우리 아이가 장애가 있어서 그런다'고요. 그리고 '규칙이나 예의를 잘 이해하지 못하는 자폐'라고요.

장애인이 적응해야 할 사회 환경 중 대표적인 것이 대중교통이잖아요. 초등학교 입학 전 조기교실을 다닐 때도 일부러 대중교통을 이용했어요. 두 녀석을 데리고 버스를 타면 별일이 다 있지요. 버스에서 쫓겨나 중간에 내린 일도 여러 번 있었어요. 한 번은 아이가 하도 소란을 피우고 난리를 치니 기사 아저씨가 잠실대교 중간에 버스를 세우더라고요. 애들 데리고 내리라고요. 거기서 내려 3시간을 걸어서 집에 왔어요. 택시를 탈 수도 있었지만 일부러 걸었어요. '중간에 내리면 이렇게 고생한다'는 걸 가르치려고요.

버스에 동승했던 승객들 중 반은 엄마를 비난했고 반은 동정했다. "시끄러우니 아이를 데리고 내리라"는 승객은 차라리 이해할 수 있었다. 그러나 장애에 대한 이해 없이 "저런 걸 왜 낳았어?" "저런 걸 왜 데리고 다녀"라며 들으라는 듯 큰소리로 비난하거나 대놓고 "쯧쯧" 혀를 차며 동정 아닌 동정을 하는 사람들

아직은 우리 사회가 장애인을 동등한 인격체나 동등한 사람으로 인정하지 않아요. 장애인을 부족한 사람으로 여겨 무시하고 경멸하거나 고작해야 '불쌍하다' '안 됐다' 동정하는 정도지요. 장애인 본인들도, 장애아를 둔 엄마들도 동정을 원하는 것이 아니에요. 존중해 주지 못할 거면 차라리 동정보다는 모른 척해주길 바라는 마음이에요.

이 것 말고도 다른 많은 좋은 얘기들이 있었지만 오늘은 이 부분들이 저에게는 많이 돋 보였습니다.

왜냐하면 어제 밤에 유튜브 비디오 한개를 봐서인데요.

몰래 카메라 인데요.

상황 설정은 이렇습니다.

Autism 에 걸린 아이가 가족과 같이 식당에 왔는데요.

물론 정상이 아니니까 주변사람이 신경쓰이게 되겠죠.

그런데 한 사람이 이 가족들에게 그 아이 데리고 집에 가라고 뭐라 그러는거예요.

그런 상황에서 주위에 있는 평범한 사람들의 반응을 보는 건데요.

모두들 생각보다 더욱 더 적극적으로 그 아이와 가족의 편을 드는거예요.

저 위의 기사를 보면서 저도 한국에서 태어나서 한국에서 교육받고 한국에서 어린시절 젊은 시절 다 보냈기 때문에...

그런 상황에서 어떤 사람들은 이해해 주지만 또 어떤 사람들은 대놓고 불편해하고 집에나 데려가라 그러고 도움도 안되는 동정이나 하고 했을 거라는게 그림이 충분히 그려지는거예요.

그리고 길지는 않지만 미국에서 생활하고 있으니까 저 비디오에서처럼 저런 상황에서 사람들이 장애가 있는 사람에게 어떠한 눈치도 주지 않을 거라는게 충분히 그림이 그려지고요.

그렇다고 미국은 어떻고 한국은 어떻고 더 깊게 파고 들어가서 비교하고 싶은 생각은 없고요.

그냥 한국에서도 이렇게 장애인들에 대한 그리고 약자에 대한 생각이 좀 더 개선 됐으면 좋겠어요.

그리고 이런것이 독재와 급격한 경제개발을 거치면서 너무 경쟁위주의 사고방식, 대의를 위해서는 작은 시민들의 피해는 필수불가결하고 나아가서는 너무 당연하게 느끼는 분위기에서 작은 시민들보다도 더 작고 경쟁력에 도움이 안되는 약자와 장애인들에 대한 생각과 태도가 너무 비인간적으로 된 것은 아닌가 생각 됩니다.

저도 이곳 미국에서 밀알이라는데를 다니면서 장애인들과 이전보다 많이 접해보고 하면서 여러가지를 생각하게 됐는데요.

당연히 장애인들이 자본을 확대 재생산 하는데는 아주 비효율적입니다.

하지만 장애인들은 사랑을 확대 재생산 하는데는 아주 효율적입니다.

사랑을 확대 재생산하고 배려를 확대 재생산하고 그러면서 편안함을 확대 재생산하고 기쁨을 확대 재생산하고 행복을 확대 재생하는데 아주 효율적인 존재입니다. 그들은......

뭐가 더 이득인지 따지기 좋아하는 마음이 누구에게나 다 있겠죠?

그게 지금을 사는 한국사람들(저도 포함해서)에게는 돈이나 경제 쪽의 이득을 더 따지는게 당연하게 받아들여지는 것 같은데요.

그렇더라도 잘 생각해 보면 그 기준에서도 후자쪽이 훨씬 더 유익한 거 아닐까요?

저작자표시 비영리 동일조건

'My Shelter > tale' 카테고리의 다른 글

미국 작은 마을 할로윈 파티에서 울려 퍼지는 강남 스타일 (0)	2012.10.28
코로나에서 Phonegap 사용 기능 개봉 임박!!! (0)	2012.10.24
박근혜 정수장학회 - 최고의 악수를 두다 (0)	2012.10.21
큰 바위 얼굴을 찾아서.... (0)	2012.10.09
영화 MB의 추억 예고편 (0)	2012.10.08
정우택 대만 성상납, 김태호 터널 디도스.. 말 많고 탈 많은 새누리당... (0)	2012.09.27
가끔 시를 보내오는 선배 (0)	2012.09.22
멋진 무술... (4)	2012.07.31
아 마음아프다.. 한국 언론 자유 화이팅 그리고 히말라야도..... (0)	2012.07.22
어리석은 자의 우직함이 세상을 조금씩 바꿔 갑니다. (0)	2012.07.19

Corona SDK/Corona SDK News

11월에 나올 새로운 NOOK HD 와 관련한 소식

2012. 10. 4. 21:26 | Posted by 솔웅

Posted on October 1, 2012. Written by Walter

새로나온 NOOK HD 와 NOOK HD+ 와 관련한 업데이트 내용을 알려드립니다. 이 두개의 더 높아진 해상도에 맞게 여러분의 Corona apps를 개발하려면 무엇을 해야 하는지도 알려드릴거구요.

우선 여러분의 앱을 resubmit 하셔야 합니다. deadline은 10월 15일 까지 입니다. 여러분이 여러분의 앱을 새로운 11월달에 나올 새로운 NOOK HD에서 Storefront에 올려지기를 희망한다면 말이죠. NOOK 개발자가 저희들에게 말하기를 모든 NOOK 개발자들이 새로운 디바이스에 올려질 수 있게 모든 앱을 resubmit 해 주기를 바란다고 하더군요. 그리고 이전의 NOOK device 보다 새로운 device 의 인터페이스가 훨씬 더 좋아졌다고 얘기 했습니다.

두번째로는 여러분이 content scaling을 사용했을 경우는 이미 새로운 NOOK에서도 자동으로 맞춰져서 앱이 가동될 거라는 겁니다. 사실은 NOOK team 이 저희들에게 다른 앱들보다도 코로나 앱에 대해 거의 추가 작업을 하지 않을 수 있도록 작업을 했다고 얘기 했었습니다. 왜냐하면 코로나 앱은 이미 여러 스크린 사이즈나 여러 해상도에서 작동할 수 있도록 하는 로직이 이미 잘 되 있기 때문이죠.

여러분이 resubmit 할 때는 daily build 925 이후의 버전을 사용해 주세요.

그 이전 버전에서 빌드하게 되면 새로운 NOOK 에서는 작동을 하지 않는 이슈가 있습니다. 이전에는 이슈되는 사안이 아니었었는데 NOOK 측에서 일부 key API에 변화를 주었거든요. 이러한 이슈가 다시 발생하지 않도록 저희들은 같이 작업을 하고 있습니다.

보다 중요한 것은 저희들이 NOOK HD 의 Prototype을 받았고 daily build 에서 quick test를 이미 완료 했습니다.

지금까지 찾은 것은 작은 이슈 한가지 뿐입니다. 이 이슈는 OpenGL-based apps 에 영향을 미치는데요. (그냥 Corona로만 돼 있는 앱은 지장이 없습니다.) 이 이슈와 관련해서 이미 NOOK team 에게 알려줬습니다. 이 이슈는 아주 간헐적으로 나타나는데요 static content가 display 될 때만 일어납니다. 때때로 앱이 suspended 상태에서 resume 상태로 바뀔 때 blank 화면을 볼 때가 있습니다.

현재 NOOK Developer team 으로부터 그에 대한 feedback을 기다리고 있는 상황입니다. 그 동안 여러분의 앱이 resume 할 때 static 이라면 지금 새로 빌드해서 submit 하시기를 바랍니다. 약간의 트릭인데요 resume 한 이후에 한번 더 display 해 주는 방법으로 해결할 수 있습니다.

-- Workaround for Nook HD bug
local listener = function( event )
	if "applicationResume" == event.type then
		display.currentStage.alpha = 0.9

		-- Force invalidate 1 second after resume
		timer.performWithDelay( 1000, function()
			display.currentStage.alpha = 1.0
		end)
	end
end
Runtime:addEventListener( "system", listener )

저작자표시 비영리 동일조건

'Corona SDK > Corona SDK News' 카테고리의 다른 글

안드로이드 오디오 + new Widgets + a teaser 들 개선 소식 (0)	2012.11.02
iOS 6, Game Center, and Landscape orientation (0)	2012.10.12
안드로이드관련 수정된 사항 (alert box 등등) (0)	2012.10.11
Corona daily build 928 에 적용될 사항들 공지 (Storyboard, widget) (0)	2012.10.11
More Updates: iOS 6, NOOK HD, CoronaGeek Hangout (0)	2012.10.09
Kindle Fire HD와 NOOK HD, 그리고 구글 맵 사용에 대해 (0)	2012.09.28
Corona: iOS 6 and Xcode 4.5 are GM! (0)	2012.09.21
코로나 Enterprise (0)	2012.09.20
Corona Guidelines: iPhone 5 and iOS6 (Preliminary) (0)	2012.09.17
New Public Release 와 iPhone 5 에 대해서 (0)	2012.08.30

jQuery Mobile/JQM Tutorial

두개의 이벤트 하나로 다루기, jQuery Mobile built in Components

2012. 10. 4. 05:40 | Posted by 솔웅

Replace two events by a single

요 전 글에서 두개의 이벤트를 생성했죠? 글자 색(changecolor) 바꾸는 거랑 배경색(changebackgroundcolor) 바꾸는 거요.

이 두개의 이벤트를 changecolors event라는 하나의 이벤트를 call 해서 사용하도록 할 수 있습니다. 각 이벤트 마다 하나씩의 색을 전달하는 대신 두개의 파라미터에 두개의 색이 한번에 전달 되야겠죠.

New setColor () method managing changecolors event

setColors : function (color, backgroundcolor)

{

  var $elem = this.element;

  if (color != this.options.color || 

      backgroundcolor != this.options.backgroundColor) 

    $elem.trigger ("changecolors", [color, backgroundcolor]);

  this.options.color = color;

  this.options.backgroundColor = backgroundcolor;

  $elem.css ( { "background-color" : this.options.backgroundColor, 

                color : this.options.color } );

},

Taking account of the changecolors event

$("#plug1").bind ("changecolors", function (event, color, backgroundcolor)

{

  alert ("changecolors : \n" + "color = " + color + 

         "\n backgroundcolor = " + backgroundcolor);

});

이것을 처리하는 메소드는 이벤트 파라미터로부터 color 와 backgroundcolor 이렇게 두개의 파라미터를 받습니다.

다른식으로 작성할 수도 있습니다. color and backgroundcolor properties 들을 포함한 객체를 만들어서 single parameter로 전달할 수도 있죠.

color and backgroundcolor transmitted in an object

setColors : function (color, backgroundcolor)

{

  var $elem = this.element;

  if (color != this.options.color || 

      backgroundcolor != this.options.backgroundColor) 

    $elem.trigger ("changecolors", 

         [ { color : color, backgroundcolor : backgroundcolor } ]);

  this.options.color = color;

  this.options.backgroundColor = backgroundcolor;

  $elem.css ( { "background-color" : this.options.backgroundColor, 

                color : this.options.color } );

},

여기서 전달된 객체에는 color and backgroundcolor properties 두 개가 있습니다.

Taking account of the event changecolors

$("#plug1").bind ("changecolors", function (event, colors)

{

  alert ("changecolors : \n" + "color = " + colors.color + 

         "\n backgroundcolor = " + colors.backgroundcolor);

});

Components already defined in jQuery Mobile

지금까지 여러분의 컴포넌트를 생성하는 방법을 보았습니다. jQuery Mobile에서도 이런 식으로 이미 만들어져 있는 컴포넌트들이 있는데요. 이 컴포넌트들은 여러분들이 쉽게 사용하실 수 있습니다.

아래 몇개의 샘플이 있는데 이 외에도 많이 있습니다.

Standard components of jQuery Mobile

Name	Signification
page	Windows management in the page
checkboxradio	Checkboxes and radio buttons management
textinput	Input texts management
selectmenu	Select menus management
button	Buttons management
slider	Sliders management
collapsible	Accordion menus management
listview	Listviews management
dialog	Overlapped windows management
navbar	Navigation bars management

나중에 다룰 컴퍼넌트들이 있는데요. 이러한 컴퍼넌트들은 각각 생성할 때 create event가 만들어 집니다. : pagecreate, checkboxradiocreate, etc..

이 각각의 컴포넌트들은 자신의 _create () method를 정의합니다. 이것들은 DOM tree 안에 새로운 HTML element들을 만들게 되죠. 일반적으로 _create () method 정의 바로 전에 요 전에 우리가 만든 attributes 들 처럼 options object가 정의 됩니다.

selectmenu component 를 만들기 위해 정의 된 options object를 보세요.

Definition of options in selectmenu component of jQuery Mobile

$.widget( "mobile.selectmenu", $.mobile.widget, {
    options: {
        theme: null,
        disabled: false,
        icon: 'arrow-d',
        iconpos: 'right',
        inline: null,
        corners: true,
        shadow: true,
        iconshadow: true,
        menuPageTheme: 'b',
        overlayTheme: 'a',
        hidePlaceholderMenuItems: true,
        closeText: 'Close',
        nativeMenu: true,
        initSelector: "select:not(:jqmData(role='slider'))"
    },

HTML 안에 컴포넌트와 연결된 element 의 attribute 들과 이 option들이 연결돼 있다는 걸 보셨었죠? 그 의미는 뭐냐 하면 HTML 의 <select> element와 관련해서 data-theme, data-disabled, data-icon, 등을 사용할 수 있다는 걸 말합니다. 디폴트 값들은 jQuery Mobile 코드 안에 object 정의 부분에 정해져 있습니다.

저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

윈도우 생성 과정 이해하기 (0)	2012.10.16
$.mobile.loadPage (url, options) method 사용하기 (0)	2012.10.15
$.mogile.changePage(toPage,options) method 로 페이지 이동하기 (0)	2012.10.13
링크 관련 jQuery Mobile 내부 flow 알아보기 2 (0)	2012.10.09
링크 관련 jQuery Mobile 내부 flow 알아보기 1 (0)	2012.10.08
컴포넌트에 이벤트 생성하고 사용하기 (0)	2012.10.04
컴포넌트에 메소드 추가하기 (0)	2012.10.04
Ajax 로 컴포넌트 사용하기 (0)	2012.10.03
컴포넌트에 파라미터 전달하기 (0)	2012.10.03
컴포넌트 생성 여부 체크하는 방법 (0)	2012.10.03

jQuery Mobile/JQM Tutorial

컴포넌트에 이벤트 생성하고 사용하기

2012. 10. 4. 05:18 | Posted by 솔웅

Create and manage events on the component

컴포넌트 안에 새로운 이벤트를 생성할 수 있습니다. 컴포넌트와 연관된 엘리먼트에서 간단하게 trigger (eventName) method 만 call 해 주면 됩니다. 이 메소드는 jQuery 의 standard 메소드 입니다. 그 이벤트는 jQuery 에서 bind () method를 사용해서 manage 될 겁니다.

예를 들어 글자색이 바뀌고 배경색이 바뀌는 두개의 이벤트를 생성할 수 있습니다. (changecolor event, changebackgroundcolor event)

이 이벤트가 발생해서 글자색과 배경색이 바뀌면 setColor () method 부분을 alter 해야 합니다.

우선 컴퍼넌트 부분을 볼까요.

Trigger an event when the color changes

(function ($, undefined ) 

{

  // component definition

  $.widget ("mobile.myplugin", $.mobile.widget, 

  {

    options : {

      backgroundColor : "grey",

      color : "blue"

    },

    _create: function () 

    {

      var $elem = this.element;

      $elem.css ( { "background-color" : this.options.backgroundColor, 

                    color : this.options.color } );

    },

    show : function ()

    {

      var $elem = this.element;

      $elem.show ();

    },

    hide : function ()

    {

      var $elem = this.element;

      $elem.hide ();

    },

    setColors : function (color, backgroundcolor)

    {

      var $elem = this.element;

      if (color != this.options.color) 

        $elem.trigger ("changecolor", [color]);

      if (backgroundcolor != this.options.backgroundColor) 

        $elem.trigger ("changebackgroundcolor", [backgroundcolor]);

      this.options.color = color;

      this.options.backgroundColor = backgroundcolor;

      $elem.css ( { "background-color"
: this.options.backgroundColor, 

                    color : this.options.color } );

    },

    getColors : function ()

    {

      return { color : this.options.color, 

               backgroundColor : this.options.backgroundColor };

    }

  });

  // taking into account of the component when creating the window

  // or at the create event

  $(document).bind ("pagecreate create", function (e) 

  { 

    $(":jqmData(role=myplugin)", e.target).myplugin ();

  });

}) (jQuery);

trigger () method 는 첫번째 파라미터로 생성된 이벤트의 이름을 갖습니다. 그리고 두번째 파라미터로는 이벤트에 전달 될 내용을 배열로 갖습니다. (여기서는 [color] 와 [backgroundcolor]입니다.)

이 이벤트는 아래와 같이 자바스크립트에서 handle 될 수 있습니다.

Taking account of the event

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

  <script src=jquery.mobile/myplugin.js></script>

</head> 

<body> 

<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>

  <div data-role=content>

    <p> Window content </p>  

    <div id=plug1 data-role=myplugin> 

      <p>This is my component</p>

    </div>

  </div>

</div>

</body>

</html>

<script>

$("#plug1").bind ("myplugincreate", function ()

{

  $(this).myplugin ("setColors", "white", "gainsboro");

  var colors = $(this).myplugin ("getColors");

  alert ("color = " + colors.color + 

         "\n backgroundColor = " + colors.backgroundColor);

});

$("#plug1").bind ("changecolor", function (event, color)

{

  alert ("changecolor : " + color);

});

$("#plug1").bind ("changebackgroundcolor", function (event, backgroundcolor)

{

  alert ("changebackgroundcolor : " + backgroundcolor);

});

</script>

convention10.html

myplugin3.js

저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

$.mobile.loadPage (url, options) method 사용하기 (0)	2012.10.15
$.mogile.changePage(toPage,options) method 로 페이지 이동하기 (0)	2012.10.13
링크 관련 jQuery Mobile 내부 flow 알아보기 2 (0)	2012.10.09
링크 관련 jQuery Mobile 내부 flow 알아보기 1 (0)	2012.10.08
두개의 이벤트 하나로 다루기, jQuery Mobile built in Components (0)	2012.10.04
컴포넌트에 메소드 추가하기 (0)	2012.10.04
Ajax 로 컴포넌트 사용하기 (0)	2012.10.03
컴포넌트에 파라미터 전달하기 (0)	2012.10.03
컴포넌트 생성 여부 체크하는 방법 (0)	2012.10.03
나만의 jQuery Mobile 컴포넌트 만들기 (0)	2012.10.02

jQuery Mobile/JQM Tutorial

컴포넌트에 메소드 추가하기

2012. 10. 4. 04:40 | Posted by 솔웅

Add methods to the component

지금까지 해온 예제에는 컴포넌트 안에 오직 _create () method 만 있습니다. 컴포넌트 밖에서는 사용되지 않는 메소드죠. (prefix "_"를 사용하는 것은 private method라는 의미입니다.). 이 콤포넌트에 외부로부터 call 해서 사용할 수 있는 여러분의 메소드를 추가해 넣을 수 있습니다.

컴포넌트에 show (), hide (), setColor (color, backgroundcolor) 그리고 getColor () methods 들을 정의하겠습니다.

The show () method to display the component,
The hide () method to hide it,
The setColor (color, backgroundcolor) method can change the colors used,
The getColor () method returns a { color, backgroundColor } object containing the colors currently in use.

Defining methods on the component

(function ($, undefined ) 

{

  // component definition

  $.widget ("mobile.myplugin", $.mobile.widget, 

  {

    options : {

      backgroundColor : "grey",

      color : "blue"

    },

    _create: function () 

    {

      var $elem = this.element;

      $elem.css ( { "background-color" : this.options.backgroundColor, 

                    color : this.options.color } );

    },

    show : function ()

    {

      var $elem = this.element;

      $elem.show ();

    },

    hide : function ()

    {

      var $elem = this.element;

      $elem.hide ();

    },

    setColors : function (color, backgroundcolor)

    {

      var $elem = this.element;

      this.options.color = color;

      this.options.backgroundColor = backgroundcolor;

      $elem.css ( { "background-color" : this.options.backgroundColor, 

                    color : this.options.color } );

    },

    getColors : function ()

    {

      return { color : this.options.color, 

               backgroundColor : this.options.backgroundColor };

    }

  });

  // taking into account of the component when creating the window

  // or at the create event

  $(document).bind ("pagecreate create", function (e) 

  { 

    $(":jqmData(role=myplugin)", e.target).myplugin ();

  });

}) (jQuery);

setColor () method는 options object에서 세팅할 때 받은 색을 저장합니다. 이렇게 색을 저장한 후에는 getColor () 같은 다른 메소드에서 그 저장된 값을 사용할 수 있게 됩니다.

컴포넌트에 새로운 메소드들을 정의했습니다. 이것을 어떻게 자바스크립트로 사용하는지에 대해 살펴 보겠습니다.

Use the methods created on the component

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

  <script src=jquery.mobile/myplugin.js></script>

</head> 

<body> 

<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>

  <div data-role=content>

    <p> Window content </p>  

    <div id=plug1 data-role=myplugin> 

      <p>This is my component</p>

    </div>

  </div>

</div>

</body>

</html>

<script>

$("#plug1").bind ("myplugincreate", function ()

{

  $(this).myplugin ("setColors", "white", "gainsboro");

  var colors = $(this).myplugin ("getColors");

  alert ("color = " + colors.color + 

         "\n backgroundColor = " + colors.backgroundColor);

});

</script>

정의된 메소드들은 컴포넌트가 생성된 후에 사용 가능합니다. 그래서 myplugincreate event 가 사용 됩니다.

어떻게 컴포넌트에 있는 메소드를 call 하는지 잘 보세요.

Calling setColors () method of myplugin component

$(this).myplugin ("setColors", "white", "gainsboro");

메소드 이름이 invoke 할 때의 첫번째 인자 입니다. 그 다음에 사용 할 수 있는 파라미터들이 옵니다. 모든 인자들은 스트링으로 전달 됩니다.

convention09.html

myplugin2.js

저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

$.mogile.changePage(toPage,options) method 로 페이지 이동하기 (0)	2012.10.13
링크 관련 jQuery Mobile 내부 flow 알아보기 2 (0)	2012.10.09
링크 관련 jQuery Mobile 내부 flow 알아보기 1 (0)	2012.10.08
두개의 이벤트 하나로 다루기, jQuery Mobile built in Components (0)	2012.10.04
컴포넌트에 이벤트 생성하고 사용하기 (0)	2012.10.04
Ajax 로 컴포넌트 사용하기 (0)	2012.10.03
컴포넌트에 파라미터 전달하기 (0)	2012.10.03
컴포넌트 생성 여부 체크하는 방법 (0)	2012.10.03
나만의 jQuery Mobile 컴포넌트 만들기 (0)	2012.10.02
Virtual Events 알아보기 (0)	2012.09.30

jQuery Mobile/JQM Tutorial

Ajax 로 컴포넌트 사용하기

2012. 10. 3. 21:15 | Posted by 솔웅

Use the component with Ajax

Ajax call로 컴포넌트를 insert 하면 훨씬 다양하게 사용될 수 있습니다. 이렇게 Ajax 를 call 하는 두가지 방법을 알아보겠습니다. 컴포너트의 creation method를 정의하는 방법과 create event를 사용하는 방법 이렇게 두가지 입니다. 둘 다 결과는 같게 나옵니다.

Using the creation method of the component

myplugin () method를 사용하는 것은 Ajax로 myplugin component를 생성하는 첫번째 방법입니다. 컴포넌트의 creation method에는 컴포넌트와 같은 이름을 사용합니다. 그리니까 myplugin () method는 myplugin component를 생성할 겁니다.

Insert the component with Ajax using the myplugin () method

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

  <script src=jquery.mobile/myplugin.js></script>

</head> 

<body> 

<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>

  <div data-role=content>

    <p> Window content </p>  

  </div>

</div>

</body>

</html>

<script>

$.ajax (

{ 

  url : "action.php", 

  complete : function (xhr, result)

  {

    if (result != "success") return;

    var response = xhr.responseText;

    $("#home div:jqmData(role=content)").append (response);

    $("#plug1").myplugin ();

  }

});  

</script>

이 myplugin () method call은 HTML 안에서 이루어 졌습니다.

action.php file

<?
$html = "";
$html .= "<div id=plug1>";
$html .= "<p>This is my component</p>";
$html .= "</div>";

echo utf8_encode ($html);
?>

action.php

convention08.html

myplugin.js

(Apache,PHP 서버 까신 후 로컬에서 테스트 해 보세요.)

Using create event

Using the create event is the second approach to create a component with Ajax.

create event를 사용하는 것은 Ajax로 컴포넌트를 생성하는 두번째 접근법입니다.

Insert the component with Ajax using the create event

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

  <script src=jquery.mobile/myplugin.js></script>

</head> 

<body> 

<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>

  <div data-role=content>

    <p> Window content </p>  

  </div>

</div>

</body>

</html>

<script>

$.ajax (

{ 

  url : "action.php", 

  complete : function (xhr, result)

  {

    if (result != "success") return;

    var response = xhr.responseText;

    $("#home div:jqmData(role=content)").append (response);

        $("#home").trigger ("create");

  }

});  

</script>

create event는 컴포넌트를 포함한 HTML element에서 generate 됩니다. (여기서는는 idenrifire 가 home임 )

action.php file

<?
$html = "";
$html .= "<div id=plug1 data-role=myplugin>";
$html .= "<p>This is my component</p>";
$html .= "</div>";

echo utf8_encode ($html);
?>

이전 PHP 코드와 다른 점은 컴포넌트를 정의할 때 data-role="myplugin" attribute 를 반드시 정해줘야 한다는 겁니다. 그렇게 하면 플러그인된 자바스크립트에서와 같이 create event가 진행될 때 이 attribute가 있는 HTML element를 찾게 됩니다.

convention09.html

myplugin.js

action.php

create event processing in the plugin

// taking into account of the component when creating the window

// or at the create event

$(document).bind ("pagecreate create", function (e) 

{ 

  $(":jqmData(role=myplugin)", e.target).myplugin ();

});

e.target parameter는 identifier가 home으로 지정된 identifier 가 있는 <div> element 와 연계 됩니다. 이것이 create event 유발하는 element 입니다.

The <div> element associated with the window causes the create event

$("#home").trigger ("create");

저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

링크 관련 jQuery Mobile 내부 flow 알아보기 2 (0)	2012.10.09
링크 관련 jQuery Mobile 내부 flow 알아보기 1 (0)	2012.10.08
두개의 이벤트 하나로 다루기, jQuery Mobile built in Components (0)	2012.10.04
컴포넌트에 이벤트 생성하고 사용하기 (0)	2012.10.04
컴포넌트에 메소드 추가하기 (0)	2012.10.04
컴포넌트에 파라미터 전달하기 (0)	2012.10.03
컴포넌트 생성 여부 체크하는 방법 (0)	2012.10.03
나만의 jQuery Mobile 컴포넌트 만들기 (0)	2012.10.02
Virtual Events 알아보기 (0)	2012.09.30
네임 스페이스 사용하기 (0)	2012.09.30

공지사항

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

'분류 전체보기'에 해당되는 글 1553건

Link to another HTML page located on another server

Disable the loading of an HTML page with Ajax

Dialog windows

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

'My Shelter > tale' 카테고리의 다른 글

Link to an email address or phone number

Link to a window in the same HTML page

Link to a window in another HTML page on the same server

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

'My Shelter > tale' 카테고리의 다른 글

'My Shelter > tale' 카테고리의 다른 글

'Corona SDK > Corona SDK News' 카테고리의 다른 글

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

Using the creation method of the component

(Apache,PHP 서버 까신 후 로컬에서 테스트 해 보세요.)

Using create event

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

티스토리툴바