2011 »Janvier» Yahoo! User Interface Blog (YUIBlog)

Treeble avec YUI 3 DataTable

24 janvier 2011 à 10:41 am par John Lindal | En développement , de YUI 3 Galerie | 7 commentaires

La version bêta de DataTable dans YUI 3.3.0 nous donne un élément très puissant pour jouer avec. Pour lancer les pneus d'une manière utile, j'ai décidé de mettre à jour mes Treeble exemples à utiliser DataTable. (Treeble permet l'affichage de données hiérarchiques dans un tableau .)

À ma grande joie, c'était un jeu d'enfant! Tout le travail dur est fait dans TreebleDataSource , qui s'étend YUI 3 DataSource, alors tout ce que j'avais à faire était de le brancher dans DataTable à l'aide Y.Plugin.DataTableDataSource puis configurer les colonnes:

 var ds = new Y.TreebleDataSource (...),
	 pg = new Y.Paginator (...),
	 tableau;

 sendRequest function () {
	 table.datasource.load ({
		 requête: {
			 startIndex: pg.getStartIndex (),
			 resultCount: pg.getRowsPerPage ()
		 }
	 });
 }

 var cols = [
     {Clé: «yui33-hack ', label:''},
     {
         clé: «treeblenub ', label:'',
         formateur: Y.Treeble.buildTwistdownFormatter (sendRequest)
     },
     {
         clé: 'title', label: "Titre",
         formateur: Y.Treeble.treeValueFormatter
     },
     ...
 ];

 table = new Y.DataTable.Base ({ColumnSet: cols});
 table.plug (Y.Plugin.DataTableDataSource, {source de données: ds});

Pour voir le code source complet, reportez-vous à l' exemple vivant .

Les mouches seule ombre au tableau sont les suivantes:

La colonne yui33-hack. En raison d'un bogue dans YUI 3.3.0 DataTable , le td élément passé à un formateur est en fait la colonne de la colonne précédente. Ainsi, la première colonne dans le tableau affiche le twistdown, et la deuxième colonne est vide.
Valeurs non définies dans les données sont affichées sous forme {value} au lieu d'ébauches ( bogue 2529858 ).

Afin de rendre plus facile à utiliser Treeble, j'ai ajouté une peau Sam qui styles aux classes CSS écrites par les Y.Treeble formateurs.

Amusez-vous!

À propos de l'auteur: John Lindal ( @ jafl5272 sur Twitter) est l'un des ingénieurs de plomb construire le fondement sur lequel Yahoo! APT est construit. Auparavant, il a travaillé sur le Yahoo! Publisher Network.

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!

YUI: Heures d'ouverture jeudi 27 janvier

21 janvier 2011 à 16:04 par Luke Smith | Dans le développement , les horaires d'ouverture | Comments Off

La prochaine YUI: Heures d'ouverture sera jeudi prochain, le 27.

La semaine dernière, nous avons essayé d'emballer trop dans le raccourci 1 slot heures de temps, et a manqué de temps avant que l'un des segments les plus importants: en 2011 YUI 3 commentaires feuille de route et une partie suggestion. Donc, nous allons reprendre là où nous nous sommes quittés, avec Satyen en notant les mises à jour de la feuille de route approximative de la semaine dernière, alors c'est tout ce que vous pensez.

Alors, venez avec vos questions et suggestions. Nous voulons entendre ce que vos priorités pour l'année à venir et comment nous pouvons vous aider, et quelles sont vos pensées sont à rendre YUI comme un produit (ou famille de produits) plus complète et en circulation.

Nous serons en ligne dix heures-11 heures HAP jeudi. Les détails de connexion sont les mêmes que d'habitude.

Composez 1-888-371-8922 pour (Skype fonctionne très bien pour les États-Unis non participants *)
Entrez le code 47188953 # participant
S'inscrire à la session de partage d'écran (ce qui vous invite à installer le plugin Adobe Connect si c'est votre première fois à l'aide). Note: Cette URL a changé, donc s'il vous plaît mettre à jour vos signets si vous utilisez encore l'ancienne URL.

GREH Hinch a obtenu la conversation a commencé dans les forums , alors soyez à l'remue-méninges déjà et nous vous reverrons jeudi!

MISE À JOUR (1/26)

Vous pouvez trouver le projet de feuille de route 2011 qui Satyen discuté la semaine dernière sur le wiki YUILibrary.com. Nous n'allons pas passer beaucoup de temps de l'examiner, ont donc un coup d'oeil avant l'appel.

* - Si Skype n'est pas une option, écrivez-moi pour un numéro local.

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!

Annonçant Yahoo! Interface utilisateur 2.x Library Cookbook

21 janvier 2011 à 9h00 par Matt Snider | En développement | Les 6 commentaires

Packt Publishing est heureuse d'annoncer la sortie de mon livre, nouvelle Yahoo! Interface utilisateur 2.x Library Cookbook . Le livre contient de nombreuses recettes de codage, qui donne aux lecteurs des exemples détaillés pour plus de vingt-cinq composants 2.x YUI, y compris les conteneurs , Drag & Drop , Connection Manager , DataTable , TreeView , et bien plus encore.

Qu'est-ce que vous apprendrez dans ce livre

J'ai écrit ce livre afin qu'il vous aidera à apprendre comment utiliser YUI 2.x pour construire des applications web plus riches, plus interactifs qui impressionnent les clients et impressionner vos amis. Il a expliqué au cours recettes composants YUI vingt-cinq, montrant comment les utiliser, et comment les configurer pour répondre à vos besoins. Chaque composant couvert aura des exemples de code extractibles qui mettent en valeur les moyens communs que le composant est utilisé.

En outre, complète le code du travail peut être téléchargé séparément pour chaque chapitre, il est donc plus facile à suivre. Pour chacune des recettes, il est un exemple d'introduction, ensuite des exemples les plus avancés, suivies d'une explication de la façon dont le composant qui fonctionne et ce YUI fait. Pour plus de développeurs expérimentés, la plupart des recettes aussi inclure une discussion supplémentaire de la solution, en expliquant comment personnaliser davantage et d'améliorer la composante.

Pratique et emballé avec facile-à-suivre les recettes, le livre vous aidera à créer modernes, des applications Internet riches utilisant les composants les plus puissants de la Bibliothèque d'interface utilisateur Yahoo! (YUI).

Qui de ce livre est écrit pour

Le livre est le mieux adapté pour les développeurs JavaScript qui sont relativement nouveaux pour YUI 2 ou intéressé à obtenir commencé rapidement. Cependant, il contient des exemples pour presque tous les composants et convient aussi bien en tant que référence pour les développeurs expérimentés qui cherchent à rafraîchir ou à explorer quelques-unes des fonctionnalités les plus puissantes de chaque composant.

Obtenez 15% de réduction!

Packt Publishing offre un rabais de 15% à n'importe quel lecteur YUIBlog, et vous trouverez mon livre est disponible en eBook et les formats traditionnels. Pour recevoir votre remise, il suffit d'acheter Yahoo! Interface utilisateur 2.x Library Cookbook par Packt Publishing, et fournir le code YUI2XCBK15 à la caisse. (Remarque: Vous devez être identifié pour pouvoir le code du travail.)

Vous voulez un échantillon?

Pour vous aider à avoir une idée du contenu fourni dans mon livre, Packt est assez généreux pour fournir un échantillon de ce que vous pouvez vous attendre:

" YUI 2.X: Utilisation des composants de l'événement "

À propos de l'Auteur: Matt Snider est un développeur Web et JavaScript aficionado. Matt a été le développement d'applications Web dans une variété de cadres et de langues pour les 7 dernières années, et a également été écrit un blog sur le développement Web pour près de 4 ans. Matt est l'ingénieur principal à Mint.com . Il a largement contribué à la fois YUI 2 et 3, y compris la composante de stockage dans YUI 2 (abordés dans ce livre). Matt équilibre son temps entre son travail de jour, son blog, et les contributions à la communauté open-source. Quand il ne travaille pas, il aime la randonnée loin de tout ou de rester à l'intérieur et l'exploration de son vaste collection de jeux vidéo.

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!

YUI Theater - Satyen Desai: (. 55 min) «Un téléphone, une tablette et une promenade portable en un bar ...« Approche-YUI en matière de développement Web mobile "

17 janvier 2011 à 8:37 am par Eric Miraglia | En développement , de YUI Theater | Comments Off

Satyen Desai ( @ dezziness ), créateur de la YUI 3 composants et sous-systèmes de widgets, discute de l'approche YUI à soutenir la nouvelle série de web-périphériques compatibles sur le marché aujourd'hui, et comment nous nous plaisons à penser à eux en termes de caractéristiques et les contraintes que par opposition à un espace de problème isolé.

Si la vidéo ci-dessous intégrer n'apparaît pas correctement dans votre lecteur de flux RSS de son choix, n'oubliez pas de cliquer sur pour voir la version haute résolution de la vidéo sur YUI Theater .

Autres Vidéos récentes Théâtre Yui:

Luke Smith: YUI 3: En dessous de la surface - Luke Smith, un ingénieur équipe YUI, offre l'une des discussions les plus hautement cotées à YUIConf 2010, regarder à l'intérieur quelques-uns des modèles de base et des pièces d'infrastructures qui se trouvent au cœur de YUI 3.
Ryan Grove: Présentation de YUI 3 Saisie semi-automatique - Dans cet exposé, à partir YUIConf 2010, YUI 3 Saisie semi-automatique auteur Ryan Grove vous emmène dans une visite éclair de quelques-uns des nombreux modèles d'auto-complétion rendue possible par ce composant et fournit une plongée en profondeur dans son intégration puissante YQL nouvelle , le filtrage, et en soulignant les capacités.
Paul Donnelly et Nagesh Susarla: YQL + YUI: construction End-to-End Applications - Lors de l'élaboration des widgets, ce n'est pas la façon d'utiliser les données YQL qui revient comme une question, mais plutôt comment y accéder. Dans ce YUIConf session de 2010, les ingénieurs YQL Paul Donnelly et Nagesh Susarla examen à partir de votre requête dans la console YQL, l'accès aux données via les YQL différents points de terminaison, et d'aller à travers les couches de YQL d'authentification différents.
Eric Ferraiuolo: TipTheWeb.org: Heavy Duty YUI 3 & YQL - Lors de cette session de YUIConf 2010, co-fondateur et TipTheWeb YUI contributeur Eric Ferraiuolo discute de la création d'une base de code du projet-échelle à l'aide YUI 3, YUI 3 Gallery, et YQL.
Reid Burke: Yeti: Interface de YUI Tests faciles - les applications de test multi-navigateurs web a été trop difficile pour trop longtemps: vous êtes soit de recharger manuellement les navigateurs ou aux prises avec le logiciel d'automatisation complexes. Dans cette session de YUIConf 2010, YUI ingénieur Reid parle Burke sur la façon dont YUI de Yeti projet contribue à résoudre ces problèmes. Reid explique quand vous devez utiliser les tests automatisés pour votre code frontend, comment Yeti travaille avec YUI test, comment mettre en place cross-browser test en quelques minutes et la façon dont l'équipe YUI utilise Yeti pour expédier un meilleur produit.

Contenu CC / Utilisé avec l'aimable autorisation:

S'abonner à YUI Theater:

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!

YUI Theater - Luke Smith: "YUI 3: En dessous de la surface" (48 min.)

14 janvier 2011 à 2:33 pm par Eric Miraglia | En développement , de YUI Theater | Comments Off

Dans cette vidéo, YUI Theater, YUI ingénieur Luke Smith ( @ ls_n ) offre l'une des discussions les plus hautement cotées à YUIConf 2010, regarder à l'intérieur quelques-uns des modèles de base et des pièces d'infrastructures qui se trouvent au cœur de YUI 3.

Si la vidéo ci-dessous intégrer n'apparaît pas correctement dans votre lecteur RSS, n'oubliez pas de cliquer sur pour voir la version haute résolution de la vidéo sur YUI Theater .

Autres Vidéos récentes Théâtre Yui:

Satyen Desai: «Un téléphone, une tablette et une promenade portable dans un bar ...« Approche-YUI à Développement Web mobile - Satyen Desai, créateur de la YUI 3 composants et sous-systèmes de widgets, discute de l'approche YUI à soutenir la nouvelle série de web permis dispositifs sur le marché aujourd'hui, et comment nous aimerions à penser à eux en termes de fonctionnalités et des contraintes, par opposition à un espace problème isolé.
Ryan Grove: Présentation de YUI 3 Saisie semi-automatique - Dans cet exposé, à partir YUIConf 2010, YUI 3 Saisie semi-automatique auteur Ryan Grove vous emmène dans une visite éclair de quelques-uns des nombreux modèles d'auto-complétion rendue possible par ce composant et fournit une plongée en profondeur dans son intégration puissante YQL nouvelle , le filtrage, et en soulignant les capacités.
Paul Donnelly et Nagesh Susarla: YQL + YUI: construction End-to-End Applications - Lors de l'élaboration des widgets, ce n'est pas la façon d'utiliser les données YQL qui revient comme une question, mais plutôt comment y accéder. Dans ce YUIConf session de 2010, les ingénieurs YQL Paul Donnelly et Nagesh Susarla examen à partir de votre requête dans la console YQL, l'accès aux données via les YQL différents points de terminaison, et d'aller à travers les couches de YQL d'authentification différents.
Eric Ferraiuolo: TipTheWeb.org: Heavy Duty YUI 3 & YQL - Lors de cette session de YUIConf 2010, co-fondateur et TipTheWeb YUI contributeur Eric Ferraiuolo discute de la création d'une base de code du projet-échelle à l'aide YUI 3, YUI 3 Gallery, et YQL.
Reid Burke: Yeti: Interface de YUI Tests faciles - les applications de test multi-navigateurs web a été trop difficile pour trop longtemps: vous êtes soit de recharger manuellement les navigateurs ou aux prises avec le logiciel d'automatisation complexes. Dans cette session de YUIConf 2010, YUI ingénieur Reid parle Burke sur la façon dont YUI de Yeti projet contribue à résoudre ces problèmes. Reid explique quand vous devez utiliser les tests automatisés pour votre code frontend, comment Yeti travaille avec YUI test, comment mettre en place cross-browser test en quelques minutes et la façon dont l'équipe YUI utilise Yeti pour expédier un meilleur produit.

Contenu CC / Utilisé avec l'aimable autorisation:

S'abonner à YUI Theater:

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!

YUI: Heures d'ouverture Lun Jan 19

13 janvier 2011 à 16:10 par Luke Smith | Dans le développement | Les 3 Commentaires

Se félicitant en 2011, YUI: Heures d'ouverture sera remise en marche, et le premier versement de la nouvelle année aura lieu mercredi prochain, le 19.

Naturellement, avec la libération de YUI 3.3.0 , qui sera le principal sujet de premières cette année Heures d'ouverture. Je vais essayer de disputer le plus grand nombre de l'équipe de YUI et des intervenants extérieurs comme je peux participer à l'appel, et nous allons passer en revue les faits saillants de nos préférés, puis ouvrez la conversation d'entendre parler de ce que vous avez déjà joué avec de l'aperçu communiqués. Nous aurons une mise à jour 2.9, alors (et je suis assez excité à ce sujet), commencer à parler feuille de route 3.x pour 2011. Et nous voulons vos idées, vos retours. Où voulez-vous pour voir YUI va cette année? Quels sont les articles à prix chaud sur votre liste de souhaits?

Alors, venez discuter avec l'équipe de YUI sur ce qui est nouveau et ce que sera le futur!

Dans d'autres nouvelles du front de la logistique du programme, il y aura quelques changements au format ouvert Heures d'ouverture:

Tout d'abord, nous allons être de raccourcir l'appel de 2 heures à un plus des heures ouvrables de l'environnement 1 heure
Je vais intégrer une section style de mise en œuvre mettant l'accent sur chaque appel, de sorte que nous pouvons tous apprendre YUI 3 est utilisé dans les tranchées (sous réserve de sujets particuliers, comme les nouvelles versions
Et enfin et awesomely, Eric Ferraiuolo , de TipTheWeb la gloire, se joindra à moi comme un cohost permanente. Il vit le rêve YUI 3 depuis la version 3.0 beta 1, et ajouter la voix et l'expérience de l'application du monde réel.

Nous serons en ligne de 10h à 23 heures PST moins que la conversation est trop belle pour s'arrêter. Les détails de connexion sont les mêmes que d'habitude.

Composez 1-888-371-8922 pour (Skype fonctionne très bien pour les États-Unis non participants *)
Entrez le code 47188953 # participant
S'inscrire à la session de partage d'écran (ce qui vous invite à installer le plugin Adobe Connect si c'est votre première fois à l'aide)

N'oubliez pas de vous abonner à la Calendrier YUI et suivez @ yuilibrary sur Twitter pour les dernières mises à jour sur Heures d'ouverture et d'autres de l'intéressement YUI.

Vous y voir!

* - Si Skype n'est pas une option, écrivez-moi pour un numéro local.

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!

Tableau des statistiques de bas de page pour YUI 2 DataTable

13 janvier 2011 à 16h00 par Matt Parker | En développement | Les 2 Commentaires

La YUI 2 DataTable fait beaucoup. Mais une des choses qu'il ne fait pas quelque chose avec un pied de page de table, où l'on s'attendrait à trouver des totaux, des moyennes ou autres données sommaires. J'ai donc étendu DataTable pour ajouter des données récapitulatives pour données numériques.

Mise ça va

Tout d'abord, à l'utiliser: vous aurez besoin d'un code de github - il ya trois fichiers js, et vous aurez besoin de tous les sur votre page après que le fichier YUI DataTable js. Et vous pourriez vouloir changer l'espace de noms - que nous utilisons YAHOO.LPLT.DataTable que l'extension de YAHOO.widget.DataTable . Je vais vous expliquer un peu plus sur ces fichiers ci-dessous.

Vous mettez en place votre datatable comme d'habitude, mais il ya trois choses que vous devez faire pour obtenir le résumé de travail:

Assurez-vous que votre source de données spécifie "nombre" analyseurs de tous les champs que vous voulez, pour résumer, en particulier si vous faites l'édition en ligne de cellules:
```
  myDataSource.responseSchema = {champs: [
    {Clé: la «quantité», analyseur: "nombre"}
    / * Etc ..  * /
 ]};
```
Ajouter une config clé-valeur de columnStats: true dans votre tableau définition de la colonne:
```
  myColumnDefs var = [
     {Clé: la «quantité», l'étiquette: «Quantité», columnStats: true} 
     / * Etc ..  * /
 ];
```
pour les colonnes que vous souhaitez résumée. (Le total de votre 'id' colonne n'est probablement pas très utile!).
Dites à la datatable laquelle des statistiques pour calculer:
```
 var = new MyDataTable YAHOO.LPLT.DataTable ("exampleEl",
     myColumnDefs, 
     MyDataSource, 
     {ColumnStats: {sur: true, stats: ['somme']}}
 );
```
Il s'agit de la façon la plus simple possible de configurer les statistiques de colonne, mais vous pouvez ajouter des statistiques supplémentaires, de personnaliser les étiquettes, et plus encore.

Il ya un exemple sur github à jouer avec.

Quelques points:

Le pied de page va changer avec votre table. Donc, si vous afficher / masquer des colonnes, les déplacer, en ajouter de nouveaux, ajouter / supprimer des lignes, en quelque sorte, ou utiliser des éditeurs de cellules en ligne, le pied de page sera mise à jour l'interface utilisateur et les statistiques en conséquence.
Vous pouvez ajouter des lignes le plus grand nombre au pied de page que vous le souhaitez, une ligne pour chaque statistique. À l'heure actuelle, vous pouvez avoir moyenne, la médiane, la somme, min, max, plage, stdev, la variance, ou varianceUnbiased. L'ordre du jour "stats" dans la configuration est un tableau: il suffit d'ajouter les statistiques que vous souhaitez à ce tableau (par exemple stats: ["min", "median", "stdev"] ).
Le pied de page de table va utiliser tous les formateurs spécifiés pour cette colonne.
Si vous avez une pagination, vous pouvez choisir si les statistiques sont présentés pour la table entière ou simplement la page actuellement visible. Ajouter pagedTotals: true aux columnStats objet pour avoir des statistiques de la page.
Le tableau "stats" dans l'objet de configuration peut également inclure objets littéraux, avec «label» et les touches "Fn". fn est la fonction qui va calculer les statistiques - soit une chaîne comme 'min' ou une fonction qui renvoie un certain nombre. L'exemple sur github montre comment vous pourriez faire des données en utilisant une «somme pondérée» à partir de deux colonnes.

Plus d'informations sur le code d'extension réelle

Le fichier principal, YAHOO_DataTable_colStats.js, ajoute un couple de propriétés protégées à la table de données, quelques méthodes protégées, et deux méthodes publiques, colStatsRefresh qui recalculer et redessiner le pied de table, et colStatsGetRecordSet , qui retourne un tableau, soit de tous les dossiers, ou seulement ceux visibles, en fonction de la valeur de pagedTotals . La première peut être utile si vous apportez des modifications à la table qui ne se déclenche pas d'événements utiles (par exemple modifier directement les données dans le RecordSet sous-jacente), la seconde si vous utilisez des fonctions de synthèse personnalisés.

YAHOO_DataSource_patch.js ajoute une parseField(key, value) méthode pour DataSource. Ceci est nécessaire lorsque vous avez éditeurs textbox cellulaires en ligne pour les données numériques; l'éditeur renvoie une chaîne qui n'est pas analysé automatiquement, et ne peut donc pas être ajouté. Le parseField permet d'accéder aux analyseurs spécifiés dans le DataSource, pour convertir les données éditées.

YAHOO_util_Stats.js fournit un standalone YAHOO.util.Stats classe qui encapsule un tableau (triés) des données numériques et fournit des statistiques sommaires. C'est seulement la dépendance est YAHOO.lang. Une instance YAHOO.util.Stats est maintenu par le DataTable pour chaque colonne qui doit être résumés, et met en cache quelques-uns des mathématiques les plus difficiles à améliorer les performances. Les chaînes transmises pour le tableau stats ('min', «médiane», etc) sont des méthodes de la classe YAHOO.util.Stats, vous pouvez donc facilement en ajouter d'autres en ajoutant au prototype. Notez bien qu'ils ne disposent que l'accès aux données «leur» colonne.

Et enfin,

Je suis sûr que cela ne va pas de travailler avec datatables défilement, donc je n'ai même pas essayé! Mais si vous trouvez des problèmes ou avez des idées, s'il vous plaît, les mettre sur le bug tracker github.

À propos de l'auteur: Matt Parker ( @ Lamplightdb sur Twitter ) est le fondateur et développeur de base de données Systems lumière des lampes , une petite entreprise fournissant un système pleinement fonctionnel basé sur le Web de gestion des organismes sans but lucratif au Royaume-Uni. Matt vit et travaille dans le nord-ouest de Londres.

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!

Page suivante »

Propulsé par WordPress sur Yahoo! Hébergement Web .

Blog Interface utilisateur Yahoo! (YUIBlog)

Treeble avec YUI 3 DataTable