윈도우 생성 과정 이해하기

Process of creating windows

jQuery Mobile내에서 윈도우 생성 과정을 이해하는 것은 아주 중요한 일입니다. 윈도우는 $.mobile.changePage () 나 $.mobile.loadPage () methods 가 calling 됐을 때 생성됩니다. 이 두 메소드는 모두 enhancePage () internal method를 call 합니다. 이 메소드는 해당 윈도우가 이미 생성된 윈도우가 아니라면 윈도우를 생성하는 작업을 진행합니다.

Processing of the pagecreate event

윈도우를 생성하기 위해 enhancePage () method 는 jQuery Mobile page component와 연관 돼 있는 page () method를 call 합니다. 이 page () method는 page component 를 생성하죠. 지난 번 글에서 봤듯이 컴포넌트의 메인 메소드를 call 하는 것은 이벤트를 발생시킵니다. "create"  과 연결된 컴포넌트 이름이 그 이름입니다. (여기서는  pagecreate event). jQuery Mobile 소스코드에서 보실 수 있듯이 pagecreate event는 코드의 다른 부분으로 다뤄집니다.

pagecreate event processing to create the window (in jquery.mobile.js)

$( ":jqmData(role='page'), :jqmData(role='dialog')" )

 .live( "pagecreate", function( e ) {

    var $page = $( this ),
        o = $page.data( "page" ).options,
        pageTheme = o.theme;

    $( ":jqmData(role='header'), 

        :jqmData(role='footer'), 

        :jqmData(role='content')", this ).each(function() {

        /* … */ 
       
        //apply theming and markup modifications to page,header,content,footer
        if ( role === "header" || role === "footer" ) {

            /* … */

 
        } else if ( role === "content" ) {

            /* … */

 
        }
    });

});

  

이 코드 블럭은 data-role="page" 나 data-role="dialog" attributes들과 함께 있는 element를 jQuery Mobile windows 에서 style 로 바꿔 줍니다. title bar 가 header, footer, content 인 HTML element들이 CSS 클래스가 추가 됨으로서 다른 모습으로 바뀌는 것을 잘 봐 두실 필요가 있습니다.

jQuery Mobile source code를 다시 살펴 보면 pagecreate event 에 대해 논의 할 수 있는 다른 코드 부분을 보실 수 있을 겁니다. 예를 들어...

Creation of input fields having jQuery Mobile styled way (in jquery.mobile.js)

//auto self-init widgets
$( document ).bind( "pagecreate create", function( e ){

    $( $.mobile.textinput.prototype.options.initSelector, e.target )
        .not( ":jqmData(role='none'), :jqmData(role='nojs')" )
        .textinput();

});

이 코드 블럭은 document object가 이 이벤트를 listening 하고 있는 것을 보여 줍니다. 그것을 receive 하면 jQuery Mobile textinput () method 는  (input field들을 managing 하고 있는 textinput component 로부터) 모든 HTML elements 들을 matching 되는 selector ($.mobile.textinput.prototype.options.initSelector에서 정의 된)에 apply 합니다.  그리고 e.target element의 descendants 에 위치 됩니다. 이 메소드를 call 하면 이전 글에서 봤듯이 textInput component의 생성을 진행합니다.

이 element 의 descendants 내에 있는 HTML elements 들에 대해서만 search 하기 위해 e.target parameter를 사용하는 것에 대해 주목해 주세요. 그래야지만 좀 더 빨리 작업을 할 수 있겠죠. 마지막으로는 selector에 의해 정의된 input field들에 해당하는 모든 element들이 jQuery Mobile 스럽게 보이는 input fields 들로 transform 될 겁니다. 바로 document object 가 pagecreate event 를 받은 거죠.

이 윈도우에서의 컴포넌트 생성 프로세스는 jQuery Mobile component 와 연결된 모든 HTML elements 에 대해 implement 됩니다. 그 관계는 아래 표와 같습니다.

jQuery Mobile standard components

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

이 프로세스로 인해 우리는 radio buttons, check boxes, input fields, etc. 등을 style 할 수 있는거죠.

어플리케이션에서 display 된 첫번째 윈도우는 $.mobile.initializePage () method 가 실행되는 동안 jQuery Mobile에 의해 자동적으로 생성됩니다 .그리고 위에 설명드린 transformation 작읍을 할 $.mobile.changePage () method를 call 하는 것이죠.

Creation of standard components in jQuery Mobile

위 코드 블럭은 어떻게 jQuery Mobile standard component 가 윈도우를 생성할 때 pagecreate event 가 보내지면서 무슨 일을 하게 되는지를 잘 보여줍니다. 그 컴포넌트와 연관된 이 메소드(previously textinput ())는 slector 와 연결돼 있는 HTML element에서 call 됩니다. 그럼으로서 그 컴포넌트를 생성하게 되는겁니다.

또한 이 작업은 HTML elements들이 create event를 receive 할 때 진행되는 것도 보있습니다. bind () method의 파라미터에 그것이 표현돼 있죠. 이 의미는 jQuery Mobile standard components들을 두가지 방법으로 생성할 수 있다는 것을 말합니다.

• Either by triggering a create event on the window containing the HTML element, which leads to the creation of the component via the processing performed in the received event;

• Or by directly calling on the HTML element, the method for creating the component (eg method textinput () to create the input field).

이 두가지 방법들은 같은 동작을 하게 되구요 같은 결과를 보여 줍니다. 그 컴포넌트는 그것을 포함하고 있는 윈도우안에 생성되게 되는 것이죠. 이 글 다음에 이어지는 글들에서 이 jQuery Mobile 이 제공하는 standard components들을 다이나믹하게 생성하는 방법들에 대해 다룰 것입니다.

Synchronization of the creation of components in the window

pagecreate event는 윈도우가 생성되는 동안에 보내 집니다. 그리고 the document object가 그것을 받게 되죠. jQuery Mobile treatment는 윈도우 내에서 그 컴포넌트들을 각각 생성하기 위해 활용됩니다. 이 컴포넌트들을 생성하는 것은 이러한 컴포넌트들과 관련된 create type 의 새로운 이벤트를 발생시킵니다.

예를 들어

• checkboxradiocreate for a checkboxradio component corresponding to a checkbox or radio button,

• textinputcreate for a textinput component corresponding to an input field,

• slidercreate for a slider component corresponding to a slider,

• Etc..

그러므로 한 윈도우를 생성함으로서 윈도우와 관련된 여러 이벤트들이 발생되게 됩니다. (pagecreate) 또한 컴포넌트들에는 (checkboxradiocreate, textinputcreate, etc.) 것들도 포함되는 거죠. 이러한 이벤트들은 각각 독립적입니다. 그러므로 pagecreate event의 도입부는 윈도우의 content 가 이미 생성되었다는 것을 의미하지는 않습니다. 정확하게는 그 윈도우의 컴포넌트가 생성되는 jQuery Mobile에 의해 이 이벤트의 프로세스가 진행되고 있다는 의미죠.