RiaPT AUG > Blog

Flex Tooltips

Mon, 12 Oct 2009 11:12:27 +0000

Entry by Mauro Alexandre Martins

Entry

Depois de ter visto o site do Adobe Air on Tour gostei muito da forma como eram mostradas as ToolTips.

Sendo assim, tentei verificar como se conseguia a "setinha" que aparece junto da ToolTips...

Image

Depois de ter visto o site do Adobe Air on Tour gostei muito da forma como eram mostradas as ToolTips.

Sendo assim, tentei verificar como se conseguia a "setinha" que aparece junto da ToolTips...

Descobri então que há um parâmetro que passamos no método para criar um objecto deste tipo que faz com que possamos escolher se a "seta" aparece, e se sim, onde.

Claro que até pode não ser a melhor maneira de fazer este processo, uma vez que perdemos a noção de erro nas tooltips, e podemos criar o mesmo efeito através de styling através de CSS (confesso que não sei se é possível adicionar a seta...) mas esta deve ser, certamente, a forma mais rápida e mais fácil.

createToolTip(textoToolTip_str, coordX_num, coordY_num, estiloErro_str, contexto);

Segue o código explicado com um exemplo em que não utilizamos a errorTip e outros três em que modificados a propriedade do estilo do erro para que apareça em zonas diferentes:

Código:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="vertical">

    <mx:Script>
        <![CDATA[
            import mx.managers.ToolTipManager;
            import mx.controls.ToolTip;

            // Variáveis utilizadas no código
            private var myTip : ToolTip;
            private var et_txt : String;
            private var tipX : Number;
            private var tipY : Number;
            private var tt_txt : String;

            /**
             * createBigTip
             * @param e - Objecto com a referência ao que foi clicado
             */
            private function createBigTip( e : Object ) : void
            {

                // Referência ao nome do botão
                tt_txt = String( e.target.name );

                switch ( tt_txt )
                {

                    /**
                     * Atribuição dos parâmetros
                     * et_txt - String que nos diz se a "seta" aparece e onde;
                     * tt_txt - Texto que é passado para a caixa de texto;
                     * tipX - Coordenada da tooltip no eixo X;
                     * tipT - Coordenada da tooltip no eixo Y;
                     */

                    case "button1" :
                        et_txt = null;
                        tt_txt = "et_txt = null";
                        tipX = e.currentTarget.x + e.currentTarget.width + 10;
                        tipY = e.currentTarget.y;
                        break;
                    case "button2" :
                        et_txt = "errorTipRight";
                        tt_txt = "et_txt = errorTipRight";
                        tipX = e.currentTarget.x + e.currentTarget.width + 10;
                        tipY = e.currentTarget.y;
                        break;

                    case "button3" :
                        et_txt = "errorTipAbove";
                        tt_txt = "et_txt = errorTipAbove";
                        tipX = e.currentTarget.x;
                        tipY = e.currentTarget.y - e.currentTarget.height - 25;
                        break;
                    case "button4" :
                        et_txt = "errorTipBelow";
                        tt_txt = "et_txt = errorTipBelow";
                        tipX = e.currentTarget.x;
                        tipY = e.currentTarget.y + e.currentTarget.height + 10;
                        break;

                }

                // Criação da ToolTip com os valores referidos acima
                myTip = ToolTipManager.createToolTip( tt_txt, tipX, tipY, et_txt )as ToolTip;
            }

            /**
             * destroyBigTip
             * @param e - Objecto com referência ao que foi clicado
             */
            private function destroyBigTip( e : Object ) : void
            {
                ToolTipManager.destroyToolTip( myTip );
            }
        ]]>
    </mx:Script>

    

    <mx:Button id="button1"
               label="Show right"
               rollOver="createBigTip(event)"
               rollOut="destroyBigTip(event)"/>
    <mx:Button id="button2"
               label="Show right"
               rollOver="createBigTip(event)"
               rollOut="destroyBigTip(event)"/>
    <mx:Button id="button3"
               label="Show above"
               rollOver="createBigTip(event)"
               rollOut="destroyBigTip(event)"/>
    <mx:Button id="button4"
               label="Show bellow"
               rollOver="createBigTip(event)"
               rollOut="destroyBigTip(event)"/>

</mx:Application>

Se quiserem ver o exemplo "live": Exemplo

Se quiserem descarregar o projecto: ToolTips.zip

Se quiserem saber mais sobre ToolTips..

Flex Help Resource Center

Adobe Developer Connection

Abraço e até daqui a uns dias!

Keywords

flash, flex, tooltips

File

Tooltips.zip (14KB)

Tutorial parte I - Flex Air & SQLite

Thu, 01 Oct 2009 07:52:25 +0000

Entry by Mauro Alexandre Martins

Entry

Esta é a primeira parte de uma série de três tutoriais que vou colocar sobre a integração de Flex com AIR e SQLite. A primeira (esta) vai centrar-se em uma breve introdução ao AIR com SQLite e vamos criar uma aplicação onde vamos adicionar uma base de dados local, inserir vários tipos de dados e depois coloca-los directamente em uma datagrid em Flex.

A parte dois que será colocada mais tarde (estou a trabalhar nela) será centrada em criar uma form para adicionar dinamicamente informação à base de dados e em colocar várias tabelas a interagirem entre si em que a primeira tem dados e a segunda possui várias informações relativas aos items anteriores.

A terceira será depois a integração das chamadas da base de dados com itemClasses e também ValueObjects.

Espero que gostem! Mauro.

Image

Sem dúvida que se há uma coisa que o Adobe AIR tem de interessante é a capacidade de ser possível criar base de dados locais sem a necessidade de nenhum servidor local como o wamp ou semelhante e com extrema facilidade.

Ter a possibilidade de inserir, actualizar e retirar informação de uma estrutura de base de dados é sem dúvida mais fácil de gerir do que, por exemplo, a utilização de ficheiros de texto ou então ficheiros com estruturas em XML como por vezes acontece.

Este tipo de interactividade entre o Flex ou Flash com estas estruturas permitem-nos fazer relações entre várias tabelas, podendo assim associar facilmente dados que poderão estar organizados nas famosas sequências “one-to-many” (uma entrada na tabela TAB_1 tem várias entradas associadas na tabela TAB_2). Isto torna a injecção de dados em componentes de Flex ou Flash numa acção simples e quase directa.

Para começar a utilizar este tipo de estrutura e para podermos ter qualquer interacção com uma base de dados em SQLite através do AIR, são precisos ,no mínimo, três elementos: um ficheiro (base de dados), uma conexão e uma declaração (query).

Este tutorial vai ser constituído por três partes sendo a primeira mais simples, com criação, adição e preenchimento de uma dataGrid em Flex. A segunda parte do tutorial terá também relação entre mais que uma tabela na mesma base de dados (realções on-to-many) e mais tarde, vamos utilizar itemClasses para termos um mapeamento perfeito e mais correcto da nossa aplicação.

Passando ao código...

// Criamos uma variável que vai guardar a referencia ao nosso ficheiro de base de dados
private var dbFile:File;

// Criamos uma nova conexão e abrimos o ficheiro que contem a base de dados
private var conn:SQLConnection;

// Método init para iniciar as nossas variáveis e associar-lhes valores
private function init () : void {
   dbFile = File.applicationStorageDirectory.resolvePath("employees.db");
   conn = new SQLConnection();
   conn.open(dbFile);
   createDataBase();
   insertDataBase();
   selectDataBase();
}

// Primeiro criamos a nossa base de dados local
private function createDataBase() : void
{
    // Criamos a variável que vai executar a nossa query, atribuimos a nossa conexão, e criamos a query para depois executar
   var statement : SQLStatement = new SQLStatement();
    statement.sqlConnection = conn;
    statement.text = "CREATE TABLE employees (empId INTEGER PRIMARY KEY AUTOINCREMENT, empName VARCHAR(255))";
    statement.execute();
}

Da mesma forma que é fácil criar uma base de dados, também é fácil adicionarmos conteúdo à mesma bastanto quase copiar o código anterior mudando apenas a nossa query.

private function insertDataBase():void
{
    var dbStatement:SQLStatement = new SQLStatement();
    dbStatement.sqlConnection = conn;
    dbStatement.text = "INSERT INTO employees (empName) VALUES (:empName)";
    dbStatement.parameters[ ":empName" ] = "António";
   dbStatement.execute();
}

Agora que já temos conteúdo, podemos ir buscá-lo através de um SELECT à base de dados

private function selectDataBase():void
{
    var dbStatement:SQLStatement = new SQLStatement();
    dbStatement.sqlConnection = conn;

    dbStatement.text = "SELECT * FROM employees";
    dbStatement.execute();

    // Se quiserem ver o resultado da vossa query...
   var ac:ArrayCollection = new ArrayCollection(dbStatement.getResult().data);
    var acLength : Number = ac.length;
   for ( var i:uint; i < acLength; i++ )
    {
       trace( ac[i].empId + " - " + ac[i].empName );
   }

}

Já temos aqui uma primeira base mas ainda nos falta controlar várias acções, nomeadamente controlar a execução dos eventos e ter a certeza que estes ocorrem correctamente e só acedemos aos dados quando estes são recebidos / inseridos na nossa aplicação.

Passando para um exemplo mais concreto, temos, nesta parte I deste tutorial, uma lista de trabalhadores de uma empresa que está guardada em uma base de dados SQLite.

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
                        layout="absolute"
                        creationComplete="init()">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            // Variável que vai ter a informação para o array e que bind para a nossa datagrid
            [Bindable]
            private var empArray : ArrayCollection;

            // Variáveis de conexão
            private var dbFile : File;
            private var conn : SQLConnection;
            private var dbStatement : SQLStatement;

            // Variáveis para controlar as nossas queries
            private var empNames : Array = new Array( "António Amaro", "Marco Silva", "Luis Ribeiro", "Salvador Mesquita", "Lourenço Pinto", "João Guimarães" );
            private var empLoc : Array = new Array( "Financeira", "Desenvolvimento", "Recursos Humanos", "Transportes", "Desenvolvimento", "Vendas" );
            private var empTel : Array = new Array( "351", "456", "745", "860", "254", "555" );
            private var empPos : Number = 0;

            /**
             * INIT
             */
            private function init() : void
            {
                // Criamos a referência para o nosso ficheiro
                dbFile = File.applicationStorageDirectory.resolvePath( "employees.db" );

                // Criamos uma nova conexão que nos vai ligar à base de dados
                conn = new SQLConnection();

                // Se a base de dados existe abrimos, senão criamos uma nova
                // Dependendo da acção atribuimos diferentes listeners para invocarmos diferentes métodos
                if ( !dbFile.exists )
                {
                    conn.addEventListener( SQLEvent.OPEN, connOpen );
                } else
                {
                    conn.addEventListener( SQLEvent.OPEN, selectDataBase );
                }
                // Abrimos a base de dados
                conn.open( dbFile );
            }

            /**
             * connOpen
             */
            private function connOpen( e : SQLEvent ) : void
            {
                // abriu a conexão, vai então criar a base de dados
                createDataBase();
            }

            /**
             * createDataBase
             */
            private function createDataBase() : void
            {
                // Criamos a variável que vai executar a nossa query, atribuimos a nossa conexão, e criamos a query para depois executar
                dbStatement = new SQLStatement();
                dbStatement.sqlConnection = conn;
                dbStatement.addEventListener( SQLEvent.RESULT, insertEmpNames, false, 0, true );
                dbStatement.text = "CREATE TABLE employees (empId INTEGER PRIMARY KEY AUTOINCREMENT, empName VARCHAR(255), empLoc VARCHAR(255), empTel INTEGER)";
                dbStatement.execute();
            }

            /**
             * insertEmpNames
             */
            private function insertEmpNames( e : SQLEvent ) : void
            {
                // Depois de criada a base de dados vamos preencher informação
                insertDataBase();
            }

            /**
             * insertDataBase
             */
            private function insertDataBase() : void
            {

                dbStatement = new SQLStatement();
                dbStatement.sqlConnection = conn;

                // Vamos inserindo novos elementos à base de dados até percorrermos todo o nosso array
                if ( empPos < empNames.length - 1 )
                {
                    dbStatement.addEventListener( SQLEvent.RESULT, insertEmpNames, false, 0, true );
                } else
                {
                    dbStatement.addEventListener( SQLEvent.RESULT, selectDataBase, false, 0, true );
                }

                // Agora vamos adicionar para cada campo, um objecto com o valor que queremos inserir na tabela
                dbStatement.text = "INSERT INTO employees (empName, empLoc, empTel) VALUES (:empName, :empLoc, :empTel)";
                dbStatement.parameters[ ":empName" ] = empNames[ empPos ];
                dbStatement.parameters[ ":empLoc" ] = empLoc[ empPos ];
                dbStatement.parameters[ ":empTel" ] = empTel[ empPos ];
                empPos++;
                dbStatement.execute();

            }

            /**
             * selectDataBase
             */
            private function selectDataBase( e : SQLEvent ) : void
            {
                dbStatement = new SQLStatement();
                dbStatement.sqlConnection = conn;
                dbStatement.addEventListener( SQLEvent.RESULT, attribDataGrid, false, 0, true );

                // Depois de inseridos todos os registos vamos seleccionar tudo que está na base de dados
                dbStatement.text = "SELECT * FROM employees";
                dbStatement.execute();
            }

            private function attribDataGrid( e : SQLEvent ) : void
            {
                // Vamos buscar o valor retornado pela base de dados e colocar directo num array collection
                empArray = new ArrayCollection( dbStatement.getResult().data );
            }
        ]]>
    </mx:Script>

    <mx:Panel width="100%"
              paddingTop="10"
              paddingBottom="10"
              paddingLeft="10"
              paddingRight="10"
              title="TRABALHADORES DA SOFT S.A.">

        <mx:DataGrid width="100%"
                     dataProvider="{empArray}">
            <mx:columns>
                <mx:DataGridColumn headerText="Nome"
                                   dataField="empName"/>
                <mx:DataGridColumn headerText="Departamento"
                                   dataField="empLoc"/>
                <mx:DataGridColumn headerText="Telefone"
                                   dataField="empTel"/>
            </mx:columns>
        </mx:DataGrid>
    </mx:Panel>

</mx:WindowedApplication>

Como podem ver, é bem simples criamos um sistema de base de dados que a cria, adiciona e mostra os resultados para uma datagrid. Como disse mais a cima, na parte dois do tutorial vamos avançar para relações entre várias tabelas na mesma base de dados para podermos associar a um só item de uma tabela, várias informações de outra.

NOTA: Se quiserem ir testando a criação dos ficheiros de base de dados e não conseguem porque a base de dados já está criada podem apagar "à mão" os ficheiros que ficam guardados no vosso computador.

WINDOWS: C:\Users\<user>\AppData\Roaming

MAC: <user>\Libraries\

Podem descarregar o projecto que está associado a este post.

Para mais informações sobre SQLite no AIR:
http://coenraets.org/blog/2008/02/sqlite-admin-for-air-10/
http://livedocs.adobe.com/flex/3/langref/localDatabaseSQLSupport.html

Uma ferramenta muito boa para poderem ver o que vai acontecendo e a estrutura da vossa base de dados, eu aconselhava a instalarem o Lita que foi referenciado num anterior post meu sobre As melhores aplicações AIR para Designers e Developer.

Até à próxima e espero que tenham gostado!

Mauro Martins.

Keywords

adobe air, flex, sqlite, mauro martins, sqlconnection, database AIR, sqlresult, sqlstatement

File

DatabaseTutorial.zip (5KB)

Slides da apresentação "Flash&Arduino - uma ligação com sentimento"

Fri, 25 Sep 2009 12:17:39 +0000

Entry by Flash Grettir

Entry

Ontem realizei uma apresentação na monthly-meeting do nosso UserGroup...aqui estão os slides (o video deverá de estar disponivel em breve)

Keywords

Flash, Arduino

File

Flash & Arduino - Uma ligacao com sentimento.swf (1.6MB)

Slides da apresentação “Rich Internet Applications – Uma Visão Geral” no CTIC 2009

Thu, 02 Jul 2009 15:15:18 +0000

Entry by João Saleiro

Deixo aqui o link para os slides da minha apresentação “Rich Internet Applications – Uma visão geral” no CTIC 2009 em Viseu a 13 de Maio. Esta apresentação é útil para quem está a entrar nesta coisa das RIAs e quer perceber exactamente o que são, e quais as diferenças e vantagens face às aplicações Desktop e Web. Espero que vos seja útil.

Slides da apresentação “Enterprise RIAs” no FlashCamp

Sat, 27 Jun 2009 12:20:59 +0000

Entry by João Saleiro

Entry

Tal como prometido, aqui estão os slides da apresentação “Enterprise RIAs - This is how we do it“. Espero que tenham gostado e que a apresentação vos tenha sido útil.

Keywords

best practices, scrum, maven, sonar, subversion, trac, mylyn, hudson, frameworks, design patterns

Passar VO(Value Objects) com uma Class Event (1 Comment)

Fri, 03 Apr 2009 02:01:05 +0000

Entry by joaoGoncalves

Entry

Durante as minhas aulas de Actionscript em ambiente de FLASH, por norma verifico que os formandos têm alguma dificuldade em utilizar algumas das "best practices" mais comuns nomeadamente em relação á criação de Eventos personalizados, no entanto, e assim que conseguem ultrapassar essa barreira, a primeira questão que me colocam é sempre a mesma:

“então e se eu quiser enviar dados pelo meu Event Object, por forma a ……”

Eis que surge então a necessidade de passar o conceito de VO (Value Object) e criação de Classes de Eventos personalizadas.

Como tive hoje que criar alguns ficheiros para exemplificação do Conceito de Classe de Evento Personalizada para envio de dados de uma instância para outra, resolvi partilhar convosco neste Blog os mesmos Ficheiros na esperança que venha ainda a ser útil para alguns dos meus leitores, ou ainda servir de ponto de consulta e esclarecimento de dúvidas para aqueles que durante as aulas não perceberam o conceito.

Sendo Assim vamos começar por analisar o pequeno problema que se coloca, e que servirá de “Case Study” para a criação de uma Class de Evento personalizada e do conceito de VO.

PROBLEMA:

Temos um form onde a pessoa regista o seu nome, idade e situação laboral, e ao clicar num botão registar, pretende-se acrescentar a uma lista (Texto) os dados da pessoa.

RESOLUÇÃO:

Criar uma Class PessoaVO, que irá servir para armazenar os dados da pessoa que forem inseridos no Form
Criar uma Class PessoaEvent, que será uma subclass da Class Event, e que servirá para enviar um “Event Object” que incluirá uma instância da Class PessoaVO, com os dados anteriormente adquiridos no Form.
A Aplicação principal estará á “escuta” da ocorrência do Evento PessoaEvent, e quando este for detectado, receberá pelo “Event Object” uma instância de PessoaVO com os dados da pessoa.
A Aplicação após receber os dados da pessoa insere e actualiza a TextArea com os registos das pessoas.

Mãos á obra, vamos começar por criar um ficheiro em FLASH, com um form com duas instâncias de TextInputs, para o nome e idade, uma instância de CheckBox para o estado laboral e um botão de registo, ao lado criar uma Textarea para ir acrescentando os Registos, ou seja, qualquer coisa deste género(desculpem mas a designer estava de folga, lol):

Passo seguinte vamos criar a Class PessoaVO, que será uma classe Value Object, e por esse motivo terá somente propriedades, propriedades estas que servirão para guardar os dados do form de registo:

package {

public class PessoaVO {

public var nome:String;

public var idade:int;

public var empregado:Boolean;

}

Depois de criar a Class responsável pelo armazenamento e transporte dos dados do formulário vamos criar a Class PessoaEvent, que irá ser uma SubClass da Class Event:

package {

import flash.events.Event;

import PessoaVO;

public class PessoaEvent extends Event {

public static const PESSOA:String = "pessoa";

public var dadosPessoa:PessoaVO;

public function PessoaEvent(type:String, voPessoa:PessoaVO) {

super(type);

this.dadosPessoa = voPessoa;

}

public override function clone():Event {

return new PessoaEvent(type, dadosPessoa);

}

Esta Class começa por fazer o "extends" da Class Event, na linha 9, criamos uma constante do tipo de String que irá identificar o "type" do nosso evento para usar depois como por exemplo usamos o CLICK num MouseEvent, na linha 10 criamos uma instância de PessoaVO, para guardar os dados do form e posteriormente enviar os mesmos pela instância de evento criada. O constructor da Class é bastante simples e terá como parâmetros o "tipo " de evento criado, e a instância, neste caso, de PessoaVO. na linha seguinte (13), chamamos o constructor da Class "Pai" para passar o tipo de evento criado, aqui não se passa qualquer parâmetro extra pois a Class "Event" não contêm parâmetros adicionais. Na linha 14 atribuímos á instância da class "dadosPessoa" os valores recebidos no parâmetro voPessoaConstructor da Class. Por fim é necessário efectuar o overrride do método clone da class Event, de forma a que esta instância de evento tenha um comportamentos normal de um evento como o "Bubbling" por exemplo, nesta definição retornamos o event criando a instância do novo evento e passando os dados armazenados na instância da PessoaVO. do Por fim criamos a Document Class do nosso ficheiro:

package {

import flash.display.MovieClip;

import flash.events.MouseEvent;

public class MainEventPessoa extends MovieClip {

public var pessoa:PessoaVO;

public function MainEventPessoa() {

pessoa = new PessoaVO;

registarBtn.addEventListener(MouseEvent.CLICK, registar);

this.addEventListener(PessoaEvent.PESSOA, receberPessoa);

}

private function receberPessoa(e:PessoaEvent):void {

registosTa.appendText("\n------------------\n"

+ "Nome: " + String(e.dadosPessoa.nome) +

"\n" + "Idade: " + String(e.dadosPessoa.idade) + "\n" +

"Nome: " + String(e.dadosPessoa.empregado) + "\n");

}

private function registar(e:MouseEvent):void {

pessoa.nome = nomeTi.text;

pessoa.idade = int(idadeTi.text);

pessoa.empregado = empregadoCb.selected;

dispatchEvent(new PessoaEvent("pessoa", pessoa));

}

Nesta Document Class, começamos por criar uma instância de PessoaVO, onde iremos atribuir os valores dos dados que irão ser preenchidos no FORM, na linha 13, definimos o evento click no botão registar que irá inicializar toda a sequência do script. o Listener do clicar em Registar vai associar os dados dos campos do form ás propriedades da instância de PEssoaVO (pessoa) linhas 26 a 28, na linha 30 "criamos" um evento do tipo PessoaEvent, onde iremos incluir nos parâmetros do constructor, o nosso PessoaVO com o nome "pessoa". Na linha 14 a nossa Aplicação recebe o evento "PessoaEvent.PESSOA", e chama o listener das linhas 18 a 22 que irá acrescentar(para os mais esquecidos deverão sempre usar o método appendText da Class TextField, e não o operador " += " para concatenar strings) á TextArea os dados que recebeu no "Evento Object" e que acedemos na propriedade "dadosPessoa" deste.

espero que este Post seja esclarecedor para muitos de vós, não hesitem em colocar questões ou sugestões para explicações futuras, deixo aqui tb um ficheiro zip com os ficheiros exemplificando o mini-tutorial.

Keywords

Actionscript,Best Practice, FLASH

Simular o ambiente de produção usando Virtual Hosts no Apache

Sat, 13 Dec 2008 14:37:14 +0000

Entry by João Saleiro

Quando se constroem aplicações web, é normalmente uma boa prática configurar-se o ambiente de desenvolvimento de forma a que seja o mais semelhante possível ao ambiente de produção.
Uma das configurações que se faz antes de se iniciar o desenvolvimento do projecto, é a criação de um virtual host cuja configuração seja o mais idêntica possível à configuração do servidor onde o projecto estiver alojado.

Entre outras configurações, a mais importante é a estrutura de directorias, que em desenvolvimento é diferente da estrutura em produção.

Regra geral, quando se trata de uma aplicação com backend e um backoffice nós costumamos organizar o nosso ambiente de desenvolvimento desta forma:

\webfuel\projecto

\webfuel\projecto\frontend
\webfuel\projecto\frontend\bin-debug (binários da aplicação)
\webfuel\projecto\frontend\src
\webfuel\projecto\frontend\[...]

\webfuel\projecto\backoffice
\webfuel\projecto\backoffice\bin-debug (binários do backoffice)
\webfuel\projecto\backoffice\src

\webfuel\projecto\backend (backend, por exemplo em php)
\webfuel\projecto\mm (imagens, e outros recursos multimédia)

Quando corremos a aplicação localmente, sem os virtual hosts, vamos obter algo como http://localhost/projecto/bin-debug/index.swf .

Para que a aplicação possa comunicar com o backend, o path para o gateway será por exemplo algo como ../../backend/gateway.php .

Para que a aplicação possa aceder aos recursos multimédia (imagens, etc) o caminho será algo como ../../mm/imagem1.jpg .

Estes caminhos não batem certo com os caminhos na versão de produção:

www.projecto.pt (binários da aplicação) www.projecto.pt/backoffice (binários do backoffice) www.projecto.pt/backend (backend, por exemplo em php) www.projecto.pt/mm (imagens e recursos multimédia)

Vemos que na versão de produção a aplicação para aceder ao backend vai fazer o caminho backend/gateway.php - enquanto que na versão de desenvolvimento, fazia o caminho ../../backend/gateway.php . O mesmo se aplica para as restantes directorias.

Há muita gente que trabalha com a estrutura de directorias e caminhos do ambiente de desenvolvimento, e quando chega a altura de alojar o projecto, mudam os caminhos no source code (ou num ficheiro de configuração) e recompilam - má prática.

Solução: criar um virtual host

O Apache permite que se associe um ambiente com configurações específicas a um determinado domínio. Ou seja, se o Apache receber um pedido de acesso ao dominio www.projecto.dev , e houver um virtual host para esse dominio, podemos configurá-lo para devolver a nossa própria estrutura de directorias (e não só).

O que gostariamos era de escrever no browser www.projecto.dev , e ser-nos exposto o nosso projecto com a estrutura de directorias igual à estrutura que vamos obter no servidor.

Vamos começar por configurar o apache editando o ficheiro httpd.conf na directoria conf do apache. No final do ficheiro, basta adicionar as seguintes linhas:

NameVirtualHost 127.0.0.1 Include conf/vhosts/*.conf

A primeira linha permite que o apache possa associar os nomes dos domínios pedidos aos virtual hosts que vamos configurar (mais info aqui).

A segunda linha indica ao Apache para carregar e executar todos os ficheiros de configuração com a extensão .conf na directoria vhosts. Isto fará com que criar um novo virtual host seja algo como criar um novo ficheiro .conf na directoria vhosts.

Vamos agora à directoria vhosts, e vamos criar um ficheiro chamado projecto.conf .

Nesse ficheiro, vamos colocar o seguinte:

<VirtualHost 127.0.0.1:80> DocumentRoot "D:\OsMeusProjectos\projecto\frontend\bin-debug" ServerName www.projecto.dev <Directory "D:\OsMeusProjectos\projecto\frontend\bin-debug"> Options Indexes FollowSymLinks Includes ExecCGI AllowOverride All Order allow,deny Allow from all </Directory>

Alias /backend "D:\OsMeusProjectos\projecto\backend"
Alias /backoffice "D:\OsMeusProjectos\projecto\backoffice\bin-debug"
Alias /mm "D:\OsMeusProjectos\projecto\mm"
</VirtualHost>

Isto vai indicar ao Apache que os pedidos recebidos na porta 80, máquina 127.0.0.1 relativos ao domínio www.projecto.dev irão ter a directoria bin-debug do frontend como a directoria de raíz do projecto. Os Aliases permitem que o Apache exponha o backend, backoffice e mm em directorias específicas, resultando assim num ambiente igual ao de produção.
Depois de feita a alteração acima, é preciso reiniciar o Apache.

Falta conseguirmos fazer com que pedidos para www.projecto.dev vão parar ao Apache. Para isso, vamos mexer no ficheiro "hosts" do Windows para forçarmos o redireccionamento de pedidos para www.projecto.dev para a nossa máquina local.
Basta para isso editar o ficheiro hosts (mais info no wikipedia), na directoria c:\windows\system32\drivers\etc . Recordo que no Windows Vista, será preciso abrir um editor de texto com permissões de administrador, e depois fazer o File > Open e procurar o ficheiro no disco - caso contrário não será possível editá-lo.

Neste ficheiro, bastará colocar o seguinte:

127.0.0.1 www.projecto.dev

A linha acima vai indicar o sistema operativo que todos os pedidos feitos para o domínio www.projecto.dev vão ser reencaminhados para 127.0.0.1 - a nossa máquina local. Como estamos a fazer os pedidos dentro de um web-browser, a porta por defeito será a 80. O resto é fácil de adivinhar: pedidos para a nossa máquina local na porta 80 vão ser entregues a quem? Ao nosso amigo Apache! Que ao receber um pedido destinado ao domínio www.projecto.dev, vai procurar o Virtual Host respectivo e expô-lo com a estrutura que definimos.

Obviamente, isto abre-nos as portas para fazer configurações mais radicais (i.e. configurar o Apache para que o Virtual Host seja igualzinho ao do servidor final).

Aumentar a velocidade no carregamento de PNG's convertendo-os para SWF

Thu, 04 Dec 2008 15:15:59 +0000

Entry by João Saleiro

Fizemos na Webfuel um projecto há uns meses para um dos principais criadores de joias nacionais. Um dos requisitos do cliente era que na secção de showroom, cada joia pudesse ser apresentada dentro de uma ferramenta de zoom que permitisse ver a joia em detalhe - implicando que as fotos das joias tivessem resoluções superiores a 700x700 pixeis. Outro dos requisitos, era que as imagens das joias não tivessem fundo para que pudessem encaixar correctamente no layout do site - implicando que teria que ser escolhido um formato que suportasse transparência, neste caso PNG. Para terminar, era imperativo que o cliente, sem quaiquer conhecimentos de informática, pudesse adicionar e actualizar as fotos das joias através do backoffice - implicando que cada foto fosse um PNG colocado no servidor pelo cliente através das funcionalidades do backoffice.

Estas pré-condições implicaram o recurso ao formato PNG - o único que permitiria resolver o problema, visto a norma JPEG2000 não ser suportada pelo Flash Player. Porém, adoptar o formato PNG para as fotos das joias com as dimensões acima referidas resultou em ficheiros de cerca de 500KB. Isto, num site com cerca de 200 a 300 jóias, com várias fotos cada.

Depois do deployment do site constatou-se o esperado: em ligações rápidas, os 500KB de cada foto não representavam grandes problems, mas em ligações lentas podia ser desesperante esperar de 10 a 20 segundos para a foto carregar. E com o disseminar recente das ligações 3,5G (kangurus, vodafone e tmn connect box, etc), tornou-se problemático pelo que tivemos que procurar por uma solução.

Encontrámos uma extensão chamada PNG2SWF pertencente ao pacote SWFTools que permitia converter um PNG para um SWF. Como é sabido, um PNG embebido em SWF pode levar compressão sendo mantida a transparência, pelo que decidimos fazer algumas experiências. Após alguns testes, tivemos resultados impressionantes: imagens de 500 Kb passaram para 60 Kb sem serem perdidos os canais alpha. Exactamente o que precisávamos!

O problema que surgiu de seguida consistia em saber como integrar o PNG2SWF com o site / backoffice sem afectar a experiência do utilizador. Era importante que o cliente continuasse a utilizar o backoffice como sempre, sem trabalho adicional.

Fizemos então um script simples, que vos ofereço adiante, e que consiste num género de proxy para carregar PNGs, só que devolve o PNG convertido para SWF, e escalado para dimensões arbitrárias escolhidas pelo programador.

O download do script pode ser feito aqui: pngoptimize . O source code pode ser visto abaixo:

<?php

    // 31-10-2008
    // pngOptimize.php by João Saleiro - Webfuel ( joao.saleiro@webfuel.pt)
    // Todo:
    // - receive quality from $_GET vars
    // - set default values for quality, w and h

    $image = $_GET['url'];
    $w = $_GET['w'];
    $h = $_GET['h'];

    $date = filemtime($image);

    // Generate SWF filename
    $swf = $image . $w . $h .'_'. $date .'.swf';

    // Generate SWF if it doesn't exist
    if (!file_exists($swf))
    {
        // Calculate dimensions
        list($width, $height) = getimagesize($image);

        $proportion = 1;
        if ($width > $height)
            $proportion = $w/$width;
        else
            $proportion = $h/$height;

        // Load image and preserver transparency
        $im = @imageCreateFromPNG ($image);
        imagealphablending($im, false);
        imageinterlace ( $im, 0);
        imagesavealpha($im, true);

        // Create new Image
        $im_dest = imagecreatetruecolor ($width*$proportion, $height*$proportion);

        // Set transparency
        $background = imagecolortransparent($im);
        imagecolortransparent($im_dest, $background);
        imagealphablending($im_dest, false);
        imagesavealpha($im_dest, true);

        // Resize old image to new image
        imagecopyresampled($im_dest, $im, 0, 0, 0, 0, $width*$proportion, $height*$proportion, $width, $height);

        // Save new image
        $tempName=$image.'temp.png';
        imagepng($im_dest, $tempName);

        // Clean memory
        imagedestroy($im);
        imagedestroy($im_dest);

        // Convert new image to SWF
        shell_exec("./png2swf -j 85 -o $swf $tempName");

        // Remove temp file
        unlink($tempName);
    }

    // If we get here, and there's no file, we don't return nothing
    if (!file_exists($swf))
        exit(0);

    // Return generated SWF
    header("Content-type: application/x-shockwave-flash");
    $fp = fopen($swf,"rb");
    fpassthru($fp);
    fclose($fp);
?>

O algoritmo é relativamente simples:

O script recebe por GET os parâmetros: url, w e h, que correspondem ao endereço relativo do PNG, e as dimensões que queremos para o nosso SWF resultante;
O script vai então gerar um nome de ficheiro único para aquele url, com aquelas dimensões, e para a data do PNG (i.e. se o PNG for actualizado pelo cliente o script detecta que há um PNG novo, o que implica gerar um novo SWF com novo nome);
É verificado se já existe algum SWF com aquele nome único (i.e. uma versão em cache daquele PNG já convertido para SWF com aquelas dimensões). Se existir, o SWF é aberto e lido, e feito um fpassthru do ficheiro (i.e. é devolvido o conteúdo do ficheiro SWF), depois de definido o header application/x-shockwave-flash para que o Flash possa interpretar o resultado do ficheiro PHP como sendo um SWF;
Se não existir nenhum SWF, o script vai abrir o PNG referido no URL, e criar um novo PNG temporário com as dimensões referidas, mantendo a transparência;
É então feita a conversão desse PNG temporário para SWF através de um shell_exec que executa o png2swf com os parâmetros necessários para a conversão, sendo gerado um SWF com o nome de ficheiro referido acima, e devolvido com o fpassthru.

Para utilizar este script é necessário:

Colocar no servidor, na mesma directoria do pngConvert.php, o png2swf (linux) ou png2swf.exe (windows);
Permissões de execução do png2swf nessa directoria;
Permissões do php para a chamada de comandos externos (shell_exec);
Permissões de escrita nas directorias onde estão os ficheiros PNG para serem lá colocados os ficheiros SWF;

Do lado do cliente, o código necessário para carregar um PNG convertido para SWF através do pngConvert é:

MXML:

<mx:Image source="pngConvert.php?url=imagem.png&w=100&h=100"/>

Actionscript 3 (i.e. Flash)

var l:Loader=new Loader();

l.load(new URLRequest('pngConvert.php?url=imagem.png&w=100&h=100'));

addChild(l);

O script ainda pode levar algumas melhorias, nomeadamente:

a qualidade da imagem também ser passada por GET;
se os parâmetros w e h não estiverem definidos, o SWF gerado é da mesma dimensão que o PNG original.

Não implementei essas melhorias porque não precisei na altura, mas se alguém quiser melhorar, é bem vindo - publicarei depois aqui a versão melhorada, com devidos créditos.

Espero que esta informação e script vos sejam úteis. O script pode ser utilizado livremente e só pedimos que seja colocado um comentário neste post com o endereço do site onde o estão a usar, para alegrarem o nosso dia.

Client & Cloud

Thu, 27 Nov 2008 00:50:53 +0000

Entry by Rui Silva

Entry

Ainda de "ressaca" da MAX, pareceu-me interessante apresentar um conceito que foi avançado pelo Kevin Lynch na keynote de abertura da MAX e que me parece vai determinar em larga medida a forma como se vai desenvolver software nos próximos tempos.

O conceito em si não é nada de novo e, como acontece na maioria dos casos, inúmeras aplicações no mercado já o utilizam. No entanto, a formalização com um nome específico dá-lhe um ar oficial que o coloca ao nível de conceitos como "cliente-servidor" e "web application".

Este conceito diz respeito à forma como as aplicações cada vez mais tendem a comunicar com origens de dados. De um paradigma em que a grande maioria das aplicações possuem uma origem de dados bem definida (normalmente associada apenas com essa aplicação), passa-se para a conexão com diversas origens de dados diferentes que podem ser disponibilizadas por terceiros em qualquer parte do mundo dando corpo ao conceito de "cloud computing".

O que tornou isto possível foi a disponibilização de dados e até mesmo lógica através da publicação de web services que estão disponíveis para conexão utilizando protocolos standard bem definidos e que podem ser consumidos por uma infinidade de tecnologias tanto de cliente como de servidor.

Um exemplo clássico deste tipo de aplicações são os famosos mashups (quem ainda não fez um mashup?). O que esta apresentação do Kevin traz de especial é que ela foi inserida no seio de uma keynote que pretendia ser "séria" e que avançava a visão da Adobe para a evolução da programação. Não foi uma qualquer sessão de show-off em que pretendia apresentar as potencialidades de uma qualquer tecnologia ou plataforma. E eu acredito que realmente as coisas vão começar a ser feitas desse modo. A regra de ouro "se alguém na empresa já escreveu código para fazer isso, porque deverei eu escrevê-lo de novo?" passará a ser "se alguém na internet já escreveu e publicou um serviço para fazer isso....".

Será que, mais uma vez, a Adobe cunhou um conceito que vai "pegar" (tal como a Macromedia fez com o conceito RIA)? Será que este tipo de aplicações vão sair do âmbito das aplicações sociais e de entertenimento e vão invadir o mercado empresarial? Acho que só o futuro poderá responder a estas perguntas. O que é que vocês acham?

Keywords

Cloud computing, RIA, Client & Cloud

MAX 2008 NA

Tue, 25 Nov 2008 01:33:39 +0000

Entry by Rui Silva

Entry

Olá,

Este ano tive a felicidade de ir à MAX em S. Francisco. Não foi a minha primeira participação numa MAX mas foi a primeira vez que fui à sua versão norte americana.

De um modo geral, o evento foi tudo aquilo que se esperava dele e a possibilidade de estabelecer contactos efectivos com pessoas que, de outro modo, poderíamos nem sequer ter a oportunidade de conhecer é uma enorme mais valia resultante da participação nestes eventos.

Em termos de sessões, verificou-se que, este ano, a Adobe centrou-se ainda mais nas suas tecnologias de desenvolvimento de RIAs que, de facto, dominaram a grande maioria das sessões técnicas e foram um aspecto muito importante nas comunicações gerais. Coldfusion, LiveCycle e BlazeDS encontraram, também, um espaço bastante significativo o que permitiu a quem esteve presentente perceber de que forma se podem construir experiências web considerando todos os aspectos envolvidos (à excepção de uma solução de base de dados).

Um outro vector abordado que tem vindo a ganhar uma crescente notoriedade por parte da Adobe é o dos serviços como é o caso do Cocomo, uma plataforma construida sobre o Acrobat Connect que permite o desenvolvimento de aplicações em Flex com recurso a partilha em tempo real de dados, audio e vídeo.

Relativamente às sessões gerais, entre as participações do costume (O Shantanu e o Kevin Lynch fizeram as comunicações mais formais sobre a empresa e as tecnologias em desenvolvimento), houve uma que despertou bastante interesse quer pela forma como foi apresentada, quer pelo conteúdo apresentado. De facto, ver o Ben Forta e o Tim Buntel vestidos de "agentes especiais" à procura de uma solução para a criatividade foi um momento gratificante que deu origem a conversas entre os dois que pouco ficaram a dever a um qualquer filme de comédia do tipo "Get Smart". Os temas abordados nesta apresentação correram as tecnologias e ferramentas essenciais da Adobe para a criação de experiências de utilização ricas na internet tendo partido do design, passado pelo desenvolvimento e, finalmente, acabando na disponibilização das mesmas.

Os sneaks deste ano, apesar de bastante bons, deixaram um pouco a desejar relativamente ao de anos anteriores (também não é fácil rivalizar com o anúncio de um novo Flash player). Algumas tecnologias na área da imagem e vídeo foram apresentadas ao lado de plugins e plataformas que permitem o desenvolvimento mais fácil de aplicações web e desktop com recurso a diversos mecanismos automáticos e a conceitos largamente distribuídos por outras empresas e tecnologias como é o caso, por exemplo, dos widgets.

Resta-me apenas dizer que a cidade de S. Francisco é fantástica e que me senti perfeitamente em casa já que dizem que é das cidades americanas a que mais se assemelha a uma cidade europeia.

Quero finalizar esta entrada no blog agradecendo à Sumi Lim que é a Developer relations manager para EMEA e que, portanto, serve de interlocutora entre o nosso grupo e a Adobe. O carinho com que nos recebeu e o esforço que realizou no sentido de nos levar a conhecer e a manter contactos com o maior número de pessoas possível foi um dos aspectos mais importantes desta participação.

Keywords

MAX 2008, eventos

RiaPT AUG > Blog

Flex Tooltips

Entry

Image

More

Keywords

File

Tutorial parte I - Flex Air & SQLite

Entry

Image

More

Keywords

File

Slides da apresentação "Flash&Arduino - uma ligação com sentimento"

Entry

Keywords

File

Slides da apresentação “Rich Internet Applications – Uma Visão Geral” no CTIC 2009

Slides da apresentação “Enterprise RIAs” no FlashCamp

Entry

Keywords

Passar VO(Value Objects) com uma Class Event (1 Comment)

Entry

Keywords

Simular o ambiente de produção usando Virtual Hosts no Apache

Aumentar a velocidade no carregamento de PNG's convertendo-os para SWF

Client & Cloud

Entry

Keywords

MAX 2008 NA

Entry

Keywords