야후 사용자 인터페이스 블로그 (YUIBlog)

"MakeNode"위젯 확장

2011년 7월 8일 오후 2시 11분에 세티암으로 |의 개발 | 5 개의 댓글

나의 이전 기사에서는 YUI 3 응용 프로그램의 레시피는 , 내가 사용하는 방법 보여주 Y.substitute 매우 기본적인 템플릿 프로세서로합니다. 아이디어는 # YUI IRC 채널에있는 사람으로부터 제안, 거기에서 생명을 빼앗았고, 난 그게 내 사이트에 사용할 수있는 위젯 확장 만든라는 MakeNode . MakeNode는 일반 템플릿 프로세서되지 않으며 그것은 하나로서 의미가 없습니다. 반면에, 그것은 단단히 YUI와 통합되어 위젯 클래스와 이벤트 헬퍼 및 국제화를 포함하여 기초 클래스. 이 문서에서는, 그 소요됩니다 스피너 예를 나의 이전 기사에서 지침을 따르도록 그것을 수정하고 MakeNode를 사용할 수 있습니다. 수정된 스피너 구성 요소 ( JS , CSS , 스프 라이트 )뿐만 아니라 예를 들어 내 사이트에서 사용할 수 있습니다. 추가 리소스에 대한 링크는이 문서의 끝 부분에서 찾을 수 있습니다.

구성 요소를 확장

일단 MakeNode가 로드된, 당신의 모듈을 포함해야합니다 YUI().use() 성명 이름 사용 'makenode' . 그런 다음 도구를 확장하기 위해, 당신은 세 번째 인수에 목록을 Y.Base.create() 이런식으로 :

  와이 스피너는 = Y.Base.create (
      '스피너'
      Y. 위젯,
      [와이 MakeNode]
      {
         / / 인스턴스 멤버 ...
      }
      {
          / / 정적 멤버
      }
 ); 

당신은 이러한 WidgetParent, WidgetChild, WidgetStdMode으로 위젯에 적합한 확장의 수를 함께 MakeNode를 추가할 수 등 MakeNode 두 가지 보호 방법, 추가 _makeNode 및 _locateNodes, 하고 찾으면 그것은 몇 가지 정적 속성에서 읽습니다.

이 확장의 모든 구성원들은 그들과 함께 방해하지 말아야 이러한 구성 요소를 사용하여 도구자하여 구성 요소 개발자가 아닌 의해 사용 될 운명이기 때문에 중 보호 또는 개인됩니다.

템플릿 정의

당신이 일반적으로 할 것입니다 우선은 구성 요소에 대한 템플릿을 정의하는 것입니다. 스피너을 보려면 템플릿이됩니다

  _TEMPLATE : [
     '<input type="text" title="{s input}" class="{c input}">'
     '<button type="button" title="{s up}" class="{c up}"> </ 버튼>',
     '<button type="button" title="{s down}" class="{c down}"> </ 버튼>'
 ]. 조인 ( '\ N'), 

기본 템플릿은 일반적으로 지정됩니다 _TEMPLATE 과 같은 클래스의 다른 정적 속성, 함께 선언 ATTRS . 다른 누구가 명시적으로 제공되지 않을 경우 MakeNode이 템플릿을 사용합니다. 템플릿은 일반 HTML 플러스 중괄호, 단일 문자 (처리 코드)로 만든 하나 이상의 인수가 다음 각 동봉된 자리 표시 일련의 이루어집니다. 자리 표시자과 그들이 생산은 다음과 같습니다

• {@ attributeName} 구성 속성 값

• {p propertyName} 인스턴스 속성 값

• {m methodName arg1 arg2 ….} 지정된 메서드의 반환 값입니다. 처리 코드는 메소드 이름과 공백으로 구분된 인수의 수에 따라 수 있습니다. 문자열이 이중 인용 부호로 묶여 있어야합니다. 숫자, 논리값 및 null 자신의 적절한 데이터 형식을 문자열에서 변환됩니다

• {c classNameKey} 에서 생성된 CSS의 클래스 _CLASS_NAMES 고정 자산

• {s key} 에서 문자열 strings 사용 속성 key 하위 속성으로.

• {? other placeholder } 문자열 생산 checked 자리 표시 자의 나머지 부분을 처리의 결과 사실 때.

• {} 다른 가치가처럼 처리됩니다 Y.substitute 않습니다.

예를 들어, {@ value} 로 번역됩니다 this.get('value') 동안은 {p value} 으로 변환 this['value'] .

{m} 자리 표시자는 조금 더 복잡합니다. 후 첫 번째 인수 m 처리 코드는 주어진 메서드에 전달됩니다 다 공백으로 구분하는 방법과 인수의 나머지 부분의 이름입니다. 이러한 인수는 숫자 수있는 null , true , false 또는 큰 따옴표로 묶인 문자열. MakeNode 그들을 구문 분석하므로, 자신의 적절한 형식으로 변환합니다 {m myMethod 123.45 true “this is a string”} 호출하게됩니다 this.myMethod(123.45, true, “this is a string”) 그래서 처음 두 인자 자신의 정확한 데이터 형식으로 변환하고 문자열은 공백을 포함할 수 있습니다. 따옴표를 포함하기 위해서 사용하는 \\" , 자바 스크립트가 단일 하나를 해석하고 MakeNode에 도달하기 전에 그것을 버립니다.만이 따옴표를 사용할 수 있습니다, MakeNode를 사용하지 않으므로 필요한되고있는 이중 백슬래시 eval() 파서가 제한되도록 하지만 안전. 빼고 숫자, null , 논리값, 이중 인용 문자열은 무시됩니다.

{?} 자리 표시 체크 박스와 라디오 버튼과 함께 사용하는 것이 편리할 때가 많다. 이것은 문자열이 생성됩니다 “checked” 다음 처리 명령 코드의 진리 값에 따라 다릅니다. 따라서, <input type=”checkbox” {? m getLength}/> <input type=”checkbox” {? m getLength}/> 경우 표시된 확인란을 생산합니다 getLength 방법은 아무것도하지만 제로 있습니다. 반환 {?} 그것은 처음 세와 의미가 있지만, 다른 자리 표시 자의 동의합니다.

에 대한 {c} 자리 표시 자, 우리는 필요 _CLASS_NAMES 속성을 정의.

추가 나타내지는에 그들을 추가하여 MakeNode에 추가할 수 있습니다 _templateHandlers 해시.

_CLASS_NAMES 속성

함께 ATTRS 및 _TEMPLATE 정적 속성, 우리는 정의할 수 있습니다 _CLASS_NAMES 문자열의 배열을 가리키는 속성. 그 문자열의 각 클래스를 생성하는 데 사용됩니다. 따라서 _CLASS_NAMES: ['input'] 클래스 생성합니다 “yui3-spinner-input” . 이러한 classNames은 인스턴스 속성에 저장됩니다 this._classNames . {c input} 템플릿에 자리 표시자 상기로 대체됩니다 “yui3-spinner-input” .

당신은 사용할 수 _CLASS_NAMES 당신이 템플릿을 사용하거나하지 여부, classNames의 숫자를 생성하는 속성. 당신은 여전히 내부에서 이러한 추가 classNames에 도달할 수 this._classNames . 클래스는 사용하는 생성 yui3 의 값은 다음 접두사 NAME 정적 속성을 소문자로 설정되어 다음 문자열에서 주어진 _CLASS_NAMES (이 마지막 하나가 소문자로 설정되어되지 않습니다), 하이픈으로 구분된 다. _classNames 해시도에 대한 classNames 포함됩니다 boundingBox 과 contentBox , 아래 첫 번째 "." 아래 키를 두 번째 “content” 키를. 도구에 할당 boundingBox 의 값을에서 파생된 classNames NAME 부터 상속 체인에있는 클래스의 각 속성을 yui3-widget . 에 MakeNode 매장 this._classNames 에 대해서만 최상위 가장 클래스 boundingBox .

구성 요소는 같은 거리에 위젯에서 여러 수준으로, 경우 SuperSpecialSpinner 에서 상속 SuperSpinner 에서 상속 Spinner 에서 상속 Widget, 그 중 일부 또는 모두가있을 경우 _CLASS_NAMES 속성 정의 MakeNode 그들 모두 classNames를 생산하고 그들을 저장합니다 this._classNames . 당신은 이름이 이미 이전 단계에서 선언된 각 레벨에 포함시킬 필요가 없습니다. 사실, 그것은 당신이 각 수준에서 생산 classNames가의 가치 사용하지 않기 때문에 좋겠 NAME 되는 수준의 속성을. 따라서,에 SuperSpecialSpinner , {c input} 여전히 발생합니다 “yui3-spinner-input” 이 아닌 “yui3-superspecialspinner-input” 그래서 그것은 귀하의 CSS 파일이 계속 유효하게됩니다.

{S} 자리 표시자

위젯은이 strings 가 어떤 값으로 초기화되지에도 불구하고, 정의 구성 속성을 지정해야합니다. 이 속성은 (또는, 스크린 리더를 통해 읽을 수) 사용자에게 표시되는 문자열을 개최하기위한 것입니다. 직접 템플릿에서 보이는 문자열을 포함하지 마십시오 것이 중요합니다. 이것은 MakeNode의 요구 사항이 아닙니다 - 그것은 전혀 좋은 생각 적이있다. 볼 또는 사용자에게 읽을 수있는 모든 문자열은 항상에 배치되어야 strings 속성. strings 속성은 각각의 텍스트가 핵심으로 자리잡고 있습니다 해시가 포함되어 있습니다. 스피너 구성 요소는 당신이 위의 템플릿에 사용되는 볼 수있는 다음과 같은 문자열을 가지고 있습니다.

  문자열 : {
     값 : {
         입력 : ". 마이너 단위, 주요 단위로 페이지의 위 / 아래에 대한 키를 아래 화살표를 눌러 /",
         최대 : "증가"
         아래 : "감소"
     }
 } 

이렇게의 가장 중요한 부분은 구성 요소가 구성 요소를 사용 개발자들이 매우 쉽게 다른 언어로 지역화된 수있다는 것입니다. 스피너의 인스턴스를 만들 때, 당신은 할 수 있습니다 :

  var에 mySpinner = 새로운 스피너 ({문자열 : Y.Intl.get ( '꼭두각시 ')}); 

구성 속성을 설정 strings 이런 방식으로하면 기본 대체 strings 이전에 정의된 언어를 사용하여 언어 리소스 파일에서 해당과 가치를. {s} 자리 표시에 저장된 문자열에 액세스하는 strings 로 설정하면 기본 사람이나 번역된 것들 중, 속성을 지정해야합니다. {s xxxx} 자리 표시는, 사실,에 대한 바로 가기보다 아무것 {@ strings.xxxx} 자리 표시 자. 예를 들어, 동안 그러나, 첫 번째는 상위 레벨에서 문자열을 액세스할 수 있습니다 {@ strings.xxxx.yyyy.zzzz} 가 깊은 아래 문자열을 액세스할 수 있습니다.

renderUI에 _makeNode을 사용하여

우리는 우리의 구성 요소에 대한 마크업을 만들 수있는 템플릿을 사용합니다. 이렇게하려면, 우리는 MakeNode의 전화할 수 _makeNode 이 같은 방법을 :

  renderUI : 함수 () {
     . this.get ( 'contentBox') 추가 (this._makeNode ());
 } 

이것은 작성합니다 contentBox 템플릿을 처리 마크업과 함께 도구의. _makeNode 방법의 인스턴스를 반환 Y.Node 나중에 사용하기 위해 개최되는 추가 또는 어디하거나 삽입할 수 있습니다. 그것은 문자열을 반환하지 않으며, 그것은 생산 Node 인스턴스를.

_makeNode 같은 템플릿에 대한 참조 및 개체 틀 작성하기 위해 개체 : 방법 두 가지 선택적 인수를 Y.substitute 않습니다. 우리의 간단한 스피너 예제에서는 모든 위젯하지만 다른 위젯을 몇 가지 템플릿으로 만들어진 조각이 필요할 수 있습니다위한 하나의 템플릿이 있습니다. 이 경우에는, 일반적으로 부를 것이다 _makeNode 주요 부분에 대한 인수없이와 여분의 부품을 채워 서로 다른 템플릿을 사용하여 다시 한번 그것을 호출합니다. 예제는 이 포함되어 있습니다 renderUI 방법 :

  renderUI : 함수 () {
     var에 fieldset = this._makeNode ();
     this.each (함수 (항목) {
         fieldset.appendChild (this._makeNode (MultipleTemplates.RADIO_TEMPLATE, 항목));
     }이);
     . this.get ( 'contentBox') 추가 (fieldset);
 } 

가장 먼저 호출 _makeNode 반환 Node 변수에 저장된 인스턴스 fieldset . 샘플 구성 요소도 함께 확장 Y.ArrayList 너무 RADIO_TEMPLATE 배열 목록에 저장된 항목과에 추가 결과 노드에서 가져온 값으로 채워집니다 fieldset 그것이 마지막에 추가되기 전에 contentBox . 같은 특수 나타내지 {@} 또는 {p} 여전히 기본 객체의 속성 또는 속성을 참조합니다. 중첩된 항목은 마찬가지로 처리됩니다 Y.substitute 것입니다.

_locateNodes 방법

MakeNode 추가 제공 _locateNodes 선언 classNames 모든 요소 찾으려고합니다 방법 _CLASS_NAMES . 이 클래스 키의 숫자를 전달할 수 있습니다 특정 요소를 찾으려면, 그렇지 않으면, _locateNodes 모두를 시도합니다. 각 클래스의 각 요소에 대한 발견, _locateNodes 키 이름과 다음에 밑줄 접두사를 사용하여 개인 인스턴스 속성 생산할 것이다 “Node” 접미사. 따라서, 우리 스피너 예제에서, _locateNodes 속성 생성 _inputNode , _upNode 및 _downNode . 여러 요소가 같은 클래스가있다면, _locateNodes 그들의 첫 번째에 대한 참조를 반환합니다. 요소가 발견되지 않으면, 아무런 변수가 생성되지 않습니다.

스피너 구성 요소에서는 사용 _locateNodes 마크업을 만든 후 :

  renderUI : 함수 () {
     . this.get (CBX) 추가 (this._makeNode ());
     this._locateNodes ();
 } 

_EVENTS 정적 속성

하나의 추가 속성의 라인을 따라 정의될 수 _TEMPLATE 하고 _CLASS_NAMES 하고 있습니다 _EVENTS . _EVENTS 클래스 이름 키 만든 해시, 이벤트 유형과 그들을 처리하는 방법의 해시를 포함하는 각각 포함됩니다. 그것은 더 나은 예를 설명합니다 :

  _EVENTS : {
     '.': {
         키 : {
             FN : '_onDirectionKey'
             인수 : ((Y.UA.opera) "아래 :"?! "를 누르십시오 :") + "38, 40, 33, 34"
         }
         mousedown : '_onMouseDown'
     }
     '..': {
         mouseup '_onDocMouseUp'
     }
     입력 : {
         변경 : '_onInputChange'
     }
 } 

_EVENTS 속성의 번호와 개체 (해쉬)입니다. 속성의 이름, 즉, 해시의 키, 그의 행사 우리가 듣고됩니다 요소를 식별합니다. 그들은에서 사용되는 동일한 식별자 아르 _CLASS_NAMES . 두명의 특별 열쇠입니다 "." 및 ".." . 클래스 키 내에 중첩된 요소를 참조하는 동안 contentBox , "." 열쇠를 말합니다 boundingBox 동안 자체가 ".." 이 위젯을 포함하는 문서를 말합니다. 하고로 생각 chdir 에있는 경우 명령을 boundingBox 수준. _EVENTS 다음 속성을 처리 renderUI , bindUI 및 syncUI 위젯 이미 문서 본문 내에 삽입된 것으로 예상하므로 방법을 받았습니다, 그렇지 않으면 ".." 실패합니다.

에있는 항목의 각 _EVENTS 핵심 그것을 처리하는 인스턴스 메서드의 이름으로 이벤트의 유형을 사용하여 더욱 개체입니다. _EVENTS , 정적 변수되고,에 대한 액세스 권한도없고 this 그것이 실제 함수 참조를받을 수 있도록 이벤트 리스너 방식만을 이름입니다. 일부 이벤트 유형에는 같은 추가 인수가 필요 key 행사합니다. 이 경우에는 대신 이벤트 처리기의 이름을 제공하는 당신은 특성을 가진 개체를 제공할 수 fn 및 args 필요한 경우 함수 이름과 추가 인수를 개최합니다.

MakeNode 사용됩니다 Node.delegate 이것을 사용하는 동안, 중첩된 요소의 이벤트에 들어 Y.on 에서 이벤트 듣지 boundingBox 과 문서 본문. (참고 : 듣고 key 의 위임 이후 중첩된 요소에 이벤트를하는 것은, 오직 위의 버전 3.4.0pr1과 작동 key .. 행사 전에 사용할 수 없습니다습니다 다른 모든 기능뿐만 아니라 이전 버전에서 작동)

_EVENTS 구성 요소가 서로에서 상속 때 선언은 누적됩니다. 상속 체인의 각 클래스는 자신의 것입니다 _EVENTS 별도 처리 선언합니다.

_ATTRS_2_UI 정적 속성

이벤트 UI의 구성 요소와 구성 요소의 UI로, 두 가지로 이동합니다. 첫 번째는에 의해 처리됩니다 _EVENTS 속성입니다. 그런 다음 사용자 인터페이스에 반영해야 할 속성 값 변경에 의해 해고 이벤트가 없습니다. 내가 구성 속성을 변경할 수있는 보조 효과가 이전 기사에서 언급했듯이, 그들은 옵션으로 변경 이벤트 리스너에 의해 처리되어야 setter 에만 설정하는 값을 정규화 처리해야하는 속성의 방법. UI는 처음에 구성 속성의 상태를 반영해야 syncUI 모든 속성 변경 이벤트에 다음 초기화되는 경우. 후자의 경우, 우리는 우리가 할 이벤트 리스너, 장착해야 bindUI . 위젯 이미 그 이전 기사에 대한 의견에서 설명한 그렇게 간단한 문제를 만들 수있는 메커니즘을 제공합니다.

위젯은 인스턴스 속성 사용 _UI_ATTRS 이 추가 속성이있는 객체가 포함된 SYNC 와 BIND . 이러한 각각의 처음 서로 연관 후 현재 가치를 반영 UI를 유지하기 위해서 말을하는 구성 속성의 이름을 나열 배열입니다. 위젯 그 항목의 각각에 의해 접두어 속성 이름의 이름을 따서 명명과 연관된 메서드가 예상 _uiSet 적절한 낙타 경우에는 메서드의 이름을 가지고 대문자로 변환 속성 이름의 첫 문자로합니다. 경우 따라서 "value" 의 나열되었습니다 _UI_ATTRS 배열 (중의 SYNC 또는 BIND ), 위젯은 찾을 기대 _uiSetValue 방법을. 이 방법은 두 개의 인수를받습니다, value 설정하고하는 src 변경. 이것은 우리의 스피너를위한 코드입니다 _uiSetValue 방법 :

  _uiSetValue : 기능 (가치, SRC) {
     경우 (SRC === UI) {
         반환;
     }
     this._inputNode.set (값, this.get (포맷) (값));
 } 

이 문자열 상수에 해당하는 코드 조각에서 볼 수있는 모든 대문자 식별자는 YUI 압축기보다 그 일을 수 있도록, 다른 선언했다. 방법은, 기본적으로 세트 value 의 HTML 속성 <input> 포맷 후에, 새로운 값을 설정 상자를. 텍스트 상자에 대한 참조가 제공한 _locateNodes . src 인수가 처음 문자열 값으로 설정되어 있는지 확인합니다 'ui' . 이 그렇다면, 아무런 조치가 이동되지 않습니다. 이것은 끝없는 루프를 방지하는 것입니다. 사용자가 입력 상자에 무언가를 입력하면, 그 값이 들어갈 것이다 value 다음 해고 구성 속성 valueChange 넣기 이벤트 _uiSetValue 이긴해도, 그때 가서 입력 상자의 값을 변경 어느쪽이,라는 어느 다시 전체 프로세스를 실행합니다. 따라서,의 _uiSetValue 우리가 알고있는 경우, 변경은 UI에서 유래, 우리는 아무것도하지 않는다면, 그리고 그래서 루프를 휴식. 그러나 이것은 다른 코드의 또 다른 조각이 필요합니다. DOM 이벤트 리스너를위한, 우리가 구성 속성을 설정할 때, 우리는이 같은 설정하는 세 번째 선택적 인수를 사용 :

  _afterValueChange : 기능 (EV) {
     this.set (값, ev.newVal {SRC : UI});
 } 

이것은 UI에서 오는 변화가 있으므로 표시하고 다음 루프를 피하기 위해 같은 플래그를 확인하도록 우리에게 달려있다.

이 모든 말씀으로, 나는 아직 고정 자산 언급하지 않았습니다 _ATTRS_2_UI 이 섹션의 제목에 언급합니다. 내 이전의 문서 프로그램의 코멘트 (내가 그들의 만든 블런더스를 통해), UI에 영향을 미치는 모든 속성이 올바르게 나열되었는지 확인하고 다소 혼란입니다. 당신은 초기화하지 않아도 _UI_ATTRS 위젯 이미 속성 전체 많이 나열하고 이들이 손실 될 때문에 처음부터. 당신이 그것을 바로 작업을 수행하는 방법에 기억하기 다소 어려운 기존, 이상의 새로운 속성 이름을 연결할있다. 간단하게하기 위해 MakeNode은 정적 속성에서 읽습니다 _ATTRS_2_UI 하고 그 연결 해. 그것은 각 단계에서 각 클래스는 자신의 속성을 처리할 수 있도록 상속 체인에있는 각각의 클래스에서 이러한 모든 목록을 연결할 수 있습니다. 스피너, 우리는있다 :

  _ATTRS_2_UI : {
     BIND : 값,
     SYNC : VALUE
 } 

MakeNode이 사건에서와 같이, 이름의 배열 또는 단일 속성 이름을 모두 받아들일 것입니다.

질문이 자연스럽게 발생, 왜 두 목록, 동기화에 대한 다른 바인딩 하나? 꽤 자주 SYNC 배열보다 적은 항목이 BIND 목록을 구성 요소에 대한 템플릿이 이미 구성 특성으로 매우 동일한 기본값을 수도 및 초기 동기화를 할 필요가 없기 때문에이 있습니다. 그러니까,에 대한 기본값 경우 value 구성 속성이 빈 문자열이며 <input> 템플릿에 요소가 전혀없는 value 속성을 다음 초기화 그들을 동기화할 필요가 없습니다.

MakeNode이 배열의에서 중복 항목을 확인합니다. 언제가 나타나는 경우, 그것은 클래스의 구성 요소가 이미이 속성과 새로운 선언을 처리에서 상속 것을 의미합니다 대부분 넘은는 것이 _uiSetXxxx 그것을 핸들러. 덧붙여, MakeNode도에서 중복 항목에 대한 검사 _CLASS_NAMES 또한 아니지만, 일부 충돌이 발생할 수 있습니다, 상황. MakeNode는 그러한 오류에 대한 로그에 메시지를 작성합니다.

결론

MakeNode은 고도로 위젯 기반 클래스와 통합되어 간단한 기능, 간단한 서식 프로세서를 제공합니다. 또한 템플릿에 사용되는 classNames를 생성하고 생성된 노드를 찾을 수 그 이름을 사용하는 도우미 메서드를 제공합니다. 또한 모두 UI 및 구성 요소 자체에 의해 생성된 이벤트에 후크와 방법으로 각각 연결할 수있는 수단을 제공합니다. 똑바로 위젯 및 정의할 수 있습니다 수업 모든 수준의 상속 체인을 존중하는데주의를하면서이 모든 것들을 수행합니다.

그것은 절대적으로 모든 가능성을 제공하지만, 그들의 좋은 범위를 포함하지 않습니다. 그럼에도 불구하고, 그것은 여분의 기능을 추가에서 당신을 배제하지 않습니다. 당신은 거의 쓸 수 없을 수도 bindUI 또는 syncUI 가 MakeNode가 제공하는 접착제를 사용하는 경우 방법을하지만, MakeNode 그들을 사용하지 않기 때문에 당신은 할 수 있습니다.

지금까지 이것을 읽을 수있는 인내심을 가진 자들에게 보너스로서, 또한 갤러리 구성 요소의 집합 안토니 핍킨의 버튼을 수정한 :

• button.js
• button.css
• 버튼 - group.js
• 버튼 - group.css
• background.png
• 배경 - active.png
• 아이콘 sprite.gif
• 예

API 문서를 찾을 수 있습니다 여기 .

: 대화 찾기 bloglines | 테크노을

공유하고 확장 : del.icio.us와 스크랩 | 디그 그것! | 레딧!