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

Treeble com YUI 3 DataTable

24 de janeiro de 2011 às 10:41 por João Lindal | Em Desenvolvimento , YUI Galeria 3 | 6 Comentários

A versão beta do DataTable em YUI 3.3.0 nos dá uma componente muito poderoso para jogar. Para chutar os pneus em uma forma útil, resolvi atualizar meu Treeble exemplos para usar DataTable. (Treeble permite a exibição de dados hierárquica em uma tabela .)

Para minha alegria, era uma brisa! Todos difícil o trabalho é feito em TreebleDataSource , que se estende YUI 3 DataSource, então tudo que eu tinha que fazer era ligá-lo em DataTable usando Y.Plugin.DataTableDataSource e configure as colunas:

 var ds = (...), TreebleDataSource nova Y.
	 pg = (...), Paginator nova Y.
	 mesa;

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

 cols var = [
     {Chave: "yui33-hack ', rótulo:''}
     {
         label 'treeblenub',:: key'',
         formatador: Y.Treeble.buildTwistdownFormatter (sendRequest)
     }
     {
         'Title', rótulo:: tecla 'Título',
         formatador: Y.Treeble.treeValueFormatter
     }
     ...
 ];

 table = Y.DataTable.Base novo ({columnset: cols});
 table.plug (Y.Plugin.DataTableDataSource, {fonte de dados: ds});

Para ver o código fonte completo, consulte o exemplo vivo .

A única mosca na pomada são:

O yui33-hack coluna. Devido a um bug no YUI 3.3.0 DataTable , a td elemento passado para um formatador coluna é de fato a partir da coluna anterior. Assim, a primeira coluna da tabela mostra o twistdown, ea segunda coluna está vazio.
valores indefinidos nos dados são exibidos como {value} em vez de espaços em branco ( bug 2529858 ).

A fim de tornar Treeble mais fácil de usar, eu adicionei uma pele que Sam estilos para as classes CSS escrita pelo Y.Treeble formatadores.

Divirta-se!

Sobre o autor: John Lindal ( @ jafl5272 no Twitter) é um dos engenheiros levam a construção do alicerce sobre o qual Yahoo! APT é construído. Anteriormente, ele trabalhou na Editora Yahoo! Network.

Compartilhe e ampliar: Bookmark com del.icio.us | digg it! | reddit!

YUI: Horas qui Open 27 de janeiro

21 de janeiro de 2011 às 16:04 por Lucas Soares | Em Desenvolvimento , Horário | No Comments

O próximo YUI: Horário será na próxima quinta, dia 27.

Na semana passada, tentou pack em demasia o reduzido espaço de tempo uma hora, e correu para fora de tempo antes que um dos segmentos mais importantes: o 2011 YUI feedback roteiro 3 e parte sugestão. Então vamos pegar de onde paramos, com Satyen anotando todas as atualizações para o roteiro bruto da semana passada, então está tudo sobre o que você pensa.

Então venha com perguntas e sugestões. Nós queremos ouvir quais são suas prioridades para o próximo ano e como podemos ajudar, e que seus pensamentos estão em fazer YUI como um produto (ou família de produtos) mais completo e notável.

Estaremos on-line 10:00-11:00 PDT quinta-feira. Os detalhes de conexão são as mesmas, como de costume.

Disque para 1-888-371-8922 (Skype funciona muito bem para os participantes de fora dos EUA *)
Digite o código de participante 47188953 #
Junte-se a sessão de compartilhamento de tela (este irá pedir-lhe para instalar o plugin Adobe Connect se esta é sua primeira vez com ele). Observação: Este URL mudou, então, por favor actualize os seus favoritos, se você ainda estiver usando o URL antigo.

Greh Hinch começou a conversa começou Nos fóruns , para chegar ao debate e já nos veremos quinta-feira!

UPDATE (26/01)

Você pode encontrar o esboço do roteiro de 2011 que Satyen discutido na semana passada na wiki YUILibrary.com. Nós não vamos gastar muito tempo revendo-o, então dê uma olhada antes da chamada.

* - Se o Skype não é uma opção, envie um email para um número local.

Compartilhe e ampliar: Bookmark com del.icio.us | digg it! | reddit!

Anunciando Yahoo! User Interface 2.x Biblioteca Cookbook

21 de janeiro de 2011 às 09:00 por Snider Matt | Em Desenvolvimento | 6 Comentários

Packt Publishing tem o prazer de anunciar o lançamento do meu novo livro, Yahoo! User Interface Library 2.x Cookbook . O livro contém inúmeras receitas de codificação, fornecer leitores com exemplos detalhados por mais de 25 YUI 2.x componentes, incluindo contentores , Drag & Drop , Connection Manager , DataTable , TreeView , e muito mais.

O que você vai aprender com este livro

Eu escrevi este livro para que ele irá ajudá-lo a aprender a usar 2.x YUI para construir mais ricos, as aplicações web mais interativas que impressionam os clientes e impressionar seus amigos. Tem receitas explicando mais 25 componentes do YUI, mostrando como utilizá-los, e como configurá-los para atender às suas necessidades. Cada componente abrangidos terão amostras de código extraíveis que apresentam as formas comuns de que o componente é usado.

Além disso, o código de trabalho completo pode ser baixado separadamente para cada capítulo, por isso é mais fácil de acompanhar. Para cada uma das receitas, há um exemplo de introdução, em seguida, exemplos mais avançados, seguidos por uma explicação de como o componente funciona e qual YUI está fazendo. Para desenvolvedores mais experientes, a maioria das receitas também incluem uma discussão adicional da solução, explicando como personalizar ainda mais e aumentar o componente.

Prático e embalado com fácil de seguir receitas, o livro vai ajudar você a criar modernos, aplicações ricas para internet utilizando os componentes mais potentes do Yahoo! User Interface Library (YUI).

Que este livro é escrito para

O livro é mais indicado para desenvolvedores de JavaScript que são relativamente novos para YUI 2 ou interessados em começar rapidamente. No entanto, contém exemplos para quase todos os componentes e é ideal como referência para desenvolvedores experientes que procuram se atualizar sobre ou explorar alguns dos recursos mais poderosos de cada componente.

Receba 15% de desconto!

Packt Publishing está oferecendo um desconto de 15% para qualquer leitor YUIBlog, e você vai encontrar meu livro está disponível em eBook e formatos tradicionais. Para receber o desconto, basta comprar Yahoo! User Interface Library 2.x Cookbook através Packt Publishing, e fornecer o YUI2XCBK15 código no checkout. (Nota: Você deve estar logado para que o código de trabalho.)

Quer um exemplo?

Para ajudar você a começar uma sensação para o conteúdo fornecido dentro do meu livro, Packt é generoso o suficiente para fornecer uma amostra do que você pode esperar:

" 2.X YUI: Usando Componente do evento "

Sobre o autor: Matt Snider é um Desenvolvedor Web e JavaScript aficionado. Matt tem sido o desenvolvimento de aplicações Web em uma variedade de quadros e idiomas para os últimos 7 anos, e também tem estado a escrever um blog sobre desenvolvimento web há quase quatro anos. Matt é o engenheiro principal no Mint.com . Ele tem contribuído bastante para ambos YUI 2 e 3, incluindo o componente de armazenamento em YUI 2 (abordados neste livro). Matt saldos seu tempo entre o trabalho do dia, o seu blog, e as contribuições para a comunidade open-source. Quando ele não está funcionando ele gosta de mochila longe de tudo ou ficar no seu jogo e explorando coleção expansiva de vídeo.

Compartilhe e ampliar: Bookmark com del.icio.us | digg it! | reddit!

YUI Theater - Satyen Desai: "um telefone, um Tablet e um laptop entra num bar ..."-YUI 's Abordagem Mobile Web Development "(55 min.)

17 de janeiro de 2011 às 08:37 por Eric Miraglia | Em Desenvolvimento , YUI Teatro | No Comments

Satyen Desai ( @ dezziness ), criador do 3 º e componente widget subsistemas YUI, discute a abordagem da YUI para apoiar o novo conjunto de web dispositivos habilitados no mercado hoje, e como nós gostamos de pensar neles em termos de características e condicionalismos oposição a um problema de espaço isolado.

Se a incorporar vídeo abaixo não aparecem corretamente em seu leitor RSS de sua escolha, não se esqueça de clicar para assistir a versão em alta resolução de vídeo no YUI Theater .

Outros vídeos de Teatro recentes YUI:

Luke Smith: YUI 3: abaixo da superfície - Luke Smith, um engenheiro da equipe YUI, proporciona uma das palestras mais bem classificadas na YUICONF 2010, olhar para dentro de alguns padrões essenciais de infra-estruturas e peças que se encontram no coração da YUI 3.
Ryan Grove: Apresentando YUI 3 AutoComplete - Nesta palestra de YUICONF 2010, YUI 3 AutoCompletar autor Ryan Grove leva você a uma viagem por alguns dos autocomplete muitos padrões possibilitada por esse componente e fornece um mergulho profundo em sua YQL integração novo e poderoso , filtragem, e salientando as capacidades.
Paul Donnelly e Nagesh Susarla: YQL + YUI: Fim-de-final Applications Building - Ao desenvolver widgets, não é como usar os dados YQL que surge como uma pergunta, mas sim como acessá-lo. Neste 2010 YUICONF sessão, engenheiros YQL Paul Donnelly e Nagesh revisão Susarla começando o seu fora de consulta no YQL console, o acesso a dados via YQL vários parâmetros, e passando por várias camadas YQL de autenticação.
Eric Ferraiuolo: TipTheWeb.org: Heavy Duty 3 YUI & YQL - Nesta sessão de YUICONF 2010, TipTheWeb co-fundador e colaborador YUI Eric Ferraiuolo discute a criação de uma escala codebase projeto usando YUI 3, YUI Galeria 3 e YQL.
Reid Burke: Yeti: É fácil YUI Testes Interface - aplicações web browser cross teste foi muito difícil por muito tempo: Você quer a recarga manual navegadores ou lutando com software de automação complicado. Nesta sessão de YUICONF 2010, o engenheiro Reid Burke YUI fala sobre como o projeto de YUI Yeti ajuda para resolver estes problemas. Reid discute quando você deve usar testes automatizados para o seu código de interface, como Yeti trabalha com YUI teste, como testar a configuração do navegador da cruz em minutos e como a equipe YUI usa Yeti a lançar um produto melhor.

Conteúdo CC / Usado com permissão:

Inscrevendo-Teatro YUI:

Compartilhe e ampliar: Bookmark com del.icio.us | digg it! | reddit!

YUI Theater - Luke Smith: Superfície "(a 48 min.)" 3: YUI Abaixo

14 de janeiro de 2011 às 02:33 por Eric Miraglia | Em Desenvolvimento , YUI Teatro | No Comments

Neste vídeo, teatro YUI, engenheiro YUI Luke Smith ( ls_n @ ) fornece uma das palestras mais bem classificadas na YUICONF 2010, olhar para dentro de alguns padrões essenciais de infra-estruturas e peças que se encontram no coração da YUI 3.

Se a incorporar vídeo abaixo não aparecer correctamente no seu leitor de RSS, não se esqueça de clicar para assistir a versão em alta resolução de vídeo no YUI Theater .

Outros vídeos de Teatro recentes YUI:

Satyen Desai: "um telefone, um Tablet e um laptop entra num bar ..."-YUI 's Abordagem Mobile Web Development - Satyen Desai, criador do YUI 3 componentes e subsistemas widget, discute a abordagem da YUI para apoiar o novo conjunto de Web habilitado dispositivos no mercado hoje, e como gostaríamos de vê-los em termos de características e limitações ao contrário de um espaço problema isolado.
Ryan Grove: Apresentando YUI 3 AutoComplete - Nesta palestra de YUICONF 2010, YUI 3 AutoCompletar autor Ryan Grove leva você a uma viagem por alguns dos autocomplete muitos padrões possibilitada por esse componente e fornece um mergulho profundo em sua YQL integração novo e poderoso , filtragem, e salientando as capacidades.
Paul Donnelly e Nagesh Susarla: YQL + YUI: Fim-de-final Applications Building - Ao desenvolver widgets, não é como usar os dados YQL que surge como uma pergunta, mas sim como acessá-lo. Neste 2010 YUICONF sessão, engenheiros YQL Paul Donnelly e Nagesh revisão Susarla começando o seu fora de consulta no YQL console, o acesso a dados via YQL vários parâmetros, e passando por várias camadas YQL de autenticação.
Eric Ferraiuolo: TipTheWeb.org: Heavy Duty 3 YUI & YQL - Nesta sessão de YUICONF 2010, TipTheWeb co-fundador e colaborador YUI Eric Ferraiuolo discute a criação de uma escala codebase projeto usando YUI 3, YUI Galeria 3 e YQL.
Reid Burke: Yeti: É fácil YUI Testes Interface - aplicações web browser cross teste foi muito difícil por muito tempo: Você quer a recarga manual navegadores ou lutando com software de automação complicado. Nesta sessão de YUICONF 2010, o engenheiro Reid Burke YUI fala sobre como o projeto de YUI Yeti ajuda para resolver estes problemas. Reid discute quando você deve usar testes automatizados para o seu código de interface, como Yeti trabalha com YUI teste, como testar a configuração do navegador da cruz em minutos e como a equipe YUI usa Yeti a lançar um produto melhor.

Conteúdo CC / Usado com permissão:

Inscrevendo-Teatro YUI:

Compartilhe e ampliar: Bookmark com del.icio.us | digg it! | reddit!

YUI: Horário Wed 19 de janeiro

13 jan 2011 às 04:10 por Lucas Soares | Em Desenvolvimento | 3 Comentários

Congratulando-se em 2011, YUI: Horário estará começando de novo, e da primeira parcela do novo ano será na próxima quarta, dia 19.

Naturalmente, com o lançamento do YUI 3.3.0 , que será o tema principal do primeiro Open Horas deste ano. Vou tentar disputar o maior número da equipe de YUI e colaboradores externos que eu posso para participar da chamada, e nós vamos passar por cima de nossos favoritos destaques em seguida, abra a conversa para ouvir sobre o que você já jogou com a previsão de lançamentos. Teremos uma atualização em 2,9, então (e eu estou muito animado sobre isso), começam a falar roteiro 3.x para 2011. E queremos que as suas ideias, os seus comentários. Onde você quer ver YUI vai este ano? Quais são os itens bilhete quente em sua lista de favoritos?

Então venha conversar com a equipe YUI sobre o que é novo eo que o futuro trará!

Em outras notícias da frente de logística do programa, haverá algumas mudanças no formato de Horário:

Primeiro, vamos encurtar a chamada de 2 horas a mais do horário comercial-friendly 1 hora
Eu vou incorporar um estilo de execução seção foco em cada chamada, para que todos possamos aprender YUI 3 está sendo usado nas trincheiras (sujeito a temas específicos, como novos lançamentos
E por último, e impressionante, Eric Ferraiuolo , de TipTheWeb fama, irá juntar-se-me como um co-apresentador permanente. Ele está vivendo o sonho desde YUI 3 3.0 beta 1, e vai acrescentar a voz ea experiência de aplicação do mundo real.

Estaremos on-line 10:00-11:00 PST a menos que a conversa é boa demais para parar. Os detalhes de conexão são as mesmas, como de costume.

Disque para 1-888-371-8922 (Skype funciona muito bem para os participantes de fora dos EUA *)
Digite o código de participante 47188953 #
Junte-se a sessão de compartilhamento de tela (este irá pedir-lhe para instalar o plugin Adobe Connect se esta é sua primeira vez com ele)

Não se esqueça de assinar o Calendário YUI e siga @ yuilibrary no Twitter para as últimas atualizações sobre Horário e interestingness YUI outros.

Vejo você lá!

* - Se o Skype não é uma opção, envie um email para um número local.

Compartilhe e ampliar: Bookmark com del.icio.us | digg it! | reddit!

estatísticas rodapé da tabela para YUI 2 DataTable

13 de janeiro, 2011 às 4:00 pm por Parker Matt | Em Desenvolvimento | No Comments

O YUI 2 DataTable faz um monte. Mas uma das coisas que ele faz não é nada com um rodapé da tabela, onde você pode esperar encontrar totais, médias ou dados de resumo de outros. Então eu estendi DataTable para adicionar dados de resumo de dados numéricos.

Conseguir que vai

Primeiro, para usá-lo: você vai precisar de algum código do github - há três js, e você vai precisar de todos eles em sua página após o DataTable js YUI. E você pode querer alterar o namespace - usamos YAHOO.LPLT.DataTable como a extensão do YAHOO.widget.DataTable . Vou explicar um pouco mais sobre esses arquivos abaixo.

Você configurar o DataTable como normal, mas há três coisas que você precisa fazer para obter a ficha de trabalho:

Certifique-se de sua fonte de dados especifica "número" analisadores de todos os campos que pretende resumir, especialmente se você está fazendo edição de célula inline:
```
  myDataSource.responseSchema = {campos: [
    {Chave: "quantidade", analisador: "número"}
    / * Etc ..  * /
 ]};
```
Adicione uma configuração chave-valor de columnStats: true na sua definição de matriz coluna:
```
  myColumnDefs var = [
     {Chave: "quantidade", no rótulo: "Quantidade", columnStats: true} 
     / * Etc ..  * /
 ];
```
para as colunas que você gostaria de resumir. (O total da coluna 'id' provavelmente não é muito útil!).
Informe o DataTable que as estatísticas para o cálculo:
```
 MyDataTable YAHOO.LPLT.DataTable var = new ("exampleEl",
     myColumnDefs, 
     mydatasource, 
     {ColumnStats: {a: verdade, estatísticas: ['sum']}}
 );
```
Esta é a maneira mais simples possível configurar as estatísticas de coluna, mas você pode adicionar as estatísticas extra, personalizar os rótulos, e muito mais.

Há um exemplo no github para jogar.

Alguns pontos:

O rodapé irá mudar com a sua mesa. Então, se você mostrar / ocultar colunas, movê-las, adicionar novas, adicionar ou remover linhas, tipo, ou usar editores de celular embutido, o rodapé irá atualizar a interface do usuário e as estatísticas em conformidade.
Você pode adicionar tantas linhas para o rodapé como você gosta, uma linha para cada tipo de estatística. Como está, você pode ter média, soma, média, mínimo, máximo, amplitude, desvio-padrão, variância, ou varianceUnbiased. 'Stats' O item na configuração é um conjunto: basta adicionar as estatísticas que você gostaria de essa matriz (por exemplo, stats: ["min", "median", "stdev"] ).
O rodapé da tabela irá utilizar qualquer formatadores especificado para esta coluna.
Se você tem um paginador, você pode escolher se os dados estatísticos são indicados para a tabela inteira ou apenas a página actualmente visível. Adicionar pagedTotals: true ao columnStats objeto de estatísticas página.
A matriz de 'status' no objeto de configuração também pode incluir literais de objeto, com "rótulo" chaves e 'fn'. fn é a função que irá calcular as estatísticas - ou uma string como 'min' ou uma função que retorna um número. O exemplo github mostra como você pode fazer dados usando um "total ponderada" a partir de duas colunas.

Mais informações sobre o código de extensão real

O arquivo principal, YAHOO_DataTable_colStats.js, acrescenta um par de propriedades protegidas para o DataTable, um protegido alguns métodos, e dois métodos públicos, colStatsRefresh que recalcular e redesenhar o rodapé da tabela, e colStatsGetRecordSet , que retorna uma matriz ou de todas as registros, ou apenas aquelas visíveis, dependendo do valor do pagedTotals . O primeiro pode ser útil se você estiver fazendo alterações na tabela que não acionar eventos úteis (por exemplo, alterar os dados diretamente no conjunto de registros subjacente), o segundo se você estiver usando funções de resumo personalizado.

YAHOO_DataSource_patch.js adiciona um parseField(key, value) método para DataSource. Isto é necessário quando você tem editores textbox inline celular para dados numéricos, o editor retorna uma string, o que não é analisado automaticamente, e por isso não podem ser adicionados. O parseField fornece acesso à parsers especificado no DataSource, para converter os dados editados.

YAHOO_util_Stats.js fornece um autônomo YAHOO.util.Stats classe que envolve um classificado) matriz (de dados numéricos e fornece as estatísticas de resumo. É a dependência é apenas YAHOO.lang. Um exemplo YAHOO.util.Stats é mantido pela DataTable para cada coluna que deve ser resumido, e armazena alguns dos matemáticos mais para melhorar o desempenho. As cordas passado para a matriz Estatísticas ('min', 'médio', etc) são os métodos da classe YAHOO.util.Stats, assim você pode facilmente adicionar mais adicional adicionando ao protótipo. Note que embora eles só tenham acesso aos dados da coluna 'seu' é.

E, finalmente,

Tenho certeza que isso não vai trabalhar com DataTables rolando, então eu não tenho tentado mesmo! Mas se você encontrar algum problema ou tem idéias, faça favor colocá-los no issue tracker github.

Sobre o autor: Matt Parker ( @ Lamplightdb no Twitter ) é o fundador e desenvolvedor em Lamplight Database Systems , uma pequena empresa oferecendo um destaque baseado na web de gerenciamento de sistema totalmente para organizações sem fins lucrativos no Reino Unido. Matt vive e trabalha em Londres noroeste.

Compartilhe e ampliar: Bookmark com del.icio.us | digg it! | reddit!

Próxima página »

Yahoo! Blog User Interface (YUIBlog)

Treeble com YUI 3 DataTable