Silverlight 4 Dica do do Dia #8 Criando um CRUD com MVVM e Silverlight Parte 1 – Retrieve

By rdorta at julho 10, 2010 10:55
Filed Under: Arquitetura, Silverlight, MVVM

Olá,

Uma das coisas que sempre tenho dito em palestras e artigos é que um dos maiores potenciais do Silverlight, se não o maior, é a contrução de aplicações LOB(Line-of-business).

Aplicações deste tipo são aplicações que podem chegar a um grande nível de complexidade dependendo das regras de negócio da empresa que está precisando da aplicação.

Após grandes apelos da comunidade, o Silverlight 4 agora tem suporte a comandos. Isso facilita e muito a implementação de MVVM.

Pensando nisso e atendendo a alguns pedidos de clientes e amigos, vou criar aqui um exemplo sobre como construir um CRUD simples com Silverlight utilizando o padrão de arquitetura MVVM.

Para iniciar, leiam o post que escrevi sobre MVVM para entender um pouco melhor este padrão.

Em nosso exemplo vamos usar a famosa base Northwind, para gerar as operações de CRUD(Create,Retrieve,Update, Delete). Vamos criar um WCF RIA SERVICE baseado em um modelo criado com Entity Framework.

Montando a Solução

Agora no Visual Studio vamos criar um novo projeto com o template Silverlight Businnes Application

Em nosso projeto Silverlight, vamos criar 3 novas pastas, uma para nossas ViewModel,outra para nossos Command e outra para nossas Interfaces.(eu gosto de organizar assim, mas fica a gosto de vocês)

Criando a Model de Dados

Agora vamos criar nosso modelo de dados e o serviço que irá recuperar estes dados.

Para manter o exemplo simples, vamos utilizar apenas a tabela Product da base Northwind.

No projeto Web, na pasta Models, clique com o botão direito depois em Add –> New File.

Na aba Data selecione ADO.Net Entity Data Model.

No Wizard de criação do EF, selecione Generate from Database e crie/escolha sua conexão com a base Northwind

Selecione a tabela de Produto e clique em Finalizar

Temos agora nossa Model de Produtos

Agora, vamos criar o serviço que expõe os dados dessa model.

NESTE PONTO VOCÊ DEVE COMPILAR SUA APLICAÇÃO PARA QUE NOSSO SERVIÇO ENXERGUE NOSSA MODEL.

Novamente no projeto Web, clique com o botão direito na pasta Services e adicione um novo Domain Service Class

No wizard de criação do serviço clique selecione a nossa model de produtos e habilite a edição

Agora temos a nossa classe de serviço:

  

namespace BlogSLMVVM.Web.Services

{

    using System;

    using System.Collections.Generic;

    using System.ComponentModel;

    using System.ComponentModel.DataAnnotations;

    using System.Data;

    using System.Linq;

    using System.ServiceModel.DomainServices.EntityFramework;

    using System.ServiceModel.DomainServices.Hosting;

    using System.ServiceModel.DomainServices.Server;

    using BlogSLMVVM.Web.Models;

  

  

    // Implements application logic using the NorthwindEntities context.

    // TODO: Add your application logic to these methods or in additional methods.

    // TODO: Wire up authentication (Windows/ASP.NET Forms) and uncomment the following to disable anonymous access

    // Also consider adding roles to restrict access as appropriate.

    // [RequiresAuthentication]

    [EnableClientAccess()]

    public class NorthwindService : LinqToEntitiesDomainService<NorthwindEntities>

    {

  

        // TODO:

        // Consider constraining the results of your query method.  If you need additional input you can

        // add parameters to this method or create additional query methods with different names.

        // To support paging you will need to add ordering to the 'Products' query.

        public IQueryable<Product> GetProducts()

        {

            return this.ObjectContext.Products;

        }

  

        public void InsertProduct(Product product)

        {

            if ((product.EntityState != EntityState.Detached))

            {

                this.ObjectContext.ObjectStateManager.ChangeObjectState(product, EntityState.Added);

            }

            else

            {

                this.ObjectContext.Products.AddObject(product);

            }

        }

  

        public void UpdateProduct(Product currentProduct)

        {

            this.ObjectContext.Products.AttachAsModified(currentProduct, this.ChangeSet.GetOriginal(currentProduct));

        }

  

        public void DeleteProduct(Product product)

        {

            if ((product.EntityState == EntityState.Detached))

            {

                this.ObjectContext.Products.Attach(product);

            }

            this.ObjectContext.Products.DeleteObject(product);

        }

    }

}

  



MVVM RLZ – cRud - Retrieve

Agora vamos ao core do negócio, criar as VielModel e os Comandos.

Vamos começar pela interface.

No projeto Silverlight na pasta Views, adicone uma nova Silverlight Page chamada ProductsView.

Compile e abra o projeto no Expression Blend 4 e abra a ProductsView.xaml.

Adicione 3 botões (Novo,Editar e Excluir), 1 BusyIndicator e 1 DataGrid em sua page.

Adicione a seguinte expressão a propriedade ItemsSource da Datagrid : {Binding AllProducts}

Adicione a seguinte expressão a propriedade IsBusy do BusyIndicato : {Binding IsLoading}

Eis o XAML

<navigation:Page 

           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"

           xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" x:Class="BlogSLMVVM.Views.ProductsView"

           mc:Ignorable="d"

           d:DesignWidth="640" d:DesignHeight="480"

           Title="ProductsView Page">

    <Grid x:Name="LayoutRoot">

  

        <sdk:DataGrid x:Name="dtgDados" Margin="43,149,48,22" ItemsSource="{Binding AllProducts}"/>

  

        <toolkit:BusyIndicator x:Name="bsiCarregando" Content="BusyIndicator" Height="32" Margin="52,108,71,0" VerticalAlignment="Top" IsBusy="{Binding IsLoading}"/>

        <Button x:Name="btnNovo" Content="Novo" HorizontalAlignment="Left" Height="27" Margin="52,64,0,0" VerticalAlignment="Top" Width="97"/>

        <Button x:Name="btnEditar" Content="Editar" HorizontalAlignment="Left" Height="27" Margin="165,64,0,0" VerticalAlignment="Top" Width="97"/>

        <Button x:Name="btnExcluir" Content="Excluir" Height="27" Margin="275,64,268,0" VerticalAlignment="Top"/>

  

    </Grid>

</navigation:Page>

Vamos criar o link para nossa nova página.

Abra o arquivo MainPage.xaml, localize o StackPanel chamado LinksStackPanel e adicione um divisor e um link para nossa página:

<Rectangle x:Name="Divider1_Copy" Style="{StaticResource DividerStyle}"/>

            <HyperlinkButton x:Name="Link2_Copy" Style="{StaticResource LinkStyle}" 

                NavigateUri="/ProductsView" TargetName="ContentFrame" Content="Products"/>

Agora vamos criar nossa ViewModel.

No projeto Silverlight, na pasta ViewModel adicione uma nova classe com o nome ProductsViewModel

Abaixo segue o código final da classe, vou comentar os pontos principais mais abaixo.

using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.ComponentModel;

using BlogSLMVVM.Web.Services;

using BlogSLMVVM.Web.Models;

using System.Linq;

using System.ServiceModel.DomainServices.Client;

  

namespace BlogSLMVVM.ViewModel

{

    public class ProductsViewModel : INotifyPropertyChanged

    {

  

        #region Propriedades Privadas

        private NorthwindContext gctxNorthwind = null;

        private bool gIsLoading = false;

        #endregion

  

        #region Propriedades Públicas

        /// <summary>

        ///     Indica se o serviço está ocupado recuperando a listagem

        /// </summary>

        public bool IsLoading

        {

            get { return gIsLoading; }

            set { gIsLoading = value; }

        }

  

        /// <summary>

        ///     Retorna a lista de todos os produtos

        /// </summary>

        public EntitySet<Product> AllProducts

        {

            get { return GetAllProducts(); }

        }

        #endregion

  

        #region Construtor

        public ProductsViewModel()

        {

            gIsLoading = true;

            this.gctxNorthwind = new NorthwindContext();

            this.gctxNorthwind.Load<Product>(

                               this.gctxNorthwind.GetProductsQuery(),

                               delegate(LoadOperation<Product> loadOperation)

                               {

                                   this.IsLoading = false;

                                   RaisePropertyChanged("IsLoading");

                               }, null);

        }

        #endregion

  

        #region Chamadas do Serviço

        /// <summary>

        ///     Chamada para os produtos

        /// </summary>

        /// <returns></returns>

        private EntitySet<Product> GetAllProducts()

        {

            return this.gctxNorthwind.Products;

        }

        #endregion

  

  

        #region INotifyPropertyChanged Members

  

        public event PropertyChangedEventHandler PropertyChanged;

  

        private void RaisePropertyChanged(string propertyname)

        {

            if (PropertyChanged != null)

            {

                PropertyChanged(this, new PropertyChangedEventArgs(propertyname));

            }

        }

  

        #endregion

    }

}

A primeira coisa é reparar que a classe está implementando a interface INotifyPropertyChanged. Estamos fazendo isso para que a view entenda que houve uma alteração e que ela deve se atualizar.

Em nosso construtor, estamos inicializando o serviço que criamos anteriormente e carregando os Produtos, note que estamos utilizando a propriedade IsLoading para manter a view informada de que o serviço está em execução.

Por fim temos a propriedade AllProducts que retorna a lista de produtos carregada pelo serviço.

Agora vamos ao código da nossa view:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Windows.Navigation;

using BlogSLMVVM.ViewModel;

  

namespace BlogSLMVVM.Views

{

    public partial class ProductsView : Page

    {

  

        private ProductsViewModel vmdProduto = null;

  

        public ProductsView()

        {

            InitializeComponent();

            this.vmdProduto = new ProductsViewModel();

            this.DataContext = this.vmdProduto;

        }

  

        // Executes when the user navigates to this page.

        protected override void OnNavigatedTo(NavigationEventArgs e)

        {

        }

  

    }

}

Bem simples, apenas instanciamos a nossa ViewModel e a indicamos como contexto da View.

Pronto!!!

Já estamos com a nossa listagem :)

Eis o fonte utilizado até aqui:

BlogSLMVVM - Parte 1.zip (4,77 mb)

Em breve o próximo post com introdução aos Commands, as outras letras do CRUD e o código fonte final :)

Silverlight 4 Dica do do Dia #8 Criando um CRUD com MVVM e Silverlight Parte 2 – Commands e Insert/Update/Delete

6c1f543f-bc2d-4ca8-9e92-0a85f36b7115|1|5.0

Tags: silverlight, silverlight 4, mvvm, dica do dia, crud, codigo, ria services, domain service, blend

Comentários (6) E-mail Kick it! DZone it! del.icio.us Permalink Post RSS

Silverlight 4 Dica do Dia #7 – Pivot Viewer Basics

By rdorta at julho 01, 2010 18:08
Filed Under: Silverlight

Após mais uma excelente twitada e blogada do Rene de Paula – User Experience Evangelist da Microsoft, conferi o lançamento do Pivot Viewer.

O assunto é bem extenso, vou criar uma série de posts em breve para detalhar um pouco melhor o controle. Neste post vou apenas mostar o que consegui fazer em algumas horas com alguns conhecimentos que eu já tinha.

Inicialmente alguns testes e esse exemplo básico abaixo, buscando as pessoas que você segue em seu twitter :p Os code snippets estão abaixo assim como o fonte.

De início vocês irão ver que eu estou seguindo no Twitter, mas caso queiram, é só digitar o usuário de vocês e aguardar ele gerar o Deep Zoom(pode demorar um pouco dependendo de quantas pessoas você segue)

O Pivot Viewer é um controle que permite ao desenvolvedor disponibilizar GRANDES (mas grandes MESMO) quantidades de informações de uma só vez e também visualizar a conexão entre elas.

O controle Pivot exibe “coleções” de informações, utilizando DEEP ZOOM em sua máxima performance.

Mais informações sobre o Pivot Viewer você encontra em:

http://www.getpivot.com/

E para baixar as assemblys vá em http://www.getpivot.com/download/

Vamos criar um exemplo de Pivot Viewer com essas assemblys.

Outro SDK que vamos utilizar neste exemplo é o http://linqtotwitter.codeplex.com/

Este é um excelente SDK para comunicação com o Twitter. Não pretendo me alongar demais sobre o Deep Zoom Dinamico e o LINQ to Twitter neste post. Talvez em outro post caso queriam, me peçam no Twitter

Enfim, vamos começar.

Após baixar e instalar o Pivot, as assemblys vão estar disponíveis no diretório de SDKS da Microsoft, no meu caso (Windows 7 x64) estão em:

C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\PivotViewer\Jun10\Bin

Vamos criar um projeto Silverlight com um Pivot Viewer que leia uma coleção básica. Nos próximos posts vamos melhorar um pouco a aplicação colocando alguns filtros mais legais. (Deem sugestões de filtros de Twitter para nossa aplicação no Twitter)

Adicione as referências do Pivot Viewer no seu projeto Silverlight:

Vamos adicionar o controle Pivot em nosso XAML. E também um textbox para obter o id do twitter de nosso usuário e um TextBlock para informar que o serviço de DeepZoom está sendo executado.

<UserControl x:Class="SLPivotViewer.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    xmlns:local="clr-namespace:System.Windows.Pivot;assembly=System.Windows.Pivot"

    d:DesignHeight="300" d:DesignWidth="400">

  

    <Grid x:Name="LayoutRoot" Background="White" >

r: black; font-size: 8pt; overflow: visible; border-style: none; padding: 0px;">  11:  

        <Grid Grid.Row="0" Grid.Column="0">

            <StackPanel Orientation="Horizontal"  Height="30" VerticalAlignment="Top">

                <TextBlock Text="Digite o seu usuário do twitter:"></TextBlock>

                <TextBox x:Name="txtUser" Width="200"></TextBox>

                <Button x:Name="btnBuscar" Content="Buscar" Click="btnBuscar_Click"></Button>

            </StackPanel>

            <TextBlock x:Name="txbAguarde" Text="Aguarde, o DeepZoom de amigos está sendo gerado" Height="18" Visibility="Collapsed" VerticalAlignment="Top" Margin="0,34,0,0"/>

        </Grid>

        <Grid Grid.Column="0" Margin="0,65,0,0" d:LayoutOverrides="GridBox">

           <local:PivotViewer x:Name="pvtViewer"></local:PivotViewer>

        </Grid>

  

    </Grid>

</UserControl>

Antes de mais nada é interessante que você leia o post que fiz ano passado sobre como criar coleções DEEP ZOOM Dinamicamente:

Deep Zoom Dinamico

Agora em nosso projeto Web, vamos adicionar um serviço Domain Service que irá gerar as imagens do DeepZoom caso as mesmas não existam, aqui vamos usar o Linq to Twitter e o Deep Zoom Dinamico

  

namespace SLPivotViewer.Web.Services

{

    using System;

    using System.Collections.Generic;

    using System.ComponentModel;

    using System.ComponentModel.DataAnnotations;

    using System.Linq;

    using System.ServiceModel.DomainServices.Hosting;

    using System.ServiceModel.DomainServices.Server;

    using LinqToTwitter;

    using System.IO;

    using System.Web;

    using System.Xml.Linq;

    using Microsoft.DeepZoomTools;

    using System.Security.Principal;

    using System.Net;

  

    [EnableClientAccess()]

    public class TwitterService : DomainService

    {

  

        [Invoke]

        public void GenerateUsersCollection(string pstrUserName)

        {

            //LOGANDO OS PASSOS

            StreamWriter writer = new StreamWriter(HttpContext.Current.Server.MapPath("~/log.txt"));

            try

            {

                //GARANTINDO A EXISTENCIA DOS DIRETORIOS

                if (!File.Exists(HttpContext.Current.Server.MapPath("~/Collections/" + pstrUserName + ".cxml")))

                {

                    writer.Write("INICIO - CRIAR DIRETORIOS");

                    if (!Directory.Exists(HttpContext.Current.Server.MapPath("~/Collections/")))

                    {

                        Directory.CreateDirectory(HttpContext.Current.Server.MapPath("~/Collections/"));

                    }

  

                    if (!Directory.Exists(HttpContext.Current.Server.MapPath("~/imgs/")))

                    {

                        Directory.CreateDirectory(HttpContext.Current.Server.MapPath("~/imgs/"));

                    }

  

                    if (!Directory.Exists(HttpContext.Current.Server.MapPath("~/Collections/")))

                    {

                        Directory.CreateDirectory(HttpContext.Current.Server.MapPath("~/Collections/"));

                    }

  

                    if (!Directory.Exists(HttpContext.Current.Server.MapPath("~/ClientBin/")))

                    {

                        Directory.CreateDirectory(HttpContext.Current.Server.MapPath("~/ClientBin/"));

                    }

  

                    if (!Directory.Exists(HttpContext.Current.Server.MapPath("~/ClientBin/" + pstrUserName + "/")))

                    {

                        Directory.CreateDirectory(HttpContext.Current.Server.MapPath("~/ClientBin/" + pstrUserName + "/"));

                    }

  

                    if (!Directory.Exists(HttpContext.Current.Server.MapPath("~/ClientBin/" + pstrUserName + "/GeneratedImages/")))

                    {

                        Directory.CreateDirectory(HttpContext.Current.Server.MapPath("~/ClientBin/" + pstrUserName + "/GeneratedImages/"));

                    }

  

                    if (!Directory.Exists(HttpContext.Current.Server.MapPath("~/ClientBin/" + pstrUserName + "/GeneratedImages/output_images/")))

                    {

                        Directory.CreateDirectory(HttpContext.Current.Server.MapPath("~/ClientBin/" + pstrUserName + "/GeneratedImages/output_images/"));

                    }

  

  

                    writer.Write("FIM - CRIAR DIRETORIOS");

  

                    writer.Write("INICIO - CONEXAO TWITTER");

  

                    //INICIANDO A CONSULTA A API DO TWITTER

                    TwitterContext twitterCtx = new TwitterContext();

                    //CARREGANDO OS USUARIOS QUE ESTÃO SENDO SEGUIDOS PELO USUARIO DA APLICAÇÃO

                    var users =

                        from tweet in twitterCtx.User

                        where tweet.Type == UserType.Friends &&

                              tweet.ID == pstrUserName

                        select tweet;

  

  

                    writer.Write("FIM - CONEXAO TWITTER");

                    //CRIAÇÃO DO DEEP ZOOM

                    List<string> lstXMLs = new List<string>();

  

                    string strCaminhoImagensGeradas = HttpContext.Current.Server.MapPath("/Collections/" + pstrUserName + "/GeneratedImages/");

  

                    writer.Write("INICIO - CRIAR DEEP ZOOM");

                    CollectionCreator cc = new CollectionCreator();

  

                    //CRIAÇÃO DO XML DA COLEÇÃO

                    XDocument doc = new XDocument();

                    XElement elCollection = new XElement("Collection");

                    XElement elFacetCateogies = new XElement("FacetCategories");

                    XElement facet = new XElement("FacetCategory");

                    XElement elItems = new XElement("Items");

                    XAttribute at = new XAttribute("Name", "Teste");

                    XAttribute at2 = new XAttribute("Type", "String");

                    facet.Add(at);

                    facet.Add(at2);

                    elFacetCateogies.Add(facet);

                    elCollection.Add(elFacetCateogies);

  

                    //ADICIONANDO OS NÓS DAS IMAGENS

                    int intContador = 0;

                    foreach (User objUser in users)

                    {

                        XElement elItem = new XElement("Item");

                        writer.Write("    INICIO - CRIAR IMAGEM");

                        ImageCreator ic = new ImageCreator();

                        ic.TileSize = 256;

                        ic.TileFormat = ImageFormat.AutoSelect;

                        ic.ImageQuality = 1;

                        string target = strCaminhoImagensGeradas + "output_images\\" + intContador;

  

                        if (!File.Exists(HttpContext.Current.Server.MapPath("~/imgs/" + objUser.Identifier.ScreenName + ".jpg")))

                        {

                            WebClient client = new WebClient();

                            client.DownloadFile(objUser.ProfileImageUrl, HttpContext.Current.Server.MapPath("~/imgs/" + objUser.Identifier.ScreenName + ".jpg"));

                        }

  

                        ic.Create(HttpContext.Current.Server.MapPath("~/imgs/" + objUser.Identifier.ScreenName + ".jpg"), target);

                        writer.Write("    FIM - CRIAR IMAGEM");

                        lstXMLs.Add(Path.ChangeExtension(target, ".xml"));

                        elItem.Add(new XAttribute("Img", "#" + intContador.ToString()));

                        elItem.Add(new XAttribute("Id", intContador.ToString()));

                        elItem.Add(new XAttribute("Href", "http://www.twitter.com/" + objUser.Identifier.ScreenName));

                        elItem.Add(new XAttribute("Name", objUser.Name));

                        elItems.Add(elItem);

                        intContador++;

                    }

  

                    cc.TileSize = 256;

  

                    cc.TileFormat = ImageFormat.Jpg;

  

                    cc.MaxLevel = 8;

  

                    cc.ImageQuality = 1;

  

                    cc.Create(lstXMLs, strCaminhoImagensGeradas + "output");

                    writer.Write("FIM - CRIAR DEEPZOOM");

                    elItems.Add(new XAttribute("ImgBase", pstrUserName + @"\GeneratedImages\output.xml"));

                    elCollection.Add(elItems);

                    doc.Add(elCollection);

                    string strFinal = doc.ToString();

                    strFinal = strFinal.Replace("<Collection>", "<Collection xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" SchemaVersion=\"1\" xmlns:d1p1=\"http://schemas.microsoft.com/livelabs/pivot/collection/2009\" xmlns=\"http://schemas.microsoft.com/collection/metadata/2009\">");

                    StreamWriter final = new StreamWriter(HttpContext.Current.Server.MapPath("~/Collections/" + pstrUserName + ".cxml"));

                    final.Write(strFinal);

                    final.Close();

                }

            }

            catch (Exception ex)

            {

                writer.Write(ex.Message);

            }

            finally

            {

                writer.Close();

            }

        }

  

  

    }

}

  



O código está bem comentado, mas basicamente o que fiz foi utilizar o meu artigo de Deep Zoom Dinamico e os exemplos básicos do LINQ To Twitter.

Por fim, basta apenas chamar o serviço e passar a coleção para o Pivot Viewer

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using SLPivotViewer.Web.Services;

using System.ServiceModel.DomainServices.Client;

using System.Windows.Pivot;

  

namespace SLPivotViewer

{

    public partial class MainPage : UserControl

    {

        public MainPage()

        {

            InitializeComponent();

            //Carregando a coleção do Dorta

            this.pvtViewer.LoadCollection("http://localhost:19227//Collections/dortaway.cxml", string.Empty);

        }

  

        InvokeOperation opeListagem = null;

        void btnBuscar_Click(object sender, RoutedEventArgs e)

        {

            //Instanciando o serviço que irá gerar o coleção

            TwitterContext ctx = new TwitterContext();

            //executando o método

            opeListagem = ctx.GenerateUsersCollection(this.txtUser.Text);

            //atribuindo o método que será disparado quando o serviço completar

            opeListagem.Completed += opeListagem_Completed;

            //avisando o usuário que o serviço está em execução

            txbAguarde.Visibility = System.Windows.Visibility.Visible;

        }

  

        void pvtViewer_CollectionLoadingFailed(object sender, CollectionErrorEventArgs e)

        {

            //em caso de erro vamos avisar o usuário

            MessageBox.Show(e.Exception.Message);

        }

  

        void opeListagem_Completed(object sender, EventArgs e)

        {

            if (opeListagem.HasError)

            {

                //em caso de erro vamos avisar o usuário

                MessageBox.Show(opeListagem.Error.Message);

                opeListagem.MarkErrorAsHandled();

            }

            else

            {

                //vamos carregar a coleção

                txbAguarde.Visibility = System.Windows.Visibility.Collapsed;

                this.pvtViewer.LoadCollection("http://localhost:19227/Collections/" + this.txtUser.Text + ".cxml", string.Empty);

                this.pvtViewer.CollectionLoadingFailed += new EventHandler<CollectionErrorEventArgs>(pvtViewer_CollectionLoadingFailed);

            }

            

        }

    }

}

Abaixo segue o fonte que usei. Bom divertimento :)

SLPivotViewer.zip (13,83 mb)

[]´s

39b2dcef-1548-4ee2-a841-73bbaba09f59|0|.0

Tags: silverlight, silverlight 4, dica do dia, pivot viewer, twitter

Comentários (2) E-mail Kick it! DZone it! del.icio.us Permalink Post RSS

Silverlight 4 Dica do Dia #6 – Mapas do BING Maps no Silverlight

By rdorta at junho 25, 2010 15:46
Filed Under: Arquitetura, Silverlight

Olá,

Estive trabalhando em uma prova de conceito para um cliente da Makesys, que envolve a utilização de Bing Maps, e resolvi compartilhar com vocês como fazer para utilizar o controle de Mapas do Bing Maps.

Vamos criar uma aplicação que contenha o controle de mapas e que adicione Pins a medida que o usuário clica no mapa.

Para começar, acesse o site do Bing Maps destinado a Devs e de uma olhada em todas as opções, em nosso exemplo vamos utilizar o controle Silverlight e o SOAP Services:

http://www.microsoft.com/maps/developers/

Depois acesse o site portal do Bing Maps, para criar o seu token de desenvolvimento, você irá precisar do seu Windows Live Id:

https://www.bingmapsportal.com/

Baixe as assemblys do controle Silverlight aqui:

http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=beb29d27-6f0c-494f-b028-1e0e3187e830

Crie um projeto do tipo Silverlight Application, Conforme mostra a figura abaixo:

Gere a solução e adicione as referências para as dlls do Bing Maps que no meu caso (Windows 7 64 bits) se encontram em:

C:\Program Files (x86)\Bing Maps Silverlight Control\V1\Libraries

Agora clique no botão Salvar Tudo. E vamos para o Expression Blend 4. Abra sua solução.

Abra a MainPage.xaml e clique no botão de procura de controles, navegue até a dll Microsoft.Maps.MapControl.dll e você verá os controles abaixo:

Vamos utilizar o controle map. Selecione o mesmo e adicione em sua MainPage

De um nome ao controle e adicione um handler ao evento MouseClick:

(IMPORTANTE!!!!)Agora, adicione a chave de registro que você obteve no primeiro passo, ficará algo assim:

   1: <Microsoft_Maps_MapControl:Map CredentialsProvider="SEUTOKENDEAPLICACAOAQUI" x:Name="mapMapa" d:LayoutOverrides="Width, Height" MouseClick="mapMapa_MouseClick"/>

De volta ao Visual Studio, eis o código final comentado:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Maps.MapControl;

  

namespace BlogBingMaps

{

    public partial class MainPage : UserControl

    {

        public MainPage()

        {

            InitializeComponent();

        }

  

        private void mapMapa_MouseClick(object sender, Microsoft.Maps.MapControl.MapMouseEventArgs e)

        {

            //Criando o pin

            Pushpin pspPin = new Pushpin();

            //Obtendo a localização com latitude e longitude do ponto em que o usuário clicou

            pspPin.Location = mapMapa.ViewportPointToLocation(e.ViewportPoint);

            //Adicionando o pin ao mapa

            mapMapa.Children.Add(pspPin);

        }

    }

}

Perfeito!!!

Já temos uma aplicação em Silverlight com integração ao Bing Maps.

Para deixar a coisa mais interessante, vamos mostrar o endereço da Microsoft em SP como visualização inicial, utilizando o SOAP Service para obter o código geográfico(latitude e longitude) através do endereço:

Adicione um Service Reference ao seu projeto para o endereço:

http://dev.virtualearth.net/webservices/v1/geocodeservice/geocodeservice.svc?wsdl

Vamos nomear o serviço como GeocodeService:

Adicone o import para o namespace do serviço:

   1: using BlogBingMaps.GeocodeService;

Abaixo segue o código completo comentado:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Maps.MapControl;

using Microsoft.Maps.MapControl.Core;

using BlogBingMaps.GeocodeService;

  

namespace BlogBingMaps

{

    public partial class MainPage : UserControl

    {

        public MainPage()

        {

            InitializeComponent();

  

            //cria a instancia do serviço

            GeocodeServiceClient cliServico = new GeocodeServiceClient();

            //dimensiona a chave de desenvolvimento

            string strChave = "SUA CHAVE AQUI";

            //cria o objeto de request

            GeocodeRequest reqGeoRequest = new GeocodeRequest();

            // cria as credenciais

            reqGeoRequest.Credentials = new Credentials();

            reqGeoRequest.Credentials.ApplicationId = strChave;

  

            //endereço que queremos buscar

            string strEndereco = "Av Das Nacoes Unidas, 12901, São Paulo";

            reqGeoRequest.Query = strEndereco;

  

            //adicina handler para o completed

            cliServico.GeocodeCompleted += new EventHandler<GeocodeCompletedEventArgs>(cliServico_GeocodeCompleted);

            cliServico.GeocodeAsync(reqGeoRequest);

        }

  

        void cliServico_GeocodeCompleted(object sender, GeocodeCompletedEventArgs e)

        {

            GeocodeResponse resResultado = e.Result;

            //define a latitude, longitude e fator de zoom da visualização

            mapMapa.SetView(new Location(resResultado.Results[0].Locations[0].Latitude, resResultado.Results[0].Locations[0].Longitude), 14);

        }

  

        private void mapMapa_MouseClick(object sender, Microsoft.Maps.MapControl.MapMouseEventArgs e)

        {

            //Criando o pin

            Pushpin pspPin = new Pushpin();

            //Obtendo a localização com latitude e longitude do ponto em que o usuário clicou

            pspPin.Location = mapMapa.ViewportPointToLocation(e.ViewportPoint);

            //Adicionando o pin ao mapa

            mapMapa.Children.Add(pspPin);

        }

    }

}

Por fim, no arquivo ServiceReferences.config, remova o endpoint binaryhttp:

<configuration>

    <system.serviceModel>

        <bindings>

            <basicHttpBinding>

                <binding name="BasicHttpBinding_IGeocodeService" maxBufferSize="2147483647"

                    maxReceivedMessageSize="2147483647">

                    <security mode="None" />

                </binding>

            </basicHttpBinding>

            <customBinding>

                <binding name="CustomBinding_IGeocodeService">

                    <binaryMessageEncoding />

                    <httpTransport maxReceivedMessageSize="2147483647" maxBufferSize="2147483647" />

                </binding>

            </customBinding>

        </bindings>

        <client>

            <endpoint address="http://dev.virtualearth.net/webservices/v1/geocodeservice/GeocodeService.svc"

                binding="basicHttpBinding" bindingConfiguration="BasicHttpBinding_IGeocodeService"

                contract="GeocodeService.IGeocodeService" name="BasicHttpBinding_IGeocodeService" />

        </client>

    </system.serviceModel>

</configuration>

Espero que gostem, abaixo o silvelright final e o fonte :)

Até a próxima

BlogBingMaps.zip (661,48 kb)

5c8e27a2-8f1e-4001-9cb7-11e0cc466526|0|.0

Tags: silverlight, silverlight 4, dica do dia, bing, maps

Comentários (0) E-mail Kick it! DZone it! del.icio.us Permalink Post RSS

Silverlight 4 Dica do Dia #5 - Realidade Aumentada – YES WE CAN!!!

By rdorta at junho 21, 2010 16:43
Filed Under: Arquitetura, Silverlight

Após meu último post, sobre integração com WebCam recebi muitas perguntas referentes a Realidade Aumentada.

Portanto, resolvi escrever este post sobre o assunto como forma de iniciar as pessoas que querem aprender mais sobre o assunto.

Sugiro que quem ainda não leu meu último post, que comece por ele, porque neste post vou assumir que você já sabe como capturar as imagens vindas da sua WebCam.

Depois de ler o post anterior, imprima a imagem abaixo:

Essa imagem é a que vamos identificar dentro da nossa aplicação.

Bom, partindo do programa gerado no último post, temos uma aplicação que captura os dados da webcam e exibe na tela.

Vamos utilizar o SLARToolkit, como nosso framework de identificação de padrão de imagem e substituição.

Adicione as referências das 2 dlls do toolkit no projeto.

Agora baixe o arquivo Pattern que representa a imagem acima: http://blogs.makesys.com.br/dorta/makesys.pat. Adicione ela ao projeto, clique em cima dela, vá até a aba propriedades e troque a sua Build Action para Resource.

Adicione o pattern no projeto.

Agora, a partir do projeto que criamos no meu último post, vamos adicionar um canvas após o Rectangle que serviu como ViewPort, dentro deste canvas, vou adicionar uma imagem, mas pode ser adicionado qualquer outro objeto Silverlight, eis o XAML completo:

<UserControl x:Class="SLRealidadeAumentada.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    d:DesignHeight="550" d:DesignWidth="700"

    Loaded="UserControl_Loaded">

  

    <Grid x:Name="LayoutRoot" Background="White">

        <StackPanel>

            <Grid Width="640" Height="480">

                <Rectangle Name="Viewport" Stroke="Black" StrokeThickness="2" />

                <Canvas>

                    <Grid Background="White" x:Name="imgMakesys" Visibility="Collapsed"  >

                        <Image Source="logo_makesys.png" Height="91" Width="261"/>

                    </Grid>

                </Canvas>

            </Grid>

            <Button Content="IniciarCaptura" HorizontalAlignment="Center" Click="Button_Click" />

        </StackPanel>

    </Grid>

</UserControl>

Abaixo o código final:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

">  10: using System.Windows.Media.Animation;

using System.Windows.Shapes;

using SLARToolKit;

using System.Windows.Media.Media3D;

  

namespace SLRealidadeAumentada

{

    public partial class MainPage : UserControl

    {

  

        CaptureSource cpsVideo;

        CaptureSourceMarkerDetector cmkDetectorPattern;

  

        public MainPage()

        {

            InitializeComponent();

        }

  

        private void UserControl_Loaded(object sender, RoutedEventArgs e)

        {

            // Instancia o objeto que manipula a WebCam

            cpsVideo = new CaptureSource();

            // Define qual webcam será o alvo do objeto, no caso a câmera padrão do Sistema

            cpsVideo.VideoCaptureDevice = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice();

  

            //Cria o objeto que recebe os dados do video

            var vbsVideo = new VideoBrush();

            vbsVideo.SetSource(cpsVideo);

            // Preenche o retangulo com os dados capturados do video

            Viewport.Fill = vbsVideo;

  

            //  Initialize the o detector

            cmkDetectorPattern = new CaptureSourceMarkerDetector();

            // Carrega o pattern que deve ser procurado, ele tem 64 segmentos e 80 milimetros de 

            var patPattern = Marker.LoadFromResource("makesys.pat", 64, 64, 80);

            // Cria a parspectiva com planos de 1 a 4000

            cmkDetectorPattern.Initialize(cpsVideo, 1, 4000, patPattern);

  

            // Vincula o handler de captura do pattern

            // O evento é disparado se pelo menos um pattern é identificado na imagem

            cmkDetectorPattern.MarkersDetected += (senderDelegate, eDelegate) =>

            {

                // Cria uma nova tread para manipular a projeção do objeto que está no canvas

                Dispatcher.BeginInvoke(() =>

                {

                    // Calcula a matrix de projeção

                    var dreResultado = eDelegate.DetectionResults;

                    if (dreResultado.HasResults)

                    {

                        // Centro do Objeto

                        Matrix3D mtdCentro = Matrix3DFactory.CreateTranslation(-imgMakesys.ActualWidth * 0.5, -imgMakesys.ActualHeight * 0.5, 0);

                        // Troca o eixo Y e diminui a escala pela metade

                        Matrix3D mtdEscala = Matrix3DFactory.CreateScale(0.5, -0.5, 0.5);

                        // Calcula a matriz final de transformação baseada no ponto centro original

                        Matrix3D mtdFinal = mtdCentro * mtdEscala * dreResultado[0].Transformation;

  

                        // Calcula a projeção utilizando o SLARToolkit

                        Matrix3D mtdViewPort = Matrix3DFactory.CreateViewportTransformation(Viewport.ActualWidth, Viewport.ActualHeight);

                        Matrix3D mtdProjecao = Matrix3DFactory.CreateViewportProjection(mtdFinal, Matrix3D.Identity, cmkDetectorPattern.Projection, mtdViewPort);

  

                        // Aplicaca a transformação 3D ao objeto final

                        imgMakesys.Projection = new Matrix3DProjection { ProjectionMatrix = mtdProjecao };

                        imgMakesys.Visibility = Visibility.Visible;

                    }

                });

            };

        }

  

        private void Button_Click(object sender, RoutedEventArgs e)

        {

            // Efetua a requisição de acesso a WebCam

            if (CaptureDeviceConfiguration.RequestDeviceAccess())

            {

                cpsVideo.Start();

            }

        }

    }

}

Deixei o código bem comentado, note que estamos utilizando o objeto Matrix3D para adicionar uma projeção ao nosso grid que contém a imagem.

A grande mágica na realidade é realizada pelo SLARToolkit que identifica a imagem e dispara o delegate que criamos na linha 50.

Notem também que estamos utilizando Multi-Threading para renderizar a projeção, isso evita que a aplicação trave com o processamento.

Abaixo uma imagem minha(galã!!!) utilizando o código acima.

Agora o código final para você brincarem :)

Segue o fonte: SLRealidadeAumentada.zip (618,51 kb)

Até a próxima

558034e6-f9ec-45a0-a080-0c26e9a19719|0|.0

Tags: dica do dia, silverlight, realidade aumentada, yes we can, design, silverlight 4

Comentários (2) E-mail Kick it! DZone it! del.icio.us Permalink Post RSS

Silverlight 4 Dica do dia #3 – Validação de campos

By rdorta at junho 15, 2010 14:13
Filed Under: Silverlight

Olá,

Um dos grandes recursos do Silverlight 4 é a atualização de campos através de atualização de bindings.

Vamos pensar em um sistema em Silverlight que contém uma classe de transporte(DTO), com duas propriedades: Nome do Servidor e IP do Servidor:

        1: public class Servidor

       2:     {

       3:  

       4:  

       5:         [Required(ErrorMessage = "Preencha o nome do servidor")]

       6:         public string Nome { get; set; }

       7:         [Required(ErrorMessage = "Preencha o ip do servidor")]

       8:         [RegularExpression(@"^([1-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])(\.([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])){3}$",ErrorMessage="Formato de IP inválido.")]

       9:         public string IP { get; set; }

      10: }

Notem que estou usando nessa classe alguns atributos para as propriedades que podem ser encontradas na assembly System.ComponentModel.DataAnnotations.

Required: Esse atributo indica que este campo é de preenchimento obrigatório
RegularExpression: Esse atributo indica que o conteúdo da propriedade deve seguir uma formação indica pela expressão regular.

Além dessa classe, temos em nosso XAML 2 campos textbox:

       1: <TextBox x:Name="txtNome" TextWrapping="Wrap" Text="{Binding Nome, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnExceptions=True}"/>

       2: <TextBox x:Name="txtIp" TextWrapping="Wrap" Text="{Binding IP, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnExceptions=True}"/>

O interessante aí está no valor que estamos atribuindo a propriedade Text dos Texbox, vou explicar elemento a elemento:

Binding: usando esta referencia estou indicando que o texto do textbox deve ser preenchido pela propriedade nome do objeto que estiver sendo usado como DataContext do textbox. Como o textbox em si não contém nenhum DataContext, a propria engine tenta encontrar essa propriedade no DataContext do controle acima e assim sucessivamente.
Mode: Esta propriedade indica em qual direção as atualizações devem ser executadas, nesse caso TwoWay indica que caso eu altere o texto do textbox eu devo automaticamente alterar o texto da propriedade Nome que está no DataContext e vice-versa.
NotifyOnValidationError: Este cara indica se, caso ocorra um erro de validação, o usuário deve ser avisado através da aplicação do estado de erro no campo, como estamos setando esse valor para TRUE, caso o formato de ip digitado esteja incorreto o campo ficará assim:

Note que a mensagem exibida é a que setamos no atributo RegularExpression – ErrorMessage em nossa classe de transporte(DTO):
[RegularExpression(@"^([1-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])(\.([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])){3}$",ErrorMessage="Formato de IP inválido.")]
ValidatesOnExceptions: Esta propriedade indica que quando um usuário efetua uma alteração na propriedade Text do campo, os procedimentos de validação com a classe que está preenchendo o DataContext devem ser executados.

Agora vamos apenas popular o DataContext do nosso controle com a uma instancia da nossa classe de transporte:

       1: public CRUDServidor()

       2: {

       3:     this.DataContext = new Model.Servidor();

       4: }

Pronto!!!

Agora em toda a digitação que o usuário fizer nas caixas de texto, os bindings serão validados.

Por último basta apenas revalidar esses bindings antes de executar alguma ação, utilizando a classe Validator que também pode ser encontrada no namespace System.ComponentModel.DataAnnotations:

       1: private void btnSalvar_Click(object sender, RoutedEventArgs e)

       2: {

       3:     try

       4:     {

       5:         Validator.ValidateObject(this.DataContext, new ValidationContext(this.DataContext, null, null));

       6:         //Salvar as alterações

       7:     }

       8:     catch

       9:     {

      10:         BindingExpression bneNome = txtNome.GetBindingExpression(TextBox.TextProperty);

      11:         bneNome.UpdateSource();

      12:         BindingExpression bneIP = txtIpRoteador.GetBindingExpression(TextBox.TextProperty);

      13:         bneIP.UpdateSource();

      14:     }

      15: }

67cdd30d-1ead-47e0-b838-d0b031b5e64d|0|.0

Tags: silverlight 4, dica do dia, validação

Comentários (1) E-mail Kick it! DZone it! del.icio.us Permalink Post RSS

Grande novidade do PDC - Silverlight 4

By rdorta at novembro 19, 2009 13:59
Filed Under: Arquitetura, Silverlight

Olá amigos,

Mais uma vez a Microsoft se supera no PDC 2009. Quem quiser um acompanhamento técnico legal do PDC 2009, sugiro o blog do Waldemir Cambiucci (ver no meu blogroll).

Agora falando sobre o que mais me interessa, Silverlight 4 vem aí e com features que eu sempre dizia que faltavam ao Silvelright quando comparado ao Flash. Ou seja… Flash Down…

Vamos direto ao link e depois vou comentar

http://silverlight.net/getstarted/silverlight-4-beta/

Primeiro ponto legal, a utilização do Visual Studio 2010.

Vamos aos Tools:

Silverlight 4 Beta Tools for Visual Studio 2010

Segundo ponto legal:

Blend for .Net 4

http://www.microsoft.com/downloads/details.aspx?FamilyID=6806e466-dd25-482b-a9b3-3f93d2599699&displaylang=en

A Documentação:

Online Silverlight 4 Beta Documentation

E agora minha visão sobre as novas features:

Impressão direta do Silverlight – YES WE CAN!!! muito bom!!!
Inclusão de um RichTextbox para exibição de HTML – Outra feature que fazia falta… Muito bom
DataGrid com Sort e Resize e Copy e Paste de linhas.
RIA Services
Melhorias no sistema de Out-of Browser.
Integração com periféricos: leitor de códigos de barra, webcam e outros..

Vou realziar alguns testes com a ferramenta em breve e posto mais comentários´

Até a próxima arqinovação.

1bd5f9d8-2e63-4721-b784-44d3f85d7c8d|2|3.0

Tags: silverlight 4, arquitetura, inovação

Comentários (8) E-mail Kick it! DZone it! del.icio.us Permalink Post RSS

ARQINOVATION

Arquitetura e Inovação .NET

Silverlight 4 Dica do do Dia #8 Criando um CRUD com MVVM e Silverlight Parte 1 – Retrieve

Montando a Solução

Criando a Model de Dados

MVVM RLZ – cRud - Retrieve

Silverlight 4 Dica do Dia #7 – Pivot Viewer Basics

Silverlight 4 Dica do Dia #6 – Mapas do BING Maps no Silverlight

Silverlight 4 Dica do Dia #5 - Realidade Aumentada – YES WE CAN!!!

Silverlight 4 Dica do dia #3 – Validação de campos

Grande novidade do PDC - Silverlight 4

Sobre mim

RecentPosts

Month List

Twitter

ARQINOVATION

Arquitetura e Inovação .NET

Silverlight 4 Dica do do Dia #8 Criando um CRUD com MVVM e Silverlight Parte 1 – Retrieve

Montando a Solução

Criando a Model de Dados

MVVM RLZ – cRud - Retrieve

Silverlight 4 Dica do Dia #7 – Pivot Viewer Basics

Silverlight 4 Dica do Dia #6 – Mapas do BING Maps no Silverlight

Silverlight 4 Dica do Dia #5 - Realidade Aumentada – YES WE CAN!!!

Silverlight 4 Dica do dia #3 – Validação de campos

Grande novidade do PDC - Silverlight 4

Sobre mim

RecentPosts

Tag cloud

Month List

Blogroll

Twitter