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

저희에게 여러분의 프로젝트에 대해 조금 말해.

"Demeter는"웹 회의, 특별 회의 및 계정 관리에 강력한 솔루션을 제공하고 우리가 만든 최근 웹 2.0 응용 프로그램의 암호명이다. "미팅 센터"와 "관리 모듈"현재 우리는 두 가지 주요 제품 스위트 있습니다.

그것을 볼 출입 금지와 RC 문구 아직이지만, 난 추출이 관리 모듈의 프로토 타입을 포털 프로퍼티의 관리를 보여줍니다.

어떤 YUI 라이브러리의 구성 요소는 프로젝트에 사용됩니까?

우리가 처음 JS 프레임 워크 및 UI 라이브러리 사용을 결정하려고했을 때, 거기 YUI 우리를 판매 세 가지되었습니다 : 위대한 설명서, 성숙한 위젯의 다양한, 그리고 BSD 라이센스, 그래서 내 회사 YUI를 도입했습니다. 다음 모듈은 저희 프로젝트에 사용됩니다 :

• CSS : 재설정, 글꼴
• 코어 : 야후 돔 이벤트
• 유틸리티 : 연결 관리자, 데이터 원본, 요소, JSON
• 위젯 : 캘린더, 컨테이너, DataTable의
• 도구 : 로거, 테스트

관리 모듈 구현 개요

관리 모듈에 대한 우리의 주요 요구 사항은 포함되어 있습니다 :

• 사용자 정의 편집기 팝업과 DataTable의
• 테마 / 스킨 사용자 정의
• 브라우저 호환성

여기 UI를 설정 간단한 마크업은 다음과 같습니다 :

     <div id="datatable-ux">
		 <div id="datatable-ux-hd"> </ 사업부>

		 <div id="datatable-ux-bd">
			 <div id="node-depths" style="display: none"> 루트> 테스트> 5_Dev 테스트 BA> 80000_1010 </ 사업부>

			 <div id="output"> </ 사업부>
			 <div id="yui-datatable" class="yui-dt">
			   <img src="images/icon-loading.gif" alt="loading" align="absmiddle" style="margin: 30px 0;" /> 데이터로드 중 ...
			 </ 사업부>
		 </ 사업부>

		 <div id="datatable-ux-ft"> </ 사업부>
     </ 사업부>

	 <div id="node-apply-wrap" style="display: none;">
		 <fieldset>
			 <legend> </ 전설>에 적용

			 <input type="radio" name="node-apply" checked="checked" /> 현재 노드에만 <br />
			 <input type="radio" name="node-apply" /> 현재 노드와 자식 노드 <br />
			 <input type="radio" name="node-apply" /> 자식 노드에서만
		 </ fieldset>
	 </ 사업부>

저는 여기에 DataTable의 TextboxCellEditor 위해 만들어진 단순 확장의 코드 스니펫 (snippet)은 다음과 같습니다 :

    CellEditor 클래스를 확장하기 위해 / / 간단한 예제
    / / 짧은 별칭
    var에 LANG = YAHOO.lang,
	   UTIL =의 YAHOO.util,
	   위젯 =의 YAHOO.widget,
	   돔 = util.Dom,
	   이벤트 = util.Event;

    / / TextboxCellEditor을 연장
    Gcc.admin.TextboxCellEditor = 기능 (설정) {
	    Gcc.admin.TextboxCellEditor.superclass.constructor.call (이, 설정);
    };
    lang.extend (Gcc.admin.TextboxCellEditor, widget.TextboxCellEditor {
	    renderForm : 함수 () {
		    Gcc.admin.TextboxCellEditor.superclass.renderForm.call (이);

		    var에 oHd = document.createElement ( 'DIV');
		    . this.getContainerEl () insertBefore (oHd, this.textbox);
		    oHd.id = container.id + '- 관리자 - 편집기 - 머리';
		    Dom.addClass (oHd '관리자 - 에디터 - HD');

		    var에 oCurrNode = document.createElement ( 'DIV');
		    . this.getContainerEl () insertBefore (oCurrNode, this.textbox);
		    oCurrNode.innerHTML = '현재 노드 :'. + Dom.get ( '노드 깊이') innerHTML;
		    Dom.addClass (oCurrNode '관리자 - 편집 PD');

		    var에 oApply = document.createElement ( 'DIV');
		    this.getContainerEl () appendChild (oApply).;
		    oApply.innerHTML = Dom.get ( '노드 적용 - 포장') innerHTML.;
		    Dom.addClass (oApply '관리자 - 편집 fieldset');
	    }

	    이동 : 함수 () {
		    Gcc.admin.TextboxCellEditor.superclass.move.call (이);
		    Dom.addClass (this.textbox '관리자 - 편집 PD');
	    }
    });

다음 cellClickEvent 핸들러는 데이터 값이 수정되는 기본 유형을 감지하고 사용자 정의 셀 편집기 중 하나를 호출합니다.

아파치 Struts 프레임 워크와 응용 프로그램 컨테이너 웹로직으로 구성된 저희 서버 아키텍처를 통해, 우리는 YUI가 "Clientside 컨트롤러"로 좋은 동반자 역할을하고 데이터 소스를 동적으로 Struts 액션 결과와 함께 잘 작동 것으로 나타났습니다.

 <% @ pageEncoding 페이지 = "UTF - 8"contentType = "응용 프로그램 / JSON; 문자셋 = UTF - 8"%>
 <% @ taglib 접두사 = "S"URI = "/ struts - 태그"%>
 { "PropertySet": {
 "재산": [
 <s:iterator value="displayPropertyResultList" status="index">;
     {
     "ID": "<s:property value="id" />"
     "이름": "<s:property value="name" />"
     "입력": "<s:property value="type" />"
     "값": "<s:if test="%{value != null}"> <s:property value="value" /> </ S : 경우>",
     "ApplyFrom": "<s:property value="applyFrom" />"
     "ApplyTo": "<s:property value="applyTo" />"
     "읽기": "<s:property value="readable" />"
     "쓸": "<s:property value="writable" />"
     }
     <s:if test="%{!#index.last}"> </ S :있다면>

 </ S : 반복자>
 ]}
 }

자세한 내용과 소스 코드에서 사용할 수있는 GitHub 나는 간단한 시범과 같은 데이터 소스 현지를 사용하여 관리 UI의 프로토 타입을 추출했습니다.

무엇이이 프로젝트에 YUI를 사용의 도전 있었나요?

주요 과제는 우리 개발자의 대부분은 실제로 프론트 엔드 엔지니어하지 않는 사실은있다. 그들은 항상 크로스 브라우저 문제 또는 자바 스크립트 구체적인 트릭을 다루는 꽤 많은 경험을 필요가 없습니다. 다행히 YUI 우리에게 좋은 코드 구조를 만들기 위해 대부분의 브라우저 호환성 문제를 원활하게하기 위해 많은 도움이됩니다.

Demeter 다음 계획은 뭐죠? 당신은 YUI와 태클 일부 예정된 기능은 무엇입니까?

우리가 작업중인 다가오는 기능 중 하나는 많이 사용하게하는보고 모듈입니다 YUI 차트를 . 그리고 우리는 또한 사용 계획 TreeView의 refactor의 주소록 모듈에 위젯을.

우리는 여전히 사용하고있는 YUI 2 지만을 기반으로 더 많은 공식 위젯을 경우 YUI 3 나와, 우리는 완전히 미래에 YUI 3 이동하실 수 있습니다.