Tecnologia e desenvolvimento de aplicações.
A ideia básica é permitir que várias ações sejam aplicadas a um elemento e o decorator é uma forma elegante de permitir isso.
Tenho um problema num cliente que consiste em aplicar uma série de verificações numa coleção de objetos e exibir as críticas apontadas.
ótimo artigo do codeprojetc.com sobre o assunto:
A página abaixo traz uma lista muito boa de code snippets para jQuery para algumas situações muito comuns.
A página “useful tools for css” traz uma lista de ferramentas e sites com templates prontos para uso em projetos para internet. Vale a pena dar uma olhada, principalmente, no “pure css” e no “top coat” .
Através do objeto XMLHttpRequest podemos fazer chamadas assíncronas ao servidor Web. Esse recurso é a base das técnicas utilizadas no AJAX.
Exemplo:
Página pag1.html
Página pag2.asp
Script
Neste exemplo, a página pag1.html possui um elemento âncora que, ao ser clicado, dispara uma rotina javascript que efetua a carga do retorno da página pag2.asp através do objeto XMLHttpRequest, o retorno dessa chamada (responseText) é carregado num elemento “div” no evento “onreadystatechange” do objeto XMLHttpRequest.
É claro que esse exemplo é muito simplório, uma vez que utilizamos duas páginas de conteúdo estático e com um volume de informações que não justifica a utilização desta técnica, contudo, devemos ter em mente cenários em que as páginas envolvidas possuem conteúdo dinâmico, com grande volume de dados cujo “reload” poderia envolver processos onerosos para o WebServer.
1 – “*”
Seleciona todos os marcadores html.
Exemplo:
*{
margin: 0;
padding: 0;
}
O seletor “*” também pode ser utilizado para selecionar os marcadores html “filhos” de um marcador div.
Exemplo:
#container *{
border: 1px solid black;
}
2 – “#[identificador]”
Seleciona o marcador html cujo id (identificador) coincide com o parâmetro passado ao operador “#”.
Exemplo:
#container{
width: 960px;
margin: auto;
}
3 – “.[classe]”
Seleciona os marcadores html cujo atributo class coincidam com o parâmetro passado ao operador “.”.
Exemplo:
.destacado{
color: red;
}
4 – “seletor1 seletor2”
Esse é um pouco mais complicado, é utilizado para selecionar os marcadores html contemplados pelo seletor2 que sejam descendentes dos elementos contemplados pelo seletor1.
Exemplo:
div p{
color: blue;
}
Nesse exemplo, todos os parágrafos contidos em elementos div serão impactados.
5 – “[tipo_de_marcador]”
Permite selecionar os marcadores html de acordo com o tipo.
Exemplo:
a{
color: green;
}
p{
color: yellow;
}
Todos os elementos do tipo âncora (a) receberão a cor verde e os elementos do tipo parágrafo (p) a cor amarela.
Duas formas bem simples de aplicar o aspecto de formulário “zebrado” à tabelas HTML:
1 – CSS:
tr:nth-child(odd){
background-color:#eee;
}
tr:nth-child(even) {
background-color:#fff;
}
O conceito é muito simples, as linhas ímpares (odd) tem a propriedade backgroud-color “setada” através do seletor CSS 3 “tr:nth-child(odd)”, e as linhas pares (even) através do seletor “tr:nth-child(even)”.
O problema com esse procedimento é que nem todos os browsers suportam os seletores CSS nível 3. O que nos remete à segunda alternativa:
2 – jQuery:
$(document).ready(function() {
$(‘tr:nth-child(odd)’).css(‘background-color’, ‘#eee’);
$(‘tr:nth-child(even)’).css(‘background-color’, ‘#fff’);
});
Como é possível verificar, o procedimento é muito similar ao utilizado no primeiro exemplo ( inclusive os seletores CSS ). A diferença reside no fato de que a biblioteca jQuery é que se encarrega de localizar os elementos HTML e aplicar a formatação, independentemente do browser suportar o CSS nível 3.
Através da propriedade “style” do construtor de colunas do WebGrid, é possível adicionar classes às colunas, permitindo aplicar formatações a cada coluna ( através de CSS ou jQuery ). Segue exemplo:
/* razor */
@grid.GetHtml(
columns:
grid.Columns(
grid.Column("Name", "Name", canSort: true, style: "name"),
grid.Column("Address", "Address", canSort: true, style: "address"
)
));
/* css */
.name {
width: 50px;
}
.address {
width: 300px;
}
zenasrossijr 