Yahoo! User Interface Blog (YUIBlog)

Recite nam nešto o vašem projektu.

"Demeter" je kodno ime za novije web 2.0 aplikacije izgradili smo koja pruža snažne rješenja za web-konferencija, ad hoc sastanka, kao i računa za upravljanje. Trenutno imamo dva glavna proizvoda apartmana: "Meeting Center" i "Admin modul".

Iako je još uvijek u RC fraze bez javnog pristupa ga vidjeli, ja sam izdvojiti i prototip Admin modul koji pokazuje upravljanje portal svojstava.

Koje komponente Yui knjižnice koriste se u vaš projekt?

Kada smo na početku bili pokušavate odlučiti što JS okvir i UI knjižnica za korištenje, postoje tri stvari koje nam prodaju na Yui: super dokumentacija, širok izbor zrelih widgete, a BSD licencom, tako da sam upoznao Yui za moju tvrtku. Sljedeći moduli se koriste u naš projekt:

• CSS: Reset, Krstionica
• Core: YAHOO, Dom, Event
• Komunalne usluge: Connection Manager, DataSource, Element, JSON
• Widgeti: Kalendar, kontejnera, DataTable
• Alati: drvosječa, Test

Admin modul provedba pregled

Naši glavni zahtjevi za Admin modul su:

• datatable s prilagođeno urednik Decentni Popup-prozor
• Tema / koža prilagodbu
• IE kompatibilnost

Ovdje je jednostavan oznake koje postavlja sučelje:

     <div id="datatable-ux"> <div id="datatable-ux-hd"> </ div> <div id="datatable-ux-bd"> <div id = "čvora dubine" style = " display: none "> root> Testiranje> 5_Dev Testiranje BA> 80000_1010 </ div> <div id="output"> </ div> <div id="yui-datatable" class="yui-dt"> <img src = "slike / ikone loading.gif" alt = "loading" align = "absmiddle" style = "margin: 30px 0;" /> Učitavanje podataka ...  </ Div> </ div> <div id="datatable-ux-ft"> </ div> </ div> <div id="node-apply-wrap" style="display: none;"> <fieldset > <legend> Nanesite na </ legenda> <input type="radio" name="node-apply" checked="checked" /> Trenutni čvor samo <br /> <input type = "radio" name = "čvor- primijeniti "/> Trenutni čvor i dijete čvorovi <br /> <input type="radio" name="node-apply" /> djece čvorovi samo </ fieldset> </ div> 

Ovdje je isječak koda od jednostavnog produljenja sam sagradio DataTable TextboxCellEditor:

    / / Jednostavan primjer za proširenje CellEditor Klase / / kratki alias var lang = YAHOO.lang, util = YAHOO.util, dodatak = YAHOO.widget, Dom = util.Dom, događaji = util.Event / / produljiti TextboxCellEditor GCC. admin.TextboxCellEditor = funkcija (config) {Gcc.admin.TextboxCellEditor.superclass.constructor.call (to config);}; lang.extend (Gcc.admin.TextboxCellEditor, widget.TextboxCellEditor, {renderForm: Funkcija () {gcc . admin.TextboxCellEditor.superclass.renderForm.call (to); var OHD = document.createElement ('DIV');. this.getContainerEl () insertBefore (OHD, this.textbox); oHd.id = container.id + ' -admin-glavni urednik-voditelj '; Dom.addClass (OHD,' admin-glavni urednik-HD "); var oCurrNode = document.createElement ('DIV');. this.getContainerEl () insertBefore (oCurrNode, this.textbox); . oCurrNode.innerHTML = 'Trenutni čvor:' + Dom.get ('čvora dubine') innerHTML; Dom.addClass (oCurrNode, 'admin-glavni urednik-PD'); var oApply = document.createElement ('DIV'); . this.getContainerEl () appendChild (oApply); oApply.innerHTML = Dom.get ('čvor prijaviti-wrap') innerHTML; Dom.addClass (oApply, 'admin-urednik fieldset');} potez. funkcija () {Gcc.admin.TextboxCellEditor.superclass.move.call (to); Dom.addClass (this.textbox, 'admin-glavni urednik-PD');}}); 

Zatim cellClickEvent rukovatelj otkrije temeljnu vrstu podataka vrijednosti se uređuje i poziva jednu od prilagođenih stanica urednika.

Uz naš server arhitekturu koja se sastoji od Apache podupirači okvira i zahtjeva kontejnerskog WebLogic, otkrili smo da YUI igra dobar pratilac ulogu kao "Clientside-Controller" i dobro radi sa podupirače akcijskih rezultata kao dinamičan izvoru podataka.

 <% @ Stranica pageEncoding = "UTF-8" contentType = "application / JSON; charset = UTF-8"%>
 <% @ Taglib prefix = "s" uri = "/ podupirači-tags"%>
 {"PropertySet": {
 "Imovina": [
 <s:iterator value="displayPropertyResultList" status="index">;
     {
     "Id": "<s:property value="id" />"
     "Ime": "<s:property value="name" />"
     "Tip": "<s:property value="type" />"
     "Vrijednost": "<s:if test="%{value != null}"> <s:property value="value" /> </ s: if>",
     "ApplyFrom": "<s:property value="applyFrom" />"
     "ApplyTo": "<s:property value="applyTo" />"
     "Čitati": "<s:property value="readable" />"
     "Omogućeno pisanje": "<s:property value="writable" />"
     }
     <s:if test="%{!#index.last}">, </ s: if>

 </ S: iteratora>
 ]}
 }

Više informacija i izvorni kod su dostupne na GitHub , gdje sam izvadio prototip Admin UI koristeći lokalne izvoru podataka kao jednostavna demonstracija.

Koji su izazovi korištenja Yui u ovom projektu?

Glavni izazovi su oko činjenice da je većina naših developera, zapravo to nisu krajnji inženjera. Oni ne moraju uvijek sasvim kao mnogo iskustva koja se bavi cross-preglednika pitanja ili JavaScript-specifične trikove. Srećom YUI pomaže nam puno toga za napraviti dobar kod strukture i ugladiti najviše problema IE kompatibilnost.

Što je sljedeće za Demetra? Koje su neke nadolazeće značajke koje su rješavanju s Yui?

Jedna od nadolazećih značajki radimo na je izvještavanje modul koji će teške korištenje Yui Charts . I mi smo također namjeravate koristiti TreeView widget refactor naš adresar modula.

Mi još uvijek koriste Yui 2 , ali ako sve više i više službenih dodaci na temelju Yui 3 izaći, mi ćemo razmotriti potpuno sele Yui 3 u budućnosti.