Yahoo! User Interface Blog (YUIBlog)

YUI Theater - Jeff Craig: "Entmystifizierung Loader: Erweiterte Module Configuration" (31 min.)

In diesem Vortrag aus YUIConf 2011, Meebo Ingenieur und YUI-Nutzer Jeff Craig ( @ foxxtrot zeigt) alles, was Sie schon immer wollten, um über die YUI Loader wissen, aber nie zu fragen wagten. Dies ist ein Muss für jedermann tun performance-kritischen Arbeit mit YUI 3.

Links

• Alle in HD-Qualität auf YouTube
• Slides
• Vollständige YUIConf 2011 Playlist auf YouTube

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

YUI: Öffnungszeiten Do 15. Dezember

YUI 3.5.0 PR1

YUI 3.5.0 PR1 ist nun verfügbar ! Dies ist die erste von drei Preview-Versionen für 3.5.0.

Für diese Öffnungszeiten werden wir hervorheben, was in PR1 und diskutieren, wie Sie sich einbringen können, um sicherzustellen, 3.5.0 ist felsenfest zu werden. Wir werden auch für eine Show-of-Hände aus den genial-Entwickler, die bereits begonnen haben, mit 3.5.0 PR1 (was fragen auf dem EUR ). Kommen Sie Donnerstag, nicht mit der Hand nach unten :) erwischt

Auch die YUI-Bibliothek Staging Site ist mit den neuesten Bedienungsanleitungen und API-Dokumentation wurde aktualisiert, und in Reaktion auf das Feedback aus den letzten Öffnen Sie Stunden , verwenden wir nun unsere GitHub Wiki zu verfolgen Weiterentwicklung Diskussionen .

Aufnahme

Die Aufnahme ist verfügbar auf der YUILibrary YouTube-Kanal .

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

App Framework YUI 3.5.0 Veränderungen im

Seit der ersten Version der App Framework YUI 3.4.0 in, haben wir, wie schnell es ist angenommen worden erstaunt gewesen. Bei Projekten, große und kleine , haben beide lange Zeit YUI Anwender und solche, die ganz neu in der Bibliothek sind mit Begeisterung mit dem App Framework MVC-Komponenten und bietet ein tolles Feedback und Bug-Reports gewesen. Vielen Dank!

In YUI 3.5.0, wird die App Framework erhalten viele Bug-Fixes und einige wichtige Verbesserungen. Eric Ferraiuolo bedeckt viele der anstehenden Veränderungen in seinem fantastischen YUIConf Diskussion , aber wir wollen sie hier hervorheben sowie damit Sie wissen, was kommt und was sollte man vorbereiten, wenn Sie App Framework-basierten Code von 3.4.x aktualisieren möchten bis 3.5.0. Diese Veränderungen sind bereits in YUI 3.5.0 PR1 , die heute veröffentlicht wurde, so jetzt ist eine gute Zeit zu starten Testen.

Y.Controller ist jetzt Y.Router

"Controller" war eine dumme und verwirrenden Namen für eine Komponente, die wirklich beschäftigt sich mehr mit URL-basiertes Routing, insbesondere angesichts der eher traditionell-Controller-ähnliche Rolle spielt, dass Y.View. Wir haben beschlossen, den sauren Apfel beißen und benennen Sie die Klasse zu Y.Controller Y.Router in 3.5.0. Y.Controller wird ein Alias ​​für die Abwärtskompatibilität erhalten werden, aber dieser Alias ​​wird schließlich entfernt werden, so sollten Sie Ihren Code zu aktualisieren, um auf den neuen Namen verweisen.

Neue Route Handler Unterschrift

Die Signatur der Methode zur Routenberechnung Handler-Funktionen in Y.Router hat etwas, um es ähnlich verändert Express und um Router-API natürlicher, wenn auf dem Server (ein Feature, das wir gerade arbeiten auf für 3.5.0) verwendet.

Zuvor erhielt eine Route Handler-Funktion zwei Argumente: req (a Request-Objekt) und next (eine Funktion). In 3.5.0 wird Route Handler erhalten drei Argumente: req , res (a Response-Objekt), und dann next .

Aus Gründen der Abwärtskompatibilität, die neue res Argument ist ebenfalls eine Funktion, die genau wie verhält next , so dass im alten Stil Route Handler, die erwarten, next als das zweite Argument funktioniert weiterhin in 3.5.0 in Ordnung. Doch diese Kompatibilität Shim schließlich entfernt werden, also nicht zu lange warten, um Ihren Code zu aktualisieren.

Einige Eigenschaften sind nun Attribute

Wir experimentierten mit einer nicht-ganz-YUI-ähnlichen Stil der Verwendung von Eigenschaften für konfigurierbare Optionen in den App-Framework-Komponenten in 3.4.0, aber dies erwies sich als ein wenig verwirrend und mehr als ein wenig begrenzt, da die Eigenschaften nicht profitieren von Change-Ereignisse, Einrichter, und Validatoren wie Attribute tun. Also in 3.5.0, wir konvertieren viele dieser Eigenschaften zu Attributen.

Leider ist diese Änderung nicht abwärtskompatibel ist, können so bestehende Code, der Y.Controller (jetzt Y.Router) oder Y.View nutzt aktualisiert werden müssen. Genauer gesagt, 's Y.Router html5 , root und routes sind Eigenschaften nun Attribute und Y.View 's container , model und modelList Eigenschaften sind nun Attribute.

Hinzu kommt, Y.View 's container -Attribut jetzt behandelt String-Werte als CSS-Selektoren verwendet, um Knoten auf der Seite zu finden. In 3.4.x, vorausgesetzt es einen String-Wert repräsentiert reines HTML, die in einen Knoten umgewandelt werden sollte. Um das alte Verhalten zu bekommen, ändern Sie einfach Ihre bestehende HTML-String-Werte von '<div>foo</div>' , um Y.Node.create('<div>foo</div>') .

Dokumentation für 3.5.0 PR1

Work-in-progress Dokumentation für diese und andere Veränderungen in YUI 3.5.0 PR1 finden Sie auf unserer gefunden werden Inszenierung Website . Hier sind einige Links zu relevanten Inszenierung docs, die Informationen über App Framework deprecations in 3.5.0 und Details dazu, wie Sie Ihren Code ein Upgrade beinhalten:

• Router
• Sehen

Beachten Sie, dass der Inhalt bei stage.yuilibrary.com work in progress reflektiert und können unvollständig sein oder auch nur gelegentlich, wie wir neue Sachen Test gebrochen. Du wirst immer finden Sie die Dokumentation für die neueste stabile Version an unserem Produktionsstandort, yuilibrary.com .

Was ist noch neu?

In diesem Blog-Post habe ich die wichtigen deprecations kommen in den App Framework 3.5.0 zusammengefasst, aber es gibt auch viele Funktionserweiterungen und unter der Motorhaube, Bug-Fixes. Für eine komplette Liste der Änderungen im App Framework 3.5.0 PR1, konsultieren Sie die History-Datei .

Auch für einen Blog-Eintrag von Eric bald aussehen zu Y.App, eine wunderbare neue High-Level-Komponente des App-Framework, das einpackt URL-basiertes Routing und Management-Sicht in einer einzigen einfach zu bedienenden API, die Sie erhalten werden von Null auf einen funktionierenden Anwendung in kürzester Zeit.

Wir hoffen, Sie lieben die Preview-Version, und wir würden uns freuen von Ihnen zu hören! Sie können uns Feedback in den Foren , in einem Bug-Report , auf Twitter , auf dem IRC-Kanal # yui auf Freenode, oder einfach nur im Glockenspiel hier mit einem Kommentar.

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

YUI 3.5.0 PR1 ist jetzt verfügbar

YUI 3.5.0 Preview Release 1 wurde für Tests und Feedback aus der Entwickler-Community im Einsatz. Sie können es auf der Yahoo! EUR finden bei yui.yahooapis.com/3.5.0pr1/build/yui/yui-min.js oder ZIP Datei herunterladen , wenn Sie es selbst hosten möchten.

Das Rollup von Veränderungen in der PR1 eingeführt ist auf unserer GitHub Wiki. Darüber hinaus können Sie überprüfen die Liste der Karten, die in dieser Version behoben wurden .

Work-in-progress Handbücher und API-Dokumentation für 3.5.0 finden Sie auf unserer Inszenierung Website gefunden werden, aber Vorsicht, dass diese docs können unvollständig oder sogar gebrochen, denn dies ist, wo wir neue Sachen zu testen. Offizielle Dokumentation für die aktuelle stabile Version finden Sie auf unserer Produktionsstätte, gefunden werden yuilibrary.com .

Weitere Änderungen werden in den kommenden Vorabversionen von YUI 3.5.0 eingeführt werden, einige von ihnen sind derzeit in eigenen Filialen Entwickler und sind für die erste Prüfung über den folgenden Pull-Anforderungen zur Verfügung:

• New DataTable Architektur und Implementierung
• New Tastenmodul

Um Fehler gegen dieses Release-Datei finden Sie auf unserer Fehlerdatenbank . Wenn Sie möchten, einen Input zu diesen und zukünftige Module bereitzustellen, werden die laufenden Diskussionen zu verschiedenen Themen im Zusammenhang mit der 3.5.0 Version auf unserer geschieht GitHub Wiki.

Wenn alles nach Plan läuft, hoffen wir, YUI 3.5.0 PR2 auf 30. Januar 2012 veröffentlichen. Schöne Feiertage!

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

YUI Theater - Allen Rabinovich: "YUI-Kalender - Eine Fallstudie zu bauen Module mit Style" (47 min.)

In diesem Vortrag aus YUIConf 2011, YUI Ingenieur Allen Rabinovich ( @ allenr Aktien) den Prozess er Architekt und beim Aufbau der neuen verwendet Kalender-Widget in YUI 3, und erklärt, wie man ein ähnliches Verfahren verwenden, um Ihre eigenen Widgets bauen. Er zeigt auch die neue Komponente aus und zeigt einen cleveren Trick Leistung verwendet zur Beschleunigung des Rendering von mehreren Kalendern.

Links

• Alle in HD-Qualität auf YouTube
• Vollständige YUIConf 2011 Playlist auf YouTube

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

YUI Theater - Pat Cavit: "Die Automatisierung von Webseiten Optimierungen" (32 min.)

Pat Cavit ( @ tivac ), ein Frontend Engineer bei ArenaNet und eine aktive YUI-Nutzer und Community-Mitglied, schloss sich uns an YUIConf 2011, diese Diskussion auf die Automatisierung von Build-Time-Website-Optimierungen wie zum Beispiel Datei Verkettung, Verkleinerung, Umbenennen und mehr über das geben, Ant-Build-Tool.

Links

• Alle in HD-Qualität auf YouTube
• Vollständige YUIConf 2011 Playlist auf YouTube

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

In der YUI 3 Gallery: Bulk Widget-Editor

Die QuickEdit Plugin für YUI 3 DataTable macht es einfach, eine ganze Seite von Datensätzen in einer atomaren Operation zu bearbeiten. Allerdings muss man manchmal auch noch mehr tun. Zum Beispiel müssen Sie möglicherweise gleichzeitig bearbeiten mehr Datensätze als Sie bequem auf eine einzige Seite passen. Oder müssen Sie möglicherweise das Hinzufügen, Duplizieren und Entfernen von Datensätzen als Teil der atomaren Operation zu unterstützen. Oder Sie könnten, um visuell Gruppe Felder, indem sie in einer einzigen Tabellenzelle wollen. Die Bulk-Editor -Widget unterstützt alle diese Möglichkeiten.

( Klicken Sie auf den Screenshot, um bei diesem Beispiel zu spielen .)

Überblick

Die Bulk-Widget-Editor besteht aus drei Komponenten:

Data source

Bricht eine YUI DataSource und verwaltet die Änderungen: Einfügungen, Umzüge und veränderte Werte.

Base widget

Dies bietet die grundlegende Struktur für die Bearbeitung durch die Verwaltung Datensätze und Felder in jedem Datensatz. Abgeleitete Klassen sind für die Wiedergabe jeden Datensatz in einer separaten Zeile, die ein div, ein tbody, oder ein anderer Behälter sein könnte.

HTML table implementation

Dadurch verlängert sich die Basis-Widget, um jeden Datensatz in ein tbody machen in einer HTML-Tabelle. Die Spalte Konfiguration bestimmt, welches Feld in jeder Spalte der Tabelle angezeigt. Eine benutzerdefinierte Formatierer Zelle können mehrere Felder in einer einzigen Tabellenzelle gerendert werden.

Konfiguration

In dem Beispiel, das die obigen Screenshot generiert wurde die Konfiguration gehalten worden so einfach wie möglich:

fields definiert die editierbaren Werte in den einzelnen Datensätzen. Der Standard-Typ eingegeben wird. Die anderen Typen sind gültig select und textarea. (Wählen Sie erfordert eine Liste von Werten.) Basic Validierung durch bereitgestellt Formular Manager Galerie-Modul. Dies umfasst Felder sind Pflichtfelder, Länge Einschränkungen, und numerische Bereiche . Komplexere Validierung kann durch Angabe durchgeführt werden regex oder Ihre eigene Funktion ( fn ). Hier ist ein Auszug aus der Live-Beispiel:

 var fields =
 {
	 Titel:
	 {
		 Typ: 'textarea'
	 },
	 Jahr:
	 {
		 Validierung:
		 {
			 CSS: 'Yiv-Integer: [1500,2100]'
		 }
	 },
	 Farbe:
	 {
		 Typ: 'select',
		 Werte:
		 [
			 {Wert: 'rot', text: 'Red'},
			 {Wert: 'grün', text: 'Grüne'},
			 {Wert: 'blau', text: 'Blue'}
		 ]
	 }
 };

Y.BulkEditDataSource erfordert eine Instanz Y.DataSource und die folgenden Parameter:

uniqueIdKey

Der Name eines Schlüssels, der jeden Datensatz eindeutig identifiziert.

generateRequest

Eine Funktion zum Request-Parameter für die Erzeugung Y.DataSource . (Dies ist leer in dem Beispiel, weil Y.DataSource.Local gibt immer alle Daten.)

extractTotalRecords

Eine Funktion, um die Gesamtzahl von Datensätzen aus dem Extrakt Y.DataSource Antwort.

Da das Beispiel verwendet Y.DataSource.Local , totalRecordsReturnExpr ist ebenfalls erforderlich. Dieser Ausdruck gibt an, wo OGNL in der Antwort auf die Gesamtzahl der Datensätze speichern. (Beachten Sie, dass extractTotalRecords diesen Wert liest.)

 var ds = new Y.BulkEditDataSource (
 {
	 DS: raw_ds,
	 uniqueIdKey: 'id',
	 GenerateRequest: function () {},
	 totalRecordsReturnExpr: '. meta.totalRecords',
	 extractTotalRecords: function (response)
	 {
		 zurück response.meta.totalRecords;
	 }
 });

Y.HTMLTableBulkEditor erfordert die Datenquelle, das Feld Konfiguration, und die Spalte Konfiguration. In der Spalte Konfiguration, ist der Schlüssel der Feldname, wenn Sie einen benutzerdefinierten Formatierer angeben. Das Etikett wird als Spaltenüberschrift verwendet. Hier ist ein Auszug aus der Live-Beispiel:

 var columns =
 [
	 {
		 Schlüssel: 'Option',
		 Etikett: "<input type="checkbox" id="select-all" /> ',
		 Formatierer: function (o)
		 {
			 var Markup = '<input type="checkbox" class="record-select" id="{id}" />';
			 o.cell.set ('innerHTML', Y.Lang.sub (Markup,
			 {
				 ID: this.getRecordId (o.record)
			 }));
		 }
	 },
	 {Key: 'title', Aufschrift: 'Titel'},
	 {Key: 'Jahr', Aufschrift: 'Jahr'},
	 {Key: 'color', Aufschrift: 'Farbe'}
 ];

(Beachten Sie, dass die Live-Beispiel eine geringfügige Erweiterung definiert Y.HTMLTableBulkEditor auf das Kontrollkästchen Spalte zu behandeln.)

Sie können auch übergeben Sie eine Instanz Y.Paginator zu Y.BulkEditDataSource . Dies wird in einem separaten, komplizierter gezeigt anschauliches Beispiel .

Lokale vs Remote Data Sources

Bei der Entscheidung, ob eine lokale oder eine Remote-Datenquelle verwenden, müssen Sie sorgfältig die Vor-und Nachteile. Der offensichtliche Nachteil ist, dass eine lokale Datenquelle schneller ist, wenn Paginieren, aber die erste Seite zu laden dauert länger und erfordert mehr Speicher auf dem Client.

Die Bulk-Editor Widget verursachen zusätzliche Trade-offs, jedoch.

Erstens muss das YUI DataSource zurückkehren unveränderlichen Daten. Dies ist für die automatische lokale Datenquellen, aber kann tückisch sein, um für Remote-Datenquellen zu implementieren. Sie benötigen, um die Zeilen in der Datenbanktabelle für die Dauer der Bulk-Bearbeitung Betrieb zu sperren, wenn mehr als einem Benutzer erlaubt wird, sie zu ändern.

Zweitens wirkt sich die Wahl zwischen lokalen und Remote-Datenquelle wie Sie berechtigt sind, die Daten zu speichern. Wenn Sie eine lokale Datenquelle verwenden, können Sie Best-Effort-Einsparung, also tun, speichern Sie alle gültigen Datensätze an den Server, entfernen Sie sie aus dem lokalen Datenquelle, und erlauben dem Benutzer, auf die Datensätze, die ungültige Werte haben zu konzentrieren. Wenn Sie eine Remote-Datenquelle verwenden, die Unveränderlichkeit Anforderung können Sie nur alles oder nichts sparen, also tun, können die Daten nur dann gespeichert, nach all die Daten gültig werden.

Real-world Use Case

Die ursprüngliche Motivation für die Bulk-Editor Widget wurde auf die Nachbearbeitung einer hochgeladenen Tabellenkalkulation erlauben. Die Einführung eines Post-Prozessierungsschritt beseitigt die Notwendigkeit für die Tabelle Werte perfekt zu sein. Fehler können markiert und Festnetz in der Bulk-Widget-Editor statt Ablehnung des gesamten Upload. Darüber hinaus kann die Verarbeitung auf dem Server zu tun Best-Guess Zuweisung von zusätzlichen Werten für jeden Datensatz erforderlich, und der Benutzer kann überprüfen und beheben diese zusätzlichen Werte vor dem Speichern. Dies vereinfacht die erstmalige Erstellung der Tabelle.

In diesem Szenario ist eine Remote-Datenquelle die beste Wahl. Die hochgeladenen Daten werden in einer Scratch-Bereich gespeichert, und wird daher unveränderlich gewährleistet, da kein anderer Benutzer sie sehen kann. "Alles oder nichts" Sparen angemessen ist: Wenn alle Fehler wurden behoben, der Speichervorgang ist atomar, wie bei einem Standard-Upload-Vorgang.

Über den Autor: John Lindal ( @ jafl5272 auf Twitter) ist einer der leitenden Ingenieure bauen das Fundament, auf dem Yahoo! APT wird gebaut. Zuvor arbeitete er auf dem Yahoo! Publisher Network.

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!