Yahoo! User Interface Blog (YUIBlog)

Erzähl uns ein wenig über Ihr Projekt.

"Demeter" ist der Codename für eine aktuelle Web 2.0-Anwendung, die wir gebaut, die leistungsfähige Lösungen bietet, um Web-Konferenzen, ad-hoc-Sitzung, und Account-Management. Derzeit haben wir zwei große Produkt-Suites: "Meeting Center" und "Admin Module".

Obwohl es immer noch in RC Phrase mit der Öffentlichkeit nicht zugänglich, damit sie angezeigt, ich habe eine extrahiert Prototyp des Admin-Modul , dass das Management von Portal-Eigenschaften aufweist.

Welche Komponenten der YUI-Bibliothek in Ihrem Projekt verwendet?

Als wir zunächst versuchen, zu entscheiden, welche JS Rahmen und UI-Bibliothek zu verwenden, es gab drei Dinge, die uns auf YUI verkauft: die großartige Dokumentation, die Vielfalt der reifen Widgets und der BSD-Lizenz, so stellte ich YUI zu meiner Firma. Folgende Module sind in unserem Projekt verwendet:

• CSS: Reset, Fonts
• Core: YAHOO, Dom, Event
• Utilities: Connection Manager, DataSource, Element, JSON
• Widgets: Kalender, Container, DataTable
• Tools: Logger, Test

Admin-Modul Umsetzung Überblick

Unsere wichtigsten Anforderungen an die Admin-Modul enthalten:

• Datentabelle mit einer angepassten Editor popup
• Thema / skin Anpassung
• Browser-Kompatibilität

Hier ist die einfache Markup, bis setzt die UI:

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

		 <div id="datatable-ux-bd">
			 <div id="node-depths" style="display: none"> root> Test> 5_Dev Testing 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;" /> Daten werden geladen ...
			 </ Div>
		 </ Div>

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

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

			 <input type="radio" name="node-apply" checked="checked" /> Aktuelle Knoten nur <br />
			 <input type="radio" name="node-apply" /> aktuellen Knoten und untergeordnete Knoten <br />
			 <input type="radio" name="node-apply" /> Child-Knoten nur
		 </ Div>
	 </ Div>

Hier ist ein Code-Schnipsel von der einfachen Erweiterung I für DataTable TextboxCellEditor gebaut:

    / / Einfaches Beispiel, um die CellEditor Klassen erweitern
    / / Kurzen Alias
    var lang = YAHOO.lang,
	   util = YAHOO.util,
	   Widget = YAHOO.widget,
	   Dom = util.Dom,
	   Event = util.Event;

    / / Erweitern TextboxCellEditor
    Gcc.admin.TextboxCellEditor = function (config) {
	    Gcc.admin.TextboxCellEditor.superclass.constructor.call (this, 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-Kopf ";
		    Dom.addClass (OHD 'admin-editor-hd');

		    var oCurrNode = document.createElement ('DIV');
		    . this.getContainerEl () insertBefore (oCurrNode, this.textbox);
		    oCurrNode.innerHTML = 'Aktuelle Knoten:'. + Dom.get ("node-Tiefen") 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');
	    }

	    Umzug: function () {
		    Gcc.admin.TextboxCellEditor.superclass.move.call (this);
		    Dom.addClass (this.textbox, 'admin-editor-pd');
	    }
    });

Dann wird ein cellClickEvent Handler erkennt die zugrundeliegende Datentyp-Wert bearbeitet wird und ruft einen der individuelle Zelle Redakteure.

Mit unserem Server-Architektur, bestehend aus dem Apache Struts-Framework und die Anwendung Container Weblogic, fanden wir, dass YUI ein guter Begleiter Rolle spielt als die "Clientside-Controller" und arbeitet gut mit Struts Action Ergebnisse als dynamische Datenquelle.

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

 </ S: iterator>
 ]}
 }

Weitere Details und Quellcode sind auf GitHub , wo ich einen Prototyp des Admin UI mit einem lokalen als einfache Demonstration Datenquelle extrahiert haben.

Was haben die Herausforderungen mit YUI in diesem Projekt?

Die wichtigsten Herausforderungen sind um die Tatsache, dass die meisten unserer Entwickler in der Tat nicht Frontend-Ingenieure. Sie haben nicht immer ganz so viel Erfahrung im Umgang mit Cross-Browser-Probleme oder JavaScript-spezifischen Tricks. Glücklicherweise YUI hilft uns eine Menge guten Code-Strukturen zu machen und zu glätten meisten Browser Kompatibilitätsprobleme.

Was kommt als nächstes für Demeter? Was sind einige kommende Features, die Sie mit YUI Bekämpfung sind?

Einer der kommenden Features an denen wir arbeiten ist ein Reporting-Modul, das starken Gebrauch von machen wird YUI Charts . Und wir planen auch zu nutzen TreeView -Widget für die Umgestaltung unserer Adressbuch-Modul.

Wir sind immer noch mit YUI 2 , aber wenn mehr und mehr offizielle Widgets auf Basis YUI 3 herauskommen, betrachten wir völlig Umzug in YUI 3 in die Zukunft.