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

YUIConf 2011 조기 등록 지금 열려

YUIConf 2011을위한 초기 등록 새가 지금 Eventbrite에 열려 있습니다! 올해의 이벤트는 야후의 위대한 미국 캠퍼스에 11월 2일부터 4일까지 개최됩니다. 우리는 당신의 하루 가져 매우 기쁘게 생각 손을 -에 대한 교육 워크샵 (수) YUI (목 / 금)에 대한 기술 협의의 두 가득 일 다음. 컨퍼런스 등록은 $ 50 초기 조류 속도로 올해 75 달러 비용이 든다. 워크샵 등록은 곧되는 컨퍼런스 및 세부에서 별도의 것입니다.

우리는 멋진 주제를 포함, 최대 바쁜 라이닝입니다

• 전화 및 일정을 포함한 YUI 구성 요소 깊은 다이빙,
• 모바일 환경에서 YUI
• YUI와 테스트
• 실제 마이 그 레이션 사례
• 그리고 훨씬, 훨씬 더!

언제나 마찬가지로, 컨퍼런스 세션 비디오 녹화 및 사용할 수 YUI 극장 우리의 YouTube 채널 즐길 수있는 모든.

거기서 당신을보고 싶습니다!

(IMPORTANT! 내부 Yahoos가 야후 직원 티켓에 등록하고 직장 이메일 주소를 입력해주십시오.)

: 대화 찾기 bloglines | 테크노을

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

YUI 3.4.1 지금 살아 있습니다

YUI 3.4.1 짧은주기의 릴리스에서 현재 사용할 수 CDN 과에 대한 다운로드를 보다 일주일 이상 일찍! 여기이 릴리스에 대한 몇 가지 주요 특징은 다음과 같습니다

• 150 버그 수정 을위한 컨트롤러 , 패널 , DataTable의 , 일정 및 기타 모듈의 번호입니다.
• 버그는 수정 Y.substitute () YUI 기여자 Satyam .
• 일본어 언어 지원 일정 및 콘솔 , YUI 기고자의 호의 류이치 Okumura .
• 기타가로 바뀌는 설명서 및 예제.

당신은 또한 확인할 수 있습니다 YUI 3.4.1에 대한 구성 요소 기록 파일에 명시된 모든 변경 사항의 요약 뿐 아니라 YUI 3.4.1 개발하는 동안 해결 티켓의 전체 목록을 . 언제나처럼, 우리는 당신이 당신이 가진 것 제안 또는 저희 티켓 데이터베이스에서 발견 수도 결함을 파일을 부탁드립니다. YUI 3.4.1에 대한 의견에 입력할 수있는 YUI 3 티켓 데이터베이스 .

우리는 또한 YUI의 다음 릴리스에서 발표하고 싶습니다, DataType.Date, DataType.Number 및 DataType.XML는 각각 Y. 날짜, Y. 번호 및 Y. XML에 찬성 중지됩니다. 하위 호환성은 모든 사람에게 전환 기회를주는 하나의 릴리스에 대한 유지됩니다.

아, 그리고 한 가지 더 : 우리가 마이 그 레이션에서 잘 가고있다 YouTube에 YUI 극장 컨텐츠를 . 우선, 더글러스 Crockford의 강의 시리즈 체크 아웃 "자바 스크립트에 대한 Crockford가" - 부제 완료!

: 대화 찾기 bloglines | 테크노을

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

오픈 소스 어워드 결승에서 YUI를위한 투표

Packt 게시 오픈 소스 어워드에 대한 YUI을 지명 모두에게 감사. 즐겨찾는 자바 스크립트 라이브러리로 YUI에 대한 지금 투표하세요!

: 대화 찾기 bloglines | 테크노을

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

CDN에서 YUI 3.4.1 PR1는 현재 사용 가능

YUI 3.4.1 PR1 지금은 지역 사회의 테스트와 피드백을 사용할 수 있습니다. 그것은에있는 야후! CDN에서 사용할 수 http://yui.yahooapis.com/3.4.1pr1/build/yui/yui-min.js , 당신은에서 3.4.1로가는 변경 볼 수있는 검사 티켓 목록 릴리스에서 .

3.4.1 릴리스 건 10 월 5 일이 지나가고 - 라이브 예정 단축 개발주기와 작은 버그 수정 프로그램 릴리스됩니다. 에서 파일 버그와 regressions 바랍니다 YUILibrary.com에 티켓 데이터베이스 그래서 우리가 어떤 중요한 문제가 일반적인 릴리스 전에 해결되었는지 확인 할 수 월요일 아침, 9월 26일에 의해. 더 시급한 문제가보고되지 않습니다면, 우리는 9월 27일 빠르면 3.4.1을 릴리스합니다.

: 대화 찾기 bloglines | 테크노을

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

YUI : 개관 시간 목 9월 15일

Satyam의 MakeNode 확장

당신이 알고하지 않으면 Satyam을 , 당신은 YUI 새로운 있어야합니다. 그는 YUI 2의 초기부터 YUI 공동체의 기둥 됐어요. YUIBlog에 그의 기사는 가장 읽고 "정말 라이브러리를 어떻게 사용하는"소스 불리는 스타일의 내용 중 일부입니다. 당신이 Satyam 그것을 쓴 것을 알 경우, 대부분 읽을 가치, 그리고 다시 읽고 북마크하기.

7 월, 그는에서 훌륭한 문서 게시 MakeNode 위젯을 구축할 때 사용되는 일반적인 패턴의 일부를 단순화하고,보다 쉽게 일반 잘못하면을 피하기 위해 만들 것을 목표로 위젯 확장합니다. 모듈은 이후되었습니다 갤러리에 추가 하고 오늘 아침에, 그는 게시된 업데이 트가 자신의 원래의 문서에 있습니다.

그것이 우리가 얘기가 될 겁니다. 특징, 역사, reasonings. 이 구성 요소 인프라를 사용하고 경우와 특히, Y.Widget , 당신은 가능성이 Satyam 같이 주소로 규정된 장애물 중 적어도 일부가 발생했습니다 MakeNode . 이것은 가장 좋은 사례 축제가 될 있으므로 메모장을 가지고, 그리고 자신의 경험을 공유하는 것입니다.

시간과 세부 사항

우리는 오전 10 시부터 태평양 서머 타임 오전 11시로 목요일에 온라인 상태가됩니다.

모임 가입

녹음

녹음은 YUILibrary YouTube 채널에서 사용할 수있는 .

: 대화 찾기 bloglines | 테크노을

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

YUIConf 2011에 대한 이야기를 제출

당신은 YUI 작업하면서 배운 무언가 또는 공유 일해 왔어 코드를보기! YUI - 이벤트 (시) 금요일 야후 inc.com, 2011년 9월 23일에 제안서를 제출합니다. 포함해야합니다 :

• 제목
• 설명
• 대상 고객
• 귀하의 이름
• 간단한 바이오

YUIConf 2011은 야후의 산타 클라라, CA 캠퍼스 11 월 3, 4 번가를 개최합니다. 프레 젠 테이션 45 분 마지막으로해야합니다. 우리는 Q & A. 귀하의 프레 젠 테이션 후 최대 15 분있다 거예요 의견에 질문을 게시하거나, YUI - 이벤트 (에서) 야후 inc.com에 직접 이메일을 보내주시기 바랍니다.

: 대화 찾기 bloglines | 테크노을

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

업데이트 : "MakeNode"도구 확장

편집자 참고 사항 :이 문서는했습니다 원래 올해 출판 . 이후 MakeNode 모듈은 YUI 갤러리에 게시되었습니다 일부 향상을 받았습니다. 오늘의 기사는 MakeNode 모든 최신 변경 내용을 반영합니다.

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

구성 요소를 확장

MakeNode을로드하려면 당신의 모듈을 포함해야합니다 YUI().use() 의 이름을 사용 명세서 'gallery-makenode' 를 통해 모듈을 정의하는 경우 또는을 YUI.add() 과 같이, 그것을 목록을 requires 배열합니다. 그런 다음 도구를 확장하기 위해, 당신은 세 번째 인수에 목록을 Y.Base.create() 이런식으로 :

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

당신은 이러한 WidgetParent, WidgetChild, WidgetStdMode으로 위젯에 적합한 확장의 수를 함께 MakeNode를 추가할 수 등 MakeNode은 개발자에 의해 사용하는 두 보호 방법 추가 _makeNode 과 _locateNodes, 하고 발견하는 경우, 몇 가지 정적 속성에서 읽습니다 .

이 확장의 모든 구성원들은 그들과 함께 방해하지 말아야 이러한 구성 요소를 사용하여 도구자하여 구성 요소 개발자가 아닌 의해 사용되는 의미가 있기 때문에 중 보호 또는 개인됩니다. 볼 때 "표시 보호"옵션을 체크하는 것을 잊지 API 문서를 .

템플릿을 정의

당신이 정상적으로 할 것이다 첫번째 것은 당신의 구성 요소에 대한 템플릿을 정의하는 것입니다. 스피너 들어, 템플릿 것입니다 :

  _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 ….} 지정된 메서드의 반환 값입니다. 처리 코드는 메소드 이름과 공백으로 구분된 인수의 수에 따라 수 있습니다.

• {c classNameKey} 에서 생성된 CSS의 클래스 _CLASS_NAMES 정적 속성 (참조 _CLASS_NAMES 속성 아래 부분)

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

• {? condition valueIfTrue valueIfFalse } 훨씬 좋아 ?: 자바 스크립트의 연산자로 평가 valueIfTrue 조건이 truish 경우 valueIfFalse 달리.

• {1 condition valueIfOne valueIfMore } 조건의 값에 따라 단수 / 복수의 단어를 생산하는 데 사용됩니다.

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

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

나타내지 인수를했으면 같은 {m} , {?} 및 {1} , 문자열이 이중 인용 부호로 묶여 있어야합니다. 숫자, 논리와 null (모든 따옴표 밖에서) 자신의 적절한 데이터 형식으로 구문 분석됩니다. 자리 표시는 중첩될 수 있습니다. {?} 및 {1} 자리 표시는 보통 상태의 중첩 자리 표시를 포함하고 아마도 자신의 가치에 대한 예를 들면 다음과 같습니다

  {P} {1 수량 P {수량} "단위", "단위"} 

속성 경우 qty 1입니다, 그것은 평가 "1 unit" 가 반환됩니다 2 개 이상에 대해, "2 units" 등등합니다. 제로 다루는 더 정교한 버전은 다음과 같습니다

  {?  {P} 수량 '{P} {1 수량 P {수량} "단위", "단위"} ""없음 "} 

문자열 경우, 내부 자리 표시자를 처리 결과가 따옴표 자체의 세트에 동봉해야합니다.

인용 문자열 안에 따옴표를 포함하기 위해서 사용하는 \\" , 이중 백슬래시은 자바 스크립트가 하나 하나를 해석하기 때문에 필요하고 MakeNode에 도달하기 전에를 삭제하는 전용 따옴표를 사용할 수 있습니다,. MakeNode은 사용하지 않습니다 eval() 그래서 파서는 제한되지만 안전합니다. 뭐든하지만 숫자, null , 논리 타입 및 더블 인용 문자열 무시됩니다.

{?} 자리 표시도 체크 박스와 라디오 버튼과 함께 사용하는 것이 편리할 때가 많다. 이것은 문자열을 생성하는 데 사용할 수있는 "checked" 다음 처리 명령 코드의 진리 값에 따라 다릅니다. 따라서, <input type="checkbox" {? {m getLength} "checked" ""}/> <input type="checkbox" {? {m getLength} "checked" ""}/> 하면 표시 확인란을 생산합니다 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 등, 'input' 우리가 나중에 보자, 그들이 실제 클래스 또는 그 classNames를 포함하는 요소를 참조하는 열쇠로 사용할 수 있기 때문에, "클래스의 키".

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

WidgetStdMod 모듈이로드되면 MakeNode는 또한에 대한 항목이 생성 HEADER , BODY 및 FOOTER 또한 동일한 모듈에 정의된 상수 이들 같은 열쇠와 섹션을.

구성 요소는 같은 거리에 위젯에서 여러 수준으로, 경우 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} 깊이 아래 중첩된 더욱 대체를 방지할 수 있습니다 문자열에 대한 액세스를 허용합니다. 중괄호는 사용하여 텍스트에 포함될 수있는 {LBRACE} 와 {RBRACE} 로 자리 표시 자.

renderUI에 _makeNode을 사용하여

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

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

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

_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 : {
     입력 : '변화', / /​​ 호출의 this._afterInputChange
     boundingBox : [
         {
             유형 : '키'
             FN : '_onDirectionKey', / /​​ 통화 this._onDirectionKey을
             인수 : ((Y.UA.opera) "아래 :"?! "를 누르십시오 :") + "38, 40, 33, 34"
         }
         'mousedown'/ / 호출 this._afterBoundingBoxMousedown
     ]
     문서 : 'mouseup', / /​​ 호출 this._afterDocumentMouseup,
     Y : 'broadcastingObject : someEvent'/ / 호출이 [ "_afterYBroadcastingObject : someEvent"]
 } 

_EVENTS 항목의 번호와 개체 (해쉬)입니다. 속성의 이름, 즉, 해시의 키, 그의 행사 우리가 듣고됩니다 노드를 식별합니다. 그들은에 정의된 동일한 클래스의 열쇠 _CLASS_NAMES . 몇 가지 추가 특수 키가 있습니다 :

• "boundingBox" 경계 상자 자체를 참조합니다.

• "document" 이 위젯을 포함하는 문서를 말합니다.

• "THIS" 위젯 자체에 의미

• "Y" 을 나타냅니다 Y 인스턴스.

위젯은 물론 WidgetStdMod로 확장되었습니다 경우, 키 HEADER , BODY 및 FOOTER 그들이에서 사용할 수 있기 때문에 해당 섹션을 참조합니다 _classNames 해시. 위의 아무도 인용 될 필요가 없습니다 그들이 유효한 식별자가있다면 자바 스크립트가 인용하는 열쇠가 필요하지 않습니다.

_EVENTS 다음 속성이 처리 renderUI , bindUI 및 syncUI 위젯 이미 문서 본문 내에 삽입된 것으로 예상하므로 방법을 받았습니다, 그렇지 않으면 "document" 식별자는 실패합니다.

이러한 요소 각각에 대해 이벤트 식별자 또는 이벤트 식별자의 배열이 있습니다. 이벤트 듣지 이벤트 또는 자세한 내용과 개체의 형식으로 확인할 수 있습니다. 기본적으로, MakeNode는 리스너로 사용할라는 방법을 사용합니다 "_after" 는 첫 문자로 요소 식별자 뒤에 접두사가 대문자로 첫 문자로 이벤트 유형에 따라 다음 대문자로 표기했습니다. 위의 코드 블록은 각 이벤트에 대해 호출 방법을 보여줍니다.

이벤트 식별자는 속성이있는 객체 수있는 type , fn 및 args . type 필수이며 말을되는 이벤트의 유형을 나타냅니다. fn 속성은 따라서 자동으로 명명을 피하고 이벤트들을 수있는 방법의 이름을 제공합니다. 이후 _EVENTS 정적 속성입니다, 그것에 대한 액세스 권한도없고 this 그것이 방법 실제 참조를받을 수 있도록, 전용의 이름을. args 인수는 같은과 같이 호출자에게 추가로 인수를 전달하는 데 사용할 수있는 key 키 사양을 필요로 이벤트.

MakeNode 사용됩니다 Node.delegate 내 요소에 이벤트에 들어 boundingBox 가 사용되지만, Node.after 에서 이벤트 들어 boundingBox 과 문서 본문. 그것은 사용 this.after 아래 이벤트에 들어 THIS 키 및 Y.after 아래에 나열된 청취자에 대한 Y 핵심. 그들은, 위젯 이벤트에 응답할 수 있도록 그들에게 그렇게 어떠한 경우에도 이러한 이벤트가 방해하거나 중지할 수 있습니다 화재 개체의 동작을 필터링하지 않는 의미 때문에 모든 이벤트는 이벤트 리스너를 사용한 후에 말을하고 있습니다. (참고 : 듣고 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에서 오는 변화가 있으므로 표시하고 다음 루프를 피하기 위해 같은 플래그를 확인하도록 우리에게 달려있다. 식별자를 사용합니까 src 속성이 아닌의 값을 설정할 때 source 인식되지 않습니다.

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

  _ATTRS_2_UI : {
     BIND : 값,
     SYNC : VALUE
 } 

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

질문은 자연스럽게 왜 두 목록 동기화에 대한 다른 바인딩을위한 하나?, 발생 SYNC 이후 주위 처음 사용 renderUI 및 bindUI , 방법들이 존재하는 경우, 호출하고 이전 syncUI 에 나와있는 동안 BIND 에 바인딩됩니다 나중에 변경에 해당하는 속성. 꽤 자주 SYNC 배열보다 적은 수의 항목이 BIND 목록을 구성 요소에 대한 템플릿이 이미 구성 특성으로 매우 동일한 기본값을 수도 및 초기 동기화를 할 필요가 없습니다 때문입니다. 그러니까,에 대한 기본값 경우 value 구성 속성이 빈 문자열이며 <input> 템플릿에 요소가 전혀없는 value 속성을 다음 초기화 그들을 동기화할 필요가 없습니다.

에 나열된 속성 BIND 그들의 것이다 _uiSet Xxxx 속성이 임의의 순서로 설정할 수 있으므로, 임의의 순서로 불리는 방법을. 에 나열된 속성 SYNC 하나가 다른 (어떤 사람들이해서는 안)에 의존한다면, 그들은 그들의 inheritors 전에 조상들을 함께 나열되는 순서대로 한 번 호출됩니다, 순서 중요한 수 있습니다.

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

_PUBLISH 재산

마지막으로, _PUBLISH 정적 속성이 출판되어야 그 이벤트를 나열합니다. 그것은 키와 그 값으로 구성 속성에 리터럴 개체로 이벤트의 이름을 사용하여 해시가 포함되어 있습니다. 그것은 모든 상속 체인에있는 해당 속성에 나열된 모든 이벤트를 게시합니다. 같은 이벤트 이름은 클래스에 실릴 수 있으며, 그것의 모든 클래스 상속에서, 어떤 것들은 나중의 구성 속성이 이전 사람의 것들을 무시하게됩니다. 예를 들어, 전세계적으로 기존의 이벤트 방송을 만들고 싶어 할 수도 있습니다. 마찬가지로 함께 _EVENTS 이후 속성 _PUBLISH 에 액세스하지 않고 정적 속성입니다 this 함수를 지정할 때, 그것은 주어진해야 문자열로 메서드의 이름입니다.

결론

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

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

갤러리 부품이 지금까지 제가 또 수정한 안토니 작은 옹기병의 버튼 세트를 읽을 수있는 인내를했고 모든 가능한 아코디언과 TimeSpinner 구성 요소를 만든 자들에게 보너스로 갤러리 .

에 대한 저자 : 다니엘 페레로 (화면 이름 Satyam)은 꽤 오랜 동안 주변되었습니다. ENIAC은 그가 태어난 전날 해제, 그래서 그는 그것을 놓친하지만 그는 이후로 많은것을보고하지 않은습니다. 그는 펀치 카드 기회, 프로그램 6502 칩 (애플 II를 기억하세요?), TRS - 80을 소유하고 다른 박물관에서되었을 그의 원래 아르헨티나에서 작동하는 장비 중 일부 환상적인 조각을 볼 수 있었죠. 세계화는 세계에 문을 열었을 때, 그의 다음 간신히 쓸만한 영어 (플러스 전기 공학 학위) NCSA 모자이크의 일 다시 베이 지역에서 5 년간 일을 기록한 경력 경로에 올려. 완전히 자신의 친구가 < 's와>'s의 전체 그의 일반 텍스트 편집기에서 쓴 재미있는 squiggles에 흥미 그는 프런트 엔드 엔지니어링의 세계에 대해 꽤 많은 걸 배웠 었죠. 이것은 코볼과 포트란부터 긴 여행 됐어요. 이제 그는 바르셀로나, 스페인에 가까운 지중해 해안에 아주 행복 반 은퇴 살고있다.

: 대화 찾기 bloglines | 테크노을

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