O Adobe User Group Porto vai realizar mais um evento dedicado às tecnologias Adobe!

O tema deste evento é a cultura e é por essa razão que é a Casa do Infante no Porto que o vai albergar.

Esperamos que este seja o primeiro de um ciclo de eventos subordinado ao mesmo tema e vamos tentar proporcionar aos assistentes não só uma experiência interessante ao nível dos conteúdos das sessões, mas também através de visitas aos próprios espaços onde vão ser realizados.

Horários, Sessões, Speakers:

• 10:00 – From Illustrator to Catalyst to Flash Builder – Rui Silva;
• 10:45 – Usando ORM com AIR e SQLite – Miguel Pinto;
• 11:15 – Break;
• 11:45 – Sessão 3 – Ainda por definir
• 12:30 – Almoço;
• 14:00 – Criar para o Playbook com o Flash Builder – Mauro Martins;
• 14:30 – Flex, Realidate Aumentada e Arduíno – Sérgio Silva;
• 15:00 – Prémios;
• 15:30 – Visita guiada ao Museu da Casa do Infante;

Mais informações no site do evento:

http://augporto.stagehq.com/events/601

Cumprimentos, Mauro.

Bem, já lá vai mais de uma semana que o Meeting do Porto decorreu.

Posso dizer que, de início, pensamos em colocar um limite de 100 pessoas no evento, mas depois pensamos que a procura não iria ser muita, uma vez que no último encontro eramos apenas… três pessoas!

No entanto, lá nos aventuramos em colocar o limite de 70 + 10 speakers e a aposta foi ganha! No final, e totalizando toda a gente, eramos 67 pessoas juntas no evento!

O que correu bem?

• O almoço

- Eramos cerca de doze pessoas e foi interessante falar das expectativas sobre o evento, de conversar com pessoas com quem não tivemos hipótese de trocar ideias noutros eventos, etc. O lombo estava bom e mesmo a queimar as duas, lá conseguimos pagar todos e lá fomos para o local onde ia decorrer o evento.

• O evento

- Como todos notaram, o evento começou com cerca de vinte minutos de atraso. Não havia problema se ninguém se esticasse nas apresentações (o que não foi o caso!).

- Uma coisa a referir foi o espírito de todos! Durante as cerca de cinco horas em que tivemos no edifício Maus Hábitos houve sempre um bom convívio, as piadas típicas dos apresentadores ao qual a plateia correspondia sempre com umas gargalhadas. O que dizer do Luís Martins que arranjou um milagroso projector porque o nosso era “esverdeado”.

• O jantar

Depois de tantas horas no evento, que bem que soube comer umas belas pizzas de… 50 centímetros, no S. Marino! Eramos também cerca de doze pessoas e o convívio foi muito interessante, dando para trocar ideias e falar sobre o que se passou no evento, sobre as novas tecnologias, experiências que tenhamos tido, etc. Tudo acabou, por volta da uma da manhã no Rivolli, onde decorria o Fantasporto.

• Conclusões

Como nunca nada corre perfeito, temos noção que houve várias falhas, mas todas elas devido à pouca experiência que os organizadores tinham em realizar eventos.

1. O local – Embora o local fosse interessante, era notório a falta de condições para a projecção dos conteúdos através do projector. O facto de ter ficado muito escuro a partir do meio do evento, fez com que o público quase não conseguisse ver os speakers.
2. Talvez devêssemos ter apenas uma refeição em conjunto. Assim, podíamos tentar ter mais pessoas no mesmo espaço;
3. O controlo do tempo. Esta sim, uma falha um pouco grave, umas vez que perdemos completamente a noção do tempo;

Apresentações:

Ainda não consegui que os vídeos ficassem todos disponíveis uma vez que temos limite, tanto no Vimeo, como no Youtube, de tempo para os vídeos (só dá para 10 minutos em cada).

No entanto, já podem ver o vídeo de introdução do evento aqui

Sendo assim, ficam aqui as apresentações que já nos foram facultadas pelos speakers. Quando me enviarem mais, actualizarei aqui o post

Mauro Martins:

Web – Construir é diferente de ver

Nuno Gomes:

HTML 5, a Realidade da Utopia

Miguel Pinto:

Zend Framework e Flash

Felipe Ávila:

The Usability Page

Cumprimentos a todos, e preparem-se porque vêm aí mais!

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:

Exemplo:

<?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>
 
    <!– Botões –>
 
    <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 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!

Introdução:

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.

Parte I

Sem dúvida que se há uma coisa que o Adobe AIR tem de interessante é a capacidadede 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 (relaçõ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.

Exemplo:

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\preferences\

Podem descarregar o projecto aqui:

download do ficheiro

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.