Rodolfo Junior

Olá, nesse post tentarei demonstrar uma das opções de ferramenta para a seleção de cores dentro de uma pagina web.

Com o aumento das páginas com itens dinâmicos, que podem ser customizados pelos usuários, como fontes, bordas, textos, e, principalmente cores, Surge a necessidade de uma maneira do usuário selecionar a cor para uma determinada propriedade sem inserir ela diretamente em hexadecimal ou  em rgb

O plugin que vamos utilizar do jQuery se chama ColorPicker, pode ser baixado em http://www.eyecon.ro/colorpicker/#download

Passo 1

Adicione os arquivos baixados ao projeto, os principais são:

• images
• colorpicker.js
• colorpiker.css

Lembrando que o jQuery é necessário

Passo 2

Chame os arquivos javascript e a folha de estilo no Header da página

Passo 3

Insira um TextBox que utilizará como objeto para retornar a cor selecionada pelo Color Picker

Passo 4

Agora precisaremos inicializar o Color Picker selecionado o TextBox via jQuery e passando alguns atributos

Nesse código nós estamos definindo dois eventos:

• onBeforeShow, antes de exibir o componente ele pega a cor que está escrita no TextBox e seta no controle
• onSubmit, atribui a cor selecionada ao TextBox

E precisamos considerar qual será o ClientID do controle ASP.NET (MainContent_txtCor)

Passo5

Agora podemos trabalhar como quisermos em ambos os lados, Client e Server. Como exemplo vou manipular o valor no Server.

Como exemplo desses passos teremos:

Obrigado,

Rodolfo

Como trabalhar de forma simples com objetos JSON no server side?

Procurando uma resposta para esta pergunta encontrei um projeto que tem como fruto uma biblioteca em .NET que manipula de forma simples dados em formato de JSON,

o projeto se chama Json.NET e pode ser baixado em http://www.codeplex.com/Json.

Suas principais caracteristicas são um serializador JSON flexível para converter rapidamente. NET para JSON e de volta, e LINQ to JSON para leitura e escrita JSON.

Para isso primeiramente devemos adicionar referência a dll do projeto, então podemos partir para alguns exemplos:

Serializando

O resultado exibido será uma string:

{ “Nome”: “Rodolfo”, “Sobrenome”: “Fadino”, “Idade”: 20 }

O resuldao exibido será uma string:

[ { "Nome": "Rodolfo", "Idade": 20 }, { "Nome": "Alexandre", "Idade": 21 }, { "Nome": "Eduardo", "Idade": 22 }, { "Nome": "Taurã", "Idade": 23 } ]

Agora podemos passar para o processo inverso, através de uma string no formato de um JSON iremos utilizar Linq to JSON

Linq to JSON

Outra coisa que podemos fazer são consultas Linq

Obrigado

qualquer duvida estou a disposição.

Rodolfo

Após ter que aprender a utilizar JSON em uma novo projeto, decidi fazer um post sobre esse formato de transmissão de dados. Uma de suas principais vantagens é ser baseado em um subconjunto do JavaScript. Sendo um objeto JavaScript, sua manipulação com JavaScript é mais intuitiva do que, por exemplo, a manipulação de um xml.

JSON (JavaScript Object Notation) é construído em duas estruturas:

• Uma coleção de pares nome / valor. O que pode ser definido como um objeto, registro, estrutura, quadro, dicionário de hash, keyed list, ou vetors associativos.
• Uma lista ordenada de valores. Na maioria das linguagens isto é percebido como um  vetor, lista ou sequência.

Sendo uma estrutura de dados a maioria das linguagens modernas possuem um tipo de suporte para o uso do JSON, assim é um dos melhores jeitos de trafegar informações.

Estas estrutiras podem ter os seguintes formatos:

Objeto:

Um objeto é um conjunto não ordenado de pares nome / valor. Um objeto que começa com {(chave esquerda) e termina com } (chave direita). Cada nome é seguido por: (dois pontos) e os pares nome / valor são separados por, (vírgula).

ex:

var objeto = { nome1: “valor1″, nome2: “valor2″, nome3: “valor4″ };

alert(objeto.nome1);

//”valor1″

Vetor

Um vetor é uma coleção ordenada de valores. Um vetor começa com [(colchete esquerdo) e termina com] (colchete direito). Os valores são separados por, (vírgula).

ex:

var vetor = ["valor1", "valor2", "valor3"];

alert(vetor[1]);

//”valor2″

O valor pode ser uma string entre aspas, ou um número, ou verdadeiro ou falso ou nulo, ou um objeto ou um array. Estas estruturas podem ser aninhadas.

Estruturas aninhadas

ex:

var pessoa = { nome:”Rodolfo”, Idade: 20, Sexo: ‘M’, Certificações:["MCP", "MCTS" , "MCPD"]};

alert( pessoa.Certificações[1]);

//”MCTS”

alert( pessoa.Idade);

//20

var pessoa = { nome: “Rodolfo”, Idade: 20, Sexo: ‘M’, Certificações: ["MCP", "MCTS", "MCPD"] };
var certif = “”;
for (var item in pessoa.Certificações) {
certif =  pessoa.Certificações[item] + ” “+ certif;
}

alert(certif);

//”MCP MCTS MCDP”

Uma coisa muito util é o intellisense do js reconhecendo a estrutura

Manipulando via js

ex:

var pessoas= new Array;
pessoas.push(
{ nome: “Rodolfo”, Idade: 20, Sexo: ‘M’, Certificações: ["MCP", "MCTS", "MCPD"] }
);

pessoas.push(
{ nome: “Fadino”, Idade: 25, Sexo: ‘M’, Certificações: ["MCP", "MCTS", "MCPD"] }
);

pessoas.push(
{ nome: “Junior”, Idade: 25, Sexo: ‘M’, Certificações: ["MCP", "MCTS", "MCPD"] }
);

alert(pessoas[1].Certificações);

// “MCP, MCTS,MCPD”

ex:

var pessoas= new Array;
pessoas.push(
{ nome: “Rodolfo”, Idade: 20, Sexo: ‘M’, Certificações: ["MCP", "MCTS", "MCPD"] }
);

pessoas.push(
{ nome: “Fadino”, Idade: 25, Sexo: ‘M’, Certificações: ["MCP", "MCTS", "MCPD"] }
);

pessoas.push(
{ nome: “Junior”, Idade: 25, Sexo: ‘M’, Certificações: ["MCP", "MCTS", "MCPD"] }
);

var pessoa = pessoas.pop();
alert(pessoa.nome);

//”Junior”

var pessoas= new Array;
pessoas.push(
{ nome: “Rodolfo”, Idade: 20, Sexo: ‘M’, Certificações: ["MCP", "MCTS", "MCPD"] }
);

pessoas.push(
{ nome: “Fadino”, Idade: 25, Sexo: ‘M’, Certificações: ["MCP", "MCTS", "MCPD"] }
);

pessoas.push(
{ nome: “Junior”, Idade: 25, Sexo: ‘M’, Certificações: ["MCP", "MCTS", "MCPD"] }
);

alert(pessoas.length);

//3

Bem, espero que tenha sido útil, em breve farei um post sobre Linq to JSON em C#,

Obrigado

Rodolfo