Making Your First Module - Hello World

이 섹션에서는 모듈 생성 과정에 대한 overview를 보여 드릴 겁니다. 그냥 따라하시기만 하시면 됩니다. 좀 더 자세한 테크닉을 원하시면 Creating a new module  를 보세요.이 섹션에서 설명된 대부분의 내용은 좀 더 자세한 설명들이 Documentation 안에있습니다.

<?php

class HelloWebModule extends WebModule
{
  protected $id='hello';
  protected function initializeForPage() {
    $this->assign('message', 'Hello World!');
  }
}

{include file="findInclude:common/templates/header.tpl"}

<h1 class="focal">{$message}</h1>

{include file="findInclude:common/templates/footer.tpl"}

[module]
title="Hello"
disabled = 0
protected = 0
search = 0
secure = 0

Viewing the module

여기까지만 하면 여러분의 웹 브라우저에서 여러분의 새로운 모듈을 보실 수 있을 겁니다. 여러분 사이트가 8888이라고 가정하고 여러분의 컴퓨터의 브라우저에 http://localhost:8888/hello 를 넣으세요. 성공했다면 아래와 같은 화면을 보실 수 있을 겁니다.

지난주 화요일 첫출근을 해서 개발환경 세팅하고 새로운 것들 세팅하면서 보냈어요.

주말엔 볼일이 있어서 뉴저지 까지 다녀오고..

주말도 장거리 여행으로 시간을 모두 보냈네요.

지난 주 Corona SDK 관련 정리할 것들 하나도 정리 못했는데... 벌써 일요일 밤이 됐어요.

지금 정리할 시간은 없고 공부할 것들 메모를 해 놔야 겠어요. 나중에 시간이 되면 차근차근 공부 하려구요.

1. 새로운 Lua File System 이 곧 선보일 거라는 소식입니다.

2. Coder/s Deilemma 라는 제목이 관심이 가서 한번 정리해 두고 싶네요.

3. 모바일 Ads 회사인 inneractive 사가 프로모션을 하네요. 당선작은 선물이 Kindle Fire 라니까 한번 응모해 보고 싶군요.

4. Game Engine Dating Guide 라는 글도 관심이 갑니다. 도움이 많이 될 것 같아요.

5. 수요일의 FAQ 가 이번주에도 나왔습니다. 반드시 정리하고 넘어가야 할 사항이죠!

6. Blast Monkeys 라는 앱을 개발한 개발자가 성공스토리를 강의하는 내용입니다.

7. Property Call Back Tutorial 입니다.

정리해 두고 싶은게 너무 많군요.

새로 join 한 프로젝트에서 사용하는 테크닉도 Research 해야 하고.

하나하나 해 나가다 보면 다 되겠죠 뭐...

다시 신나는 월요일이 시작 됩니다......

MODO Labs 의 Kurogo 시스템을 사용하게 됐습니다.

이전에는 몰랐던 새로운 기술을 배워야 되서 아주 신나네요.

제 스타일대로 Kurogo 웹사이트의 튜토리얼을 한번 쭉 정리해야겠습니다.

Kurogo Documentation

Kurogo Developer’s Guide¶

Kurogo 프레임워크는 PHP base 웹 어플리케이션 입니다. 광범위한 모바일 디바이스에 대한 서비스와 정보를 효율적으로 전달하는 것을 체계적으로 도와주는 툴입니다. MIT 프레임워크를 기반으로 했고 오픈 소스 프로젝트 입니다. 이 프로젝트는 확장성 있고 customizable 한 다양한 데이터 소스의 현재의 모바일 버전에 modular way 로 기능을 제공합니다.

Kurogo Framework에는 아래와 같은 것들이 포함 돼 있습니다.

• 디바이스의 특장을 감지하고 해당 디바이스에 알맞게 콘텐트를 display 하는 매커니즘
• 다양한 외부 소스로부터 데이터를 검색하고 parsing하고 display 하는것을 객체 지향적으로 처리함
• consistent한 유저 인터페이스를 손쉽게 개발할 수 있도록 테마별로 정리하고 재사용할 수 있도록 utilize해 효과적으로 탬플릿화 할 수 있도록 도와 줌
• 디렉토리와 뉴스 그리고 이벤트 정보들을 모으기 위해 prebuilt 와 customizable 모듈을 같이 사용할 수 있도록 지원
• 컨텐트와 관리자모드로의 접근시 이를 인증하고 검증하는 시스템

아래 내용들은 프로젝트 소스코드와 그 기능들에 대해 알 수 있는 가이드 입니다.

Overview

Kurogo는 다양한 종류의 모바일 기기에 delivering high quality와 data driven customizable content를 지원하기 위해 만들어진 PHP 프레임워크입니다. Kurogo는 다양한 source로부터 content를 받도록 해 주고 이를 피쳐폰이나 초기 스마트폰에서부터 최신 디바이스와 태블릿같은 광범위한 모바일 기기에 이를 표현할 수 있도록 해 줍니다. 모바일 웹 컴포넌트는 PHP를 사용한 웹 베이스의 어플리케이션 처럼 있습니다. 이 어플리케이션은 웹 서버에 호스트 되고 유저는 모바일 기기에 있는 웹 브라우저를 통해 이곳에 접근합니다.

이것은 liberal 오픈소스 MIT 라이센스를 사용해서 만들어 졌습니다. 이 의미는 여러분은 공짜로 이 제품을 다운로드 받아 설치하고 카피하고 수정하고 등등 여러분의 입맛에 맞게 고쳐서 사용할 수 있다는 겁니다.

Modules¶

Kurogo를 구성하는 부분 부분들은 Module입니다. 각각의 페이지 request는 url을 parse 하는 모듈에 의해서 처리됩니다. 그리고 나서 그 페이지를 표시합니다. 모듈은 코드의 조각들로 구성돼 있습니다. 그것들은 데이터를 처리하는 외부의 서비스들과 연결돼 있죠. 그리고 그 결과를 HTML과 CSS 표준을 사용해서 디바이스에 display 합니다. Kurogo는 여러 다양한 외부의 source들로부터 데이터를 받을 수 있도록 디자인 돼 있습니다. 그리고 그 데이터를 parse 하고 처리하고 화면에 출력하기 알맞는 포맷으로 준비합니다.

일반적인 유저 request는 데이터 소스를 query 하는 것을 포함하고 있습니다. 그리고 Data Parser를 사용해서 그 결과 data를 parsing 합니다. 그리고나서 그 모듈은 그 데이터를 template 엔진으로 pass 합니다. 이 탬플릿 엔진은 HTML,CSS, javascript 등을 사용해서 device에 결과를 출력하게 되는 것이죠.

Device Detection¶

 Kurogo의 중요한 기능중 하나는 현재 사용하고 있는 기기가 어떤 것인지 감지하는 것 입니다. 요즘의 모바일 기기들은 각각 다른 capability를 가지고 있고 그 성능도 각기 다릅니다. 그래서 현재 사용하는 디바이스를 구분해 내는 것은 유저에게 결과물을 보기 좋게 해당 디바이스로 제공하기 위해 아주 중요한 기능입니다.

Kurogo 는 pagetype과 platform에 따라 디바이스를 분류합니다. pagetype은 디바이스의 기본 capability를 기반으로해서 분류하는 겁니다. 이것은 CSS 지원이나 javascript, 이미지 처리 등의 기능에 따라 단계별로 구분 됩니다. platform은 그 디바이스가 사용하는 시스템이나 브라우저를 기반으로 분류하는 겁니다. 이러한 분류들은 해당 디바이스에 최선의 퍼포먼스를 보여주기 위해 여러 방법으로 사용됩니다. Kurogo는 이 각각의 기기별로 일반적인 유저 인터페이스 element들과 모듈들을 포함해 최선의 결과를 보여주기 위한 template과 CSS 파일의 시리즈들이 있습니다.

Customization¶

초기에 Kurogo는 customize 되기 위해 built 됐습니다. 여러분은 모듈로 어떻게 데이터를 get 하는지, 어떻게 이것을 parse 하는지 그리고 유저에게 이것이 어떻게 보여지는지에 대해 완벽하게 콘트롤 할 수 있습니다. 소프트웨어의 modular 세계는 여러분에게 어떤 단계에서든지 그 소스를 customize 할 수 있도록 개방하고 있습니다.

Data Customization¶

각각의 모듈은 여러분에게 여러분의 어플리케이션으로 data를 가져오기 위한 데이터 소스와 프로세스 방법을 선택할 수 있는 기회를 드립니다. 데이터를 retrieve하고 parsing하는 구체적인 방법을 추상화 했기 때문에 여러분의 어플리케이션은 아주 다양한 데이터 소스로 respond 할 수 있습니다. 대부분의 모듈들은 DataModel의 subclass를 사용하게 됩니다. 각 모듈은 Data Retriever라는 객체를 사용합니다. 이것은 data를 retrieve하고 Dataparser 객체를 사용해서 그 데이터를 parsing 하게 됩니다. DataParser 객체는 결과 data를 받고 그 데이터에 맞는 PHP structure를 생성합니다. configuration을 이용해서 여러분은 DataRetriever와 DataParser를 customize 할 수 있습니다. 또한 여러분 site의 데이터를 여러분만의 방식으로 다루기 위해 여러분만의 Data Retriever와 Data Parser도 만들 수있습니다.

Code Customization¶

각각의 모듈은 PHP 객체입니다. 이것은 WebModule 클래스로부터 상속됩니다. 개발자들은 직접 모듈을 생성해서 사용할 수도 있고 기존에 존재하는 것을 subclass 해서 사용할 수 있습니다. extending 할 때 여러분은 단지 특정 메소드를 override 하기만 하면 됩니다. 이렇게 함으로서 여러분은 로직이나 코딩보다도 기능이나 begavior에 집중할 수 있어서 여러분의 모듈을 독창적으로 만들 수 있도록 도와줍니다.

Output Customization¶

그 데이터가 출력되도록 준비가 됐으면 여러분은 그것을 여러분이 원하는대로 표시할 수 있는 몇가지 방법이 있습니다. 각각의 페이지는 HTML 문서로 구성돼 있습니다. 이러한 탬플릿들은 customize 될 수 있고 필요한대로 override 할 수 있습니다. 그리고 common user interface element와 각 디바이스별로 알맞게 customize 된 pieces 을 포함한 fragments들에 대한 라이브러리도 있습니다. HTML과 함께 여러분은 스타일 쉬트도 customize 하실 수 있습니다.

*** Dialogs

Creating dialogs

page anchor link 에 data-rel="dialog" 속성을 추가하면 어느 페이지에서든지 dialog 화면을 display 할 수 있습니다. 이 dialog 속성이 적용되면 프레임워크는 rounded corner 로 표시하도록 style을 추가하고 페이지 둘레에 margin을 넣고 dialog 만 선명하게 보이도록 그 이외의 부분은 어두운 background로 처리합니다.

<a href="foo.html" data-rel="dialog">Open dialog</a>

jQuery Mobile DOC 에 있는 버튼 링크는 아래 소스만 올립니다.

<a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a>

직접 보시려면 모바일에서 여기로 접속해서 보세요.

Transitions

디폴트로 dialog 는 pop transition으로 열릴겁니다. 다른 페이지들 처럼 이 dialog에도 다른 화면전환 효과를 적용할 수 있습니다. data-transition 속성을사용하세요. 그런데 이게 좀 더 dialog 화면처럼 보이도록 하려면 pop이나 slideup, flip 화면전환 효과를 사용하실 것을 권합니다.

<a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a>

jQuery Mobile DOC 에 있는 버튼 링크는 아래 소스만 올립니다.

<div>
    <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">data-transition="pop"</a>
    <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="slidedown">data-transition="slidedown"</a>
    <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="flip">data-transition="flip"</a>
</div>

직접 보시려면 모바일에서 여기로 접속해서 보세요.

Closing dialogs

dialog안에 있는 아무 링크라도 click 되면은 프레임워크는 자동적으로 그 dialog를 닫고 해당 페이지로 화면을 전환합니다. cancel 버튼을 dialog 안에 넣고 싶은 경우 버튼을 만들고 링크에 data-rel="back"이라는 속성을 넣어 주면 됩니다. 이 기능은 dialog 뿐만이 아니라 다른 페이지에서도 유용하게 사용될 수 있으며 non-JS 디바이스에서도 사용하실 수 있습니다.

자바스크립트가 생성한 링크에 대해서는 그냥 href attribute를 #로 세팅하고 data-rel="back" 속성을 사용하세요. 그리고 프로그래밍으로 dialog의 close()메소드를 call 하셔도 됩니다.

예) $('.ui-dialog').dialog('close').

Setting the close button text

페이지 플러그 인 처럼 dialog의 close 버튼 text를 option이나 data 속성을 통해서 세팅할 수도 있습니다. option은 mobileinit 이벤트와 $.mobile.dialog.prototype.options.closeBtnText 프로퍼티를 사용해서 모든 dialog에 적용되도록 세팅할 수 있습니다. 그러면 여러분이 원하는 텍스트에 이 기능을 적용할 수 있습니다. 또는 data-close-btn-text 속성을 여러분의 markup에서 text 에 지정해 줄 수 있습니다.

History & Back button behavior

Dialog는 한 페이지 내에서 표시되고 없어지는 것이기 때문에 프레임워크는 이 dialog를 hash state history tracking에 포함시키지 않습니다. 즉 dialog 화면은 back 버튼을 눌렀을 때 뜨지 않을 거라는 거죠. 예를 달어 여러분이 한 페이지를 보고 있고 그 페이지에서 dialog를 열고 또 닫았다고 합시다. 그리고 나서 다른 페이지로 갔을 때 여기서 브라우저의 back 버튼을 누르면 원래의 페이지로 돌아가고 dialog 화면으로는 가지 않을 겁니다.

Styling & theming

Dialog는 다른 theme swatch들로 style 될 수 있습니다. 다른 일반적인 페이지들과 마찬가지로 data-theme 속성을 header,content,footer container들에 추가하시면 됩니다. 아래에 예제가 있습니다.

jQuery Mobile DOC 에 있는 버튼 링크는 아래 소스만 올립니다.

<a href="dialog-alt.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">An alternate color scheme</a>

직접 보시려면 모바일에서 여기로 접속해서 보세요.

Dialog는 overlay layer 위에 표시됩니다. 이 overlay는 디폴트로 swatch A content color를 적용받게 됩니다. 이것을 바꾸고 싶으면 data-overlay-them 속성을 page wrapper에 넣으시면 됩니다. 아래 swatch e 로 세팅한 예제가 있습니다.

jQuery Mobile DOC 에 있는 버튼 링크는 아래 소스만 올립니다.

<a href="dialog-overlay.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Custom overlay swatch</a>

직접 보시려면 모바일에서 여기로 접속해서 보세요.

Dialog는 여러개의 버튼이 있는 control sheet 처럼 사용될 수도 있습니다. dialog의 inner container element에서 top margin을 없애면 됩니다. 예를 들어 dialog 페이지가 my-dialog라는 클래스를 가지고 있다고 한다면 여러분은 이 dialog를 top에 고정시키기 위해 CSS를 사용해야 합니다.: .ui-dialog.my-dialog .ui-dialog-contain { margin-top: 0 } 혹은 모든 dialog에 이런 스타일을 적용하셔야 합니다. .ui-dialog .ui-dialog-contain { margin-top: 0 } 사용 예제는 아래에 있습니다.

jQuery Mobile DOC 에 있는 버튼 링크는 아래 소스만 올립니다.

<a href="dialog-buttons.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="slidedown">Share photos...</a>

직접 보시려면 모바일에서 여기로 접속해서 보세요.

Dialog width and margins

가독성이 있도록 하기 위해  dialog는 디폴트 max-width를 500픽셀로 가지고 있습니다. (여기에 15픽셀의 padding이 사방에 있습니다.) 그리고 더 큰 스크린에서는 10%의 top margin이 주어집니다. 그런데 더작은 스마트폰 화면 같은데서는 이것이 깨지기도 합니다. 이 스타일을 오버라이드 하려면 아래 CSS를 고쳐서 사용하세요.

.ui-dialog .ui-header,
.ui-dialog .ui-content,
.ui-dialog .ui-footer {
 max-width: 500px;
 margin: 10% auto 15px auto;
}

*** Page transitions

CSS 기반의 화면전환을 포함한 jQuery Mobile 프레임워크의 화면 전환 효과는 Ajax navigatin 과 함께 어느 link나 form submission에도 적용될 수가 있습니다.

아래는 jQuery Tutorial DOC 에서 제공하는 Sampler 의 이미지와 소스코드 입니다.

모바일에서 여기로 접속하셔서 직접 화면 전환 효과를 체험해 보세요.

<table margin="0">
    <tr>
        <th><h3>fade</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="fade" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>pop</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="pop" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="pop" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>flip</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flip" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="flip" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>turn</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="turn" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="turn" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>flow</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flow" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="flow" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slidefade</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidefade" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="slidefade" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slide</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slide" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="slide" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slideup</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slideup" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="slideup" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slidedown</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="slidedown" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>none</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">page</a></td>
    </tr>
</table>

fade transition 만 볼 수 있으신가요? 모든 화면전환 효과를 보시려면 3D transform이 지원되는 브라우저라야 합니다. 3D 를 제대로 지원하지 않는 (Android 2.x 같은) 곳이서는 디폴트인 fade 효과가 보이게 될 겁니다.

Setting a transition on a link or form submit

디폴트로 프레임워크는 fade 화면전환을 지원합니다. 다른 화면전환효과를 원하시면 data-transition 속성을 링크에 추가하세요.

<a href="index.html" data-transition="pop">I'll pop</a>

Back 버튼이 눌려지면 이 프레임워크는 이 페이지를 보이도록 했던 페이지로 돌아갈 때 reverse version을 자동적으로 사용합니다. 이 기능을 명시하려면 data-direction="reverse" 속성을 링크에 넣어 주시면 됩니다.

Global configuration of transitions

만약 디폴트 화면전환을 다른것으로 하고 싶으면 defaultPageTransition 글로벌 옵션을 세팅하면 됩니다. Dialog는 defaultDialogTransition을 세팅하면 됩니다.

Browser support and performance

모든 화면전환은 CSS keyframe animation과 -webkit vendor prefixed rule 과 -moz rule을 사용해 만들어 졌습니다. -webkit 은 iOS,Blackberry, Android, Safari, Chrome browsers 에 적용되고 -moz 는 Firefox 브라우저에 적용 됩니다. keyframe animation과 부드러운 화면전환을 지원하는 것은 브라우저 버전이나 하드웨어에 따라 약간씩 다르게 나타날 수가 있습니다. 만약 animatin이 지원되지 않는 환경이라면 그냥 화면 전환 효과 없이 페이지 이동이 될 겁니다.

Defining fallback transitions for non-3D support

fade를 제외한 모든 화면전환 효과는 기본적으로 3D transform 이 지원 되어야 합니다. 이 기능이 지원되지 않는 디바이스들에서는 모든 화면전환 효과가 fade 화면전환으로 바뀌어서 display 될 겁니다. 이 경우에도 부드럽게 화면이 움직이는 효과는 지원이 됩니다. 안드로이드 3.0 같은 경우도 기술적으로는 3D transform 이 지원되지만 애니메이션 퍼포먼스가 별로인 경우도 있습니다. 그렇기 때문에 이 기능이 모든 디바이스에서 제대로 동작한다고 말할 수는 없지만 최대한 효과적으로 동작하도록 작업을 하고 있습니다.

3D transform이 적용되지 않는 경우 그에 대한 대비책으로 사용될 수 있는 화면 전환 효과를 설정할 수도 있습니다. 우리는 이것을 fade로 설정해 놓고 있습니다. 만약 아래처럼 세팅을 해 놓으면 화면전환효과가 특별히 없이 페이지 이동이 일어날 겁니다.

$.mobile.transitionFallbacks.slideout = "none"


Setting a max width for transitions

창의 width 가 특정 pixel width 보다 클 경우 transition을 none으로 세팅해서 디폴트로 화면전환 효과를 사용하지 않도록 할 수 있습니다. 이 기능은 큰 스크린의 경우 화면 전환 효과가 별로일 수 있을 때 유용하게 사용할 수 있습니다. 이 기능은 $.mobile.maxTransitionWidth 글로벌 옵션을 사용해서 세팅할 수 있습니다.

이 글로벌 옵션의 디폴트는 false로 돼 있습니다. 이 옵션의 value로는 아무 숫자나 false value 가 올 수 있습니다. 만약 이 value 가 false가 아니면 핸들러는 윈도우의 크기가 특정한 value 보다 클 경우 transition을 none 으로 취급합니다.

Creating custom transitions

jQuery Mobile은 custom transition도 추가할 수 있도록 지원합니다. 이 기능은 $.mobile.transitionHandlers dictionary 에 넣으시면 되는데요.

이걸 이용하면 여러분 앱에 여러분이 원하는 아주 다양한 화면전환 효과를 사용할 수가 있습니다.

Page titles

Titles in Ajax navigation

jQuery Mobile로 만든 페이지가 처음 로드될 때 그리고 나서 link를 클릭하거나 form 을 submit 할 때 Ajax는 대상이 되는 page의 내용을 pull 하게 됩니다.

DOM내에 두개의 페이지 모두를 가지는 것이 animated 된 화면 전환을 위해 꼭 필요합니다. 그런데 이러한 이면에는 page title이 항상 첫번째 화면의 title이 남아있게 된다는 문제가 있습니다. 이것을 해결하기 위해 jQuery Mobile은 Ajax를 통해 page title을 pull 해서 자동적으로 parse 합니다. 그리고 나서 title 속성을 바꾸는 겁니다.

Titles in multi-page templates

multi-page 문서에서도 이와 비슷한 방법으로 진행 됩니다. 단지 모든 페이지들은 common title을 share 하고 있는게 다른것이죠. 그래서 각각의 페이지마다

data-title 속성을 넣어서  각각의 페이지마다 title을 다르게 할 수 있도록 합니다. 그래서 HTML 문서의 title은 자동적으로 화면에 display 되는 page의 data-title 값으로 바뀌게 됩니다.

<div data-role="page" id="foo" data-title="Page Foo">

</div><!-- /page -->

jQuery Mobile은 simple page linking convention을 위해 디자인 됐습니다. 그냥 일반적으로 하듯이 링크를 거시면 됩니다. 그러면 jQuery Mobile이 필요하면 Ajax를 이용해서 single-page 모델내의 페이지 request를 자동적으로 처리할 겁니다. 만약 Ajax가 가능하지 않으면 (same-domain url 이 아니거나 링크에서 특정 속성을 사용한다거나 해서) Ajax 대신에 일반 http request 가 사용됩니다.
이 모델의 goal은 특정 configuration 없이 그냥 일반적인 방법으로 개발자가 쉽게 웹 사이트를 만들도록 하는데 있습니다. 보기 좋은 화면과 native 와 유사한 방법으로 말이죠.

Default link behavior: Ajax

동적인 화면전환을 하려면 Ajax를 통해서 해당 페이지들이 모두 로디 되어야 합니다. 이것을 구현하려면 프레임워크는 그 링크의 href를 파스해서 Ajax request(Hijax)를 formulate 하고 loading spinner를 display  해야 합니다. 이러한 과정은 jQuery Mobile 에 의해 자동적으로 수행 됩니다.
Ajax request 가 성공적이면 새 페이지의 내용은 DOM에 추가 됩니다. 모든 모바일 위젯들은 자동 initialize 됩니다. 그리고 나서 새 페이지는 화면전환효과를 주면서 스크린에 표시 됩니다. 만약 Ajax request 가 실패하면 프레임워크는 작은 에러 메세지 overlay를 잠시 display 하고 없앱니다. 그래서 Ajax request 가 실패했다고 해서 navigation 흐름이 멈추지는 않습니다. 이 에러메세지 관련해서는 example of the error message 를 보세요.

Note :  Ajax navigation active로 multipage document로 링크를 걸지는 못합니다. 왜냐하면 프레임워크는 첫번째로 찾은 페이지만 로드하기 때문입니다. 그 페이지의 full set 을 로드 하지는 않습니다. 이럴 경우에는 Ajax를 사용하지 않고 link 를 해야 합니다. (다음 섹션을 보세요) 그래야 full page refresh가 되서 hash collision 을 방지할 수 있습니다. 이 Ajax를 사용해서 multi page document의 모든 페이지를 로드 할 수 있도록 하는 플러그인인 subpage plugin 이 있습니다. 관심 있으면 살펴 보세요.

Linking without Ajax

다른 도메인으로 링크하거나 rel="external", data-ajax="false" 를 하거나 target 속성을 사용하면 Ajax가 로드하지를 못합니다. 이렇게 하면 full page refresh 가 일어나며 동적인 화면전환이 일어나지 않습니다. rel="external" 과 data-ajax="false" 두 속성 모두 똑 같은 효과가 나타납니다. 다른점은 rel="external"은 다른 site나 다른 도메인으로 링크를 걸 때 사용되어지는 것이고  data-ajax="false"는 같은 도메인 내에서 간단하게 Ajax 로딩을 하지 않을 때 사용할 수 있습니다. 보안 문제 때문에 프레임워크는 항상 외부 도메인으로의 링크에서는 Ajax behavior 를 적용하지 않도록 돼 있습니다.
1.1 버전에서 data-ajax="false"를 parent container에 추가하면 그 하단의 수많은 링크들이 Ajax 네비게이션 시스템을 사용하지 않도록 하는 기능을 추가했습니다. 이 기능을 사용하면 각 링크마다 일일이 코딩해야 하는 번거로움을 줄일 수 있습니다.
Note: jQuery Mobile 어플리케이션을 빌드 시 Ajax Navigation system이 globally 사용할 수 없도록 하거나 각각의 링크에서 빈번하게 사용할 수 없도록 하여야 할 때 $.mobile.pushStateEnabled global configuration option을 사용하실 것을 권장합니다. 그러면 일부 브라우저에서 발생하는 inconsistent navigation behavior를 방지 하실 수 있습니다.

Linking within a multi-page document

한개의 HTML 문서에는 여러개의 page 콘테이너가 들어갈 수 있습니다. div를 여러개 쓰고 각 div마다 data-role을 page로 주면 됩니다. 이렇게 하면 HTML 한 문서에 작은 웹싸이트나 어플리케이션 하나를 다 담을 수도 있겠죠.jQuery Mobile은 처음 이 파일이 불려졌을 때 첫번째 page를 먼저 보여 줍니다.
이 멀티페이지 문서 안에 링크가 anchor(#foo)로 걸려 있다면 프레임워크는 page wrapper 안에 있는 ID(id-"foo")를 찾을 겁니다. 그 HTML문서 안에서 그것을 찾으면 그 새로운 페이지를 보여 줄 겁니다. jQuery Mobile은 멀티페이지 내의 화면 전환뿐만 아니라 외부 링크를 통해 자유롭게 내부,외부로 이동 할 수 있도록 합니다.

사용자가 보기엔 그것이 내부 페이지인지 외부 페이지인지 구분 되지 않고 똑 같이 보여 집니다. (외부 페이지 로딩시 Ajax spinner 가 표시 될때는 약간 다르겠지만요.)

어떤 경우에든 JQuery Mobile은 페이지의 URL hash를 업데이트 해 Back button이나 deep-linking, bookmarking 등이 지원 되도록 합니다.
만약 여러분이 multiple internal 페이지를 포함한 페이지로 Ajax를 통해서 링크를 클릭해서 그 화면을 로딩한다면 여러분은 rel="external"이나 data-ajax="false"를 link 에 넣어야 됩니다.이렇게 해야 프레임워크가 그 URL 내의 Ajax hash 를 없애고 full page를 reload 할 수 있습니다.이 부분은 아주 중요합니다. 왜냐하면 Ajax page들은 Ajax history를 track하기 위해 hash(#)를 사용합니다. 그리고 multiple internal 페이지들도 그 내부 페이지를 가리킬 때 그 hash를 사용하구요. 그래서 위 방법대로 하지 않으면 이 두 부분이 서로 충돌하게 됩니다.

예를 들어 multiple internal page를 향한 링크는 아래와 같이 되어야 합니다.

<a href="multipage.html" rel="external">Multi-page link</a>

"Back" button links

만약 여러분이 anchor에 data-rel="back" 속성을 넣으시면 유저가 그 anchor를 클릭했을 때 back button을 누른 것 처럼 동작 할 겁니다. 바로 전단계 화면으로 가게 됩니다. 이경우 anchor의 디폴트 href는 무시 됩니다.이 기능은 자바스크립트로 간단하게 back button을 생성해야 될 때 유용합니다.(예를 들어 dialog 박스를 닫는다던지...) 이 기능을 사용할 때 브라우저는 href 속성에 지정된 주소는 사용하지 않을 겁니다. 한가지 알아야 할 것은요. C-Grade 브라우저에서는 이 data-rel="back" 기능이 안 먹히기 때문에 그런 경우는 이 href 에 있는 링크로 가게 될 겁니다. 만약 여러분이 history 내의 going back이 아니라 단지 전환을 역순으로 (지금 화면을 부른 화면으로 돌아가기) 하실 때에는 data-direction="reverse" 속성을 사용하시면 됩니다.
Note: data-direction="reverse"는 현재 페이지로 오게 한 바로 그 페이지로 화면전환을 한다는 의미입니다. data-rel="back"은 바로 전 화면으로 이것은 브라우저의 back 버튼을 누른것과 동일한 효과가 나옵니다. 이 두개를 같이 사용하면 reverse는 일어나지 않고 그냥 일반적인 transition이 일어 납니다.

Redirects and linking to directories

디렉토리 인덱스로 링크를 걸 때 (href="typesofcats/index.html 가 아니라 href="typesofcats/" 로 링크를 걸 때) 반드시 trailing slash를 넣어주셔야 합니다. 왜냐하면 jQuery Mobile은 url의 마지막 / 다음에는 파일 이름이 올거라고 예상을 하고 있기 때문입니다. 그리고 나서는 실제 페이지가 참조 됐을 때 이 section을 없앱니다.

어쨌든 여러분은 data-url 속성이 이미 정해져 있는 page div를 return 하는 경우가 있을 겁니다. 이경우 jQuery Mobile은 URL 을 업데이트 하는데 이 속성의값을 사용할 겁니다. 그리고 예를 들어 form을 /login.html 로 포스팅하려고 하는데 이 일이 성공적으로 진행됏을 때 결과 페이지를 /account 에 있는 페이지를 사용하려고 하는 경우가 있을 수 있습니다. 이 경우 여러분은 jQuery Mobile history stack을 사용해서 컨트롤 할 수 있습니다. 아래에 예제가 있습니다.

다음에 나오는 링크는 docs-links-urltest/index.html 로 걸린 겁니다. Test Link . return page는 docs/pages/docs-links-urltest/ 가 될 겁니다. 이 작업은 페이지 소스의 data-url 속성을 통해서 수행 될 겁니다. 값은 전체 hash 로 replace 된다는 것을 항상 염두에 두세요.

jQuery Mobile의 navigation model 과 Ajax, hashes and history 에 좀 더 기술적인 부분은 별도로 살펴 보시기 바랍니다.

Link examples

HTML의 모든 표준 링크 타입은 위에서 살펴 본 대로 jQuery Mobile이 모두 지원합니다. 아래는 자주 사용되는 링크들에 대한 sampler 들 입니다.

<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="d">
    <li data-role="list-divider">Links that will be Ajax-loaded with page transitions</li>
    <li><a href="../../index.html">Link in the same domain</a></li>
    <li><a href="../pages/dialog.html" data-rel="dialog">Dialog link: data-rel="dialog" (not tracked in history)</a></li>
    <li data-role="list-divider">Links that will refresh the page</li>
    <li><a href="http://www.jquery.com">External domain</a></li>
    <li><a href="../../index.html" rel="external">Link with rel="external"</a></li>
    <li><a href="index.html" data-ajax="false">link with [data-ajax="false"]</a></li>
    <li><a href="../../index.html" target="foo">Link with target="foo"</a></li>
    <li data-role="list-divider">Email links</li>
    <li><a href="mailto:jdoe@foo.com">Basic email: mailto:jdoe@foo.com</a></li>
    <li><a href="mailto:jdoe@foo.com?cc=bill@bar.com&bcc=mark@abc.com&subject=Happy%20Birthday&body=Best%20wishes!">Mailto with a cc:, bcc:, subject and body pre-filled</a></li>

    <li data-role="list-divider">Phone links</li>
    <li><a href="tel:15555555555">Phone: tel:15555555555</a></li>
    <li data-role="list-divider">Other</li>
    <li><a href="#">A href="#" will return false</a></li>
</ul>

jQuery Mobile Doc 페이지에 가면 위 화면처럼 나오고 모바일 디바이스에서 각 링크를 클릭하면 실제 작동되는것도 보실 수 있습니다.

보시려면 여기 를 누르셔서 시험해 보세요.