Como marcar a prova de certificação em HTML5

Segue abaixo um passo a passo de como marcar a prova de certificação em HTML5 da Microsoft.

Anúncios

Google Visualization API

Finalmente me desprendi da versão antiga do Google Charts (aquele com imagens estáticas) e comecei a migrar minhas aplicações para utilizar o Google Charts Tools. Achei extremamente flexível e dinâmico. O Google Charts Tools na verdade faz parte de uma API maior chamada Google Visualization API, a democratização da visualização de dados, ao lado da democratização de vídeo (youtube) e a democratização de localização (maps).

A utilização do Google Visualization API para geração de gráficos (charts) é muito simples. Na página de Quick Start existe um tutorial muito bem explicado sobre como começar a utilizar a API de visualização de dados. No entanto, vou compartilhar com vocês o código que escrevi para gerar o gráfico exibido acima.

function atualizarGraficoFinanceiro() {
    var ano = $(".financeiro-ano").val();
    var url = GetPath('home/financeiro?ano=' + ano);
    jQuery.post(url, function (data) {
        var table = new google.visualization.DataTable();
        table.addColumn('string', 'Mês');
        table.addColumn('number', 'Entrada');
        table.addColumn('number', 'Saída');
        table.addRows(data.length);
        $(eval(data)).each(function (i, e) {
            table.setValue(i, 0, e.mes);
            table.setValue(i, 1, e.entrada);
            table.setValue(i, 2, e.saida);
        });
        var formatter = new google.visualization.NumberFormat({
            prefix: 'R$ ',
            decimalSymbol: ',',
            groupingSymbol: '.'
        });
        formatter.format(table, 1);
        formatter.format(table, 2);
        var grafico = new google.visualization.ComboChart(
            document.getElementById('financeiro-grafico')
        );
        grafico.draw(table, {
            title: 'Relatório Financeiro',
            width: 500,
            height: 300,
            seriesType: "area"
        });
    });
}

O mais importante nesse código para quem escrever sistemas aqui no Brasil está nas linhas 15 a 21. Essas linhas mostram como você pode formatar os números para serem exibidos em Real. Mais detalhes sobre a formatação de números pode ser encontrados no próprio site.

Alinhar a direita o conteúdo do NumericTextBox

Hoje fui questionado sobre como alinhar a direita o conteúdo do NumericTextBox da Telerik. Achei a pergunta bastante interessante e resolvi escrever um post com a resposta; embora eu já tenha respondido para a pessoa que me perguntou. Essa solução vale tanto para o NumericTextBox quanto para o CurrencyTextBox e o IntegerTextBox.

CurrencyTextBox

O que a Telerik faz é colocar uma div sobre o input com o valor mascarado. Por esse motivo, não adianta apenas usar o InputHtmlAttributes, teremos também que criar um CSS para alterar o estilo da div. Segue abaixo o código gerado pelo componente NumerikTextBox.

<div class="t-widget t-numerictextbox">
	<div class="t-formatted-value" style="font-family: Arial; font-size: 12px; color: rgb(0, 0, 0); text-align: right; text-decoration: none; text-indent: 0px; text-transform: none; display: block; ">123.123</div>
	<input class="t-input" id="numeric" name="numeric" style="text-align: right; color: rgb(255, 255, 255); ">
</div>

Note que a div que fica sobre o input já possui uma classe associada a ela. A primeira coisa que faremos é acrescentar um código CSS a nossa página que vai alterar essa classe:

<style type="text/css">
    .t-formatted-value { text-align:right; width:125px; }
</style>

Agora vamos alterar o alinhamento do input no próprio componente.

<%: Html.Telerik()
        .NumericTextBox()
        .Name("numeric")
        .Spinners(false)
        .InputHtmlAttributes(new { style = "text-align: right" })%>

Não testei esse código em um ambiente de produção, por isso não sei se isso causará algum efeito colateral nos outros componentes.

Tag <button /> com ASP.NET MVC da Telerik

Se você utiliza os componentes para ASP.NET MVC da Telerik deve ter reparado que ele não possui um componente para botões. Mesmo assim, você pode aproveitar os arquivos de estilo (.css) da Telerik para estilizar os botões da sua página. Dessa forma, fica bem mais fácil manter os padrões dos botões com a mesma aparência do restante dos componentes.

button

O que a Telerik faz pra aplicar o estilo em seus botões é definir as classes t-button e t-state-default, conforme ilustrado a seguir:

<button type="submit" class="t-button t-state-default">Save</button>

O efeito de mouse over é feito através de JavaScript. Se você estiver usando qualquer outro componente da Telerik na mesma página, esse efeito já vai ser aplicado automaticamente. Caso contrário, se você não estiver usando nenhum outro componente, terá que forçar a inserção e execução do script para o efeito de mouseover do botão conforme o exemplo abaixo:

<%: Html.Telerik().ScriptRegistrar()
            .Scripts(x => x.Add("2011.1.315/telerik.common.min.js"))
            .Render() %>

<script type="text/javascript">
    var $t = $.telerik;
    $('.t-button')
        .live('mouseenter', $t.buttonHover)
        .live('mouseleave', $t.buttonLeave);
</script>

Uma outra dica que gostaria de deixar é como inserir esses botões sem ter que escrever HTML toda vez que quiser fazer um link para outra página. Podemos automatizar essa tarefa com a criação de um extension method.

public static MvcHtmlString TelerikLinkButton(this HtmlHelper html, string innerText, 
    string type, string action, string controller, object routeValues)
{
    UrlHelper helper = new UrlHelper(HttpContext.Current.Request.RequestContext);

    string url = helper.Action(action, controller, routeValues);

    TagBuilder builder = new TagBuilder("button");
    builder.Attributes["type"] = type;
    builder.AddCssClass("t-button");
    builder.AddCssClass("t-state-default");
    builder.Attributes["onclick"] = string.Format("location.href='{0}';", url);
    builder.SetInnerText(innerText);

    return new MvcHtmlString(builder.ToString());
}

Esse extension method pode ser usado da seguinte forma:

<%: Html.TelerikLinkButton("Computers", "button", "Index", "Computer", null) %>

Qualquer dúvida, não deixe de deixar um comentário. Um abraço e até a próxima!

BUG no componente NumericTextBox da Telerik para ASP.NET MVC

Não sei se alguém aqui no Brasil está usando o componente NumericTextBox ou CurrencyTextBox da Telerik para ASP.NET MVC, mas essa semana tive um problema com o uso de casas decimais. O bug foi detectado pela equipe de desenvolvimento e eles já prometeram corrigir na próxima versão. Caso você, assim como eu, esteja com esse problema, não precisa esperar sair a próxima versão, pode baixar aqui o arquivo telerik.textbox.min.js e substituir direto na sua aplicação.

NumericTextBox

Se você usa os componentes para ASP.NET MVC da Telerik, não deixe de deixar um comentários (mesmo que anônimo), tenho curiosidade de saber se temos um bom número de usuários aqui no Brasil. Abraço!

Google Charts com ASP.NET MVC

Após procurar algumas soluções de gráficos para incluir em uma aplicação MVC que estou desenvolvendo, usei como principal filtro o ítem simplicidade; então me deparei com a API para geração de gráficos (charts) da Google. Não vou entrar em detalhes (veja o link). Seu funcionamento é, basicamente, fazer uma requisição para uma imagem passando os parâmetros necessários na URL.

Por exemplo: essa URL…

https://chart.googleapis.com/chart?cht=p3&chd=t:60,40&chs=250×100&chl=Hello|World

…gera essa imagem:

Escrever essas URLs manualmente parece bem simples, porém experimente gerar um gráfico semelhante a este logo abaixo usando dados reais vindos de um banco de dados:

Gerar essa URL dinâmicamente não é algo muito amigável. Para facilitar esse trabalho, alguém teve a boa vontade de disponibilizar um wrapper escrito em C# para geração automática dessas URLs através de uma interface super simples.

Para usar essa biblioteca, basta fazer download aqui e adicionar uma referência a DLL ao seu projeto. Agora você já pode usar o “gerador de URL’s” para Google Chart API. Abaixo segue um exemplo de um extension method para geração dessas URLs de forma dinâmica.

public static class ChartHelpers 
{ 
    public static string DynamicChartUrl(this HtmlHelper helper) 
    { 
        BarChart chart = new BarChart(300, 150, BarChartOrientation.Vertical, 
            BarChartStyle.Grouped); 
        chart.SetData(new [] { 190, 1000, 500, 450, 1000, 2000,
                               190, 1000, 500, 450, 1000, 2000}); 
        chart.SetBarWidth(15); 
        return chart.GetUrl(); 
    } 
}

Agora basta adicionar a chamada ao método no código do ASP.NET MVC:

<img alt="Chart" src="@Html.DynamicChartUrl()" />

ps.: A google também possui outra API para geração de gráficos usando flash, bem mais rícos que esses, que apenas geram imagens estáticas. No entanto, ainda não cheguei a olhar seu funcionamento. Mais detalhes podem ser encontrados aqui.

Versão final do ASP.NET MVC

Não sei qual o motivo, mas até agora não vi em nenhum blog o anuncio da nova versão do ASP.NET MVC, acho que estão todos ocupados com o MIX 2009. Mas vamos lá, ontem foi disponibilizado para download a versão 1.0 do ASP.NET MVC. Pronto, anunciei. Pasmem, mas a única alteração foi a atualização da lib do JQuery, fora um bugfix apenas de compatibilidade com o Silverlight. Clique aqui para fazer download.

%d blogueiros gostam disto: