C# 4.0 Parâmetros Opcionais e Nomeados
Olá, acabei de instalar a ultima versão do Visual Studio Ultimate 2010 Beta2, começando a explorar as novidades do ASP.NET 4 e do C# 4.0 me deparei com uma nova funcionalidade do C# muito util. Os parâmetros opcionais e nomeados.
Antes do C#4.0
Quando queriamos escrever um método que possuisse algum parâmetro como opcional precisariamos sobrecarregar o mesmo e reescrever seu codigo:
- public class Foto
- {
- public int id { get; set; }
- public string nome{ get; set; }
- public string descricao { get; set; }
- public string _extensao { get; set; }
- public string GetUrlFoto()
- {
- string path = ConfigurationManager.AppSettings["dirImagens"].ToString();
- string url = path + “/” + nome + TamanhoFoto.medio.ToString() + _extensao;
- return url;
- }
- public string GetUrlFoto( TamanhoFoto tamanho )
- {
- string path = ConfigurationManager.AppSettings["dirImagens"].ToString();
- string url = path + “/” + nome + tamanho.ToString() + _extensao;
- return url;
- }
- }
- Foto foto = new Foto();
- string url = foto.GetUrlFoto();
- string url2 =foto.GetUrlFoto(TamanhoFoto.grande);
Antes do C# 4.0 quando queriamos criar um método que pode ser chamados com várias chamadas diferentes era preciso sobrecarregar o método.
Entretanto isso pode ocasionar muita repetição de codigo e difícil manutenção.
Com o C#4.0
Agora com o C# 4.0 podemos criar um unico método sem sobrecargas com um parametro nomeado com valor padrão
- public class Foto
- {
- public int id { get; set; }
- public string nome { get; set; }
- public string descricao { get; set; }
- public string _extensao { get; set; }
- public string GetUrlFoto(TamanhoFoto tamanho = TamanhoFoto.medio)
- {
- string path = ConfigurationManager.AppSettings["dirImagens"].ToString();
- string url = path + “/” + nome + tamanho.ToString() + _extensao;
- return url;
- }
- }
- Foto foto = new Foto();
- string url = foto.GetUrlFoto();
- string url2 = foto.GetUrlFoto(tamanho: TamanhoFoto.grande);
Bem é isso, ficamos todos no aguardo do lançamento do Visual Studio 2010, e em breve mais posts sobre as principais novidades do C# 4.0 e do ASP.NET 4
Obrigado
Rodolfo
ColorPicker jQuery plugin, em 5 passos
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
- <asp:Content ID=”HeaderContent” runat=”server” ContentPlaceHolderID=”HeadContent”>
- <script src=”Scripts/jquery-1.3.2.js” type=”text/javascript”></script>
- <script src=”Scripts/colorpicker.js” type=”text/javascript”></script>
- <link href=”Styles/colorpicker.css” rel=”stylesheet” type=”text/css”></link>
- </asp:Content>
- <asp:Content ID=”HeaderContent” runat=”server” ContentPlaceHolderID=”HeadContent”>
- <script src=”Scripts/jquery-1.3.2.js” type=”text/javascript”></script>
- <script src=”Scripts/colorpicker.js” type=”text/javascript”></script>
- <link href=”Styles/colorpicker.css” rel=”stylesheet” type=”text/css”></link>
- </asp:Content>
Passo 3
Insira um TextBox que utilizará como objeto para retornar a cor selecionada pelo Color Picker
- Selecione a cor:
- <asp:TextBox ID=”txtCor” runat=”server”></asp:TextBox>
Passo 4
Agora precisaremos inicializar o Color Picker selecionado o TextBox via jQuery e passando alguns atributos
- <script type=”text/javascript”>
- $(‘#MainContent_txtCor’).ColorPicker({
- onSubmit: function(hsb, hex, rgb, el) {
- $(el).val(hex);
- $(el).ColorPickerHide();
- },
- onBeforeShow: function() {
- $(this).ColorPickerSetColor(this.value);
- }
- });
- </script>
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.
- <p>
- A cor selecionada foi:
- <asp:Label ID=”lblCor” runat=”server”> </asp:Label>
- </p>
- <asp:Button ID=”btnSalvar” runat=”server” Text=”Salvar” OnClick=”btnSalvar_Click” />
- protected void btnSalvar_Click(object sender, EventArgs e)
- {
- lblCor.Text = txtCor.Text;
- lblCor.ForeColor = ColorTranslator.FromHtml(“#” + txtCor.Text);
- }
Como exemplo desses passos teremos:
Obrigado,
Rodolfo
Linq to JSON C#
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
- Pessoa pessoa = new Pessoa { Nome = “Rodolfo”,Sobrenome= “Fadino” ,Idade = 20 };
- string jsonpessoa = JsonConvert.SerializeObject(pessoa, Formatting.Indented);
O resultado exibido será uma string:
{ “Nome”: “Rodolfo”, “Sobrenome”: “Fadino”, “Idade”: 20 }
- List<Pessoa> pessoas = new List<Pessoa>();
- Pessoa rodolfo = new Pessoa { Nome = “Rodolfo”,Idade = 20 };
- Pessoa alexandre = new Pessoa { Nome = “Alexandre”, Idade = 21 };
- Pessoa eduardo = new Pessoa { Nome = “Eduardo”, Idade = 22 };
- Pessoa taura = new Pessoa { Nome = “Taurã”, Idade = 23 };
- pessoas.Add(rodolfo);
- pessoas.Add(alexandre);
- pessoas.Add(eduardo);
- pessoas.Add(taura);
- string jsonpessoas = JsonConvert.SerializeObject(pessoas, Formatting.Indented);
- Pessoa pessoa = new Pessoa { Nome = “Rodolfo”,Sobrenome= “Fadino” ,Idade = 20 };
- string jsonpessoa = JsonConvert.SerializeObject(pessoa, Formatting.Indented);
- lblJson.Text = jsonpessoa;
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
- string json = @”{
- “”Nome”": “”Rodolfo”",
- “”Idade”": 20,
- “”Certificacoes”": [
- ""MCP"",
- ""MCTS"",
- ""MCPD""
- ]
- }”;
- JObject objRodolfo = JObject.Parse(json);
- string Nome = (string)objRodolfo["Nome"];
- //Rodolfo
- JArray certificacoes = (JArray)objRodolfo["Certificacoes"];
- //[ "MCP", "MCTS", "MCPD" ]
- string certificacao1 = (string)certificacoes[1];
- //MCTS
Outra coisa que podemos fazer são consultas Linq
- JObject objPessoas = JObject.Parse(@”{
- “”Pessoas”" :[
- {""Nome"":""Nome1"",
- ""Idade"":20,
- ""Profissao"":""Desenvolvedor""},
- {""Nome"":""Nome2"",
- ""Idade"":20,
- ""Profissao"":""Desenvolvedor""},
- {""Nome"":""Nome3"",
- ""Idade"":20,
- ""Profissao"":""Desenvolvedor""},
- {""Nome"":""Nome4"",
- ""Idade"":20,
- ""Profissao"":""Desenvolvedor""}
- ]}”);
- IList<string> pessoas = objPessoas["Pessoas"].Select(p => (string)p["Nome"]).ToList();
- lblJson.Text = pessoas.First();
- //Nome1
Obrigado
qualquer duvida estou a disposição.
Rodolfo
Introdução JSON (JavaScript Object Notation)
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
Efeitos de slideshow com jQuery Cycle Plugin
Como criar efeitos de transição entre fotos sem utilizar flash que comprometem o desempenho da página?
Nessa busca me deparei com um plugin muito interessante do jQuery, o jQuery Cycle Plugin
Ele traz diversos efeitos de transição entre imagens, desde faders básicos até efeitos de rotação e zoom, tudo isso com uma excelente velocidade e tamanho
Primeiros Passos
Como requerimento para utilizar o Plugin é necessário referenciar o js do jQuery, que pode ser baixado em http://jquery.com/, e referenciar também o código do jQuery Cycle Plugin que pode ser baixado em http://www.malsup.com/jquery/cycle/
Como ele funciona
Ele fornece um método chamado cycle que é chamado em um container, onde cada elemento filho se tranforma em um slide.
- <script type=”text/javascript”>
- $(document).ready(function() {
- $(‘.slideshow’).cycle({
- fx: ‘fade’ // Tipo de transição.
- });
- });
- </script>
A estrutura html que devemos montar para que esse codigo funcione adequadamente é simplesmente um container com a classe slideshow e dentro dele imagens que serão os slides
- <div class=”slideshow”>
- <img height=”200″ width=”200″ src=”http://cloud.github.com/downloads/malsup/cycle/beach1.jpg”/>
- <img height=”200″ width=”200″ src=”http://cloud.github.com/downloads/malsup/cycle/beach2.jpg”/>
- <img height=”200″ width=”200″ src=”http://cloud.github.com/downloads/malsup/cycle/beach3.jpg”/>
- </div>
- <div style=”border: #000080 1px solid; color: #000; font-family: ‘Courier New’, Courier, Monospace; font-size: 10pt”>
- <div style=”background: #000080; color: #fff; font-family: Verdana, Tahoma, Arial, sans-serif; font-weight: bold; padding: 2px 5px”>Code Snippet</div>
- <div style=”background: #ddd; max-height: 300px; overflow: auto”>
- <ol style=”background: #ffffff; margin: 0 0 0 2em; padding: 0 0 0 5px;“>
- <li><span style=”color:#0000ff”><</span><span style=”color:#a31515″>div</span> <span style=”color:#ff0000″>class</span><span style=”color:#0000ff”>="slideshow"></span></li>
- <li style=”background: #f3f3f3″> <span style=”color:#0000ff”><</span><span style=”color:#a31515″>img</span> <span style=”color:#ff0000″>height</span><span style=”color:#0000ff”>="200"</span> <span style=”color:#ff0000″>width</span><span style=”color:#0000ff”>="200"</span> <span style=”color:#ff0000″>src</span><span style=”color:#0000ff”>="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg"/></span></li>
- <li> <span style=”color:#0000ff”><</span><span style=”color:#a31515″>img</span> <span style=”color:#ff0000″>height</span><span style=”color:#0000ff”>="200"</span> <span style=”color:#ff0000″>width</span><span style=”color:#0000ff”>="200"</span> <span style=”color:#ff0000″>src</span><span style=”color:#0000ff”>="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg"/></span></li>
- <li style=”background: #f3f3f3″> <span style=”color:#0000ff”><</span><span style=”color:#a31515″>img</span> <span style=”color:#ff0000″>height</span><span style=”color:#0000ff”>="200"</span> <span style=”color:#ff0000″>width</span><span style=”color:#0000ff”>="200"</span> <span style=”color:#ff0000″>src</span><span style=”color:#0000ff”>="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg"/></span></li>
- <li> <span style=”color:#0000ff”><</span><span style=”color:#a31515″>img</span> <span style=”color:#ff0000″>height</span><span style=”color:#0000ff”>="200"</span> <span style=”color:#ff0000″>width</span><span style=”color:#0000ff”>="200"</span> <span style=”color:#ff0000″>src</span><span style=”color:#0000ff”>="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg"/></span></li>
- <li style=”background: #f3f3f3″> <span style=”color:#0000ff”><</span><span style=”color:#a31515″>img</span> <span style=”color:#ff0000″>height</span><span style=”color:#0000ff”>="200"</span> <span style=”color:#ff0000″>width</span><span style=”color:#0000ff”>="200"</span> <span style=”color:#ff0000″>src</span><span style=”color:#0000ff”>="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg"/></span></li>
- <li><span style=”color:#0000ff”></</span><span style=”color:#a31515″>div</span><span style=”color:#0000ff”>></span></li>
- </ol>
- </div>
- </div>
Opções
O jQuery Cycle Plugin possui diversas opções para customizar seus efeitos, para isso é necessário sobrescrever suas propriedades default’s
- $.fn.cycle.defaults = {
- fx: ‘fade’, // name of transition effect (or comma separated names, ex: fade,scrollUp,shuffle)
- timeout: 4000, // milliseconds between slide transitions (0 to disable auto advance)
- timeoutFn: null, // callback for determining per-slide timeout value: function(currSlideElement, nextSlideElement, options, forwardFlag)
- continuous: 0, // true to start next transition immediately after current one completes
- speed: 1000, // speed of the transition (any valid fx speed value)
- speedIn: null, // speed of the ‘in’ transition
- speedOut: null, // speed of the ‘out’ transition
- next: null, // selector for element to use as click trigger for next slide
- prev: null, // selector for element to use as click trigger for previous slide
- prevNextClick: null, // callback fn for prev/next clicks: function(isNext, zeroBasedSlideIndex, slideElement)
- pager: null, // selector for element to use as pager container
- pagerClick: null, // callback fn for pager clicks: function(zeroBasedSlideIndex, slideElement)
- pagerEvent: ‘click’, // name of event which drives the pager navigation
- pagerAnchorBuilder: null, // callback fn for building anchor links: function(index, DOMelement)
- before: null, // transition callback (scope set to element to be shown): function(currSlideElement, nextSlideElement, options, forwardFlag)
- after: null, // transition callback (scope set to element that was shown): function(currSlideElement, nextSlideElement, options, forwardFlag)
- end: null, // callback invoked when the slideshow terminates (use with autostop or nowrap options): function(options)
- easing: null, // easing method for both in and out transitions
- easeIn: null, // easing for “in” transition
- easeOut: null, // easing for “out” transition
- shuffle: null, // coords for shuffle animation, ex: { top:15, left: 200 }
- animIn: null, // properties that define how the slide animates in
- animOut: null, // properties that define how the slide animates out
- cssBefore: null, // properties that define the initial state of the slide before transitioning in
- cssAfter: null, // properties that defined the state of the slide after transitioning out
- fxFn: null, // function used to control the transition: function(currSlideElement, nextSlideElement, options, afterCalback, forwardFlag)
- height: ‘auto’, // container height
- startingSlide: 0, // zero-based index of the first slide to be displayed
- sync: 1, // true if in/out transitions should occur simultaneously
- random: 0, // true for random, false for sequence (not applicable to shuffle fx)
- fit: 0, // force slides to fit container
- containerResize: 1, // resize container to fit largest slide
- pause: 0, // true to enable “pause on hover”
- pauseOnPagerHover: 0, // true to pause when hovering over pager link
- autostop: 0, // true to end slideshow after X transitions (where X == slide count)
- autostopCount: 0, // number of transitions (optionally used with autostop to define X)
- delay: 0, // additional delay (in ms) for first transition (hint: can be negative)
- slideExpr: null, // expression for selecting slides (if something other than all children is required)
- cleartype: !$.support.opacity, // true if clearType corrections should be applied (for IE)
- cleartypeNoBg: false, // set to true to disable extra cleartype fixing (leave false to force background color setting on slides)
- nowrap: 0, // true to prevent slideshow from wrapping
- fastOnEvent: 0, // force fast transitions when triggered manually (via pager or prev/next); value == time in ms
- randomizeEffects: 1, // valid when multiple effects are used; true to make the effect sequence random
- rev: 0, // causes animations to transition in reverse
- manualTrump: true, // causes manual transition to stop an active transition instead of being ignored
- requeueOnImageNotLoaded: true, // requeue the slideshow if any image slides are not yet loaded
- requeueTimeout: 250 // ms delay for requeue
- };
Alem disso, diversos exemplos de uso do Plugin podem ser vistos no site do projeto:
http://www.malsup.com/jquery/cycle/
Obrigado
Rodolfo



