Visual Studio

...now browsing by category

 

Silverlight & Model-View-ViewModel

Quinta-feira, Maio 26th, 2011

pic1

Existem várias formas diferentes de definir a camada de apresentação, pode-se seguir uma aproximação tradicional, na qual toda a responsabilidade da camada de apresentação se encontra na View ou então podemos seguir um pattern para prodecer à separação de responsabilidades da camada de apresentção.

A aproximação mais tradicional torna-se mais simples e criar permite rapidamente uma camada de apresentação. É ideal quando se trata de aplicações de pequena dimensão .

O problema é que não existem aplicações de pequena dimensão, algumas podem começar dessa forma, mas muito rapidamente crescem e transforma-se em uma dor de cabeça para qualquer equipa de manutenção, dando origem a mais uma “Black Box” passados alguns anos.

Para ajudar a solucionar esse tipo de problema recorrente, nasceram algumas patterns que nos permitem estruturar de uma melhor forma a camada de apresentação das aplicações, entre elas estão o MVC (Model-View-Controller), MPV (Model-View-Presenter) e o MVVM (Model-View-ViewModel) que é o tema de este post.

Como não podemos deixar de falar em Silverlight ou WPF quando o tema é MVVM, vou apresentar um tutorial no qual demonstro como implementar MVVM no Silverlight.

O MVVM pretende estabelecer uma separação clara de responsabilidades na camada de apresentação, a View apenas é responsável pela User Interface, o Model detém as regras de negócio (classes de negócio, acesso a dados, etc) e o ViewModel é o responsável de fornecer à View apenas os dados que ela necessita e é também o ViewModel quem tem a responsabilidade de reagir aos eventos  gerados pela View.

Uma das grandes vantagens na utilização de um pattern como este, é que permite alterar completamente a UI apresentada ao utilizador sem que se torne necessário alterar mais do que a View, ou então, num caso mais extremo, partilhar o Model e o ViewModel e criar dois Front-End diferentes, como Silverlight e Windows Phone 7.

Vamos então ao que interessa, criar uma Demo de uma aplicação de gestão de Clientes, que apresenta a lista  de clientes de uma empresa e também permite adicionar um novos clientes à lista actual.

Vamos criar um novo projecto do tipo Silverlight Application no VS2010

image

 

Seleccionar a check-box “Host the Silverlight application in a new Web site”

image

 

Adicionar duas novas referências ao projecto Silverlight

image

 

Adicionar as referências à página MainPage.xaml

<UserControl x:Class="Silverlight_MVVM_Demo.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"

    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"             

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

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

    </Grid>
</UserControl>

 

Vamos definir a View

image

Agora em XAML

<UserControl x:Class="Silverlight_MVVM_Demo.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"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="Gray" Width="800" Height="600">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--DataGrid Definition-->
        <sdk:DataGrid Height="300" Grid.Row="0" BorderThickness="1"/>

        <!--Data Input Definition-->
        <sdk:Label
            Grid.Row="1"
            Height="28"
            HorizontalAlignment="Left"
            Margin="10,10,0,0"
            VerticalAlignment="Top"
            Width="171"
            Content="Adicionar novo cliente"
            FontFamily="Verdana"
            FontSize="13.333"
            FontWeight="Bold" />
        <TextBlock
            HorizontalAlignment="Left"
            Margin="80,59,0,0"
            Grid.Row="1"
            TextWrapping="Wrap"
            Text="Nome"
            VerticalAlignment="Top"/>
        <TextBox
            HorizontalAlignment="Left"
            Margin="80,79,0,0"
            Grid.Row="1"
            TextWrapping="Wrap"
            VerticalAlignment="Top"
            Width="245"/>
        <TextBlock
            HorizontalAlignment="Left"
            Margin="80,120,0,0"
            Grid.Row="1"
            TextWrapping="Wrap"
            Text="NIF"
            VerticalAlignment="Top"/>
        <TextBox
            HorizontalAlignment="Left"
            Margin="80,140,0,136"
            Grid.Row="1"
            TextWrapping="Wrap"
            Width="245"
            d:LayoutOverrides="Height"/>
        <TextBlock
            HorizontalAlignment="Left"
            Margin="80,0,0,98"
            Grid.Row="1"
            TextWrapping="Wrap"
            Text="Telemóvel"
            VerticalAlignment="Bottom"/>
        <TextBox
            HorizontalAlignment="Left"
            Margin="80,0,0,70"
            Grid.Row="1"
            TextWrapping="Wrap"
            Width="245"
            VerticalAlignment="Bottom"/>
        <TextBlock
            Margin="0,0,229,98"
            Grid.Row="1"
            TextWrapping="Wrap"
            Text="Número de Cliente"
            VerticalAlignment="Bottom"
            HorizontalAlignment="Right"
            Width="111"/>
        <TextBox
            Margin="0,0,96,70"
            Grid.Row="1"
            TextWrapping="Wrap"
            VerticalAlignment="Bottom"
            HorizontalAlignment="Right"
            Width="245"/>
        <TextBlock
            Margin="0,120,321,0"
            Grid.Row="1"
            TextWrapping="Wrap"
            Text="Fax"
            VerticalAlignment="Top"
            HorizontalAlignment="Right"
            RenderTransformOrigin="-1.579,0.438"/>
        <TextBox
            Margin="0,140,96,136"
            Grid.Row="1"
            TextWrapping="Wrap"
            d:LayoutOverrides="Height"
            HorizontalAlignment="Right"
            Width="245"/>
        <TextBlock
            Margin="0,59,293,0"
            Grid.Row="1"
            TextWrapping="Wrap"
            Text="Telefone"
            VerticalAlignment="Top"
            HorizontalAlignment="Right"/>
        <TextBox
            Margin="0,79,96,0"
            Grid.Row="1"
            TextWrapping="Wrap"
            VerticalAlignment="Top"
            HorizontalAlignment="Right"
            Width="245"/>
        <Button
            Content="Adicionar"
            HorizontalAlignment="Right"
            Margin="0,0,8,8"
            Grid.Row="1"
            VerticalAlignment="Bottom"
            Width="75"/>
    </Grid>
</UserControl>

 

Criar a estrutura de directórios

image

 

De seguida adicionar ao directório Model uma nova classe com o nome Cliente.cs com a seguinte estrutura

namespace Silverlight_MVVM_Demo.Model
{
    public class Cliente
    {
        public string ClienteID { get; set; }
        public string Nome { get; set; }
        public string NIF { get; set; }
        public string Telefone { get; set; }
        public string Telemovel { get; set; }
        public string Fax { get; set; }

    }
}

Vamos adicionar duas classe base que implementam os Interfaces ICommand e INotifyPropertyChanged.

Classe RelayCommand

using System;
using System.Windows.Input;

namespace Silverlight_MVVM_Demo.ViewModel
{
    public class RelayCommand : ICommand
    {
        private Action<Object> _handler;
        public RelayCommand(Action<Object> handler)
        {
            _handler = handler;
        }

        private bool _isEnabled = true;
        public bool IsEnabled
        {
            get { return _isEnabled; }
            set
            {
                if (value != _isEnabled)
                {
                    _isEnabled = value;
                    if (CanExecuteChanged != null)
                    {
                        CanExecuteChanged(this, EventArgs.Empty);
                    }
                }
            }
        }

        public bool CanExecute(object parameter)
        {
            return IsEnabled;
        }

        public event EventHandler CanExecuteChanged;

        public void Execute(object parameter)
        {
            _handler(parameter);
        }
    }
}

Se seguirmos uma abordagem simplista, podemos olhar para o ICommand como o interface que permite o ViewModel receber notificações de eventos da View.

 

Classe ViewModelBase

namespace Silverlight_MVVM_Demo.ViewModel
{
    using System.ComponentModel;
    /*TODOS OS VIEWMODEL HERDAM DESTA CLASSE*/
    public abstract class ViewModelBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler  PropertyChanged;
        public void RaisePropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

Vamos herdar todos os ViewModel da classe ViewModelBase para simplificar as notificações quando existem alterações nos conteúdos das propriedades, assim apenas vai ser necessário chamar o método RaisePropertyChanged(“NomeDaPropriedade”) para notificar o ViewModel e a View caso tal seja necessário.

 

De seguida criamos a classe de ViewModel

namespace Silverlight_MVVM_Demo.ViewModel
{
    using Model;
    using System.Collections.ObjectModel;

    public class MainPageViewModel : ViewModelBase
    {
        #region View Data Collection
        private ObservableCollection<Cliente> _ClientList;
        public ObservableCollection<Cliente> ClientList
        {
            get { return _ClientList; }
            set
            {
                _ClientList = value;
                /*Notificar alteração de conteúdo*/
                RaisePropertyChanged("ClientList");
            }
        }
        #endregion

        /*Propriedades utilizadas na View*/
        #region View Properties
        private string _ClientID;
        public string ClientID
        {
            get { return _ClientID; }
            set
            {
                _ClientID = value;
                /*Notificar alteração de conteúdo*/
                RaisePropertyChanged("ClientID");
            }
        }

        private string _ClientName;
        public string ClientName
        {
            get { return _ClientName; }
            set
            {
                _ClientName = value;
                /*Notificar alteração de conteúdo*/
                RaisePropertyChanged("ClientName");
            }
        }

        private string _ClientNIF;
        public string ClientNIF
        {
            get { return _ClientNIF; }
            set
            {
                _ClientNIF = value;
                /*Notificar alteração de conteúdo*/
                RaisePropertyChanged("ClientNIF");
            }
        }

        private string _ClientPhone;
        public string ClientPhone
        {
            get { return _ClientPhone; }
            set
            {
                _ClientPhone = value;
                /*Notificar alteração de conteúdo*/
                RaisePropertyChanged("ClientPhone");
            }
        }

        private string _ClientFax;
        public string ClientFax
        {
            get { return _ClientFax; }
            set
            {
                _ClientFax = value;
                /*Notificar alteração de conteúdo*/
                RaisePropertyChanged("ClientFax");
            }
        }

        private string _ClientCell;
        public string ClientCell
        {
            get { return _ClientCell; }
            set
            {
                _ClientCell = value;
                /*Notificar alteração de conteúdo*/
                RaisePropertyChanged("ClientCell");
            }
        }
        #endregion

        #region Commands
        public RelayCommand LoadClientData { get; set; }
        public RelayCommand SubmitForm { get; set; }
        #endregion

        public MainPageViewModel()
        {
            /*Comandos que o ViewModel vai reconhecer da View*/
            this.LoadClientData = new RelayCommand(MockClientList);
            this.SubmitForm = new RelayCommand(Submit);
        }

        /// <summary>
        /// Adiciona um novo cliente
        /// </summary>
        /// <param name="parameter"></param>
        protected void Submit(object parameter)
        {
            /*
             Como utilizamos as notificações quando
             é alterado o conteúdo de uma propriedade
             da View, já temos no ViewModel todos os
             dados.
             */
            var c = new Cliente
            {
                ClienteID = ClientID,
                Fax = ClientFax,
                NIF = ClientNIF,
                Nome = ClientName,
                Telefone = ClientPhone,
                Telemovel = ClientCell
            };

            ClientList.Add(c);

            ClientID = string.Empty;
            ClientFax = string.Empty;
            ClientCell = string.Empty;
            ClientName = string.Empty;
            ClientPhone = string.Empty;
            ClientNIF = string.Empty;
        }

        /// <summary>
        /// Dados iniciais da DataGrid
        /// </summary>
        /// <param name="parameter"></param>
        public void MockClientList(object parameter)
        {
            ClientList = new ObservableCollection<Cliente>();

            for (int i = 0; i < 3; i++)
            {
                var c = new Cliente{
                 ClienteID=i.ToString(),
                 Fax="123456789",
                 NIF="789456123",
                 Nome="Client "+i,
                 Telefone="5556623",
                 Telemovel="3237656511"
                };

                ClientList.Add(c);
            }
        }
    }
}

Agora ja temos definidas as três componentes do MVVM, apenas falta ligar a View com o ViewModel, e isso é conseguido através do Databinding, que o Silverlight nos proporciona para facilitar essa operação. Vamos então completar a página MainPage.xaml com os bindings.

<UserControl x:Class="Silverlight_MVVM_Demo.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"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    xmlns:vm="clr-namespace:Silverlight_MVVM_Demo.ViewModel"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <!--DATACONTEXT DEFINITION-->
    <UserControl.DataContext>
        <!--Link entre o ViewModel e a View-->
        <vm:MainPageViewModel/>
    </UserControl.DataContext>

    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Loaded">
            <!--Quando a página é carregada é executado o comando LoadClientData-->
            <i:InvokeCommandAction Command="{Binding LoadClientData}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>

    <Grid x:Name="LayoutRoot" Background="Gray" Width="800" Height="600">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--DataGrid Definition-->
        <sdk:DataGrid Height="300" Grid.Row="0" BorderThickness="1"/>

        <!--Data Input Definition-->
        <sdk:Label
            Grid.Row="1"
            Height="28"
            HorizontalAlignment="Left"
            Margin="10,10,0,0"
            VerticalAlignment="Top"
            Width="171"
            Content="Adicionar novo cliente"
            FontFamily="Verdana"
            FontSize="13.333"
            FontWeight="Bold" />
        <TextBlock
            HorizontalAlignment="Left"
            Margin="80,59,0,0"
            Grid.Row="1"
            TextWrapping="Wrap"
            Text="Nome"
            VerticalAlignment="Top"/>
        <TextBox
            Text="{Binding ClientName, Mode=TwoWay}"
            HorizontalAlignment="Left"
            Margin="80,79,0,0"
            Grid.Row="1"
            TextWrapping="Wrap"
            VerticalAlignment="Top"
            Width="245"/>
        <TextBlock
            HorizontalAlignment="Left"
            Margin="80,120,0,0"
            Grid.Row="1"
            TextWrapping="Wrap"
            Text="NIF"
            VerticalAlignment="Top"/>
        <TextBox
            Text="{Binding ClientNIF, Mode=TwoWay}"
            HorizontalAlignment="Left"
            Margin="80,140,0,136"
            Grid.Row="1"
            TextWrapping="Wrap"
            Width="245"
            d:LayoutOverrides="Height"/>
        <TextBlock
            HorizontalAlignment="Left"
            Margin="80,0,0,98"
            Grid.Row="1"
            TextWrapping="Wrap"
            Text="Telemóvel"
            VerticalAlignment="Bottom"/>
        <TextBox
            Text="{Binding ClientCell, Mode=TwoWay}"
            HorizontalAlignment="Left"
            Margin="80,0,0,70"
            Grid.Row="1"
            TextWrapping="Wrap"
            Width="245"
            VerticalAlignment="Bottom"/>
        <TextBlock
            Margin="0,0,229,98"
            Grid.Row="1"
            TextWrapping="Wrap"
            Text="Número de Cliente"
            VerticalAlignment="Bottom"
            HorizontalAlignment="Right"
            Width="111"/>
        <TextBox
            Text="{Binding ClientID, Mode=TwoWay}"
            Margin="0,0,96,70"
            Grid.Row="1"
            TextWrapping="Wrap"
            VerticalAlignment="Bottom"
            HorizontalAlignment="Right"
            Width="245"/>
        <TextBlock
            Margin="0,120,321,0"
            Grid.Row="1"
            TextWrapping="Wrap"
            Text="Fax"
            VerticalAlignment="Top"
            HorizontalAlignment="Right"
            RenderTransformOrigin="-1.579,0.438"/>
        <TextBox
            Text="{Binding ClientFax, Mode=TwoWay}"
            Margin="0,140,96,136"
            Grid.Row="1"
            TextWrapping="Wrap"
            d:LayoutOverrides="Height"
            HorizontalAlignment="Right"
            Width="245"/>
        <TextBlock
            Margin="0,59,293,0"
            Grid.Row="1"
            TextWrapping="Wrap"
            Text="Telefone"
            VerticalAlignment="Top"
            HorizontalAlignment="Right"/>
        <TextBox
            Text="{Binding ClientPhone, Mode=TwoWay}"
            Margin="0,79,96,0"
            Grid.Row="1"
            TextWrapping="Wrap"
            VerticalAlignment="Top"
            HorizontalAlignment="Right"
            Width="245"/>
        <Button
            Content="Adicionar"
            HorizontalAlignment="Right"
            Margin="0,0,8,8"
            Grid.Row="1"
            VerticalAlignment="Bottom"
            Width="75">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <!--Quando chamado o evento click, é executado o commando SubmitForm no ViewModel -->
                    <i:InvokeCommandAction Command="{Binding SubmitForm}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
    </Grid>
</UserControl>


E Finalmente temos a aplicação a funcionar com MVVM e nenhum código na View a não ser a definição do User Interface.

image

 

Solução VS2010 do projecto executado neste tutorial disponível aqui para download.

Referências:

http://www.silverlight.net/learn/videos/silverlight-4-videos/mvvm-introduction/

http://www.silverlight.net/learn/tutorials/silverlight-4/using-the-mvvm-pattern-in-silverlight-applications/

http://msdn.microsoft.com/en-us/magazine/dd419663.aspx#id0090016

Posted in .net, c#, Programação, Silverlight, Tecnologia, Visual Studio | No Responses »
Tags: , , , ,

Visual Studio 2010 XAML Editor–Quick Tips #4

Sábado, Outubro 9th, 2010

xamllogo

O Visual Studio 2010 é sem dúvida alguma uma ferramenta excelente de trabalho. Já tive oportunidade de trabalhar com esta ferramenta em alguns projectos e até agora tem sido uma boa experiência.

Neste estou envolvido num projecto no qual que utilizo Visual Studio 2010, Silverlight e Expression Blend e tenho-me deparado com um problema em concreto, no Editor de XAML do Visual Studio 2010, cada vez que abro um ficheiro XAML, o editor abre por defeito em modo split (Editor/Preview).

xaml_screen_02

O problema é que o preview demora constantemente vários segundos a carregar o ficheiro e a executar o preview, quando na grande maioria das ocasiões não me interessa pré-visualizar o documento, apenas tenho interesse em editar o XAML.

É possível solucionar este problema, selecionar na barra de ferramentas do Visual Studio 2010 Tools –> Options e depois seleccionar como indica a imagem  Text Editor –> XAML –> Miscellaneous

xaml_options

 

 

 

 

 

 

 

 

 

Na Default View, selecionar “Always open documents in full XAML view” e a partir desse momento, sempre que abrir um documento XAML, este vai ser apresentado sempre em modo Markup.

Posted in silverlight, Visual Studio, WPF, xaml | 1 Response »
Tags: , , , ,

Herança, Polimorfismo e Classes Abstractas – Quick Tips #2

Terça-feira, Julho 6th, 2010

Quando, a nível profissional trabalhamos em certas áreas de negócio, por vezes torna-se muito complexo implementar alguns dos conceitos básicos de POO (Programação Orientada a Objectos) que aprendemos.

Nestes casos é necessário fazer um esforço extra, abstrairmo-nos dos problemas de implementação das regras de negócio, dos sistemas existentes e desenvolver uma plataforma que, além de conciliar as regras de negócio e regras de arquitectura de software, tira partido das melhores funcionalidades oferecidas pela linguagem a ser utilizada.

É certamente o caminho para uma manutenção acessível e escalável, que vai garantir a longevidade da plataforma.

Herança e Polimorfismo são alguns dos conceitos mais importantes de POO, vou falar um pouco de cada um e apresentar uma pequena demonstração.

 

Herança

Por vezes as próprias regras de negócio estão agrupadas em famílias, temos que aproveitar esse factor a nosso favor e desenvolver uma estrutura do mesmo tipo por forma a que a arquitectura final seja consistente.

Recorrendo à herança entre classes podemos desenvolver uma estrutura de classes agrupadas por família, e que por sua vez têm informação organizada e transversal a toda a aplicação.

Vamos olhar para um exemplo real:

public class Angariacao
{
    public string Nome          { get; set; }
    public string Morada        { get; set; }
    public string EpocaBaixa    { get; set; }
    public string EpocaAlta     { get; set; }
    public string Enquadramento { get; set; }
}

public class CasaDeCampo : Angariacao
{
    public int    Capacidade    { get; set; }
    public string Tipologia     { get; set; }
}

public class HotelRural : Angariacao
{
    public string Actividades   { get; set; }
    public string Exterior      { get; set; }
    public string AreaSocial    { get; set; }
}

 

Como podemos verificar facilmente depois de analisar o código apresentado anteriormente, existe uma lógica para agrupar todas as propriedades partilhadas pelas classes CasaDeCampo e HotelRural.

A maioria das propriedades que cada uma das classes teria, estão agora na classe Angariação e essas propriedades vão ser partilhadas nas classes  CasaDeCampo e HotelRural através de herança.

Temos um grande número de vantagens ao utilizar este conceito de POO, uma delas é a fácil manutenção: caso se tenha que alterar/adicionar/remover uma propriedade na classe base, essa alteração é reflectida de forma automática em todas as classes que herdam da classe base.  Torna-se também mais rápido e eficiente adicionar novas classes que herdem da classe base, pois já existem nela implementadas muitas das funcionalidades básicas bem como as propriedades partilhadas que são transversais à família de classes.

 

Polimorfismo e Classes Abstractas

Polimorfismo significa “tomar várias formas”, quando utilizado em POO significa que uma assinatura de um método pode ter várias implementações diferentes.

Uma classe abstracta não pode ser instanciada, apenas define as propriedades e métodos que as classes filho que vão herdar.

Para exemplificar este conceito vamos recorrer às classes apresentadas no exemplo anterior e continuar a explorar o mesmo conceito:

//A classe passou a ser abstracta
public abstract class Angariacao
{
    public string Nome          { get; set; }
    public string Morada        { get; set; }
    public string EpocaBaixa    { get; set; }
    public string EpocaAlta     { get; set; }
    public string Enquadramento { get; set; }

    //Definição do método a ser implementado nas
    //classes que herdam de Angariacao
    public abstract void ImprimirTipoClasse();

}

public class CasaDeCampo : Angariacao
{
    public int    Capacidade    { get; set; }
    public string Tipologia     { get; set; }

    //Quando o método tem a assinatura abstract na classe base
    //é obrigatório implementar o override nas classes que herdam
    //da classe base
    public override void ImprimirTipoClasse()
    {
        Console.WriteLine(string.Format("Tipo: {0}", this.GetType()));
    }
}

public class HotelRural : Angariacao
{
    public string Actividades   { get; set; }
    public string Exterior      { get; set; }
    public string AreaSocial    { get; set; }

    //Quando o método tem a assinatura abstract na classe base
    //é obrigatório implementar o override nas classes que herdam
    //da classe base
    public override void ImprimirTipoClasse()
    {
        Console.WriteLine(string.Format("Tipo: {0}", this.GetType()));
    }
}

 

Neste momento temos definida a família angariação, que tem como base  a classe Angariação e filhos as classes CasaDeCampo e HotelRural.

A classe Angariação é abstract porque na lógica de negócio a implementar não existem objectos da classe base.

Como na classe base está declarado o método ImprimirTipoClasse com a assinatura abstract, a implementação de este método é obrigatória nas classes filho.

Para validar estes conceitos, criei um programa muito simples e que demonstra o potencial da Herança, Polimorfismo:

    class Program
    {
        static void Main(string[] args)
        {
            //lista de objectos da classe base
            var list = new List<Angariacao>();

            //adicionar à lista objectos que 
            //herdam da classe base
            list.Add(new CasaDeCampo());
            list.Add(new HotelRural());

            foreach (var item in list)
            {
                //Imprimir no ecrã o tipo de objecto
                //Demonstração final de Polimorfismo
                item.ImprimirTipoClasse();
            }

            Console.ReadKey();
        }
    }

Que resulta no seguinte ecrã quando se executa a aplicação:

heranca_e_polimorfismo

 

 

Para concluir, podemos verificar ao analisar a execução do programa que, embora a lista seja de objectos da classe base, podemos adicionar objectos que herdam da classe base, e quando invocamos o método ImprimirTipoClasse, o resultado é a execução do método que está definido classe filho.

Para criar um exemplo mais real, se a classe base tiver um método abstract que se chama AdicionarAngariacao, quando executado no programa da mesma forma que no exemplo acima demonstrado, iria ser adicionada uma Casa de Campo e um Hotel Rural ao sistema de acordo com as suas propriedades partilhadas e específicas, pois cada uma das classes filho implementa o método AdicionarAngariacao da forma mais conveniente.

Posted in .net, c#, OOP, POO, Programação, Tecnologia, Visual Studio | 1 Response »
Tags: , , , , ,

Nested ListViews em ASP.NET

Quinta-feira, Julho 1st, 2010

ASP.net_100_logo_5

Por vezes temos necessidade de integrar muitos dados num ecrã para os apresentar da forma mais conveniente ao utilizador.

O que acontece durante este processo é que por vezes enfrentamos algumas dificuldades em transpor a informação que temos organizada na camada de negócio para a camada de apresentação de uma forma simples e sem grandes  alterações na sua estrutura.

Por exemplo, quando temos uma classe Contacto que além das suas propriedades mais comuns, contém também uma propriedade que é uma estrutura de dados da classe Servico, por vezes a melhor solução é optar por utilizar ListViews encadeadas.

public class Contacto
{
    public int id { get; set; }
    public string nome { get; set; }
    public IEnumerable<Servico> servicos { get; set; }

    public Contacto()
    {
        servicos = new List<Servico>();
    }

    public IEnumerable<Contacto> ObterContactos()
    {
        for (int i = 0; i < 3; i++)
        {
            var c = new Contacto();
            c.id = i;
            c.nome = "nome_" + i;
            c.servicos = (new Servico()).ObterServicos(i);

            yield return c;
        }

        yield break;
    }
}

Como podem verificar no código apresentado anteriormente, a classe Contacto tem uma propriedade do tipo IEnumerable<Servico>, que é uma estrutura de dados da classe Servico.

public class Servico
{
    public int id { get; set; }
    public string descricao { get; set; }

    public IEnumerable<Servico> ObterServicos(int id)
    {
        var listaServicos = new List<Servico>();

        for (int i = 0; i < 3; i++)
        {
            var serv = new Servico();
            serv.id = i;
            serv.descricao = string.Format("servico_{0}_{1}", i, id);
            listaServicos.Add(serv);
        }

        return listaServicos;
    }
}

Numa situação em que temos que apresentar num ecrã a informação da classe Contacto, a melhor solução seria poder alimentar um único controlo com uma lista de elementos desta classe e, este se encarrega-se de agregar a informação.

Sugiro algo assim:

<div>
        <h2>Exemplo de Nested ListViews</h2>
        <asp:ListView ID="ListViewPai" runat="server">
            <LayoutTemplate>
                <asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
            </LayoutTemplate>
            <ItemTemplate>
                <h5>Informacao da ListView Pai</h5>
                <p>Nome:<%#Eval("nome") %></p>
                <asp:ListView ID="ListViewFilho" runat="server" DataSource='<%# Eval("servicos") %>'>
                    <LayoutTemplate>
                        <h6>Informacao da ListView Filho</h6>
                        <asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
                    </LayoutTemplate>
                    <ItemTemplate>
                        <div style="border:1px solid black; width:250px; margin:15px;">
                            <p>id:<%#Eval("id") %></p>
                            <p>descricao:<%#Eval("descricao") %></p>
                        </div>
                    </ItemTemplate>
                </asp:ListView>
                <hr />
            </ItemTemplate>
        </asp:ListView>
    </div>

Como podem verificar, a fonte de dados que alimenta a ListViewFilho é         “<%# Eval("servicos") %>” que é o nome da propriedade existente na classe Contacto e que é do tipo IEnumerable<Servico>.

Ou seja, cada item do ListViewPai vai alimentar o ListViewFilho com a sua propriedade Servico.

O que resulta num código de carregamento de dados extremamente simples, como podemos verificar:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication1
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                CarregarDadosListView();
            }
        }

        public void CarregarDadosListView()
        {
            ListViewPai.DataSource = (new Contacto()).ObterContactos();
            ListViewPai.DataBind();
        }
    }
}

Ao utilizar este método apenas basta alimentar o datasource da ListViewPai, depois é cada item desta listview quem se encarrega de dar informação a ser apresentada à ListViewFilho.

Faça aqui o download  do projecto de demonstração em VS2010

Posted in .net, asp.net, c#, CSS, HTML, IE8, Programação, Tecnologia, Visual Studio | 1 Response »
Tags: , ,

Visual Studio 2010 Quick Tips #1

Terça-feira, Junho 15th, 2010

Hoje em dia com a vulgaridade da utilização de ecrãs de resolução Wide Screen, por vezes não utilizamos o espaço que temos disponível da forma mais conveniente.

O Visual Studio disponibiliza uma funcionalidade que permite optimizar o espaço extra que o utilizador tem disponível.

normal_VS2010

Quando está a desenvolver projectos projectos web, pode dividir o a sua área de trabalho verticalmente e visualizar  simultaneamente o design e o source da página em que se encontra a trabalhar.

Para isso basta ir ao menu tools->options, depois seleccionar a caixa “show all settings” e seleccionar HTML Designer. Nas propriedades selecionar a caixa “Split views vertcally”.

change_settings

Depois é só fechar as janelas que tem abertas na sua área de trabalho do Visual Studio e abrir-las novamente.

 

new_vs2010

E assim pode optimizar de uma forma mais eficiente a área de trabalho que tem disponível.

Posted in .net, asp.net, HTML, Tecnologia, Visual Studio | No Responses »
Tags: , , , , ,

Visual Studio Configuration Manager

Segunda-feira, Maio 3rd, 2010

visual_studio_ars

Durante o ciclo de vida de uma aplicação, seja durante o seu desenvolvimento ou manutenção, é prática comum distribuir a aplicação por um conjunto distinto de ambientes, de forma a garantir  qualidade no software produzido.

 

Estes ambientes são definidos em conjunto com as funções que desempenham, normalmente são três: desenvolvimento, testes e produção.

Cada ambiente é uma caixa estanque, tem o seu próprio conjunto de servidores (Web, SQL, etc..) de forma a que estejam reunidas todas as condições para que um ambiente não necessite de aceder a recursos de outro ambiente para funcionar, garantindo-se assim consistência.

Podemos olhar para cada um destes ambientes como uma etapa no decorrer de um desenvolvimento num projecto. No ambiente de desenvolvimento o developer pode testar toda e qualquer situação sem necessitar de se preocupar por exemplo com  a consistência de dados na base de dados. O ambiente de testes é aquele em que depois de estarem concluídos os desenvolvimentos são executados todo o tipo de testes para garantir que os desenvolvimentos efectuados se encontram correctos, tanto do ponto de vista técnico como nas regras de negócio. Normalmente este ambiente necessita de ter garantida a consistência de dados. Depois de estes dois estágios estarem concluídos temos o ambiente de produção, este é o ambiente no qual  utilizador da aplicação  efectua as suas operações e toda a aplicação necessita estabilidade.

Como estamos a falar de três ambientes, cada um deles com configurações específicas, como é o caso de endereços de servidores web, sql, entre outros, por vezes torna-se difícil gerir as configurações correctas para o ambiente que vamos executar uma publicação.

Para nos ajudar nesta situação, o Visual Studio disponibiliza uma ferramenta para este fim, o Configuration Manager.

Todos os developers utilizam esta ferramenta diariamente, só que normalmente apenas para trocar a configuração de Debug para Release ou vice-versa. No entanto esta ferramenta permite fazer muito mais, permite criar ambientes personalizados com configurações específicas, como um web.config personalizado e adequado a cada um dos ambientes.

Neste post vou explicar como criar e configurar ambientes personalizados no Configuration Manager do Visual Studio, que permitem garantir que, ao alterar o ambiente em utilização, a aplicação está a utilizar todas as configurações específicas desse mesmo ambiente de forma automática e sem a necessidade de intervenção do developer.

 

1º Passo:

config_01

Criar uma directoria na raíz do projecto, com o nome “Ambientes”, e dentro dessa pasta criar uma directoria para cada um dos ambientes que vamos personalizar.

Copiar para a directoria de cada ambiente o seu web.config personalizado e adequado.

De seguida abrir o Configuration Manager.

 

2º Passo:

config_02

config_03

 

Criar uma configuração para cada um dos ambientes que vamos criar, neste exemplo vou criar os ambientes Local, Testes e Produção.

Para os ambientes Local e Testes, vou copiar as configurações base do ambiente de Debug e para o ambiente de Produção vou efectuar a cópia do ambiente de Release.

 

3º Passo:

config_04config_05 

Remover as configurações de Debug e Release da Solution.

 

4º Passo:

config_06

Remover as configurações de Debug e Release do projecto.

 

5º Passo

config_07

config_08

Nas propriedades do projecto, ir a “Build Events” e carregar em “Edit Post-Build” e de seguida colar na caixa de texto a seguinte macro:

xcopy /R /Y "$(ProjectDir)Ambientes\$(ConfigurationName)\Web.config" "$(ProjectDir)Web.config"

Agora, sempre que necessitar de executar uma publicação, apenas necessita de seleccionar o ambiente que deseja publicar, fazer build e tem todas as configurações necessárias para executar a aplicação correctamente no ambiente seleccionado.

 

Criei um projecto de teste, uma aplicação web em que a página Default.aspx mostra que ambiente está em utilização.

config_09

Pode fazer o download do projecto de teste aqui.

Posted in .net, asp.net, c#, Tecnologia, Visual Studio | 2 Responses »
Tags: , , , , ,

ASP.NET Google Maps

Terça-feira, Abril 20th, 2010

google

O ASP.NET Google Maps é um Web User Control que implementa a API v2 do Google Maps.

Para utilizar esta API e este Web User Control é necessário registar-se aqui e obter uma chave de utilização.

A utilização deste controlo é em tudo semelhante ao ASP.NET Bing Maps, é apenas executar o Drag & Drop do controlo na página de implementação e configurar as propriedades do controlo.

Como utilizar?

Substituir no ficheiro GoogleMapsControl.ascx “YOU_KEY” pela chave que lhe foi atribuída durante o processo de registo na API do Google Maps. 

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="GoogleMapsControl.ascx.cs" Inherits="GoogleMaps.GoogleMaps.GoogleMapsControl" %>

<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YOU_KEY"></script>
<script type="text/javascript" src="GoogleMaps/GoogleMaps.js"></script>
<div id="myMap"></div>

Implementação do Web User Control numa página Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="GoogleMaps._Default" %>

<%@ Register src="GoogleMaps/GoogleMapsControl.ascx" tagname="GoogleMapsControl" tagprefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <uc1:GoogleMapsControl ID="GoogleMapsControl" runat="server" latitude="38.69052609303235" longitude="-9.297544956207275"
        pushPin="true" pushPinTitle="Sample Title" pushPinDescription="Sample Description" zoom="17" MapWidth="600px" MapHeight="400px"
        mapStyle="G_SATELLITE_MAP" />
    </div>
    </form>
</body>
</html>

Nas propriedades do controlo podemos definir um conjunto de funcionalidades disponibilizadas pela API do Google Maps, como o estilo de apresentação do mapa, definir a utilização de um marcador bem como o seu título e descrição.

Deixo aqui algumas imagens do controlo:

google_map_standard

google_satelite

google_satelite_2

google_terrain

Demo projecto de VS2008 e Web User Control disponível em:

http://aspnetgooglemaps.codeplex.com

Posted in .net, asp.net, c#, HTML, IE8, Visual Studio | 7 Responses »
Tags: , , , , , , , , , ,

ASP.NET Bing Maps

Terça-feira, Abril 20th, 2010

Bing_maps

O ASP.NET Bing Maps é mais um Web User Control que desenvolvi e decidi partilhar com a comunidade.

Por vezes damos por nós a fazer tarefas ou processos repetitivas durante o processo de desenvolvimento de aplicações, quando isso acontece é sinal que provavelmente podemos criar um controlo ou um fluxo genérico em substituição de todo esse trabalho. Os controlos genéricos são fáceis de manter actualizados, a actualização do controlo reflecte-se em todos os locais onde este é utilizado, são fáceis de implementar, são reutilizáveis e extensíveis.

Decidi criar um  Web User Control que implementa o Bing Maps porque necessitava de um controlo que eu pudesse controlar e alterar  programaticamente as propriedades de um mapa numa aplicação web.

Como utilizar?

projectlocation Criar no projecto de Visual Studio uma pasta com o nome BingMaps, adicionar os ficheiros BingMaps.ascx e BingMaps.js.

Depois, já na página onde se pretende implementar o controlo, é necessário registar o controlo como qualquer outro Web User Control (normalmente o Visual Studio faz isso por nós quando se executa o drag & drop do controlo sobre a página de implementação).

Exemplo de implementação:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="BingMaps._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- Registo do controlo na página -->
<%@ Register src="BingMaps/BingMaps.ascx" tagname="BingMaps" tagprefix="UserControl" %>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Teste Bing Maps</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <UserControl:BingMaps runat="server" ID="BingMapContainer" runat="server" distanceUnit="Kilometers"  MapWidth="600px"
        MapHeight="400px" mapMode="Mode2D" mapStyle="BirdseyeHybrid" pushPin="true" pushPinTitle="Sample Title" zoom="1"
            pushPinDescription="Sample Description" latitude="38.69052609303235" longitude="-9.297544956207275"/>
    </div>
    </form>
</body>
</html>

Nas opções do controlo podemos definir o modo de apresentação do mapa (2D/3D), o estilo do mapa (Birds Eye, Road, Aerial, etc).

É possível definir um marcador, com um título e descrição,  para uma melhor indicação no mapa do local que pretendemos  apresentar.

Deixo aqui algumas imagens de demonstram as capacidades do controlo:

bingmaps_2d_birdseye

bingmaps_2d_aerial

bingmaps_2d_road

bingmaps_3d

Demo projecto de VS2008 e Web User Control disponível em:

http://aspnetbingmaps.codeplex.com

Posted in .net, asp.net, c#, HTML, IE8, Visual Studio | 4 Responses »
Tags: , , , , , , , , , ,

IE 8 & VS2005 Debug

Sábado, Março 13th, 2010

VisualStudioLogoO Internet Explorer 8 tem melhorias e novas funcionalidades. Entre elas está o LCIE (Loosely Coupled Internet Explorer).

Essencialmente o LCIE é um conjunto de mudanças internas na arquitectura do Internet Explorer 8 que têm com objectivo melhorar a performance, escalabilidade e robustez do browser.

Entre essas melhorias está uma em especial, que trouxe alguns problemas inesperados aos programadores que utilizam o Visual Studio 2005 juntamente o com Internet Explorer 8.

No IE7 cada janela do browser (UI Frame) tem o seu processo, todos os novos separadores e controlos ActiveX estavam residem nesse processo. O problema com este modelo é, quando um separador provoca um “access violation” ou “stack overflow”, o processo é terminado, logo todos os separadores que estão no mesmo UI Frame vão ser terminados.

ie-tabsPara isso não acontecer no IE8, cada separador tem um processo próprio, assim quando existe um erro provocado por um separador, apenas o processo do separador é terminado, não o processo da janela do browser.

Na imagem apresentada, o browser tem três separadores abertos, o que no IE7 se irá traduzir num único processo, mas no IE8 se vai traduzir em 4 processos como se pode verificar na imagem em baixo.task-manager

Um dos processos é do UI Frame e os restantes três pertencem cada um a cada um dos separadores activos na janela do browser.

É sem dúvida uma excelente melhoria face à versão anterior do browser, no entanto surgiram alguns problemas aos programadores no momento que estes fazem o debug de aplicações  web com o Visual Studio 2005 e IE8.

O que acontece é que se, ao executar o debug da aplicação já existir um processo com o Internet Explorer a ser executado, o debugger do Visual Studio para e ignora os “break points” porque não encontra qual o processo do Internet Explorer que está a ser depurado.

Para resolver esta situação é necessário desabilitar a funcionalidade “grouwth” do LCIE.

Os passos são os seguintes:

1 – Abrir o RegEdit

 

2- Percorer HKEY_LOCALMACHINE -> SOFTWARE -> Microsoft -> Internet Explorer –> Main

 

3 – Adicionar uma DWORD com o nome “TabProcGrowth”

 

4 – Colocar no valor de “TabProcGrowth”  0

 

Fontes:

http://blogs.msdn.com/ie/archive/2008/03/11/ie8-and-loosely-coupled-ie-lcie.aspx

http://weblogs.asp.net/abdullaabdelhaq/archive/2009/06/01/VS-Debug-Problem-with-IE8.aspx

Posted in .net, c#, HTML, Programação, Tecnologia, Visual Studio | No Responses »
Tags: , , , , , , , ,