Renderização assíncrona de HTML

Como primeiro guia de código vou tentar demostrar uma funcionalidade simples de exibir uma pagina HTML em uma Metro App. Neste exemplo será citado:

  • XAML Data binding;
  • INotifyPropertyChanged;
  • Async e Await no C# 4.5;
  • Regex;
  • WebView Control;

Brincando de desenhar a tela

Mesmo com pouco conhecimento em XAML é bem fácil a assimilação para quem já tem conhecimento de desenvolvimento para web (html ou silverlight), inicialmente a tela é dividia em uma Grid, no nosso exemplo somente com duas linhas. Na primeira linha separei o titulo do blog apenas para ilustrar e na segunda linha ficara os controles de entrada de texto para receber a URL, um botão para receber o evento de atualizar a pagina e o próprio controle de WebView para exibir a pagina. Desing XAMLCódigo do arquivo XAML:

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="73*"/>
            <RowDefinition Height="311*"/>
        </Grid.RowDefinitions>  
        <TextBlock x:Name="lblTitulo" Grid.Row="0" HorizontalAlignment="Left" Margin="50,50,0,0" VerticalAlignment="Top" Text="Mapa do Metro Blog" FontSize="48"/>
        <TextBlock x:Name="lblTitulo2" Grid.Row="0" HorizontalAlignment="Left" Margin="80,100,0,0" VerticalAlignment="Top" Text="https://mapadometro.wordpress.com/    … Desenvolvimento para Windows Metro User Interface" FontSize="18"/>
        <TextBox x:Name="txtUrl" Grid.Row="1" Margin="10,10,73,0" Text="{Binding Resultado, Mode=TwoWay}" VerticalAlignment="Top" FontSize="20" FontWeight="Bold"/>
        <Button x:Name="btnOK" Grid.Row="1" Content="Go!" HorizontalAlignment="Right" Margin="0,10,10,580" VerticalAlignment="Center" Click="btnOK_Click" Background="White" BorderBrush="#FF2A9EFF" Foreground="Black" Height="32" FontSize="12"/>
        <WebView x:Name="navegadorWebView" Margin="10,54,10,10" Grid.Row="1"/>
    </Grid>

Data Binding

Não seria necessário, porem apenas para introduzir o conceito de Data Binding, que é um meio de ligação da interface (xaml) com os controles no codigo (C#). Essa ligação geralmente é definida pela expressão Binding, no exemplo do controle txtUrl a propriedade Text recebeu um Binding da propriedade Resultado de algum objeto datasource, ate esse momento ainda não especificado. Ainda nesse controle txtUrl foi definido o modo de binding TwoWay, isto é, a atualização dessa propriedade na tela atualiza a propriedade do objeto da mesma forma que qualquer modificação do propriedade no codigo será refletida na tela.

<TextBox x:Name="txtUrl" Grid.Row="1" Margin="10,10,73,0" Text="{Binding Resultado, Mode=TwoWay}" VerticalAlignment="Top" FontSize="20" FontWeight="Bold"/>

Para ligar os objetos no arquivo .xaml.cs criei uma classe Exemplo para falar um pouco sobre a implementação da interface INotifyPropertyChanged, necessária para implementar o binding. Segue abaixo a classe:

    public class Exemplo : INotifyPropertyChanged
    {
        private string _resultado;

        // Declaracao do evento do PropertyChanged.
        public event PropertyChangedEventHandler PropertyChanged;

        // Propriedade que sera a fonte do binding.
        public string Resultado
        {
            get { return _resultado; }
            set
            {
                _resultado = value;

                // Chamada do NotifyPropertyChanged quando o valor é alterado.
                NotifyPropertyChanged("Resultado");
            }
        }

        // Metodo que ira notificar a mudana
        public void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

No método de inicialização será adicionado as linhas abaixo para setar os valores iniciais e o binding do datasource:

        Exemplo exemplo;

        public MainPage()
        {
            this.InitializeComponent();

            exemplo = new Exemplo();
            exemplo.Resultado = "http://";

            txtUrl.DataContext = exemplo;
        }

Requisição da Pagina via HTTP

A ideia é exibir uma pagina Web no controle WeView e existe varias maneiras de conseguir esse resultado, o caminho mais logico seria setar o endereço URI da pagina no controle através da propriedade Source. Por algum motivo neste exemplo vamos primeiro adquirir o conteúdo do html através de um request assíncrono bem simples, a vantagem é que desta forma da a possibilidade de analisar ou incrementar o conteúdo html antes de exibi-lo.

No evento click do botão btnOK será realizado antes de qualquer coisa uma verificação via Expressão regular, que provê uma forma concisa e flexível de identificar cadeias de caracteres de interesse, como caracteres particulares, palavras ou padrões de caracteres. No exemplo usei uma verificação Regex de url bem simples (^http\://[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(/\S*)?$) caso a entrada informada não seja uma url valida, a cor do texto ficará cinza afim de dar um feedback ao usuário, caso a url seja valida o texto receberá a cor verde.

        private async void btnOK_Click(object sender, RoutedEventArgs e)
        {
            // Realiza a validação da URL em Regex
            Match match = Regex.Match(exemplo.Resultado, @"^http\://[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(/\S*)?$", RegexOptions.IgnoreCase);

            // Se foi informado uma url valida
            if (match.Success)
            {
                // Chamada assíncrona
                string result = await RenderizacaoHTML(new Uri(exemplo.Resultado));

                // Seta o conteudo no controle WebView
                navegadorWebView.NavigateToString(result);

                txtUrl.Foreground = new SolidColorBrush(Colors.Green);
            }
            else
            {
                // Apenas muda a cor do texto para Cinza
                txtUrl.Foreground = new SolidColorBrush(Colors.Gray);
            }
        }

Async e Await

No trecho de código anterior note que na declaração do método inicia com “private async …” a keyword async fornece uma indicação ao framework que na execução deste método será potencialmente de longa duração sem bloquear thread da origem que foi invocado. A chamada do método RenderizacaoHTML exige a keyword await, por que este metodo tambem foi declarado como async. O await é um operador aplicado a chamadas assincronas de metodos que suspende a execução do metodo atual ate que o método invocado sejá completada. O método RenderizacaoHTML é bem simples apenas utiliza as classes do System.Net.Http.HttpClient para realizar uma requisição do conteúdo html da url informada.

        // Consulta um endereco http e responde o conteudo em texto
        public async Task<string> RenderizacaoHTML(Uri endereco)
        {
            HttpClient http = new System.Net.Http.HttpClient();
            HttpResponseMessage response = await http.GetAsync(endereco);
            return await response.Content.ReadAsStringAsync();
        }

Final

 

 

Se essa informação foi útil para você, compartilhe no twitter e deixe um comentário.

Gostaria muito do seu feedback para melhor o blog.

Outubro ou Nada para a Microsoft

A Microsoft anunciou a junção dos eventos MIX (web) e BUILD (desktop) em 30 de outubro ate 2 de novembro, de 2012, em Redmond. Em sincronia com o lançamento do Windows 8, Visual Studio 2012, Windows Phone 8, Surface, update do Xbox 360 que ocorrerá dia 26 de outubro. Juntamente no mesmo mês haverá supostamente os anuncios de novos smartphones da Nokia (Lumia 910 e 920) e 20 novos tablets WinRT com chips Intel (Atom Based).

O que nos resta é esperar estudando para estarmos preparados para a era do PC+
Aproveite e veja as apresentações do BUILD e do MIX do ano passado (2011) no Channel9.

MIX: http://channel9.msdn.com/Events/MIX/MIX11
BUILD: http://channel9.msdn.com/events/BUILD/BUILD2011

Fontes:
http://www.buildwindows.com/
http://windowsphonebrasil.com.br/index.php/novos-sugerem-reafirmam-que-a-nokia-apresentara-um-wp8-ja-em-setembro/
http://www.gamesindustry.biz/articles/2012-07-18-intel-expects-20-windows-8-tablets-this-year

Readme

Este post é sobre o objetivo do blog e o publico alvo do mesmo.

O Mapa do Metro é um blog pessoal focado a ser um guia de estudo para o WinRT (Windows 8 Metro Style Apps, vou sempre utilizar a abreviação WinRT para todo o ambiente Metro do Windows 8). Esse blog foi iniciado antes do lançamento oficial do Windows 8, isto é, estou utilizando todas as versões de desenvolvedor (beta/preview) por esse motivo, neste momento, não vou focar em passo-a-passo de instalação de ferramentas.

 

O conteúdo do blog sera bem direto e focado no WinRT então será subentendido que o leitor já tem experiencia em programação em C# e manipulação das ferramentas Visual Studio, Blend, Paint, etc e já está familiarizado com os conceitos da interface Metro UI. A maioria dos posts serão guias diretos a resolver problemas, definições de praticas de uso de controles e componentes ou ate apenas links referenciando outros post de outros blogs interessantes, reservando também a possibilidade de posts de caráter pessoal, opiniões sobre noticias do mundo da tecnologia e assuntos aleatórios de buteco.

Os códigos de exemplos serão retirados do próprio MSDN ( http://msdn.microsoft.com/en-us/library/windows/apps/xaml/BR229566(v=win.10).aspx ) e a pauta dos nossos estudos já previamente definida. Todo código do blog, algum dia, supostamente, estará disponível no Github para facilitar a leitura e testes.

De toda forma segue alguns links de auxilio para iniciantes e boa sorte:

» Windows 8: http://windows.microsoft.com/pt-br/windows-8/release-preview
» Visual Studio 2012 Express RC: http://www.microsoft.com/visualstudio/11/en-us/downloads
» Microsoft Office 2013: http://www.microsoft.com/office/preview/en

… sobre os conceitos da interface Metro, segue uma ótima sequencias de videos sobre o fluxo e diagramação de Apps no Windows 8:

 

First Post!

Ola, meu nome é Gabriel Araujo dos Santos, natural de Parnaíba/Piaui, atualmente residente de Cuiabá/Mato Grosso. Sou Analisa de Sistemas, programador C# desde 2006 (eu acho), já trabalhei em varias áreas entre Windows, Web, etc… desdo inicio do projeto XNA fiquei interessado com a oportunidade de desenvolver jogos, mas depois de brincar um pouco com a ferramenta, logo depois fiquei bem desanimado na falta de oportunidade na época de distribuir meus jogos criados. Sempre fui viciado ligado em jogos desda época do Atari até o fim da era do Super Nintendo, do inicio era Playstation desde então nunca mais tive um console em casa. Atualmente continuo jogando bem pouco no PC (Starcraft 2, League of Legends, Battlefield 3, Diablo 3 e Lineage 2 (mmorpg cujo foi viciado durante alguns anos da minha vida)).

Com a revolução da computação móvel resolvi começar a estudar programação para esses tipos de dispositivos, já publiquei um jogo chamado “Double Jumper” para Windows Phone, depois vou dedicar um post mais aprofundado a essa aventura.

Agora a jornada continua na dedicação a estudar o desenvolvimento para Windows Metro Style, para organizar esse estudos e afim de auxiliar novos desenvolvedores esse blog será dedicado a conceitos e programação para o novo Windows 8.