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

YUI 극장 - 제프 크레이그 : "Demystifying 로더 : 고급 모듈 구성"(31 분).

년 | 10시 10분에서 2011년 12월 16일 라이언 그루브가 아냐 개발 , YUI 극장이 | 아니오 코멘트

YUIConf 2011에서이 이야기에서는 Meebo 엔지니어 및 YUI 기고자 제프 크레이그 ( @ foxxtrot ) 항상 YUI 로더에 대해 알고 싶었지만 요청하기 두려웠 모든 걸 보여준다. 이것은 YUI 3의 성능에 중요한 일을 다른 사람을 위해 - 참조해야합니다.

링크

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

YUI : 개관 시간 목 12월 15일

년 | 11시 59분에서 2011년 12월 13일 에릭 Ferraiuolo에 의해 아냐 개발 , 개관 시간 | 아니오 코멘트

YUI 3.5.0 PR1

YUI 3.5.0 PR1이 가능합니다 ! 이것은 3.5.0 세 미리보기 자료의 첫 번째입니다.

이 개관 시간의 경우 우리는 PR1에 무엇이 강조하고 당신이 3.5.0 바위 고체 상태인지 확인하기 위해 참여하는 방법을 논의됩니다. 우리는 또한 이미 3.5.0 PR1를 (어느 사용하기 시작했습니다 멋진 개발자 쇼의 - 손에 요청됩니다 CDN에 ). 목요일 오세요 :) 다운 손으로 잡히진 않아

또한, YUI 라이브러리 준비 사이트는 최신 사용자 가이드 및 API 문서와 함께 업데이 트되어 있으며로부터 피드백에 대한 응답으로 마지막 개관 시간 , 우리는 지금 우리가 사용하고있는 GitHub 위키를 추적하기 위해 지속적인 개발 논의 .

녹음

녹음은 YUILibrary 유튜브 채널에서 사용 가능한 .

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

YUI 3.5.0에서 응용 프로그램 프레임 워크 변경

라이언 그루브에 의한 3시 40분 오후에 2011년 12월 12일 |에 개발 | 1 개의 덧글

의 초기 릴리스 이후로 애플 리케이션 프레임 워크 YUI 3.4.0에서, 우리는 그것이 채택되어있어 얼마나 빨리에 놀라는 있었어요. 프로젝트에서 대형 과 소형 , 오랜 YUI 사용자 및 라이브러리에 완전히 처음 접하는 사용자 모두 애플 리케이션 프레임 워크의 MVC 구성 요소를 사용하고 훌륭한 피드백과 버그 리포트를 제공하고 열정적으로 왔습니다. 당신을 감사하십시오!

YUI 3.5.0에서는 애플 리케이션 프레임 워크는 버그 수정 많은 일부 주요 기능 향상을 받게됩니다. 에릭 Ferraiuolo 자신의 앞으로 많은 변화가 덮여 환상 YUIConf 토크 하지만 우리뿐만 때문에 어찌 될지 그리고 3.4.x에서 애플 리케이션 프레임 워크 기반의 코드를 업그레이 드하려는 경우에 대비해야하는지 알거야 여기서 강조하고자 3.5.0 있습니다. 이러한 변화가 이미 YUI 3.5.0 PR1 오늘 발표되었습니다, 그래서 지금 테스트를 시작하는 좋은 시간이다.

Y.Controller 지금 Y.Router입니다

"컨트롤러"특히 그 Y.View 재생보다 전통적으로 컨트롤러와 같은 역할을 주어 정말 URL 기반 라우팅 더 많은 자체에 관한 구성 요소를위한 바보와 혼란의 이름이었다. 우리는 총알을 물고 3.5.0에서 Y.Router로 Y.Controller 클래스의 이름을 변경하기로 결정했습니다. Y.Controller는 하위 호환성을 유지하기 위해 별칭이 될 것이다,하지만이 별칭은 결국 제거됩니다, 그래서 당신은 새 이름을 참조하도록 코드를 업데이 트해야합니다.

새로운 경로 처리기 서명

Y.Router의 경로 처리기 함수에 대한 메서드 서명에 더 유사하게 약간 변경된 표현 과 서버 (현재 3.5.0 위해 최선을 다하고 기능)를 사용하면 라우터의 API를보다 자연스럽게 만들 수 있습니다.

: 이전 경로 처리기 함수는 두 개의 인수받은 req (요청 개체)와 next () 함수. : 3.5.0에서 경로 처리기는 세 가지 인수 받게됩니다 req , res (Response 개체)를 입력한 다음 next .

하위 호환성을 위해서, 새로운 res 인수도 정확하게 같은 동작 기능입니다 next 기대 때문에 이전 스타일의 경로 처리기 next 두 번째 ARG는 3.5.0에서 잘 동작을 계속하므로. 그러나,이 호환성 심 결국 제거되므로 코드를 업데이 트하는 데 너무 오래 기다리지 않습니다.

일부 속성은 현재 속성이 있습니다

우리는 - 완전한-YUI-좋아하지 3.4.0에서 애플 리케이션 프레임 워크 구성 요소에서 구성 가능한 옵션에 대한 속성을 사용하고 있지만 이것은 좀 혼란스럽고 제한 조금 이상임이 드러났다의 스타일 속성은 혜택을 안 이후로 실험 변화 이벤트, setters 및 수행 속성과 같은 validators에서. 그래서 3.5.0에서, 우리는 속성이 속성의 많은 변환하고.

불행히도, 이러한 변화는 하위 호환되지 않습니다, Y.Controller (현재 Y.Router) 또는 Y.View를 사용하므로 기존의 코드를 업데이 트해야 할 수도 있습니다. 특히, Y.Router의 html5 , root , 그리고 routes 속성은 현재 속성이며, Y.View의 container , model , 그리고 modelList 속성뿐만 아니라 현재 속성입니다.

이 외에도 Y.View의 container 의 CSS 선택자이 페이지에서 노드를 찾는 데 사용으로 속성은 이제 문자열 값을 처리합니다. 3.4.x에서는 노드로 변환되어야 원시 HTML을 표현 문자열 값을 생각했습니다. 이전 동작을 얻으려면, 단지에서 기존 HTML 문자열 값을 변경 '<div>foo</div>' 위해 Y.Node.create('<div>foo</div>') .

3.5.0 PR1에 대한 설명서

YUI 3.5.0 PR1 이러한 변경 및 기타 변경 워크 - 인 - 진행 문서는 Google에서 찾을 수 있습니다 준비 웹사이트 . 다음은 응용 프로그램 프레임 워크 3.5.0에서 deprecations 귀하의 코드를 업그레이 드하는 방법에 대한 세부 정보를 포함 관련 스테이징 문서에 대한 몇 가지 링크가 있습니다 :

stage.yuilibrary.com에서 내용이 진행중인 작업을 반영하고 불완전하거나 심지어 때때로 우리는 테스트 새로운 것들로 고장이 될 수 있습니다. 당신은 언제나 우리의 생산 사이트에서 최신 stable 릴리스에 대한 문서를 찾을 수 yuilibrary.com .

새로운 다른 무엇입니까?

이 블로그 게시물에서 나는 3.5.0에있는 애플 리케이션 프레임 워크를 찾는 것이 중요 deprecations을 정리했지만, 기능 향상 많은 이하 - 더 - 후드의 버그 수정도 있습니다. 3.5.0 PR1의 애플 리케이션 프레임 워크 변경의 전체 목록을 보려면 역사 파일을 참조하십시오 .

또한 Y.App 당신을거야 하나의 사용하기 쉬운 API에 URL 기반 라우팅 및보기 관리를 래핑 애플 리케이션 프레임 워크의 멋진 새로운 높은 수준의 구성 요소에 대해 곧 에릭의 블로그 게시물을 찾아 제로로부터 시간에 작업을 응용 프로그램에.

우리는 당신이 미리보기 릴리스를 사랑 희망, 우리는 여러분의 의견을 언제나 환영합니다! 귀하는 우리에게 피드백을 보낼 수있는 포럼 에 버그 리포트 , 트위터에 Freenode의 # YUI IRC 채널에서, 또는 주석과 여기에 차임.

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

YUI 3.5.0 PR1이 가능합니다

2011년 12월 12일 오후 3시 36분에서 앨런 Rabinovich에 의한 |에 개발 | 코멘트가 없습니다

YUI 3.5.0 PR1

YUI 3.5.0 미리보기 릴리스 1은 개발자 커뮤니티에서 테스트 및 의견에 배포되었습니다. 다음에서 야후 CDN에 찾을 수 yui.yahooapis.com/3.5.0pr1/build/yui/yui-min.js , 또는 zip 파일을 다운로드하는 당신이 직접 호스팅하려는 경우.

PR1에 도입된 변경 롤업 우리 GitHub 위키에서도 볼 수 있습니다. 또한 검토할 수 있습니다 이 릴리스에서 해결되었습니다 티켓의 목록을 .

워크 인 진행률 사용자 가이드 및 API 문서 3.5.0에 대한 우리의 준비 사이트에서 찾았는데,이 문서가 불완전하거나 우리가 새로운 물건을 테스트하는 곳이 이곳이기 때문에 심지어 고장이 될 수있는 조심하실 수 있습니다. 최신 stable 릴리스를위한 공식 문서는 항상 우리의 생산 현장에서 찾을 수 yuilibrary.com .

그외 변경 사항은 YUI 3.5.0의 곧 프리뷰 릴리스에 도입된 것입니다, 그들 중 일부는 개발자 자신의 지점에서 현재 다음과 같은 풀 요청을 통해 초기 검토를 위해 사용할 수 있습니다 :

이 릴리스에 대한 버그를 제출하려면, 우리의 방문하시기 바랍니다 버그 추적 시스템 . 여러분이 이러한 및 미래의 모듈에 입력을 제공하려는 경우 3.5.0 릴리스에 관련된 다양한 주제에 대한 지속적인 논의는 우리에 일어나고있다 GitHub 위키.

모든 계획대로된다면, 2012년 1월 30일에 YUI 3.5.0 PR2을 출시하도록하겠습니다. 즐거운 휴일!

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

YUI 극장 - 앨런 Rabinovich : "YUI 캘린더 - 스타일있는 모듈 구축의 사례 연구"(47 분).

2011년 12월 8일 오후 1시 2분 라이언 그루브에 의한 |에서 개발 , YUI 극장 | 코멘트가 없습니다

YUIConf 2011에서이 이야기에서는 YUI 엔지니어 앨런 Rabinovich는 ( @ allenr ) 그가 건축가와 새로운 빌드하는 데 사용되는 프로세스 공유 캘린더 위젯 YUI 3을, 그리고 자신만의 위젯을 만들어 유사한 프로세스를 사용하는 방법을 설명합니다. 그는 또한 새 구성 요소를 보여주는 여러 캘린더의 렌더링을 빠르게하는 데 사용 영리 성능 트릭을 보여준다.

링크

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

YUI 극장 - 패트 Cavit : "자동화 웹사이트 최적화"(32 분).

2011년 12월 6일 오후 2시 58분 라이언 그루브에 의한 |에서 개발 , YUI 극장 | 2 개의 댓글

팻 Cavit ( @ tivac )에서 프론트 엔드 엔지니어 ArenaNet 와 적극적인 YUI의 기고자 및 커뮤니티 회원,를 사용하여 이러한 파일 연결, minification, 이름 바꾸기 등의 빌드 타임 웹사이트 최적화를 자동화에서이 이야기를주고 YUIConf 2011에서 우리에 합류 개미는 도구를 빌드합니다.

링크

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

대량 에디터 위젯 : YUI 3 갤러리에서

2011년 12월 5일 오후 1시 1분에서 존 Lindal에 의한 |에서 개발 , YUI 3 갤러리 | 코멘트가 없습니다

QuickEdit 플러그인 을위한 YUI 3 DataTable의가 쉽게 원자 조작과 같은 기록의 전체 페이지를 편집할 수 있습니다. 그러나 가끔은 더 많은 일을해야합니다. 예를 들어, 동시에 당신이 편안하게 한 페이지에 들어갈 수있는 것보다 더 많은 레코드를 편집해야 할 수도 있습니다. 아니면 추가, 복제, 그리고 원자 작업의 일부로 기록을 제거를 지원해야 할 수도 있습니다. 아니면 하나의 테이블 셀에 그들을 배치하여 시각적으로 그룹 필드에 원하는 수 있습니다. 대량 에디터 위젯은 이러한 가능성을 지원합니다.

( 이 예제와 함께 재생 화면을 클릭하십시오 .)

개요

대량 편집기 도구에는 세 가지 요소로 구성되어 있습니다 :

Data source: 삽입, 삭제에, 그리고 변경 값 : 이것은 YUI 데이터 소스와 변경 내용을 관리 래핑합니다.
Base widget: 이것은 각 레코드 내의 레코드와 필드를 관리하여 편집을위한 기본 구조를 제공합니다. 파생 클래스 사업부, tbody, 또는 다른 컨테이너가 될 수있는 별도의 행,에 각 레코드를 렌더링합니다.
HTML table implementation: 이것은 HTML 테이블에 tbody로 각 레코드를 렌더링하기 위해 기본 위젯을 확장합니다. 열 구성 테이블의 각 열에 표시되는 필드를 결정합니다. 사용자 정의 셀 포맷은 단일 테이블 셀 안에 여러 개의 필드를 렌더링하는 데 사용할 수 있습니다.

구성

위의 화면을 생성 예제에서는 구성 가능한 한 간단하게 유지되었습니다 :

fields 각 레코드의 편집 가능한 값을 정의합니다. 기본 유형은 입력입니다. 다른 유효한 유형은 선택하고 textarea입니다. (일부는 값 목록을 필요로합니다.) 기본 유효성 검사에 의해 제공되는 폼 관리자 갤러리 모듈. 이것은 포함 필수 항목, 길이 제한 및 숫자 범위를 . 더 복잡한 검증을 지정하여 수행할 수 있습니다 regex 하거나 자신의 기능 ( fn ). 다음은 실제 예제에서 발췌입니다 :

 VAR 분야 =
 {
	 제목 :
	 {
		 형식 : 'textarea'
	 }
	 연도 :
	 {
		 검증 :
		 {
			 CSS : 'yiv-정수 : [1500,2100]'
		 }
	 }
	 색상 :
	 {
		 형식 : '선택',
		 값 :
		 [
			 {값 : '빨간색', 텍스트 : '빨간색'}
			 {값 : '녹색', 텍스트 : '그린'}
			 {값 : '파란색', 텍스트 : '블루'}
		 ]
	 }
 };

Y.BulkEditDataSource 의 인스턴스가 필요 Y.DataSource 다음과 같은 매개 변수를 :

uniqueIdKey: 고유 각 레코드를 식별하는 키 이름입니다.
generateRequest: 기능에 대한 요청 매개 변수를 생성 Y.DataSource . (때문에, 예제의 비어 Y.DataSource.Local 항상 모든 데이터를 반환합니다.)
extractTotalRecords: 에서 레코드의 총 개수를 추출하는 기능은 Y.DataSource 응답을.

예제 사용하기 때문에 Y.DataSource.Local , totalRecordsReturnExpr 도 필요합니다. 어디 레코드의 총 개수를 저장하는 응답이 OGNL 표현식을 지정합니다. (납니다 extractTotalRecords 이 값을 읽습니다.)

 VAR ds는 = 새로운 Y.BulkEditDataSource (
 {
	 DS : raw_ds,
	 uniqueIdKey : 'ID',
	 generateRequest : 함수 () {}
	 totalRecordsReturnExpr : '. meta.totalRecords'
	 extractTotalRecords : 기능 (응답)
	 {
		 response.meta.totalRecords를 반환;
	 }
 });

Y.HTMLTableBulkEditor 데이터 소스의 필드 구성 및 열 구성이 필요합니다. 사용자 정의 포맷 터를 지정하지 않는 열 구성에서 핵심은, 필드 이름입니다. 레이블은 열 제목으로 사용됩니다. 다음은 실제 예제에서 발췌입니다 :

 VAR 열 =
 [
	 {
		 키 : '확인란'
		 라벨 : '<input type="checkbox" id="select-all" />'
		 포맷터 : 함수 (O)
		 {
			 VAR 마크업 = '<input type="checkbox" class="record-select" id="{id}" />';
			 o.cell.set ( 'innerHTML', Y.Lang.sub (마크업,
			 {
				 ID : this.getRecordId (o.record)
			 }));
		 }
	 }
	 {키 : '제목', 라벨 : '제목'}
	 {키 : '년', 라벨 : '년'}
	 {키 : '컬러', 라벨 : '컬러'}
 ];

(실제 예제에 대한 사소한 확장자 정의합니다 Y.HTMLTableBulkEditor 확인란 열을 처리합니다.)

당신은 또한 인스턴스 전달할 수 Y.Paginator 하기 Y.BulkEditDataSource . 이것은 별도 더 복잡로 입증되고 라이브 예 .

로컬 대 원격 데이터 소스

로컬 또는 원격 데이터 소스의 사용 여부를 결정할 때, 당신은 신중하게 무역 오프 고려해야합니다. 트레이드 오프 분명한는 paginating 때 데이터 소스 현지 빠르고이지만 초기 페이지 로딩이 오래 걸릴 것이고, 그것은 클라이언트에서 더 많은 메모리를 필요로합니다.

대량 편집기 위젯 그러나 추가적인 무역 오프 부과.

첫째, 데이터 원본 유이 불변의 데이터를 반환해야합니다. 이것은 로컬 데이터 소스에 대한 자동이지만, 원격 데이터 원본에 대한 구현하기 힘들 수 있습니다. 당신은 둘 이상의 사용자가 그들을 수정할 수있는 경우 일괄 편집 동작이 진행되는 동안 데이터베이스 테이블의 행을 잠글 필요합니다.

둘째, 로컬 및 원격 데이터 소스 간의 선택은 귀하가 데이터를 저장하는 허용하는 방법에 영향을줍니다. 당신은 로컬 데이터 소스를 사용하면 최선의 노력 절약, 즉 할 수, 서버의 모든 유효한 레코드를 저장, 데이터 소스 지역에서 그들을 제거하고 사용자가 잘못된 값을 가지고 레코드에 집중할 수 있습니다. 모든 데이터가 유효 후 원격 데이터 소스를 사용할 때, 불변 요건이만이 전부 아니면 아무것도 절약 즉, 할 수 있고, 데이터만을 저장할 수 있습니다.

현실적인 유스 케이스

대량 편집기 도구의 원래 동기는 업로드된 스프레드 시트의 후처리를 허용하는 것이었다. 후처리 단계를 소개하면 스프레드 시트 값을 완벽하게 할 필요성을 제거합니다. 오류 대신 전체 업로드를 거부할 대량 편집기 위젯에 표시하고 해결할 수 있습니다. 또한, 서버에서 처리하면 각 레코드에 필요한 추가적인 가치를 가장 잘 맞춰 할당을 할 수 있으며, 사용자는 저장하기 전에 이러한 추가적인 가치를 확인하고 수정할 수 있습니다. 이것은 스프레드 시트의 초기 생성을 단순화합니다.

이 시나리오에서는 원격 데이터 소스는 최고의 선택입니다. 업로드된 데이터는 스크래치 공간에 저장되며, 다른 사용자가 그것을 볼 수 있기 때문에, 불변이 보장됩니다. "전부 아니면 아무것도"는 절약 적합 : 일단 모든 오류는 저장 작업이 단지 표준 업로드 작업처럼 원자이며, 해결되었습니다.

소개 저자 : 존 Lindal는 ( @ jafl5272 트위터)에 토대 구축 리드 엔지니어 중 하나입니다 야후! APT가 내장되어 있습니다. 이전에, 그는 야후 제작사 네트워크에서 근무했습니다.

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

에서 제공하는 워드 프레스 에서 야후! 웹 호스팅 .

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

YUI 극장 - 제프 크레이그 : "Demystifying 로더 : 고급 모듈 구성"(31 분).

링크

YUI : 개관 시간 목 12월 15일

YUI 3.5.0 PR1

녹음

YUI 3.5.0에서 응용 프로그램 프레임 워크 변경

Y.Controller 지금 Y.Router입니다

새로운 경로 처리기 서명

일부 속성은 현재 속성이 있습니다

3.5.0 PR1에 대한 설명서

새로운 다른 무엇입니까?

YUI 3.5.0 PR1이 가능합니다

YUI 극장 - 앨런 Rabinovich : "YUI 캘린더 - 스타일있는 모듈 구축의 사례 연구"(47 분).

링크

YUI 극장 - 패트 Cavit : "자동화 웹사이트 최적화"(32 분).

링크

대량 에디터 위젯 : YUI 3 갤러리에서

개요

구성

로컬 대 원격 데이터 소스

현실적인 유스 케이스

트위터에서 YUI 라이브러리

번역

신디케이트

최근 게시물

YUI 라이브러리

아카이브 :

정책 코멘트

야후되기

메타 :

링크

YUI 3.5.0 PR1

녹음

Y.Controller 지금 Y.Router입니다

새로운 경로 처리기 서명

일부 속성은 현재 속성이 있습니다

3.5.0 PR1에 대한 설명서

새로운 다른 무엇입니까?

링크

링크

개요

구성

로컬 대 원격 데이터 소스

현실적인 유스 케이스

트위터에서 YUI 라이브러리

번역

신디케이트

최근 게시물

YUI 라이브러리

아카이브 :

blogroll을

정책 코멘트

야후되기

메타 :