Veja também:

• Oracle XE : Mudando a porta padrão HTTP
• Como jogar Call Of Dudy 4 MW em servidores do Brasil?
• WebLogic 10.x + Hibernate 3 (JPA) e base Oracle 9+
• [Adobe Flex] Definindo o foco na aplicação
• [Adobe Flex] comparando datas de maneira rápida e fácil

A Oracle disponibilizou uma correção de emergência para consertar uma vulnerabilidade que afirma poder “derrubar” seus servidores de aplicação HTTP que são baseados em Apache 2.0 ou 2.2.
Os cibercriminosos podem explorar a brecha de segurança remota…

Veja também:

• Flerry 1.2.0 disponível
• FlexMania 2010 – Adobe Flex + Oracle WebLogic 10.x
• Adobe Flex + BlazeDS e um problema de conexão no servidor
• Adobe Flash Builder + Flex 4 + BlazeDS 4
• Adobe Flex 3.5 : UploadDownloadBlazeDS

Hoje vou mostrar a integração de aplicações Flex 4 com back-end Java, utilizando o Blazeds para comunicação entre eles. Durante a instalação e configuração do ambiente de desenvolvimento, estamos considerando que você está trabalhando numa máquina com Windows. Caso não seja este o caso não fique preocupado, basta repetir os mesmos passos descritos para o Windows adaptando para o sistema operacional que você estiver utilizando.

1. Instalações

- Download Java Development Kit (JDK6), e após configurar a váriavel de sistema JAVA_HOME.
- Download Eclipse IDE for Java Developers.
- Download BlazeDS Turnkey, contêm uma versão configurada do servidor Tomcat e diversos exemplos.
- Download Adobe Flash Builder 4, versão Standalone.

2. Instalando o BlazeDS

Após o download do BlazeDS descompacte-o num diretório de sua preferência:
C:blazeds

* Nesse momento você já deve ter instalado o JDK e confgurado a variável JAVA_HOME.

Para verificar se tudo está funcionando vamos iniciar o servidor Tomcat.

Abra um prompt do Windows e digite:
cd C:blazedstomcatbin

Em seguida inicie o servidor Tomcat:
catalina start

Após a inicialização do servidor, você verá a janela abaixo:

O servidor de aplicação foi inicializado na porta 8400. Como eu disse anteriormente, o BlazeDS Turnkey vem com uma série de aplicações de exemplo mostrando a integração entre o Adobe Flex e o Java.

Para verificar se o servidor está rodando corretamente e ver as aplicações que citei, digite num browser de sua preferência:
http://localhost:8400/

3. Instalando o Eclipse

Após o download do Eclipse, descompacte o conteúdo do arquivo compactado para uma pasta um diretório de sua preferência:
C:eclipse

* Assim como o BlazeDS, o Eclipse também não necessita de instalação. Basta descompactá-lo para utilizar.

4. Instalando o Flash Builder 4

Para a instalação do Adobe Flash Builder 4 basta você ir avançando as opções, sempre mantendo os valores padrões. A versão Standalone é uma versão Trial que dura 60 dias. No site da Adobe você pode obter gratuitamente uma licensa de utilização caso você se enquadre nas exigências legais (estudantes, profissionais autônomos, etc).

5. Criando o projeto Java

Abra a pasta onde você descompactou o Ecplise e execute-o:
C:eclipseeclipse.exe

Em seguida vamos criar nosso projeto Java. Clique em:
File > New > Dynamic Web Project

Agora vamos criar um bean que será usado na serialização das informações que serão trocadas entre o Adobe Flex e o Java.

Clique com o botão direito do mouse no projeto e então:
New > Class

A seguir a implementa da nossa classa Java bean Usuario.java:

package br.com.rectius.model;
?
import java.io.Serializable;
?
public class Usuario implements Serializable {
?
	/**
	 *
	 */
	private static final long serialVersionUID = 1L;
?
	private String nome;
	private String email;
	private String cargo;
?
	public void setNome(String nome) {
		this.nome = nome;
	}
	public String getNome() {
		return nome;
	}
?
	public void setEmail(String email) {
		this.email = email;
	}
	public String getEmail() {
		return email;
	}
?
	public void setCargo(String cargo) {
		this.cargo = cargo;
	}
	public String getCargo() {
		return cargo;
	}
?
}

Agora vamos criar nossa camada de serviço, que será o ponto de entrada das requisições do nosso front-end Flex.

Clique novamente com o botão direito do mouse sobre o projeto e então:
New > Class

A seguir a implementação da nossa camada de serviço UsuarioService.java:

package br.com.rectius.service;
?
import java.util.ArrayList;
?
import br.com.rectius.model.Usuario;
?
public class UsuarioService {
?
	/*
	 * Como não estamos utilizando nenhuma ferramenta
	 * para persistência dos dados, vamos armazenar
	 * a informações nessa lista estática
	 */
	private static ArrayList<Usuario> listaUsuarios =
		new ArrayList<Usuario>();
?
	/*
	 * Insere um novo usuário
	 * @param usuario
	 */
	public void insereUsuario(Usuario usuario)
	{
		listaUsuarios.add(usuario);
	}
?
	/*
	 * Retorna todos os usuários
	 * @return
	 */
	public ArrayList<Usuario> listaUsuarios()
	{
		return listaUsuarios;
	}
?
}

Pronto! Nossa aplicação Java já está finalizada.

6. Configurando o BlazeDS

Para que o Adobe Flex possa se comunicar com nossa camada de serviço no Java, teremos que modificar alguns arquivos de configuração do BlazeDS.

Abra a pasta onde você descompactou o BlazeDS:
C:blazeds

Crie um nova pasta chamada:
C:blazedsBlazedsConfigBase

Localize agora o arquivo blazeds.war e descompacte-o na pasta que acabamos de criar:
Arquivo: C:blazedsblazeds.war
Pasta: C:blazedsBlazedsConfigBase

Veja o contéudo da pasta C:blazedsBlazedsConfigBase>:
C:blazedsBlazedsConfigBaseMETA-INF
C:blazedsBlazedsConfigBaseWEB-INF

* A pasta WEB-INF contém toda a informação necessária para a integração de um projeto Adobe Flex + Java + Blazeds.

Agora vamos copiar algumas pastas do BlazeDS para dentro nosso projeto Java. Localize a pasta:
C:blazedsBlazedsConfigBaseWEB-INF

Copie o arquivo e os diretórios abaixo para WebContentWEB-INF, dentro do Eclipse:
C:blazedsBlazedsConfigBaseWEB-INFweb.xml
C:blazedsBlazedsConfigBaseWEB-INFflex
C:blazedsBlazedsConfigBaseWEB-INFlib

A pasta lib contém todas as biliotecas necessárias para realizar a comunicação do Adobe Flex com o Java.
A pasta flex contém os arquivos de configuração necessários para estabelecer essa comunicação.

Nesse momento a estrutura do seu projeto deve estar como na imagem abaixo:

Agora vamos configurar nossa aplicação para que o Flex consiga se comunicar com o nosso projeto Java.

Dentro do Eclipse localize e abre o arquivo:
WebContentWEB-INFweb.xml

Configure-o conforme a seguir:

<?xml version="1.0" encoding="UTF-8"?>
DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
?
    <display-name>BlazeDSdisplay-name>
    <description>BlazeDS Applicationdescription>
?
    -- Http Flex Session attribute and binding listener support -->
    <listener>
        <listener-class>flex.messaging.HttpFlexSessionlistener-class>
    listener>
?
    -- MessageBroker Servlet -->
    <servlet>
        <servlet-name>MessageBrokerServletservlet-name>
        <display-name>MessageBrokerServletdisplay-name>
        <servlet-class>flex.messaging.MessageBrokerServletservlet-class>
        <init-param>
            <param-name>services.configuration.fileparam-name>
            <param-value>/WEB-INF/flex/services-config.xmlparam-value>
       init-param>
        <load-on-startup>1load-on-startup>
    servlet>
?
-- begin rds
end rds -->
    <servlet>
        <servlet-name>RDSDispatchServletservlet-name>
		<display-name>RDSDispatchServletdisplay-name>
        <servlet-class>flex.rds.server.servlet.FrontEndServletservlet-class>
		<init-param>
			<param-name>useAppserverSecurityparam-name>
			<param-value>falseparam-value>
		init-param>
        <load-on-startup>10load-on-startup>
    servlet>
?
    <servlet-mapping id="RDS_DISPATCH_MAPPING">
        <servlet-name>RDSDispatchServletservlet-name>
        <url-pattern>/CFIDE/main/ide.cfmurl-pattern>
    servlet-mapping>
?
    <servlet-mapping>
        <servlet-name>MessageBrokerServletservlet-name>
        <url-pattern>/messagebroker/*
    
?
    
        index.html
        index.htm
    
?
    
    
?

Ainda dentro do Eclipse localize e abra o arquivo:
WebContentWEB-INFflexremoting-config.xml

Dentro desse arquivo é que informamos quais os serviços que nosso front-end Flex poderá ter acesso. Para tal basta criar um novo destino para cada serviço.

Crie um destino para o serviço UsuarioService adicionando no arquivo remoting-config.xml o código abaixo:

    <destination id="UsuarioService">
    	<properties>
    		<source>br.com.rectius.service.UsuarioServicesource>
    	properties>
    destination>

Pronto! O projeto Java já está configurado para trabalhar com o BlazeDS.

7. Publicando nossa aplicação no Tomcat

Já terminamos o projeto Java e a configuração do BlazeDS. Agora o próximo passo é publicar o projeto no servidor de aplicações Tomcat.

Navegue até a pasta:
C:blazedstomcatwebapps

Crie uma pasta para o projeto Java:
C:blazedstomcatwebappsGerenciaUsuario

Agora dentro do Eclipse, clique sobre a pasta WEB-INF e a copie Edit > Copy.

Cole então seu conteúdo na pasta que criada no passo acima:
C:blazedstomcatwebappsGerenciaUsuario

Agora reinicie o servidor de aplicação Tomcat para subir o projeto que acabamos de fazer deploy:
catalina stop
catalina start

08. Criando o projeto Flex

Uma das novidades do novo ambiente de desenvolvimento Adobe Flex, o Flash Builder 4, é sem dúvidas os recursos de conexão a dados e serviços.
No passo 4 nós fizemos a instalação do Flash Builder 4. Agora localize seu ícone na área de trabalho ou no menu iniciar e abra o aplicativo.

Em seguida crie um novo projeto Flex. Clique em File > New > Flex Project

Agora faça suas configurações conforme a imagem abaixo:

Root folder: Representa o diretório onde fizemos o deploy do nosso projeto Java, dentro do servidor de aplicação.
Root URL: Representa a URL de acesso ao projeto no servidor de aplicação.
Context root: Representa o nome da nossa aplicação.
Output folder: Representa o local onde serão compilados os arquivos do Flex.

Clique em Validate Configuration para se certificar de que você configurou tudo corretamente e em seguida clique em Finish.

Antes de qualquer coisa vamos conferir se o Flash Builder inseriu corretamente um parâmetro de compilação no projeto Flex.

Clique com o botão direito do mouse no projeto Flex, clique em Properties e certifique-se de que o argumento de compilação -services foi inserido:

Agora vamos criar a interface. Digite o código abaixo:

<?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">
?
	<s:controlBarContent>
		<s:Label text="Gerenciamento de Usuários"
				 fontWeight="bold" fontSize="18"/>
	s:controlBarContent>
?
	<s:layout>
		<s:VerticalLayout
			horizontalAlign="center" verticalAlign="middle"
			paddingLeft="10" paddingRight="10" paddingBottom="20" paddingTop="20"/>
	s:layout>
?
	<s:Panel title="Cadastro de Usuários" width="500">
?
	s:Panel>
?
	<s:Panel width="500" height="100%" title="Listagem de Usuários">
		<mx:DataGrid id="dgUsuarios" left="20" right="20" bottom="20" top="20">
		mx:DataGrid>
	s:Panel>
?
s:Application>

09. Conectando a aplicação Adobe Flex ao Java

Em seguida vamos utilizar os novos recursos inseridos no Flash Builder 4 para se comunicar com o Java.

Clique em Windows > Data/Services. Após a aba correspondente se abrir clique em Connect to Data/Service….

Veja que alguns arquivos foram criados automaticamente:

Clique com o botão direito em qualquer ponto da sua Application (não clique nos componentes Panel ou qualquer outro que não seja a Application) e clique em Generate Service Call:

Em seguida selecione o método listaUsuarios():

Vá para o modo de visualização “Source” e veja que um método handler foi criado para manipular o evento CreationComplete da Application.

Agora volte para o modo “Design”, clique com o botão direito no componente DataGrid e em seguida clique em Bind to Data…

Clique no botão OK e veja o resultado:

Finalizamos o código para a listagem dos usuários. Agora precisamos fazer o código que vai inserir os usuários.

Novamente clique com o botão direito do mouse no componente DataGrid e então clique na opção Generate Details Form…

Arrume o posicionamento do formulário de cadastro, altere o label do botão. Em seguida clique com botão direito do mouse sobre o botão e Generate Service Call…

Agora altere o método button_clickHandler que foi gerado automaticamente:

protected function button_clickHandler(event:MouseEvent):void
{
	var usuario:Usuario = new Usuario();
	usuario.email = emailTextInput.text;
	usuario.nome = nomeTextInput.text;
	usuario.cargo = cargoTextInput.text;
	insereUsuarioResult.token = usuarioService.insereUsuario(usuario);
}

Com isso já conseguimos inserir usuários na coleção do back-end Java. Agora vamos modificar nosso código para que toda vez que um usuário for inserido os usuários sejam listados novamente no componente DataGrid.

Agora altere o método insereUsuarioResult_resultHandler:

protected function insereUsuarioResult_resultHandler(event:ResultEvent):void
{
	listaUsuariosResult.token = usuarioService.listaUsuarios();
}

Agora rode sua aplicação e veja o resultado final.

Pronto! A aplicação está rodando perfeitamente.
Como lição de casa, faça com que seja possível remover e alterar um usuário.

Fontes do projeto:

Download do projeto Flex (28 KB)
Download do projeto Java (3.67 MB)

Referências:
- Accessing data services overview

Espero que tenham gostado e até a próxima!

Um das grandes passagens do livro Code Complete é sem dúvidas aquela que diz: “se uma linguagem não suporta nativamente uma determinada implementação, você deve então programar ‘para a linguagem’ e não ‘na linguagem’ “. O exemplo que o livro apresenta para essas limitações é justamente com relação ao Typesafe Enum, nossa dica Flex de hoje.

Os Enums são muito utilizados para evitar redundância de código e garantir o máximo de segurança nas aplicações. Além de serem excelentes objetos para se trabalhar com estados e tipos, eles também são parte essencial quando trabalhamos com o padrão de projeto State. Ele é muito utilizado também para limitar as opções de argumentos para determinados métodos. O problema é que diferente do Java 5 ou do ActionScript 2, o ActionScript 3 não suporta Enums e não permite usar o modificador privado no construtor das classes.

Suponha que temos um método que retorna a URL de uma imagem em 3 diferentes tamanhos: Pequeno, médio e grande. Para retornar o caminho dessa imagem passamos como argumento do método qual o tamanho que esperamos. Sem utilizar o Typesafe Enum poderíamos fazer conforme código abaixo:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<?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"

               initialize="application1_initializeHandler(event)">



    <fx:Script>

        <![CDATA[

            import mx.events.FlexEvent;



            private static const PEQUENO:String     = "pequeno";

            private static const MEDIO:String     = "medio";

            private static const GRANDE:String   = "grande";



            protected function application1_initializeHandler(event:FlexEvent):void

            {

                trace( retornaCaminhoImagem("texto qualquer") );

            }



            private function retornaCaminhoImagem(tamanho:String):String

            {

                var caminho:String;

                switch(tamanho)

                {

                    case PEQUENO:

                    {

                        caminho = "http://www.suaurl.com/imagem_pequena.jpg";

                        break;

                    }

                    case MEDIO:

                    {

                        caminho = "http://www.suaurl.com/imagem_media.jpg";

                        break;

                    }

                    case GRANDE:

                    {

                        caminho = "http://www.suaurl.com/imagem_grande.jpg";

                        break;

                    }

                    default:

                    {

                        caminho = "[ERRO]";

                    }

                }



                return caminho;

            }



        ]]>

    </fx:Script>



</s:Application>

O problema no código acima é que podemos passar como argumento do método “retornaCaminhoImagem()” qualquer string:

1
trace( retornaCaminhoImagem("texto qualquer") );

Para resolvermos o problema acima vamos criar uma classe que implementa o padrão Typesafe Enum:

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
27
28
29
30
31
32
33
package enum

{

    public class ImageSizeEnum

    {



        public static const PEQUENO:ImageSizeEnum   = new ImageSizeEnum("pequeno");

        public static const MEDIO:ImageSizeEnum     = new ImageSizeEnum("medio");

        public static const GRANDE:ImageSizeEnum    = new ImageSizeEnum("grande");



        private var _tamanho:String;



        private static var _instance:Boolean = false;



        // Bloco estático

        {

            _instance = true;

        }



        public function ImageSizeEnum(tamanho:String)

        {

            if(_instance)

            {

                throw new Error("Você não pode instanciar um Typesafe Enum");

            }

            _tamanho = tamanho;

        }



        public function toString():String

        {

            return this._tamanho;

        }

    }

}

Repare no bloco estático que criamos, ele será excutado assim que a classe for carregada na memória, portanto antes do construtor da classe ser chamado e depois que todos os membros estáticos forem criados.

Agora crie um novo método chamado “retornaCaminhoTypesafeEnum()”:

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
27
28
private function retornaCaminhoTypesafeEnum(tamanho:ImageSizeEnum):String

            {

                var caminho:String;

                switch(tamanho)

                {

                    case ImageSizeEnum.PEQUENO:

                    {

                        caminho = "http://www.suaurl.com/imagem_pequena.jpg";

                        break;

                    }

                    case ImageSizeEnum.MEDIO:

                    {

                        caminho = "http://www.suaurl.com/imagem_media.jpg";

                        break;

                    }

                    case ImageSizeEnum.GRANDE:

                    {

                        caminho = "http://www.suaurl.com/imagem_grande.jpg";

                        break;

                    }

                    default:

                    {

                        caminho = "[ERRO]";

                    }

                }



                return caminho;

            }

Para utilizá-lo faça:

1
trace( retornaCaminhoTypesafeEnum(ImageSizeEnum.GRANDE) );

Faça alguns testes, tente instanciar nosso Enum para criar um novo tipo:

1
var enum:ImageSizeEnum = new ImageSizeEnum("novo_tipo");

Como resultado você deve ter recebido um erro em tempo de execução com a mensagem: “Você não pode instanciar um Typesafe Enum”.

Agora tente passar uma string qualquer como argumento do método “retornaCaminhoTypesafeEnum()”:

1
trace( retornaCaminhoTypesafeEnum("novo_tipo") );

Você deve ter visto um erro em tempo de compilação uma vez não ser possível passar como argumento do método uma string quando ele espera o tipo “ImageSizeEnum”.

Bom galera espero que tenham gostado. Veja aqui um projeto de exemplo.

Até a próxima!

Algo legal no Flex é que eles nos disponibiliza gráficos, porém, sinceramente o estilo padrão dos gráficos com cores sólidas não me agrada muito, ao meu ver cansa os olhos, então resolvi mudar as cores solidas para um padrão em degrade, para suavizar as cores…

 

Obs.: tendo em mente que os componentes dos gráficos ainda são os mesmos no Flex 3 e 4 os códigos mxml a seguir serão do Flex 3.

 

Começando pelo gráfico de barras, para ter o seguinte resultado precisei:

Código MXML:

^?View Code ACTIONSCRIPT3

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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">   <mx:Script> <![CDATA[ import code.StyleColumnChart;   import mx.charts.chartClasses.IAxis;   private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String { return currencyFormatter.format(item); }   private function categoryAxis_labelFunc(item:Object, prevValue:Object, axis:CategoryAxis, categoryItem:Object):String { var datNum:Number = Date.parse(item); var tempDate:Date = new Date(datNum); return dateFormatter.format(tempDate).toUpperCase(); } ]]> </mx:Script>   <mx:DateFormatter id="dateFormatter" formatString="DD" /> <mx:CurrencyFormatter id="currencyFormatter" precision="2" />   <mx:XMLListCollection id="dp"> <mx:source> <mx:XMLList> <quote date="8/1/2007" open="40.29" close="39.58" /> <quote date="8/2/2007" open="39.4" close="39.52" /> <quote date="8/3/2007" open="39.47" close="38.75" /> <quote date="8/6/2007" open="38.71" close="39.38" /> <quote date="8/7/2007" open="39.08" close="39.42" /> <quote date="8/8/2007" open="39.61" close="40.23" /> <quote date="8/9/2007" open="39.9" close="40.75" /> <quote date="8/10/2007" open="41.3" close="41.06" /> <quote date="8/13/2007" open="41" close="40.83" /> <quote date="8/14/2007" open="41.01" close="40.41" /> <quote date="8/15/2007" open="40.22" close="40.18" /> <quote date="8/16/2007" open="39.83" close="39.96" /> <quote date="8/17/2007" open="40.18" close="40.32" /> <quote date="8/20/2007" open="40.55" close="40.74" /> <quote date="8/21/2007" open="40.41" close="40.13" /> <quote date="8/22/2007" open="40.4" close="40.77" /> <quote date="8/23/2007" open="40.82" close="40.6" /> <quote date="8/24/2007" open="40.5" close="40.41" /> <quote date="8/27/2007" open="40.38" close="40.81" /> </mx:XMLList> </mx:source> </mx:XMLListCollection>   <mx:ColumnChart id="columnChart" showDataTips="true" dataProvider="{dp}" width="100%" height="100%">   <!-- vertical axis --> <mx:verticalAxis> <mx:LinearAxis baseAtZero="false" labelFunction="linearAxis_labelFunc" /> </mx:verticalAxis>   <!-- horizontal axis --> <mx:horizontalAxis> <mx:CategoryAxis id="ca" categoryField="@date" title="August 2007" labelFunction="categoryAxis_labelFunc" /> </mx:horizontalAxis>   <!-- horizontal axis renderer --> <mx:horizontalAxisRenderers> <mx:AxisRenderer axis="{ca}" canDropLabels="true" /> </mx:horizontalAxisRenderers>   <!-- series --> <mx:series> <mx:ColumnSeries displayName="Open" xField="@date" yField="@open" fill="{StyleColumnChart.orangeLinearGradient}" stroke="{StyleColumnChart.orangeStroke}"> </mx:ColumnSeries> <mx:ColumnSeries displayName="Close" xField="@date" yField="@close" fill="{StyleColumnChart.blueLinearGradient}" stroke="{StyleColumnChart.blueStroke}"> </mx:ColumnSeries> </mx:series>   <!-- series filters --> <mx:seriesFilters> <mx:Array /> </mx:seriesFilters> </mx:ColumnChart> </mx:Application>

Obs.: esse código acima reaproveitei do respectivo post do blog.flexexamples.com

Código da classe AS3 para gerar o efeito visual:

^?View Code ACTIONSCRIPT3

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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

package code { import mx.graphics.GradientEntry; import mx.graphics.LinearGradient; import mx.graphics.Stroke;   [Bindable] public class StyleColumnChart { public function StyleColumnChart() {}   //---------------------------------------------------------------------- // @BEGIN: LinearGradient color   public static function linearGradientColor(colorDark:uint, colorLight:uint):LinearGradient { var linearGradient:LinearGradient = new LinearGradient(); var arr:Array = []; arr.push(new GradientEntry(colorDark, 0.0, 0.8)); arr.push(new GradientEntry(colorLight, 1.0, 0.6)); linearGradient.entries = arr; return linearGradient; }   public static function get redLinearGradient():LinearGradient { return linearGradientColor(0x990000,0xEE0000); }   public static function get greenLinearGradient():LinearGradient { return linearGradientColor(0x008B00,0x00FF00); }   public static function get blueLinearGradient():LinearGradient { return linearGradientColor(0x0066FF,0x00CCFF); }   public static function get yellowLinearGradient():LinearGradient { return linearGradientColor(0xCAC333, 0xF5F30E); }   public static function get orangeLinearGradient():LinearGradient { return linearGradientColor(0xFC9C00, 0xFCC048); }   // @END: LinearGradient color //---------------------------------------------------------------------- // @BEGIN: stroke color   public static function strokeColor(color:uint):Stroke { return new Stroke(color,1); }   public static function get redStroke():Stroke { return strokeColor(0x990000); }   public static function get greenStroke():Stroke { return strokeColor(0x008B00); }   public static function get blueStroke():Stroke { return strokeColor(0x0066FF); }   public static function get yellowStroke():Stroke { return strokeColor(0xCAC333); }   public static function get orangeStroke():Stroke { return strokeColor(0xFC9C00); }   // @END: stroke color //---------------------------------------------------------------------- } }

A seguir segue um exemplo para gráfico de pizza:

Código MXML:

^?View Code ACTIONSCRIPT3

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 27 28 29 30 31 32 33 34 35 36

<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection;   import code.StylePieChart;   [Bindable] public var expenses:ArrayCollection = new ArrayCollection([ {Data:"IN", Value:2000}, {Data:"OUT", Value:1000} ]);   ]]> </mx:Script>   <mx:Panel title="Pie Chart">   <mx:PieChart id="myChart" dataProvider="{expenses}" showDataTips="true"> <mx:series> <mx:PieSeries field="Value" nameField="Data" labelPosition="callout" fills="{StylePieChart.inOutFills}"/> </mx:series> </mx:PieChart>   <mx:Legend dataProvider="{myChart}"/>   </mx:Panel>   </mx:Application>

Código da classe AS3 para gerar o efeito visual:

^?View Code ACTIONSCRIPT3

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 27 28 29 30 31 32 33 34 35 36 37 38

package code { import mx.graphics.GradientEntry; import mx.graphics.RadialGradient; import mx.graphics.SolidColor;   [Bindable] public class StylePieChart { public function StylePieChart() {}   //----------------------------------------------------------------------   public static function get inOutFills():Array { var gradients:Array = new Array();   var fill:RadialGradient = null; var g1:GradientEntry = null; var g2:GradientEntry = null;   fill = new RadialGradient(); g1 = new GradientEntry(0xCC3640); g2 = new GradientEntry(0x990000); fill.entries = [g1,g2]; gradients.splice(-1,0,fill);   fill = new RadialGradient(); g1 = new GradientEntry(0x30BB32); g2 = new GradientEntry(0x009900); fill.entries = [g1,g2]; gradients.splice(-1,0,fill);   return gradients; }   //---------------------------------------------------------------------- } }

Para achar as cores utilizei os itens descritos neste post: [Adobe AIR] Color Browser

Veja também:

• [Flex & AIR] Swiz Framework – meus primeiros passos
• Java Magazine 68 : Artigo sobre Adobe Flex e AIR
• s:TextArea – recuperando um texto selecionado
• [Flex & AIR] Swiz Framework + Presentation Model : Exemplo de Projeto
• FlexMania 2010 – Adobe Flex + Oracle WebLogic 10.x

Um dica de 1 itém para configurar após a instalação do Oracle XE, caso você trabalhe com desenvolvimento web, principalmente em java, onde seu Apache Tomcat utiliza a porta 8080…

No meu caso que desenvolvo aplicações Java Web, localmente a porta 8080 já pertence ao Apache Tomcat, então instalando o Oracle XE, temos um problema, o pessoal da Oracle por algum motivo resolveu definir a porta padrão do Oracle XE também na porta 8080, então o que fazer? Simples, só mudar a porta…

Mas como mudar a porta HTTP padrão do Oracle XE?

Após a instalação do Oracle XE, muito provavelmente ele já irá iniciar o administrador da base, executando a URL: http://127.0.0.1:8080/apex/

Então acesse a área para executar um comando SQL, e execute o respectivo comando:

^?View Code SQL

1 2 3 4

begin dbms_xdb.sethttpport('90'); dbms_xdb.setftpport('2100'); end;

No meu caso resolvi mudar as portas para:

HTTP:  90 – tenho certeza que não uso para nada

FTP: 2100 – se bem que a princípio não usarei, então poderia ter deixado em 0

SQL para verificar as portas definidas:

^?View Code SQL

1 2 3 4

select dbms_xdb.gethttpport as "HTTP-Port", dbms_xdb.getftpport as "FTP-Port" from dual;

Uma vez executado o comando, se você tentar executar qualquer outra SQL, através a URL atual na porta 8080, não irá funcionar, então você terá que acessar novamente o administrador, através da nova porta definida: http://127.0.0.1:90/apex/

Feito isso, você, assim como eu poderá continuar utilizando a porta 8080 para o Apache Tomcat.

Via: daust_de

Veja também:

• WebLogic 10.x + Hibernate 3 (JPA) e base Oracle 9+
• [Adobe Flex] comparando datas de maneira rápida e fácil
• Oracle, Java e um problema com a URL de conexão
• Oracle SQL : Selecionando um intervalo similar a cláusula LIMIT
• Tomcat + Oracle: como configurar um datasource

Twitter!

Objetivo:

Olá pessoal, neste poste eu pretendo falar um pouco mais sobre o Spring Roo e como criar um modelo de entidades complexo.
Pretendo falar da configurar o banco de dados até a criação de relacionamentos, também vou explicar
cada um dos comando utilizado na criação de entidades e configuração de banco de dados.

Abaixo segue uma lista dos principais comando, e seus parâmetros, utilizados na criação de entidades pelo Spring Roo. Procurei colocar todos os parâmetros de cada comando, mas como alguns parâmetros são utilizados em vários comandos vou colocar a descrição deles apenas uma vez.

Persistence setup:

–provider: Utilizado para configurar o provaider do JPA, os possíveis valores para esse parâmetro são:
Hibernate,
EclipseLink,
OpenJPA
DataNucleus

–database: Utilizado para configurar qual o bando de dados será utilizado na aplicação, os possíveis valores são:
HSQL(em memória),
HSQL,
H2(em memória),
MySql,
Postgres,
MS SQL Server,
Sysbase,
Oracle,
DB2,
Google App Engine,
Derby

–applicationId: Identificador de aplicativo do Google App
–databaseName: Utilizado para configurar o nome do banco de
–jndiDataSource: Utilizado para referênciar um DataSource configurado na árvore
–password: Utilizado para configurar a senha do usuário do banco de dados
–userName: Utilizado parar configurar o usuário do banco de dados

Os parâmetros (databaseName, password, userName) podem ser configurados diretamente no arquivo “database.properties”.
Este arquivo se encontra em src/main/resources/META-INF/spring/database.properties.
O comando persistence setup pode ser utilizado mais de uma vez. Você pode, por exemplo, utilizar HSQL e Hibernate em desenvolvimento e depois trocar para Oracle
e EclipseLink quando for colocar em produção.

Resumo:
Quando rodamos o comando “persistence setup” o Spring Roo se encarrega das seguintes configurações
1 – Configuração de dependência de JPA, ORM provaider, Drivers, Spring ORM, Spring JDBC, Commons DBCP, Commons Pool no arquivo pom.xml
2 – Configuração do arquivo “persistence.xml”
3 – Arquivo de configuração para o banco de dados “database.properties”
4 – Configuração de DataSource e Transação no arquivo de configuração do Spring

Entity:

–class: Nome da classe
–abstract: Configura a entidade como abstrata
–extends: Identifica qual classe a entidade extende
–identifierColumn: Nome da coluna que é a chave primário da tabela
–identifierField: Nome do field que será mapeado para o campo de chave primária da tabela
–identifierType: Tipo do field que será utilizado como chave primária
–inheritanceType: Utilizado para configurar a annotation “@Inheritance”
–mappedSuperclass: Indica se a entidade deve ter a annotation “@MappedSuperclass”
–permitReservedWords: Indica se o Roo deve ignorar palavras reservadas
–serializable: Indica se a entidade deve implementar a interface “java.io.Serializable;”
–table: Nome da tabela que será mapeada pela Entidade.
–testAutomatically: Indica se deve ser criado testes unitários para a Entidade

field boolean:

–fieldName: Nome do field
–class: Classe onde o field será criado
–assertFalse: Configura o field com o annotation “@AssertFalse” da especificação Bean Validation
–assertTrue: Configura o field com o annotation “@AssertTrue” da especificação Bean Validation
–class: Nome da entidade onde o field vai ser criado.
–column: Nome da coluna da tabela do banco de dados
–comment: Comentário
–notNull: Não permite valor null
–nullRequired: Configura o field para ser null.
–permitReservedWords: Permite utilizar palavras reservadas no nome dos fields
–primitive: Indica se o typo do field vai ser “boolean” ou “”Boolean
–transient:

field date

–fieldName:
–class:
–type: Configura o tipo do field Date ou Calendar;
–column:
–comment:
–dateFormat: Indica o estilo de formatação da data;
–future: Indica que a data deve ser sempre no futuro
–notNull:
–nullRequired:
–past: Indica que a data deve ser sempre no passado
–permitReservedWords:
–persistenceType: Configura como a data vai ser salva no banco de dados (DATE, TIME, TIMESTANP)
–timeFormat: Configura o tipo de formatação do field
–transient:

field enum:

–fieldName:
–class:
–type:
–column:
–comment:
–enumType: Indica como o field será persistido no banco (ORDINAL, STRING)
–notNull:
–nullRequired:
–permitReservedWords:
–transient:

field number

–fieldName:
–class:
–type:
–column:
–comment:
–decimalMax: Valor máximo
–decimalMin: Valor máximo
–digitsFraction: Quantidade máxima de números depois da virgula
–digitsInteger: Quantidade máxima de dígitos inteiros
–max: Valor máximo
–min: Valor minimo
–notNull:
–nullRequired:
–permitReservedWords:
–primitive: Indica que o field deve ser primitivo
–transient:

field reference:

–fieldName:
–class:
–type:
–comment:
–cardinality:Cardinalidade do relacionamento, default MANY_TO_ONE
–fetch: Configuracao de fetch (EAGER, LAZY)
–joinColumnName: Nome da coluna que será utilizada no relacionamento
–notNull:
–nullRequired:
–permitReservedWords:
–transient:

field set:

–fieldName:
–class:
–element: Tipo da entidade do relacionamento
–cardinality:Cardinalidade do relacionamento, default MANY_TO_MANY
–comment:
–fetch:
–mappedBy: Nome do field na entidade de referência que é dono do relacionamento
–notNull:
–nullRequired:
–permitReservedWords
–sizeMax: Numero máximo de elementos que pode existir no relacionamento
–sizeMin: Número mínimo de elementos que pode existir no relacionamento
–transient:

field string:

–fieldName:
–class:
–column:
–comment:
–decimalMax:
–decimalMin:
–notNull:
–nullRequired:
–permitReservedWords:
–regexp: Obriga o valor do field ser compatível com a expressão regular
–sizeMax: Tamanho máximo da string
–sizeMin: Tamanho mínimo da string
–transient

Segue também um screencast com exemplos de criação de entidades.

Neste segundo semestre do ano estamos tendo vários eventos com temas focados em Ruby ou eventos genéricos mas com espaço para a linguagem.

Apenas em Julho e Agosto tive o prazer de participar de 6 desses eventos. Uma coisa fica bastante claro, o interesse por Rails tem crescido assustadoramente.

Quando comecei a estudar a linguagem Ruby e framework Rails por volta de 2006 era comum ouvir que Ruby/Rails eram apenas modinhas e que logo isso tudo morreria.

Hoje é muito gratificante ver que esta “modinha” evoluiu para algo bem sólido no mundo todo e aqui no Brasil estamos começando a conseguir o mesmo resultado.

Isto fica bem nítido quando participamos dos eventos e vou compartilhar com vocês um pouco de como tem sido participar deles :

Mini-curso do RailsMG na UNA

Mensalmente fazemos encontros do nosso grupo, o RailsMG. Até entao nao tknhamos feito nada voltado para o publico que está interessado em começar no Ruby e no Rails.

Pensando nisso aplicamos um mini curso no meio de Julho onde eu fui o instrutor. O local para o treinamento foi cedido pela UNA e com lotação aproximada de 60 pessoas.

No esperávamos chegar perto da lotação mas o mais impressionante é que as 60 vagas foram preenchidas em menos de 5 horas.

O curso correu perfeitamente e foi bem interessante para conhecer várias pessoas de BH que tem interesse na tecnologia e mostrar um caminho por onde começar.

Os slides podem ser vistos aqui

FISL

No final de Julho, com um convite Maúricio Portal, tive o prazer de participar do FISL em Porto Alegre. Também um mini-curso mas desta vez com 6 horas (ao invés de 4 como o do RailsMG).

O curso foi quebrado em três dias com 2h por dia. No primeiro dia tivemos lotação máxima no auditório e o pessoal participou bem, com várias perguntas. O receio era que nos dias seguintes talvez o interesse diminuiria, mas isto não ocorreu e tivemos o auditório cheio nos 3 dias.

O mais interessante é que no último dia tivemos 6 horas de palestras de Ruby. Começamos com uma apresentação perfeita do Fábia Akita sobre o ecossistema Rails. Mostrando que Rails não é apenas um framework mas um plataforma sólida, focada em empreendimento e que caminha sozinha sem investimento de nenhum gigante como MS ou Oracle.

Na sequência tivemos mais uma palestra do Akita sobre boas práticas de desenvolvimento web usando a ferramentas do Ruby como exemplo. Para terminar o dia eu concluí com as duas horas restantes do mini-curso.

O resumo geral do FISL foi sensacional, vários contatos interessantes e deu para rever muita gente da comunidade Ruby e fazer aquele pós evento com direito a hora extra original com o pessoal do Rio.

Os slides do Mini-curso estão aqui.

EDTED BH

Em Julho recebi um convite da Arteccom para o EDTED de BH. O tema seria uma introdução ao Rails mas como evento coincidiu com o OxenteRails e eu já tinha confirmado com a organização do Oxente acabei não podendo comparecer ao EDTED (infelizmente).

Mas não podíamos deixar o EDTED sem uma palestra de Rails então Bruno Alves da Dito aceitou convite e a palestra parece ter sido um sucesso ( já era o esperado vindo do Bruno .

OxenteRails

Sobre o Oxente Rails, em Natal, não tenho palavras suficientes para descrever o evento.

Acabei indo de última hora e também não tinha comparecido no ano anterior então eu não sabia muito bem o que esperar.Mas o evento superou todas as expectativas possíveis. Extramente bem organizado e com palestrantes de auto nível.

O evento correu em duas trilhas paralelas e eu imaginei que não teria audiência para lotar os dois auditórios mas foi o contrário.

Foi bem legal para reencontrar a comunidade toda e conhecer pessoas como Caike da Envylabs, Geoffrey do Peepcode, Arthur Geek e várias outras pessoas que não vou me lembrar agora.

Quantos as palestras, pessoalmente gosto mais de conteúdo técnico e nesta linha as que me chamaram mais antenção (das poucas que assisti) foram as do Caike sobre refactoring e a do Geoffrey sobre sugestões de arquitetura em Rails.

Eu falei sobre Steak e você pode ver os slides neste link

Sobre o oxente eu só tenho a agradecer ao Paulo Fagiani, Annaysa e toda a equipe da Tink (Rafael, Anderson, etc). E claro não posso esquecer do Vinicius Teles por me fazer abrir o olho e enviar um tema para o evento e não deixar a oportunidade passar.

<iframe src=”http://player.vimeo.com/video/14350633?byline=0&amp;portrait=0&amp;color=b30000″ height=”304″ width=”540″></iframe>

Definitivamente o evento mais importante de Rails do Brasil (já que Rails Summit virou RubyConf .

Serpro

Duas semanas após o Oxente eu ministrei uma apresentação sobre o ecossistema Rails no Serpro MG a convite da Kátia, Alexandre e Harley (mais uma vez obrigado aos três).

Para o conteúdo eu usei boa parte da palestra que o Akita usou no FISL (com autorização dele). É um conteúdo que acho perfeito para dar uma visão geral de como caminha a comunidade em volta do Rails.

Os slides da palestra você encontra aqui

Próximos eventos

Durante este meio tempo também concluímos um treinamento da Egenial com 40 alunos e houveram vários eventos que não tive como comparecer. Destaque para o RSonRails e o encontro do pessoal do Rio.

Nos próximos meses vamos participar do seminário de “computação da UFOP” e também teremos uma palestra de Ruby na Inforuso, que está sendo organizado pelo Márcio Sete. Também não dá para esquecer do encontro de sábado agora (amanhã) do RailsMG.

Conclusão

Com todos esses eventos acontecendo e com o resultado fica bem claro que o interesse por Ruby no Brasil está começando a explodir agora.

Outra coisa que percebi é que mesmo com tantos eventos este interesse crescendo, são poucos os desenvolvedores mais experientes. Então é muito importante que os organizadores de evento tenham isso em mente.

Apesar de nós que trabalhamos como Rails a bastante tempo querermos eventos mais pesados e com conteúdo mais avançado, somos a minoria e qualquer evento no Brasil que carregue Ruby ou Rails no nome deve lembrar-se do iniciantes ao menos em algum momento na grade.

Além de introdução ao Ruby e ao Rails também é importante introdução a temas como TDD, Git, automatização de deploy e tudo mais que já é cotidiano de desenvolveres Ruby.

Nos vemos na Ruby Conf