No post anterior vimos como mudar a posição dos componentes PodWindow utilizando apenas o container PodManager. Hoje vou mostrar como você pode alterar a aparência da aplicação e do componente PodWindow aplicando as técnicas de skinning do Flex 4.

Comece criando uma nova classe skin para a aplicação em com.rectius.examples.view.assets.AdvancedPodExampleSkin, conforme o código abaixo:

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    -- host component -->
    <fx:Metadata>
        [HostComponent("spark.components.Application")]
    fx:Metadata>
?
    -- states -->
    <s:states>
        <s:State name="disabled" />
        <s:State name="normal" />
    s:states>
?
    <s:Rect id="backgroundRect"
            left="0" right="0" top="0" bottom="0">
        <s:fill>
            --- @private
            <s:SolidColor id="bgRectFill" color="#FFFFFF"/>
            -->
            <s:RadialGradient>
                -- First color is the inside -->
                <s:GradientEntry alpha="1" color="#9EC993" />
                -- Second color is the outside -->
                <s:GradientEntry alpha="1" color="#5F9653" />
            s:RadialGradient>
        s:fill>
    s:Rect>
?
    <s:Path
        data="   m 0 0
        l 1600 0
        l 0 100
        c -300 -25 -300 50 -1600 50
        z">
        <s:fill>
            <s:RadialGradient>
                -- First color is the inside -->
                <s:GradientEntry alpha=".6" color="#75A06A" />
                -- Second color is the outside -->
                <s:GradientEntry alpha=".6" color="#4B7343" />
            s:RadialGradient>
        s:fill>
    s:Path>
?
    <s:Group left="0" right="0" top="0" bottom="0">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="justify" />
        s:layout>
        --- @copy spark.components.SkinnableContainer#contentGroup -->
        <s:Group id="contentGroup"
                width="100%" height="100%"
                minWidth="0" minHeight="0"/>
    s:Group>
?
s:Skin>

Agora altere a classe skin da sua application:

<?xml version="1.0" encoding="utf-8"?>
<s:Application
   xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx"
   xmlns:components="com.rectius.examples.pod.components.*"
   xmlns:view="com.rectius.examples.view.*"
   skinClass="com.rectius.examples.view.assets.AdvancedPodExampleSkin"
   width="100%" height="100%">
?
    <s:Group
        left="0" right="0"
        top="0" height="30"
        clipAndEnableScrolling="true">
        <s:Rect left="0" right="0"
                top="0" bottom="0">
            <s:fill>
                <s:LinearGradient rotation="90">
                    <s:GradientEntry
                        color="#858585" ratio=".2" />
                    <s:GradientEntry color="#676767"  />
                s:LinearGradient>
            s:fill>
        s:Rect>
        <s:Label
            text="rDashboard"
            fontWeight="bold" color="0xCCCCCC"
            left="5" verticalCenter="0" />
        <s:List
            id="podMinimizedList" left="100" verticalCenter="0"
            skinClass="com.rectius.examples.pod.assets.skins.PodListMinimizedSkin"
            itemRenderer="com.rectius.examples.pod.assets.itemrenderer.PodListItemRenderer"
            dataProvider="{podManager.minimizedPods}">
            <s:layout>
                <s:HorizontalLayout
                    paddingBottom="3" paddingLeft="2"
                    paddingTop="3" paddingRight="2" />
            s:layout>
        s:List>
    s:Group>
?
    <components:PodManager id="podManager"
        skinClass="com.rectius.examples.pod.assets.skins.PodManagerHorizontalSkin"
        left="10" right="10" top="40" bottom="15">
?
        <components:firstElements>
            <view:ChartProfit
                width="100%" height="100%"
                title="Profit"/>
            <view:ChartExpenses
                width="100%" height="100%"
                title="Expenses" />
        components:firstElements>
?
        <components:secondElements>
            <view:ChartWidget
                width="100%" height="100%"
                title="Widget"/>
        components:secondElements>
?
    components:PodManager>
?
s:Application>

Rode a aplicação. O resultado deverá ser esse:

Em seguida vamos crar a classe skin com.rectius.examples.pod.assets.skins.PodWindowAdvancedSkin para o componente PodWindow:

<?xml version="1.0" encoding="utf-8"?>
<s:Skin
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">
    -- host component -->
    <fx:Metadata>
        [HostComponent("com.rectius.examples.pod.components.PodWindow")]
    fx:Metadata>
?
    -- states -->
    <s:states>
        <s:State name="maximized" />
        <s:State name="minimized" />
        <s:State name="default" />
        <s:State name="inactiveWithControlBar" stateGroups="inactiveGroup" />
        <s:State name="inactive" stateGroups="inactiveGroup" />
        <s:State name="disabled" />
        <s:State name="normal" />
    s:states>
?
    --- drop shadow can't be hittable so it stays sibling of other graphics @private-->
    
?
    
                    <s:Label
                        id="titleDisplay"
                        maxDisplayedLines="1"
                        left="9" right="36"
                        top="1" bottom="0"
                        minHeight="30"
                        verticalAlign="middle"
                        fontWeight="bold" color="0xE6E6E6" />
?
                    --- layer 4: moveArea -->
                    --- @copy spark.components.TitleWindow#moveArea -->
                    <s:Group id="moveArea"
                        left="0" right="45"
                        top="0" bottom="0"
                        buttonMode="true"/>
?
                    <s:Button
                        id="minimizeButton"
                        buttonMode="true"
                        skinClass="com.rectius.examples.pod.assets.skins.PodWindowMinimizeButtonSkin"
                        width="15" height="15"
                        right="25" top="7" />
?
                    <s:Button
                        id="maximizeButton"
                        buttonMode="true"
                        skinClass="com.rectius.examples.pod.assets.skins.PodWindowMaximizeButtonSkin"
                        skinClass.maximized="com.rectius.examples.pod.assets.skins.PodWindowRestoreButtonSkin"
                        width="15" height="15"
                        right="7" top="7" />
?
            s:Group>
?
            --- @copy spark.components.SkinnableContainer#contentGroup -->
            <s:Group
                id="contentGroup"
                width="100%" height="100%"
                minWidth="0" minHeight="0"
                clipAndEnableScrolling="true">
            s:Group>
?
        s:Group>
?
    s:Group>
?
s:Skin>

Modifique o componente PodWindow para setar a nova classe skin com.rectius.examples.pod.assets.skins.PodWindowAdvancedSkin:

<?xml version="1.0" encoding="utf-8"?>
<components:PodWindow
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:components="com.rectius.examples.pod.components.*"
    skinClass="com.rectius.examples.pod.assets.skins.PodWindowAdvancedSkin"
    width="100%" height="100%">
components:PodWindow>

O resultado final será esse:

Your browser does not support iframes.

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

Two-way data binding é uma das novidades do flex 4 e para quem não conhece, vou mostrar como funciona e o que mudou em relação ao Flex 3.

No Flex 3 tinhamos data binding de apenas uma via, como mostra o exemplo abaixo:

Nesse exemplo, caso o valor da caixa de texto do tiValor1 mudasse, o valor da caixa de texto do tiValor2 seria alterado também, porém, se o valor da caixa tiValor2 fosse alterado, nada seria refletido a caixa de texto tiValor1.

No Flex 4 temos data binding de duas vias, como mostra o exemplo:

Nesse exemplo notamos que a anotação “@” foi colocada antes do meu código “{tiValor1.text}”, essa anotação identifica um data binding de duas vias. O resultado desse exemplo é: Caso eu altere o texto da caixa de texto tiValor1, ele será refletido na caixa de texto tiValor2, e vice-versa.

Obviamente esse exemplo da funcionalidade é muito básico e serve apenas para demonstrar a funcionalidade, logo vou apresentar uma situação real que acontece a todo momento em qualquer aplicação.

Para o nosso exemplo real, vou utilizar uma situação comum para qualquer tipo de aplicação, o CRUD. Para todo CRUD precisamos sempre fazer essas 3 operações:
1. Mostrar o objeto carregado do back-end nas caixas de texto. (Famoso método carregaObjeto)
2. Atualizar o objeto com os novos valores das caixas de texto. (Famoso método preencherObjeto)
3. Limpar as caixas de textos. (Famoso método limpar)

No flex 3 teriamos o seguinte cenário.
Para a situação 1:
caixaDeTexto.text = Objeto.valor;
Para a situação 2:
Objeto.valor = caixaDeTexto.text;
Para a situação 3:
caixaDeTexto.text = “”;

Para quem usava o data binding do flex 3 de uma forma correta, conseguia resolver uma das situações com ele, mas nas outras situações sempre acabava escrevendo a linha de código apresentada.

No flex 4 poderiamos resolver da seguinte forma:

Com essa simples mudança, nós evitaríamos todas as situações acima, dispensando os métodos de carregarObjeto, preencherObjeto e limpar objeto.

Veja o exemplo funcional abaixo:

Fonte:

PLAIN TEXT

ACTIONSCRIPT:

1. xml version=“1.0″ encoding=“utf-8″?>
2. “http://ns.adobe.com/mxml/2009″
3. ? ? ? ? ? ?? ? xmlns:s=“library://ns.adobe.com/flex/spark” maxHeight=“400″ maxWidth=“600″
4. ? ? ? ? ? ?? ? xmlns:mx=“library://ns.adobe.com/flex/mx” width=“600″ height=“400″ xmlns:local=“*”>
5. ? ?
6. ? ? ? ? “user”>
7. ? ? ? ? ? ? 1
8. ? ? ? ? ? ? Bruno Sales
9. ? ? ? ? ? ? São Paulo
10. ? ? ? ?
11. ? ?
12. ? ?
13. ? ?
14. ? ? ? ? [CDATA[
15. ? ? ? ? ? ? private function recarregar():void
16. ? ? ? ? ? ? {
17. ? ? ? ? ? ? ? ? user = new User("1", "Bruno Sales", "São Paulo");
18. ? ? ? ? ? ? }
19. ? ? ? ? ]]>
20. ? ?
21. ? ?
22. ? ?
23. ? ? ? ? “middle” horizontalAlign=“center”/>
24. ? ?
25. ? ?
26. ? ? “Form” width=“250″ height=“180″>
27. ? ? ? ?
28. ? ? ? ? ? ? “Id”>
29. ? ? ? ? ? ? ? ? “tiValor1″ text=“@{user.id}” maxChars=“20″/>
30. ? ? ? ? ? ?
31. ? ? ? ? ? ? “Nome”>
32. ? ? ? ? ? ? ? ? “tiValor2″ text=“@{user.nome}” maxChars=“20″/>
33. ? ? ? ? ? ?
34. ? ? ? ? ? ? “Cidade”>
35. ? ? ? ? ? ? ? ? “tiValor3″ text=“@{user.cidade}” maxChars=“20″/>
36. ? ? ? ? ? ?
37. ? ? ? ? ? ? “right”>
38. ? ? ? ? ? ? ? ? Button label=“Limpar” click=“user = new User()”/>
39. ? ? ? ? ? ?
40. ? ? ? ?
41. ? ?
42. ? ?
43. ? ? “Objeto User” width=“300″ height=“180″>
44. ? ? ? ?
45. ? ? ? ? ? ? “middle” horizontalAlign=“center”/>
46. ? ? ? ?
47. ? ? ? ? “label” text=“{user.toString()}”/>
48. ? ? ? ? Button label=“Recarregar Objeto” click=“recarregar()”/>
49. ? ?
50. ?

Este tutorial é o primeiro de uma série de tutoriais sobre o sistema operacional Android. Inicialmente falarei um pouco sobre o que é o android, para que os iniciantes entendam um pouco melhor o que está por trás deste Sistema Operacional que, em tão pouco tempo, conquistou uma fatia tão grande do mercado de mobiles.

O Android

É uma plataforma open source criada, como muitos devem saber, pelo Google. Mas não apenas por ele. Do desenvolvimento deste SO participou o grupo Open Handset Alliance, que conta com outros 47 grandes nomes, como: HTC, LG, Samsung, Motorola, Toshiba, Sprint Nextel, T-Mobile, Asus, Intel, e muitos outros (Mais informações sobre a OHA podem ser encontradas em: http://www.openhandsetalliance.com/).

O SO e a máquina virtual

Baseado no kernel 2.6 do Linux, o SO do Android é responsável por gerenciar a memória, os processos, segurança de arquivos e pastas e também redes e drivers. Cada aplicativo dispara um processo no sistema operacional e cada processo possui uma thread dedicada. O sistema operacional tem total controle sobre os processos e pode, se necessário, encerrá-los e reiniciá-los para liberar recursos.

A linguagem utilizada para desenvolvimento de aplicações em Android, como muitos devem saber, é Java. Mas o que poucos sabem é que o SO não possui uma JVM, e sim uma máquina virtual chamada Dalvik, otimizada para mobile.

Configuração inicial

A seguir está um tutorial passo-a-passo sobre como instalar o SDK do Android no Eclipse para que possamos começar a desenvolver para esta plataforma.

Assumirei que o Eclipse já está instalado e configurado na sua máquina. Desta forma, a primeira coisa que deve-se fazer é o download do SDK do android. Que pode ser obtido no seguinte endereço:

http://developer.android.com/sdk/index.html

Após fazer o download do SDK, extraia-o para alguma pasta do seu sistema, como “D:/Android_SDK”, por exemplo. Utilize o update manager do Eclipse para instalar os plug-ins disponíveis para o Android Development Tools (ADT) pela URL: https://dll-ssl.google.com/android/eclipse

Em seguida deve-se configurar o “caminho” para onde você salvou o SDK na guia “preferences” do seu Eclipse:

O próximo passo é instalar os pacotes do SDK disponíveis através do ADT:

Após selecionar os pacotes desejados, clique em “Install Selected” e confirme as licenças para cada um deles. O passo seguinte é instalar um AVD (Android Virtual Device) para que você possa testar seus aplicativos.

Na mesma janela do ADT, selecione a aba “Virtual Devices” , clique em “New”, configure como desejar e clique em “Create AVD”:

Em seguida teste seu AVD. Selecione-o na lista, clique em “Start…” e em seguida em “Launch”:

Parabéns! Seu Eclipse agora está configurado para que você comece a desenvolver aplicativos para Android.

Hello, World!

Agradecimentos ao @eduardohorvath pelo apoio e auxílio na estruturação do post.

Bom, acho que essa dica vai ajudar se você está pensando em testar componentes visuais.

No projeto do componente de organograma para a Petrobrás, além dos testes unitários padrões eu me aventurei um pouco com testes visuais do componente para me assegurar que dada uma modificação de algumas propriedades no componente o mesmo estava modificando corretamente sua visualização e avisando os componentes de suporte como Navigator, Logger dessas modificações.

O problema de testes visuais que acredito que todos saibam está no ciclo de vida dos componentes. Não conseguimos ser determinísticos em quanto tempo o componente estará pronto para sofrer asserts em suas propriedades. Vamos começar com o setUp e o tearDown de um teste unitário visual.

Vamos utilizar o FlexUnit 4.x nos casos de teste

[Before( async, ui )]
Será executado antes de todos os casos de teste. As indicações async e ui na metadata dizem para o Runner do teste que esse método possui processos assíncronos e que o mesmo deve verificar a classe Async para proceder com o teste.

Async.proceedOnEvent( this, _chart, FlexEvent.CREATION_COMPLETE, 1000 )
Avisa que o teste só deve continuar quando o evento FlexEvent.CREATION_COMPLETE for disparado pelo componente.

UIImpersonator.addChild( _chart );
Adiciona o componente como um filho de uma espécie de Application que iniciará o ciclo de vida de criação do componente.

[After( ui )]
Executando após o teste em questão ser executado. Faz a limpeza dos elementos criados anteriormente.

UIImpersonator.removeChild( _chart );
Remove o componente da lista de filhos e executa o ciclo de vida de destruição do componente.

No caso do componente, ao setar o dataProvider ele modifica o dataProvider de um DataGroup interno, que consequentemente vai efetuar a criação dos renderers. Nesse teste estamos validando se “ao preencher o dataProvider o DataGroup está criando os renderers enviados na coleção” efetuando a contagem de elementos presentes no DataGroup.

Utilizando o mesmo tipo de teste assíncrono podemos testar algumas interações do usuário como MouseEvent.MOUSE_CLICK, MouseEvent.MOUSE_MOVE simplesmente pegando a instância do componente criado e executando o evento manualmente. Com isso os listeners serão disparados e você poderá utilizar o Async.asyncHandler para escutar um determinado do componente e efetuar os asserts necessários para validar se a interação modificou as propriedades do componente.

Neste tutorial vou criar uma pequena aplicação utilizando o Expression Blend 4,  será implementado o básico para quem está começando com o desenvolvimento de projetos para o Windows Phone 7 utilizando o Expression Blend 4.

No artigo anterior, vimos como preparar o ambiente gratuito de desenvolvimento para criar aplicações mobile utilizando o Windows Phone 7, o Expression Blend é instalado junto com o Windows Phone Developer Tools, saiba mais em Introdução ao Windows Phone 7.

Se você ainda não conhece o Expression Blend 4, talvez tenha uma dúvida, quando utilizar o Visual Studio 2010 e quando utilizar o Expression Blend ?

Tudo que é produzido em XAML pelo Expression Blend também pode ser reproduzido no Visual Studio 2010, porém, a criação de aplicativos visualmente ricos com as novas tecnologias trouxe novas possibilidades ao programador, como o suporte a elementos multimídias e animações, a possibilidade de modificar como as informações são apresentadas nos elementos visuais e outros diversos recursos, com isso houve a necessidade de ter uma ferramenta voltada ao designer da aplicação, onde o foco seria a camada visual.

O Expression Blend chegou para suprir essa necessidade, dessa forma o designer da aplicação tem uma ferramenta com recursos mais sofisticados e visuais, com o Blend a maioria das tarefas são executadas de forma visual, sem que seja necessário digitar dezenas de códigos, por exemplo, o Expression Blend tem total suporte a criação de animações, possuindo uma timeline, onde o designer poderá acionar a animação e gravar todos os movimentos que fizer com o mouse na aplicação, quando finalizar, todo o código XAML é gerado automaticamente pelo Blend, esse é somente um exemplo do qual a ferramenta gera produtividade quanto à criação visual da interface.

O Expression Blend é totalmente integrado ao Visual Studio 2010, é possível trabalhar com as duas ferramentas abertas com o mesmo projeto, que as modificações são atualizadas em cada ferramenta.

Criando uma aplicação no Expression Blend

A aplicação do tutorial vai listar algumas urls em um ListBox, quando o usuário clicar em um item, a aplicação será redirecionada para outra página em XAML, essa página vai  conter um browser e receberá o link a ser carregado.

Inicie o Expression Blend e crie uma aplicação do tipo Windows Phone Application, Figura 1, na aba Projects, temos os arquivos iniciais da aplicação gerados pelo Expression Blend, a aplicação tem três arquivos de imagens, e dois arquivos do tipo XAML, o XAML (eXtensible Application Markup Language), é uma marcação similar a marcação XML, é utilizada no Silverlight tanto para aplicações WEB como para o WP7, e também é utilizada para criar aplicações desktop com o WPF para o ambiente Windows.

Com a marcação XAML podemos criar layouts de telas separadas do código da linguagem de programação C#, possibilitando assim, um menor acoplamento entre o design e a programação, dessa forma um designer poderia trabalhar no design das telas utilizando somente o XAML, enquanto o programador faz o modelo da aplicação.

Resumidamente o arquivo App.xaml é usado pela aplicação silverlight para declarar recursos compartilhados no projeto, já o arquivo MainPage.xaml é o arquivo principal da aplicação, sua representação visual é a que aparece no centro da tela, mostrando uma interface com um layout inicial de um aplicativo WP7.

Figura 1 – Windows Phone Application

Layout Control

Na aba Objects and Timeline, temos a hierarquia dos elementos visuais da aplicação, em nosso projeto, inicialmente vemos 3 itens, o PhoneApplicationiPage, que é a pagina principal do layout, onde todos os elementos serão inseridos, o ApplicationBar, é uma área reservada para um barra onde podemos personalizar botões e menus para serem usados na aplicação, em seguida temos o LayoutRoot, este é o nome dado ao Layout Control Grid da aplicação default.

Um Layout Control serve para auxiliar no posicionamento de elementos na tela, existem vários controles de layout disponíveis em Silverlight, cada layout control tem sua utilidade dependendo do objetivo, o layout control Grid é um dos mais flexíveis, semelhante a uma tabela HTML, esse controle permite que seja criado linhas e colunas,  além de definir o tamanhos e a altura de cada linha e coluna.

Abaixo segue os tipos de Layouts disponíveis para serem utilizados no Windows Phone 7:

• Grid – Layout mais flexível , é possível inserir os elementos dentro de linhas e colunas.
• Canvas – permite posicionar os elementos em posições fixas dentro do Layout Control, ou seja, você pode definir uma posição exata que o elemento deve ficar no Canvas, fornecendo suporte ao posicionamento absoluto dos elementos filhos.
• StackPanel – Adiciona os elementos em uma pilha, com orientação vertical ou horizontal.
• ScrollViewer – Habilita barras de rolagens vertical e horizontal
•  Border – Insere uma borda em um único elemento interno.

 Veja neste link os Layout Controls na prática, para facilitar o entendimento eu digitei o código XAML abaixo da tela principal, refletindo as modificações, conforme digitadas. (video wmv ).

Conhecendo o MainPage.xaml

A tela inicial da aplicação contém um layout Grid principal, chamado de LayoutRoot , com um fundo transparente. Em seguida temos a definição de duas linhas dentro do layout. Dentro do layout control Grid chamado LayoutRoot temos outro layout control do tipo StackPanel, note que o StackPanel está definido na linha zero do Layout Control Grid acima, utilizando a propriedade Grid.Row = ”0”. Dentro do Stackpanel temos três elementos, um TextBlock chamado ApplicationTitle, onde na propriedade Text você poderá modificar o nome da aplicação para qualquer nome que desejar , em seguida temos outro TextBlock com nome de PageTitle, onde podemos também na propriedade Text  modificar o título da página. O Terceiro elemento é outro Layout Control do tipo Grid com o nome de ContentPanel, é nele que o conteúdo da sua aplicação será criado no projeto.

Listagem 1. XAML do código default

Mas tudo isso não é uma regra, em nossa aplicação de exemplo queremos aproveitar o máximo da tela do Windows Phone 7, vamos remover todo o conteúdo do primeiro layout Grid, o LayoutRoot, em seguida troque o tipo de layout, para isso, selecione com o botão direito do mouse no layout control e em Objects and Timeline, clique em Change Layout Type, Figura 3, e altere para um StackPanel. Adicione um ListBox no StackPanel,  o código completo está na Listagem 2.

Vamos também remover a barra do system tray do WP7, onde aparece o nível da bateria, sinal e hora, para isso, selecione o item PhoneApplicationPage na aba Objects and Timeline e nas propriedades, remova o checkbox Show SystenTray, Figura 2, com isso temos todo o espaço disponível da tela para utilizar em uma aplicação.

Figura 2 – Removendo o SystemTray

Figura 3 – Alterando o Layout Control

Listagem 2. XAML da aplicação

Inserindo dados de exemplo

Para criar o nosso exemplo seria necessário carregar informações de algum provedor de dados, o designer da aplicação não precisa conhecer como esses dados serão implementados, pois o ideal é que eles sejam ligados de forma menos acopladas possível, ou seja, que cada camada tenha suas responsabilidades bem definidas, para facilitar essa tarefa ao designer, e para auxiliar nos testes de dados em interfaces XAML, o Expression Blend disponibiliza uma forma de criar dados de exemplo,  deixando ainda os elementos visuais corretamente ligados as objetos que contém os dados.

Para criar uma coleção de dados de exemplo e ligar ao ListBox , clique na aba Data e no ícone Create Sample Data, digite o nome do DataSource, clique nas propriedades e modifique conforme desejar, depois arraste e solte a coleção para dentro do ListBox e você terá uma ListBox ligada a uma coleção de dados. Como esse passo é 100% visual no Expression Blend, veja neste vídeo rápido o processo passo a passo.

 ( video wmv) – Create Sample Data

Figura 4 – ListBox com dados de exemplo

Navegação de Páginas

Para finalizar o exemplo, vamos inserir um evento SelectionChanged no ListBox, assim quando o usuário selecionar um item no Listbox vai abrir outra página com o link selecionado carregado no browser, para inserir o evento, selecione o ListBox, na aba properties, clique  no ícone Events e dê um duplo click no evento SelectionChanged, Figura 5.

Figura 5 – ListBox – Criando um evento SelectionChanged

Dentro do evento SelectionChanged do ListBox,  primeiro vamos obter o item selecionado no ListBox através da propriedade SelectedItem, depois através do recurso NavigationService.Navigate, vamos navegar até a outra página, passando como parâmetro a url que será carregado no Browser, Listagem 3. Adicione uma página em seu projeto com o nome de PhonePageBrowser, adicione um elemento WebBrowser e o método onNavigatedTo, esse método será responsável por obter a url e carregar o browser com o link passado, Listagem 4.

Listagem 3. XAML da aplicação

Listagem 4. XAML da aplicação

Conclusão

O Expression Blend é um poderoso aliado para a criação de aplicativos para o Windows Phone 7 com Silverlight,  vimos de forma superficial como criar uma aplicação na ferramenta, além de conhecer um pouco sobre os layout controls, sample data e navegação de páginas.

Empresa sedeada em lisboa (portugal) precisa de Programador ( tempo inteiro ou free lancer ) em PHP E FLEX4 para a criação de portais com backoffice e sistemas de facturação e gestão.
Interessados entre em contato que passo os detalhes da empresa.
(Para evitar problemas de SPAM, não adiciono E-mail ao …

Em conversa com o Beck Novas (@becknovaes), a respeito de interfaces, ele fez uma observação muito interessante sobre os Widgets do Mac, sabe aquele botão de + para acrescentar novos Widgets? Pois bem, ele sobe e se torna o botão de fechar x, porém ele faz isso apenas rolando, é um efeito interessante. Estávamos discutindo isso para uma aplicação, e resolvi fazer um teste no Catalyst e mostrar como é possível usar tais recursos fugindo do tradicional do Flex.
Espero que gostem do resultado, eu direcionei o botão no sentido horário, mas o ideal e você rotacionar no sentido anti-horário para que ele pareça deslizar pela “parede” e volte no sentido horário…

Enfim, se não entendeu nada, assista ao Screencast.

AppleStyle

_________________________________________

Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath

BDD – Behavior Driven Development

BDD está ficando mais conhecido ultimamente e muitas pessoas estão adotando a prática no dia a dia de desenvolvimento. Mesmo assim BDD é tão antigo quanto o próprio TDD (Test Driven Development).
BDD nada mais é do que trazer ao código, e principalmente ao código que testa os casos de uso da aplicação, um pouco mais da lógica de negócio e do problema que está sendo resolvido no nível do usuário.

Melhorando a comunicação

Quando escrevemos algum teste unitário, normalmente damos um nome ao teste para que possamos entender os resultados quando gerarmos um relatório após a execução dos mesmos. Também damos nomes que façam sentido, para facilitar a comunicação da equipe de desenvolvimento, pois se outra pessoa da equipe precisar dar manutenção no teste, torna mais fácil a compreensão do que o teste está encarregado de testar sem que seja necessário ler muitas linhas de código.


Nos tempos atuais falamos bastante de aumentar a integração da equipe com o cliente ou a área que entende do negócio da aplicação. Também falamos em uma maior colaboração de ambas as partes no desenvolvimento de software. Para quebrar essa barreira que existe entre desenvolvimento e análise, algumas equipes empregam uma programação mais voltada a resolver os casos de uso propostos, ao invés de resolver problemas de baixo nível e compor uma aplicação final.


BDD prega que o problema que será resolvido deve estar bem claro para a parte quem entende do negócio (chamarei de cliente, mesmo que algumas vezes não seja necessariamente um cliente), e quem desenvolve a aplicação em si. Para isso são escritos casos de testes baseados nos casos de uso do sistema, e tais casos de teste usam uma linguagem comum para ambas as partes.


Como normalmente o cliente não é técnico, fica muito difícil se comunicar com ele via testes unitários em código, e fica mais difícil ainda que o cliente colabore com a melhoria e a escrita de tais testes. Porém, os testes unitários e automatizados são a melhor ferramenta do desenvolvedor para testar a aplicação e garantir que a equipe mantenha o código funcionando.


Para suportar ambas as necessidades, e implantar o BDD de fato, uma das soluções é associar o problema de cada caso de uso, a um teste unitário que irá se certificar que aquele caso de uso está sendo corretamente executado.


Por exemplo, em java podemos dar nomes a nossas classes de teste de acordo com o caso de uso que aquele teste se refere. E podemos também nomear os métodos como a execução específica daquele caso de uso:

Dessa forma quando o cliente ver o resultado dos testes e perceber que este teste falhou, ao invés de ler algo como “O serviço de usuário voltou null.”, ele conseguirá ler “No teste de cadastro de usuário, ao testar que um usuário novo está sendo cadastrado, o teste falhou pois o usuário não possui um nome válido, logo não foi cadastrado.”


Parece pouca coisa, mas para o cliente é um informação muito importante nas discussões sobre prioridade de correção de bugs e melhorias do sistema. Isso porque fica claro para o cliente quando o desenvolvedor descreve o teste exato que falhou e o cliente sabe exatamente a qual caso de teste se refere e qual o problema que está sendo resolvido. Não é informação pertinente ao cliente como que tecnicamente se corrige o problema e como que o sistema está implementado para que o erro ocorre-se, esse é o papel do desenvolvedor.

Simples e Efetivo, mas não é a Silver Bullet

Existem muitos frameworks para facilitar a empregação do BDD. Vimos aqui que mais do que um framework, BDD é uma cultura e pode ser empregado sem o uso de qualquer ferramenta, pois o importante é manter a comunicação entre os níveis técnicos diferente na mesma equipe.


Muitos correm atrás da implantação do BDD nos projetos com a esperança de que os problemas na resolução de bugs e na comunicação da equipe serão resolvidos. Isso não é verdade e seu projeto irá dar tão certo quanto ele daria antes da adoção de BDD. BDD é um mudança de comportamento na equipe onde todos devem estar empenhados na causa de melhorar a comunicação, e tentar entender os problemas de verdade que o sistema se propõe a resolver.


A mudança de comportamento tem que partir do lado do cliente também, pois é necessário a compreensão de que os erros que estão claros para ele agora, não surgiram do nada. Na verdade eles sempre estiveram presentes no sistema, só que protegidos pela barreira que impedia a comunicação entre de desenvolvimento e análise.


Espero ter sido claro, qualquer opinião sobre o assunto será bem vinda.


Por @Gust4v0_H4xx0r

In this post we’ll see how to listen to the flash.events.Event.CLOSING event and prevent the window closing until the user’s interaction. That’s useful once you have some unsaved work in your application, so you can ask the user if he really wants to close the window before doing it.

Check out the code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    closing="closingHandler(event)">
    <fx:Script>
        [CDATA[
            import mx.controls.Alert;
            import mx.events.CloseEvent;
            protected function closingHandler(event:Event):void
            {
                event.preventDefault();
                Alert.show(
                    "Do you really wanna close this window?",
                    "Warning",
                    Alert.YES|Alert.NO,null,
                    alertCloseHandler
                );
            }
            private function alertCloseHandler(event:CloseEvent):void
            {
                if(event.detail == Alert.YES)
                    nativeWindow.close();
            }
        ]]>
    fx:Script>
s:WindowedApplication>

Hope you enjoy it. See ya!