Não tem muito tempo muito se falou, comentou e até se discutiu sobre uma suposta rivalidade entre Flash e HTML5. Sendo que isso parece ter seu alge quando há algum novo lançamento da Apple e que venha sem suporte ao Flash Player. No entanto o que a Adobe prega é que ambos podem conviver mutuamente sem problemas, um não precisa necessariamente eliminar o outro e cada um tem seu foco especifico.

A Adobe participa ativamente do W3C(Consorcio que rege os padrões web) e vem continuamente colaborando para o melhoramento do HTML5. No Adobe MAX 2010, foi demonstrado um exemplo de uma ferramenta com o codinome de “Wallaby”.
Wallaby é o codinome de uma tecnologia experimental que converte a artwork e animação contida nos arquivos do Adobe Flash Professional(.fla) em HTML. Isto lhe permite reutilizar e estender o alcance de seu conteúdo para dispositivos que não suportam Flash Player. Depois que esses arquivos são convertidos para HTML, você pode editá-los com uma ferramenta de edição de HTML, como o Adobe Dreamweaver, ou o que desejar. Você pode ver o resultado em algum dos navegadores compatíveis ou em um dispositivo iOS.
Claro que nem todos os recursos do Flash são suportadas no formato HTML5. No Adobelabs há um documento descrevendo quais recursos são suportados, quais as diferenças descobertas entre os diversos navegadores, que variações do dispositivo foram encontrado e problemas conhecidos atualmente.

Saiba mais
http://labs.adobe.com/technologies/wallaby/

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!

In the yesterday’s post I released the source code of a Dashboard application that uses custom Spark components. Today I’ll show how to change its layout through Flex 4 skinning techniques.
Analyzing the source code you are gonna realize that this application has 2 custom Spark components: PodManager and PodWindow. Today we’ll focus in the implementation of the PodManager component, which is responsible to manage the PodWindow instances, define where it can be instantiated and for the Dashboard features.

Below you can see how to instantiate the PodManager component, define its skin class and also how you can split the PodWindow instances into two content areas, firstElements e secondElements :

<components:PodManager id="podManager"
    skinClass="com.rectius.examples.pod.assets.skins.PodManagerVerticalSkin"
    left="10" right="10" top="40" bottom="15">
?
    <components:firstElements>
        <view:ChartExpenses
          width="100%" height="100%" title="Expenses" />
        <view:ChartProfit
          width="100%" height="100%" title="Profit"/>
    components:firstElements>
?
    <components:secondElements>
        <view:ChartWidget
          width="100%" height="100%" title="Widget"/>
    components:secondElements>
?
components:PodManager>

And the result is the same you’ve already seen in the last post:

And If you wanna change the PodWindow’s layout, displaying it horizontally? Just do this:

<components:PodManager id="podManager"
    skinClass="com.rectius.examples.pod.assets.skins.PodManagerVerticalSkin"
    left="10" right="10" top="40" bottom="15">
?
    <components:firstElements>
        <view:ChartExpenses
          width="100%" height="100%" title="Expenses" />
        <view:ChartProfit
          width="100%" height="100%" title="Profit"/>
        <view:ChartWidget
          width="100%" height="100%" title="Widget"/>
    components:firstElements>
?
components:PodManager>

The above code shows that you don’t need to change the component skin to change its layout, fot that you can just intantiate all PodWindow in the same content area, into firstElements. But why the PodWindow instances are being displayed horizontally? Why don’t vertically? In order to understand it let’s analyse the skin class of the PodManager component:

<?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.PodManager")]
    fx:Metadata>
?
    -- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    s:states>
?
    <s:VGroup width="100%" height="100%">
        <s:HGroup id="firstContainer"
            width="100%" height="100%"/>
        <s:HGroup id="secondContainer"
            width="100%" height="100%"/>
    s:VGroup>
?
s:Skin>

The PodWindow instances are being displayed horizontally because the container firstContainer is a HGroup. Let’s turning over the PodWindow’s orientation by creating a new skin class called PodManagerHorizontalSkin :

<?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.PodManager")]
    fx:Metadata>
?
    -- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    s:states>
?
    <s:HGroup width="100%" height="100%">
        <s:VGroup id="firstContainer"
            width="100%" height="100%"/>
        <s:VGroup id="secondContainer"
            width="100%" height="100%"/>
    s:HGroup>
?
s:Skin>

And that’s the result:

Let’s instantiate again PodWindow components into the content area secondElements:

<components:firstElements>
    <view:ChartProfit
        width="100%" height="100%"
        title="Profit"/>
components:firstElements>
?
<components:secondElements>
    <view:ChartExpenses
        width="100%" height="100%"
        title="Expenses" />
    <view:ChartWidget
        width="100%" height="100%"
        title="Widget"/>
components:secondElements>

And that’s the final result:

Hope you enjoy it!

No post de ontem liberei o código fonte de um componente Spark customizado para Dashboard. Hoje vou mostrar como podemos alterar facilmente seu layout utilizando para isso as técnicas de skinning do Flex 4.
Quem fez o download do código fonte do projeto pôde observar que nesse exemplo temos 2 componentes Spark customizados: O componente PodManager e o componente PodWindow.

Hoje vou focar no componente PodManager, que é responsável por gerenciar as janelas PodWindow, definir as áreas de conteúdo onde podemos instancia-las e também por implementar as funcionalidades do dashboard. Abaixo podemos ver o componente PodManager sendo instanciado, sua classe skin e também as instâncias do componente PodWindow divididos em suas 2 áreas de conteúdo firstElements e secondElements :

<components:PodManager id="podManager"
    skinClass="com.rectius.examples.pod.assets.skins.PodManagerVerticalSkin"
    left="10" right="10" top="40" bottom="15">
?
    <components:firstElements>
        <view:ChartExpenses
          width="100%" height="100%" title="Expenses" />
        <view:ChartProfit
          width="100%" height="100%" title="Profit"/>
    components:firstElements>
?
    <components:secondElements>
        <view:ChartWidget
          width="100%" height="100%" title="Widget"/>
    components:secondElements>
?
components:PodManager>

O resultado é aquele que você já viu:

E se você quiser que as 3 PodWindow fiquem dispostas lado a lado no sentido horizontal? Faça isso:

<components:PodManager id="podManager"
    skinClass="com.rectius.examples.pod.assets.skins.PodManagerVerticalSkin"
    left="10" right="10" top="40" bottom="15">
?
    <components:firstElements>
        <view:ChartExpenses
          width="100%" height="100%" title="Expenses" />
        <view:ChartProfit
          width="100%" height="100%" title="Profit"/>
        <view:ChartWidget
          width="100%" height="100%" title="Widget"/>
    components:firstElements>
?
components:PodManager>

Veja pelo código acima que não foi preciso nem mesmo alterar o skin, bastou definir todas as intâncias de PodWindow na mesma área de conteúdo firstElements. Mas por quê as janelas ficaram dispostas horizontalmente e não verticalmente? Para isso vamos analisar o skin do componente PodManager:

<?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.PodManager")]
    fx:Metadata>
?
    -- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    s:states>
?
    <s:VGroup width="100%" height="100%">
        <s:HGroup id="firstContainer"
            width="100%" height="100%"/>
        <s:HGroup id="secondContainer"
            width="100%" height="100%"/>
    s:VGroup>
?
s:Skin>

As PodWindow ficaram dispostas horizontalmente pois o container firstContainer é um HGroup. Vamos criar agora um novo skin chamado PodManagerHorizontalSkin para inverter esse comportamento:

<?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.PodManager")]
    fx:Metadata>
?
    -- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    s:states>
?
    <s:HGroup width="100%" height="100%">
        <s:VGroup id="firstContainer"
            width="100%" height="100%"/>
        <s:VGroup id="secondContainer"
            width="100%" height="100%"/>
    s:HGroup>
?
s:Skin>

E o resultado será:

Vamos agora instanciar novamente elementos na área de conteúdo secondElements:

<components:firstElements>
    <view:ChartProfit
        width="100%" height="100%"
        title="Profit"/>
components:firstElements>
?
<components:secondElements>
    <view:ChartExpenses
        width="100%" height="100%"
        title="Expenses" />
    <view:ChartWidget
        width="100%" height="100%"
        title="Widget"/>
components:secondElements>

e o resultado final será esse:

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

Durante essa semana estive pesquisando mais a fundo sobre a criação de componentes no Flex 4, tirando algumas dúvidas que eu ainda tinha, e principalmente desenvolvendo vários deles para adicionar em minha biblioteca pessoal.

Esse exemplo aí de baixo é um componente Flex 4 para trabalhar com Dashboard. Se houver interesse, na semana que vem eu libero um tutorial explicando alguns conceitos sobre a criação de componentes, skin e também o seu código-fonte.

A utilização do componente na minha application ficou assim:

<components:PodManager
id="podManager" left="10" right="10" top="40" bottom="15"
skinClass="com.rectius.examples.pod.assets.skins.PodManagerSkin">
?
    <components:topElements>
            <view:ChartExpenses
            width="100%" height="100%" title="Expenses" />
    components:topElements>
?
    <components:bottomElements>
            <view:ChartProfit
            width="100%" height="100%" title="Profit"/>
            <view:ChartWidget
            width="100%" height="100%" title="Widget"/>
    components:bottomElements>
?
components:PodManager>

E o resultado é esse aqui:

Your browser does not support iframes.

Até a próxima pessoal!

Neste artigo será apresentada uma pequena introdução ao desenvolvimento de projetos mobile com o Windows Phone 7, o Windows Phone 7 ou WP7, é o mais recente sistema operacional da Microsoft para a plataforma mobile, foi projetado para proporcionar ao desenvolvedor a criação de aplicativos com recursos interativos e ricos, seu visual é simples, agradável e moderno. Para o desenvolvimento de aplicativos para essa plataforma a Microsoft investiu praticamente no Microsoft Silverlight e no Framework XNA.

O Silverlight pode ser utilizado para diversas finalidades, mas sua força está na criação de aplicativos de negócios em geral, utilizando a plataforma .net. Além do WP7 é possível utilizar o Silverlight para criar projetos web , rodando no browser ou até mesmo criar projetos Silverlight que rodam instalados fora do browser.

O XNA é um framework completo para o desenvolvimento de games, tanto para PCs com o Windows, como para o XBOX 360 e o Windows Phone 7, é possível criar jogos com o Silverlight , mas como o XNA foi concebido com esse propósito ele tem um suporte melhor para a criação de games mais complexos.

Se você já programa em C# .net ou até em Silverlight, você poderá aproveitar e aplicar seus conhecimentos para criar aplicativos para o WP7, neste artigo será apresentado como preparar o ambiente de desenvolvimento para você iniciar a criação de aplicativos para o Windows Phone 7 com Silverlight utilizando o Visual Studio 2010 ou com o Expression Blend.

O Ambiente de desenvolvimento para o WP7 é totalmente gratuito, você poderá utilizar o Visual Studio 2010 Express, o Visual Studio é a principal IDE da Microsoft para o desenvolvimento de aplicativos para a plataforma .net, neste artigo vou usar a versão Premium do Visual Studio 2010 , mas você poderá utilizar os mesmos conceito na versão Express (gratuita).

Uma ferramenta muito interessante e com total suporte ao Windows Phone 7 é o Expression Blend 4, o Blend é uma ferramenta completa para a criação de layouts aprimorados, com suporte ao Windows Phone, nela diversas tarefas são realizadas com a ajuda do mouse, os códigos XAML são gerados automaticamente conforme você manipula visualmente o layout das telas, além de praticidade e produtividade ele também possui um emulador do Windows Phone e diversos recursos para o designer da aplicação. 

Ambiente de desenvolvimento – Windows Phone 7 Developer Tools

Para iniciar o desenvolvimento com o WP7 você vai precisar instalar o Windows Phone Developer Tools  RTW , ele está disponível para o Windows Vista e Windows 7, o programa inclui os seguintes aplicativos:

Para outras informações sobre o ambiente gratuito de desenvolvimento para o WP7 clique aqui.

Inicie a instalação do Windows Phone Developer Tools RTW, se você tiver alguma versão incompatível instalada,  o software vai alertá-lo, a primeira etapa é aceitar a licença do programa, em seguida aparecerá uma tela com o botão “Install Now”, clique  para iniciar a instalação, você poderá neste momento alterar o diretório de instalação, Figura 1, se clicar no botão Customize.

O Windows Phone Developer Tools iniciará a instalação dos programas e você verá a tela da Figura 2 assim que a instalação de todos os programas for completada.

Figura 1. Customizando a Instalação do Windows Phone Developer Tools

Figura 2. Instalação concluída do Windows Phone Developers Tools

Os programadores Visual Basic tem um Windows Phone Developers Tools específico neste link Visual Basic for Windows Phone Developer Tools – RTW.

Criando uma aplicação no Visual Studio 2010

Abra o Microsoft Visual Studio 2010 e clique em File->New->Project, cinco opções são apresentadas como modelos de projetos para o Windows Phone, o primeiro é o Windows Phone Application, nele temos um projeto básico com o mínimo necessário para criar uma aplicação WP7, a segunda opção é a Windows Phone Databound, que permite criar uma aplicação baseada em um modelo capaz de trabalhar com uma lista de dados e com controle de navegação,  a terceira opção é a Windows Phone Class Library, onde é possível criar uma biblioteca para o Windows Phone, em seguida temos o Windows Phone Panorama Application, que cria um projeto com um modelo de navegação muito comum no Windows Phone, onde é possível através do toque na tela andar pela aplicação e navegar em suas listas de dados e por ultimo temos o Windows Phone Pivot Application, onde está disponível um controle Pivot para ser usado na aplicação.

Figura 3. Tipo de projetos para Windows Phone no Visual Studio 2010

Como o foco do artigo não é a criação de uma aplicação para o Windows Phone 7 e sim somente dar uma introdução ao desenvolvimento para a plataforma, vamos criar um projeto do tipo Windows Phone Panorama Application e modificar somente em dois pontos e em seguida visualizar as alterações.

No código fonte da aplicação (XAML), vamos modificar o título da aplicação e o cabeçalho do primeiro item do controle panorâmico, localize o controle  Panorama e modifique o parâmetro Title para um nome qualquer, em seguida faça o mesmo com a propriedade Header do controle PanoramaItem, veja a Figura 4.

Figura 4. Modificando o fonte do projeto Windows Phone Panorama Application

Agora clique no play do Visual Studio 2010 para executar a aplicação e visualizar o emulador do Windows Phone 7, Figura 5 e 6.

Figura 5. Executando a aplicação no emulador do Windows Phone 7

Figura 6. Emulador do Windows Phone 7 no Visual Studio 2010

Abrindo a aplicação no Expression Blend 4

O Expression Blend é um aplicativo que auxiliar na parte gráfica da aplicação, com ele temos uma ferramenta gráfica e com recursos específicos para essa finalidade, um bom exemplo e a criação de animações em sua aplicação, vamos supor que você queira animar um determinado elemento, seja uma imagem ou um botão, por exemplo,a vantagem de utilizar o Blend nesta tarefa é a possibilidade de gravar toda a animação na tela e ele automaticamente gera todo o código XAML, poupando dezenas de linhas de códigos que seriam digitadas no Visual Studio 2010.

O Microsoft Expression Blend for Windows Phone é um dos aplicativos instalados pelo Windows Phone Developers Tools, existe também uma versão para uso do Silverlight  que é a que estou usando neste artigo, chamada de Expression Blend 4, que faz parte do pacote do Expression Studio 4, integrado com o Visual Studio 2010 e que também funciona para programar para o Windows Phone 7.

Saiba mais sobre o Expression Studio 4 neste artigo da .net Magazine.

O Expression Blend é integrado ao Visual Studio 2010, basta clicar no seu projeto com o botão direito do mouse e clicar em Open in Expression Blend, Figura 7, qualquer modificação feita nas ferramentas já é atualizado na outra assim que uma é acionada.

Figura 7. Emulador do Windows Phone 7 no Visual Studio 2010.

Figura 8. Expression Blend 4.

App Hub

Os aparelhos com o Windows Phone 7 ainda não chegaram ao Brasil, o jeito é aguardar ou adquirir um aparelho importado, depois que você já preparou o ambiente de desenvolvimento e já está desenvolvendo aplicativos com a tecnologia Silverlight ou XNA, você vai querer testar o aplicativo no próprio aparelho e ainda começar a ganhar dinheiro enviando sua aplicação para o Windows Phone Marketplace, o Windows Phone Marketplace é onde você pode testar e comprar aplicativos, jogos, músicas para o seu Windows Phone 7.

O Windows Phone Marketplace já está aberto para que os desenvolvedores possam enviar seus aplicativos, para que você possa criar aplicações e vender no Marketplace você vai precisar desbloquear o equipamento e criar uma conta no site App Hub, vamos ver agora passo a passo como realizar esse procedimento.

1. Acesse o site http://create.msdn.com/en-US .
2. Clique em Sig-in .
3. Entre com o seu Window Live ID .
4. Selecione o tipo de conta: Company (Empresas), Individual (desenvolvedor individual) ou Student (estudante que participa do projeto DreamSpark) .

As contas do tipo Company e Individual tem um custo anual de $99, se você é estudante, participe do projeto DreamSpark, atualmente o Dreamspark é a única forma de participar do App Hub sem custos, no meu caso eu selecionei um conta de desenvolvedor individual.

Figura 8. Tipo de conta no App Hub

5. O próximo passo é digitar algumas informações pessoais como nome, endereços e email, no campo Publisher Name, você informará o nome que aparecerá no Windows Phone Marketplace.
6. Selecione a imagem que será apresentada quando você participar de fóruns do App Hub.

Figura 9. Imagem que será apresentada nos fóruns.

7. Se você não selecionou o tipo Student (Dreamspark), será necessário pagar uma taxa anual para enviar aplicativos para o Windows Phone Marketplace, está disponível atualmente o pagamento via cartão de crédito VISA e MASTERCARD.

8. A última etapa e a confirmação do email e de sua identidade, no caso da conta individual, ambos são feitos por e-mail. Você receberá uma e-mail alguns dias após o cadastro para validar a sua identidade, no caso de desenvolvedor individual é necessário enviar uma cópia da sua carteira de motorista ou passaporte.

Figura 10. Conclusão do cadastro no App Hub.

Na página do App Hub, no link Devices, aparecerão os aparelhos que você vai desbloquear e poderá realizar o deploy no Visual Studio 2010 antes de publicar no Windows Marketplace. 

Zune

O Zune é o software que irá fazer a sincronização da sua aplicação no Visual Studio 2010 e o equipamento, para mais informações sobre o Zune veja no blog do MSDN.

Faça o Download da última versão do Zune no site oficial.

Desconecte o seu aparelho do computador, caso esteja conectado, feche todos os aplicativos abertos e inicie a instalação, a primeira etapa é aceitar a licença do ZUNE, em seguida o software é instalado. Quando você receber a mensagem de “INSTALAÇÃO DO SOFTWARE DO ZUNE CONCLUÍDA”, clique em fechar, uma tela será apresentada com as etapas de configurações do ZUNE, a primeira configuração e a tela abaixo onde você vai inserir o nome que o equipamento vai ter no software do ZUNE, no equipamento e no site.

Figura 11. Nome do telefone no ZUNE

Conecte o seu celular via USB e deixe o windows realizar a instalação dos drivers, agora você já tem o seu aparelho sincronizado com o ZUNE.

Figura 12. Dados do aparelho sincronizado

Registrando o aparelho no Windows Phone Developer

Este é o último passo antes de você iniciar o deploy com o Visual Studio 2010 e enviar sua aplicação ao Marketplace, vamos agora registrar a conta como desenvolvedor, no menu iniciar do Windows, localize o menu Windows Phone Developer Tools e clique em Windows Phone Developer Registration.

Figura 13. Registro de desenvolvedor

Deploy no Visual Studio 2010

No menu do Visual Studio 2010, localize o combo onde está escrito Windows Phone 7 Emulator e altere para Windows Phone 7 Device, selecione o projeto no Solution Explorer do Visual Studio com o botão  direito do mouse e clique em deploy. O Zune deverá sempre estar ativo para realizar a sincronização com o equipamento.

Figura 14. Deploy no Visual Studio 2010

Conclusão

Com a evolução dos aparelhos de celulares e smartphones, o mercado mobile está crescendo assustadoramente a cada ano, os novos equipamentos estão recheados de novos recursos e com isso a necessidade de que tenha um sistema operacional capaz de aproveitar ao máximo tudo que as novas tecnologias estão oferecendo, é neste cenário que a Microsoft apresenta o seu Windows Phone 7.

O Windows Phone Marketplace está recheado de aplicativos e games, o potencial do sistema operacional da Microsoft é muito positivo, particularmente eu acho o sistema operacional fantástico e de incrível liberdade de desenvolvimento para os desenvolvedores .net, principalmente pela produtividade e pelo fato de aproveitar os conhecimentos já adquiridos em C#, Visual Basic, XNA e Silverlight, enquanto o Windows Phone ainda não está disponível aqui no Brasil , podemos criar aplicações com as ferramentas gratuitas da Microsoft.

Links Interessantes:

http://winphoneblog.com.br/ 

http://channel9.msdn.com/Series/Windows-Phone-7-Development-for-Absolute-Beginners

http://www.devmedia.com.br/post-17986-Windows-Phone-7-e-Silverlight-4.html

http://www.charlespetzold.com/phone/

http://www.devmedia.com.br/post-18740-Animacoes-no-Windows-Phone-7.html

http://blogs.msdn.com/b/jpclementi/archive/2011/02/02/links-mais-importantes-para-o-windows-phone-7.aspx?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+clementi+%28Falando+de+novidades+e+tecnologias+Microsoft%29

http://www.microsoft.com/showcase/en/us/related?video=bda22419-a49e-4ef6-973d-f9c6d59aa525

FAQ

Segue alguns codinomes usados pela Adobe (e da antiga Macromedia) para o desenvolvimento de seus softwares. Lista em constante atualização, quem souber de algum codinome que não esteja na lista, pode deixar um comentário para atualização

Fonte:
http://luar.com.hk/blog/?p=472

Twitter!

Olá Pessoal, vou mostrar a vocês como criar relatório com o IReport. Mas antes de mais nada o que é a IReport.

IReport

IReport é uma ferramenta de designer para relatórios, que utiliza a biblioteca Java para relatórios a JasperReports. Com ele é possível fazer layots sofisticados, contendo gráficos, imagens, sub-relatórios, tabelas de referência cruzada e muito mais. Os dados podem ser acessado via JDBC, TableModels, JavaBeans, XML, Hibernate e CSV. Depois podendo fazer relatórios em PDF, RTF, XML, XLS, CSV, HTML, XHTML, textos, DOCX ou OpenOffice.

É um projeto open-source da equipe JasperForge que possui ferramentas para produção de relatórios, elaboração de relatórios operacionais etc. Mais informações estão disponíveis no www.jasperforge.org.

Ciclo de Vida do Relatório

O arquivo criado pelo IReport é um jrxml, arquivo XML que contém a definição do relatório, como o relatório é desenhado completamente de uma forma visual não é necessário saber a estrutura desse arquivo XML. Depois o jrxml deve ser compilado em um objeto binário chamado Jasper, e é o que você precisa enviar para sua aplicação para executar os relatórios.

Na execução do relatório você precisará do arquivo Jasper e uma fonte de dados para o JasperReports. Há muitos tipos de fontes de dados como: arquivo XML, consulta SQL, arquivo CSV, uma HQL (Hibernate Query Language), uma consulta com JavaBeans, etc. O JasperReports é bem flexível proporcionando a você criar sua propria fonte de dados. Com o arquivo Jasper e a fonte dados o JasperReports é capaz de gerar o documento final em vários formatos.

Atualmente se encontra na versão 3.7.5 e pode ser baixado no site:
http://jasperforge.org//website/ireportwebsite/IR%20Website/ir_download.html?header=project&target=ireport

Fonte

http://jasperforge.org/projects/ireport

Exemplo

No screencast abaixo é explificado o uso do IReport, para fonte de dados utilizei um arquivo xml.

Arquivos Fontes

http://office-sp.dclick.com.br/devblog/wp-content/uploads/2010/arquivos-fontes-relatorio.zip

http://office-sp.dclick.com.br/devblog/wp-content/uploads/2010/lib-relatorio.zip

Templantes de relatórios

http://office-sp.dclick.com.br/devblog/wp-content/uploads/2010/templates-relatorios.zip

Olá pessoal!

Estamos na edição 19!
São 42′ de boa informação. Ouça, comente e aproveite os links abaixo.

• Silverlight Media Framework 2.0 (07/07)
• XAML Power Toys for VS2010
• Power Tools no ScottGu’s Blog
• RTW do WPF Ribbon Control
• Visual Studio LightSwitch
  • Vídeo no CH9: Anúncio no VSLive!
  • Post no blog do Somasegar
  • Lançamento previsto para o dia 23 de agosto de 2010
• Behaviors
  • Top 5 Silverlight Behaviors
  • Microsoft Expression Gallery (Silverlight Behaviors)

Para assinar:

• Feed RSS: http://www.xamlcast.net
• iTunes/iPod: pcast://www.xamlcast.net
• Zune: zune://subscribe/?XAMLCast=http://www.xamlcast.net

O XAMLCast também está no Twitter!

• Twitter oficial: @xamlcast (e hashtag #xamlcast)
• Siga os XAMLCasters:
  • @kelps
  • @robertos_br
  • @rodrigokono
• Adicione o Twibbon do XAMLCast ao seu avatar!
  • http://twibbon.com/join/XAMLCast

Até o próximo!

Abraços,

Kelps, Roberto Sonnino e Rodrigo Kono

O Silverlight 4 RTM já está disponível para download.

O runtime do Silverlight 4 tem apenas 6 Mb. Em comparação, o Silverlight 3 tinha 4,7 e o Silverlight 2 tinha 4,77 (sim, o Silverlight 2 era maior que o Silverlight 3).

O Silverlight 4 Tools do para Visual Studio 2010 também está disponível para download no mesmo site. Se você pretende desenvolver aplicações utilizando Silverlight 4, este é o download que você deve fazer. Ele tem aproximadamente 30 Mb e é composto dos seguintes pacotes:

• Runtime do Silverlight 4 RTW para desenvolvimento
• SDK do Silverlight 4 RTW
• Tooling para Visual Studio 2010 RTM (ferramentas e templates de projeto)
• WCF RIA Services Release Candidate (com licença go-live)

Por conter a versão Release Candidate do WCF RIA Services, o Silverligth 4 Tools para Visual Studio 2010 também está marcado como RC, mas isso não significa que ele não esteja pronto para ser utilizado em produção. Prova disso é que o WCF RIA Services RC vem com licença go-live, que significa que já pode ser utilizado publicamente e terá suporte da Microsoft. A versão RTW do WCF RIA Services e, consequentemente, do Silverlight 4 Tools deve ser lançada ainda nesse semestre.

Também foram liberados hoje o Silverlight 4 Toolkit – Abril 2010 e o Expression Blend 4 Release Candidate. A versão final do pacote Expression Studio 4 também deve ser lançada ainda nesse semestre, mas não há nenhuma data definida. Vale lembrar que o upgrade do Expression 3 para o 4 será gratuito, portanto, se você não tem ainda não precisa esperar sair a próxima versão. Pode comprar agora.