A Adobe lançou o pre-release do Flex SDK 4.6 (aqui) com muitos componentes novos e alguns Bugs corrigidos.

Mais informações aqui.

Ontem eu vi uma pergunta no fórum de Silverlight do MSDN sobre como achar todos os campos TextBox que existem dentro de uma ChildWindow. Já havia algumas respostas para a pergunta mas elas eram bem pontuais para aquele problema específico e necessitavam de várias suposições sobre a estrutura da aplicação para funcionar sem problemas (por exemplo, saber quais tipos de Panel estão sendo usados). Alguns anos atrás, quando eu comecei a fazer uma das minhas primeiras behaviors para publicar na galeria do Expression Blend, eu descobri uma classe do Silverlight (também existe no WPF) que serve justamente para permitir navergarmos na árvore visual de uma aplicação, tanto procurando controles filhos quanto pais de um determinado controle.

A behavior em questão é a que permitia que se fizesse scroll com a wheel do mouse (a rodinha) em controles que apresentassem scrollbar para aplicações feitas em Silverlight 3. Hoje essa behavior praticamente não é mais necessárias pois o Silverlight 4 já implementa esse comportamento nativamente, mas não era esse o caso na época. Para poder implementar essa função eu precisei criar um código que fosse capaz de ler toda a hierarquia visual do controle (vasculhando todos os componentes do qual o template do controle era composto), procurando por algum ScrollViewer. Se eu o encontrasse, a behavior assinava os eventos necessários do controle para que o scroll funcionasse como esperado.

Para navegar pela árvore visual, a classe que utilizei foi a VisualTreeHelper. Voltando ? dúvida do fórum, eu decidi criar um método genérico que fosse capaz de encontrar todos os controles de um determinado tipo em uma hierárquia utilizando essa classe, assim estaria garantindo que não precisaria ficar colocando “if”s para cada tipo de painel diferente que aparecesse na minha frente. Sem mais delongas, segue abaixo o método que eu fiz.

public static T[] SearchUIElements(UIElement root, int maxlevel = int.MaxValue, int level = 0)     where T : UIElement 

    var result = new List();

    if (root != null)         if (root is T)             result.Add(root as T);

        if (level < maxlevel)             var childrencount = VisualTreeHelper.GetChildrenCount(root);            DependencyObject child;            for (var i = 0; i < childrencount; i++)                 child = VisualTreeHelper.GetChild(root, i);                if (child is UIElement)                     result.AddRange(SearchUIElements(child as UIElement, maxlevel, level + 1));

            }        }    }

    return result.ToArray();}

Como vocês podem ver o método não é grande e é bem simples. Ele aceita 3 parâmetros:

• root: controle raiz a partir de onde será iniciada a busca. Por exemplo: LayoutRoot.
• maxlevel: número máximo de níveis que a busca irá “descer” nos descendentes. Este parâmetro é opcional e o seu valor padrão é int.MaxValue, garantindo que será lida a hierarquia inteira a partir do ponto inicial.
• level: nível atual da busca. Esse parâmetro é utilizado apenas pela própria função para controlar quando a busca atingirá o nível máximo solicitado pelo usuário.

A função é genérica. O parâmetro T serve para indicar qual tipo de controle será procurado, assim como permitir que o retorno sejá tipado corretamente. A é executada de forma recursiva, chamando a si mesma para cada novo ítem na hierarquia.

O resultado da função é sempre um array do tipo de controle solicitado. Esta função sempre retorna uma array, mesmo que seja vazio (não será retornado null).

Abaixo temos um xaml de exemplo e algumas chamada ? função com a descrição do que será encontrado em cada caso.

<Grid x:Name="LayoutRoot">    <TextBox />    <TextBox />    <Grid>        <TextBox />        <TextBox />        <Grid>            <TextBox />        Grid>    Grid>Grid>

//acha TODOS os 5 campos TextBox var textboxes = SearchUIElements<TextBox>(LayoutRoot);

//acha apenas os 2 campos TextBox de LayoutRoottextboxes = SearchUIElements<TextBox>(LayoutRoot, 1);

//acha 4. Os 2 acima e os 2 que estão no primeiro Grid filhotextboxes = SearchUIElements<TextBox>(LayoutRoot, 2);

//acha TODOS os Grids a partir de LayoutRoot, inclusive ele mesmo var grids = SearchUIElements<Grid>(LayoutRoot);         

Agora que eu já mostrei como faz, você acha que consegue fazer uma função semelhante que navegue ao contrário na hierárquia? (procurando nos pais de um controle até chegar na raíz da aplicação…). Fica o desafio.

O nosso leitor Sandro André nos fez uma pergunta muito boa para quem está começando a aprender Flex, veja:

“queria tirar uma dúvida, o que é e para que server MXML APPLICATION, MXML MODULE, MXML COMPONENT,? MXML ITEM RENDERER, E MXML SKIN?”

Fiz uma resposta rápida, mas seria interessante adicionarmos mais informações através dos comentários. Conto com vocês!

MXML Application: É a aplicação principal, que “vira” um arquivo SWF
na compilação.

MXML Module: É um módulo, um pedaço da aplicação principal, que também? ”vira” um SWF, mas é dependente de um MXML Application

MXML Component: É um componente que é adicionado ao MXML
Application/Module. Geralmente uma tela, um formulário, um Panel, um
DataGrid.

MXML Item Renderer: É uma renderização personalizada de um item de uma? lista. Uma lista pode ser um Spark List, Um datagrid, um combobox,
etc.

MXML Skin: É a forma como um componente pode ser desenhado. Por
exemplo, um combo box é formado por um Spark TextInput e um Spark
Button. A skin pode mudar essa forma.

Pessoal,

todas as IDEs possuem centenas de teclas de atalho que são muito úteis para aumentar a produtividade do programador. No Flash Builder, não poderia ser diferente, e excluindo a tecla mais importante que é CTRL+S, exibo a seguir 5 teclas essenciais para acelerar o seu desenvolvmento, veja:

CTRL+3 ? Quick Access

Usada para executar um comando da IDE, como por exemplo criar uma classe, abrir as preferências do projeto, ou então executar a aplicação. Acostume-se a usar esta tecla ao invés de ficar procurando itens no menu da aplicação

CTRL+1 Quick Assis

Usada para fornecer sugestões ao código. Uma das aplicações é criar um método/propriedade que não existe, criar event handlers, etc.

CTRL+O Quick Outline

Usada para navegar no arquivo aberto. Por exemplo, se você está em uma classe ou mxml e quer ir para outra parte do código, como um método ou componente qualquer, acione a tecla e faca a busca. É útil também para ver os métodos e propriedades de uma classe.

CTRL+SHIFT+R Open Resource

Permite abrir qualquer classe ou arquivo do projeto, muito útil e mais rápido que ficar procurando a classe no Package Explorer.

ALT+ Seta para cima/baixo

Selecione um código e use estas teclas para ver o resultado. O texto é facilmente movido. Útil para inserir códigos prontos em um laço ou para refatorar a ordem dos métodos.

Aplicando estas teclas de atalho, você irá perceber que a sua programação será mais rápida e produtiva. Experimente!

Se você achar mais alguma tecla interessante, não deixe de comentar !

Olá pessoal!

Já está disponível a gravação da minha palestra sobre Adobe Flex e Playbook aonde eu abordei os componentes QNX exclusivos para a plataforma da Blackberry.

Para assistir a gravação, clique aqui, para assistir as outras gravações, clique aqui.

Quero agradecer novamente a todos que estiveram presentes na minha palestra!

Um forte abraço!

Olá,

Nesse Post vou mostrar um pouco de desenvolvimento PHP usando BDD (Behaviour-Driven Development).
O BDD é uma prática ágil que tem como objetivo facilitar o desenvolvimento orientado a testes,
onde o software é direcionados por comportamentos, trazendo para o contexto de destes os casos de uso ou historias da aplicação.

Enquanto em TDD (Test Driven Development) testamos a aplicação de forma granular em um ambiente micro
no BDD os testes são globais voltados para a Funcionalidade, Casos de uso, Comportamentos, etc..

Como se em TDD testamos a aplicação de dentro para fora e já em BDD a aplicação é testada de fora para dentro.
Existe muito material sobre esse assunto p ai e muita gente mais preparada que eu para abordar esse assunto de forma teorica,
Então nesse Post vou mostrar na pratica um pouco de desenvolvimento PHP usando o Behat

Behat é um framework BDD em PHP 5.3 construindo sobre de componentes do Symfony2.
Behat foi inspirado no Cucumber do Rails e especialmente a parte da sintaxe das features.

A instalação do Behat pode ser feita baixando diretalente pelo git diretamente pelo do git: http://github.com/Behat/Behat
Ou instalando através do pear :

$ pear channel-discover pear.behat.org
$ pear install behat/behat

Se tudo der certo o Behat esta instalado
A versão atualmente disponível no pear é a 1.1.9
Para verificar se esta correto e ver a versão instalada execute :

$ behat -V
Behat version 1.1.9

Depois de concluir a instalação o Behat esta pronto para ser usado.
para isso vamos inicializar o projeto de testes com o Behat

$ cd path-to-my-app
$ behat --init

O comando behat –init vai criara a estruturar de diretórios usada p organizar os teste do Behat

|-- features
   |-- steps            ##Diretório dos arquivos que contem os cenários de testes
       |-- steps.php
   |-- support          ##Configurações, requires e configs de ambiente
       |-- bootstrap.php
       |-- env.php

A definição de um historias e cenários de teste é bem simples.
Utilizando algumas palavras chaves : Feature, Scenario, Given, When, Then, But or And
Os cenários são escritos em arquivos .feature que serão interpretados pelo Behat

features/contacts.feature

Feature: Contacts Registration
    In order to demonstrate the framework
    As a SouDev using BDD
    I want to register contacts

  Scenario: Add new contact
    Given a contact named "Fabio B. Silva" using the email "fabio.bat.silva@gmail.com"
      And the phone "xx xxxx-xxxx"
     When press save
     Then everything will be saved

Com a historia escrita podemos executar o Behat dentro da aplicação
O Behat vai interpretar os arquivos .feature
e mostrar quais funções vc tem que implementar para poder rodas o teste

$ cd path-to-my-app
$ behat
1 scenario (1 undefined)
4 steps (4 undefined)
0m0.03s

You can implement step definitions for undefined steps with these snippets:

$steps->Given('/^a contact named "([^"]*)" using the email "([^"]*)"$/', function($world, $arg1, $arg2) 
    throw new BehatBehatExceptionPending();
);
$steps->And('/^the phone "([^"]*)"$/', function($world, $arg1) 
    throw new BehatBehatExceptionPending();
);
$steps->When('/^press save$/', function($world) 
    throw new BehatBehatExceptionPending();
);
$steps->Then('/^everything will be saved$/', function($world) 
    throw new BehatBehatExceptionPending();
);

Essa definição dos steps que o Behat lançou pode ser copiada para um arquivo de steps.php o que facilita bastante a implementação dos teste..
Porem escrever historias em inglês pode ser meio confuso, mais o tem suporte a i18n oq nos permite escrever as historias em português.
para isso basta adicionar # language: pt_BR no inicio do arquivo .feature
com isso ganhamos as palavras chaves em português : Funcionalidade,Cenario, Scenario, Quando, Então, Entao, Dado, Mas, E

features/contacts.feature

# language: pt_BR
Funcionalidade: Cadastro de contatos
    Para demostrar o funcionamento do framework
    Como SouDev que usa BDD
    Desejo cadastrar contatos

  Cenario: Adicionar um novo contato
    Dado um usuário chamado "Fabio B. Silva" usando o email "fabio.bat.silva@gmail.com"
      E com o telefone "xx xxxx-xxxx"
     Quando pressionar salvar
     Entao os dados serão salvos

E ao executar novamente o Behat a implementação dos teste agora também vem em português :

$ cd path-to-my-app
$ behat
1 scenario (1 undefined)
4 steps (4 undefined)
0m0.03s

You can implement step definitions for undefined steps with these snippets:

$steps->Dado('/^um usuário chamado "([^"]*)" usando o email "([^"]*)"$/', function($world, $arg1, $arg2) 
    throw new BehatBehatExceptionPending();
);
$steps->E('/^com o telefone "([^"]*)"$/', function($world, $arg1) 
    throw new BehatBehatExceptionPending();
);
$steps->Quando('/^pressionar salvar$/', function($world) 
    throw new BehatBehatExceptionPending();
);
$steps->Entao('/^todos os dados serão salvos$/', function($world) 
    throw new BehatBehatExceptionPending();
);

Com essa definição a implementação dos testes para essa feature pode ser feita
features/contacts_steps.php

use AppEntitiesContact, AppEntitiesPhone, AppServicesContactService;

$steps->Dado('/^um usuário chamado "([^"]*)" usando o email "([^"]*)"$/', function($world, $arg1, $arg2) 
    $contact = new Contact();
    $contact->setName($arg1);
    $contact->setEmail($arg2);

    $world->contact = $contact;
);

$steps->E('/^com o telefone "([^"]*)"$/', function($world, $arg1) 
    $world->contact->addPhone(new Phone($arg1));
);

$steps->Quando('/^pressionar salvar$/', function($world) 
    $world->saveReturn = ContactService::getInstance()->save($world->contact);
);

$steps->Entao('/^todos os dados serão salvos$/', function($world) 
     assertTrue($world->saveReturn);
);

O BDD e TDD são ferramentas essenciais para um software bem feito,
Infeliz mente muitos “desenvolvedores” ainda tem resistência a aderir ao teste e por achar perda de tempo, tedioso, etc..
O fato é que uma suite de testes bem feita vai tornar sua aplicação muito mais estável e vai lhe economizar tempo e cabelos ao longo do projeto. rsrs

Gostei bastante do Behat é um projeto muito bem estruturado e em constante evolução a versão 2.0 esta prestes a sair
Vale apena dar uma conferida na Documentação do Behat

E Para quem tiver o interesse deixei a app no git
https://github.com/FabioBatSilva/bdd-php-behat

Abraço e até a próxima….

Olá,

Nesse Post vou mostrar um pouco de desenvolvimento PHP usando BDD (Behaviour-Driven Development).
O BDD é uma prática ágil que tem como objetivo facilitar o desenvolvimento orientado a testes,
onde o software é direcionados por comportamentos, trazendo para o contexto de destes os casos de uso ou historias da aplicação.

Enquanto em TDD (Test Driven Development) testamos a aplicação de forma granular em um ambiente micro
no BDD os testes são globais voltados para a Funcionalidade, Casos de uso, Comportamentos, etc..

Como se em TDD testamos a aplicação de dentro para fora e já em BDD a aplicação é testada de fora para dentro.
Existe muito material sobre esse assunto p ai e muita gente mais preparada que eu para abordar esse assunto de forma teorica,
Então nesse Post vou mostrar na pratica um pouco de desenvolvimento PHP usando o Behat

Behat é um framework BDD em PHP 5.3 construindo sobre de componentes do Symfony2.
Behat foi inspirado no Cucumber do Rails e especialmente a parte da sintaxe das features.

A instalação do Behat pode ser feita baixando diretalente pelo git diretamente pelo do git: http://github.com/Behat/Behat
Ou instalando através do pear :

$ pear channel-discover pear.behat.org
$ pear install behat/behat

Se tudo der certo o Behat esta instalado
A versão atualmente disponível no pear é a 1.1.9
Para verificar se esta correto e ver a versão instalada execute :

$ behat -V
Behat version 1.1.9

Depois de concluir a instalação o Behat esta pronto para ser usado.
para isso vamos inicializar o projeto de testes com o Behat

$ cd path-to-my-app
$ behat --init

O comando behat –init vai criara a estruturar de diretórios usada p organizar os teste do Behat

|-- features
   |-- steps            ##Diretório dos arquivos que contem os cenários de testes
       |-- steps.php
   |-- support          ##Configurações, requires e configs de ambiente
       |-- bootstrap.php
       |-- env.php

A definição de um historias e cenários de teste é bem simples.
Utilizando algumas palavras chaves : Feature, Scenario, Given, When, Then, But or And
Os cenários são escritos em arquivos .feature que serão interpretados pelo Behat

features/contacts.feature

Feature: Contacts Registration
    In order to demonstrate the framework
    As a SouDev using BDD
    I want to register contacts

  Scenario: Add new contact
    Given a contact named "Fabio B. Silva" using the email "fabio.bat.silva@gmail.com"
      And the phone "xx xxxx-xxxx"
     When press save
     Then everything will be saved

Com a historia escrita podemos executar o Behat dentro da aplicação
O Behat vai interpretar os arquivos .feature
e mostrar quais funções vc tem que implementar para poder rodas o teste

$ cd path-to-my-app
$ behat
1 scenario (1 undefined)
4 steps (4 undefined)
0m0.03s

You can implement step definitions for undefined steps with these snippets:

$steps->Given('/^a contact named "([^"]*)" using the email "([^"]*)"$/', function($world, $arg1, $arg2) 
    throw new BehatBehatExceptionPending();
);
$steps->And('/^the phone "([^"]*)"$/', function($world, $arg1) 
    throw new BehatBehatExceptionPending();
);
$steps->When('/^press save$/', function($world) 
    throw new BehatBehatExceptionPending();
);
$steps->Then('/^everything will be saved$/', function($world) 
    throw new BehatBehatExceptionPending();
);

Essa definição dos steps que o Behat lançou pode ser copiada para um arquivo de steps.php o que facilita bastante a implementação dos teste..
Porem escrever historias em inglês pode ser meio confuso, mais o tem suporte a i18n oq nos permite escrever as historias em português.
para isso basta adicionar # language: pt_BR no inicio do arquivo .feature
com isso ganhamos as palavras chaves em português : Funcionalidade,Cenario, Scenario, Quando, Então, Entao, Dado, Mas, E

features/contacts.feature

# language: pt_BR
Funcionalidade: Cadastro de contatos
    Para demostrar o funcionamento do framework
    Como SouDev que usa BDD
    Desejo cadastrar contatos

  Cenario: Adicionar um novo contato
    Dado um usuário chamado "Fabio B. Silva" usando o email "fabio.bat.silva@gmail.com"
      E com o telefone "xx xxxx-xxxx"
     Quando pressionar salvar
     Entao os dados serão salvos

E ao executar novamente o Behat a implementação dos teste agora também vem em português :

$ cd path-to-my-app
$ behat
1 scenario (1 undefined)
4 steps (4 undefined)
0m0.03s

You can implement step definitions for undefined steps with these snippets:

$steps->Dado('/^um usuário chamado "([^"]*)" usando o email "([^"]*)"$/', function($world, $arg1, $arg2) 
    throw new BehatBehatExceptionPending();
);
$steps->E('/^com o telefone "([^"]*)"$/', function($world, $arg1) 
    throw new BehatBehatExceptionPending();
);
$steps->Quando('/^pressionar salvar$/', function($world) 
    throw new BehatBehatExceptionPending();
);
$steps->Entao('/^todos os dados serão salvos$/', function($world) 
    throw new BehatBehatExceptionPending();
);

Com essa definição a implementação dos testes para essa feature pode ser feita
features/contacts_steps.php

use AppEntitiesContact, AppEntitiesPhone, AppServicesContactService;

$steps->Dado('/^um usuário chamado "([^"]*)" usando o email "([^"]*)"$/', function($world, $arg1, $arg2) 
    $contact = new Contact();
    $contact->setName($arg1);
    $contact->setEmail($arg2);

    $world->contact = $contact;
);

$steps->E('/^com o telefone "([^"]*)"$/', function($world, $arg1) 
    $world->contact->addPhone(new Phone($arg1));
);

$steps->Quando('/^pressionar salvar$/', function($world) 
    $world->saveReturn = ContactService::getInstance()->save($world->contact);
);

$steps->Entao('/^todos os dados serão salvos$/', function($world) 
     assertTrue($world->saveReturn);
);

O BDD e TDD são ferramentas essenciais para um software bem feito,
Infeliz mente muitos “desenvolvedores” ainda tem resistência a aderir ao teste e por achar perda de tempo, tedioso, etc..
O fato é que uma suite de testes bem feita vai tornar sua aplicação muito mais estável e vai lhe economizar tempo e cabelos ao longo do projeto. rsrs

Gostei bastante do Behat é um projeto muito bem estruturado e em constante evolução a versão 2.0 esta prestes a sair
Vale apena dar uma conferida na Documentação do Behat

E Para quem tiver o interesse deixei a app no git
https://github.com/FabioBatSilva/bdd-php-behat

Abraço e até a próxima….

Click aqui para ver o post Original

Fabio B. Silva
http://www.flexria.com.br

Faz algum tempo que não escrevo aqui no blog, estou em vários projetos simultâneos e acabei ficando sem gás para escrever no mesmo ritmo que antes. Para compensar, hoje vou disponibilizar um componente de notificação bem bacana que criei para um treinamento in company de Flex. O código aborda diversos conceitos interessantes do Flex 4 como states, FXG e Spark Skinning. Além disso, o componente é um excelente exemplo de onde utilizar o design pattern Singleton.

O componente possui 3 classes:

NotificatorMode.as
Utilizado como um “Enum”, define as constantes que representam os estados do componente: Warning, Success e Failure.

NotificatorManager.as
Implementação do padrão de projeto Singleton, responsável por manipular as mensagens de notificação.

Notificator.mxml
Classe que define a aparência, comportamento e estados do componente de notificação.

A pasta /assets contêm os arquivos que foram gerados no Fireworks e exportados como FXG para o Flash Builder.

Your browser does not support iframes.

Quer o código fonte? Baixe aqui..

Espero que tenham gostado. Até a próxima!

Por padrão o componente TextArea do Flex não possui função de desfazer e refazer, com isso resolvi implementar estas duas funções.

Para testar é só digitar um texto, e pressionar Ctrl+Z para desfazer e Ctrl+Y para refazer.

*download do fonte: botão direito “View Source”

Código Fonte:

/*############################################################*/
/*                                                            */
/*   Powered by: Samuel Facchinello                           */
/*   http://desenvolvendoemflex.blogspot.com/                 */
/*                                                            */
/*############################################################*/
package com.blogspot.desenvolvendoemflex.utils
    import flash.events.Event;
    import flash.events.KeyboardEvent;

    import mx.collections.ArrayCollection;
    import mx.controls.Alert;
    import mx.controls.TextArea;

    /**
     *
     * @author SAMUEL FACCHINELLO
     * @site http://desenvolvendoemflex.blogspot.com/
     */
    public class TextAreaWithUndo extends TextArea 

        /**
         * Variable of control position Undo or Redo
         * */
        [Bindable]
        private var _position:int = -1;

        public function get position():int
            return _position;

        /**
         * Variable that stores all typed letters
         * */
        [Bindable]
        private var _array:ArrayCollection = new ArrayCollection();

        public function get array():ArrayCollection
            return _array;

        /**
         * Constructor
         *
         */
        public function TextAreaWithUndo()
            super();
            //add value default
            addValue("");

            //add Event on KeyDown
            addEventListener(KeyboardEvent.KEY_DOWN, myKeyDown);

        /**
         * Function with KeyDown
         * @param eventObj: KeyboardEvent
         *
         */
        private function myKeyDown(eventObj:KeyboardEvent):void
            // Was Ctrl key pressed?
            if (eventObj.ctrlKey)
                var valueReturn:String = null;

                switch (eventObj.keyCode) 

                    case 90: // Was Ctrl-Z pressed?
                        valueReturn = returnPrevisionValue();
                        break;

                    case 89: // Was Ctrl-Y pressed?
                        valueReturn = returnNextValue();
                        break;

                    default:
                        break;

                //if return exist
                if (valueReturn!=null)
                    //set text with return functions
                    text = valueReturn;

                    //select last _position in TextArea
                    setSelection(text.length, text.length);

            } else
                //only adds to the list if any of these characters.
                //list from here: http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00000520.html
                if ((eventObj.keyCode>=65&&eventObj.keyCode<=90)
            }
        }

        /**
         * Function that adds the letters in the array
         * @param value: propertie "text" of TextArea
         *
         */
        private function addValue(value:String):void
            //it was press Ctrl + Z ever, and was entered some value, clears the values ??of the position in which this forward
            if (_array.length>0&&_array.length-1>_position)
                for (var i:int = _array.length-1; i>_position; i--)
                    _array.removeItemAt(i);

            }

            //if the value is being added is equal to the last added, not added!
            if (_array.length>0)
                if (value==_array.getItemAt(_array.length-1))
                    return;

            }

            _array.addItem(value);
            _position++;
        }

        /**
         * triggered when press Ctrl + Y
         * @return : Returns the next value from the list according to position
         *
         */
        private function returnNextValue():String
            if (_position+1>=0&&_position+1<_array.length)
                _position++;
                return _array.getItemAt(_position) as String;

            return null;
        }

        /**
         * triggered when press Ctrl + Z
         * @return : Returns the Prevision value from the list according to position
         *
         */
        private function returnPrevisionValue():String
            if (_position-1>=0)
                _position--;
                return _array.getItemAt(_position) as String;

            return null;
        }
    }
}

Adicionei este componente ao Google Code, pode ser visto aqui: http://code.google.com/p/textarea-with-undo/

Qualquer elogio, dúvida, sugestão ou melhoria para o componente, deixe um comentário!!

Abraço, até a próxima.

*Tradução para o inglês com o Google Translate.

Eu confesso que nunca me interessei em desenvolver sites e muito menos aplicações web utilizando ASP.net, sempre achei que a metodologia “drag and drop” que o Web Forms nos proporciona não funciona legal na web, pois ela gera muito “lixo” para o navegador, e isso é crucial em uma WebAPP.

Portanto, desde que migrei de desktop (Delphi 7) para web, tenho trabalhado com o nosso querido Flex no Front End e o C#.net no Back End. Mas desde que o ASP.net MVC foi lançado, tenho acompanhado de perto a sua evolução, e confesso que ele tem me agradado bastante.

Para não perder o costume, venho hoje compartilhar com vocês um pouco do que tenho estudado, este post faz uma comparação de um projeto idêntico criado usando as duas metodologias.

Então chega de conversa e vamos ao que interessa:

As ferramentas que utilizei para criar os projetos foram:
• SQL Server 2008 Express
• Visual Web Developer Express 2010
• Framework ASP.net MVC 2.0

O projeto acessa uma base de dados com apenas uma tabela, com a seguinte estrutura:

Não utilizei nenhum framework ORM, fiz o mapeamento das entidades manualmente, usando as classes nativas do Framework. (SqlConnection, SqlCommand e SqlDataReader).

Quando criei os projetos, utilizei os templates do prório Visual Web Developer:

Para o projeto Web Forms, usei ASP.NET Web Application.
Para o projeto MVC usei: ASP.NET MVC 2 Web Application.

É claro que não vou fazer um passo a passo de como criar o projeto, o foco deste post não é isso, mas depois de pronto, nosso Solution Explorer do projeto WebForms ficará assim:

Já o projeto MVC, tem uma estrutura um pouco maior, porque ele trabalha completamente “tipado”, temos as classes Model, Controller e View, como manda o figurino:

Certo, agora vamos ao objetivo, quando executo o projeto WebForms e acesso a página de clientes, o Framework gera este código HTML:

"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">"http://www.w3.org/1999/xhtml" xml:lang="en">
"../Styles/Site.css" rel="stylesheet" type="text/css" />
"post" action="default.aspx" id="ctl01">
class="aspNetHidden">
"hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
"hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
"hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="ZhpEPEbRGaEf3wxNFvEkKLAz6ze4Y1776/kxLQ+oQoJx5Ew6ZrkBOLulNNEfu2T+c9uFRH7RTl5UUrZ3A1gK1BMKQc174Sha+0Wt5wmfhTKcGIb1YUgfoyjwcO8TYaR3U3o3l/07IemJNiwmeH8cM7BzSKkWiBTRuwjyI6u7VHlH7TyWLCMw0bneQ8edbb2YBMnGslvv7YSjWb5RdYMIjhu77ZE4CwQwK75UxHI1QZUgHjIaNP7MrZpoxi+tQbCBVW9Lc3jZCq0gbouSkWw7epm9WZknpiH5T68BTGirDfP4BfUZygsyB6aHmrpdN47pKJz7kFH78soAuE4Yd1NWNk9mHK+6ErcoVe3EkH8ycfXm51UwzkwNp2XRdr2s2AANsWpDdxNhyDTo2Mia2/YrPGirUzqV62RWlVWpS/KBwBpdtSLlYVnLaU6eJyjrJhqXxKzTa8b3F1av8h40cX5teT+0odXAWB3E2GcrE9XGfwa1ACk5QQlFsh+UplF/dEuzes6UBjJd9LQS7kPVabfzs/y8L3BRsK0Rtb0i1unXfHMuq3eVg/XQGnwb9uEhL5EdHjniskkoUzQh1T2yJfPwajrjxU06M5Ba43Soj8pk03isqi4tBqBllPVkv13Hyz8eapd85VejaO+3CUqXVr3J9/3MvZWjNcA2QOef7H4xKmtVExbxingFQqj5K5appmJReVczk8/HLCOnLD+Wa5/7CKWTj/OucQgIgPYnGEpzMZUlKJZFLAeFfwwkR2XVZcyyCoYWjK2pJX5zuCXMVkMxKCCuWjVvtl3GPfUkz1nsgP/Jtyq7vSdiXdGE/qxV8yRGJN5h4MlvVOfYq2gKspcNIZzwCzVCidhdoY8SYjnz+qyIXmXxXD3VkF2XGbcId86i/qOkwOyk9UcAS8iR+Es/MkQg7WximaQQji+o67grOaE=" />






class="aspNetHidden">
"hidden" name="__VIEWSTATEENCRYPTED" id="__VIEWSTATEENCRYPTED" value="" />
"hidden" name="__PREVIOUSPAGE" id="__PREVIOUSPAGE" value="J0z-AYjFMhWT0kpqMD21gr0HoEKRmyw5_w3a37YYi27BAPn9DepNebG_20nPZ-VajOl1_KCPnab6uApAzjeQe7rOkN95u7baMYMKLA59Jpw1" />
"hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="IRcnHy6RQ1JCPCa5l/6k5JvtDNRbcbaJH7wDUCh/MVtgwLHo5W/iwGkTGRYeZHjYgqrWjjGjzZQvt+FJuMho2GE+Qf3syKzyeGXquF9a/Ws577KUO6oFdTWrhmsBXMMh" />

class="page">
class="header">
class="title">
                    My ASP.NET Application                

class="loginDisplay">

                        [ "../Account/Login.aspx" id="HeadLoginView_HeadLoginStatus">Log In ]
class="clear hideSkiplink">                "#NavigationMenu_SkipLink">"Skip Navigation Links" src="/WebResource.axd?d=xFBnuqKYnqgWTzzLZBOde45ezhDnXgdvOgtOQCvZwJw6xfKBic_vxFOBRotUqhEobwKQWWgbNXfNYvZsldu9uZj6j6aYf49eocT9vsEpgtM1&t=634356288728593750" width="0" height="0" style="border-width:0px;" />
class="menu" id="NavigationMenu">
class="level1">
class="level1" href="../Default.aspx">Home
class="level1" href="../About.aspx">About



"NavigationMenu_SkipLink">            

class="main">

        Listagem Completa de Clientes    

    

    

"0" rules="all" border="1" id="MainContent_GridView1" style="border-collapse:collapse;">

"col">Id_Cliente
"col">Nome
"col">CPF
"col">RG
"col">Idade
"col"> 
"col"> 


17
Jo?o
123.123.123-12
12.312.123-1
30
"Edita.aspx?Id_Cliente=17">Editar


                    "return confirm('Tem certeza?');" id="MainContent_GridView1_LinkButton1_0" href="javascript:__doPostBack('ctl00$MainContent$GridView1$ctl02$LinkButton1','')">Excluir                


19
Jos?
444.444.444-44
44.444.444-4
21
"Edita.aspx?Id_Cliente=19">Editar
                    "return confirm('Tem certeza?');" id="MainContent_GridView1_LinkButton1_1" href="javascript:__doPostBack('ctl00$MainContent$GridView1$ctl03$LinkButton1','')">Excluir



18
Maria
999.999.999-99
99.999.999-9
35
"Edita.aspx?Id_Cliente=18">Editar
                    "return confirm('Tem certeza?');" id="MainContent_GridView1_LinkButton1_2" href="javascript:__doPostBack('ctl00$MainContent$GridView1$ctl04$LinkButton1','')">Excluir                





"submit" name="ctl00$MainContent$btnInserir" value="Inserir novo cliente" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$btnInserir", "", false, "", "Insere.aspx", false, false))" id="MainContent_btnInserir" />    

class="clear">

class="footer">

Dêem uma olhada em quanto código os componentes criam. É muita coisa, imaginem isso em um grande portal? Americanas.com gerando este código? Meio inviável não? Aproveito para destacar o código gerado pelo ViewState, herói e vilão do Web Forms.

Agora vamos comparar a mesma página gerada pelo projeto MVC:

"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">"http://www.w3.org/1999/xhtml">
"Content/Site.css" rel="stylesheet" type="text/css" />


class="page">
"header">
"title">
My MVC Application

"logindisplay">

        [ "/Account/LogOn">Log On ]
"menucontainer">
"menu">
"/">Home
"/Home/About">About


"main">
Listagem completa de clientes:


                Código            
                Nome            
                CPF            


                RG            
                Idade            





                30            
                Jo?o            
                123.123.123-12            
                12.312.123-1            
                30            
                "/Cliente/Edit?Id_Cliente=30">Editar |                "/Cliente/Delete?Id_Cliente=30" onclick="return confirm('Tem certeza?');">Excluir |            


                32            
                Jos?            
                444.444.444-44            
                44.444.444-4            
                21            
                "/Cliente/Edit?Id_Cliente=32">Editar |                "/Cliente/Delete?Id_Cliente=32" onclick="return confirm('Tem certeza?');">Excluir |            


                31            
                Maria            
                999.999.999-99            
                99.999.999-9            
                35            
                "/Cliente/Edit?Id_Cliente=31">Editar |                "/Cliente/Delete?Id_Cliente=31" onclick="return confirm('Tem certeza?');">Excluir |            



        "/Cliente/Create">Novo cliente...    
"footer">

O que acham? As duas páginas fazem exatamente a mesma coisa, no entato o MVC gera beeeem menos código.

Bom pessoal, essa é apenas uma das vantagens do MVC, posso destacar outras:

• Controle total do código que será enviado ao navegador;
• Arquitetura em camadas, códigos completamente separados;
• Classes que auxiliam a geração do HTML para o browser de acordo com as ações do Controlador, sem lixo!;
• Facilidade de se implementar Ajax (de verdade) no seu projeto.
• Integração com o Jquery usando classes do Framework;

Bom é isso, vou me despedindo, mas antes deixo o código fonte dos dois projetos disponíveis para download.