Yahoo! User Interface Blog (YUIBlog)

Parlaci un po 'del vostro progetto.

"Demetra" è il nome in codice per una recente applicazione web 2.0 che abbiamo costruito, che offre soluzioni potenti per il web conferencing, riunione ad hoc, e la gestione degli account. Attualmente abbiamo due suite principali di prodotto: "Meeting Center" e "Modulo Admin".

Anche se è ancora in frase RC senza accesso del pubblico a vederlo, ho estratto un prototipo del modulo Admin che dimostra la gestione delle proprietà del portale.

Quali componenti della Biblioteca YUI sono utilizzati nel progetto?

Quando ci sono stati inizialmente cercando di decidere quale JS framework UI e libreria da utilizzare, c'erano tre cose che ci ha venduto sul YUI: l'ottima documentazione, la grande varietà di widget maturi, e la licenza BSD, quindi ho introdotto YUI alla mia compagnia. I moduli seguenti sono utilizzati nel nostro progetto:

• CSS: Reset, Fonts
• Core: YAHOO, Dom, Evento
• Utilities: Connection Manager, DataSource, Element, JSON
• Widget: Calendario, Container, DataTable
• Strumenti: Logger, Test

Admin Panoramica del modulo di attuazione

I nostri principali requisiti per il modulo Admin inclusi:

• datatable con un popup editor personalizzato
• tema / skin di personalizzazione
• compatibilità browser

Ecco il markup semplice che consente di impostare l'interfaccia utente:

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

		 <div id="datatable-ux-bd">
			 <div id="node-depths" style="display: none"> root> Test> Test 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;" /> caricamento dei dati ...
			 </ Div>
		 </ Div>

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

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

			 <input type="radio" name="node-apply" checked="checked" /> nodo corrente solo <br />
			 <input type="radio" name="node-apply" /> nodo corrente e il bambino nodi <br />
			 <input type="radio" name="node-apply" /> nodi figlio solo
		 </ Fieldset>
	 </ Div>

Ecco un frammento di codice della semplice estensione che ho costruito per DataTable TextboxCellEditor:

    / / Semplice esempio di estendere le classi CellEditor / / short alias var lang = YAHOO.lang, util = YAHOO.util, widget = YAHOO.widget, Dom = util.Dom, Event = util.Event; / / estendere TextboxCellEditor Gcc. admin.TextboxCellEditor = function (config) {Gcc.admin.TextboxCellEditor.superclass.constructor.call (questo, 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,' admin-editor-hd '); var oCurrNode = document.createElement (' DIV ');. this.getContainerEl () insertBefore (oCurrNode, this.textbox); . 'nodo corrente:' oCurrNode.innerHTML = + Dom.get ("nodo di profondità ') innerHTML; Dom.addClass (oCurrNode,' admin-editor-pd '); var oApply document.createElement = (' DIV '); . this.getContainerEl () appendChild (oApply); oApply.innerHTML = Dom.get ('node-apply-wrap') innerHTML; Dom.addClass (oApply, 'admin-editor-fieldset');}, mossa:. funzione () {Gcc.admin.TextboxCellEditor.superclass.move.call (this); Dom.addClass (this.textbox, 'admin-editor-pd');}}); 

Poi un gestore cellClickEvent rileva il tipo sottostante di valore dei dati in corso di modifica e chiama uno dei redattori di cellule personalizzate.

Con la nostra architettura server costituito dal framework Apache Struts e l'applicazione contenitore Weblogic, abbiamo scoperto che YUI gioca un buon ruolo compagno come il "lato client-Controller" e funziona bene con i risultati di azione Struts come una dinamica datasource.

 <% @ Page pageEncoding = "UTF-8" contentType = "application / json; charset = UTF-8"%> <% @ taglib prefix = uri "s" =% "/ struts-tags"> {"PropertySet": {"Proprietà": [<s:iterator value="displayPropertyResultList" status="index">, {"Id": "<s:property value="id" />", "Nome": "<s: proprietà value = "nome" /> "," Tipo ":" <s:property value="type" /> "," valore ":" <s:if test="%{value != null}"> <s : la proprietà value = "valore" /> </ s: if> "," ApplyFrom ":" <s:property value="applyFrom" /> "," ApplyTo ":" <s: valore della proprietà = "applyTo" / > "," leggibile ":" <s:property value="readable" /> "," scrivibile ":" <s:property value="writable" /> "} <s: if test ="% {#! index.last} ">, </ s: if> </ s: iterator>]}} 

Maggiori dettagli e il codice sorgente sono disponibili su GitHub , dove ho estratto un prototipo dell'interfaccia utente Admin utilizzando un datasource locale, come una semplice dimostrazione.

Quali sono state le sfide di utilizzare YUI in questo progetto?

Le sfide principali sono state intorno al fatto che la maggior parte dei nostri sviluppatori non sono in realtà gli ingegneri frontend. Non sempre hanno esperienza abbastanza tanto che fare con problemi di cross-browser o JavaScript specifici trucchi. Fortunatamente YUI ci aiuta molto a rendere le strutture buon codice e per appianare la maggior parte dei problemi di compatibilità del browser.

Quali sono le prospettive per la Demeter? Quali sono alcune caratteristiche prossimi si affronteranno insieme a YUI?

Una delle caratteristiche prossime stiamo lavorando è un modulo di reporting che farà largo uso di grafici YUI . E stiamo anche progettando di usare TreeView widget per il refactoring nostro modulo rubrica.

Stiamo ancora usando YUI 2 , ma se sempre più widget ufficiali basati su YUI tre escono, si prenderà in considerazione tutto trasferirsi a YUI 3 in futuro.