Yahoo! Blog User Interface (YUIBlog)

Conte-nos um pouco sobre seu projeto.

"Demeter" é o codinome de uma recente aplicação web 2.0 que nós construímos, que fornece soluções poderosas para web conferência, reunião ad hoc, e gerenciamento de contas. Atualmente temos dois conjuntos de produtos principais: "Encontro do Centro" e "Módulo Administrador".

Embora ele ainda está em frase RC sem acesso público para vê-lo, eu ter extraído um protótipo do módulo de administração que demonstra a gestão de propriedades do portal.

Quais os componentes da Biblioteca YUI são usados ​​em seu projeto?

Quando estávamos inicialmente tentando decidir qual JS quadro e UI biblioteca para usar, havia três coisas que nos venderam sobre YUI: o grande documentação, a grande variedade de widgets maduros, ea licença BSD, então eu apresentei YUI para minha empresa. Os seguintes módulos são utilizados em nosso projeto:

• CSS: Reset, Fontes
• Core: YAHOO, Dom, Evento
• Utilitários: Gerenciador de conexões, DataSource, Element, JSON
• Widgets: Calendário, Container, DataTable
• Ferramentas: Logger, Teste

Visão Geral da Implementação módulo Admin

Nossos principais requisitos para o módulo de administração incluem:

• tabela de dados com um pop-up personalizado editor
• tema / pele personalização
• compatibilidade do navegador

Aqui está a marcação simples que define a interface do usuário:

     <div id="datatable-ux">
		 <div id="datatable-ux-hd"> </ div>

		 <div id="datatable-ux-bd">
			 <div id="node-depths" style="display: none"> root> Teste> Teste 5_Dev BA> 80000_1010 </ div>

			 <div id="output"> </ div>
			 <div id="yui-datatable" class="yui-dt">
			   <img src="images/icon-loading.gif" alt="loading" align="absmiddle" style="margin: 30px 0;" /> carregamento de dados ...
			 </ Div>
		 </ Div>

		 <div id="datatable-ux-ft"> </ div>
     </ Div>

	 <div id="node-apply-wrap" style="display: none;">
		 <fieldset>
			 <legend> Aplicar a <lenda />

			 <input type="radio" name="node-apply" checked="checked" /> nó atual somente <br />
			 <input type="radio" name="node-apply" /> nó atual e criança nós <br />
			 <input type="radio" name="node-apply" nós /> crianças só
		 <Fieldset />
	 </ Div>

Aqui está um trecho de código da extensão simples que eu construí para DataTable TextboxCellEditor:

    / / Exemplo simples para estender as classes CellEditor / / var curtas apelido lang = YAHOO.lang, util = YAHOO.util, widget = YAHOO.widget, Dom = util.Dom, Evento = util.Event / / estender TextboxCellEditor Gcc. admin.TextboxCellEditor = function (config) {Gcc.admin.TextboxCellEditor.superclass.constructor.call (este, config);}; lang.extend (Gcc.admin.TextboxCellEditor, widget.TextboxCellEditor, {renderForm: function () {Gcc . admin.TextboxCellEditor.superclass.renderForm.call (this); var OHD = document.createElement ('div');. this.getContainerEl () insertBefore (OHD, this.textbox); oHd.id = container.id + ' -admin-editor-head '; Dom.addClass (OHD,' editor-admin-hd '); var oCurrNode = document.createElement (' div ');. this.getContainerEl () insertBefore (oCurrNode, this.textbox); '. nó atual: "oCurrNode.innerHTML = + Dom.get (' nó de fundo ') innerHTML; Dom.addClass (oCurrNode,' admin-editor-pd '); var oApply = document.createElement (' div '); . this.getContainerEl () appendChild (oApply); oApply.innerHTML = Dom.get ('nó-apply-wrap') innerHTML; Dom.addClass (oApply, 'admin-editor fieldset');}, movimento:. função () {Gcc.admin.TextboxCellEditor.superclass.move.call (this); Dom.addClass (this.textbox, 'admin-editor-pd');}}); 

Em seguida, um manipulador cellClickEvent detecta o tipo de dados subjacente valor que está sendo editado e chama um dos editores de celulares personalizados.

Com a nossa arquitetura de servidor que consiste no Struts framework Apache eo aplicativo de contêiner Weblogic, descobrimos que YUI desempenha um papel bom companheiro como o "clientside-Controller" e funciona bem com os resultados das ações do Struts como uma dinâmica fonte de dados.

 <% @ Page pageEncoding = "UTF-8" contentType = "application / json; charset = UTF-8"%>
 <% @ Taglib prefix = "s" uri = "/ struts-tags"%>
 {"PropertySet": {
 "Propriedade": [
 <s:iterator value="displayPropertyResultList" status="index">;
     {
     "Id": "<s:property value="id" />",
     "Nome": "<s:property value="name" />",
     "Type": "<s:property value="type" />",
     "Valor": "<s:if test="%{value != null}"> <s:property value="value" /> </ s: if>",
     "ApplyFrom": "<s:property value="applyFrom" />",
     "ApplyTo": "<s:property value="applyTo" />",
     "Legível": "<s:property value="readable" />",
     "Writable": "<s:property value="writable" />"
     }
     <s:if test="%{!#index.last}">, </ s: if>

 </ S: iterator>
 ]}
 }

Mais detalhes e código-fonte estão disponíveis no GitHub , onde tenho extraído um protótipo da interface do usuário administrador utilizando um local fonte de dados como uma demonstração simples.

Quais foram os desafios de usar YUI neste projeto?

Os principais desafios foram em torno do fato de que a maioria dos desenvolvedores não são, de facto, os engenheiros frontend. Eles nem sempre têm experiência bastante tanto lidar com questões cross-browser ou JavaScript específicas truques. Felizmente YUI nos ajuda muito a fazer boas estruturas de código e para suavizar a maioria dos problemas de compatibilidade do navegador.

O que vem por Demeter? Quais são as características que você próximas estão resolvendo com YUI?

Um dos recursos programados em que estamos trabalhando é um módulo de relatórios que fazem uso pesado de gráficos YUI . E também estamos planejando usar TreeView widget refatorar nosso módulo de endereços.

Nós ainda estamos usando YUI 2 , mas se mais e mais elementos oficiais com base em YUI 3 sair, nós vamos considerar totalmente de se mudar para YUI 3 no futuro.