logo
  • Home
  • Acerca
  • Autores
  • Faq
  • Rede
  Twitter   Feed-me! RSS!
Fev 27

Two-way Data Binding – Flex 4 – Problema de Conversão de Tipo

Escrito por DClick Team em 1, 4, 6, action, Actionscript, app, AR, BI, Bindable, blog, class, classe, Componente, components, Data Binding, Download, err, erro, exemplo, Flex, Flex Components, function, IE, if, image, isNaN, mg, NaN, Number, O, on, problema, problemas, pt, RIA, Ria’s Geral, RoR, spark, string, TAT, TextInput, Twitter, Two-way Data Binding, UI @ 02 27th, 2011 | via http://blog.dclick.com.br/pt/ | Sem comentários
DClick Team
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

post) em um projeto, deve ter caído em problemas de conversão de tipo, como mostrado pela imagem abaixo:

Esse erro acontece por que estamos tentando fazer 2 operações:

  • 1. Atribuir o valor de user.id (Number) a proriedade text (String)
  • 2. Atribuir o valor de text (String) a proriedade user.id (Number)

A primeira operação funciona muito bem, pois a classe Number tem o método toString() que é chamado toda vez que fazemos esse tipo atribuição. Nosso problema está com o item 2, onde estamos tentando atribuir uma String a uma propriedade Number.

Para resolver essa situação eu criei a classe NumberInput que extende a classe TextInput do spark, e funciona com um wrapper para a propriedade text do TextInput, o source do novo componente é simples e fica assim:

PLAIN TEXT
ACTIONSCRIPT:

  1. package br.com.dclick.components
  2. {
  3. ? ?
  4. ? ? import spark.components.TextInput;
  5. ? ?
  6. ? ? public class NumberInput extends TextInput
  7. ? ? {
  8. ? ? ? ? public function NumberInput()
  9. ? ? ? ? {
  10. ? ? ? ? ? ? super();
  11. ? ? ? ? }
  12. ? ? ? ?
  13. ? ? ? ? [Bindable("change")]
  14. ? ? ? ? [Bindable("textChanged")]
  15. ? ? ? ? public function get textNumber():Number
  16. ? ? ? ? {
  17. ? ? ? ? ? ? return Number(text);
  18. ? ? ? ? }
  19. ? ? ? ?
  20. ? ? ? ? public function set textNumber(value:Number):void
  21. ? ? ? ? {
  22. ? ? ? ? ? ? text = isNaN(value)?“”:value.toString();
  23. ? ? ? ? }
  24. ? ? }
  25. }

Quando aplicamos o novo componente, o erro some do projeto e conseguimos compilar:

Abaixo segue o exemplo funcional:

Para fazer o download da biblioteca que contém o NumberInput, clique aqui.

Fev 25

Alterando o layout do componente Dashboard – Parte 2

Escrito por Pablo Souza em 1, 2009, 4, 6, Adobe, app, AR, arte, back, bar, blog, browser, class, classe, código, Componente, Componentes, components, control, DataProvider, DRE, Flex, Flex 4, for, ide, IE, if, image, itemRenderer, label, layout, library, lite, mg, MXML, O, on, rest, RIA, Ria’s Geral, RTW, Scroll, skins, spark, state, Stroke, TAT, try, UI, Widget, window, XML, XP @ 02 25th, 2011 | via http://rectius.com.br/blog | Sem comentários
Pablo Souza
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

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!

Fev 15

Adding new layout to Dashboard project – Part 1

Escrito por Pablo Souza em 1, 2009, 4, 6, Adobe, app, AR, arte, blog, class, components, custom, Flex, Flex 4, for, IE, if, image, int, layout, library, mg, MXML, O, on, Ria’s Geral, RTW, screen, skins, Source Code, spark, state, TAT, Tech, Widget, window, XML, XP @ 02 15th, 2011 | via http://rectius.com.br/blog | Sem comentários
Pablo Souza
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

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!

Fev 15

Alterando o layout do componente Dashboard – Parte 1

Escrito por Pablo Souza em 1, 2009, 4, 6, Adobe, AR, arte, blog, class, classe, código, código fonte, Componente, Componentes, components, custom, demo, Download, exemplo, Flex, Flex 4, fonte, IE, image, int, layout, library, mg, MXML, O, on, RIA, Ria’s Geral, RTW, screen, skins, spark, state, TAT, UI, Widget, window, XML, XP @ 02 15th, 2011 | via http://rectius.com.br/blog | Sem comentários
Pablo Souza
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

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!

Fev 14

A simple Dashboard using Flex 4

Escrito por Pablo Souza em 1, 4, 6, AR, back, blog, browser, Componente, components, custom, Download, Flex, Flex 4, for, if, int, O, on, pt, Ria’s Geral, Source Code, spark @ 02 14th, 2011 | via http://rectius.com.br/blog | Sem comentários
Pablo Souza
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Last week I have written a post “Componente para Dashboard no Flex 4″ to show a Dashboard component using Spark in Flex 4. As I’ve gotten a good feedback from readers this time I wanna share the source code with you.
I’ve developed this simple component with the intent to use in the trainings of Flex 4 here at GFT, therefore I suggest you to deeply analyse this code once it brings good concepts for those wanna learn more about how to develop custom Spark components.

Your browser does not support iframes.

Right-click to download source code.

And don’t forget to share your comments below.

Fev 11

Componente para Dashboard no Flex 4

Escrito por Pablo Souza em 1, 4, app, AR, arte, BI, browser, class, código, Componente, componente flex, Componentes, components, exemplo, Flex, Flex 4, fonte, fundo, IE, if, int, O, on, Pessoal, RIA, Ria’s Geral, RTW, skins, Tutorial, UI, Vários, Widget, XP @ 02 11th, 2011 | via http://rectius.com.br/blog | Sem comentários
Pablo Souza
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

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!

Jan 10

Dica Flex – Adicionando Scroll Bar num Spark container

Escrito por Pablo Souza em 1, 2009, 4, 6, Adobe, app, AR, bar, blog, class, código, components, control, custom, Dica, exemplo, flash, flash builder, Flex, Flex 4, for, ide, IE, image, label, library, map, mg, MXML, O, on, padrão, problema, RIA, Ria’s Geral, Scroll, spark, tag, Teste, UI, XML @ 01 10th, 2011 | via http://rectius.com.br/blog | Sem comentários
Pablo Souza
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

A dica Flex de hoje ensina como adicionar scroll bar nos Spark containers do Flex 4. Para quem começou a trabalhar diretamente no Flex 4 pode parecer estranho, mas nas versões anteriores do Flex todos os containers já tinham por padrão a funcionalidade do scroll bar. O problema é que isso tornava os containers mais pesado já que adicionava código extra, mesmo que você não fosse deixar os scrolls visíveis (o que acontecia na maioria dos casos).

Uma tag especial chamada Scroller foi criada no Flex 4 para indicar quando uma determinada área pode ser “scrolada”.

Veja o trecho de código abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?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"
               width="80" height="100%">

    <s:Scroller width="100%">
        <s:HGroup>
            <s:Button label="Teste 1" />
            <s:Button label="Teste 2" />
            <s:Button label="Teste 3" />
            <s:Button label="Teste 4" />
        </s:HGroup>
    </s:Scroller>

</s:Application>

E o resultado será o scroll na horizontal:

E agora se você quiser colocar scroll bar na sua Application? Vamos mostrar uma outra forma de fazer, utilizando skin customizado.

Crie uma aplicação no Flash Builder e sem seguida crie um novo MXML Skin usando como host component o container Application:

Coloque o nome do Skin “CustomApplicationSkin” e clique em “Finish”:

Agora procure a linha abaixo no seu Skin customizado:

1
2
<!--- @copy spark.components.SkinnableContainer#contentGroup -->
<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />

Em volta dessa linha vamos adicionar a tag Scroller:

1
2
3
        <s:Scroller width="100%" height="100%" minHeight="0" minWidth="0">
            <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
        </s:Scroller>

Para testar use o código a seguir:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?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" minWidth="955" minHeight="600"
               skinClass="CustomApplicationSkin">

    <s:controlBarContent>
        <s:Label text="Altura do retângulo:" />
        <s:HSlider id="slider" minimum="100" maximum="1000" value="100" />
    </s:controlBarContent>

    <s:Rect top="20" horizontalCenter="0" width="50%" height="{slider.value}">
        <s:fill>
            <s:SolidColor color="0x0" />
        </s:fill>
    </s:Rect>

</s:Application>

Se preferir baixe aqui o projeto de exemplo.

Espero que tenham gostado.

Até a próxima!

Dez 30

Dica Flex – Disparando eventos customizados do ItemRenderer com Flex 4

Escrito por Pablo Souza em 1, 2009, Adobe, app, AR, BI, blog, boolean, botão, class, classe, classes, código, components, custom, DataGrid, DataProvider, demo, Dica, dispatch, dispatchEvent, event, EventListener, Evento, Eventos, events, exemplo, flash, Flex, for, function, handle, ide, IE, int, itemRenderer, label, library, lista, LOB, MXML, O, on, problema, problemas, pt, RIA, Ria’s Geral, spark, string, tag, TAT, UI, uint, XML, XP @ 12 30th, 2010 | via http://rectius.com.br/blog | Sem comentários
Pablo Souza
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Nossa dica Flex de hoje serve para aqueles que desejam acessar métodos ou propriedades do objeto application ou parent documents de dentro de um item renderer. O Flex nos oferece as seguintes formas de acesso:

mx.core.FlexGlobals.topLevelApplication: Retorna o objeto application principal, que pode ser do tipo spark.components.Application ou mx.core.Application.

mx.core.UIComponent.parentDocument: Retorna o parent document do objeto atual. Usado como alternativa ao exemplo que vamos mostrar em seguida.

mx.core.UIComponent.parentApplication: Retorna o objeto application onde o objeto atual está inserido.

Além das formas acima, uma alternativa mais elegante (e orientada a obejtos) para acessar métodos ou propriedades do parent document ou application é utilizarmos os eventos do Flex.

Imagine que temos uma aplicação que lista todos os seus usuários num datagrid. Em uma de suas colunas temos um item renderer com um botão que exclui esses usuários. Para tal precisaremos acessar um método no parent document, que no nosso exemplo será a própria application. Como vimos anteriormente podemos obter o objeto parent document através da propriedade mx.core.UIComponent.parentDocument e dessa forma chamar nosso método de exclusão. Esse método funciona corretamente, porém gera um grande acoplamento entre os objetos além de quebrar o encapsulamento das classes. Para resolvermos esses problemas vamos fazer com que ao clicar no botão excluir um evento bubble seja disparado e no objeto parent document vamos escutar o evento e então chamar o método de exclusão.

O trecho de código abaixo mostra nossa datagrid com o item renderer que possui o botão de exclusão:

1
2
3
4
5
6
7
8
    <mx:DataGrid id="dataGrid" dataProvider="{model}">
        <mx:columns>
            <mx:DataGridColumn headerText="Nome" dataField="nome" />
            <mx:DataGridColumn
                headerText="Ação" dataField="nome"
                itemRenderer="br.com.rectius.itemRendererExample.ButtonItemRenderer" />
        </mx:columns>
    </mx:DataGrid>

A seguir está o código do nosso item renderer. Repare que ao clicar no botão excluir estamos disparando um evento customizado:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                          xmlns:s="library://ns.adobe.com/flex/spark"
                          xmlns:mx="library://ns.adobe.com/flex/mx"
                          focusEnabled="true">

    <fx:Metadata>
        [Event(name="ExcluirEvent",type="br.com.rectius.itemRendererExample.ExcluirEvent")]
    </fx:Metadata>

    <fx:Script>
        <![CDATA[
            import br.com.rectius.itemRendererExample.event.UsersEvent;

            protected function lblData_clickHandler(event:MouseEvent):void
            {
                var excluirEvent:UsersEvent = new UsersEvent(UsersEvent.EXCLUIR_EVENT, dataGridListData.label, true);
                dispatchEvent(excluirEvent);
            }
        ]]>
    </fx:Script>

    <s:Button id="lblData" top="0" left="0" right="0" bottom="0"
              label="Excluir" click="lblData_clickHandler(event)" />

</s:MXDataGridItemRenderer>

A tag Metadata expõe ao parent document o evento customizado do botão excluir:

1
2
3
    <fx:Metadata>
        [Event(name="ExcluirEvent",type="br.com.rectius.itemRendererExample.ExcluirEvent")]
    </fx:Metadata>

Isso nos possibilitou escutar o evento “ExcluirEvent” no parent document:

1
2
3
4
            protected function application1_initializeHandler(event:FlexEvent):void
            {
                dataGrid.addEventListener(UsersEvent.EXCLUIR_EVENT, excluirHandler);
            }

Abaixo você pode ver o evento que criamos para encapsular o usuário a ser excluído. Nesse exemplo estamos setando na propriedade data do nosso evento UsersEvent uma string com o nome do usuário, porém num cenário real poderíamos enviar o ID do usuário, um Value Object que armazenaria todas as propriedades do usuário clicado, ou qualquer outro objeto conveniente para sua situação:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package br.com.rectius.itemRendererExample.event
{
    import flash.events.DataEvent;

    public class UsersEvent extends DataEvent
    {
        public static var EXCLUIR_EVENT:String = "ExcluirEvent";

        public function UsersEvent(type:String, data:String="", bubbles:Boolean=false, cancelable:Boolean=false)
        {
            super(type, bubbles, cancelable, data);
        }
    }
}

Esperam que tenham gostado. Baixem aqui o projeto de exemplo.

Até a proxima!

Dez 28

Criação dinâmica de objetos com RSL

Escrito por Fabio da Silva em 1, 2009, 4, 6, Adobe, AR, as3, BI, blog, Blogs, bug, class, classe, classes, components, control, Controls, demo, err, erro, flash, Flex, Flex 3, Flex 4, for, framework, function, Google, html, IE, if, int, library, mg, O, on, RIA, Ria’s Geral, runtime, SDK, skins, spark, swf, team, UI, uint, utils @ 12 28th, 2010 | via http://fabiophx.blogspot.com | Sem comentários
Fabio da Silva
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

No meu post Criação dinâmica de objetos mostrei os passos para este tipo de criação.

Naquele post digo que é necessário o registro das classes dos objetos a serem criados dinamicamente para o compilador “saber” quais classes compilar. Isto é válido quando a opção Project > Properties > Flex Build Path > Library Path > Framework Linkage está marcado como Merged into code.

Quando a opção Framework Linkage está marcada como Runtime shared library (RSL) o registro não é necessário porque todo o framework estará junto (normalmente) com o swf da aplicação. Com isso podemos criar objetos dinamicamente da seguinte forma:

Flex 3
import mx.core.UIComponent;
import flash.utils.getDefinitionByName;

private function createButton():void {
var clazz:Class = getDefinitionByName(“mx.controls.Button”) as Class;
var instance:UIComponent = new clazz() as UIComponent;
addChild(instance);
}

Flex 4
import mx.core.UIComponent;
import spark.skins.spark.ButtonSkin;
import flash.utils.getDefinitionByName;

private function createButton():void {
var clazz:Class = getDefinitionByName(“spark.components.Button”) as Class;
var instance:UIComponent = new clazz() as UIComponent;
instance.setStyle(“skinClass”, spark.skins.spark.ButtonSkin);
addElement(instance);
}

A diferença entre o Flex 3 e 4 é que no 4 se não for definido o skinClass dará um erro no addElement informando que não foi possível encontrar o skin, o que vejo como um bug o qual reportei aqui (mais votos mais fácil o Flex Team dar uma olhada).

Out 6

FlashCamp Portugal 2010

Escrito por Mauro Martins em .NET, 1, 4, 6, Access, Adobe, Adobe User Group, Air, api, app, Apresentação, AR, arte, AUG, auto, bar, BI, blog, break, bug, camp, case, catch, class, código, Componente, Componentes, components, custom, demo, Design, designer, developer, Dica, Dicas, Download, email, empresas, err, erro, event, Evento, Eventos, facebook, falha, Ferramenta, flash, Flash / Flex, flash builder, Flash Platform, Flex, Flex 4, Flex Components, for, Formação, FullScreen, git, gmail, Google, html, html5, ide, IE, if, image, int, Introdução, jogo, Linha de Código, linkedin, lisboa, loop, Mac, map, Mate, Mercado, mg, mobile, NaN, networking, O, on, oop, Outros, PHP, platform, portugal, problema, problemas, processo, produto, Projectos, pt, rest, RIA, Ria’s Geral, screen, SEO, server, site, social, Software, spark, Sun, swf, tag, TAT, Tech, Tecnologia, Tema, Twitter, UI, User Group, UX, Vídeo, wave, web, web design, XP, yahoo, zend @ 10 6th, 2010 | via http://imauro.com/blog/ | Sem comentários
Mauro Martins
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

FlashCamp Portugal

O grande e mais que antecipado FlashCamp Portugal 2010 foi realizado no passado Sábado, em Lisboa.

Para já, fiquem aqui com o brilhante vídeo criado pelo Márcio Bonus Pité para a introdução do FlashCamp Portugal 2010:

Flash Camp Portugal – Open titles from Márcio Bonus Pité on Vimeo.

Para as pessoas que vieram do Norte, como eu, o dia foi longo! Começou com a entrada no comboio às 05:47 da manhã (ouch!) e seguiram-se duas horas e meia a falar de tudo e mais alguma coisa. Obviamente a tecnologia foi o tema dominante assim como praticamente todos os software da Adobe. À chegada à capital, fomos de Metro até à Universidade Lusófona onde já estavam muitas pessoas à entrada.

Fica aqui um “relato” sobre o evento:

AUGPT Presentation and FlashCamp2010 - Como não podia deixar de ser, o Paulo Moreira e o João Fernandes foram os primeiros a falar. Apresentaram o Adobe User Group Portugal, mostraram a agenda do dia e que planos tinham para o grupo. É sempre bom ouvi-los dizer que querem sempre mais e mais e mesmo com uma fasquia tão alta, prometem para o ano voltar a surpreender-nos. Aqui estamos nós para ajudar e participar!

Mike Jones – Designing Flex Components - Depois de aberto o evento por parte dos organizadores, foi a vez do Mike Jones, Platform Evangelist do Flex fazer a sua apresentação sobre como customizar componentes em Flex.

O Mike falou sobre como podemos integrar o Flash CS5 e o Flash Builder para podermos criar componentes e integrar os mesmos nas nossas soluções. Foi uma sessão interessante uma vez que explicou como podemos facilmente atingir um resultado bastante interessante recorrendo a estas duas ferramentas.

Coffee Break (manhã) – Coffee Break e muito network. A maior parte dos participantes aproveitaram para conversar um pouco, beber um café e foi porreiro rever muita malta que já encontrei nos eventos de Lisboa e também nos eventos aqui do Porto. Estes trinta minutos também foram agitados devido ao pequeno jogo de networking que estava preparado para os participantes. A ideia era trocar pins uns com os outros de forma a termos quatro cores diferentes para podermos participar nos sorteios ao fim do dia.

Paulo Fierro - Mobile projects - Notava-se perfeitamente que o Paulo Fierro estava totalmente à vontade na sua apresentação. Foram umas dezenas de minutos em que se falou de oportunidades de negócio resultantes de nichos de mercado que são encontradas quase ao acaso e para satisfazer as nossas necessidades pessoais. Falou também que, por vezes, não basta saltar de cabeça para um projecto e que convém estarmos com os pés na terra porque podemos sempre ter alguns dissabores ao longo do tempo. É bom ver este tipo de abordagem que quase nunca é falada em eventos tecnológicos e de certeza que colocou ali muitas cabeças cheias de vontade para pegarem nos seus projectos e alcançar os seus objectivos.

AUGPT Community Showcase - Jorge Varandas/Paulo Afonso, Nuno Morgadinho, Nuno Ribeiro, João Gonçalves - Como é óbvio, uma das mais-valias destes eventos é promover, e bem, o que se faz em Portugal. Foi este o caso. A qualidade estava bastante elevada nos projectos que foram apresentados. O João Gonçalves mostrou o seu último trabalho para a Audi que era bastante interactivo e que, pelos vistos, foi um sucesso para a marca fazendo esgotar as datas dos test-drives para os carros em questão! O Jorge Varandas e o Paulo Afonso (quem diria que ele era nortenho? Uma surpresa!) monstraram alguns truques bem interessantes para elevar o nível dos sites feitos em Flash a um patamar superior não descurando os factores de SEO que tanto importam às marcas. O Nuno Morgadinho também demonstrou projectos muito interessantes nos quais tinha trabalhado. Por fim o Nuno Ribeiro que, depois um showcase dos seus trabalhos, resolveu falar sobre o que está mal no mercado português a nível de web design, empresas, projectos para a web, etc. Foi a apresentação que causou mais controvérsia e discussão. No entanto, como tinha chegado a altura de almoçar e a malta tinha de ir embora para cumprir os prazos do evento, tivemos todos de sair da sala, porque era garantido que havia ali pano para mangas…

Almoço – Almoço com os estrangeiros a gostarem da dobrada que serviram na cantiga da faculdade! Aproveitou-se a oportunidade para se falar sobre as apresentações que ocorreram de manhã e também sobre tudo e mais alguma coisa :)

João Saleiro – Skin Flex 4 apps with Spark – O João Saleiro brindou-nos, como é habitual, com uma apresentação muito hands-on que nos demonstra como os profissionais trabalham no mercado actual. Confesso que gostei bastante do conteúdo se bem que entendo que, com um plateia muito preenchida de designers, foi um assunto que colocou algumas pessoas confusas. Acho que o problema aqui foi não passar a informação que os designers não precisavam de escrever uma linha de código para poder criar so componentes para os developers trabalharem.

Niqui Merret – Bugs Catch’em All – Uma apresentação super divertida mas ao mesmo tempo muito séria sobre um assunto que nos deve preocupar a todos… Os bugs! Foram mostradas diversas plataformas e software que nos ajuda na exterminação destes pequenos problemas que fazem a nossa vida um inferno! Quando abordado com uma precisão quase matemática, a forma de analisar um bug pode tornar-se um processo interessante! Confesso que não conhecia o “Charles” visto que sempre utilizei o Service Capture, mas vou, com certeza, testar!

Coffee-Break (tarde) – Foi uma surpresa encontrar pessoas que estão em Lisboa a trabalhar e que já trabalharam aqui no Porto comigo. Depois de colocar a informação up-to-date, foi a vez de falar com mais malta que não conseguia e falar sobre o Adobe User Group Porto.

Rui Silva – Internationalization in the Flash Platform – Depois do descanso da tarde, foi a vez do Manager do Adobe User Group Porto, o Rui Silva, falar sobre um tema que tendemos a esquecer mas que é de importância extrema quando pensamos em internacionalizar o nosso produto, as línguas! Foram dadas várias dicas e mostradas várias soluções que a plataforma Flash já possui para facilitar esta implementação de múltiplas línguas nos nossos produtos e que, colocar o nosso software em outra língua não é só a “bandeirinha” e os textos.

Lee Brimelow – My Head Hurts – Por fim… Um senhor que é quase a estrela de rock da plataforma Flash mundial (muito por culpa do seu site, gotoandlearn que deverá ter sido o primeiro sítio onde as pessoas aprenderam a programar em Flash, e ao seu blog de referência, theflashblog). Nota-se perfeitamente que o Lee Brimelow é um senhor a fazer apresentações. Já muito habituado a estas andanças, tratou de um assunto sério, que nos preocupa a todos (Flash, HTML5, onde estamos, onde vamos, etc.) mas de uma forma extremamente interessante e que gerou muitos comentários da parte dos presentes.

As críticas, todas as que pensei ter foram apontadas noutros blog, mas aqui ficam:

- Os microfones. Como a sala era grande, não se ouvia muito bem o que as pessoas diziam;

- O microfone do speaker. Como era estático, obrigava-os a ficarem quietos, o que para alguns, foi uma tensão extra (ou no caso de serem altos, como o João Saleiro, que se tinha de curvar para que se fizesse ouvir bem);

- Acho que não haver uma indicação que havia wireless, e uma hashtag para o twitter, foi uma falha, porque a malta queria era comunicar e expressar o que ouvia;

- O jogo dos pins podia ser mais difícil, vi alguma malta a aldrabar aquilo eheh;

Tirando estas pequenas falahas, foi um dia muito bem passado, com muito conteúdo para digerir e só posso dizer… Venha o próximo!

Um muito obrigado ao Paulo, ao João e a muitos outros que fizessem com que o evento fosse um sucesso e parabéns à malta que criou o logótipo, o site, e tudo o resto!

PS :Aqui fica uma grande recordação deste dia (obrigado ao Francisco Costa pela foto!):

IMG 0991 FlashCamp Portugal 2010

  • Blog this on Blogger
  • Subscribe to the comments for this post?
  • Share this on del.icio.us
  • Digg this!
  • Share this on Facebook
  • Email this via Gmail
  • Post on Google Buzz
  • Share this on LinkedIn
  • Email this to a friend?
  • Post this to MySpace
  • Share this on Reddit
  • Stumble upon something good? Share it on StumbleUpon
  • Share this on Technorati
  • Tweet This!
  • Buzz up!
  • Email this via Yahoo! Mail



« Entradas anteriores | Entradas recentes »

ACERCA

O que é o RedeRIA ?

O redeRIA não é nada mais que um agregador de feed's que disponibiliza o conteudo de varios blogs e autores ao redor do mundo RIA, actualmente agregamos mais de 2791 entradas vindas de 53 blogs especializados em ria’s, pelo que só fica a ganhar em assinar o feed ou seguir a comunidade no twitter.

Se acha que o seu blog ou um blog de um amigo é interessante e util para os leitores o redeRIA, faça a sua submissão aqui.

Feed: assine já
Twitter: siga-nos

GOOGLE

Votação


Deveria o RedeRia agregar conteúdo em inglês?
Ver Resultados

AUTORES


Eduardo KrausAlexandre TadashiBindableCognitiva SoluçõesDaniel LopesDaniel SchmitzDanielPedrinhaDClick TeamEbercomEdgard DavidsonElvis FernandesErko BrideeFabiel PrestesFábio Batista da SilvaFabio da SilvaFabriccio BernardesFelipe BorellaFlavia MoreiraGabriel VersalliniGabriela T. PerryIgor MusardoJanderson CardosoJoão AugustoJose Carlos FielKelps SousaLeonardo FrançaLucas MarçalLuis MessiasLuiz TarabalMario JuniorMário SantosMauro MartinsPablo SouzaPedro ClaudioreneRia BrazilriaPTRicardo CerqueiraRobson FernandesRodrigo Pereira FragaSaintBrSamuelFacchinelloSergio SouzaSilva DeveloperStefan HorochovecTech CaffeTecinforThiago BuenoVedVinícius SandimWillian ManoXAML Cast

PUBLICIDADE








Powered by Wordpress & msdevstudio.com